diff --git a/app/assets/stylesheets/hitobito/customizable/_variables.scss b/app/assets/stylesheets/hitobito/customizable/_variables.scss index 45366298..c7e5c711 100644 --- a/app/assets/stylesheets/hitobito/customizable/_variables.scss +++ b/app/assets/stylesheets/hitobito/customizable/_variables.scss @@ -11,56 +11,61 @@ // Grays // ------------------------- $black: #000 !default; -$grayDarker: #34363C !default; -$grayDark: #5E6066 !default; +$gray-darker: #34363C !default; +$gray-dark: #5E6066 !default; $gray: #92959C !default; -$grayLight: #D1D3D9 !default; -$grayLighter: #F1F2F5 !default; +$gray-light: #D1D3D9 !default; +$gray-lighter: #F1F2F5 !default; $white: #fff !default; // Colors // ---------------------------- $blue: #014CBC !default; -$blueDark: #013888 !default; //#00173C +$blue-dark: #013888 !default; //#00173C $green: #026829 !default; $purple: $blue; -$purpleDark: darken($blue, 20%); +$purple-dark: darken($blue, 20%); $red: #A1090F !default; -$textColor: $grayDarker !default; -$borderColor: darken(#F1F2F5, 5%) !default; +$text-color: $gray-darker !default; +$border-color: darken(#F1F2F5, 5%) !default; -$pageBackground: darken($grayLighter, 1.5%) !default; -$contentBackground: $white; -$footerBackground: $blue; -$bodyBackground: $pageBackground; +$page-background: darken($gray-lighter, 1.5%) !default; +$content-background: $white; +$footer-background: $blue; +$body-background: $page-background; -$focusColor: rgba(82,168,236,.6); -$shadowColor: $grayLight; -$linkColor: $blue !default; -$linkColorHover: $blueDark !default; +$focus-color: rgba(82,168,236,.6); +$shadow-color: $gray-light; +$link-color: $blue !default; +$link-color-hover: $blue-dark !default; -$footerColor: $white; -$footerColorHover: $white; +$footer-color: $white; +$footer-color-hover: $white; -$tableColorHover: lighten($purple, 50%); +$table-color-hover: lighten($purple, 50%); + +$btn-danger-bg: #bd362f; +$btn-primary-bg: #010ebc; +$btn-bg: #e6e6e6; +$btn-border: #002357; // Typography // ------------------------- -$sansFontFamily: Helvetica, Arial, sans-serif !default; -$headingFontFamily: "Century Gothic", $sansFontFamily; -$baseFontFamily: $sansFontFamily !default; -$headingsFontWeight: normal !default; // instead of browser default, bold +$sans-font-family: Helvetica, Arial, sans-serif !default; +$heading-font-family: "Century Gothic", $sans-font-family; +$base-font-family: $sans-font-family !default; +$headings-font-weight: normal !default; // instead of browser default, bold // Decoration // ------------------------- -$borderRadius: 6px; +$border-radius: 6px; // Rhythm // ------------------------- -$vSpace: 24px; +$v-space: 24px; // FLUID GRID @@ -68,18 +73,18 @@ $vSpace: 24px; // Default // ------------------------- -$fluidGridColumnWidth: 6.382978723% !default; -$fluidGridGutterWidth: 2.127659574% !default; +$fluid-grid-column-width: 6.382978723% !default; +$fluid-grid-gutter-width: 2.127659574% !default; // Portrait tablet to default desktop // ------------------------- -$fluidGridColumnWidthTablet: 5.801104972% !default; -$fluidGridGutterWidthTablet: 2.762430939% !default; +$fluid-grid-column-width-tablet: 5.801104972% !default; +$fluid-grid-gutter-width-tablet: 2.762430939% !default; // Large desktop and up // ------------------------- -$fluidGridColumnWidthLarge: 5.982905983% !default; -$fluidGridGutterWidthLarge: 2.564102564% !default; +$fluid-grid-column-width-large: 5.982905983% !default; +$fluid-grid-gutter-width-large: 2.564102564% !default; // RESPONSIVE DESIGN @@ -87,7 +92,7 @@ $fluidGridGutterWidthLarge: 2.564102564% !default; // Media widths // ------------------------- -$mediaPhone: 480px !default; -$mediaTablet: 768px !default; -$mediaDesktop: 980px !default; -$mediaLarge: 1200px !default; // and upper +$media-phone: 480px !default; +$media-tablet: 768px !default; +$media-desktop: 980px !default; +$media-large: 1200px !default; // and upper diff --git a/app/assets/stylesheets/hitobito/customizable/_wagon.scss b/app/assets/stylesheets/hitobito/customizable/_wagon.scss index 298b6150..bcdecc85 100644 --- a/app/assets/stylesheets/hitobito/customizable/_wagon.scss +++ b/app/assets/stylesheets/hitobito/customizable/_wagon.scss @@ -2,22 +2,22 @@ #page-navigation { .nav { - font-family: $headingFontFamily; + font-family: $heading-font-family; li { &.active a { text-shadow: 0 1px 0 false white; - color: $grayDark; + color: $gray-dark; background-color: white; } a { text-shadow: 0 1px 0 false white; - color: $grayDark; + color: $gray-dark; &:hover { - text-shadow: 0 -1px 0 false $blueDark; + text-shadow: 0 -1px 0 false $blue-dark; background-color: $blue; color: white; } @@ -33,18 +33,18 @@ } .nav-pills > .active > a { - border-color: $grayLight; + border-color: $gray-light; } .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { - border-color: $grayLight; + border-color: $gray-light; } // _typography.scss h1, h2, h3, h4, h5, h6 { - font-family: $headingFontFamily; + font-family: $heading-font-family; margin-top: 0; } @@ -73,7 +73,7 @@ legend { & > a { // header links on the right side color: $blue; &:hover { - color: $blueDark; + color: $blue-dark; } } } @@ -95,31 +95,31 @@ legend { } .sheet.parent { - background: lighten($grayLighter, 1%); - box-shadow: 0 2px 8px $grayDarker; + background: lighten($gray-lighter, 1%); + box-shadow: 0 2px 8px $gray-darker; .sheet { &.parent { - background: lighten($grayLighter, 3%); + background: lighten($gray-lighter, 3%); } } } #content { - box-shadow: 0 2px 8px $grayDarker; + box-shadow: 0 2px 8px $gray-darker; } #page-footer { - padding-top: $vSpace*2; + padding-top: $v-space*2; background: none; & > .container-fluid { - box-shadow: inset 0 2px 8px 0 $grayDarker; - background: $grayDark; + box-shadow: inset 0 2px 8px 0 $gray-darker; + background: $gray-dark; } } html.turbolinks-progress-bar::before { - background-color: $grayDark !important; + background-color: $gray-dark !important; height: 1px !important; } @@ -127,7 +127,7 @@ html.turbolinks-progress-bar::before { .btn { - @include buttonBackground($btnBackground, $btnBackgroundHighlight, $green, 0 1px 1px rgba(255,255,255,.75)); + background-color: $btn-bg; color: $green; &:hover, @@ -136,9 +136,9 @@ html.turbolinks-progress-bar::before { color: darken($green, 10%); text-shadow: none; background-position: 0 -15px; - border: 1px solid $btnBorder; + border: 1px solid $btn-border; *border: 0; // Remove the border to prevent IE7's black border on input:focus - border-bottom-color: darken($btnBorder, 10%); + border-bottom-color: darken($btn-border, 10%); // transition is only when going to hover/focus, otherwise the background // behind the gradient (there for IE<=9 fallback) gets mismatched @@ -167,17 +167,15 @@ html.turbolinks-progress-bar::before { } .btn-danger { - @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); + background-color: $btn-danger-bg; } .btn-primary { - @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); + background-color: $btn-primary-bg; } .btn-group.open .btn.dropdown-toggle { - background: $btnBackgroundHighlight; color: darken($green, 10%); - border-color: $btnBackgroundHighlight; } select, @@ -197,7 +195,7 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - color: $grayDark; + color: $gray-dark; } .well {