shipyard-framework 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 45f6d633b4e9001ec75ee08e96b1bca97511658c
4
- data.tar.gz: 2f983d2161dd39bedeec16d6ce9bde5a9501ebac
3
+ metadata.gz: 95b094ed0401e383a07cd1d3b9d08c6f34edf4d2
4
+ data.tar.gz: 233a524121b09f817291eaac8e80afef63259178
5
5
  SHA512:
6
- metadata.gz: d37c0b970ac8d04ade4f96b8f8152b27191f08593b771216b267df468be23468e11a24052d592e51d7d522adfd03ad853e1292d284c49bd21c0d81c7e9b35b01
7
- data.tar.gz: b4af5e046fa932dcdc648e23a7340ad918a13723dbf801bdc43be05f54c1e88dc08777725df6a0192cebef76562a607c90f13cc8cf29057219b1785a726f7db0
6
+ metadata.gz: cfb000ccfbf676cc85d7aa70f134c011684c64975cc5ff95013f5b598cd9e8778efea398e5fb97fce8bfbf84d6e2283a050d7a18c778f9bf2add42e54ab1c33b
7
+ data.tar.gz: 939c141cc589e666e9079c2b43580ac0aa7f727d1742b4196466b07cadf998c1460c2a42d9f47a5c426a95fa86fa7335b1924e4478145f1654fe986506aafe6d
data/README.md CHANGED
@@ -29,7 +29,7 @@ The add this line to your application's CSS file(s):
29
29
  If you're using Jekyll, make sure you add the following the code in your `_config.yml` file:
30
30
  ```yml
31
31
  plugins:
32
- - shipyard
32
+ - shipyard-framework
33
33
  ```
34
34
 
35
35
  ## Usage
@@ -1,3 +1,3 @@
1
1
  @import shipyard/core
2
- @import shipyard/utilities
3
2
  @import shipyard/components
3
+ @import shipyard/utilities
@@ -3,5 +3,8 @@
3
3
  @import shipyard/components/alerts
4
4
  @import shipyard/components/boxes
5
5
  @import shipyard/components/forms
6
+ @import shipyard/components/input-switch
6
7
  @import shipyard/components/empty
7
8
  @import shipyard/components/modals
9
+ @import shipyard/components/tooltips
10
+ @import shipyard/components/hamburger
@@ -10,3 +10,8 @@
10
10
  @import shipyard/mixins/components
11
11
  @import shipyard/mixins/positioning
12
12
  @import shipyard/mixins/prefixed
13
+
14
+ // Shipyard: Core Utilities
15
+ @import shipyard/utilities/animations
16
+ @import shipyard/utilities/reset
17
+ @import shipyard/utilities/colors
@@ -1,5 +1,3 @@
1
- @import shipyard/utilities/animations
2
- @import shipyard/utilities/reset
3
1
  @import shipyard/utilities/type
4
2
  @import shipyard/utilities/grid
5
3
  @import shipyard/utilities/positioning
@@ -0,0 +1,51 @@
1
+ // --------------------------------------------------
2
+ // Hamburger "Icon"
3
+ // --------------------------------------------------
4
+ +component('hamburger')
5
+ top: 25px
6
+ left: 5px
7
+ outline: none
8
+ .hamburger-button-clicked &
9
+ background: transparent
10
+
11
+ &, &:after, &:before
12
+ border-radius: 4px
13
+ background: $gray-light
14
+ +width-height(30px, 2px)
15
+ position: absolute
16
+ margin-top: -1px
17
+ transition: background-color 300ms ease, transform 300ms ease, top 300ms 200ms ease, bottom 300ms 200ms ease
18
+ .hamburger-button-clicked &
19
+ transition: background-color 300ms ease, transform 300ms 200ms ease, top 300ms ease, bottom 300ms ease
20
+ &:before, &:after
21
+ left: 0
22
+ content: " "
23
+ &:before
24
+ +respond-to(top, (x0: -7px, x1: -8px))
25
+ .hamburger-button-clicked &
26
+ top: 0
27
+ +rotate(45deg)
28
+ &:after
29
+ +respond-to(bottom, (x0: -8px, x1: -9px))
30
+ .hamburger-button-clicked &
31
+ bottom: 0
32
+ +rotate(-45deg)
33
+
34
+ // --------------------------------------------------
35
+ // Hamburger: Button
36
+ // --------------------------------------------------
37
+ &-button
38
+ cursor: pointer
39
+ position: absolute
40
+ +width-height(36px)
41
+ padding: 0
42
+ text-indent: -1000px
43
+ overflow: hidden
44
+ left: -3px
45
+ top: -17px
46
+
47
+ // --------------------------------------------------
48
+ // Page: Prevent Scrolling When Clicked
49
+ // --------------------------------------------------
50
+ &-button-clicked
51
+ +respond-to(overflow, (x0: hidden, x1: auto))
@@ -0,0 +1,87 @@
1
+ +component('hero')
2
+ $hero-height: (x0: 120px, x1: 180px, x2: 190px)
3
+ overflow: hidden
4
+ text-align: center
5
+ position: relative
6
+ background: $gray-darkest
7
+ transition: height 500ms ease, padding 500ms ease
8
+ +respond-to(height, merge-and-add($hero-height, $header-height))
9
+ +respond-to(padding-top, $header-height)
10
+ +with-heroku-nav(margin-top, (x1: $heroku-nav-height))
11
+
12
+ &-container
13
+ height: 100%
14
+ position: relative
15
+ z-index: 1
16
+
17
+ &-title
18
+ margin: 0
19
+ color: #fff
20
+ width: 100%
21
+ overflow: hidden
22
+ line-height: 1.275
23
+ white-space: nowrap
24
+ text-overflow: ellipsis
25
+ +responsive-padding(left right, $divisor: 1)
26
+ +respond-to(font-size, (x0: 20px, x1: 24px, x2: 26px))
27
+ &-margin
28
+ margin: 0 0 10px
29
+ &-x0-absolute
30
+ +breakpoint-x0
31
+ top: 50%
32
+ left: 50%
33
+ position: absolute
34
+ transform: translate(-50%, -50%)
35
+ &-link
36
+ color: inherit
37
+ &:hover
38
+ color: lighten($blue-light, 5%)
39
+
40
+ &-chart
41
+ position: absolute
42
+ right: 0
43
+ bottom: 0
44
+ height: auto !important
45
+ &-container
46
+ position: absolute
47
+ height: 100%
48
+ +responsive-right
49
+ &-bar
50
+ stroke: lighten($gray-darkest, 7%)
51
+ stroke-width: 6px
52
+ stroke-linecap: round
53
+ stroke-linejoin: round
54
+ stroke-dasharray: 0, 10px
55
+
56
+ &-content
57
+ position: relative
58
+ +width-height(100%)
59
+ +responsive-padding(left right, $divisor: 1)
60
+ &-auto
61
+ @extend .hero-content
62
+ +breakpoint-x1
63
+ height: auto
64
+
65
+ &-cta
66
+ +breakpoint-x0
67
+ position: fixed
68
+ top: 10px
69
+ right: 10px
70
+ z-index: 1000
71
+ border: none
72
+ &, &:hover
73
+ background: none
74
+ +respond-to(margin, (x1: 10px 5px))
75
+
76
+ &-icon
77
+ stroke: $gray-light
78
+ +when('cta:hover')
79
+ stroke: #fff
80
+ +breakpoint-x0
81
+ +width-height(20px)
82
+ +center
83
+ +breakpoint-x1
84
+ +width-height(12px)
85
+ margin-right: 5px
86
+ position: relative
87
+ top: 2px
@@ -29,7 +29,7 @@ svg, path, circle, polyline
29
29
  stroke-linecap: round
30
30
  stroke-linejoin: round
31
31
  &-inverse
32
- stroke: #fff !important
32
+ stroke: #fff
33
33
 
34
34
  &-slack,
35
35
  &-github,
@@ -69,7 +69,8 @@ svg, path, circle, polyline
69
69
  border-color: darken($gray, 12%)
70
70
 
71
71
  &-inverse
72
- border-color: #fff !important
72
+ &, a:hover &
73
+ border-color: #fff
73
74
 
74
75
  &-inverse
75
76
  fill: #fff
@@ -0,0 +1,33 @@
1
+ $sizes: (sm: 18px, md: 20px)
2
+
3
+ +component('input-switch')
4
+ position: relative
5
+ background: $gray-light
6
+ display: block
7
+ border-radius: 50px
8
+ outline: none
9
+ transition: background-color 300ms ease
10
+ &::before
11
+ content: ''
12
+ display: block
13
+ position: absolute
14
+ top: 2px
15
+ left: 2px
16
+ background: #fff
17
+ border-radius: 50%
18
+ transition: transform 300ms ease
19
+
20
+ @each $name, $size in $sizes
21
+ &-#{$name}
22
+ +extend
23
+ +width-height($size * 2 - 4px, $size)
24
+ &::before
25
+ +width-height($size - 4px)
26
+
27
+ &-false
28
+ background: $red
29
+
30
+ &-true
31
+ background: $green
32
+ &::before
33
+ transform: translatex(100%)
@@ -0,0 +1,44 @@
1
+ +component('tooltip')
2
+ overflow: visible
3
+ position: relative
4
+ &:before
5
+ content: ''
6
+ top: -7px
7
+ +width-height(0px)
8
+ border-radius: 0 0 3px 0
9
+ transform: rotate(45deg) translatey(50%)
10
+ transform-origin: center center
11
+ border: 4px solid transparent
12
+ border-right-color: $gray-dark
13
+ border-bottom-color: $gray-dark
14
+ margin-top: 0
15
+ &:after
16
+ top: -34px
17
+ color: #fff
18
+ width: auto
19
+ line-height: 28px
20
+ padding: 0 10px
21
+ text-align: center
22
+ border-radius: 3px
23
+ content: attr(tooltip)
24
+ background: $gray-dark
25
+ font-size: $font-size-xxs
26
+ font-weight: $bold
27
+ transform: translate(-50%, 6px)
28
+ white-space: nowrap
29
+ &::after,
30
+ &::before
31
+ left: 50%
32
+ opacity: 0
33
+ position: absolute
34
+ visibility: hidden
35
+ transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 500ms
36
+ &:hover::after,
37
+ &:hover::before
38
+ opacity: 1
39
+ transition-delay: 500ms
40
+ +respond-to(visibility, (x1: visible))
41
+ &:hover::after
42
+ transform: translate(-50%, 0)
43
+ &:hover::before
44
+ transform: rotate(45deg) translate(-5px, 0)
@@ -1,4 +1,5 @@
1
1
  @function color($name, $shade: null)
2
+ $colors: $colors !global
2
3
  $color: map-get($colors, $name)
3
4
  @if $color
4
5
  @if $shade
@@ -4,3 +4,9 @@
4
4
 
5
5
  @mixin border-radius($radius: $border-radius)
6
6
  border-radius: $radius
7
+
8
+ @mixin clearfix
9
+ &::after
10
+ clear: both
11
+ content: ""
12
+ display: table
@@ -1,3 +1,9 @@
1
+ @keyframes rotate
2
+ from
3
+ transform: rotate(0deg)
4
+ to
5
+ transform: rotate(360deg)
6
+
1
7
  @keyframes shake
2
8
  0%, 100%
3
9
  transform: translateX(0) translateY(0)
@@ -0,0 +1,8 @@
1
+ @each $color, $shades in $colors
2
+ @each $shade, $value in $shades
3
+ @if $shade == base
4
+ .#{$color}
5
+ color: $value
6
+ @else
7
+ .#{$color}-#{$shade}
8
+ color: $value
@@ -1,11 +1,5 @@
1
1
  $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
2
2
 
3
- @mixin clearfix
4
- &::after
5
- clear: both
6
- content: ""
7
- display: table
8
-
9
3
  @mixin column-style($property, $width)
10
4
  @if $width == auto
11
5
  #{$property}: auto
@@ -1,9 +1,3 @@
1
- .align
2
- +all-media-sizes
3
- @each $value in (center, left, right)
4
- &-#{$value}
5
- text-align: $value
6
-
7
1
  .center
8
2
  +all-media-sizes
9
3
  +center
@@ -15,3 +9,6 @@
15
9
  .h-center
16
10
  +all-media-sizes
17
11
  +center($horizontal: true)
12
+
13
+ .align-middle
14
+ vertical-align: middle
@@ -12,8 +12,6 @@ a, .link
12
12
  &:hover
13
13
  color: darken($blue, 10%)
14
14
  text-decoration: underline
15
- .legacy-content &
16
- text-decoration: none
17
15
 
18
16
  hr
19
17
  height: 0
@@ -43,12 +41,8 @@ ul, ol
43
41
  margin: 20px 0 0 18px
44
42
  &-disc
45
43
  list-style: disc
46
- .legacy-content &
47
- list-style: none
48
44
  li
49
45
  margin: 10px 0
50
- .legacy-content &
51
- color: $text-color
52
46
 
53
47
  img
54
48
  display: block
@@ -1,68 +1,68 @@
1
1
  // Gray
2
- $gray: color(gray)
3
- $gray-light: color(gray, light)
4
- $gray-lighter: color(gray, lighter)
5
- $gray-lightest: color(gray, lightest)
6
- $gray-dark: color(gray, dark)
7
- $gray-darkest: color(gray, darkest)
2
+ $gray: color(gray) !default
3
+ $gray-light: color(gray, light) !default
4
+ $gray-lighter: color(gray, lighter) !default
5
+ $gray-lightest: color(gray, lightest) !default
6
+ $gray-dark: color(gray, dark) !default
7
+ $gray-darkest: color(gray, darkest) !default
8
8
 
9
9
  // Green
10
- $green: color(green)
11
- $green-light: color(green, light)
12
- $green-lightest: color(green, lightest)
13
- $green-dark: color(green, dark)
14
- $green-darkest: color(green, darkest)
10
+ $green: color(green) !default
11
+ $green-light: color(green, light) !default
12
+ $green-lightest: color(green, lightest) !default
13
+ $green-dark: color(green, dark) !default
14
+ $green-darkest: color(green, darkest) !default
15
15
 
16
16
  // Blue
17
- $blue: color(blue)
18
- $blue-light: color(blue, light)
19
- $blue-lightest: color(blue, lightest)
20
- $blue-dark: color(blue, dark)
21
- $blue-darkest: color(blue, darkest)
17
+ $blue: color(blue) !default
18
+ $blue-light: color(blue, light) !default
19
+ $blue-lightest: color(blue, lightest) !default
20
+ $blue-dark: color(blue, dark) !default
21
+ $blue-darkest: color(blue, darkest) !default
22
22
 
23
23
  // Teal
24
- $teal: color(teal)
25
- $teal-light: color(teal, light)
26
- $teal-lightest: color(teal, lightest)
27
- $teal-dark: color(teal, dark)
28
- $teal-darkest: color(teal, darkest)
24
+ $teal: color(teal) !default
25
+ $teal-light: color(teal, light) !default
26
+ $teal-lightest: color(teal, lightest) !default
27
+ $teal-dark: color(teal, dark) !default
28
+ $teal-darkest: color(teal, darkest) !default
29
29
 
30
30
  // Red
31
- $red: color(red)
32
- $red-light: color(red, light)
33
- $red-lightest: color(red, lightest)
34
- $red-dark: color(red, dark)
35
- $red-darkest: color(red, darkest)
31
+ $red: color(red) !default
32
+ $red-light: color(red, light) !default
33
+ $red-lightest: color(red, lightest) !default
34
+ $red-dark: color(red, dark) !default
35
+ $red-darkest: color(red, darkest) !default
36
36
 
37
37
  // Yellow
38
- $yellow: color(yellow)
39
- $yellow-light: color(yellow, light)
40
- $yellow-lightest: color(yellow, lightest)
41
- $yellow-dark: color(yellow, dark)
42
- $yellow-darker: color(yellow, darker)
43
- $yellow-darkest: color(yellow, darkest)
38
+ $yellow: color(yellow) !default
39
+ $yellow-light: color(yellow, light) !default
40
+ $yellow-lightest: color(yellow, lightest) !default
41
+ $yellow-dark: color(yellow, dark) !default
42
+ $yellow-darker: color(yellow, darker) !default
43
+ $yellow-darkest: color(yellow, darkest) !default
44
44
 
45
45
  // Orange
46
- $orange: color(orange)
47
- $orange-light: color(orange, light)
48
- $orange-lightest: color(orange, lightest)
49
- $orange-dark: color(orange, dark)
50
- $orange-darkest: color(orange, darkest)
46
+ $orange: color(orange) !default
47
+ $orange-light: color(orange, light) !default
48
+ $orange-lightest: color(orange, lightest) !default
49
+ $orange-dark: color(orange, dark) !default
50
+ $orange-darkest: color(orange, darkest) !default
51
51
 
52
52
  // Coral
53
- $coral: color(coral)
54
- $coral-light: color(coral, light)
55
- $coral-lighter: color(coral, lighter)
56
- $coral-lightest: color(coral, lightest)
57
- $coral-dark: color(coral, dark)
58
- $coral-darker: color(coral, darker)
59
- $coral-darkest: color(coral, darkest)
53
+ $coral: color(coral) !default
54
+ $coral-light: color(coral, light) !default
55
+ $coral-lighter: color(coral, lighter) !default
56
+ $coral-lightest: color(coral, lightest) !default
57
+ $coral-dark: color(coral, dark) !default
58
+ $coral-darker: color(coral, darker) !default
59
+ $coral-darkest: color(coral, darkest) !default
60
60
 
61
61
  // Purple
62
- $purple: color(purple)
63
- $purple-light: color(purple, light)
64
- $purple-lighter: color(purple, lighter)
65
- $purple-lightest: color(purple, lightest)
66
- $purple-dark: color(purple, dark)
67
- $purple-darker: color(purple, darker)
68
- $purple-darkest: color(purple, darkest)
62
+ $purple: color(purple) !default
63
+ $purple-light: color(purple, light) !default
64
+ $purple-lighter: color(purple, lighter) !default
65
+ $purple-lightest: color(purple, lightest) !default
66
+ $purple-dark: color(purple, dark) !default
67
+ $purple-darker: color(purple, darker) !default
68
+ $purple-darkest: color(purple, darkest) !default
@@ -8,4 +8,4 @@ $colors: (
8
8
  orange: (base: #ff9f49, light: #ffba7d, lightest: #ffd6b1, dark: #cc7f3a, darkest: #995f2c),
9
9
  purple: (base: #bf84ff, light: lighten(#bf84ff, 10%), lighter: lighten(#bf84ff, 15%), lightest: lighten(#bf84ff, 20%), dark: darken(#bf84ff, 10%), darker: darken(#bf84ff, 15%), darkest: darken(#bf84ff, 20%)),
10
10
  coral: (base: #f9657a, light: lighten(#f9657a, 10%), lighter: lighten(#f9657a, 15%), lightest: lighten(#f9657a, 20%), dark: darken(#f9657a, 10%), darker: darken(#f9657a, 15%), darkest: darken(#f9657a, 20%))
11
- );
11
+ ) !default;
@@ -1,3 +1,3 @@
1
1
  module Shipyard
2
- VERSION = '0.2.3'
2
+ VERSION = '0.2.4'
3
3
  end
data/shipyard.gemspec CHANGED
@@ -16,7 +16,7 @@ Gem::Specification.new do |spec|
16
16
  # spec.add_runtime_dependency 'slim-rails', '~> 3.1', '>= 3.1.0'
17
17
  # spec.add_runtime_dependency 'sassc', '~> 1.11.4'
18
18
 
19
- spec.add_development_dependency 'bundler', '~> 1.15.3'
19
+ spec.add_development_dependency 'bundler', '~> 1.15', '>= 1.15.3'
20
20
 
21
21
  spec.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
22
22
  spec.files = `git ls-files`.split("\n")
metadata CHANGED
@@ -1,27 +1,33 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shipyard-framework
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.3
4
+ version: 0.2.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shipyard
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-07-28 00:00:00.000000000 Z
11
+ date: 2017-07-31 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - ~>
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.15'
20
+ - - ">="
18
21
  - !ruby/object:Gem::Version
19
22
  version: 1.15.3
20
23
  type: :development
21
24
  prerelease: false
22
25
  version_requirements: !ruby/object:Gem::Requirement
23
26
  requirements:
24
- - - ~>
27
+ - - "~>"
28
+ - !ruby/object:Gem::Version
29
+ version: '1.15'
30
+ - - ">="
25
31
  - !ruby/object:Gem::Version
26
32
  version: 1.15.3
27
33
  description:
@@ -31,8 +37,8 @@ executables: []
31
37
  extensions: []
32
38
  extra_rdoc_files: []
33
39
  files:
34
- - .gitignore
35
- - .rspec
40
+ - ".gitignore"
41
+ - ".rspec"
36
42
  - CODE_OF_CONDUCT.md
37
43
  - Gemfile
38
44
  - LICENSE.txt
@@ -72,8 +78,12 @@ files:
72
78
  - assets/stylesheets/shipyard/components/_buttons.sass
73
79
  - assets/stylesheets/shipyard/components/_empty.sass
74
80
  - assets/stylesheets/shipyard/components/_forms.sass
81
+ - assets/stylesheets/shipyard/components/_hamburger.sass
82
+ - assets/stylesheets/shipyard/components/_hero.sass
75
83
  - assets/stylesheets/shipyard/components/_icons.sass
84
+ - assets/stylesheets/shipyard/components/_input-switch.sass
76
85
  - assets/stylesheets/shipyard/components/_modals.sass
86
+ - assets/stylesheets/shipyard/components/_tooltips.sass
77
87
  - assets/stylesheets/shipyard/functions/_color.sass
78
88
  - assets/stylesheets/shipyard/mixins/_box-model.sass
79
89
  - assets/stylesheets/shipyard/mixins/_components.sass
@@ -82,6 +92,7 @@ files:
82
92
  - assets/stylesheets/shipyard/mixins/_responsive.sass
83
93
  - assets/stylesheets/shipyard/mixins/_selectors.sass
84
94
  - assets/stylesheets/shipyard/utilities/_animations.sass
95
+ - assets/stylesheets/shipyard/utilities/_colors.sass
85
96
  - assets/stylesheets/shipyard/utilities/_grid.sass
86
97
  - assets/stylesheets/shipyard/utilities/_positioning.sass
87
98
  - assets/stylesheets/shipyard/utilities/_reset.sass
@@ -113,17 +124,17 @@ require_paths:
113
124
  - lib
114
125
  required_ruby_version: !ruby/object:Gem::Requirement
115
126
  requirements:
116
- - - '>='
127
+ - - ">="
117
128
  - !ruby/object:Gem::Version
118
129
  version: '0'
119
130
  required_rubygems_version: !ruby/object:Gem::Requirement
120
131
  requirements:
121
- - - '>='
132
+ - - ">="
122
133
  - !ruby/object:Gem::Version
123
134
  version: '0'
124
135
  requirements: []
125
136
  rubyforge_project:
126
- rubygems_version: 2.0.14.1
137
+ rubygems_version: 2.5.1
127
138
  signing_key:
128
139
  specification_version: 4
129
140
  summary: A lightweight CSS framework for developing mobile-first projects in Ruby