Commit 63170cae authored by João Belchior's avatar João Belchior Committed by rembrandx
Browse files

Issue #3279674: Implement CSS variables for spacing and dimensions

parent 7d86ed4d

templates/BASE/package-lock.json.gtemp

+7 −31
Original line number Diff line number Diff line
@@ -13489,8 +13489,7 @@ 
    "detect-libc": {

      "version": "1.0.3",

      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",

      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",

      "dev": true

      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="

    },

    "detect-newline": {

      "version": "2.1.0",
@@ -15531,7 +15530,6 @@ 
      "version": "5.0.1",

      "resolved": "https://registry.npmjs.org/fibers/-/fibers-5.0.1.tgz",

      "integrity": "sha512-VMC7Frt87Oo0AOJ6EcPFbi+tZmkQ4tD85aatwyWL6I9cYMJmm2e+pXUJsfGZ36U7MffXtjou2XIiWJMtHriErw==",

      "dev": true,

      "requires": {

        "detect-libc": "^1.0.3"

      }
@@ -27345,35 +27343,13 @@ 
      }

    },

    "sass-loader": {

      "version": "8.0.2",

      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",

      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",

      "requires": {

        "clone-deep": "^4.0.1",

        "loader-utils": "^1.2.3",

        "neo-async": "^2.6.1",

        "schema-utils": "^2.6.1",

        "semver": "^6.3.0"

      },

      "dependencies": {

        "json5": {

          "version": "1.0.1",

          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",

          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",

          "requires": {

            "minimist": "^1.2.0"

          }

        },

        "loader-utils": {

          "version": "1.4.0",

          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",

          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",

      "version": "12.6.0",

      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",

      "dev": true,

      "requires": {

            "big.js": "^5.2.2",

            "emojis-list": "^3.0.0",

            "json5": "^1.0.1"

          }

        }

        "klona": "^2.0.4",

        "neo-async": "^2.6.2"

      }

    },

    "sax": {

templates/BASE/package.json.gtemp

+1 −1
Original line number Diff line number Diff line
@@ -126,7 +126,7 @@ 
    "react": "^16.13.1",

    "react-dom": "^16.13.1",

    "react-is": "^16.13.1",

    "sass-loader": "^8.0.2",

    "sass-loader": "^12.6.0",

    "semver": "^6.1.1",

    "slick-carousel": "^1.8.1",

    "style-loader": "^1.2.1",

templates/DEMO/components/01-content-blocks/02-molecules/00-content-block/_00-content-block.scss

+35 −39
Original line number Diff line number Diff line
@@ -12,13 +12,34 @@ 


.content-block {



  // content padding (eg. in Testimonial)



  --gap-cb-content-hor: #{rem(80)};

  --gap-cb-content-vert: #{rem(40)};



  // fields spacing



  --gap-cb-title-vert: var(--gap-layout-vert-sm);

  --gap-cb-subtitle-vert: 20; // var(--gap-layout-vert-sm);

  --gap-cb-teaser-vert: var(--gap-layout-vert-sm);

  --gap-cb-teaser-wide: var(--gap-layout-vert-medium); // space between group of title-subtitle-teaser & fields underneath



  // buttons spacing

  --gap-cb-buttons-vert: var(--gap-layout-vert);



  --gap-cb-button-hor: #{rem(10)};

  --gap-cb-button-vert: #{rem(10)};



  // ---------------------------------------------------------------------------



  position: relative;



  // by default, we accept that blocks in a col will flow in a column

  // space between the blocks mirrors == the minimal layout spacing option on layouts

  margin-top: rem($cb-gap-vert-minimal);

  margin-top: var(--gap-layout-vert-minimal);



  // reset on first block (so it doesn't add to the layout bottom space)

  &.first-child,

  &:first-child {

      margin-top: 0;

  }
@@ -81,14 +102,14 @@ 
  .text-long a:not(.button):not(.cke-button):not(.cke-button--secondary) {

    a,

    a:visited {

      color: hsl(var(--clr-cb-text-link));

      border-color: hsl(var(--clr-cb-text-link));

      color: hsl(var(--clr-cb-text-link));

    }



    a:hover,

    a:active {

      color: hsl(var(--clr-cb-text-link-hover));

      border-color: hsl(var(--clr-cb-text-link-hover));

      color: hsl(var(--clr-cb-text-link-hover));

    }

  }
@@ -121,14 +142,14 @@ 
  .breadcrumb__link {

    a,

    a:visited {

      color: hsl(var(--clr-cb-text-link));

      border-color: hsl(var(--clr-cb-text-link));

      color: hsl(var(--clr-cb-text-link));

    }



    a:hover,

    a:active {

      color: hsl(var(--clr-cb-text-link-hover));

      border-color: hsl(var(--clr-cb-text-link-hover));

      color: hsl(var(--clr-cb-text-link-hover));

    }

  }
@@ -218,7 +239,7 @@ 
  h2,

  h3 {

    @include font-size($h2-size, $h2-line);

    margin-bottom: rem($cb-gap-title-vert);

    margin-bottom: var(--gap-cb-title-vert);

  }



  &:last-child {
@@ -230,7 +251,7 @@ 
  h3,

  h4 {

    @include font-size($h3-size, $h3-line);

    margin-bottom: rem($cb-gap-subtitle-vert);

    margin-bottom: var(--gap-cb-subtitle-vert);

  }



  &:last-child {
@@ -239,7 +260,7 @@ 
}



.field--name-field-cb-teaser {

  margin-bottom: rem($cb-gap-teaser-vert);

  margin-bottom: var(--gap-cb-teaser-vert);

  font-weight: normal;



  &:last-child {
@@ -257,7 +278,7 @@ 
// .field--name-field-cb-title + .field:not(.field--name-field-cb-subtitle):not(.field--name-field-cb-teaser):not(.field--name-field-cb-button),

.field--name-field-cb-subtitle + .field:not(.field--name-field-cb-teaser):not(.field--name-field-cb-button),

.field--name-field-cb-teaser + .field:not(.field--name-field-cb-button) {

  margin-top: rem($cb-gap-teaser-wide);

  margin-top: var(--gap-cb-teaser-wide);

}



// -- Buttons
@@ -266,11 +287,11 @@ 


  display: flex;

  flex-wrap: wrap;

  margin-top: rem($cb-gap-buttons-vert - $cb-gap-button-vert);

  margin-top: calc(var(--gap-cb-buttons-vert) - var(--gap-cb-button-vert));

  text-align: left;



  .button {

    margin: rem($cb-gap-button-vert) rem($cb-gap-button-hor) 0 0;

    margin: var(--gap-cb-button-vert) var(--gap-cb-button-hor) 0 0;



    @if ($structuralOnly == false) {
@@ -433,16 +454,7 @@ 
  // by default, we accept that blocks in a col will flow in a column



  .content-block {



    // space between the blocks mirrors == the minimal layout spacing option on layouts

    margin-top: rem($cb-gap-vert-minimal);



    // reset on last block (so it doesn't add to the layout bottom space)

    &.first-child,

    &:first-child {

      margin-top: 0;

    }

    // }

    //

  }



}
@@ -460,16 +472,7 @@ 
  // by default, we accept that blocks in a col will flow in a column



  .content-block {



    // space between the blocks mirrors == the minimal layout spacing option on layouts

    margin-top: rem($cb-gap-vert-minimal);



    // reset on last block (so it doesn't add to the layout bottom space)

    &.first-child,

    &:first-child {

      margin-top: 0;

    }

    // }

    //

  }



}
@@ -487,15 +490,8 @@ 


  .content-block {



    // space between the blocks mirrors == the minimal layout spacing option on layouts

    margin-top: rem($cb-gap-vert-minimal);

    //



    // reset on last block (so it doesn't add to the layout bottom space)

    &.first-child,

    &:first-child {

      margin-top: 0;

    }

    // }

  }



}

templates/DEMO/components/01-content-blocks/02-molecules/008-form/_cb-form.scss

+3 −3
Original line number Diff line number Diff line
@@ -57,11 +57,11 @@ 


    display: flex;

    flex-wrap: wrap;

    margin-top: rem($cb-gap-buttons-vert - $cb-gap-button-vert);

    margin-top: calc(var(--gap-cb-buttons-vert) - var(--gap-cb-button-vert));

    text-align: left;



    .button {

      margin: rem($cb-gap-button-vert) rem($cb-gap-button-hor) 0 0;

      margin: var(--gap-cb-button-vert) var(--gap-cb-button-hor) 0 0;

    }

  }
@@ -116,7 +116,7 @@ 
  .block--type-cb-form {



    .webform-flexbox {

      margin: rem($gap-vert) rem(-7);

      margin: var(--gap-layout-vert) rem(-7);

    }



    .webform-flex--container {

templates/DEMO/components/01-content-blocks/02-molecules/010-related-items/_cb-related-items--blog.scss

+1 −1
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
      content: "30 November 2020";

      display: block;

      margin-top: rem(-5);

      margin-bottom: rem($gap-vert-sm);

      margin-bottom: var(--gap-layout-vert);

      font-weight: $font-weight-medium;

      color: #1e1e1f;

    }