sass-zero 0.0.44 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1bedb80a3b82ff395f4fcb62ace52fa617d6dfbf57071c0ccfbe896cf07927e8
-  data.tar.gz: 0af153c127e2f31ebcf72b198b6524599d5a3a1e0346568ff175c20c51ebb398
+  metadata.gz: 90335efa16cb09716e4c31bd9cb7df2469d9e586ce409ac5db752ef195f367a5
+  data.tar.gz: 867fd4aec244f7886f26d438734e92d3e7511d9be443983632d673a12a4296b3
 SHA512:
-  metadata.gz: 8c9d00ad068770c7f76c458ffd0111c96f6a673a6397a8999df4394275a648451dc93f977f67dace21a1a7ce5451c7b4caab1080220301f073d7aae06c227e04
-  data.tar.gz: 72a68175415ff39c9e565a851af374bbd3ab1587d3d72bca6ea7f151e8af0958618cd434aaaf2d889be141ca91c97a8a4b6a5cb28273b60c4917d1e99632e307
+  metadata.gz: 14ac230bce5200038c588cbca45e565931061251a1e401ccf3699a1c326ef55eb0caf3806b6c29124a6641847567891d69e3d43c0b0280cf8ba26f4d7ac66ee3
+  data.tar.gz: b525273b68b1538a8102dbeb0ccd9abeaa9bcb5f60e1fea95829613fdcdfcdb354b991e228e22c6fd915fb4c515374cedac40d775c233ac8b5289ef3735948d9

data/Example.html

@@ -1,4 +1,4 @@
-<main>
+<main class="container">
   <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
   <a href="#">Anchor</a>
   <em>Emphasis</em>
@@ -24,9 +24,9 @@
 
   <form class="push-lg--bottom">
     <div class="push-md--bottom">
-      <label for="nameField">Name</label>
+      <label for="nameField" class="u-display-b txt--bold">Name</label>
       <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
-      <label for="ageRangeField">Age Range</label>
+      <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
 
       <select id="ageRangeField" class="input input--select">
         <option value="0-13">0-13</option>
@@ -35,36 +35,36 @@
         <option value="24+">24+</option>
       </select>
 
-      <label for="commentField">Comment</label>
+      <label for="commentField" class="u-display-b txt--bold">Comment</label>
       <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
 
       <div class="push-md--bottom">
         <div>
           <input type="checkbox" name="option1" value="1" class="checkbox" checked>
-          <label for="option1">Option 1</label>
+          <label for="option1" class="u-display-ib">Option 1</label>
         </div>
         <div>
           <input type="checkbox" name="option2" value="2" class="checkbox">
-          <label for="option2">Option 2</label>
+          <label for="option2" class="u-display-ib">Option 2</label>
         </div>
         <div>
           <input type="checkbox" name="option3" value="3" class="checkbox">
-          <label for="option3">Option 3</label>
+          <label for="option3" class="u-display-ib">Option 3</label>
         </div>
       </div>
 
       <div class="push-md--bottom">
         <div>
           <input type="radio" name="radio" value="1" class="radio" checked>
-          <label for="radio">Option 1</label>
+          <label for="radio" class="u-display-ib">Option 1</label>
         </div>
         <div>
           <input type="radio" name="radio" value="2" class="radio">
-          <label for="radio">Option 2</label>
+          <label for="radio" class="u-display-ib">Option 2</label>
         </div>
         <div>
           <input type="radio" name="radio" value="3" class="radio">
-          <label for="radio">Option 3</label>
+          <label for="radio" class="u-display-ib">Option 3</label>
         </div>
       </div>
     </div>
@@ -113,13 +113,13 @@
 
   <hr>
 
-  <ul>
+  <ul class="list--unindented ">
     <li>Unordered list item 1</li>
     <li>Unordered list item 2</li>
     <li>Unordered list item 3</li>
   </ul>
 
-  <ol>
+  <ol class="list--unindented ">
     <li>Ordered list item 1</li>
     <li>Ordered list item 2</li>
     <li>Ordered list item 3</li>

data/README.md

@@ -51,7 +51,9 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 
 ### Utilities
 
+- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/align.scss)
 - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
+- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.scss)
 - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
 - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
 - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)

data/app/assets/stylesheets/sass-zero/base/preflight.scss

@@ -1,4 +1,5 @@
-@import "sass-zero/variables";
+@import "sass-zero/variables/colors";
+@import "sass-zero/variables/typography";
 
 /**
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base

data/app/assets/stylesheets/sass-zero/breadboard.scss

@@ -1,6 +1,11 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
+$font-family: $font-sans;
+
+$radius-input:  $rounded;
+$radius-button: $rounded;
+
 $color-bg--main:    $white;
 $color-bg--surface: $gray-100;
 $color-primary:     $gray-900;
@@ -14,12 +19,8 @@ $image-checked-radio-white:    url('data:image/svg+xml,<svg viewBox="0 0 16 16"
 html {
   background: $color-bg--main;
   color: $color-txt;
-  font-size: 14px;
-}
-
-main {
-  padding-right: $size-2;
-  padding-left:  $size-2;
+  font-family: $font-family;
+  font-size: 16px;
 }
 
 blockquote {
@@ -29,7 +30,7 @@ blockquote {
 }
 
 .btn {
-  border-radius: $rounded;
+  border-radius: $radius-button;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
@@ -65,7 +66,7 @@ blockquote {
 
 code {
   background-color: $color-bg--surface;
-  border-radius: $rounded;
+  border-radius: $rounded-xl;
   font-size: $text-sm;
   margin: $size-0 $size-1;
   padding: $size-1 $size-2;
@@ -93,7 +94,7 @@ hr {
 .input {
   appearance: none;
   background-color: $transparent;
-  border-radius: $rounded;
+  border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $size-full;
@@ -142,21 +143,24 @@ hr {
   }
 }
 
-label, legend, dt {
-  display: inline-block;
-  margin-bottom: $size-1;
-}
-
 a {
   font-weight: $font-bold;
 }
 
+ul, ol {
+  padding-left: $size-10;
+}
+
 ul {
-  list-style: disc inside;
+  list-style: disc outside;
 }
 
 ol {
-  list-style: decimal inside;
+  list-style: decimal outside;
+}
+
+label, legend, dt {
+  margin-bottom: $size-1;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
@@ -209,8 +213,3 @@ h5, .hdg--lg {
 h6, .hdg--base {
   font-size: $text-base;
 }
-
-@media (min-width: $breakpoint-md) {
-  html { font-size: 16px; }
-  main { @include make-container($size-10, $breakpoint-xl); }
-}

data/app/assets/stylesheets/sass-zero/mixins.scss

@@ -1,12 +1,7 @@
 @import "sass-zero/variables/border";
 @import "sass-zero/variables/effects";
 @import "sass-zero/variables/spacing";
-
-@mixin ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+@import "sass-zero/variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -26,11 +21,10 @@
   }
 }
 
-@mixin checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-position: center;
-  background-repeat: no-repeat;
+@mixin ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 @mixin input-selection($color) {
@@ -42,6 +36,13 @@
   width: $size-4;
 }
 
+@mixin checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 @mixin outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -57,6 +58,22 @@
   outline-offset: 2px;
 }
 
+@mixin divider($color) {
+  position: relative;
+  z-index: $z-10;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: $size-0;
+    right: $size-0;
+    height: $size-px;
+    background-color: $color;
+    z-index: -1;
+  }
+}
+
 @mixin space-x($space, $reverse: false) {
   & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
@@ -77,11 +94,10 @@
   }
 }
 
-@mixin make-container($padding-x, $max-width) {
+@mixin make-container($padding-x: $size-4) {
   width: 100%;
   padding-right: $padding-x;
   padding-left: $padding-x;
   margin-right: $size-auto;
   margin-left:  $size-auto;
-  max-width: $max-width;
 }

data/app/assets/stylesheets/sass-zero/utilities.scss

@@ -1,4 +1,13 @@
+$color-txt:                  #18181b;
+$color-txt--subtle:          #3f3f46;
+$color-txt--subtle-reversed: #fff;
+$color-txt--decorated:       #3b82f6;
+
+$color-bg--highlight: #f4f4f5;
+
+@import "sass-zero/utilities/align";
 @import "sass-zero/utilities/animation";
+@import "sass-zero/utilities/container";
 @import "sass-zero/utilities/flex";
 @import "sass-zero/utilities/flush";
 @import "sass-zero/utilities/layout";

data/app/assets/stylesheets/sass-zero/utilities/align.scss

@@ -0,0 +1,28 @@
+.align--top {
+  vertical-align: top;
+}
+
+.align--middle {
+  vertical-align: middle;
+}
+
+.align--bottom {
+  vertical-align: bottom;
+}
+
+.align--left {
+  text-align: left;
+}
+
+.align--center {
+  text-align: center;
+}
+
+.align--right {
+  text-align: right;
+}
+
+.centered {
+  margin-left:  auto;
+  margin-right: auto
+}

data/app/assets/stylesheets/sass-zero/utilities/container.scss

@@ -0,0 +1,36 @@
+@import "sass-zero/variables/breakpoints";
+@import "sass-zero/mixins";
+
+.container {
+  @include make-container;
+}
+
+@media (min-width: $breakpoint-sm) {
+  .container {
+    max-width: $breakpoint-sm;
+  }
+}
+
+@media (min-width: $breakpoint-md) {
+  .container {
+    max-width: $breakpoint-md;
+  }
+}
+
+@media (min-width: $breakpoint-lg) {
+  .container {
+    max-width: $breakpoint-lg;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .container {
+    max-width: $breakpoint-xl;
+  }
+}
+
+@media (min-width: $breakpoint-2xl) {
+  .container {
+    max-width: $breakpoint-2xl;
+  }
+}

data/app/assets/stylesheets/sass-zero/utilities/layout.scss

@@ -6,13 +6,26 @@
   width: 100%;
 }
 
+.u-full-height {
+  height:100%
+}
+
 .u-min-width {
   min-width: 0;
 }
 
 .u-disabled {
   pointer-events: none;
-  opacity: $opacity-50;
+  opacity: $opacity-30;
+}
+
+.u-off-screen {
+  position: absolute;
+  left: -9999em;
+}
+
+.u-overflow-auto {
+  overflow: auto;
 }
 
 .u-unscrollable {
@@ -35,9 +48,25 @@
   display: none !important;
 }
 
-.u-centered {
-  margin-right: auto;
+.u-visibility-hidden {
+  visibility: hidden;
+}
+
+.u-pointer-events-n {
+  pointer-events: none;
+}
+
+.u-margin-centered {
   margin-left:  auto;
+  margin-right: auto;
+}
+
+.u-wrap {
+  display: block;
+}
+
+.u-nowrap {
+  white-space: nowrap;
 }
 
 .u-clearfix {
@@ -68,6 +97,14 @@
   clear: right;
 }
 
+.u-hide {
+  display: none;
+}
+
+.u-hide-focus {
+  outline: none !important;
+}
+
 @media (max-width: $breakpoint-md - 1) {
   .u-hide\@small {
     display: none;

data/app/assets/stylesheets/sass-zero/utilities/list.scss

@@ -1,12 +1,16 @@
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/colors";
 @import "sass-zero/mixins";
 
 .list--unindented {
-  padding-left: $size-8;
+  padding-left: $size-4;
+}
+
+.list--flush {
+  padding-left: $size-0;
 }
 
 .list--unbulleted {
+  padding-left: $size-0;
   list-style: none;
 }
 
@@ -14,18 +18,24 @@
   @include space-y($size-2);
 }
 
-.list--boxed {
-  background-color: $gray-200;
-  padding: $size-4;
-  border-radius: $rounded;
+.list--inside-bulleted {
+  padding-left: $size-0;
+  list-style-position: inside;
 }
 
-.list--ruled > li {
-  padding: $size-3 $size-4;
+.list--ruled-top {
   border-top-width: $border;
 }
 
+.list--inline {
+  @include space-x($size-2);
+}
+
 .list--inline > li {
-  margin-right: $size-2;
   display: inline-block;
 }
+
+.list--ruled > li {
+  padding: $size-4 $size-2;
+  border-top-width: $border;
+}

data/app/assets/stylesheets/sass-zero/utilities/position.scss

@@ -1,8 +1,8 @@
-.position-context {
+.u-position-context {
   position: relative;
 }
 
-.position {
+.u-position {
   position: absolute;
 
   &--right { right: 0; }

data/app/assets/stylesheets/sass-zero/utilities/text.scss

@@ -1,72 +1,38 @@
 @import "sass-zero/variables/typography";
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/colors";
-@import "sass-zero/variables/border";
 @import "sass-zero/mixins";
 
-.txt--xs {
-  font-size: $text-xs;
-  line-height: $leading-4;
-}
-
-.txt--sm {
-  font-size: $text-sm;
-  line-height: $leading-5;
-}
-
-.txt--md {
-  font-size: $text-base;
-  line-height: $leading-6;
-}
-
-.txt--lg {
-  font-size: $text-lg;
-  line-height: $leading-7;
-}
-
-.txt--xl {
-  font-size: $text-xl;
-  line-height: $leading-7;
-}
-
-.txt--2xl {
-  font-size: $text-2xl;
-  line-height: $leading-8;
+.txt--normal {
+  font-weight: $font-normal !important;
 }
 
-.txt--3xl {
-  font-size: $text-3xl;
-  line-height: $leading-9;
+.txt--bold {
+  font-weight: $font-bold;
 }
 
-.txt--4xl {
-  font-size: $text-4xl;
-  line-height: $leading-10;
+.txt--underline {
+  text-decoration: underline;
 }
 
-.txt--5xl {
-  font-size: $text-5xl;
-  line-height: $leading-4;
+.txt--uppercase {
+  text-transform: uppercase;
 }
 
-.txt--6xl {
-  font-size: $text-6xl;
-  line-height: $leading-4;
+.txt--subtle {
+  color: $color-txt--subtle;
 }
 
-.txt--7xl {
-  font-size: $text-7xl;
-  line-height: $leading-4;
+.txt--subtle-reversed {
+  color: $color-txt--subtle-reversed;
 }
 
-.txt--8xl {
-  font-size: $text-8xl;
-  line-height: $leading-4;
+.txt--full-contrast {
+  color: $color-txt;
 }
 
-.txt--9xl {
-  font-size: $text-9xl;
-  line-height: $leading-4;
+.txt--meta {
+  font-size: $text-sm;
+  color: $color-txt--subtle;
 }
 
 .txt--nowrap {
@@ -89,62 +55,100 @@
   @include ellipsis;
 }
 
-.txt--normal {
-  font-weight: $font-normal !important;
+.txt--dimmed {
+  opacity: $opacity-75;
 }
 
-.txt--bold {
-  font-weight: $font-bold;
+.txt--very-dimmed {
+  opacity: $opacity-50;
 }
 
-.txt--subtle {
-  color: $gray-700;
+.txt--highlight {
+  background-color: $color-bg--highlight;
+  border-radius: $rounded-full;
+  padding: $size-0 $size-1;
 }
 
-.txt--underline {
-  text-decoration: underline;
+.txt--overflow-hidden {
+  overflow: hidden;
 }
 
-.txt--uppercase {
-  text-transform: uppercase;
+.txt--xs {
+  font-size: $text-xs;
+  line-height: $leading-4;
 }
 
-.txt--highlight {
-  background-color: $gray-200;
-  border-radius: $rounded-full;
-  padding: $size-0 $size-1;
+.txt--sm {
+  font-size: $text-sm;
+  line-height: $leading-5;
+}
+
+.txt--md {
+  font-size: $text-base;
+  line-height: $leading-6;
+}
+
+.txt--lg {
+  font-size: $text-lg;
+  line-height: $leading-7;
 }
 
-.align--top {
-  vertical-align: top;
+.txt--xl {
+  font-size: $text-xl;
+  line-height: $leading-7;
+}
+
+.txt--2xl {
+  font-size: $text-2xl;
+  line-height: $leading-8;
+}
+
+.txt--3xl {
+  font-size: $text-3xl;
+  line-height: $leading-9;
+}
+
+.txt--4xl {
+  font-size: $text-4xl;
+  line-height: $leading-10;
 }
 
-.align--middle {
-  vertical-align: middle;
+.txt--5xl {
+  font-size: $text-5xl;
+  line-height: $leading-none;
 }
 
-.align--bottom {
-  vertical-align: bottom;
+.txt--6xl {
+  font-size: $text-6xl;
+  line-height: $leading-none;
 }
 
-.align--left {
-  text-align: left;
+.txt--7xl {
+  font-size: $text-7xl;
+  line-height: $leading-none;
 }
 
-.align--center {
-  text-align: center;
+.txt--8xl {
+  font-size: $text-8xl;
+  line-height: $leading-none;
 }
 
-.align--right {
-  text-align: right;
+.txt--9xl {
+  font-size: $text-9xl;
+  line-height: $leading-none;
 }
 
 .decorated {
-  color: $blue-500;
+  color: $color-txt--decorated;
   text-decoration: underline;
 }
 
 .decorated--subtle {
-  color: $gray-700;
+  color: $color-txt--subtle;
   text-decoration: underline;
 }
+
+.undecorated {
+  color: inherit;
+  text-decoration: none;
+}

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.44"
+    VERSION = "0.0.45"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.44",
+	"version": "0.0.45",
 	"description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
 	"homepage": "https://github.com/lazaronixon/sass-zero",
 	"repository": "lazaronixon/sass-zero",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.44
+  version: 0.0.45
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-15 00:00:00.000000000 Z
+date: 2020-12-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -42,7 +42,9 @@ files:
 - app/assets/stylesheets/sass-zero/breadboard.scss
 - app/assets/stylesheets/sass-zero/mixins.scss
 - app/assets/stylesheets/sass-zero/utilities.scss
+- app/assets/stylesheets/sass-zero/utilities/align.scss
 - app/assets/stylesheets/sass-zero/utilities/animation.scss
+- app/assets/stylesheets/sass-zero/utilities/container.scss
 - app/assets/stylesheets/sass-zero/utilities/flex.scss
 - app/assets/stylesheets/sass-zero/utilities/flush.scss
 - app/assets/stylesheets/sass-zero/utilities/layout.scss