shipyard-framework 0.5.3 → 0.5.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/.travis.yml +36 -0
- data/README.md +6 -15
- data/Rakefile +13 -3
- data/app/helpers/shipyard/alert_helper.rb +14 -11
- data/app/helpers/shipyard/icon_helper.rb +9 -3
- data/assets/javascripts/shipyard/alerts.es6 +13 -0
- data/assets/javascripts/shipyard/core.es6 +34 -1
- data/assets/javascripts/shipyard/hamburger.es6 +10 -0
- data/assets/javascripts/shipyard/scroll.es6 +12 -0
- data/assets/javascripts/shipyard.es6 +7 -4
- data/assets/stylesheets/shipyard/_components.sass +1 -0
- data/assets/stylesheets/shipyard/_core.sass +0 -1
- data/assets/stylesheets/shipyard/_utilities.sass +2 -0
- data/assets/stylesheets/shipyard/components/_alerts.sass +4 -0
- data/assets/stylesheets/shipyard/components/_boxes.sass +3 -3
- data/assets/stylesheets/shipyard/components/_buttons.sass +17 -21
- data/assets/stylesheets/shipyard/components/_code.sass +1 -0
- data/assets/stylesheets/shipyard/components/_hamburger.sass +2 -1
- data/assets/stylesheets/shipyard/components/_header.sass +60 -0
- data/assets/stylesheets/shipyard/components/_tables.sass +20 -0
- data/assets/stylesheets/shipyard/core/_typography.sass +1 -0
- data/assets/stylesheets/shipyard/mixins/_box-model.sass +3 -0
- data/assets/stylesheets/shipyard/{core → utilities}/_grid.sass +13 -4
- data/assets/stylesheets/shipyard/utilities/_margin.sass +7 -0
- data/assets/stylesheets/shipyard/utilities/_typography.sass +0 -8
- data/assets/stylesheets/shipyard/variables/_components.scss +12 -0
- data/assets/stylesheets/shipyard/variables/_misc.sass +1 -0
- data/ci/build.rb +5 -0
- data/ci/deploy +31 -0
- data/ci/jekyll +16 -0
- data/ci/percy +5 -6
- data/ci/setup +3 -0
- data/lib/shipyard-framework/icons.rb +18 -28
- data/lib/shipyard-framework/jekyll/hooks.rb +11 -0
- data/lib/shipyard-framework/jekyll/shipyard_css_classes.rb +16 -0
- data/lib/shipyard-framework/jekyll/shipyard_variables.rb +7 -0
- data/lib/shipyard-framework/jekyll/{alert_tag.rb → tags/alert_tag.rb} +2 -2
- data/lib/shipyard-framework/jekyll/{box_tag.rb → tags/box_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/{button_tag.rb → tags/button_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/tags/icon_tag.rb +20 -0
- data/lib/shipyard-framework/jekyll/{note_tag.rb → tags/note_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/{shipyard_version_tag.rb → tags/shipyard_version_tag.rb} +0 -0
- data/lib/shipyard-framework/rails/railtie.rb +8 -4
- data/lib/shipyard-framework/version.rb +1 -1
- data/lib/shipyard-framework.rb +32 -7
- data/shipyard.gemspec +9 -8
- data/spec/helpers/alert_helper_spec.rb +10 -2
- data/spec/helpers/icon_helper_spec.rb +6 -6
- data/styleguide/Gemfile +2 -1
- data/styleguide/Gemfile.lock +38 -10
- data/styleguide/_assets/css/application.sass +9 -0
- data/styleguide/_assets/css/layout.sass +6 -0
- data/styleguide/{_sass → _assets/css}/views.sass +10 -6
- data/styleguide/_assets/js/application.es6 +2 -0
- data/styleguide/_assets/js/views/utilities/colors.es6 +21 -0
- data/styleguide/_config.yml +7 -0
- data/styleguide/_includes/page-heading.html +4 -0
- data/styleguide/_layouts/application.html +26 -9
- data/styleguide/_plugins/icon_item.rb +19 -0
- data/styleguide/components/alerts.md +12 -2
- data/styleguide/components/boxes.md +2 -2
- data/styleguide/components/{buttons.html → buttons.md} +11 -10
- data/styleguide/components/code.html +1 -1
- data/styleguide/components/empty-states.html +2 -2
- data/styleguide/components/forms.html +1 -1
- data/styleguide/components/icons.md +158 -0
- data/styleguide/components/{index.html → index.md} +5 -5
- data/styleguide/components/modals.html +2 -5
- data/styleguide/components/notes.md +2 -2
- data/styleguide/components/tables.md +29 -0
- data/styleguide/components/{tooltips.html → tooltips.md} +4 -7
- data/styleguide/index.md +27 -0
- data/styleguide/utilities/colors.md +25 -0
- data/styleguide/utilities/grid.md +152 -0
- data/styleguide/utilities/{index.html → index.md} +8 -5
- data/styleguide/utilities/{responsive.html → responsive.md} +6 -5
- data/styleguide/utilities/typography.html +1 -1
- metadata +113 -28
- data/assets/javascripts/shipyard/alert.es6 +0 -19
- data/assets/javascripts/shipyard/icon.es6 +0 -50
- data/ci/rspec +0 -1
- data/styleguide/_sass/layout.sass +0 -35
- data/styleguide/assets/css/application.sass +0 -10
- data/styleguide/components/grid.html +0 -44
- data/styleguide/index.html +0 -6
- data/styleguide/utilities/colors.html +0 -41
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8bd01f1fb7a8579b8fe65a57427dcf0615c46fff
|
4
|
+
data.tar.gz: 7c148abd6f6a21ae4fdf832ba60cad78c1b1516f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2d09ee547ca4d3584c61eae91b10ea0777eb6e199e7d44ce44c3aebd3cee488e9b3aa303076a57388dff8fc2655c1d2162b05150ce9f27b98a3c26c0310a74e7
|
7
|
+
data.tar.gz: b4936128fa5d312afcbbff946fcd8212265b95898e59478851b8aa081aa5f6045d881a66d7458cfeae387db3cd133905f659f829fca83f1496a40fdb28a1133b
|
data/.gitignore
CHANGED
data/.travis.yml
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
language: ruby
|
2
|
+
cache: bundler
|
3
|
+
rvm:
|
4
|
+
- 2.4.1
|
5
|
+
before_install:
|
6
|
+
- chmod +x ci/setup
|
7
|
+
install:
|
8
|
+
- "./ci/setup"
|
9
|
+
before_script:
|
10
|
+
- chmod +x ci/jekyll
|
11
|
+
jobs:
|
12
|
+
include:
|
13
|
+
- script: "./ci/jekyll"
|
14
|
+
- script: bundle exec rspec
|
15
|
+
deploy:
|
16
|
+
provider: rubygems
|
17
|
+
api_key:
|
18
|
+
secure: AaMZlXnSGb14LR9Xjo3j+65+U2tRCG8ZgO3iCGksV3riAWg5E0l0maM7HEXCi9+f6GbnQ3z/irEBtQiddU7fEKw1OoUmo7jkDh5juhmZjRa1y0hnn6VISRj6DpP3/KX9w++UDFJ4AWxwRr6h4sB3uhuIedBxlOuIuGlvE408Dzhd154F60EMO8/tYYNzksFBuSTBHZqmFSPnbYY1PN5OOW9VVjDO6D/FukraDqgDY0N475Tk86EpDXddd1ZSI+wJOcQBH/7SAYbAR0eL70fWZlbiBayOw6paPCAzbFZHXdN8j2oiXFwmzDwQvqKq2o1hcMzXq+EZ/KaAOoIS+99prBxyke8QEWB4fsFlkfEuB2t1HUpvQDTITwOTW0g0jI/kgiiOcmI+622ERfTeNOfNznqBEwDnL0BrGRy1Ygz4sJrIphQ9B0BURyQSk3wBR5Vy1CbgDyp1G34gezjUiDszoBasQI0k/47QLbTvtKVa+5xEP7Ud7lyAR8dHNBPIUFWb0xSJ9Nm5Qvnc15A4FikTzu948SQrAvPkDVrw2Up/RYgxHCR+lXh36npeza85/FBQCaKbRVVoVzN8dzbHgbHYMvZeQVCCW6ngFPVLsofW9NACyuSalf4+AsbNi18E9fJzVcfyVUuh+f4TH66msneYqPxk+Pat14VghO7bE3xvEgk=
|
19
|
+
gem: shipyard
|
20
|
+
on:
|
21
|
+
branch: master
|
22
|
+
repo: codeship/shipyard
|
23
|
+
env:
|
24
|
+
global:
|
25
|
+
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true
|
26
|
+
sudo: false
|
27
|
+
branches:
|
28
|
+
except:
|
29
|
+
- gh-pages
|
30
|
+
- "/skip-ci(.*)/"
|
31
|
+
notifications:
|
32
|
+
email: false
|
33
|
+
slack:
|
34
|
+
on_success: always
|
35
|
+
rooms:
|
36
|
+
secure: AAXYbqh+QCyhZHHRWUiRa33qFf6ftBCJjVzjvrTZJFTEaTqFB5FwoWfZN15xggglR+42vJyQ9yVVr1XZ/uGiNhXFDi0mPhqjL2+RJ4I3etzFhDWJWp0/BcpOwYx7c0pPAzFhooK9X8cxzRrK/O7viHkM5GQ1mvXv8kld4Y1cZxPaFaoHHwK/BTAlrtZ111aloYe65TAi1qi+LBZ0oeJDBzW3jHvJ0U/4yfgCcnty8KZqzWDTX9eNzmwRdceVu9/rKfVToaNtoh4SGD128MlaXxaRPkJVzF261ZDhx2Fyi1kkzeZXWJtiadVARYmvXogSAQFPkaWfMRIEM4qHWSEYmUud0B3oB1GBTVOMmy+HKo0aRvhJUxPHNUvRejdo/vPYlRjwm66MPOyI9UUqZ3wGQ7NBzWJLB1O+C4sl4eXB5lINm5E85SojIhnStk1ARFgbFZEXiHTEaW11VedP+cA6b9UYy6FVYBokr9Yc8XpbmNiP6A0wwOscvQASslhbkaLZq/2S5IIftCD5I3EcFSP+BIMZnjA9YkBYMA3VOb2+HDETmzmFRG9cUCEoe65BQ9tGcvGg/msJQywWN2MgGu8LpgaDzkSaZ5Q3JTKSL3Sh9lYPpnFL678xTinK0YqmP5IKT5DcwxIYzoTmXnUv2setajvibaA/kBom7uEaXfFQ/yQ=
|
data/README.md
CHANGED
@@ -1,8 +1,6 @@
|
|
1
1
|
# Shipyard
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
TODO: Delete this and the text above, and describe your gem
|
3
|
+
A light-weight, powerful, front-end framework for faster web development and useful tools for Ruby on Rails and Jekyll enthusiasts.
|
6
4
|
|
7
5
|
## Installation
|
8
6
|
|
@@ -20,7 +18,7 @@ Or install it yourself as:
|
|
20
18
|
|
21
19
|
$ gem install shipyard-framework
|
22
20
|
|
23
|
-
|
21
|
+
Then add this line to your application's CSS file(s):
|
24
22
|
|
25
23
|
```css
|
26
24
|
@import "shipyard"
|
@@ -36,19 +34,12 @@ plugins:
|
|
36
34
|
[![Gem Version](https://badge.fury.io/rb/shipyard-framework.svg)](https://badge.fury.io/rb/shipyard-framework)
|
37
35
|
[![Codeship Status for codeship/shipyard](https://app.codeship.com/projects/30419df0-80ff-0135-f7fb-06994b6b032d/status?branch=master)](https://app.codeship.com/projects/246808)
|
38
36
|
|
39
|
-
##
|
40
|
-
|
41
|
-
TODO: Write usage instructions here
|
42
|
-
|
43
|
-
## Development
|
44
|
-
|
45
|
-
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
46
|
-
|
47
|
-
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
37
|
+
## Development Workflow
|
38
|
+
Shipyard uses [Codeship Basic](https://codeship.com/features/basic) to automate the testing and deployment workflows. If you would like to make a contribution to this project, all tests will need to pass and an administrator will need to approve the changes before they can be merged into master.
|
48
39
|
|
49
|
-
##
|
40
|
+
## Bugs & Feature Requests
|
50
41
|
|
51
|
-
|
42
|
+
Have a bug or a feature request? Please first read [the issue guidelines](https://github.com/codeship/shipyard/wiki/issues) and search for [existing and closed issues](https://github.com/codeship/shipyard/issues?utf8=%E2%9C%93&q=is%3Aissue). If your problem or idea is not addressed yet, please [open a new issue](https://github.com/codeship/shipyard/issues/new).
|
52
43
|
|
53
44
|
## License
|
54
45
|
|
data/Rakefile
CHANGED
@@ -1,6 +1,16 @@
|
|
1
|
-
require
|
2
|
-
require
|
1
|
+
require 'bundler/gem_tasks'
|
2
|
+
require 'rspec/core/rake_task'
|
3
|
+
require 'shipyard-framework'
|
4
|
+
require 'shipyard-framework/icons'
|
3
5
|
|
4
6
|
RSpec::Core::RakeTask.new(:spec)
|
5
|
-
|
6
7
|
task :default => :spec
|
8
|
+
|
9
|
+
namespace :shipyard do
|
10
|
+
desc "Compiles Shipyard and custom icons into an external svg definitions file."
|
11
|
+
task :icons, [:icon_directory, :output_directory] do |t, args|
|
12
|
+
args.with_defaults(:icon_directory => '/app/assets/icons/', :output_directory => '/public/assets/')
|
13
|
+
icons = Shipyard::Icons.new args.icon_directory, args.output_directory
|
14
|
+
icons.write
|
15
|
+
end
|
16
|
+
end
|
@@ -1,5 +1,8 @@
|
|
1
|
+
require_relative 'icon_helper'
|
2
|
+
|
1
3
|
module Shipyard
|
2
4
|
module AlertHelper
|
5
|
+
include Shipyard::IconHelper
|
3
6
|
include ActionView::Context
|
4
7
|
include ActionView::Helpers::TagHelper
|
5
8
|
include ActionView::Helpers::TextHelper
|
@@ -8,13 +11,14 @@ module Shipyard
|
|
8
11
|
alert_txt = capture(&block) if block_given?
|
9
12
|
options = {}
|
10
13
|
options[:role] ||= 'alert'
|
11
|
-
options[:data] ||= {}
|
12
|
-
options[:data][:shipyard] = 'alert'
|
13
|
-
options['v-show'] = 'visible'
|
14
14
|
class_list = ['alert']
|
15
|
+
dismissible = false
|
15
16
|
|
16
17
|
args.each do |arg|
|
17
|
-
if arg
|
18
|
+
if arg == :dismissible
|
19
|
+
dismissible = true
|
20
|
+
options[:shipyard] = 'alert'
|
21
|
+
elsif arg.is_a? Symbol
|
18
22
|
class_list << "alert-#{alert_type(arg)}"
|
19
23
|
elsif arg.is_a? Hash
|
20
24
|
options = options.merge(arg) if arg.is_a?(Hash)
|
@@ -27,13 +31,12 @@ module Shipyard
|
|
27
31
|
|
28
32
|
content_tag :div, options do
|
29
33
|
concat content_tag(:p, raw(alert_txt), class: 'alert-txt')
|
30
|
-
if
|
31
|
-
concat content_tag(
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
)
|
34
|
+
if dismissible
|
35
|
+
concat content_tag(:button,
|
36
|
+
icon(:x, class: 'alert-close-icon icon-outline-inverse center'),
|
37
|
+
class: 'alert-close v-center',
|
38
|
+
shipyard: 'alert-close'
|
39
|
+
)
|
37
40
|
end
|
38
41
|
end
|
39
42
|
end
|
@@ -5,16 +5,22 @@ module Shipyard
|
|
5
5
|
|
6
6
|
def icon(name, options={})
|
7
7
|
if name.is_a? Symbol
|
8
|
-
svg =
|
8
|
+
svg = find_icon(symbol: name)
|
9
9
|
svg_use_tag svg, options
|
10
10
|
else
|
11
|
-
svg =
|
11
|
+
svg = find_icon(id: name)
|
12
12
|
svg_tag svg, options
|
13
13
|
end
|
14
14
|
end
|
15
15
|
|
16
16
|
private
|
17
17
|
|
18
|
+
def find_icon(hash)
|
19
|
+
icon = $icons.icons.detect { |i| i[hash.keys.first] == hash.values.first }
|
20
|
+
raise_error(hash.values.first) unless icon
|
21
|
+
icon
|
22
|
+
end
|
23
|
+
|
18
24
|
def svg_options(svg, options)
|
19
25
|
options[:class] = svg_classes(svg, options)
|
20
26
|
options[:viewBox] ||= svg[:view_box]
|
@@ -36,7 +42,7 @@ module Shipyard
|
|
36
42
|
|
37
43
|
def svg_use_tag(svg, options)
|
38
44
|
content_tag :svg, svg_options(svg, options) do
|
39
|
-
content_tag :use, nil, 'xlink:href' =>
|
45
|
+
content_tag :use, nil, 'xlink:href' => $icons.asset_path(svg[:id])
|
40
46
|
end
|
41
47
|
end
|
42
48
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
class Alerts extends Shipyard {
|
2
|
+
constructor (el) {
|
3
|
+
super(el)
|
4
|
+
this.el.forEach((el) => {
|
5
|
+
el.querySelector('[shipyard="alert-close"]')
|
6
|
+
.addEventListener('click', () => { this.close(el) })
|
7
|
+
})
|
8
|
+
}
|
9
|
+
|
10
|
+
close (el) {
|
11
|
+
el.classList.add('alert-closed')
|
12
|
+
}
|
13
|
+
}
|
@@ -1,3 +1,36 @@
|
|
1
1
|
class Shipyard {
|
2
|
-
constructor () {
|
2
|
+
constructor (el) {
|
3
|
+
this.el = typeof el === 'string' ? document.querySelectorAll(el) : [el]
|
4
|
+
this.html = document.documentElement
|
5
|
+
return this
|
6
|
+
}
|
7
|
+
|
8
|
+
on (events, callback) {
|
9
|
+
this.el.forEach((el) => {
|
10
|
+
events.split(' ').forEach((eventName) => {
|
11
|
+
el.addEventListener(eventName, callback)
|
12
|
+
})
|
13
|
+
})
|
14
|
+
return this
|
15
|
+
}
|
16
|
+
|
17
|
+
trigger (events) {
|
18
|
+
this.el.forEach((el) => {
|
19
|
+
events.split(' ').forEach((eventName) => {
|
20
|
+
el.dispatchEvent(new Event(eventName))
|
21
|
+
})
|
22
|
+
})
|
23
|
+
return this
|
24
|
+
}
|
25
|
+
|
26
|
+
css (el, value) {
|
27
|
+
return window.getComputedStyle(el).getPropertyValue(value)
|
28
|
+
}
|
29
|
+
|
30
|
+
addClass(className) {
|
31
|
+
this.el.forEach((el) => {
|
32
|
+
el.classList.add(className)
|
33
|
+
})
|
34
|
+
return this
|
35
|
+
}
|
3
36
|
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
class Scroll extends Shipyard {
|
2
|
+
constructor (el) {
|
3
|
+
super(el)
|
4
|
+
this.on('scroll resize', () => { this.scroll() }).trigger('scroll')
|
5
|
+
}
|
6
|
+
|
7
|
+
scroll () {
|
8
|
+
this.html.classList.toggle('scrolling', window.pageYOffset > 0)
|
9
|
+
this.html.classList.toggle('scroll-top', window.pageYOffset <= 0)
|
10
|
+
this.html.classList.toggle('scroll-bottom', window.pageYOffset + window.innerHeight >= document.body.scrollHeight)
|
11
|
+
}
|
12
|
+
}
|
@@ -1,6 +1,9 @@
|
|
1
1
|
//= require ./shipyard/core
|
2
|
-
//= require ./shipyard/
|
3
|
-
//= require ./shipyard/
|
2
|
+
//= require ./shipyard/scroll
|
3
|
+
//= require ./shipyard/hamburger
|
4
|
+
//= require ./shipyard/alerts
|
4
5
|
|
5
|
-
var shipyard = new Shipyard()
|
6
|
-
var
|
6
|
+
var shipyard = new Shipyard('html')
|
7
|
+
var windowScroll = new Scroll(window)
|
8
|
+
var hamburger = new Hamburger('[shipyard=hamburger]')
|
9
|
+
var shipyardAlerts = new Alerts('[shipyard=alert]')
|
@@ -1,7 +1,7 @@
|
|
1
1
|
.box
|
2
2
|
&, &-link
|
3
3
|
background: #fff
|
4
|
-
box-shadow
|
4
|
+
+box-shadow
|
5
5
|
|
6
6
|
&, &-link, &-secondary
|
7
7
|
display: block
|
@@ -14,7 +14,7 @@
|
|
14
14
|
background: $gray-lighter
|
15
15
|
|
16
16
|
&-rounded
|
17
|
-
border-radius:
|
17
|
+
border-radius: 1000px
|
18
18
|
|
19
19
|
&-link
|
20
20
|
color: $blue
|
@@ -39,6 +39,6 @@
|
|
39
39
|
|
40
40
|
// Box Sizes
|
41
41
|
+all-media-sizes
|
42
|
-
@each $size, $height in (xxs: 50px, xs: 60px, sm: 70px, md: 80px, lg: 90px, xl: 100px)
|
42
|
+
@each $size, $height in (xxs: 50px, xs: 60px, sm: 70px, md: 80px, lg: 90px, xl: 100px, xxl: 110px)
|
43
43
|
&-#{$size}
|
44
44
|
height: $height
|
@@ -26,48 +26,40 @@
|
|
26
26
|
@if $text-color
|
27
27
|
color: $text-color
|
28
28
|
|
29
|
-
@mixin btn-hover($color, $text-color: null, $border-color: null)
|
29
|
+
@mixin btn-hover($color, $text-color: null, $border-color: null, $text-decoration: none)
|
30
30
|
&:hover, &:focus, &:active
|
31
|
-
text-decoration:
|
31
|
+
text-decoration: $text-decoration
|
32
32
|
+btn-color($color, $text-color, $border-color)
|
33
33
|
|
34
|
-
@mixin btn-size($size)
|
34
|
+
@mixin btn-size($size, $min-width: null)
|
35
35
|
@if $size == xxs
|
36
36
|
font-size: 12px
|
37
37
|
padding: 0 8px
|
38
|
-
|
39
|
-
min-width: 20px
|
40
|
-
line-height: 16px
|
38
|
+
+btn-size(20px)
|
41
39
|
@else if $size == xs
|
42
40
|
font-size: 12px
|
43
41
|
padding: 0 10px
|
44
|
-
|
45
|
-
min-width: 30px
|
46
|
-
line-height: 26px
|
42
|
+
+btn-size(30px)
|
47
43
|
@else if $size == sm
|
48
44
|
font-size: 14px
|
49
45
|
padding: 0 15px
|
50
|
-
|
51
|
-
min-width: 40px
|
52
|
-
line-height: 36px
|
46
|
+
+btn-size(40px)
|
53
47
|
@else if $size == md
|
54
48
|
font-size: 16px
|
55
49
|
padding: 0 20px
|
56
|
-
|
57
|
-
min-width: 50px
|
58
|
-
line-height: 46px
|
50
|
+
+btn-size(50px)
|
59
51
|
@else if $size == lg
|
60
52
|
font-size: 18px
|
61
53
|
padding: 0 30px
|
62
|
-
|
63
|
-
min-width: 60px
|
64
|
-
line-height: 56px
|
54
|
+
+btn-size(60px)
|
65
55
|
@else if $size == xl
|
66
56
|
font-size: 20px
|
67
57
|
padding: 0 35px
|
68
|
-
|
69
|
-
|
70
|
-
|
58
|
+
+btn-size(70px)
|
59
|
+
@else if type-of($size) == 'number'
|
60
|
+
height: $size
|
61
|
+
line-height: $size - 4px
|
62
|
+
min-width: if($min-width, $min-width, $size)
|
71
63
|
|
72
64
|
+component('btn')
|
73
65
|
+btn
|
@@ -141,6 +133,10 @@
|
|
141
133
|
+btn-color($green-dark)
|
142
134
|
+btn-hover($green-darker)
|
143
135
|
|
136
|
+
&-link
|
137
|
+
+btn-color(transparent, $blue)
|
138
|
+
+btn-hover(transparent, $blue-dark, $text-decoration: underline)
|
139
|
+
|
144
140
|
&-checked
|
145
141
|
&, &:active, &:hover, &:focus
|
146
142
|
+btn-color($green-dark, #fff)
|
@@ -0,0 +1,60 @@
|
|
1
|
+
+component('header')
|
2
|
+
$height: 70px
|
3
|
+
top: 0
|
4
|
+
left: 0
|
5
|
+
right: 0
|
6
|
+
position: fixed
|
7
|
+
transition: height 250ms ease, background-color 250ms ease
|
8
|
+
+respond-to(overflow, (x0: hidden, x1: visible))
|
9
|
+
+respond-to(height, (x0: 50px, x1: 60px, x2: 70px))
|
10
|
+
+respond-to(text-align, (x0: center, x1: left))
|
11
|
+
+respond-to(line-height, (x0: 50px, x1: 60px, x2: 70px))
|
12
|
+
.hamburger-button-clicked &
|
13
|
+
height: 100%
|
14
|
+
|
15
|
+
+sub-component('logo')
|
16
|
+
display: inline-block
|
17
|
+
+respond-to(margin, (x0: 0 auto, x1: 0))
|
18
|
+
+respond-to(font-size, (x0: 20px, x1: 24px))
|
19
|
+
+respond-to(float, (x1: left))
|
20
|
+
a
|
21
|
+
color: $blue-darkest
|
22
|
+
|
23
|
+
+sub-component('list')
|
24
|
+
+respond-to(float, (x1: right))
|
25
|
+
+respond-to(margin-right, (x1: -15px))
|
26
|
+
|
27
|
+
&-item
|
28
|
+
+respond-to(margin, (x1: 0 15px))
|
29
|
+
+respond-to(display, (x0: block, x1: inline))
|
30
|
+
&-cta
|
31
|
+
+respond-to(top, (x0: 0, x1: auto))
|
32
|
+
+respond-to(right, (x0: 10px, x1: auto))
|
33
|
+
+respond-to(position, (x0: fixed, x1: static))
|
34
|
+
|
35
|
+
&-link
|
36
|
+
color: inherit
|
37
|
+
+when('item-current')
|
38
|
+
position: relative
|
39
|
+
color: $blue
|
40
|
+
font-weight: $bold
|
41
|
+
cursor: default
|
42
|
+
&::after
|
43
|
+
content: ''
|
44
|
+
position: absolute
|
45
|
+
left: 0
|
46
|
+
bottom: -2px
|
47
|
+
background: $blue-lighter
|
48
|
+
+border-radius
|
49
|
+
+width-height(100%, 2px)
|
50
|
+
&, &:hover
|
51
|
+
text-decoration: none
|
52
|
+
&:hover
|
53
|
+
color: $blue
|
54
|
+
&-cta
|
55
|
+
color: darken($green, 5%)
|
56
|
+
font-weight: $bold
|
57
|
+
&:hover
|
58
|
+
color: $green-dark
|
59
|
+
&, &:hover
|
60
|
+
text-decoration: none
|
@@ -0,0 +1,20 @@
|
|
1
|
+
+component('table')
|
2
|
+
width: 100%
|
3
|
+
text-align: left
|
4
|
+
border-spacing: 0
|
5
|
+
|
6
|
+
tr
|
7
|
+
&:nth-child(even)
|
8
|
+
background: rgba($gray-lighter, .5)
|
9
|
+
|
10
|
+
th, td
|
11
|
+
+respond-to(padding, (x0: 5px, x1: 10px, x2: 15px))
|
12
|
+
|
13
|
+
th
|
14
|
+
border-bottom: 2px solid $gray-lighter
|
15
|
+
|
16
|
+
td
|
17
|
+
&:first-child
|
18
|
+
border-radius: 3px 0 0 3px
|
19
|
+
&:last-child
|
20
|
+
border-radius: 0 3px 3px 0
|
@@ -13,7 +13,8 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
|
|
13
13
|
@mixin column-sizes
|
14
14
|
@each $width in $widths
|
15
15
|
&-#{$width}
|
16
|
-
+column-style(width, $width)
|
16
|
+
+column-style(max-width, $width)
|
17
|
+
+column-style(flex-basis, $width)
|
17
18
|
&-offset-#{$width}
|
18
19
|
+column-style(margin-left, $width)
|
19
20
|
|
@@ -28,15 +29,23 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
|
|
28
29
|
@extend .container
|
29
30
|
+responsive-padding(top bottom, $divisor: 1)
|
30
31
|
|
31
|
-
|
32
|
+
+component('col')
|
32
33
|
display: block
|
33
|
-
float: left
|
34
34
|
position: relative
|
35
|
+
flex-basis: 0
|
36
|
+
flex-grow: 1
|
37
|
+
flex-shrink: 1
|
35
38
|
+responsive-padding(left right)
|
36
39
|
|
37
40
|
&-container
|
38
|
-
|
41
|
+
display: flex
|
42
|
+
flex-wrap: wrap
|
39
43
|
+responsive-margin(left right, $divisor: -2)
|
44
|
+
&-nowrap
|
45
|
+
+all-media-sizes
|
46
|
+
display: flex
|
47
|
+
flex-wrap: nowrap
|
48
|
+
+responsive-margin(left right, $divisor: -2)
|
40
49
|
|
41
50
|
&-center
|
42
51
|
float: none
|
@@ -34,14 +34,6 @@
|
|
34
34
|
&-#{$value}
|
35
35
|
text-align: $value
|
36
36
|
|
37
|
-
.margin
|
38
|
-
@each $direction in (top, right, bottom, left)
|
39
|
-
&-#{$direction}
|
40
|
-
+all-media-sizes
|
41
|
-
@each $size, $value in (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
|
42
|
-
&-#{$size}
|
43
|
-
margin-#{$direction}: $value
|
44
|
-
|
45
37
|
.text
|
46
38
|
&-shadow
|
47
39
|
text-shadow: 0 1px 0 rgba(#000,.08)
|
@@ -1,4 +1,16 @@
|
|
1
1
|
$component-defaults: (
|
2
|
+
header: (
|
3
|
+
z-index: 100,
|
4
|
+
background: #fff,
|
5
|
+
color: $text-color-light,
|
6
|
+
box-shadow: $box-shadow,
|
7
|
+
logo: (
|
8
|
+
font-weight: $bold
|
9
|
+
),
|
10
|
+
list: (
|
11
|
+
font-weight: $medium
|
12
|
+
)
|
13
|
+
),
|
2
14
|
input: (
|
3
15
|
required-asterisk: (
|
4
16
|
top: 6px,
|
data/ci/build.rb
ADDED