spuit 0.0.14.2 → 0.1.0

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spuit
 version: !ruby/object:Gem::Version
-  version: 0.0.14.2
+  version: 0.1.0
 platform: ruby
 authors:
 - is8r
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-31 00:00:00.000000000 Z
+date: 2019-06-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: aruba
@@ -116,13 +116,13 @@ executables:
 extensions: []
 extra_rdoc_files: []
 files:
-- ".editorconfig"
 - ".gitignore"
 - ".npmignore"
 - Gemfile
 - Gemfile.lock
 - README.md
 - Rakefile
+- assets/html/index.ejs
 - assets/javascripts/scripts.js
 - assets/javascripts/spuit/Common.js
 - assets/javascripts/spuit/extend.js
@@ -131,6 +131,7 @@ files:
 - assets/stylesheets/styles/config/_variables.scss
 - bin/spuit
 - design/icons.sketch
+- dist/favicon.ico
 - dist/favicon.png
 - dist/index.html
 - dist/javascripts/scripts.js
@@ -142,30 +143,30 @@ files:
 - lib/spuit/version.rb
 - package-lock.json
 - package.json
-- scss/components/_body.sass
-- scss/components/_button.sass
-- scss/components/_form.sass
-- scss/components/_gist.sass
-- scss/components/_grids.sass
-- scss/components/_icon.scss
-- scss/components/_markdown.sass
-- scss/components/_messages.sass
-- scss/components/_shoulder.sass
-- scss/components/_split.sass
+- scss/_/_body.sass
+- scss/_/_form.sass
+- scss/_/_gist.sass
+- scss/_/_grids.sass
+- scss/_/_markdown.sass
+- scss/components/_button.scss
+- scss/components/_messages.scss
+- scss/components/_shoulder.scss
+- scss/components/_split.scss
 - scss/components/_switch.scss
-- scss/components/_triangle.sass
-- scss/components/_wordwrap-fadeout.sass
-- scss/components/_wrap.sass
+- scss/components/_triangle.scss
+- scss/components/_wordwrap-fadeout.scss
+- scss/components/_wrap.scss
 - scss/elements/_custom-checkbox.scss
-- scss/elements/_dl.sass
-- scss/elements/_fieldset.sass
-- scss/elements/_hr.sass
-- scss/elements/_input.sass
+- scss/elements/_dl.scss
+- scss/elements/_fieldset.scss
+- scss/elements/_hr.scss
+- scss/elements/_input.scss
 - scss/elements/_select.scss
-- scss/elements/_table.sass
+- scss/elements/_table.scss
 - scss/includes/_animations.scss
 - scss/includes/_grid.scss
 - scss/includes/_hiddens.scss
+- scss/includes/_icon.scss
 - scss/includes/_normalize.scss
 - scss/includes/_spacers.scss
 - scss/includes/_spuit-utils.scss
@@ -190,7 +191,7 @@ files:
 - scss/variables/_fonts.scss
 - scss/variables/_media-queries.scss
 - scss/variables/_svgs.scss
-- scss/variables/_timing-functions.sass
+- scss/variables/_timing-functions.scss
 - spuit.gemspec
 - spuit.scss
 - webpack/css.webpack.config.js

data/.editorconfig

@@ -1,11 +0,0 @@
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = crlf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-root = true
-
-[*.md]
-trim_trailing_whitespace = false

data/scss/components/_button.sass

@@ -1,116 +0,0 @@
-=button-base($c: transparent)
-  box-sizing: border-box
-  box-shadow: none
-  appearance: none
-  display: inline-block
-  border-radius: 0
-  background-color: $c
-  background-image: linear-gradient(to top, $c, $c)
-  position: relative
-  cursor: pointer
-  text-align: center
-  font-weight: normal
-  margin: 0
-  padding: 0
-  border: none
-  outline: none
-  &:link, &:visited, &:hover, &:active, &:active
-    text-decoration: none
-  &:focus
-    outline: none
-  &:disabled,
-  &.is-disabled
-    +button-disabled
-    opacity: 0.2
-  // &.is-loading
-  //   +button-loading
-
-=button-disabled
-  cursor: default
-  pointer-events: none
-
-=button-loading
-  +button-disabled
-  +icon-loading
-  opacity: 0.6
-
-// .button-normal
-//   +button-normal(10px 10px, #529ef6, #fff, 2px)
-=button-normal($p: 10px 10px, $c: #529ef6, $c-text: #fff, $r: 2px)
-  +button-base
-  border-radius: $r
-  border: 1px solid $c
-  background-color: $c
-  color: $c-text
-  padding: $p
-  line-height: 1
-  &:focus
-    background-color: $c
-  &:hover,
-  &:active,
-  &.is-current
-    background-color: darken($c, 10%)
-    color: $c-text
-    border-color: $c
-
-// .button-semiflat
-//   +button-semiflat(10px 10px, #529ef6, 10%, #fff, 2px)
-=button-semiflat($p: 10px 10px, $c: #529ef6, $strangth: 5%, $c-text: #fff, $r: 4px)
-  +button-base
-  border-radius: $r
-  background-color: $c
-  background-image: linear-gradient(to top, $c, lighten($c, $strangth))
-  border: 1px solid lighten($c, $strangth)
-  color: $c-text
-  padding: $p
-  line-height: 1
-  &:focus
-    background-color: $c
-    background-image: linear-gradient(to top, $c, lighten($c, $strangth))
-  &:hover,
-  &:active,
-  &.is-current
-    background-color: darken($c, $strangth)
-    background-image: linear-gradient(to top, darken($c, $strangth), $c)
-
-// .button-border
-//   +button-border(10px 10px, #529ef6, #fff)
-=button-border($p: 10px 10px, $c: #529ef6, $c-text: #fff, $border: 1px, $r: 2px)
-  +button-base
-  border-radius: $r
-  background-color: transparent
-  padding: $p
-  border: $border solid $c
-  color: $c
-  line-height: 1
-  &:focus
-    background-color: transparent
-    border: $border solid $c
-  &:hover,
-  &:active,
-  &.is-current
-    background-color: $c
-    color: $c-text
-    border-color: transparet
-
-// .button-emboss
-//   +button-emboss(10px 10px, #529ef6, #fff, 6px, 4px)
-=button-emboss($p: 10px 10px, $c: #529ef6, $c-text: #fff, $thickness: 6px, $r: 4px)
-  +button-base
-  transition: all 0.05s ease-out
-  transform: translateY(-$thickness)
-  box-shadow: 0 $thickness 0 darken($c, 10%)
-  border-radius: $r
-  background-color: $c
-  color: $c-text
-  padding: $p
-  line-height: 1
-  &:focus
-    background-color: $c
-    box-shadow: 0 $thickness 0 darken($c, 10%)
-  &:hover,
-  &:active,
-  &.is-current
-    transform: translateY(0)
-    box-shadow: 0 0 0 $c
-    background-color: darken($c, 10%)

data/scss/components/_messages.sass

@@ -1,18 +0,0 @@
-=message-element($name: info, $color: #3498DB)
-  box-sizing: border-box
-  padding: 12px
-  border-radius: 3px
-  display: block
-
-  &.is-#{$name}
-    color: $color
-    background: rgba($color, 0.1)
-    border: 1px solid rgba($color, 0.15)
-
-=util-messages($color-info: #3498DB, $color-success: #1ABC9C, $color-warning: #F1C40F, $color-danger: #E74C3C)
-  @at-root
-    .message
-      +message-element(info, $color-info)
-      +message-element(success, $color-success)
-      +message-element(warning, $color-warning)
-      +message-element(danger, $color-danger)

data/scss/components/_split.sass

@@ -1,32 +0,0 @@
-// Example:
-
-// Simple Grid System - ie9-
-@function split-width($column: 5, $gutter: 2)
-  $parcent: (1/$column) * 100
-  $margin: ($gutter * ($column - 1)) / $column
-  @return ($parcent - $margin)
-
-=split($column: 5, $gutter: 2, $debug: false)
-  @at-root
-    #{&}
-      +clearfix
-      +reset-ul
-      position: relative
-      > *
-        @if $debug
-          +debug-block
-        display: inline-block
-        float: left
-        box-sizing: border-box
-        width: split-width($column, $gutter) * 1%
-        margin-left: $gutter * 1%
-        @for $i from 0 through 150
-          @if $i%$column == 1
-            &:nth-child(#{$i})
-              clear: both
-              margin-left: 0
-          @else
-            &:nth-child(#{$i})
-              clear: none
-              margin-left: $gutter * 1%
-        margin-bottom: 10px

data/scss/components/_triangle.sass

@@ -1,40 +0,0 @@
-// Example:
-// +triangle(#222, 12px, $w/2, 0, 'left')
-
-=triangle($c: #2dd, $w:20px, $l: 0, $t: 0, $direction: "right", $element: "after")
-  position: relative
-  &:#{$element}
-    content: ""
-    position: absolute
-    width: 0
-    height: 0
-    border: $w solid transparent
-    border-top-color: $c
-  @if $direction == "left"
-    &:#{$element}
-      transform: translateX(-$w*2) translateY(-$w) rotate(90deg)
-      left: $l
-      right: auto
-      top: $t
-  @if $direction == "right"
-    &:#{$element}
-      transform: translateX($w*2) translateY(-$w) rotate(-90deg)
-      left: auto
-      right: $l
-      top: $t
-  @if $direction == "top"
-    &:#{$element}
-      transform: translateX(-$w) translateY(-$w*2) rotate(180deg)
-      right: auto
-      left: $l
-      top: $t
-  @if $direction == "bottom"
-    &:#{$element}
-      transform: translateX(-$w) translateY($w*2) rotate(0)
-      right: auto
-      left: $l
-      bottom: $t
-
-=tri($c: #2dd, $w:20px, $l: 0, $t: 0, $direction: "right", $element: "after")
-  +triangle($c, $w, $l, $t, $direction, $element)
-

data/scss/components/_wordwrap-fadeout.sass

@@ -1,19 +0,0 @@
-=wordwrap-fadeout($h: 40px, $m: 10px, $c: #fff)
-  position: relative
-  overflow: hidden
-  &:before
-    content: ''
-    position: absolute
-    bottom: 0
-    left: 0
-    width: 100%
-    height: $m
-    background: $c
-  &:after
-    background-image: linear-gradient(to top, rgba($c,1), rgba($c,0))
-    content: ''
-    position: absolute
-    bottom: $m
-    left: 0
-    width: 100%
-    height: $h

data/scss/components/_wrap.sass

@@ -1,22 +0,0 @@
-=wrap($n: 960px, $margin: 10px)
-  width: 100%
-  margin: 0
-  padding: 0
-  text-align: center
-  min-width: $n
-  +breakpoint-down(sm)
-    width: auto
-    min-width: 0
-
-  @at-root
-    #{&}__inner
-      box-sizing: border-box
-      position: relative
-      display: block
-      width: $n
-      margin: 0 auto
-      text-align: left
-      +breakpoint-down(sm)
-        width: 100%
-        padding-left: $margin
-        padding-right: $margin

data/scss/elements/_dl.sass

@@ -1,30 +0,0 @@
-=dl-base
-  margin: 0
-  padding: 0
-  > *
-    +break-word
-    margin: 0
-    padding: 0
-    display: border-box
-
-=dl-flex($left: 30%, $p: 0.5rem 1rem)
-  +dl-base
-  display: flex
-  flex-flow: row wrap
-  justify-content: space-between
-  align-items: flex-start
-  align-content: flex-start
-  > dt
-    width: $left
-    padding: $p
-    padding-left: 0
-  > dd
-    width: 100% - $left
-    padding: $p
-    padding-right: 0
-
-=dl-border($border: 1px solid #ddd, $left: 30%, $p: 0.5rem 1rem)
-  +dl-flex($left, $p)
-  border-bottom: $border
-  > *
-    border-top: $border

data/scss/elements/_fieldset.sass

@@ -1,46 +0,0 @@
-=fieldset-base($legend-width: 100px, $gutter: 20px)
-  +clearfix
-  position: relative
-  padding-left: $legend-width + $gutter
-  padding-bottom: 0.5rem
-  +breakpoint-down(sm)
-    padding-left: 0
-    padding-bottom: 1rem
-
-  > legend
-    width: $legend-width
-    margin-left: -($legend-width + $gutter)
-    display: inline-block
-    vertical-align: middle
-    float: left
-
-    +breakpoint-down(sm)
-      display: block
-      float: none
-      width: auto
-      margin-left: 0
-
-  &.has-padding
-    > legend
-      padding-top: 0.5rem
-      +breakpoint-down(sm)
-        padding-top: 0
-
-//not <fieldset/>
-=fieldset-flex($legend-width: 30%, $gutter: 20px)
-  display: flex
-  justify-content: space-between
-  align-items: center
-  min-width: 0
-  padding: 0
-  margin: 0 0 10px
-  border: 0
-  &:last-child
-    margin-bottom: 0
-  label, legend
-    margin-bottom: 0
-  > legend
-    width: $legend-width
-    padding-right: $gutter
-  > *:not(legend)
-    flex: 1

data/scss/elements/_hr.sass

@@ -1,36 +0,0 @@
-=hr-center-border($w: 100px, $c: #000)
-  border: none
-  border-top: 1px solid $c
-  width: $w
-  margin-top: 50px
-  margin-bottom: 50px
-
-// Example:
-// .dotted
-//   +hr-dotted
-// .dotted--alt
-//   +hr-dotted(#000, 4, 1)
-
-=hr-dotted($color:rgba(#000, 1.0), $stripe: 1, $spacing: 4, $height:1)
-  +background-image(linear-gradient(left, $color 0%, $color ($stripe/($stripe+$spacing))*100%, transparent ($stripe/($stripe+$spacing))*100%, transparent 100%))
-  background-size: ($stripe+$spacing)*1px ($stripe+$spacing)*1px
-  height: $height*1px
-  border: none
-
-// Example:
-// .shaded
-//   +hr-shaded
-
-=hr-shaded($deg:135deg, $color:rgba(#000, 1.0), $stripe: 1, $spacing: 1, $height:10px)
-  $_stripe: $stripe
-  $_spacing: $spacing
-  $_diagonal: ceil(($_stripe+$_spacing)*1.414)
-  $_pattern: $deg, $color, $color ($_stripe)*1px, transparent ($_stripe)*1px, transparent ($_diagonal)*1px, $color ($_diagonal)*1px
-  background-image: -webkit-repeating-linear-gradient($_pattern)
-  background-image: -moz-repeating-linear-gradient($_pattern)
-  background-image: -o-repeating-linear-gradient($_pattern)
-  background-image: -ms-repeating-linear-grad§ient($_pattern)
-  background-image: repeating-linear-gradient($_pattern)
-  background-size: (($_stripe+$_spacing)*2)*1px (($_stripe+$_spacing)*2)*1px
-  height: $height
-  border: none