sass-zero 0.0.14 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2974a9b4648571bb4a16e94c6ce3bd9c923d25787a0e4c546678116ff9308c6e
-  data.tar.gz: ae5725022309488b30fcb725087e16e7a19dc110d876cf4232ea886e546bb0f5
+  metadata.gz: 47d35302ba2723cb777011a6bfa1c894bdafaf377a61c7e7d4af315a1f21a0f2
+  data.tar.gz: d54d3f3eee2afb89cab063c746e895c9ba58bdf0398e48c161fc09fccb42a3ca
 SHA512:
-  metadata.gz: 9d5e8e6c90dd7d9d39cd3504e79c7e928c19b622f4501e538affa52ec8d8be4e83b4b3c8a27d76740ccca8b4d592b9326a4113ef2b4b624e2b658428cd6abf36
-  data.tar.gz: a67882cb90857fe98ce3ef8a5911ce524f5cd3b35462285eda0518d88334330f54bc945fe8ee5340ace745f0c1d05a7b73b684775e82dbb38320b93f5e9bdfac
+  metadata.gz: '09f602335ec3c316cc335888f6509a08bb252f859fbd23b2549d3ace7349a925e7a79f0760991e416da9f26fc483f0c27afb1402dd2b9251380ee2e9e5cf26f4'
+  data.tar.gz: 30833cac34f6c06e55d00d00635f5a5d0740a41212e6613fcc85a63178327e8b305decc2fc7be1cf622a94cdd9c533743eb387ffcae261aadc8eea18123926ba

data/Example.html

@@ -1,3 +1,9 @@
+<style>
+  .btn--plus-icon {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="%231a202c" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>');
+  }
+</style>
+
 <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
 <a>Anchor</a>
 <em>Emphasis</em>
@@ -12,9 +18,11 @@
 <h6>Heading</h6>
 
 <button>Default Button</button>
-<button class="btn-secondary">Outline Button</button>
-<button class="btn-tertiary">Clear Button</button>
-<input type="submit" value="Disabled Button" disabled>
+<button class="btn btn--primary">Button Primary</button>
+<button class="btn btn--secondary">Button Secondary</button>
+<button class="btn btn--tertiary">Button Tertiary</button>
+<button class="btn btn--with-icon btn--plus-icon">Button With Icon</button>
+<button class="btn btn--small">Button Small</button>
 
 <hr>
 

data/README.md

@@ -26,10 +26,6 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 
 SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.
 
-### Icons
-
-We embed svg icons from [Heroicons](https://github.com/refactoringui/heroicons).
-
 ### Utilities
 
 - [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/breadboard.scss

@@ -1,15 +1,15 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-$breadboard-bg:  $white    !default;
-$breadboard-200: $gray-200 !default;
-$breadboard-300: $gray-300 !default;
-$breadboard-700: $gray-700 !default;
-$breadboard-900: $gray-900 !default;
+$breadboard-primary:           $gray-900;
+$breadboard-color:             $gray-700;
+$breadboard-border:            $gray-400;
+$breadboard-border-control:    $gray-300;
+$breadboard-background:        $gray-200;
 
 html {
-  background-color: $breadboard-bg;
-  color: $breadboard-700;
+  background-color: $white;
+  color: $breadboard-color;
   @include antialiased;
 }
 
@@ -19,7 +19,7 @@ body {
 }
 
 blockquote {
-  border-color:  $breadboard-300;
+  border-color: $breadboard-border;
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 
@@ -28,75 +28,60 @@ blockquote {
   }
 }
 
+.btn,
 button,
 input[type='button'],
 input[type='reset'],
-input[type='submit'],
-.btn-primary {
-  background-color: $breadboard-900;
-  border-color: $breadboard-900;
-  border-width: $border;
+input[type='submit'] {
+  background-color: $white;
+  border-color: $breadboard-border-control;
   border-radius: $rounded;
-  color: $white;
-  cursor: pointer;
+  border-width: $border;
+  color: $breadboard-primary;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-4;
-
-	&:hover {
-		background-color: $breadboard-700;
-    border-color: $breadboard-700;
-    color: $white;
-  }
+  cursor: pointer;
 
   &[disabled] {
-    background-color: $breadboard-900;
-    border-color: $breadboard-900;
     cursor: default;
     opacity: $opacity-50;
   }
 }
 
-.btn-secondary {
-  @extend button;
-  background-color: transparent;
-  border-color: $breadboard-900;
-  color: $breadboard-900;
-
-  &:hover {
-		background-color: transparent;
-    border-color: $breadboard-700;
-    color: $breadboard-700;
+.btn {
+  &--primary {
+    background-color: $breadboard-primary;
+    border-color: $breadboard-primary;
+    color: $white;
   }
 
-  &[disabled] {
-    background-color: transparent;
-    border-color: $breadboard-900;
-    color: $breadboard-900;
+  &--secondary {
+    background-color: $white;
+    border-color: $breadboard-primary;
   }
-}
 
-.btn-tertiary {
-  @extend button;
-  background-color: transparent;
-  border-color: transparent;
-  color: $breadboard-900;
-
-  &:hover {
+  &--tertiary {
     background-color: transparent;
     border-color: transparent;
-    color: $breadboard-700;
   }
 
-  &[disabled] {
-    background-color: transparent;
-    border-color: transparent;
-    color: $breadboard-900;
+  &--with-icon {
+    padding-left: $size-8;
+    background-position: $size-2 center;
+    background-repeat: no-repeat;
+    background-size: $size-5 auto;
+  }
+
+  &--small {
+    font-size: $text-sm;
+    padding-top:  0.35rem;
+    padding-bottom: 0.35rem;
   }
 }
 
 code {
-	background: $breadboard-200;
+	background: $breadboard-background;
   border-radius: $rounded;
 	font-size: $text-sm;
 	margin: 0 $size-1;
@@ -105,8 +90,8 @@ code {
 }
 
 pre {
-	background: $breadboard-200;
-  border-color: $breadboard-900;
+	background: $breadboard-background;
+  border-color: $breadboard-primary;
 	border-left-width: $border-4;
 	overflow-y: hidden;
 
@@ -119,9 +104,9 @@ pre {
 }
 
 hr {
-  border-color: $breadboard-300;
+  border-color: $breadboard-border;
   border-top-width: $border;
-  margin: $size-4 $size-0;
+  margin: $size-8 $size-0;
 }
 
 input[type='email'],
@@ -141,7 +126,7 @@ input:not([type]),
 textarea,
 select {
   appearance: none;
-  border-color: $breadboard-300;
+  border-color: $breadboard-border-control;
   border-radius: $rounded;
   border-width: $border;
   display: block;
@@ -149,7 +134,7 @@ select {
   width: $size-full;
 
   &:focus {
-    border-color: $breadboard-700;
+    border-color: $breadboard-color;
   }
 }
 
@@ -170,9 +155,9 @@ input[type='checkbox'],
 input[type='radio'] {
   appearance: none;
   background-origin: border-box;
-  border-color: $breadboard-300;
+  border-color: $breadboard-border-control;
   border-width: $border;
-  color: $breadboard-900;
+  color: $breadboard-primary;
 	display: inline-block;
   margin-bottom: -2.5px;
   height: $size-4;
@@ -203,13 +188,9 @@ input[type='radio'] {
 }
 
 a {
-	color: $breadboard-900;
+	color: $breadboard-primary;
   cursor: pointer;
   font-weight: $font-medium;
-
-  &:hover {
-    color: $breadboard-700;
-  }
 }
 
 ol {
@@ -251,7 +232,7 @@ table {
 }
 
 td, th {
-  border-color: $breadboard-300;
+  border-color: $breadboard-border;
   border-bottom-width: $border;
   padding: $size-3 $size-3;
   text-align: left;
@@ -294,7 +275,3 @@ h5 {
 h6 {
   font-size: $text-base;
 }
-
-main {
-  @include make-container($size-6, $breakpoint-lg);
-}

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

@@ -40,10 +40,7 @@
 // Container
 // ************************************************
 @mixin make-container($padding-x, $max-width) {
-  width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
-  margin-right: auto;
-  margin-left: auto;
+  padding: 0 $padding-x;
+  margin:  0 auto;
   max-width: $max-width;
 }

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

@@ -1,6 +1,10 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
+.u-container {
+  @include make-container($size-6, $breakpoint-lg);
+}
+
 .u-clearfix {
   @include clearfix;
 }

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

@@ -2,7 +2,7 @@
 
 // *******************************************************************
 // Pull Utilities
-// $size-map: ("x-small": $size-2, "small": $size-4, "medium": $size-6, "large": $size-8, "x-large": $size-10);
+// $size-map: ("x-small": $size-1, "small": $size-2, "medium": $size-4, "large": $size-6, "x-large": $size-8);
 // *******************************************************************
 @each $scale, $size in $size-map {
   .pull-#{$scale} {

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

@@ -2,7 +2,7 @@
 
 // *******************************************************************
 // Push Utilities
-// $size-map: ("x-small": $size-2, "small": $size-4, "medium": $size-6, "large": $size-8, "x-large": $size-10);
+// $size-map: ("x-small": $size-1, "small": $size-2, "medium": $size-4, "large": $size-6, "x-large": $size-8);
 // *******************************************************************
 @each $scale, $size in $size-map {
   .push-#{$scale} {

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

@@ -1,10 +1,6 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-.txt--x-small {
-  font-size: $text-xs;
-}
-
 .txt--small {
   font-size: $text-sm;
 }
@@ -17,14 +13,31 @@
   font-size: $text-lg;
 }
 
-.txt--x-large {
-  font-size: $text-xl;
-}
-
 .txt--truncate {
   @include truncate;
 }
 
+.txt--highlight {
+  background-color: #e2e8f0;
+  margin-left: 3px;
+  padding: 0 0.2em;
+  border-radius: 4rem 2rem 4.2rem 1.1rem;
+  box-shadow: 0.2em 0 0 #e2e8f0, -0.2em 0 0 #e2e8f0;
+}
+
+.txt--highlight-underline {
+  background-image: url('data:image/svg+xml,<svg height="11" viewBox="0 0 284 11" width="284" 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%
+}
+
+.txt--highlight-bottom {
+  border-bottom: $border solid #e2e8f0;
+  box-shadow: inset 0 -6px 0 #e2e8f0;
+  font-style: normal;
+}
+
 .align--top {
   vertical-align: top;
 }

data/app/assets/stylesheets/sass-zero/variables/spacing.scss

@@ -27,4 +27,4 @@ $size-auto:   auto;
 $size-full:   100%;
 $size-screen: 100vw;
 
-$size-map: ("x-small": $size-2, "small": $size-4, "medium": $size-6, "large": $size-8, "x-large": $size-10);
+$size-map: ("x-small": $size-1, "small": $size-2, "medium": $size-4, "large": $size-6, "x-large": $size-8);

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

@@ -5,6 +5,7 @@
 @import "variables/flex";
 @import "variables/spacing";
 @import "variables/transition";
+@import "variables/transform";
 @import "variables/typography";
 @import "variables/width";
 @import "variables/zindex";

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.14"
+    VERSION = "0.0.15"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"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",

data/sass-zero.gemspec

@@ -12,8 +12,7 @@ Gem::Specification.new do |spec|
   spec.homepage      = "http://github.com/lazaronixon/sass-zero"
   spec.license       = "MIT"
 
-  spec.add_runtime_dependency "inline_svg"
-  spec.add_runtime_dependency "autoprefixer-rails"
+  spec.add_runtime_dependency "autoprefixer-rails", ">= 9.7.4"
 
   spec.files = `git ls-files -z`.split("\x0")
 end