123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417 |
- // Slate 3.3.4
- // Bootswatch
- // -----------------------------------------------------
- .btn-shadow(@color) {
- #gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
- filter: none;
- }
- .btn-shadow-inverse(@color) {
- #gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
- filter: none;
- }
- // Navbar =====================================================================
- .navbar {
- .btn-shadow(@navbar-default-bg);
- border: 1px solid rgba(0, 0, 0, 0.6);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- &-inverse {
- .btn-shadow(@navbar-inverse-bg);
- .badge {
- background-color: @navbar-inverse-link-active-bg;
- }
- }
- &-nav > li > a {
- border-right: 1px solid rgba(0, 0, 0, 0.2);
- border-left: 1px solid rgba(255, 255, 255, 0.1);
- &:hover {
- .btn-shadow-inverse(@navbar-default-bg);
- border-left-color: transparent;
- }
- }
- .nav .open > a {
- border-color: transparent;
- }
- &-nav > li.active > a {
- border-left-color: transparent;
- }
- &-form {
- margin-left: 5px;
- margin-right: 5px;
- }
- }
- // Buttons ====================================================================
- .btn,
- .btn:hover {
- border-color: rgba(0, 0, 0, 0.6);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- }
- .btn-default {
- .btn-shadow(@btn-default-bg);
- &:hover {
- .btn-shadow-inverse(@btn-default-bg);
- }
- }
- .btn-primary {
- .btn-shadow(@btn-primary-bg);
- &:hover {
- .btn-shadow-inverse(@btn-primary-bg);
- }
- }
- .btn-success {
- .btn-shadow(@btn-success-bg);
- &:hover {
- .btn-shadow-inverse(@btn-success-bg);
- }
- }
- .btn-info {
- .btn-shadow(@btn-info-bg);
- &:hover {
- .btn-shadow-inverse(@btn-info-bg);
- }
- }
- .btn-warning {
- .btn-shadow(@btn-warning-bg);
- &:hover {
- .btn-shadow-inverse(@btn-warning-bg);
- }
- }
- .btn-danger {
- .btn-shadow(@btn-danger-bg);
- &:hover {
- .btn-shadow-inverse(@btn-danger-bg);
- }
- }
- .btn-link,
- .btn-link:hover {
- border-color: transparent;
- }
- // Typography =================================================================
- h1, h2, h3, h4, h5, h6 {
- text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
- }
- .text-primary,
- .text-primary:hover {
- color: @brand-primary;
- }
- .text-success,
- .text-success:hover {
- color: @brand-success;
- }
- .text-danger,
- .text-danger:hover {
- color: @brand-danger;
- }
- .text-warning,
- .text-warning:hover {
- color: @brand-warning;
- }
- .text-info,
- .text-info:hover {
- color: @brand-info;
- }
- // Tables =====================================================================
- .table {
- .success,
- .warning,
- .danger,
- .info {
- color: #fff;
- }
- &-bordered tbody {
- tr.success,
- tr.warning,
- tr.danger {
- td,
- &:hover td {
- border-color: @table-border-color;
- }
- }
- }
- }
- .table-responsive > .table {
- background-color: @table-bg;
- }
- // Forms ======================================================================
- input,
- textarea {
- color: @input-color;
- }
- .has-warning {
- .help-block,
- .control-label,
- .form-control-feedback {
- color: @brand-warning;
- }
- .form-control,
- .form-control:focus {
- border-color: @brand-warning;
- }
- .input-group-addon {
- background-color: @body-bg;
- border: none;
- }
- }
- .has-error {
- .help-block,
- .control-label,
- .form-control-feedback {
- color: @brand-danger;
- }
- .form-control,
- .form-control:focus {
- border-color: @brand-danger;
- }
- .input-group-addon {
- background-color: @body-bg;
- border: none;
- }
- }
- .has-success {
- .help-block,
- .control-label,
- .form-control-feedback {
- color: @brand-success;
- }
- .form-control,
- .form-control:focus {
- border-color: @brand-success;
- }
- .input-group-addon {
- background-color: @body-bg;
- border: none;
- }
- }
- legend {
- color: #fff;
- }
- .input-group-addon {
- border-color: rgba(0, 0, 0, 0.6);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- .btn-shadow(@btn-default-bg);
- color: @btn-default-color;
- }
- // Navs =======================================================================
- .nav {
- .open > a,
- .open > a:hover,
- .open > a:focus {
- border-color: rgba(0, 0, 0, 0.6);
- }
- }
- .nav-pills {
- & > li > a {
- .btn-shadow(@btn-default-bg);
- border: 1px solid rgba(0, 0, 0, 0.6);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- &:hover {
- .btn-shadow-inverse(@btn-default-bg);
- border: 1px solid rgba(0, 0, 0, 0.6);
- }
- }
- & > li.active > a,
- & > li.active > a:hover {
- background-color: none;
- .btn-shadow-inverse(@btn-default-bg);
- border: 1px solid rgba(0, 0, 0, 0.6);
- }
- & > li.disabled > a,
- & > li.disabled > a:hover {
- .btn-shadow(@btn-default-bg);
- }
- }
- .pagination {
- & > li > a,
- & > li > span {
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- .btn-shadow(@btn-default-bg);
- &:hover {
- .btn-shadow-inverse(@btn-default-bg);
- }
- }
- & > li.active > a,
- & > li.active > span {
- .btn-shadow-inverse(@btn-default-bg);
- }
- & > li.disabled > a,
- & > li.disabled > a:hover,
- & > li.disabled > span,
- & > li.disabled > span:hover {
- background-color: transparent;
- .btn-shadow(@btn-default-bg);
- }
- }
- .pager {
- & > li > a {
- .btn-shadow(@btn-default-bg);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- &:hover {
- .btn-shadow-inverse(@btn-default-bg);
- }
- }
- & > li.disabled > a,
- & > li.disabled > a:hover {
- background-color: transparent;
- .btn-shadow(@btn-default-bg);
- }
- }
- .breadcrumb {
- border: 1px solid rgba(0, 0, 0, 0.6);
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
- .btn-shadow(@btn-default-bg);
- }
- // Indicators =================================================================
- .alert {
- .alert-link,
- a {
- color: #fff;
- text-decoration: underline;
- }
- .close {
- color: @close-color;
- text-decoration: none;
- }
- }
- // Progress bars ==============================================================
- // Containers =================================================================
- a.thumbnail:hover,
- a.thumbnail:focus,
- a.thumbnail.active {
- border-color: @thumbnail-border;
- }
- a.list-group-item {
- &.active,
- &.active:hover,
- &.active:focus {
- border-color: @list-group-border;
- }
- &-success {
- &.active {
- background-color: @state-success-bg;
- }
- &.active:hover,
- &.active:focus {
- background-color: darken(@state-success-bg, 5%);
- }
- }
- &-warning {
- &.active {
- background-color: @state-warning-bg;
- }
-
- &.active:hover,
- &.active:focus {
- background-color: darken(@state-warning-bg, 5%);
- }
- }
- &-danger {
- &.active {
- background-color: @state-danger-bg;
- }
-
- &.active:hover,
- &.active:focus {
- background-color: darken(@state-danger-bg, 5%);
- }
- }
- }
- .jumbotron {
- border: 1px solid rgba(0, 0, 0, 0.6);
- }
- .panel-primary,
- .panel-success,
- .panel-danger,
- .panel-warning,
- .panel-info {
- .panel-heading {
- border-color: #000;
- }
- }
|