refactored scss

Author: JimiRadabaugh

drupal/accordion/sass/3.components/_accordion.scss

@@ -11,22 +11,22 @@
 //
 
 .l-page main.l-content .paragraph.paragraph--type--accordion {
-  @include container-reading;
+  // @include container-reading;
 
   > .field--name-field-title {
-    color: $color--blue2;
+    color: $blue;
     font-weight: bold;
     font-size: 1.25rem;
   }
 }
 
 .paragraph--type--accordion-item {
-  background-color: $color--gray-lt;
+  background-color: $gray;
   border-radius: 4px;
 
   &.accordion--collapsed {
     box-shadow: $box-shadow;
-    background-color: $color--white;
+    background-color: $white;
   }
 }
 
@@ -64,7 +64,7 @@
     .accordion__toggle-icon-horizontal,
     .accordion__toggle-icon-vertical {
       position: absolute;
-      background-color: $color--teal;
+      background-color: $blue;
       transition: background-color 0.2s linear;
     }
 
@@ -94,7 +94,7 @@
   &.accordion--collapsed .accordion__toggle {
     .accordion__toggle-icon-horizontal,
     .accordion__toggle-icon-vertical {
-      background-color: $color--blue2;
+      background-color: $blue;
     }
 
     .accordion__toggle-icon {

drupal/card/sass/3.components/_card.scss

@@ -1,19 +1,18 @@
-//_____________________________________________
-//
+// ---
 // Card
-//_____________________________________________
+// ---
 
 .paragraph--type--card-layout {
   background: #fff;
   box-shadow: 0 20px 30px rgba(0, 0, 0, 0.16);
   padding-bottom: 0.75em;
 
-  @media only screen and (min-width: $bp-layout-builder) {
+  @media only screen and (min-width: $width--m) {
     height: 100%;
   }
 
   .field--name-field-card-tag {
-    background: $blue-secondary;
+    background: $blue;
     border-radius: 0 0 100% 0;
     color: #fff;
     max-width: 110px;
@@ -25,12 +24,6 @@
   .field--name-field-card-image {
     height: 300px;
     overflow: hidden;
-
-    @media only screen and (min-width: $bp-layout-builder) {
-    }
-
-    @media only screen and (min-width: 750px) {
-    }
   }
 
   .field--name-field-card-title,
@@ -42,7 +35,7 @@
   }
 
   .field--name-field-card-title {
-    color: $gray-heading;
+    color: $gray;
     font-size: 1.2em;
     font-weight: bold;
     line-height: 1.2;
@@ -56,7 +49,7 @@
 
   .field--name-field-card-cta {
     a {
-      background: $blue-secondary;
+      background: $blue;
       color: #fff;
       display: inline-block;
       margin-bottom: 1em;
@@ -68,7 +61,7 @@
 
     a:hover,
     a:focus {
-      background: $blue-primary;
+      background: $blue;
     }
   }
 
@@ -100,78 +93,11 @@
   height: 600px;
   margin-bottom: -375px;
 
-  @media only screen and (min-width: $bp-layout-builder) {
+  @media only screen and (min-width: $width--m) {
     background-size: contain;
   }
-}
-
-.node--type-home-page {
-  .card__image-background {
-    @media only screen and (min-width: 950px) {
-      background-size: cover;
-    }
-  }
-}
 
-.node--type-landing-page {
-  .card__image-background {
-    @media only screen and (min-width: $bp-mobile-menu) {
-      background-size: cover;
-    }
-  }
-}
-
-.card__image-position--,
-.card__image-position--center {
-  .field--name-field-card-image {
-    img {
-      clip-path: circle(120px at center 80px);
-    }
-  }
-}
-
-.card__image-position--left {
-  .field--name-field-card-image {
-    img {
-      clip-path: circle(120px at 40% 80px);
-    }
-  }
-}
-
-.card__image-position--right {
-  .field--name-field-card-image {
-    img {
-      clip-path: circle(120px at 66% 80px);
-    }
-  }
-}
-
-.block-field-blocknodehome-pagefield-layout-builder {
-  @media only screen and (min-width: $bp-layout-builder) {
-    width: 104%;
-  }
-
-  @media only screen and (min-width: 768px) {
-    width: 103%;
-  }
-
-  @media only screen and (min-width: $bp-mobile-menu) {
-    width: 100%;
-  }
-
-  .paragraph--type--erl-section:last-child {
-    .layout--fourcol-section > .layout__region {
-      @media only screen and (min-width: $bp-layout-builder) {
-        flex: 0 1 21%;
-      }
-
-      @media only screen and (min-width: 768px) {
-        flex: 0 1 23%;
-      }
-
-      @media only screen and (min-width: 1000px) {
-        flex: 0 1 25%;
-      }
-    }
+  @media only screen and (min-width: $width--l) {
+    background-size: cover;
   }
 }

drupal/carousel/sass/3.components/_carousel.scss

@@ -2,7 +2,7 @@
 // Component: carousel
 
 .carousel {
-  @include layout-breakout();
+  // @include layout-breakout();
   background-image: url();
   background-color: transparent;
   background-position: center center;
@@ -51,7 +51,7 @@
     margin: 0 0 1.5rem;
     padding: 0;
 
-    @media (max-width: $bp-small) {
+    @media (max-width: $width--s) {
       font-size: 1.5rem;
     }
   }
@@ -65,7 +65,7 @@
     vertical-align: middle;
     display: inline-block;
 
-    @media (max-width: 900px) {
+    @media (max-width: $width--m) {
       display: none;
     }
   }
@@ -78,13 +78,12 @@
     margin: 0 0 0 1rem;
   }
 
-
   .carousel__link {
     margin-top: 1rem;
   }
 
   .carousel__link > a {
-    @include button-arrow-light;
+    // @include button-arrow-light;
   }
 
   .carousel__slides {
@@ -93,7 +92,7 @@
   }
 
   button {
-    @include button-clean();
+    // @include button-clean();
   }
 
   svg {
@@ -137,7 +136,6 @@
     transform: rotate(-180deg);
   }
 
-
   .carousel-control__pagination-icon {
     display: block;
     height: 12px;
@@ -160,7 +158,6 @@
     }
   }
 
-
   .carousel-item--is-active .carousel-control__pagination-icon svg {
     fill: $white;
   }

drupal/cta/sass/3.components/_paragraph--cta-section.scss

@@ -1,13 +1,13 @@
 .paragraph.paragraph--type--internal-cta-section {
-  @include lazyloadBase;
+  // @include lazyloadBase;
   margin-top: 3rem;
 
   &.in-view {
-    @include lazyloaded;
+    // @include lazyloaded;
   }
 
   h3 {
-    @include responsive-font(3em, .83, 4rem, 1);
+    // @include responsive-font(3em, .83, 4rem, 1);
   }
 }
 
@@ -34,7 +34,7 @@
   padding: 0 2.5em;
   padding-top: 9.5%;
   padding-bottom: 5.25%;
-  border: 1px solid rgba($color--midgray, .75);
+  border: 1px solid rgba($gray, .75);
   border-left-width: 0;
 
   @media screen and (max-width: 1100px) {
@@ -43,7 +43,7 @@
   }
 
   p {
-    color: $color--darkgray;
+    color: $gray;
   }
 
   .field--name-field-single-cta {
@@ -81,4 +81,4 @@
       margin-left: 0;
     }
   }
-}
+}