sass-zero 0.0.10 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0140235698797b028bb10936e54ef4a6515b25a6202fb830b9e07f62aac23f00'
-  data.tar.gz: 2261658ac3d578b7031a66776c37b37ae500e5eae5fdaa39fe493bb93a0ca2d0
+  metadata.gz: 96253cac4b8c3c54dbba4310a0acd6bc6e094488dccbde00b05989d70e8e53cf
+  data.tar.gz: b017bd11d9257a40952d5c0c770e0fe0a798b105678db41e0ae55b3cf4f0c47a
 SHA512:
-  metadata.gz: '01664139b9882fc85ea83c13be3fcd739fa52ab148fdbed43305e1ab315434381d99551ff2601f01f3824adec51318db6f5edf5162c76a9f04ae65a6b188be3e'
-  data.tar.gz: 6280661ec8afef2c41817801bae210a0c9026093d40cd8eeb0d727c029258837612c91687dbb7f7760c246032069034e767d353f2667bf886b59ed8138a835b1
+  metadata.gz: f396fe3a872ad04e401655ae4f215b21b0b83c6b6d516befbff13076360a154ce19b1fd590655f0fd965e640c3c714112d2625fe1fd8f5caf78c3c419a945e0f
+  data.tar.gz: f0620e39f9462f150e010f8695c3a958af6fffaab9ea25cc978355812461b936297ef21995e36360ff4abfd1d505dbae0ee432c46f2a1f9897f4056e971ad0ae

data/Example.html

@@ -12,6 +12,8 @@
 <h6>Heading</h6>
 
 <button>Default Button</button>
+<button class="btn-outline">Outline Button</button>
+<button class="btn-clear">Clear Button</button>
 <input type="submit" value="Disabled Button" disabled>
 
 <hr>
@@ -43,30 +45,30 @@
     <div style="margin-bottom: 1rem">
       <div>
         <input type="checkbox" name="option1" value="1" checked>
-        <label for="option1" class="label-inline">Option 1</label>
+        <label for="option1" style="display: inline-block;">Option 1</label>
       </div>
       <div>
         <input type="checkbox" name="option2" value="2">
-        <label for="option2" class="label-inline">Option 2</label>
+        <label for="option2" style="display: inline-block;">Option 2</label>
       </div>
       <div>
         <input type="checkbox" name="option3" value="3">
-        <label for="option3" class="label-inline">Option 3</label>
+        <label for="option3" style="display: inline-block;">Option 3</label>
       </div>
     </div>
 
     <div style="margin-bottom: 1rem">
       <div>
         <input type="radio" name="radio" value="1" checked>
-        <label for="radio" class="label-inline">Option 1</label>
+        <label for="radio" style="display: inline-block;">Option 1</label>
       </div>
       <div>
         <input type="radio" name="radio" value="2">
-        <label for="radio" class="label-inline">Option 2</label>
+        <label for="radio" style="display: inline-block;">Option 2</label>
       </div>
       <div>
         <input type="radio" name="radio" value="3">
-        <label for="radio" class="label-inline">Option 3</label>
+        <label for="radio" style="display: inline-block;">Option 3</label>
       </div>
     </div>
 

data/README.md

@@ -43,6 +43,7 @@ Add this line to your application.css:
 
 ```css
  *= require sass-zero/base
+ *= require sass-zero/utilities
 ```
 
 Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
@@ -57,7 +58,6 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 // Element
 .block__elem { color: $red-400; }
 
-
 // Modifier
 .block--mod .block__elem { color: $red-200; }
 
@@ -81,6 +81,8 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 
 [Zondicons](http://www.zondicons.com)
 
+[Inline SVG](https://github.com/jamesmartin/inline_svg)
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -31,25 +31,69 @@ blockquote {
 button,
 input[type='button'],
 input[type='reset'],
-input[type='submit'] {
+input[type='submit'],
+.btn {
   background-color: $breadboard-900;
+  border-color: $breadboard-900;
+  border-width: $border;
   border-radius: $rounded;
   color: $white;
   cursor: pointer;
   font-weight: $font-bold;
+  line-height: $text-xl;
   padding: $size-2 $size-3;
 
 	&:hover {
 		background-color: $breadboard-700;
+    border-color: $breadboard-700;
   }
 
   &[disabled] {
     background-color: $breadboard-900;
+    border-color: $breadboard-900;
     cursor: default;
     opacity: $opacity-50;
   }
 }
 
+.btn-outline {
+  @extend .btn;
+  background-color: transparent;
+  border-color: $breadboard-900;
+  color: $breadboard-900;
+
+  &:hover {
+		background-color: transparent;
+    border-color: $breadboard-700;
+    color: $breadboard-700;
+  }
+
+  &[disabled] {
+    background-color: transparent;
+    border-color: $breadboard-900;
+    color: $breadboard-900;
+  }
+}
+
+.btn-clear {
+  @extend .btn;
+  background-color: transparent;
+  border-color: transparent;
+  color: $breadboard-900;
+
+  &:hover {
+    background-color: transparent;
+    border-color: transparent;
+    color: $breadboard-700;
+  }
+
+  &[disabled] {
+    background-color: transparent;
+    border-color: transparent;
+    color: $breadboard-900;
+  }
+}
+
 code {
 	background: $breadboard-200;
   border-radius: $rounded;
@@ -157,16 +201,10 @@ input[type='radio'] {
   }
 }
 
-.label-inline {
-	display: inline-block;
-	margin-left: $size-1;
-}
-
 a {
 	color: $breadboard-900;
   cursor: pointer;
   font-weight: $font-medium;
-	text-decoration: underline;
 
   &:hover {
     color: $breadboard-700;
@@ -214,7 +252,7 @@ table {
 td, th {
   border-color: $breadboard-300;
   border-bottom-width: $border;
-  padding: $size-2 $size-4;
+  padding: $size-3 $size-3;
   text-align: left;
 }
 

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

@@ -2,10 +2,10 @@
 // Float
 // ************************************************
 @mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
+  &::after {
+    display: block;
     clear: both;
+    content: "";
   }
 }
 
@@ -39,10 +39,10 @@
 // ************************************************
 // Container
 // ************************************************
-@mixin make-container($padding, $max-width) {
+@mixin make-container($padding-x, $max-width) {
   width: 100%;
-  padding-right: $padding;
-  padding-left: $padding;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
   margin-right: auto;
   margin-left: auto;
   max-width: $max-width;

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

@@ -0,0 +1,29 @@
+.flush {
+  margin: 0 !important;
+}
+
+.flush--top {
+  margin-top: 0 !important;
+}
+
+.flush--right {
+  margin-right: 0 !important;
+}
+
+.flush--bottom {
+  margin-bottom: 0 !important;
+}
+
+.flush--left {
+  margin-left: 0 !important;
+}
+
+.flush--ends {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.flush--sides {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}

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

@@ -0,0 +1,134 @@
+@import "sass-zero/variables";
+@import "sass-zero/mixins";
+
+.u-clearfix {
+  @include clearfix;
+}
+
+.u-position-context {
+  position: relative;
+}
+
+.u-position-right,
+.u-position-left,
+.u-position--top-right,
+.u-position--bottom-right {
+  position: absolute !important;
+}
+
+.u-position-right {
+  right: 0;
+}
+
+.u-position-left {
+  left: 0;
+}
+
+.u-position--bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.u-position--top-right {
+  top: 0;
+  right: 0;
+}
+
+.u-full-width {
+  width: 100%;
+}
+
+.u-unscrollable {
+  overflow: hidden;
+}
+
+.u-display-i {
+  display: inline;
+}
+
+.u-display-b {
+  display: block;
+}
+
+.u-display-ib {
+  display: inline-block;
+}
+
+.u-display-n {
+  display: none;
+}
+
+.u-pointer-events-n {
+  pointer-events: none;
+}
+
+.u-margin-centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .u-wrap-on-desktop {
+    display: block;
+  }
+}
+
+@media screen and (max-width: $breakpoint-md - 1) {
+  .u-wrap-on-mobile {
+    display: block;
+  }
+}
+
+.u-nowrap {
+  white-space: nowrap;
+}
+
+.u-float-l {
+  float: left;
+}
+
+.u-float-r {
+  float: right;
+}
+
+.u-float-n {
+  float: none;
+}
+
+.u-float-clear {
+  clear: both;
+}
+
+.u-float-clear-l {
+  clear: left;
+}
+
+.u-float-clear-r {
+  clear: right;
+}
+
+@media screen and (max-width: $breakpoint-md - 1) {
+  .u-float-n-on-mobile {
+    float: none;
+  }
+}
+
+.u-hide {
+  display: none;
+}
+
+.u-hide-focus {
+  outline: none !important;
+}
+
+@media screen and (max-width: $breakpoint-md - 1) {
+  .u-hide-on-media-small {
+    display: none;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .u-hide-on-media-medium {
+    display: none;
+  }
+}

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

@@ -0,0 +1,33 @@
+@import "sass-zero/variables/spacing";
+
+@each $scale, $size in $size-map {
+  .pull-#{$scale} {
+    margin: (-$size) !important;
+  }
+
+  .pull-#{$scale}--top {
+    margin-top: (-$size) !important;
+  }
+
+  .pull-#{$scale}--right {
+    margin-right: (-$size) !important;
+  }
+
+  .pull-#{$scale}--bottom {
+    margin-bottom: (-$size) !important;
+  }
+
+  .pull-#{$scale}--left {
+    margin-left: (-$size) !important;
+  }
+
+  .pull-#{$scale}--ends {
+    margin-top: (-$size) !important;
+    margin-bottom: (-$size) !important;
+  }
+
+  .pull-#{$scale}--sides {
+    margin-right: (-$size) !important;
+    margin-left: (-$size) !important;
+  }
+}

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

@@ -0,0 +1,33 @@
+@import "sass-zero/variables/spacing";
+
+@each $scale, $size in $size-map {
+  .push-#{$scale} {
+    margin: $size !important;
+  }
+
+  .push-#{$scale}--top {
+    margin-top: $size !important;
+  }
+
+  .push-#{$scale}--right {
+    margin-right: $size !important;
+  }
+
+  .push-#{$scale}--bottom {
+    margin-bottom: $size !important;
+  }
+
+  .push-#{$scale}--left {
+    margin-left: $size !important;
+  }
+
+  .push-#{$scale}--ends {
+    margin-top: $size !important;
+    margin-bottom: $size !important;
+  }
+
+  .push-#{$scale}--sides {
+    margin-right: $size !important;
+    margin-left: $size !important;
+  }
+}

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

@@ -0,0 +1,78 @@
+@import "sass-zero/variables";
+@import "sass-zero/mixins";
+
+.txt--smaller {
+  font-size: $text-xs;
+}
+
+.txt--small {
+  font-size: $text-sm;
+}
+
+.txt--medium {
+  font-size: $text-base;
+}
+
+.txt--large {
+  font-size: $text-lg;
+}
+
+.txt--larger {
+  font-size: $text-xl;
+}
+
+.txt--truncate {
+  @include truncate;
+}
+
+.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;
+}
+
+.txt--normal {
+  font-weight: $font-normal;
+}
+
+.txt--bold {
+  font-weight: $font-bold;
+}
+
+.txt--underline {
+  text-decoration: underline;
+}
+
+.txt--capitalize {
+  text-transform: capitalize;
+}
+
+.txt--sentence-case::first-letter {
+  text-transform: uppercase;
+}
+
+.txt--strike {
+  text-decoration: line-through;
+}
+
+.txt--nowrap {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,19 @@
+.unpad {
+  padding: 0 !important;
+}
+
+.unpad--top {
+  padding-top: 0 !important;
+}
+
+.unpad--right {
+  padding-right: 0 !important;
+}
+
+.unpad--bottom {
+  padding-bottom: 0 !important;
+}
+
+.unpad--left {
+  padding-left: 0 !important;
+}

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

@@ -0,0 +1,6 @@
+@import "sass-zero/utilities/flush";
+@import "sass-zero/utilities/layout";
+@import "sass-zero/utilities/pull";
+@import "sass-zero/utilities/push";
+@import "sass-zero/utilities/text";
+@import "sass-zero/utilities/unpad";

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

@@ -1,7 +1,7 @@
 // *******************************************************************
 // Breakpoints
 // Customizing the default breakpoints for your project.
-// @media (min-width: $breakpoint-md) {   }
+// @media screen and (min-width: $breakpoint-md) {   }
 // *******************************************************************
 $breakpoint-sm: 640px;
 $breakpoint-md: 768px;

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

@@ -26,3 +26,5 @@ $size-px: 1px;
 $size-auto:   auto;
 $size-full:   100%;
 $size-screen: 100vw;
+
+$size-map: (2: $size-2, 4: $size-4, 6: $size-6, 8: $size-8, 10: $size-10);

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.10"
+    VERSION = "0.0.11"
   end
 end

data/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "sass-zero",
+	"version": "0.0.11",
+	"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",
+	"license": "MIT",
+	"author": "Lázaro Nixon <lazaronixon@hotmail.com>",
+	"private": false,
+	"keywords": [
+		"css",
+		"css-framework",
+		"sass-zero",
+    "milligram",
+    "tailwindcss",
+    "bem"
+	]
+}