Unverified Commit 8a00657c authored by David Haynes's avatar David Haynes
Browse files

Let's go back to square one

- move colors over as necessary
parent bbafd4f7
Pipeline #990 passed with stage
in 1 minute and 3 seconds
// Masonstrap 1.0 // Masonstrap 4.0
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" !default; $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" !default;
@import url($web-font-path); @import url($web-font-path);
// Navbar ===================================================================== // Navbar ======================================================================
.navbar { .navbar {
border: none; font-size: $font-size-sm;
font-size: 13rem; font-weight: $headings-font-weight;
font-weight: 300; }
.navbar-toggle:hover .icon-bar {
background-color: #b3b3b3;
}
&-collapse {
border-top-color: $dropdown-divider-bg;
@include box-shadow(none);
}
.btn { .bg-primary {
padding-top: 6rem;
padding-bottom: 6rem;
}
&-form { .dropdown-menu {
margin-top: 7rem; background-color: $brand-primary;
margin-bottom: 5rem;
.form-control { .dropdown-item,
height: auto; .dropdown-item:focus {
padding: $padding-xs-vertical $padding-xs-horizontal; color: $navbar-inverse-color;
} }
}
&-text { .dropdown-item.active,
margin: 12rem 15rem; .dropdown-item:hover,
line-height: 21rem; .dropdown-item:focus {
background-color: darken($brand-primary, 5%);
color: #fff;
}
} }
}
.dropdown { .bg-inverse {
background-color: $gray !important;
&-menu { .dropdown-menu {
border: none; background-color: $gray;
> li > a, .dropdown-item,
> li > a:focus { .dropdown-item:focus {
background-color: transparent; color: $navbar-inverse-color;
font-size: 13rem;
font-weight: 300;
}
} }
&-header { .dropdown-item.active,
color: rgba(255, 255, 255, 0.5); .dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($gray, 5%);
color: #fff;
} }
} }
}
&-default { .bg-faded {
.dropdown-menu {
background-color: $navbar-default-bg;
> li > a, .dropdown-menu {
> li > a:focus { background-color: $gray-lightest;
color: $navbar-default-link-color;
}
> li > a:hover, .dropdown-item,
> .active > a, .dropdown-item:focus {
> .active > a:hover { color: $navbar-light-color;
background-color: $navbar-default-link-hover-bg;
}
} }
}
&-inverse {
.dropdown-menu {
background-color: $navbar-inverse-bg;
> li > a, .dropdown-item.active,
> li > a:focus { .dropdown-item:hover,
color: $navbar-inverse-color; .dropdown-item:focus {
} background-color: lighten($gray-lightest, 5%);
color: $navbar-light-hover-color;
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: $navbar-inverse-link-hover-bg;
}
} }
} }
} }
// Buttons ==================================================================== // Buttons =====================================================================
.btn {
padding: $padding-base-vertical $padding-base-horizontal;
&-lg {
padding: $padding-large-vertical $padding-large-horizontal;
}
&-sm {
padding: $padding-small-vertical $padding-small-horizontal;
}
&-xs {
padding: $padding-xs-vertical $padding-xs-horizontal;
}
}
.btn-group { .btn-group {
.btn ~ .dropdown-toggle {
padding-left: 16rem;
padding-right: 16rem;
}
.dropdown-menu { .dropdown-menu {
border-top-width: 0; border-top-width: 0;
} }
&.dropup .dropdown-menu {
border-top-width: 1rem;
border-bottom-width: 0;
margin-bottom: 0;
}
.dropdown-toggle { .dropdown-toggle {
&.btn-default ~ .dropdown-menu { &.btn-primary ~ .dropdown-menu {
background-color: $btn-default-bg; background-color: $btn-primary-bg;
border-color: $btn-default-border; border-color: $btn-primary-border;
> li > a { .dropdown-item {
color: $btn-default-color; color: $btn-primary-color;
} }
> li > a:hover { .dropdown-item:hover,
background-color: darken($btn-default-bg, 8%); .dropdown-item:focus {
background-color: darken($btn-primary-bg, 8%);
} }
} }
&.btn-primary ~ .dropdown-menu { &.btn-secondary ~ .dropdown-menu {
background-color: $btn-primary-bg; background-color: $btn-secondary-bg;
border-color: $btn-primary-border; border-color: $btn-secondary-border;
> li > a { .dropdown-item {
color: $btn-primary-color; color: $btn-secondary-color;
} }
> li > a:hover { .dropdown-item:hover,
background-color: darken($btn-primary-bg, 8%); .dropdown-item:focus {
background-color: darken($btn-secondary-bg, 8%);
} }
} }
...@@ -164,11 +112,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400 ...@@ -164,11 +112,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-success-bg; background-color: $btn-success-bg;
border-color: $btn-success-border; border-color: $btn-success-border;
> li > a { .dropdown-item {
color: $btn-success-color; color: $btn-success-color;
} }
> li > a:hover { .dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-success-bg, 8%); background-color: darken($btn-success-bg, 8%);
} }
} }
...@@ -177,11 +126,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400 ...@@ -177,11 +126,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-info-bg; background-color: $btn-info-bg;
border-color: $btn-info-border; border-color: $btn-info-border;
> li > a { .dropdown-item {
color: $btn-info-color; color: $btn-info-color;
} }
> li > a:hover { .dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-info-bg, 8%); background-color: darken($btn-info-bg, 8%);
} }
} }
...@@ -190,11 +140,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400 ...@@ -190,11 +140,12 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-warning-bg; background-color: $btn-warning-bg;
border-color: $btn-warning-border; border-color: $btn-warning-border;
> li > a { .dropdown-item {
color: $btn-warning-color; color: $btn-warning-color;
} }
> li > a:hover { .dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-warning-bg, 8%); background-color: darken($btn-warning-bg, 8%);
} }
} }
...@@ -203,154 +154,120 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400 ...@@ -203,154 +154,120 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400
background-color: $btn-danger-bg; background-color: $btn-danger-bg;
border-color: $btn-danger-border; border-color: $btn-danger-border;
> li > a { .dropdown-item {
color: $btn-danger-color; color: $btn-danger-color;
} }
> li > a:hover { .dropdown-item:hover,
.dropdown-item:focus {
background-color: darken($btn-danger-bg, 8%); background-color: darken($btn-danger-bg, 8%);
} }
} }
} }
} }
// Typography ================================================================= // Typography ==================================================================
.lead {
color: $gray;
}
cite { .blockquote-footer {
font-style: italic; color: $gray-light;
} }
blockquote { // Tables ======================================================================
border-left-width: 1rem;
color: $gray;
&.pull-right {
border-right-width: 1rem;
}
small { table {
font-size: $font-size-small; font-size: $font-size-sm;
font-weight: 300;
}
} }
// Tables ===================================================================== .table {
table { &-success,
font-size: $font-size-small; &-info,
&-warning,
&-danger {
color: #fff;
}
} }
// Forms ====================================================================== // Forms =======================================================================
label, label,
.control-label, .control-label,
.help-block, .help-block,
.checkbox, .checkbox,
.radio { .radio,
font-size: $font-size-small; .form-control-feedback {
font-weight: normal; font-size: $font-size-sm;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 1rem;
} }
// Navs ======================================================================= // Navs ========================================================================
.nav { .dropdown-item {
.open > a, padding-top: 0.75rem;
.open > a:hover, padding-bottom: 0.75rem;
.open > a:focus { font-size: $font-size-sm;
border-color: transparent; font-weight: 300;
}
} }
.nav-tabs { .nav-tabs {
> li > a { .nav-link,
background-color: $btn-default-bg; .nav-link.disabled,
color: $text-color; .nav-link.disabled:hover,
.nav-link.disabled:focus {
border-color: $nav-tabs-border-color;
background-color: $gray-lightest;
} }
.caret { .nav-link:hover,
border-top-color: $text-color; .nav-link:focus {
border-bottom-color: $text-color; background-color: lighten($gray-lightest, 5%);
} }
} }
.nav-pills { .nav-pills {
font-weight: 300; .active {
border: 1px solid $btn-primary-border;
}
} }
.breadcrumb { .breadcrumb {
border: 1rem solid $table-border-color; border: 1px solid $dropdown-border-color;
border-radius: 3rem; border-radius: 3px;
font-size: 10rem; font-size: $font-size-sm;
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
} }
.pagination { .pagination {
font-size: $font-size-small;
font-weight: 300; font-weight: 300;
color: $gray-light;
> li { .page-link {
> a, border-color: transparent;
> span { border-radius: 3px;
margin-left: 4rem; margin-left: 0.1em;
color: $gray-light; margin-right: 0.1em;
}
}
> .active { &:hover,
> a, &:focus {
> span { text-decoration: none;
color: #fff;
} }
} }
> li, .page-item.disabled {
> li:first-child, .page-link {
> li:last-child { border-color: transparent;
> a,
> span {
border-radius: 3rem;
} }
} }
&-lg > li > a,
&-lg > li > span {
padding-left: 22rem;
padding-right: 22rem;
}
&-sm > li > a,
&-sm > li > span {
padding: 0 5rem;
}
}
.pager {
font-size: $font-size-small;
font-weight: 300;
color: $gray-light;
} }
.list-group { .list-group {
font-size: $font-size-small; font-size: $font-size-sm;
font-weight: 300; font-weight: 300;
} }
// Indicators ================================================================= // Indicators ==================================================================
.close { .close {
opacity: 0.4; opacity: 0.6;
text-decoration: none;
text-shadow: none; text-shadow: none;
&:hover, &:hover,
...@@ -360,7 +277,7 @@ input[type="checkbox"] { ...@@ -360,7 +277,7 @@ input[type="checkbox"] {
} }
.alert { .alert {
font-size: $font-size-small; font-size: $font-size-sm;
font-weight: 300; font-weight: 300;
.alert-link { .alert-link {
...@@ -370,82 +287,18 @@ input[type="checkbox"] { ...@@ -370,82 +287,18 @@ input[type="checkbox"] {
} }
} }
.label { .tag {
padding-left: 1em; padding-bottom: .6em;
padding-right: 1em;
border-radius: 0;
font-weight: 300;
&-default {
background-color: $btn-default-bg;
color: $btn-default-color;
}
}
.badge {
font-weight: 300;
} }
// Progress bars ============================================================== // Progress bars ===============================================================
.progress { .progress[value] {
height: 22rem; height: 22px;
padding: 2rem; padding: 2px;
background-color: #f6f6f6; background-color: #f6f6f6;
border: 1rem solid #ccc; border: 1px solid #ccc;
@include box-shadow(none); @include box-shadow(none);
} }
// Containers ================================================================= // Containers ==================================================================
\ No newline at end of file
.dropdown {
&-menu {
padding: 0;
margin-top: 0;
font-size: $font-size-small;