X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=flatly%2Fbootswatch.less;h=8a407d2401a94676f879e3b01fad7f28510952ac;hb=48c64127b37be4a692a70cb7b38ed9744163582b;hp=b940d4f097efe8a0ffbfe8359f827884d5cfa918;hpb=157344668e39748d1be0dd356e2fbdc57c5cecaf;p=bootswatch diff --git a/flatly/bootswatch.less b/flatly/bootswatch.less index b940d4f..8a407d2 100644 --- a/flatly/bootswatch.less +++ b/flatly/bootswatch.less @@ -1,280 +1,57 @@ -// 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 -// -------------------------------------------------- - -.nav-list { +// Typography ================================================================= - & > 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 -// -------------------------------------------------- - -.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; - - &: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; - } +// Tables ===================================================================== - &-small { - padding: @paddingSmall; - } +.table { - &-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"], @@ -290,243 +67,106 @@ input[type="search"], 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; +.has-warning { + .help-block, + .control-label { + color: @brand-warning; } - &-success { - background-color: @green; + .form-control, + .form-control:focus { + border: 2px solid @brand-warning; } - - &-info { - background-color: @blue; - } -} - -.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-color: @blueDark; - background-image: none; - .box-shadow(none); - } - - .bar + .bar { - .box-shadow(none); - } - - &-striped .bar { - #gradient > .striped(@blueDark); +.has-error { + .help-block, + .control-label { + color: @brand-danger; } - &-success .bar, - &-success.progress-striped .bar, - .bar-success { - background-color: @green; - } - - &-warning .bar, - &-warning.progress-striped .bar, - .bar-warning { - background-color: @yellow; + .form-control, + .form-control:focus { + border: 2px solid @brand-danger; } +} - &-danger .bar, - &-danger.progress-striped .bar, - .bar-danger { - background-color: @red; +.has-success { + .help-block, + .control-label { + color: @brand-success; } - &-info .bar, - &-info.progress-striped .bar, - .bar-info { - 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 -// -------------------------------------------------- - -@media (max-width: 767px) { - - div.subnav { +// Indicators ================================================================= - .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) { +// Progress bars ============================================================== - .navbar { - - .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; }