Fix CSS styling after Zurb update. Taken from old commit.

This commit is contained in:
Christoph Haas 2025-03-16 16:51:36 +01:00
parent b5534b1900
commit ac46c269b3
3 changed files with 175 additions and 170 deletions

View file

@ -58,7 +58,7 @@
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
// 57. Xy Grid
// 56. Xy Grid
@use "sass:color";
@import 'foundation-sites/scss/util/util';
@ -70,21 +70,22 @@ $global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
"primary": #1779ba,
"secondary": #767676,
"success": #3adb76,
"warning": #ffae00,
"alert": #cc4b37,
primary: #c70338,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
// $body-background: $white;
$body-background: #f2f2f2;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-safe-padding: false;
$body-font-family: 'Droid Sans', sans-serif;
// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
@ -92,7 +93,8 @@ $global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-menu-padding: 0.7rem 1rem;
$global-menu-padding: 0.3rem 0.5rem;
// $global-menu-padding: 0.7rem 1rem;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true;
@ -109,11 +111,11 @@ $print-hrefs: true;
$-zf-size: null;
$breakpoints: (
"small": 0,
"medium": 640px,
"large": 1024px,
"xlarge": 1200px,
"xxlarge": 1440px,
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoints-hidpi: (
"hidpi-1": 1,
@ -151,19 +153,19 @@ $header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': ('font-size': 24),
'h2': ('font-size': 20),
'h3': ('font-size': 19),
'h4': ('font-size': 18),
'h5': ('font-size': 17),
'h6': ('font-size': 16),
'h2': ('font-size': 16),
'h3': ('font-size': 14),
'h4': ('font-size': 13),
'h5': ('font-size': 12),
'h6': ('font-size': 11),
),
medium: (
'h1': ('font-size': 48),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
'h5': ('font-size': 20),
'h6': ('font-size': 16),
'h1': ('font-size': 40),
'h2': ('font-size': 32),
'h3': ('font-size': 28),
'h4': ('font-size': 26),
'h5': ('font-size': 24),
'h6': ('font-size': 22),
),
);
$header-text-rendering: optimizeLegibility;
@ -304,7 +306,8 @@ $button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
//$button-radius: $global-radius;
$button-radius: 0.5rem;
$button-border: 1px solid transparent;
$button-hollow-border-width: 1px;
$button-sizes: (
@ -464,7 +467,7 @@ $input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing * 0.5;
$input-padding: $form-spacing / 2;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
@ -502,6 +505,7 @@ $menu-item-color-active: $white;
$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-item-background-hover: $light-gray;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;
@ -875,22 +879,23 @@ $tooltip-radius: $global-radius;
// 55. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-padding: 0;
// $topbar-background: $light-gray;
$topbar-background: #d8d8d8;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
// 57. Xy Grid
// 56. Xy Grid
// -----------
$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
"small": 20px,
"medium": 30px
small: 20px,
medium: 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;