git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_navbars.scss

   1 .navbar {\r
   2     font-weight: 300;\r
   3     form {\r
   4         input {\r
   5             margin: 0;\r
   6             height: 1rem;\r
   7             margin-right: 5px;\r
   8             margin-left: 8px;\r
   9             margin-bottom: 1px;\r
  10         }\r
  11     }\r
  12     .navbar-brand {\r
  13         align-self: flex-start;\r
  14         overflow: visible;\r
  15     }\r
  16     .breadcrumb {\r
  17         margin: 0;\r
  18         background-color: inherit;\r
  19         font-weight: 300;\r
  20     }\r
  21     &.navbar-dark {\r
  22         .navbar-brand {\r
  23             color: #fff;\r
  24             &:hover {\r
  25                 color: #fff;\r
  26             }\r
  27         }\r
  28         .navbar-toggler-icon {\r
  29             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
  30             cursor: pointer; \r
  31         } \r
  32         .breadcrumb, \r
  33         .navbar-nav .nav-item {\r
  34             a {\r
  35                 color: #fff;\r
  36                 transition: .35s;\r
  37                 &:hover {\r
  38                     color: rgba(255, 255, 255, .75);\r
  39                 }\r
  40             }\r
  41             &.active {\r
  42                 background-color: rgba(255, 255, 255, 0.1);\r
  43             }\r
  44             .dropdown-menu a {\r
  45                 color: #212121;\r
  46                 &:hover,\r
  47                 &:focus,\r
  48                 &:active {\r
  49                     color: #212121;\r
  50                 }\r
  51             }\r
  52         }\r
  53         .nav-link {\r
  54             color: #fff;\r
  55         }\r
  56         .navbar-toggler {\r
  57             color: #fff;\r
  58         }\r
  59     }\r
  60     &.navbar-light {\r
  61         .navbar-toggler-icon {\r
  62             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
  63         }\r
  64         .breadcrumb,\r
  65         .nav-item {\r
  66             a {\r
  67                 color: #212121;\r
  68                 transition: .35s;\r
  69                 &:hover {\r
  70                     transition: .35s;\r
  71                     color: #212121;\r
  72                 }\r
  73             }\r
  74             &.active {\r
  75                 background-color: rgba(158, 158, 158, 0.2);\r
  76             }\r
  77             .dropdown-menu a {\r
  78                 color: #000;\r
  79                 padding: 1rem;\r
  80             }\r
  81         }\r
  82         .navbar-toggler {\r
  83             color: #000;\r
  84         }\r
  85     }\r
  86     .dropdown-menu {\r
  87         a {\r
  88             font-size: 0.9375rem;\r
  89             font-weight: 300;\r
  90             padding: 10px;\r
  91         }\r
  92     }\r
  93     .navbar-toggler {\r
  94         border-width: 0;\r
  95     }\r
  96     .nav-flex-icons {\r
  97         flex-direction: row;\r
  98     }\r
  99     .container {\r
 100         @media (max-width: 991px) {\r
 101             width: 100%;\r
 102             .navbar-toggler-right {\r
 103                 right: 0;\r
 104             }\r
 105         }\r
 106     }\r
 107     .dropdown-menu {\r
 108         position: absolute !important;\r
 109     }\r
 110     &.double-nav {\r
 111         flex-direction: row;\r
 112     }\r
 113 }\r
 114 \r
 115 // Input line color\r
 116 .navbar-dark form {\r
 117     input[type=text] {\r
 118         border-bottom: 1px solid #fff;\r
 119     }\r
 120     .form-control {\r
 121         color: #fff;\r
 122         @include placeholder {\r
 123             color: rgba(255, 255, 255, .65) !important;\r
 124             font-weight: 300;\r
 125         }\r
 126     }\r
 127 }\r
 128 \r
 129 .navbar-light form {\r
 130     // Style Placeholders\r
 131     input[type=text] {\r
 132         border-bottom: 1px solid #1C2331;\r
 133     }\r
 134     .form-control {\r
 135         color: #1C2331;\r
 136         @include placeholder {\r
 137             color: #1C2331!important;\r
 138             font-weight: 300;\r
 139         }\r
 140     }\r
 141 }\r