UIKit Refactor Part 3: Bug Fixes + ITCSS Folder Reorganization

packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss

@@ -1,5 +1,5 @@
-@import 'scss/abstracts/variables';
-@import 'scss/abstracts/mixins';
+@import 'scss/01-abstracts/variables';
+@import 'scss/01-abstracts/mixins';
 
 @keyframes animateIn {
   from {

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -15,32 +15,31 @@
     #TABLE OF CONTENTS
 \*------------------------------------*/
 /**
- * ABSTRACTS.................Variables
+ * ABSTRACTS.................Variables and mixins
  * BASE......................Reset & Base elements
+ * VENDOR....................Styles out of PL control
  * COMPONENTS................Components
+ * THEMES....................Theming variations
  * UTILITIES.................Helper classes
- * VENDOR....................Styles out of PL control
  */
 
 /*------------------------------------*\
     #ABSTRACTS
 \*------------------------------------*/
-@import "scss/abstracts/variables";
-@import "scss/abstracts/mixins";
-
-
-
-
+@import 'scss/01-abstracts/variables';
+@import 'scss/01-abstracts/mixins';
 
 /*------------------------------------*\
     #BASE
 \*------------------------------------*/
-@import "scss/base/reset";
-@import "scss/base/body";
-
-
-
+@import 'scss/02-base/reset';
+@import 'scss/02-base/body';
 
+/*------------------------------------*\
+    #VENDOR
+\*------------------------------------*/
+@import 'scss/03-vendor/typeahead';
+@import 'scss/03-vendor/prism';
 
 /*------------------------------------*\
     #COMPONENTS
@@ -49,59 +48,41 @@
 /**
  * Pattern Lab Header
  */
-@import "scss/components/header";
-@import "scss/components/logo";
-@import "scss/components/navigation";
-@import "scss/components/ish-sizing";
-@import "scss/components/controls";
-@import "scss/components/tools";
+@import 'scss/04-components/header';
+@import 'scss/04-components/logo';
+@import 'scss/04-components/navigation';
+@import 'scss/04-components/ish-sizing';
+@import 'scss/04-components/controls';
+@import 'scss/04-components/tools';
 
 /**
  * Viewport
  */
-@import "scss/components/viewport";
+@import 'scss/04-components/viewport';
 
 /**
  * Pattern Styles
  */
-@import "scss/components/pattern";
-@import "scss/components/pattern-category";
-@import "scss/components/pattern-info";
-@import "scss/components/pattern-states";
-@import "scss/components/pattern-lineage";
-@import "scss/components/breadcrumbs";
-@import "scss/components/tabs";
-@import "scss/components/tools";
-@import "scss/components/annotations";
-@import "scss/components/modal";
-@import "scss/components/text-passage";
-
-
-
-
+@import 'scss/04-components/pattern';
+@import 'scss/04-components/pattern-category';
+@import 'scss/04-components/pattern-info';
+@import 'scss/04-components/pattern-states';
+@import 'scss/04-components/pattern-lineage';
+@import 'scss/04-components/breadcrumbs';
+@import 'scss/04-components/tabs';
+@import 'scss/04-components/tools';
+@import 'scss/04-components/annotations';
+@import 'scss/04-components/modal';
+@import 'scss/04-components/text-passage';
 
 /*------------------------------------*\
-    #UTILITIES
-\*------------------------------------*/
-@import "scss/utilities/visibility";
-
-
-
-
-
-/*------------------------------------*\
-    #VENDOR
+    #THEMES
 \*------------------------------------*/
-@import "scss/vendor/typeahead";
-@import "scss/vendor/prism";
-
-
-
-
+@import 'scss/05-themes/light-theme';
+@import 'scss/05-themes/density-theme';
+@import 'scss/05-themes/sidebar-theme';
 
 /*------------------------------------*\
-    #THEMES
+    #UTILITIES
 \*------------------------------------*/
-@import "scss/themes/light-theme";
-@import "scss/themes/density-theme";
-@import "scss/themes/sidebar-theme";
+@import 'scss/06-utilities/visibility';

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -0,0 +1,98 @@
+/*------------------------------------*\
+    #VARIABLES
+\*------------------------------------*/
+
+/**
+ * List Reset
+ */
+@mixin listReset() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Hide scrollbar
+ * 1) This hides scrollbars on Windows devices
+ */
+@mixin hideScrollBar() {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}
+
+/**
+ * Header Link Style
+ */
+@mixin linkStyle() {
+  background: $pl-color-black;
+  color: $pl-color-gray-50;
+  text-decoration: none;
+  line-height: 1;
+  padding: 0.7rem 0.5rem;
+  border: 0;
+  text-align: left;
+  transition: background $pl-animate-quick ease-out,
+    color $pl-animate-quick ease-out;
+
+  &:hover {
+    color: $pl-color-white;
+    background: $pl-color-gray-87;
+  }
+
+  &:focus,
+  &.active {
+    color: $pl-color-white;
+    background: $pl-color-gray-87;
+    outline: 1px dotted $pl-color-gray-50;
+    outline-offset: -1px;
+  }
+
+  /**
+     * Header link styles inside light theme
+     */
+  .pl-c-body--theme-light & {
+    background: $pl-color-white;
+    color: $pl-color-gray-70;
+  }
+
+  /**
+     * Header link styles inside cozy theme
+     */
+  .pl-c-body--theme-density-cozy & {
+    font-size: $pl-font-size-sm-2;
+    padding: 1.2rem 0.8rem;
+  }
+
+  /**
+     * Header link styles inside comfortable theme
+     */
+  .pl-c-body--theme-density-comfortable & {
+    font-size: $pl-font-size-sm-2;
+    padding: 1.5rem 1rem;
+  }
+}
+
+/**
+ * Accordion panel
+ */
+@mixin accordionPanel() {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height $pl-animate-quick ease-out;
+
+  /**
+     * Active is when accordion panel is open
+     */
+  &.pl-is-active {
+    max-height: none;
+    overflow: auto;
+    @include hideScrollBar();
+
+    @media all and (min-width: $pl-bp-med) {
+      max-height: 120rem;
+    }
+  }
+}

packages/uikit-workshop/src/sass/scss/abstracts/_variables.scss → packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -18,15 +18,15 @@ $pl-color-gray-70: #4d4c4c;
 $pl-color-gray-87: #222;
 $pl-color-black: #000;
 
-$pl-color-trans-white-25: rgba(255,255,255,0.25);
+$pl-color-trans-white-25: rgba(255, 255, 255, 0.25);
 
-$pl-color-state-info: #02A4D5;
-$pl-color-state-complete: #03790F;
-$pl-color-state-inreview: #C7A118;
-$pl-color-state-deprecated: #B00B02;
+$pl-color-state-info: #02a4d5;
+$pl-color-state-complete: #03790f;
+$pl-color-state-inreview: #c7a118;
+$pl-color-state-deprecated: #b00b02;
 
 // Font Family
-$pl-font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+$pl-font: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;
 
 // Font sizes
 $pl-font-size-sm: 0.7rem;
@@ -36,7 +36,7 @@ $pl-font-size-large: 1.2rem;
 
 // Spacing & Padding
 $pl-space: 1rem;
-$pl-doublespace: $pl-space*2;
+$pl-doublespace: $pl-space * 2;
 $pl-pad: 1rem;
 $pl-pad-half: $pl-pad/2;
 $offset-top: 2rem;
@@ -51,4 +51,4 @@ $pl-animate-quick: 0.1s;
 
 // Borders
 $pl-border-radius: 3px;
-$pl-border-radius-med: 6px;
+$pl-border-radius-med: 6px;

packages/uikit-workshop/src/sass/scss/base/_body.scss → packages/uikit-workshop/src/sass/scss/02-base/_body.scss

@@ -8,8 +8,11 @@
 * 2) Styled as IDs to avoid collisions with user <body> tag
 */
 .pl-c-body {
-    margin: 0;
-    padding: 0;
-    background: $pl-color-gray-13;
-    -webkit-text-size-adjust: 100%;
-}
+  margin: 0;
+  padding: 0;
+  background: $pl-color-gray-13;
+  -webkit-text-size-adjust: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}

packages/uikit-workshop/src/sass/scss/base/_reset.scss → packages/uikit-workshop/src/sass/scss/02-base/_reset.scss

@@ -11,7 +11,7 @@
  * going to default to this.
  */
 .pl-c-body * {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}