Skip to content

Commit

Permalink
Bootstrap5 upgrade (#63)
Browse files Browse the repository at this point in the history 
* replace all camelCased scss variables to kebab-case

* fix bootstrap 5 variable naming
  • Loading branch information
@njaeggi
njaeggi authored Dec 7, 2023
1 parent abbaa79 commit b115abd
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 59 deletions.
75 changes: 40 additions & 35 deletions app/assets/stylesheets/hitobito/customizable/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,83 +11,88 @@
// 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
// --------------------------------------------------

// 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
// --------------------------------------------------

// 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
46 changes: 22 additions & 24 deletions app/assets/stylesheets/hitobito/customizable/_wagon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}

Expand Down Expand Up @@ -73,7 +73,7 @@ legend {
& > a { // header links on the right side
color: $blue;
&:hover {
color: $blueDark;
color: $blue-dark;
}
}
}
Expand All @@ -95,39 +95,39 @@ 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;
}

// _form.scss


.btn {
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $green, 0 1px 1px rgba(255,255,255,.75));
background-color: $btn-bg;
color: $green;

&:hover,
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -197,7 +195,7 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
color: $grayDark;
color: $gray-dark;
}

.well {
Expand Down

0 comments on commit b115abd

Please sign in to comment.