Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
8080ab9c by bootflat
Options

modify navbar

1 parent 53de550c
Expand all
Inline Side-by-side
Showing 5 changed files with 46 additions and 35 deletions
1 /* 1 /*
2 * bootflat 2.0.2 2 * bootflat 2.0.3
3 * 3 *
4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps. 4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
5 * 5 *
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 * 7 *
8 * By @Flathemes <info@flathemes.com> 8 * By @Flathemes <info@flathemes.com>
9 * 9 *
10 * Last modify time: 2014-07-09 10 * Last modify time: 2014-08-19
11 * 11 *
12 * Licensed under the MIT license. Please see LICENSE for more information. 12 * Licensed under the MIT license. Please see LICENSE for more information.
13 * 13 *
...@@ -164,7 +164,7 @@ blockquote { ...@@ -164,7 +164,7 @@ blockquote {
164 } 164 }
165 .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .btn-link.disabled, .btn-link[disabled] { 165 .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .btn-link.disabled, .btn-link[disabled] {
166 color: #3bafda; 166 color: #3bafda;
167 background-color: transparent; 167 background-color: transparent;
168 border-color: transparent; 168 border-color: transparent;
169 -webkit-box-shadow: none; 169 -webkit-box-shadow: none;
170 -moz-box-shadow: none; 170 -moz-box-shadow: none;
...@@ -318,7 +318,7 @@ blockquote { ...@@ -318,7 +318,7 @@ blockquote {
318 .label-default, 318 .label-default,
319 .badge-default { 319 .badge-default {
320 color: #434a54; 320 color: #434a54;
321 background-color: white; 321 background-color: white;
322 border: 1px solid #aab2bd; 322 border: 1px solid #aab2bd;
323 } 323 }
324 324
...@@ -378,7 +378,7 @@ blockquote { ...@@ -378,7 +378,7 @@ blockquote {
378 * -------------------------------------------------- 378 * --------------------------------------------------
379 */ 379 */
380 .popover { 380 .popover {
381 color: white; 381 color: white;
382 background-color: #434a54; 382 background-color: #434a54;
383 border-color: #434a54; 383 border-color: #434a54;
384 } 384 }
...@@ -447,7 +447,7 @@ blockquote { ...@@ -447,7 +447,7 @@ blockquote {
447 } 447 }
448 448
449 .breadcrumb-arrow { 449 .breadcrumb-arrow {
450 height: 36px; 450 height: 36px;
451 padding: 0; 451 padding: 0;
452 line-height: 36px; 452 line-height: 36px;
453 list-style: none; 453 list-style: none;
...@@ -474,7 +474,7 @@ blockquote { ...@@ -474,7 +474,7 @@ blockquote {
474 padding: 0 10px; 474 padding: 0 10px;
475 } 475 }
476 .breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span { 476 .breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
477 height: 36px; 477 height: 36px;
478 padding: 0 10px 0 25px; 478 padding: 0 10px 0 25px;
479 line-height: 36px; 479 line-height: 36px;
480 } 480 }
...@@ -600,7 +600,7 @@ blockquote { ...@@ -600,7 +600,7 @@ blockquote {
600 600
601 .input-group-btn .btn + .btn { 601 .input-group-btn .btn + .btn {
602 border-color: #96a0ad; 602 border-color: #96a0ad;
603 border-style: solid; 603 border-style: solid;
604 border-width: 1px; 604 border-width: 1px;
605 } 605 }
606 .input-group-btn .btn + .btn.btn-default { 606 .input-group-btn .btn + .btn.btn-default {
...@@ -770,7 +770,7 @@ blockquote { ...@@ -770,7 +770,7 @@ blockquote {
770 width: 20px; 770 width: 20px;
771 height: 50%; 771 height: 50%;
772 text-indent: -99999px; 772 text-indent: -99999px;
773 cursor: pointer; 773 cursor: pointer;
774 background-color: #3bafda; 774 background-color: #3bafda;
775 } 775 }
776 .stepper .stepper-arrow:hover, .stepper .stepper-arrow:active { 776 .stepper .stepper-arrow:hover, .stepper .stepper-arrow:active {
...@@ -794,7 +794,7 @@ blockquote { ...@@ -794,7 +794,7 @@ blockquote {
794 .stepper .up::before, .stepper .down::before { 794 .stepper .up::before, .stepper .down::before {
795 position: absolute; 795 position: absolute;
796 width: 0; 796 width: 0;
797 height: 0; 797 height: 0;
798 content: ""; 798 content: "";
799 border-right: 4px solid transparent; 799 border-right: 4px solid transparent;
800 border-left: 4px solid transparent; 800 border-left: 4px solid transparent;
...@@ -817,7 +817,7 @@ blockquote { ...@@ -817,7 +817,7 @@ blockquote {
817 817
818 .selecter { 818 .selecter {
819 position: relative; 819 position: relative;
820 z-index: 1; 820 z-index: 1;
821 display: block; 821 display: block;
822 max-width: 100%; 822 max-width: 100%;
823 outline: none; 823 outline: none;
...@@ -854,7 +854,7 @@ blockquote { ...@@ -854,7 +854,7 @@ blockquote {
854 padding: 6px 10px; 854 padding: 6px 10px;
855 overflow: hidden; 855 overflow: hidden;
856 text-overflow: clip; 856 text-overflow: clip;
857 cursor: pointer; 857 cursor: pointer;
858 background-color: white; 858 background-color: white;
859 border: 1px solid #aab2bd; 859 border: 1px solid #aab2bd;
860 border-radius: 4px; 860 border-radius: 4px;
...@@ -883,7 +883,7 @@ blockquote { ...@@ -883,7 +883,7 @@ blockquote {
883 max-height: 260px; 883 max-height: 260px;
884 overflow: auto; 884 overflow: auto;
885 overflow-x: hidden; 885 overflow-x: hidden;
886 background-color: white; 886 background-color: white;
887 border: 1px solid #aab2bd; 887 border: 1px solid #aab2bd;
888 border-width: 0 1px 1px; 888 border-width: 0 1px 1px;
889 border-radius: 0 0 4px 4px; 889 border-radius: 0 0 4px 4px;
...@@ -901,7 +901,7 @@ blockquote { ...@@ -901,7 +901,7 @@ blockquote {
901 font-size: 11px; 901 font-size: 11px;
902 color: #aab2bd; 902 color: #aab2bd;
903 text-transform: uppercase; 903 text-transform: uppercase;
904 background-color: #f5f7fa; 904 background-color: #f5f7fa;
905 border-bottom: 1px solid #e6e9ed; 905 border-bottom: 1px solid #e6e9ed;
906 } 906 }
907 .selecter .selecter-item { 907 .selecter .selecter-item {
...@@ -911,7 +911,7 @@ blockquote { ...@@ -911,7 +911,7 @@ blockquote {
911 margin: 0; 911 margin: 0;
912 overflow: hidden; 912 overflow: hidden;
913 text-overflow: ellipsis; 913 text-overflow: ellipsis;
914 cursor: pointer; 914 cursor: pointer;
915 background-color: white; 915 background-color: white;
916 border-bottom: 1px solid #e6e9ed; 916 border-bottom: 1px solid #e6e9ed;
917 } 917 }
...@@ -984,11 +984,15 @@ blockquote { ...@@ -984,11 +984,15 @@ blockquote {
984 } 984 }
985 .selecter.bottom .selecter-options { 985 .selecter.bottom .selecter-options {
986 top: auto; 986 top: auto;
987 bottom: 100%; 987 bottom: 100%;
988 border-width: 1px 1px 0; 988 border-width: 1px 1px 0;
989 } 989 }
990 .selecter.bottom .selecter-item:last-child { 990 .selecter.bottom .selecter-item:last-child {
991 border: none; 991 border: none;
992 border-radius: 0;
993
994 -webkit-border-radius: 0;
995 -moz-border-radius: 0;
992 } 996 }
993 .selecter.bottom.open .selecter-selected { 997 .selecter.bottom.open .selecter-selected {
994 border-radius: 0 0 4px 4px; 998 border-radius: 0 0 4px 4px;
...@@ -1130,7 +1134,7 @@ blockquote { ...@@ -1130,7 +1134,7 @@ blockquote {
1130 .toggle .handle { 1134 .toggle .handle {
1131 position: relative; 1135 position: relative;
1132 top: -20px; 1136 top: -20px;
1133 left: 0; 1137 left: 0;
1134 display: block; 1138 display: block;
1135 width: 50px; 1139 width: 50px;
1136 height: 32px; 1140 height: 32px;
...@@ -1149,7 +1153,7 @@ blockquote { ...@@ -1149,7 +1153,7 @@ blockquote {
1149 left: 1px; 1153 left: 1px;
1150 display: block; 1154 display: block;
1151 width: 30px; 1155 width: 30px;
1152 height: 30px; 1156 height: 30px;
1153 content: ""; 1157 content: "";
1154 background-color: white; 1158 background-color: white;
1155 border-radius: 30px; 1159 border-radius: 30px;
...@@ -1165,7 +1169,7 @@ blockquote { ...@@ -1165,7 +1169,7 @@ blockquote {
1165 } 1169 }
1166 .toggle input[type="checkbox"]:disabled + .handle, .toggle input[type="radio"]:disabled + .handle, .toggle input[type="checkbox"]:disabled + .handle:before, .toggle input[type="radio"]:disabled + .handle:before, .toggle input[type="checkbox"]:disabled + .handle:after, .toggle input[type="radio"]:disabled + .handle:after { 1170 .toggle input[type="checkbox"]:disabled + .handle, .toggle input[type="radio"]:disabled + .handle, .toggle input[type="checkbox"]:disabled + .handle:before, .toggle input[type="radio"]:disabled + .handle:before, .toggle input[type="checkbox"]:disabled + .handle:after, .toggle input[type="radio"]:disabled + .handle:after {
1167 background-color: #e6e9ed; 1171 background-color: #e6e9ed;
1168 filter: alpha(opacity=60); 1172 filter: alpha(opacity=60);
1169 opacity: .6; 1173 opacity: .6;
1170 } 1174 }
1171 .toggle input[type="checkbox"]:checked + .handle:before, .toggle input[type="radio"]:checked + .handle:before { 1175 .toggle input[type="checkbox"]:checked + .handle:before, .toggle input[type="radio"]:checked + .handle:before {
...@@ -1256,12 +1260,12 @@ blockquote { ...@@ -1256,12 +1260,12 @@ blockquote {
1256 text-align: center; 1260 text-align: center;
1257 } 1261 }
1258 .calendar .days { 1262 .calendar .days {
1259 padding-top: 15px; 1263 padding-top: 15px;
1260 margin-top: 15px; 1264 margin-top: 15px;
1261 border-top: 1px solid #ee7f6d; 1265 border-top: 1px solid #ee7f6d;
1262 } 1266 }
1263 .calendar .days .unit { 1267 .calendar .days .unit {
1264 height: 34px; 1268 height: 34px;
1265 margin-bottom: 3px; 1269 margin-bottom: 3px;
1266 line-height: 34px; 1270 line-height: 34px;
1267 text-align: center; 1271 text-align: center;
...@@ -1432,7 +1436,7 @@ blockquote { ...@@ -1432,7 +1436,7 @@ blockquote {
1432 border: #a0d468; 1436 border: #a0d468;
1433 } 1437 }
1434 .alert .alert-link { 1438 .alert .alert-link {
1435 text-decoration: underline; 1439 text-decoration: underline;
1436 cursor: pointer; 1440 cursor: pointer;
1437 filter: alpha(opacity=65); 1441 filter: alpha(opacity=65);
1438 opacity: .65; 1442 opacity: .65;
...@@ -1457,7 +1461,7 @@ blockquote { ...@@ -1457,7 +1461,7 @@ blockquote {
1457 * -------------------------------------------------- 1461 * --------------------------------------------------
1458 */ 1462 */
1459 .nav-tabs { 1463 .nav-tabs {
1460 background-color: #e6e9ed; 1464 background-color: #e6e9ed;
1461 border-bottom: none; 1465 border-bottom: none;
1462 border-radius: 4px 4px 0 0; 1466 border-radius: 4px 4px 0 0;
1463 1467
...@@ -1663,6 +1667,10 @@ blockquote { ...@@ -1663,6 +1667,10 @@ blockquote {
1663 * navbar 1667 * navbar
1664 * -------------------------------------------------- 1668 * --------------------------------------------------
1665 */ 1669 */
1670 .navbar-form {
1671 padding: 0 !important;
1672 }
1673
1666 .navbar-default { 1674 .navbar-default {
1667 background-color: #37bc9b; 1675 background-color: #37bc9b;
1668 border-color: #37bc9b; 1676 border-color: #37bc9b;
...@@ -1952,7 +1960,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it ...@@ -1952,7 +1960,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
1952 * -------------------------------------------------- 1960 * --------------------------------------------------
1953 */ 1961 */
1954 .modal-content { 1962 .modal-content {
1955 color: #434a54; 1963 color: #434a54;
1956 border: none; 1964 border: none;
1957 border-radius: 4px; 1965 border-radius: 4px;
1958 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 1966 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
...@@ -2025,7 +2033,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it ...@@ -2025,7 +2033,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
2025 * -------------------------------------------------- 2033 * --------------------------------------------------
2026 */ 2034 */
2027 .jumbotron { 2035 .jumbotron {
2028 padding: 0; 2036 padding: 0;
2029 margin-bottom: 20px; 2037 margin-bottom: 20px;
2030 background-color: white; 2038 background-color: white;
2031 border-radius: 4px; 2039 border-radius: 4px;
...@@ -2266,7 +2274,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it ...@@ -2266,7 +2274,7 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
2266 } 2274 }
2267 2275
2268 .panel-group-lists .panel { 2276 .panel-group-lists .panel {
2269 background-color: white; 2277 background-color: white;
2270 border-bottom: 1px solid #e6e9ed; 2278 border-bottom: 1px solid #e6e9ed;
2271 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 2279 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
2272 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 2280 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
...@@ -2315,13 +2323,13 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it ...@@ -2315,13 +2323,13 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
2315 margin-bottom: 20px; 2323 margin-bottom: 20px;
2316 } 2324 }
2317 .footer-logo, .footer-nav { 2325 .footer-logo, .footer-nav {
2318 display: block; 2326 display: block;
2319 float: none; 2327 float: none;
2320 width: 100%; 2328 width: 100%;
2321 } 2329 }
2322 } 2330 }
2323 .footer-logo { 2331 .footer-logo {
2324 height: 32px; 2332 height: 32px;
2325 margin-top: -5px; 2333 margin-top: -5px;
2326 line-height: 32px; 2334 line-height: 32px;
2327 } 2335 }
......
...@@ -17,6 +17,9 @@ $navbar-inverse-background-color: $black !default; ...@@ -17,6 +17,9 @@ $navbar-inverse-background-color: $black !default;
17 * navbar 17 * navbar
18 * -------------------------------------------------- 18 * --------------------------------------------------
19 */ 19 */
20 .navbar-form {
21 padding: 0 !important;
22 }
20 23
21 .navbar-default { 24 .navbar-default {
22 & { 25 & {
...@@ -62,12 +65,12 @@ $navbar-inverse-background-color: $black !default; ...@@ -62,12 +65,12 @@ $navbar-inverse-background-color: $black !default;
62 } 65 }
63 & .navbar-toggle { 66 & .navbar-toggle {
64 border-color: darken($navbar-background-color, 15%); 67 border-color: darken($navbar-background-color, 15%);
65 background-color: darken($navbar-background-color, 15%); 68 background-color: darken($navbar-background-color, 15%);
66 } 69 }
67 & .navbar-toggle:hover, 70 & .navbar-toggle:hover,
68 & .navbar-toggle:focus { 71 & .navbar-toggle:focus {
69 border-color: darken($navbar-background-color, 10%); 72 border-color: darken($navbar-background-color, 10%);
70 background-color: darken($navbar-background-color, 10%); 73 background-color: darken($navbar-background-color, 10%);
71 } 74 }
72 & .navbar-toggle .icon-bar { 75 & .navbar-toggle .icon-bar {
73 background-color: $navbar-background-color; 76 background-color: $navbar-background-color;
...@@ -76,6 +79,8 @@ $navbar-inverse-background-color: $black !default; ...@@ -76,6 +79,8 @@ $navbar-inverse-background-color: $black !default;
76 & .navbar-form { 79 & .navbar-form {
77 border-color: $navbar-item-background-color-hover; 80 border-color: $navbar-item-background-color-hover;
78 } 81 }
82
83
79 & .navbar-nav > .open > a, 84 & .navbar-nav > .open > a,
80 & .navbar-nav > .open > a:hover, 85 & .navbar-nav > .open > a:hover,
81 & .navbar-nav > .open > a:focus { 86 & .navbar-nav > .open > a:focus {
...@@ -157,12 +162,12 @@ $navbar-inverse-background-color: $black !default; ...@@ -157,12 +162,12 @@ $navbar-inverse-background-color: $black !default;
157 } 162 }
158 & .navbar-toggle { 163 & .navbar-toggle {
159 border-color: $navbar-inverse-background-color; 164 border-color: $navbar-inverse-background-color;
160 background-color: $navbar-inverse-background-color; 165 background-color: $navbar-inverse-background-color;
161 } 166 }
162 & .navbar-toggle:hover, 167 & .navbar-toggle:hover,
163 & .navbar-toggle:focus { 168 & .navbar-toggle:focus {
164 border-color: lighten($navbar-inverse-background-color, 10%); 169 border-color: lighten($navbar-inverse-background-color, 10%);
165 background-color: lighten($navbar-inverse-background-color, 10%); 170 background-color: lighten($navbar-inverse-background-color, 10%);
166 } 171 }
167 & .navbar-toggle .icon-bar { 172 & .navbar-toggle .icon-bar {
168 background-color: lighten($navbar-inverse-background-color, 55%); 173 background-color: lighten($navbar-inverse-background-color, 55%);
...@@ -209,5 +214,3 @@ $navbar-inverse-background-color: $black !default; ...@@ -209,5 +214,3 @@ $navbar-inverse-background-color: $black !default;
209 } 214 }
210 215
211 } 216 }
212
213
......
...@@ -46,7 +46,7 @@ $toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1p ...@@ -46,7 +46,7 @@ $toggle-checked-shadow: inset 0 0 0 1px $lightgray-light, 1px 1p
46 & .handle { 46 & .handle {
47 display: block; 47 display: block;
48 position: relative; 48 position: relative;
49 top: $toggle-handle-height * -0.5; 49 top: -20px;
50 left: 0; 50 left: 0;
51 width: $toggle-handle-width; 51 width: $toggle-handle-width;
52 height: $toggle-handle-height; 52 height: $toggle-handle-height;
......