sync

[bootswatch] / MDB Free / sass / mdb / free / _navbars.scss

diff --git a/MDB Free/sass/mdb/free/_navbars.scss b/MDB Free/sass/mdb/free/_navbars.scss
new file mode 100644 (file)
index 0000000..24b02a5
--- /dev/null
+++ b/MDB Free/sass/mdb/free/_navbars.scss
@@ -0,0 +1,141 @@
+.navbar {\r
+    font-weight: 300;\r
+    form {\r
+        input {\r
+            margin: 0;\r
+            height: 1rem;\r
+            margin-right: 5px;\r
+            margin-left: 8px;\r
+            margin-bottom: 1px;\r
+        }\r
+    }\r
+    .navbar-brand {\r
+        align-self: flex-start;\r
+        overflow: visible;\r
+    }\r
+    .breadcrumb {\r
+        margin: 0;\r
+        background-color: inherit;\r
+        font-weight: 300;\r
+    }\r
+    &.navbar-dark {\r
+        .navbar-brand {\r
+            color: #fff;\r
+            &:hover {\r
+                color: #fff;\r
+            }\r
+        }\r
+        .navbar-toggler-icon {\r
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");\r
+            cursor: pointer; \r
+        } \r
+        .breadcrumb, \r
+        .navbar-nav .nav-item {\r
+            a {\r
+                color: #fff;\r
+                transition: .35s;\r
+                &:hover {\r
+                    color: rgba(255, 255, 255, .75);\r
+                }\r
+            }\r
+            &.active {\r
+                background-color: rgba(255, 255, 255, 0.1);\r
+            }\r
+            .dropdown-menu a {\r
+                color: #212121;\r
+                &:hover,\r
+                &:focus,\r
+                &:active {\r
+                    color: #212121;\r
+                }\r
+            }\r
+        }\r
+        .nav-link {\r
+            color: #fff;\r
+        }\r
+        .navbar-toggler {\r
+            color: #fff;\r
+        }\r
+    }\r
+    &.navbar-light {\r
+        .navbar-toggler-icon {\r
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");\r
+        }\r
+        .breadcrumb,\r
+        .nav-item {\r
+            a {\r
+                color: #212121;\r
+                transition: .35s;\r
+                &:hover {\r
+                    transition: .35s;\r
+                    color: #212121;\r
+                }\r
+            }\r
+            &.active {\r
+                background-color: rgba(158, 158, 158, 0.2);\r
+            }\r
+            .dropdown-menu a {\r
+                color: #000;\r
+                padding: 1rem;\r
+            }\r
+        }\r
+        .navbar-toggler {\r
+            color: #000;\r
+        }\r
+    }\r
+    .dropdown-menu {\r
+        a {\r
+            font-size: 0.9375rem;\r
+            font-weight: 300;\r
+            padding: 10px;\r
+        }\r
+    }\r
+    .navbar-toggler {\r
+        border-width: 0;\r
+    }\r
+    .nav-flex-icons {\r
+        flex-direction: row;\r
+    }\r
+    .container {\r
+        @media (max-width: 991px) {\r
+            width: 100%;\r
+            .navbar-toggler-right {\r
+                right: 0;\r
+            }\r
+        }\r
+    }\r
+    .dropdown-menu {\r
+        position: absolute !important;\r
+    }\r
+    &.double-nav {\r
+        flex-direction: row;\r
+    }\r
+}\r
+\r
+// Input line color\r
+.navbar-dark form {\r
+    input[type=text] {\r
+        border-bottom: 1px solid #fff;\r
+    }\r
+    .form-control {\r
+        color: #fff;\r
+        @include placeholder {\r
+            color: rgba(255, 255, 255, .65) !important;\r
+            font-weight: 300;\r
+        }\r
+    }\r
+}\r
+\r
+.navbar-light form {\r
+    // Style Placeholders\r
+    input[type=text] {\r
+        border-bottom: 1px solid #1C2331;\r
+    }\r
+    .form-control {\r
+        color: #1C2331;\r
+        @include placeholder {\r
+            color: #1C2331!important;\r
+            font-weight: 300;\r
+        }\r
+    }\r
+}\r