+// Simplex 2.3.0
// Bootswatch.less
-// Swatch: Simplex
-// Version: 2.0.4
// -----------------------------------------------------
-@import url('http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
@boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
// TYPOGRAPHY
// -----------------------------------------------------
-h6 {
- color: @headingsColor;
+@import url('//fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
+
+// SCAFFOLDING
+// -----------------------------------------------------
+
+hr {
+ border-bottom: none;
}
// NAVBAR
.navbar {
.navbar-inner {
- .box-shadow(inset 0 -1px #CFCACA);
+ .box-shadow(none);
}
.brand {
- padding: 13px 20px 10px;
+ padding: 12px 20px 8px;
+ font-family: @headingsFontFamily;
font-weight: bold;
&:hover {
- color: @orange;
+ color: @linkColor;
}
}
- .navbar-text {
- padding: 15px 20px 9px;
- line-height: 19px;
- color: @grayLight;
- }
-
.nav > li > a {
- padding: 15px 20px 9px;
+ padding: 13px 15px 6px;
+ font-family: @headingsFontFamily;
+ font-weight: bold;
text-shadow: none;
&:hover {
background-color: transparent;
}
- .nav li.dropdown.open > .dropdown-toggle,
- .nav li.dropdown.active > .dropdown-toggle:hover {
- color: @linkColor;
+ .navbar-text {
+ padding: 13px 15px 7px;
+ line-height: 19px;
+ font-family: @headingsFontFamily;
+ color: @grayLight;
}
- .nav li.dropdown .dropdown-toggle .caret {
- border-top-color: @textColor;
- border-bottom-color: @textColor;
- opacity: 1;
+ .divider-vertical {
+ height: @navbarHeight - 1;
+ background-color: @hrBorder;
}
- .nav li.dropdown:hover .dropdown-toggle .caret,
- .nav li.dropdown.active > .dropdown-toggle .caret,
- .nav li.dropdown.open .dropdown-toggle .caret {
- border-top-color: @linkColor;
- border-bottom-color: @linkColor;
+ .navbar-search {
+ margin-top: 5px;
+
+ input[type="text"] {
+ margin-bottom: 5px;
+ }
+ }
+
+ .dropdown-menu a {
+ font-family: @headingsFontFamily;
+ }
+
+ &-inverse {
+
+ .navbar-inner {
+ .box-shadow(none);
+ }
+
+ .brand:hover {
+ color: @white;
+ }
}
+}
+
+@media (max-width: @navbarCollapseWidth) {
- .nav-collapse.collapse {
+ .navbar .nav-collapse {
.nav li > a {
color: @textColor;
&:hover {
- background-color: @grayLighter;
+ background-image: none;
+ background-color: @dropdownLinkBackgroundHover;
+ }
+ }
+
+ .nav .active > a {
+ .box-shadow(none);
+ }
+
+ .navbar-form,
+ .navbar-search {
+ border-top: 1px solid rgba(128, 128, 128, 0.3);
+ border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+ }
+ }
+
+ .navbar-inverse .nav-collapse {
+
+ .nav li > a {
+ color: @white;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1) !important;
}
}
+
+ .nav-header {
+ color: rgba(255, 255, 255, 0.7);
+ }
}
}
background-color: @navbarBackground;
border-bottom: 1px solid transparent;
.box-shadow(@boxShadow);
+ font-family: @headingsFontFamily;
&.subnav-fixed {
+ top: @navbarHeight + 1;
.box-shadow(inset 0 5px #fff~"," @boxShadow);
}
.nav > li > a {
padding: 14px 12px 10px;
- color: @navbarText;
border-left-color: transparent;
border-right-color: transparent;
+ color: @navbarText;
+ font-weight: bold;
&:hover {
background-color: transparent;
.box-shadow(none);
color: @linkColor;
}
-
- .nav > li.dropdown.open > a,
- .nav > li.dropdown.open > a:hover {
- border-left-color: transparent;
- border-right-color: transparent;
- background-color: transparent;
- color: @linkColor;
- }
-
- .nav li.dropdown .dropdown-toggle .caret {
- border-top-color: @textColor;
- border-bottom-color: @textColor;
- opacity: 1;
- }
-
- .nav li.dropdown:hover .dropdown-toggle .caret,
- .nav li.dropdown.active .dropdown-toggle .caret,
- .nav li.dropdown.open .dropdown-toggle .caret {
- border-top-color: @linkColor;
- border-bottom-color: @linkColor;
- opacity: 1;
- }
-
- .dropdown-menu a:hover {
- background-color: @dropdownLinkBackgroundHover;
- }
-}
-
-@media (max-width: 979px) {
- form.navbar-form, form.navbar-search {
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- }
}
// NAV
opacity: 1;
}
- .dropdown:hover .dropdown-toggle .caret {
+ .dropdown .dropdown-toggle:hover .caret {
border-top-color: @linkColor;
border-bottom-color: @linkColor;
}
}
}
-// FORMS
-// -----------------------------------------------------
+.breadcrumb {
+ background-color: @white;
+ border: 0px solid transparent;
+ .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
-legend {
- border-bottom: 1px solid #ddd;
+ li {
+ padding-top: 2px;
+ text-shadow: none;
+ }
+
+ .active {
+ color: @textColor;
+ }
+
+ a {
+ text-shadow: none;
+ }
+
+ a:hover {
+ text-decoration: none;
+ }
}
-.navbar-search .search-query {
- border: 1px solid #ddd;
- .border-radius(0);
- background-color: @bodyBackground;
- color: @gray;
+.pagination {
+
+ ul > li > a,
+ ul > li > span {
+ padding: 2px 14px 0;
+ color: @textColor;
+
+ &:hover {
+ background-color: @dropdownLinkBackgroundHover;
+ color: @linkColor;
+ }
+ }
+
+ ul > .active > a,
+ ul > .active > span {
+ background-color: @dropdownLinkBackgroundHover;
+ color: @linkColor;
+ }
+
+ ul > .disabled > a,
+ ul > .disabled > a:hover,
+ ul > .disabled > span,
+ ul > .disabled > span:hover {
+ background-color: transparent;
+ color: @textColor;
+ }
}
-.help-inline, .help-block {
- font-size: 13px;
+
+// BUTTONS
+// -----------------------------------------------------
+
+.btn {
+ padding-top: .6em;
+ font-family: @headingsFontFamily;
+ font-weight: bold;
}
// TABLES
// -----------------------------------------------------
-
-// BUTTONS
+// FORMS
// -----------------------------------------------------
-.btn {
- padding: 6px 10px 2px;
+legend {
+ border-bottom: 1px solid #ddd;
+ font-family: @headingsFontFamily;
}
-.btn-large {
- padding: 11px 14px 8px;
+.navbar-search .search-query {
+ border: 1px solid #ddd;
+ .border-radius(0);
+ background-color: @bodyBackground;
+ color: @gray;
}
-.btn-small {
- padding: 5px 9px 3px;
+.help-inline, .help-block {
+ font-size: 13px;
}
-.btn-micro {
- padding: 3px 6px 1px;
+.input-append .btn,
+.input-prepend .btn {
+ line-height: 16px;
}
-// MODALS
+// DROPDOWNS
// -----------------------------------------------------
-.modal-header {
- border-bottom: none;
-}
-
-.modal-header,
-.modal-body {
- background-color: @navbarBackground;
-}
+// ALERTS, LABELS, BADGES
+// -----------------------------------------------------
-.modal-footer {
- background-color: @bodyBackground;
+.label {
+ padding: 4px 4px 3px;
+ margin-left: 1px;
+ margin-right: 1px;
+ line-height: 26px;
+ font-weight: normal;
}
// MISCELLANEOUS
vertical-align: -2px;
}
-.progress {
- #gradient > .vertical(#e0e0e0, #e8e8e8);
-}
-
-.label {
- padding: 4px 4px 3px;
- font-weight: normal;
+.well {
+ .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
+ border: none;
}
.hero-unit {
.box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
}
-.well {
- .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
+.thumbnail {
+ padding: 10px;
background-color: @white;
- border: none;
}
-.breadcrumb {
- .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1));
- border: 0px solid transparent;
-
- li {
- padding-top: 5px;
- text-shadow: none;
- }
-
- a {
- text-shadow: none;
- }
-
- a:hover {
- text-decoration: none;
- }
+.progress {
+ #gradient > .vertical(#e0e0e0, #e8e8e8);
}
-.pagination {
+.modal {
- li > a {
- padding: 4px 14px 0;
- color: @textColor;
-
- &:hover {
- background-color: @dropdownLinkBackgroundHover;
- color: @linkColor;
- }
+ &-header {
+ border-bottom: none;
}
- li.active > a {
- background-color: @dropdownLinkBackgroundHover;
- color: @linkColor;
+ &-header,
+ &-body {
+ background-color: @navbarBackground;
}
+ &-footer {
+ background-color: @bodyBackground;
+ }
}
+
+// MEDIA QUERIES
+// -----------------------------------------------------
projects / bootswatch / blobdiff