-// Flatness by Jenil (www.jgog.in)
-// Bootswatch 2.3.2
+// Flatly 3.0.1
+// Bootswatch
// -----------------------------------------------------
+@import url("//fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
-// TYPOGRAPHY
-// --------------------------------------------------
+// Navbar =====================================================================
-@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
+// Buttons ====================================================================
-h1 {
- font-size: 48px;
- font-weight: 900;
-}
-
-h2 {
- font-size: 36px;
- font-weight: 700;
-}
-
-h3 {
- font-size: 28px;
- font-weight: 700;
-}
-
-h4 {
- font-size: 24px;
- font-weight: 500;
-}
-
-h5 {
- font-size: 16px;
- font-weight: 500;
-}
-
-h6 {
- font-size: 13px;
- font-weight: 500;
- text-transform: none;
-}
-
-p {
- margin-bottom: 1em;
-}
-
-// SCAFFOLDING
-// --------------------------------------------------
-
-.page-header {
- border-bottom: none;
-}
-
-
-// NAVBAR
-// --------------------------------------------------
-
-.navbar {
-
- .brand {
-
- text-shadow: none;
-
- &:hover {
- color: @linkColorHover;
- }
- }
-
- .navbar-inner {
- .box-shadow(none);
- }
-
- .nav > li > a {
- text-shadow: none;
- }
-
- .nav > .active > a,
- .nav > .active > a:hover,
- .nav > .active > a:focus {
- .box-shadow(none);
- }
-
- .navbar-search .search-query {
- border: none;
- .box-shadow(none);
- line-height: normal;
- }
-
- .btn-navbar {
- background-image: none;
- .box-shadow(none);
- }
-
- &-inverse {
-
- .brand:hover {
- color: @blueDark;
- }
-
- .navbar-search .search-query {
- border-color: transparent;
- .box-shadow(none);
- line-height: normal;
- color: @textColor;
-
- &:focus {
- padding: 4px 14px;
- color: @textColor;
- }
- }
- }
+.btn:active {
+ .box-shadow(none);
}
-div.subnav {
-
- border-color: transparent;
- background-image: none;
- background-color: @grayLighter;
+.btn-group.open .dropdown-toggle {
.box-shadow(none);
-
- &-fixed {
- top: @navbarHeight;
- }
-
- .nav > li > a {
- border-color: transparent;
- .box-shadow(none);
- color: @textColor;
- }
-
- .nav > .active > a,
- .nav > .active > a:hover {
- border-color: transparent;
- background-color: darken(@grayLighter, 10%);
- .box-shadow(none);
- color: @textColor;
- }
}
-// NAVIGATION
-// --------------------------------------------------
+// Typography =================================================================
-.nav-list {
-
- & > li > a,
- & > .active > a,
- .nav-header {
- text-shadow: none;
- }
-
- .divider {
- background: none;
- border-bottom: 2px solid @dropdownDividerBottom;
- }
+.text-primary {
+ color: @brand-primary;
}
-.nav-pills {
-
- .open .dropdown-toggle {
- background-color: @blueDark;
- }
+.text-success {
+ color: @brand-success;
}
-.pagination {
-
- ul {
-
- .box-shadow(none);
-
- & > li > a {
- background-color: @green;
- border-color: transparent;
- color: @white;
-
- &:hover {
- background-color: lighten(@green, 10%);
- }
- }
-
- & > .active > a,
- & > .active > a:hover {
- background-color: @paginationActiveBackground;
- color: @textColor;
- }
-
- & > .disabled > a,
- & > .disabled > a:hover {
- background-color: lighten(@green, 10%);
- color: @white;
- }
- }
+.text-danger {
+ color: @brand-danger;
}
-.pager {
-
- li > a,
- li > span {
- background-color: @green;
- border: none;
- color: @white;
-
- &:hover {
- background-color: lighten(@green, 10%);
- }
- }
-
- .disabled > a,
- .disabled > span,
- .disabled > a:hover,
- .disabled > span:hover {
- background-color: lighten(@green, 10%);
- color: @white;
- }
+.text-warning {
+ color: @brand-warning;
}
-.breadcrumb {
-
- & > li {
- text-shadow: none;
- }
+.text-info {
+ color: @brand-info;
}
-// BUTTONS
-// --------------------------------------------------
+// Tables =====================================================================
-.btn {
- padding: 8px 20px;
- border: none;
- background-image: none;
- color: @white;
- text-decoration: none;
- text-shadow: none;
- .box-shadow(none);
- -webkit-transition: 0.25s;
- -moz-transition: 0.25s;
- transition: 0.25s;
+.table {
- &:hover,
- &:focus {
- color: white;
- -webkit-transition: 0.25s;
- -moz-transition: 0.25s;
- transition: 0.25s;
- }
-
- &:active,
- &.active {
- .box-shadow(none);
- color: rgba(255, 255, 255, 0.75);
- }
-
- &.disabled,
- &[disabled] {
- color: white;
- }
-
- &-large {
- padding: @paddingLarge;
- }
-
- &-small {
- padding: @paddingSmall;
- }
-
- &-mini {
- padding: @paddingMini;
+ tr.success,
+ tr.warning,
+ tr.danger {
+ color: #fff;
}
}
-// TABLES
-// -----------------------------------------------------
-
-
-
-// FORMS
-// --------------------------------------------------
+// Forms ======================================================================
-textarea,
+.form-control,textarea.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="tel"],
input[type="color"],
.uneditable-input {
- padding: 7px 6px;
- border: 2px solid #dce4ec;
- text-indent: 1px;
- .border-radius(6px);
+ border-width: 2px;
.box-shadow(none);
- .placeholder(#acb6c0);
&:focus {
- border-color: #1abc9c;
.box-shadow(none);
-
}
-
-}
-
-.control-group.error,
-.control-group.error input:focus,
-.control-group.error textarea:focus {
- border-color: #e74c3c;
- .box-shadow(none);
-}
-
-.control-group.success,
-.control-group.success input:focus,
-.control-group.success textarea:focus {
- border-color: #2ecc71;
- .box-shadow(none);
-}
-
-.control-group.warning,
-.control-group.warning input:focus,
-.control-group.warning textarea:focus {
- border-color: #f1c40f;
- .box-shadow(none);
}
-.control-group.info,
-.control-group.info input:focus,
-.control-group.info textarea:focus {
- border-color: #3498db;
- .box-shadow(none);
-}
-
-input[disabled],
-input[readonly],
-textarea[disabled],
-textarea[readonly] {
- background-color: #eaeded;
- border-color: transparent;
- color: #cad2d3;
- cursor: default;
-}
-
-input[type="file"]{
- line-height: 16px;
-}
-
-.input-append .add-on,
-.input-prepend .add-on {
- border: none;
- background: none;
-}
-
-legend {
- border-bottom: none;
- color: @textColor;
-}
-
-.form-actions {
- border-top: none;
- .border-radius(@baseBorderRadius);
- background-color: darken(@grayLighter, 5%);
-}
-
-// DROPDOWNS
-// --------------------------------------------------
-
-
-// ALERTS, LABELS, BADGES
-// --------------------------------------------------
-
-.alert {
- background-color: @orange;
- color: @white;
- text-shadow: none;
-
- h1, h2, h3, h4, h5, h6 {
- color: @white;
- }
-
- &-error {
- background-color: @red;
- }
-
- &-success {
- background-color: @green;
+.has-warning {
+ .help-block,
+ .control-label {
+ color: @brand-warning;
}
- &-info {
- background-color: @blue;
+ .form-control,
+ .form-control:focus {
+ border: 2px solid @brand-warning;
}
}
-.label {
- padding: 6px 10px;
- text-shadow: none;
-}
-
-.badge {
- padding: 6px 10px;
- .border-radius(@borderRadiusLarge);
- text-shadow: none;
-}
-
-
-// MISC
-// --------------------------------------------------
-
-.well {
- border: none;
- .box-shadow(none);
-
-}
-
-.progress {
-
- background: @grayLighter;
- border-radius: 32px;
- height: 12px;
- .box-shadow(none);
-
- .bar {
- background: @textColor;
- .box-shadow(none);
+.has-error {
+ .help-block,
+ .control-label {
+ color: @brand-danger;
}
- &-success .bar, &-success.progress-striped .bar {
- background-color: @green;
- }
-
- &-warning .bar, &-warning.progress-striped .bar {
- background-color: @yellow;
+ .form-control,
+ .form-control:focus {
+ border: 2px solid @brand-danger;
}
+}
- &-danger .bar, &-danger.progress-striped .bar {
- background-color: @red;
+.has-success {
+ .help-block,
+ .control-label {
+ color: @brand-success;
}
- &-info .bar, &-info.progress-striped .bar {
- background-color: @blue;
+ .form-control,
+ .form-control:focus {
+ border: 2px solid @brand-success;
}
}
-.tooltip {
+// Navs =======================================================================
- &.in {
- opacity: 1;
+.pagination {
+
+ a,
+ a:hover {
+ color: #fff;
}
-}
-.popover {
- color: @white;
-
- &-title {
- border-bottom: 2px solid @dropdownDividerBottom;
+ .disabled {
+ &>a,
+ &>a:hover,
+ &>a:focus,
+ &>span {
+ background-color: lighten(@brand-success, 15%);
+ }
}
}
-.modal {
-
- &-header {
- background-color: @navbarBackground;
- border-bottom: none;
- color: @white;
+.pager {
+ a,
+ a:hover {
+ color: #fff;
}
- &-footer {
- background-color: @grayLighter;
- border-top: 2px solid @dropdownDividerTop;
- .box-shadow(none);
+ .disabled {
+ &>a,
+ &>a:hover,
+ &>a:focus,
+ &>span {
+ background-color: lighten(@brand-success, 15%);
+ }
}
}
-.close {
- text-shadow: none;
-}
-
-// MEDIA QUERIES
-// --------------------------------------------------
+// Indicators =================================================================
-@media (max-width: 767px) {
-
- div.subnav {
-
- .nav > li:first-child > a,
- .nav > li + li > a {
- border-color: transparent;
+.alert {
- &:hover {
- background-color: darken(@grayLighter, 10%);
- }
- }
-
- .nav > li:last-child > a {
- border-radius: 0 0 4px 4px;
- }
+ a,
+ .alert-link {
+ color: #fff;
+ text-decoration: underline;
}
}
-@media (max-width: 979px) {
-
- .navbar {
+// Progress bars ==============================================================
- .nav-collapse .nav > li > a {
- color: @white;
+.progress {
+ height: 10px;
+ .box-shadow(none);
+}
- &:hover {
- background-color: @green;
- }
- }
+// Containers =================================================================
- }
+.well {
+ .box-shadow(none);
+ border-width: 0;
}
projects / bootswatch / blobdiff