X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=cyborg%2Fbootswatch.less;h=7af6abb57b1423164a10f656210c3f3cebaa5a24;hb=48c64127b37be4a692a70cb7b38ed9744163582b;hp=870f3f9203c3b46cd942b16c5b8e5313caef32fc;hpb=5344f16f431cd362640cc02a9a3b995f39bfe061;p=bootswatch diff --git a/cyborg/bootswatch.less b/cyborg/bootswatch.less old mode 100755 new mode 100644 index 870f3f9..7af6abb --- a/cyborg/bootswatch.less +++ b/cyborg/bootswatch.less @@ -1,626 +1,141 @@ -// Bootswatch.less -// Swatch: Cyborg -// Version: 2.1.1 +// Cyborg 3.0.1 +// Bootswatch // ----------------------------------------------------- -// TYPOGRAPHY -// ----------------------------------------------------- +@import url("//fonts.googleapis.com/css?family=Droid+Sans:400,700"); -@import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700'); +// Navbar ===================================================================== -label, input, button, select, textarea, -.navbar .search-query:-moz-placeholder, -.navbar .search-query::-webkit-input-placeholder { - font-family: 'Droid Sans', sans-serif; - color: @gray; -} +.navbar { -code, pre { - background-color: @grayLighter; + border-bottom: 1px solid @gray-dark; } -blockquote { - border-left: 5px solid @blue; - - &.pull-right { - border-right: 5px solid @blue; - } -} +// Buttons ==================================================================== -// SCAFFOLDING -// ----------------------------------------------------- +// Typography ================================================================= -html { - min-height: 100%; +.text-primary { + color: @brand-primary; } -body { - min-height: 100%; - #gradient > .vertical (@bodyBackground, #252A30); +.text-success { + color: @brand-success; } -.page-header { - border-bottom: 2px solid @blue +.text-danger { + color: @brand-danger; } -// NAVBAR -// ----------------------------------------------------- - -.navbar { - - font-size: 16px; - - .navbar-inner { - .border-radius(0); - .box-shadow(none); - border-bottom: 2px solid @blue - } - - .brand { - padding: 12px 20px 11px; - color: @grayLighter; - font-weight: normal; - text-shadow: none; - } - - li { - line-height: 19px; - } - - .nav > li > a { - padding: 13px 10px 8px; - border-bottom: 3px solid transparent; - border-left: 1px solid rgba(255, 255, 255, 0.1); - - &:hover { - border-bottom: 3px solid @blue - } - } - - .nav > .active > a { - border-bottom: 3px solid @blue; - } - - .nav .active > a, - .nav .active > a:hover, - .nav .active > a:focus { - .box-shadow(none); - } - - .nav > li > .dropdown-menu::before, - .nav > li > .dropdown-menu::after { - display: none; - } - - .dropdown-menu li > a:hover, - .dropdown-menu li > a:focus, - .dropdown-submenu:hover > a { - background-image: none; - } - - .navbar-text { - margin-left: 15px; - margin-right: 15px; - line-height: 43px; - } - - .search-query, - .search-query:focus, - .search-query.focused { - color: @grayLight; - text-shadow: none; - background-color: #222; - .border-radius(1px); - .placeholder(@gray); - } - - &-inverse { - - .navbar-inner { - border: none; - border-bottom: 3px solid @black; - } - - .brand:hover { - border-bottom: none; - background-color: @black; - } - - .nav li > a:hover { - border-bottom-color: transparent; - } - - .nav .active > a { - border-bottom-color: transparent; - } - } +.text-warning { + color: @brand-warning; } -@media (max-width: @navbarCollapseWidth) { - - .navbar .nav-collapse { - - .nav li > a { - border: none; - color: @grayLighter; - font-weight: normal; - text-shadow: none; - - &:hover { - border: none; - background-color: @blue; - } - } - - .nav .active > a { - border: none; - background-color: @blue; - } - - .dropdown-menu a:hover { - background-color: @blue; - } - - .navbar-form, - .navbar-search { - border-top: none; - border-bottom: none; - } - - .nav-header { - color: rgba(128, 128, 128, 0.6); - } - } - - .navbar-inverse .nav-collapse { - - .nav li > a:hover { - background-color: #111; - } - - .nav .active > a { - background-color: #111; - } - - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - background-color: #111; - } - } +.text-info { + color: @brand-info; } -div.subnav { - position: static; - background-color: @grayDarker; - background-image: none; - border: 0; - - - &.subnav-fixed { - position: relative; - left: -1px; - top: auto; - } - - .nav > li > a, - .nav .active a { - background-color: @grayDarker; - border-left: 1px solid #222; - border-right: 0; - color: @grayLighter; - } +// Tables ===================================================================== - .nav li.nav-header { - text-shadow: none; - } - - .nav > li > a:hover, - .nav > li.active > a:hover, - .nav > li:first-child > a:hover { - background: transparent; - border-bottom: 2px solid @blue; - border-left: 1px solid #222; - color: @white; - } - - .nav .open .dropdown-toggle { - border: 0; - border-left: 1px solid #222; - border-bottom: 2px solid @blue; - background-color: #060606; - } - - .nav .open .dropdown-menu { - background-color: @grayDarker; - border-left: solid 1px rgba(255, 255, 255, 0.1); +.table { - li > a:hover { - border-bottom: 0; - background: @blue; - } + tr.success, + tr.warning, + tr.danger { + color: #fff; } } -// NAV -// ----------------------------------------------------- - -.nav-tabs { - - border-bottom: 1px solid #222; - - li > a:hover, - li.active > a, - li.active > a:hover { - border: 1px solid #222; - background-color: @blue; - color: @white; - } - - .open .dropdown-toggle { - background-color: #060606 !important; - border: 1px solid #222; - } - - .dropdown-menu li > a:hover { - border: none; - } +.table-responsive > .table { + background-color: @table-bg; } -.nav-pills { - - li > a:hover { - background-color: @blue; - color: @white; - } +// Forms ====================================================================== - .open .dropdown-toggle { - background-color: #060606; +.has-warning { + .help-block, + .control-label { + color: @brand-warning; } - .dropdown-menu li > a:hover { - border: none; + .form-control, + .form-control:focus { + border-color: @brand-warning; } } -.nav-list { - - li > a { - text-shadow: none; - } - - li > a:hover { - background-color: @blue; - color: @white; - } - - .nav-header { - text-shadow: none; +.has-error { + .help-block, + .control-label { + color: @brand-danger; } - .divider { - background-color: transparent; - border-bottom: 1px solid #222; + .form-control, + .form-control:focus { + border-color: @brand-danger; } } -.nav-stacked { - - li > a { - border: 1px solid #222 !important; +.has-success { + .help-block, + .control-label { + color: @brand-success; } - li > a:hover, - li.active > a { - background-color: @blue; - color: @white; + .form-control, + .form-control:focus { + border-color: @brand-success; } } -.tabbable { - .nav-tabs, - .nav-tabs li.active > a { - border-color: #222; - } +legend { + color: #fff; } -.breadcrumb { - - background-color: transparent; - background-image: none; - border-width: 0; - .box-shadow(none); - font-size: 14px; - - li { - text-shadow: none; - } - - li > a { - color: @blue; - text-shadow: none; - } +.input-group-addon { + background-color: @btn-default-bg; } -.pagination { +// Navs ======================================================================= - ul { - .box-shadow(none); - } - - ul > li > a, - ul > li > span { - border: 0; - font-size: 14px; - } +.nav { - ul > li > a:hover { - background-color: @blue; - color: @white; - } - - ul > .active > a, - ul > .active > span { - background-color: @blue; - color: @white; - } - - ul > .disabled > a, - ul > .disabled > a:hover, - ul > .disabled > span, - ul > .disabled > span:hover { - background-color: rgba(0, 0, 0, 0.2); + .caret, + a:hover .caret { + border-top-color: #fff; + border-bottom-color: #fff; } } +.nav-tabs, +.nav-pills, +.breadcrumb, +.pagination, .pager { a { - background-color: @bodyBackground; - border: none; - - &:hover { - background-color: @blue; - } + color: #fff; } - - .disabled a, - .disabled a:hover { - background-color: @bodyBackground; - } - -} - -// BUTTONS -// ----------------------------------------------------- - -.btn { - .box-shadow(1px 1px 2px #111); - .buttonBackground(darken(@gray, 20%), darken(@gray, 30%)); - color: @white; - text-shadow: none; - - &:hover { - text-shadow: none; - color: @white; - } -} - -.btn-primary { - .buttonBackground(@blueDark, darken(@blueDark, 10%)); -} - -.btn-warning { - .buttonBackground(lighten(@orange, 10%), @orange); -} - -.btn-danger { - .buttonBackground(lighten(@red, 10%), @red); -} - -.btn-success { - .buttonBackground(lighten(@green, 10%), @green); -} - -.btn-info { - .buttonBackground(darken(@gray, 40%), darken(@gray, 50%)); -} - -.btn-inverse { - .buttonBackground(lighten(@purple, 5%), @purple); } -.btn .caret { - border-top: 4px solid black; - opacity: 0.3; -} +// Indicators ================================================================= -.btn-group > .dropdown-menu > li > a:hover { - border-bottom: 0; -} +.alert { -.btn.disabled, .btn[disabled] { - background-color: @grayLight; -} - -// FORMS -// ----------------------------------------------------- - -input, textarea, select { - border-width: 2px; - .border-radius(1px); -} - -legend, label { - color: @textColor; - border-bottom: 0px solid #222; -} - -input, textarea, select, .uneditable-input { - color: @grayDark; -} - -input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input { - background-color: #555; - border-color: #444; -} - -input:focus, -textarea:focus, -input.focused, -textarea.focused { - border-color: rgba(82,168,236,1); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - .box-shadow(none); // override for file inputs - .tab-focus(); -} - -.form-actions { - border-top: 1px solid #222; -} - -// TABLES -// ----------------------------------------------------- - -.table { - - .border-radius(1px); - - tbody tr.success td { - background-color: @green; - color: @white; - } - - tbody tr.error td { - background-color: @red; - color: @white; - } - - tbody tr.info td { - background-color: @blue; - color: @white; + .alert-link, + a { + color: @alert-warning-text; + text-decoration: underline; } } -// DROPDOWNS -// ----------------------------------------------------- - -.dropdown-menu { - background-color: #191A1A; - .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); -} - -.dropdown-menu li > a:hover { - background-color: @blue; -} - -// ALERTS, LABELS, BADGES -// ----------------------------------------------------- - -.alert, -.alert .alert-heading, -.alert-success, -.alert-success .alert-heading, -.alert-danger, -.alert-error, -.alert-danger .alert-heading, -.alert-error .alert-heading, -.alert-info, -.alert-info .alert-heading { - color: @grayLighter; - text-shadow: none; - border: none; -} - -.label { - color: @grayLighter; -} - -.label, .alert { background-color: darken(@gray, 20%); } - -.label:hover { background-color: darken(@gray, 30%); } - -.label-important, -.alert-danger, -.alert-error { background-color: @red; } - -.label-important:hover { background-color: darken(@red, 10%); } - -.label-warning { background-color: darken(@orange, 10%); } - -.label-warning:hover { background-color: darken(@orange, 20%); } - -.label-success, .alert-success { background-color: darken(@green, 3%); } - -.label-success:hover { background-color: darken(@green, 13%); } - -.label-info, .alert-info { background-color: darken(@blueDark, 10%); } - -.label-info:hover { background-color: darken(@blueDark, 20%); } - -// MISC -// ----------------------------------------------------- - -.well, .hero-unit { - .border-radius(1px); -} - -.well, .hero-unit { - border-top: solid 1px lighten(@grayDark, 5%); - .box-shadow(0 2px 4px rgba(0,0,0,.8)); -} - -.thumbnail { - border-color: #222; -} +// Progress bars ============================================================== -.progress { - background-color: #060606; - background-image: none; - .border-radius(0); -} +// Containers ================================================================= -.modal { - .border-radius(1px); - border-top: solid 1px lighten(@grayDark, 5%); - background-color: @grayDark; -} +.jumbotron { -.modal-header { - border-bottom: 1px solid #222; -} - -.modal-footer { - background-color: @grayDark; - border-top: 1px solid #222; - .border-radius(0 0 6px 6px); - .box-shadow(none); -} - -.footer { - border-top: 1px solid #222; -} - -// MEDIA QUERIES -// ----------------------------------------------------- - -@media (max-width: 768px) { - div.subnav .nav > li + li > a, - div.subnav .nav > li:first-child > a { - border-top: 1px solid #222; - border-left: 1px solid #222; + h1, h2, h3, h4, h5, h6 { + color: #fff; } - - .subnav .nav > li + li > a:hover, - .subnav .nav > li:first-child > a:hover { - border-bottom: 0; - background-color: @blue; - } -} +} \ No newline at end of file