diff options
Diffstat (limited to 'resources/scss/bootstrap-cust')
| -rw-r--r-- | resources/scss/bootstrap-cust/_buttons.scss | 2 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_forms.scss | 10 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_modals.scss | 4 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_navs.scss | 6 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_scaffolding.scss | 154 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_tables.scss | 15 | ||||
| -rw-r--r-- | resources/scss/bootstrap-cust/_variables.scss | 70 |
7 files changed, 213 insertions, 48 deletions
diff --git a/resources/scss/bootstrap-cust/_buttons.scss b/resources/scss/bootstrap-cust/_buttons.scss index 52bcb2e..92382aa 100644 --- a/resources/scss/bootstrap-cust/_buttons.scss +++ b/resources/scss/bootstrap-cust/_buttons.scss @@ -3,5 +3,5 @@ } .btn-info { - @include button-variant($text-black, $tlv-gray, $light-gray); + @include button-variant($text-color1, $background-color12, $text-color7); } diff --git a/resources/scss/bootstrap-cust/_forms.scss b/resources/scss/bootstrap-cust/_forms.scss index cb19964..4353521 100644 --- a/resources/scss/bootstrap-cust/_forms.scss +++ b/resources/scss/bootstrap-cust/_forms.scss @@ -5,7 +5,7 @@ &.required { label:before { content: "*"; - color: $red; + color: $text-color10; } } } @@ -17,7 +17,7 @@ @include box-shadow(none); } &:hover { - border-color: $gray; + border-color: $neutral-gray; } } @@ -47,7 +47,7 @@ input[type="radio"], input[type="checkbox"] { left: -1px; bottom: -1px; background-color: $white; - border: 1px solid $blue; + border: 1px solid $border-color3; } } @@ -69,7 +69,7 @@ input[type="radio"], input[type="checkbox"] { input[type=radio]:checked:before { content: "\2022"; - color: $blue; + color: $background-color5; font-size: 32px; text-align: center; line-height: 16px; @@ -78,7 +78,7 @@ input[type=radio]:checked:before { input[type=checkbox]:checked:before { content: "\2713"; font-size: 12px; - color: $blue; + color: $background-color5; text-align: center; line-height: 16px; } diff --git a/resources/scss/bootstrap-cust/_modals.scss b/resources/scss/bootstrap-cust/_modals.scss index 6bc6e46..e074d61 100644 --- a/resources/scss/bootstrap-cust/_modals.scss +++ b/resources/scss/bootstrap-cust/_modals.scss @@ -1,6 +1,6 @@ .modal-content { .modal-header { - border-top: 3px solid $blue; + border-top: 3px solid $border-color3; .modal-title { @extend .heading-2; } @@ -13,6 +13,6 @@ .modal-footer { padding: 15px; border-top: 0; - background-color: $tlv-gray; + background-color: $background-color12; } } diff --git a/resources/scss/bootstrap-cust/_navs.scss b/resources/scss/bootstrap-cust/_navs.scss index 7b9cff9..a00f3d1 100644 --- a/resources/scss/bootstrap-cust/_navs.scss +++ b/resources/scss/bootstrap-cust/_navs.scss @@ -7,14 +7,14 @@ } .nav-tabs { - @include box-shadow(0px 2px 1px -1px $gray); + @include box-shadow(0px 2px 1px -1px $neutral-gray); padding: 0 28px; > li { @extend .body-1; > a { - color: $dark-gray; + color: $background-color2; text-transform: uppercase; } @@ -23,7 +23,7 @@ &:hover, &:focus { @extend .body-1-medium; - border-bottom: 3px solid $blue; + border-bottom: 3px solid $border-color3; } } } diff --git a/resources/scss/bootstrap-cust/_scaffolding.scss b/resources/scss/bootstrap-cust/_scaffolding.scss new file mode 100644 index 0000000..559216b --- /dev/null +++ b/resources/scss/bootstrap-cust/_scaffolding.scss @@ -0,0 +1,154 @@ +// +// Scaffolding +// -------------------------------------------------- + +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + @include box-sizing(border-box); +} + +*:before, +*:after { + @include box-sizing(border-box); +} + +// Body reset + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + font-family: $base-font-regular; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// Links + +a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus; + } +} + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive; +} + +// Rounded corners +.img-rounded { + border-radius: $border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + +// Horizontal rules + +hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; +} + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} diff --git a/resources/scss/bootstrap-cust/_tables.scss b/resources/scss/bootstrap-cust/_tables.scss index dc2e0c2..cf0288c 100644 --- a/resources/scss/bootstrap-cust/_tables.scss +++ b/resources/scss/bootstrap-cust/_tables.scss @@ -18,23 +18,32 @@ > tbody + tbody { border-top: none; } + .table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; + } } .table-striped { > tbody > tr:nth-of-type( odd ) { - background-color: $background-gray; + background-color: $background-color1; } } .table-striped { > tbody > tr:nth-of-type( even ) { - background-color: $gray; + background-color: $neutral-gray; } } .table-hover { > tbody > tr:hover { - background-color: $tlv-hover; + background-color: $background-color12; cursor: pointer; } } + +table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; +} diff --git a/resources/scss/bootstrap-cust/_variables.scss b/resources/scss/bootstrap-cust/_variables.scss index 1623e72..3a5de51 100644 --- a/resources/scss/bootstrap-cust/_variables.scss +++ b/resources/scss/bootstrap-cust/_variables.scss @@ -3,32 +3,34 @@ // //## Gray and brand colors for use across Bootstrap. -$gray-darker: $dark-gray; -$gray-dark: $dark-gray; -$gray: $gray; -$gray-light: $light-gray; -$gray-lighter: $light-gray; +$gray-darker: $background-color2; +$gray-dark: $background-color2; +$gray: $background-color13; +$gray-light: $text-color7; +$gray-lighter: $text-color7; -$brand-primary: $blue; -$brand-success: $green; -$brand-info: $light-gray; -$brand-warning: $yellow; -$brand-danger: $red; +$brand-primary: $background-color5; +$brand-success: $background-color11; +$brand-info: $text-color7; +$brand-warning: $text-color9; +$brand-danger: $text-color10; //== Scaffolding // //## Settings for some of the most global styles. -$body-bg: $white; -$text-color: $text-black; -$link-color: $link-blue; -$link-hover-color: $blue; +$body-bg: $primary-background-color; +$text-color: $text-color1; +$link-color: $border-color11; +$link-hover-color: $border-color3; //== Typography // //## Font, line-height, and color for body text, headings, and more. - +// This variable never used. Maybe delete!!!! +$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; +//$font-family-base: $font-family-sans-serif !default; $font-size-base: $body-font-2; $font-size-large: $body-font-1; $font-size-small: $body-font-3; @@ -53,10 +55,10 @@ $border-radius-small: 0; // $btn-font-weight: normal !default; $btn-default-color: $text-color; -$btn-default-bg: $white; -$btn-default-border: $light-gray; +$btn-default-bg: $primary-background-color; +$btn-default-border: $border-color5; -$btn-success-color: $white; +$btn-success-color: $primary-background-color; // Allows for customizing button radius independently from global border radius $btn-border-radius-base: 2px; @@ -65,19 +67,19 @@ $btn-border-radius-small: 2px; //== Dropdowns // -$dropdown-bg: $white; -$dropdown-border: $link-blue; -$dropdown-link-color: $text-black; +$dropdown-bg: $primary-background-color; +$dropdown-border: $background-color3; +$dropdown-link-color: $text-color1; $dropdown-divider-bg: $gray; //** Hover color for dropdown links. -$dropdown-link-hover-color: $black; +$dropdown-link-hover-color: $text-color3; //** Hover background for dropdown links. -$dropdown-link-hover-bg: $tlv-hover; +$dropdown-link-hover-bg: $background-color12; //** Active dropdown menu item text color. -$dropdown-link-active-color: $black; +$dropdown-link-active-color: $text-color3; //** Active dropdown menu item background color. -$dropdown-link-active-bg: $tlv-hover; +$dropdown-link-active-bg: $background-color12; //== Forms // @@ -85,16 +87,16 @@ $dropdown-link-active-bg: $tlv-hover; $form-group-margin-bottom: 24px; -$input-bg: $white; -$input-bg-disabled: $tlv-light-gray; -$input-color: $dark-gray; -$input-border: $light-gray; -$input-border-focus: $dark-blue; +$input-bg: $primary-background-color; +$input-bg-disabled: $background-color4; +$input-color:$text-color6; +$input-border: $text-color7; +$input-border-focus: $border-color4; //== Modals // //## -$modal-content-bg: $white; +$modal-content-bg: $primary-background-color; $modal-inner-padding: 0 15px; $modal-title-padding: 30px 25px 10px 25px; @@ -102,7 +104,7 @@ $modal-title-padding: 30px 25px 10px 25px; //== Close // //## -$close-color: $tlv-light-gray; +$close-color: $background-color4; //== Navs // @@ -116,11 +118,11 @@ $navbar-inverse-bg: $gray; $nav-tabs-border-color: transparent; $nav-tabs-link-hover-border-color: transparent; $nav-tabs-active-link-hover-bg: transparent; -$nav-tabs-active-link-hover-color: $text-black; +$nav-tabs-active-link-hover-color: $text-color1; $nav-tabs-active-link-hover-border-color: transparent; //== Popovers // //## -$popover-bg: $background-gray; +$popover-bg: $background-color1; |