sass-zero 0.0.31 → 0.0.32

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce469c4686a62d121ad1ade1373ba405cad83cedf625ae00b526eda771073472
-  data.tar.gz: b2198c5a71f6dbf1b3d802582247b1bc62888675dbe3eea394ad35318b2744b1
+  metadata.gz: 8a938a8984b061ac6f78e52e4fa3f89bda2b3786f2e45dc11eb79d6d12f9337c
+  data.tar.gz: 4517f9c31478d0eb64520cd26196a4f7bde9ac42f0ba9208dfecabe08d725b97
 SHA512:
-  metadata.gz: c6e36bbe234a935df14f130fd656665e26851ac13f9527214427a0f3475506875a4814aa757352273f42a13a6f9ea11eff5ea019c2cd8aff243e3d0f89572238
-  data.tar.gz: ad312080172289bbdab2a3c286dbcece0a2a06dd8ad63197792bbf29c776dcdeebffc52ac2299db7522dc49153ac4553bdbaa4c21bf000aeb2ceaf7a7c8536dd
+  metadata.gz: bdca8b227b9bf6cccc345decd7814a829560d5b2429da1c4e6aaa537440c90e65d2368c89f60c0910ff2bc25bed51817171a1631887edce9bf52ca7e29158c1f
+  data.tar.gz: 9bdacc79bf814a124784e011935932eec5762751d62f137782aa6791b1460cfc719b46a09f9e8940f5eb863b27142776bdf978a5b88d4425610b7199274d64fd

data/Example.html

@@ -1,6 +1,6 @@
 <main>
   <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
-  <a>Anchor</a>
+  <a href="#">Anchor</a>
   <em>Emphasis</em>
   <small>Small</small>
   <strong>Strong</strong>
@@ -11,8 +11,6 @@
   <h4>Heading</h4>
   <h5>Heading</h5>
   <h6>Heading</h6>
-  <h6 class="hdg hdg--divider"><span>Divider</span></h6>
-
 
   <button class="btn btn--primary">Button Primary</button>
   <button class="btn btn--secondary">Button Secondary</button>
@@ -119,8 +117,15 @@
     <li>Unordered list item 1</li>
     <li>Unordered list item 2</li>
   </ul>
+
   <ol>
     <li>Ordered list item 1</li>
     <li>Ordered list item 2</li>
   </ol>
+
+  <dl>
+    <dt class="txt--bold">Description lists</dt>
+    <dd>A description list is perfect for defining terms.</dd>
+    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+  </dl>
 </main>

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

@@ -2,6 +2,7 @@
 @import "sass-zero/mixins";
 
 html {
+  color: $breadboard-color;
   font-size: 14px;
 }
 
@@ -35,10 +36,6 @@ blockquote {
     opacity: $opacity-50;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &--primary {
     background-color: $breadboard-primary;
     border-color: $breadboard-primary;
@@ -49,13 +46,11 @@ blockquote {
   &--secondary {
     background-color: $white;
     border-color: $breadboard-primary;
-    color: $breadboard-primary;
   }
 
   &--tertiary {
     background-color: transparent;
     border-color: transparent;
-    color: $breadboard-color;
   }
 }
 
@@ -63,7 +58,7 @@ code {
   background-color: $breadboard-background;
   border-radius: $rounded;
   font-size: $text-sm;
-  margin: 0 $size-1;
+  margin: $size-0 $size-1;
   padding: $size-1 $size-2;
   white-space: nowrap;
 }
@@ -84,11 +79,9 @@ pre {
 
 hr {
   margin: $size-10 $size-0;
-  border-bottom-width: $border-2;
 }
 
 .input {
-  appearance: none;
   border-radius: $rounded;
   border-width: $border;
   padding: $size-2 $size-3;
@@ -101,6 +94,7 @@ hr {
   }
 
   &--select {
+    appearance: none;
   	background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23a0aec0" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
     background-position: right $size-2 center;
     background-repeat: no-repeat;
@@ -110,16 +104,14 @@ hr {
 }
 
 label, legend {
-  display: block;
+  display: inline-block;
   margin-bottom: $size-1;
 }
 
 .checkbox, .radio {
   appearance: none;
-  background-origin: border-box;
   border-width: $border;
   color: $breadboard-primary;
-  display: inline-block;
   margin-bottom: -0.2rem;
   height: $size-4;
   width: $size-4;
@@ -155,9 +147,7 @@ label, legend {
 }
 
 a {
-  color: $breadboard-primary;
   font-weight: $font-bold;
-  cursor: pointer;
 }
 
 ol {
@@ -176,19 +166,11 @@ dd, dt, li, .btn {
   margin-bottom: $size-2;
 }
 
-fieldset, .input, .select {
+fieldset, .input {
   margin-bottom: $size-4;
 }
 
-blockquote,
-dl,
-figure,
-form,
-ol,
-p,
-pre,
-table,
-ul {
+blockquote, dl, figure, form, ol, p, pre, table, ul {
   margin-bottom: $size-6;
 }
 
@@ -196,10 +178,6 @@ table {
   width: $size-full;
 }
 
-thead th {
-  border-bottom-width: $border-2;
-}
-
 td, th {
   border-bottom-width: $border;
   padding: $size-3 $size-4;
@@ -235,30 +213,8 @@ h6, .hdg--base {
   font-size: $text-base;
 }
 
-.hdg--divider {
-  position: relative;
-  z-index: 0;
-
-  > span {
-    background-color: $breadboard-background;
-    padding-right: $size-2;
-  }
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left:  $size-0;
-    right: $size-0;
-    height: $size-px;
-    background: $breadboard-border;
-    z-index: -1;
-  }
-}
-
 @media (min-width: $breakpoint-md) {
   html {
-    color: $breadboard-color;
     font-size: 16px;
   }
 

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

@@ -1,3 +1,11 @@
+@mixin clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
 @mixin ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -1,4 +1,4 @@
-@import "sass-zero/variables";
+@import "sass-zero/variables/breakpoints";
 @import "sass-zero/mixins";
 
 .u-full-width {
@@ -30,6 +30,10 @@
   margin-left: auto;
 }
 
+.u-clearfix {
+  @include clearfix;
+}
+
 .u-float-l {
   float: left;
 }

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

@@ -14,4 +14,10 @@
     margin-right:  $size-2;
     display: inline-block;
   }
+
+  &--boxed {
+   background: $gray-200;
+   padding: $size-4;
+   border-radius: $size-4;
+  }
 }

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

@@ -1,4 +1,7 @@
-@import "sass-zero/variables";
+@import "sass-zero/variables/typography";
+@import "sass-zero/variables/spacing";
+@import "sass-zero/variables/border";
+@import "sass-zero/variables/colors";
 @import "sass-zero/mixins";
 
 .txt {
@@ -47,24 +50,9 @@
   }
 
   &--highlight {
-    background-color: $gray-300;
-    margin-left: 3px;
-    padding: 0 0.2em;
-    border-radius: 4rem 2rem 4.2rem 1.1rem;
-    box-shadow: 0.2em 0 0 $gray-300, -0.2em 0 0 $gray-300;
-  }
-
-  &--highlight-underline {
-    background-image: url('data:image/svg+xml,<svg viewBox="0 0 284 11" fill="%23e2e8f0" xmlns="http://www.w3.org/2000/svg"><path d="m31.803886 8.47027008c68.843749-9.56054688 255.210937-9.56054693 250.988281-9.56054688-4.222656.00000006-250.9882818 16.4023438-250.9882818 16.4023438s-68.8437485 2.71875.0000008-6.84179692z" fill-rule="evenodd" transform="matrix(.99862953 .05233596 -.05233596 .99862953 .57616 -7.423532)"/></svg>');
-    background-repeat: no-repeat;
-    background-position: center 103%;
-    background-size: 105%
-  }
-
-  &--highlight-bottom {
-    border-bottom: $border solid $gray-300;
-    box-shadow: inset 0 -6px 0 $gray-300;
-    font-style: normal;
+    background-color: $gray-200;
+    border-radius: $rounded;
+    padding: $size-0 $size-1;
   }
 
   &--normal {

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.31"
+    VERSION = "0.0.32"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"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.31
+  version: 0.0.32
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-08 00:00:00.000000000 Z
+date: 2020-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails