shipyard-framework 0.2.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +10 -0
- data/.rspec +2 -0
- data/CODE_OF_CONDUCT.md +74 -0
- data/Gemfile +3 -0
- data/LICENSE.txt +21 -0
- data/README.md +52 -0
- data/Rakefile +6 -0
- data/app/views/shipyard/_alerts.slim +3 -0
- data/assets/icons/arrows/arrow-down.svg +3 -0
- data/assets/icons/gear.svg +3 -0
- data/assets/icons/plus.svg +3 -0
- data/assets/icons/x.svg +4 -0
- data/assets/javascripts/shipyard/alert.es6 +19 -0
- data/assets/javascripts/shipyard/core.es6 +3 -0
- data/assets/javascripts/shipyard/icon.es6 +50 -0
- data/assets/javascripts/shipyard.es6 +6 -0
- data/assets/stylesheets/_shipyard.sass +3 -0
- data/assets/stylesheets/shipyard/_components.sass +5 -0
- data/assets/stylesheets/shipyard/_core.sass +12 -0
- data/assets/stylesheets/shipyard/_utilities.sass +5 -0
- data/assets/stylesheets/shipyard/components/_alerts.sass +64 -0
- data/assets/stylesheets/shipyard/components/_boxes.sass +37 -0
- data/assets/stylesheets/shipyard/components/_buttons.sass +107 -0
- data/assets/stylesheets/shipyard/components/_empty.sass +15 -0
- data/assets/stylesheets/shipyard/components/_forms.sass +128 -0
- data/assets/stylesheets/shipyard/components/_icons.sass +54 -0
- data/assets/stylesheets/shipyard/components/_modals.sass +29 -0
- data/assets/stylesheets/shipyard/functions/_color.sass +9 -0
- data/assets/stylesheets/shipyard/mixins/_box-model.sass +6 -0
- data/assets/stylesheets/shipyard/mixins/_components.sass +82 -0
- data/assets/stylesheets/shipyard/mixins/_positioning.sass +12 -0
- data/assets/stylesheets/shipyard/mixins/_prefixed.sass +19 -0
- data/assets/stylesheets/shipyard/mixins/_responsive.sass +112 -0
- data/assets/stylesheets/shipyard/mixins/_selectors.sass +11 -0
- data/assets/stylesheets/shipyard/utilities/_animations.sass +11 -0
- data/assets/stylesheets/shipyard/utilities/_grid.sass +75 -0
- data/assets/stylesheets/shipyard/utilities/_positioning.sass +17 -0
- data/assets/stylesheets/shipyard/utilities/_reset.sass +11 -0
- data/assets/stylesheets/shipyard/utilities/_type.sass +161 -0
- data/assets/stylesheets/shipyard/variables/_color_utilities.sass +68 -0
- data/assets/stylesheets/shipyard/variables/_colors.scss +11 -0
- data/assets/stylesheets/shipyard/variables/_grid.scss +2 -0
- data/assets/stylesheets/shipyard/variables/_misc.scss +11 -0
- data/assets/stylesheets/shipyard/variables/_typography.scss +29 -0
- data/lib/shipyard/icons.rb +89 -0
- data/lib/shipyard/rails/alert_helper.rb +45 -0
- data/lib/shipyard/rails/button_helper.rb +37 -0
- data/lib/shipyard/rails/engine.rb +11 -0
- data/lib/shipyard/rails/icon_helper.rb +50 -0
- data/lib/shipyard/rails/layout_helpers.rb +34 -0
- data/lib/shipyard/rails/railtie.rb +24 -0
- data/lib/shipyard/version.rb +3 -0
- data/lib/shipyard.rb +65 -0
- data/shipyard.gemspec +27 -0
- metadata +181 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: c4824254449409a00d912f8309c3cc40e561603a
|
4
|
+
data.tar.gz: 9573db7560645e025a48db179220b1754154f06f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: dfd2812b24456c670699d17550a71813ed798d4ff476d035e221c9ad0cd360e2deb69ca81510e8651cdd822f71e22e6ff747c7e952a317dcbb655f6b322d928a
|
7
|
+
data.tar.gz: 8b1c6279d9995f66084df92c511e0f76739beef170d19bf7dbde18cc2d8511cdd46d20a10025405f6a8454b9295ac730767fba76f44d53eb37c42f5b81b2264d
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,74 @@
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
2
|
+
|
3
|
+
## Our Pledge
|
4
|
+
|
5
|
+
In the interest of fostering an open and welcoming environment, we as
|
6
|
+
contributors and maintainers pledge to making participation in our project and
|
7
|
+
our community a harassment-free experience for everyone, regardless of age, body
|
8
|
+
size, disability, ethnicity, gender identity and expression, level of experience,
|
9
|
+
nationality, personal appearance, race, religion, or sexual identity and
|
10
|
+
orientation.
|
11
|
+
|
12
|
+
## Our Standards
|
13
|
+
|
14
|
+
Examples of behavior that contributes to creating a positive environment
|
15
|
+
include:
|
16
|
+
|
17
|
+
* Using welcoming and inclusive language
|
18
|
+
* Being respectful of differing viewpoints and experiences
|
19
|
+
* Gracefully accepting constructive criticism
|
20
|
+
* Focusing on what is best for the community
|
21
|
+
* Showing empathy towards other community members
|
22
|
+
|
23
|
+
Examples of unacceptable behavior by participants include:
|
24
|
+
|
25
|
+
* The use of sexualized language or imagery and unwelcome sexual attention or
|
26
|
+
advances
|
27
|
+
* Trolling, insulting/derogatory comments, and personal or political attacks
|
28
|
+
* Public or private harassment
|
29
|
+
* Publishing others' private information, such as a physical or electronic
|
30
|
+
address, without explicit permission
|
31
|
+
* Other conduct which could reasonably be considered inappropriate in a
|
32
|
+
professional setting
|
33
|
+
|
34
|
+
## Our Responsibilities
|
35
|
+
|
36
|
+
Project maintainers are responsible for clarifying the standards of acceptable
|
37
|
+
behavior and are expected to take appropriate and fair corrective action in
|
38
|
+
response to any instances of unacceptable behavior.
|
39
|
+
|
40
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
41
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
42
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
43
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
44
|
+
threatening, offensive, or harmful.
|
45
|
+
|
46
|
+
## Scope
|
47
|
+
|
48
|
+
This Code of Conduct applies both within project spaces and in public spaces
|
49
|
+
when an individual is representing the project or its community. Examples of
|
50
|
+
representing a project or community include using an official project e-mail
|
51
|
+
address, posting via an official social media account, or acting as an appointed
|
52
|
+
representative at an online or offline event. Representation of a project may be
|
53
|
+
further defined and clarified by project maintainers.
|
54
|
+
|
55
|
+
## Enforcement
|
56
|
+
|
57
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
58
|
+
reported by contacting the project team at ryanwilke@gmail.com. All
|
59
|
+
complaints will be reviewed and investigated and will result in a response that
|
60
|
+
is deemed necessary and appropriate to the circumstances. The project team is
|
61
|
+
obligated to maintain confidentiality with regard to the reporter of an incident.
|
62
|
+
Further details of specific enforcement policies may be posted separately.
|
63
|
+
|
64
|
+
Project maintainers who do not follow or enforce the Code of Conduct in good
|
65
|
+
faith may face temporary or permanent repercussions as determined by other
|
66
|
+
members of the project's leadership.
|
67
|
+
|
68
|
+
## Attribution
|
69
|
+
|
70
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
71
|
+
available at [http://contributor-covenant.org/version/1/4][version]
|
72
|
+
|
73
|
+
[homepage]: http://contributor-covenant.org
|
74
|
+
[version]: http://contributor-covenant.org/version/1/4/
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2017 Shipyard
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
# Shipyard
|
2
|
+
|
3
|
+
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/shipyard`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
+
|
5
|
+
TODO: Delete this and the text above, and describe your gem
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'shipyard'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install shipyard
|
22
|
+
|
23
|
+
The add this line to your application's CSS file(s):
|
24
|
+
|
25
|
+
```css
|
26
|
+
@import "shipyard"
|
27
|
+
```
|
28
|
+
|
29
|
+
If you're using Jekyll, make sure you add the following the code in your `_config.yml` file:
|
30
|
+
```yml
|
31
|
+
plugins:
|
32
|
+
- shipyard
|
33
|
+
```
|
34
|
+
|
35
|
+
## Usage
|
36
|
+
|
37
|
+
TODO: Write usage instructions here
|
38
|
+
|
39
|
+
## Development
|
40
|
+
|
41
|
+
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.
|
42
|
+
|
43
|
+
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).
|
44
|
+
|
45
|
+
## Contributing
|
46
|
+
|
47
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/shipyard. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
48
|
+
|
49
|
+
|
50
|
+
## License
|
51
|
+
|
52
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
data/assets/icons/x.svg
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
class Alert extends Shipyard {
|
2
|
+
constructor () {
|
3
|
+
super()
|
4
|
+
var alerts = document.querySelectorAll('[data-shipyard="alert"]');
|
5
|
+
for (var alert of alerts) {
|
6
|
+
new Vue({
|
7
|
+
el: alert,
|
8
|
+
data: {
|
9
|
+
visible: true
|
10
|
+
},
|
11
|
+
methods: {
|
12
|
+
close () {
|
13
|
+
this.visible = false;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
});
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
Vue.component('icon', {
|
2
|
+
template: `
|
3
|
+
<svg :class="iconClass" :viewBox="viewBox" preserveAspectRatio="xMinYMin meet" v-html="innerHtml"></svg>
|
4
|
+
`,
|
5
|
+
|
6
|
+
props: {
|
7
|
+
name: String,
|
8
|
+
size: String, // {width}x{height} (e.g. 4x8, 8x8, 16x16)
|
9
|
+
type: {
|
10
|
+
default: '',
|
11
|
+
type: String
|
12
|
+
},
|
13
|
+
html: String
|
14
|
+
},
|
15
|
+
|
16
|
+
computed: {
|
17
|
+
iconClass () {
|
18
|
+
let cssClasses = [];
|
19
|
+
cssClasses.push('icon');
|
20
|
+
cssClasses.push(`icon-${this.name}`);
|
21
|
+
if (this.type.length > 0) {
|
22
|
+
this.type.trim().split(' ').forEach((type) => {
|
23
|
+
cssClasses.push(`icon-${type}`);
|
24
|
+
});
|
25
|
+
}
|
26
|
+
return cssClasses;
|
27
|
+
},
|
28
|
+
|
29
|
+
viewBox () {
|
30
|
+
return `0 0 ${this.size.replace(/x/, ' ')}`;
|
31
|
+
},
|
32
|
+
|
33
|
+
href () {
|
34
|
+
return `/assets/icons.svg#${this.name}`;
|
35
|
+
},
|
36
|
+
|
37
|
+
innerHtml () {
|
38
|
+
if (this.html && this.name == 'queued') {
|
39
|
+
return this.svgInnerHtml;
|
40
|
+
} else {
|
41
|
+
return `<use xlink:href="${this.href}"></use>`;
|
42
|
+
}
|
43
|
+
},
|
44
|
+
|
45
|
+
svgInnerHtml () {
|
46
|
+
if (this.html) var html = this.html.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
|
47
|
+
if (html) return html[1];
|
48
|
+
}
|
49
|
+
}
|
50
|
+
});
|
@@ -0,0 +1,12 @@
|
|
1
|
+
@import shipyard/variables/colors
|
2
|
+
@import shipyard/functions/color
|
3
|
+
@import shipyard/variables/color_utilities
|
4
|
+
@import shipyard/variables/typography
|
5
|
+
@import shipyard/variables/grid
|
6
|
+
@import shipyard/variables/misc
|
7
|
+
@import shipyard/mixins/box-model
|
8
|
+
@import shipyard/mixins/selectors
|
9
|
+
@import shipyard/mixins/responsive
|
10
|
+
@import shipyard/mixins/components
|
11
|
+
@import shipyard/mixins/positioning
|
12
|
+
@import shipyard/mixins/prefixed
|
@@ -0,0 +1,64 @@
|
|
1
|
+
+component('alert')
|
2
|
+
display: block
|
3
|
+
border-radius: 5px
|
4
|
+
background: $blue
|
5
|
+
color: rgba(#fff,.9)
|
6
|
+
position: relative
|
7
|
+
+respond-to(min-height, (x0: 50px, x1: 60px))
|
8
|
+
+respond-to(margin-bottom, (x0: 10px, x1: 15px))
|
9
|
+
+respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
|
10
|
+
&:last-child
|
11
|
+
+respond-to(margin-bottom, (x0: 10px, x1: 15px, x2: 30px))
|
12
|
+
&-closeable
|
13
|
+
+respond-to(padding-right, (x0: 60px, x1: 70px, x2: 80px))
|
14
|
+
a, strong, .strong
|
15
|
+
color: #fff
|
16
|
+
&:not(.btn)
|
17
|
+
font-weight: $bold
|
18
|
+
&-timer
|
19
|
+
top: 0
|
20
|
+
left: 0
|
21
|
+
height: 4px
|
22
|
+
width: 100%
|
23
|
+
position: absolute
|
24
|
+
background: rgba(#fff, .25)
|
25
|
+
transform: translatex(-100%)
|
26
|
+
animation: slide-in-from-left 10s linear 0s forwards
|
27
|
+
&-txt,
|
28
|
+
&-txt p
|
29
|
+
margin: 0
|
30
|
+
font-weight: $medium
|
31
|
+
.legacy-content &
|
32
|
+
font-size: $font-size
|
33
|
+
line-height: inherit
|
34
|
+
&-success
|
35
|
+
background: darken($green, 5%)
|
36
|
+
&-warning
|
37
|
+
background: darken($yellow, 20%)
|
38
|
+
&-error
|
39
|
+
background: $red
|
40
|
+
&-description
|
41
|
+
opacity: 0.75
|
42
|
+
&-cta
|
43
|
+
+btn-color(darken($blue, 10%))
|
44
|
+
+breakpoint-x0
|
45
|
+
display: block
|
46
|
+
text-align: center
|
47
|
+
margin-top: 10px
|
48
|
+
+breakpoint-x1
|
49
|
+
top: 50%
|
50
|
+
right: 10px
|
51
|
+
position: absolute
|
52
|
+
transform: translatey(-50%)
|
53
|
+
&-close
|
54
|
+
position: absolute
|
55
|
+
display: inline-block
|
56
|
+
transition: opacity 300ms ease
|
57
|
+
+width-height(30px)
|
58
|
+
+respond-to(right, (x0: 10px, x2: 20px))
|
59
|
+
&:not(:hover)
|
60
|
+
opacity: 0.75
|
61
|
+
&:focus
|
62
|
+
outline: 0
|
63
|
+
&-icon
|
64
|
+
+width-height(14px)
|
@@ -0,0 +1,37 @@
|
|
1
|
+
.box
|
2
|
+
&, &-link
|
3
|
+
background: #fff
|
4
|
+
box-shadow: 0 1px 2px rgba($gray-darkest,.08)
|
5
|
+
|
6
|
+
&, &-link, &-secondary
|
7
|
+
display: block
|
8
|
+
position: relative
|
9
|
+
border-radius: 4px
|
10
|
+
transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease
|
11
|
+
+clearfix
|
12
|
+
|
13
|
+
&-secondary
|
14
|
+
background: $gray-lighter
|
15
|
+
|
16
|
+
&-link
|
17
|
+
color: $blue
|
18
|
+
cursor: pointer
|
19
|
+
&:hover, &-selected, &-active
|
20
|
+
color: $blue-dark
|
21
|
+
box-shadow: 0 0 4px 1px rgba($blue,.5)
|
22
|
+
&-active-green,
|
23
|
+
&-active-green:hover
|
24
|
+
cursor: default
|
25
|
+
box-shadow: 0 0 4px 1px rgba(darken($green, 5%),.75)
|
26
|
+
|
27
|
+
&-padding
|
28
|
+
+respond-to(padding, $margins)
|
29
|
+
|
30
|
+
&-margin
|
31
|
+
margin: 15px 0
|
32
|
+
|
33
|
+
// Box Sizes
|
34
|
+
+all-media-sizes
|
35
|
+
@each $size, $height in (xxs: 50px, xs: 60px, sm: 70px, md: 80px, lg: 90px, xl: 100px)
|
36
|
+
&-#{$size}
|
37
|
+
height: $height
|
@@ -0,0 +1,107 @@
|
|
1
|
+
@mixin btn($size: md, $position: relative, $bg: $gray)
|
2
|
+
position: $position
|
3
|
+
display: inline-block
|
4
|
+
border-radius: 5px
|
5
|
+
border: 0
|
6
|
+
cursor: pointer
|
7
|
+
color: #fff
|
8
|
+
transition: background 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease
|
9
|
+
outline: none
|
10
|
+
border-width: 2px
|
11
|
+
border-style: solid
|
12
|
+
font: $bold 16px / 1.6 $font-family
|
13
|
+
+btn-size($size)
|
14
|
+
+btn-color($bg, #fff)
|
15
|
+
+btn-hover(darken($bg, 10%))
|
16
|
+
|
17
|
+
@mixin btn-color($color, $text-color: null, $border-color: null)
|
18
|
+
background: $color
|
19
|
+
@if $border-color
|
20
|
+
border-color: $border-color
|
21
|
+
@else
|
22
|
+
border-color: $color
|
23
|
+
@if $text-color
|
24
|
+
color: $text-color
|
25
|
+
|
26
|
+
@mixin btn-hover($color, $text-color: null, $border-color: null)
|
27
|
+
&:hover, &:focus, &:active
|
28
|
+
+btn-color($color, $text-color, $border-color)
|
29
|
+
|
30
|
+
@mixin btn-size($size)
|
31
|
+
@if $size == xs
|
32
|
+
font-size: 12px
|
33
|
+
padding: 0 10px
|
34
|
+
height: 30px
|
35
|
+
min-width: 30px
|
36
|
+
line-height: 26px
|
37
|
+
@else if $size == sm
|
38
|
+
font-size: 14px
|
39
|
+
padding: 0 15px
|
40
|
+
height: 40px
|
41
|
+
min-width: 40px
|
42
|
+
line-height: 36px
|
43
|
+
@else if $size == md
|
44
|
+
font-size: 16px
|
45
|
+
padding: 0 20px
|
46
|
+
height: 50px
|
47
|
+
min-width: 50px
|
48
|
+
line-height: 46px
|
49
|
+
@else if $size == lg
|
50
|
+
font-size: 18px
|
51
|
+
padding: 0 30px
|
52
|
+
height: 60px
|
53
|
+
min-width: 60px
|
54
|
+
line-height: 56px
|
55
|
+
@else if $size == xl
|
56
|
+
font-size: 20px
|
57
|
+
padding: 0 35px
|
58
|
+
height: 70px
|
59
|
+
min-width: 70px
|
60
|
+
line-height: 66px
|
61
|
+
|
62
|
+
+component('btn')
|
63
|
+
+btn
|
64
|
+
|
65
|
+
// Button: Sizes
|
66
|
+
+all-media-sizes
|
67
|
+
@each $size in (xs, sm, md, lg, xl)
|
68
|
+
&-#{$size}
|
69
|
+
+btn-size($size)
|
70
|
+
|
71
|
+
&-margin
|
72
|
+
margin: 0 5px
|
73
|
+
|
74
|
+
// Button: Types
|
75
|
+
&-full
|
76
|
+
display: block
|
77
|
+
width: 100%
|
78
|
+
max-width: 600px
|
79
|
+
margin: 0 auto
|
80
|
+
|
81
|
+
&-primary
|
82
|
+
+btn-color($blue)
|
83
|
+
+btn-hover(darken($blue, 10%))
|
84
|
+
|
85
|
+
&-secondary
|
86
|
+
+btn-color(none, $text-color-light, darken($gray-lightest, 7%))
|
87
|
+
+btn-hover(none, darken($text-color-light, 15%), darken($gray-lightest, 17%))
|
88
|
+
|
89
|
+
&-disabled
|
90
|
+
cursor: not-allowed
|
91
|
+
&, &:hover, &:focus
|
92
|
+
color: $text-color-lightest
|
93
|
+
+btn-color(darken($gray-lightest, 7%))
|
94
|
+
&:active
|
95
|
+
animation: shake .35s infinite
|
96
|
+
|
97
|
+
&-inverse
|
98
|
+
+btn-color(#fff, inherit)
|
99
|
+
+btn-hover($blue, #fff)
|
100
|
+
&.btn-current
|
101
|
+
+btn-hover(#fff, inherit)
|
102
|
+
&-secondary
|
103
|
+
+btn-color(lighten($gray-dark, 10%))
|
104
|
+
+btn-hover($blue, #fff)
|
105
|
+
|
106
|
+
&-current
|
107
|
+
cursor: default
|
@@ -0,0 +1,15 @@
|
|
1
|
+
+component('empty')
|
2
|
+
&-container
|
3
|
+
padding: 40px 0
|
4
|
+
max-width: 600px
|
5
|
+
margin: 0 auto
|
6
|
+
&-txt
|
7
|
+
margin: 12px 0 20px
|
8
|
+
font-size: 18px
|
9
|
+
font-weight: $medium
|
10
|
+
color: $text-color-light
|
11
|
+
&-dark
|
12
|
+
@extend .empty-txt
|
13
|
+
color: darken($gray, 10%)
|
14
|
+
&-cta
|
15
|
+
margin: 0 5px
|
@@ -0,0 +1,128 @@
|
|
1
|
+
.label
|
2
|
+
font-weight: $bold
|
3
|
+
display: block
|
4
|
+
margin: 0 0 10px
|
5
|
+
&-note
|
6
|
+
color: $text-color-light
|
7
|
+
margin: -10px 0 15px
|
8
|
+
font-size: $font-size-sm
|
9
|
+
font-weight: $medium
|
10
|
+
|
11
|
+
+component('input')
|
12
|
+
font: $font
|
13
|
+
color: $text-color
|
14
|
+
font-weight: $medium
|
15
|
+
-webkit-appearance: none
|
16
|
+
background: #fff
|
17
|
+
+placeholder
|
18
|
+
color: $text-color-lightest
|
19
|
+
font-weight: $normal
|
20
|
+
|
21
|
+
&-group
|
22
|
+
+clearfix
|
23
|
+
padding: 15px 0
|
24
|
+
&-border
|
25
|
+
padding-bottom: 30px
|
26
|
+
margin-bottom: 15px
|
27
|
+
border-bottom: 2px solid $border-color-light
|
28
|
+
|
29
|
+
&-select
|
30
|
+
-webkit-appearance: none
|
31
|
+
display: block
|
32
|
+
width: 100%
|
33
|
+
border: 2px solid $border-color
|
34
|
+
background: #fff
|
35
|
+
height: 50px
|
36
|
+
font-size: 16px
|
37
|
+
color: $text-color-lighter
|
38
|
+
outline: none
|
39
|
+
+respond-to(padding, (x0: 0 15px, x1: 0 20px))
|
40
|
+
&:focus
|
41
|
+
border-color: $border-color-dark
|
42
|
+
&-container
|
43
|
+
position: relative
|
44
|
+
&::after
|
45
|
+
+width-height(30px)
|
46
|
+
display: block
|
47
|
+
position: absolute
|
48
|
+
top: 50%
|
49
|
+
right: 10px
|
50
|
+
content: " "
|
51
|
+
background: asset-url('arrows/down.svg') no-repeat center center
|
52
|
+
background-size: 10px 6px
|
53
|
+
text-align: center
|
54
|
+
font-weight: $bold
|
55
|
+
margin-top: -15px
|
56
|
+
&-chosen
|
57
|
+
color: $text-color
|
58
|
+
font-weight: $medium
|
59
|
+
&-option
|
60
|
+
&-placeholder
|
61
|
+
color: $text-color-lighter
|
62
|
+
|
63
|
+
&-text
|
64
|
+
position: relative
|
65
|
+
height: 50px
|
66
|
+
border-radius: 5px
|
67
|
+
border: 2px solid $border-color
|
68
|
+
font-size: 16px
|
69
|
+
transition: border-color 300ms ease
|
70
|
+
outline: none
|
71
|
+
+respond-to(padding, (x0: 0 15px, x1: 0 20px))
|
72
|
+
&:focus
|
73
|
+
border-color: $border-color-dark
|
74
|
+
&-connect
|
75
|
+
&-top:focus,
|
76
|
+
&-middle:focus,
|
77
|
+
&-bottom:focus
|
78
|
+
z-index: 1
|
79
|
+
&-top
|
80
|
+
border-radius: 5px 5px 0 0
|
81
|
+
&-middle
|
82
|
+
margin: -2px 0 0
|
83
|
+
border-radius: 0
|
84
|
+
&-bottom
|
85
|
+
margin: -2px 0 0
|
86
|
+
border-radius: 0 0 5px 5px
|
87
|
+
|
88
|
+
&-full
|
89
|
+
width: 100%
|
90
|
+
|
91
|
+
&-description
|
92
|
+
font-size: 14px
|
93
|
+
margin: 5px 0 0
|
94
|
+
color: $text-color-lighter
|
95
|
+
|
96
|
+
&-box
|
97
|
+
background: $border-color-light
|
98
|
+
border-radius: 4px
|
99
|
+
+respond-to(padding, (x0: 10px 15px, x1: 15px 20px))
|
100
|
+
margin: 0
|
101
|
+
|
102
|
+
.form-error
|
103
|
+
&-container
|
104
|
+
background: $red
|
105
|
+
border-radius: 5px
|
106
|
+
color: #fff
|
107
|
+
padding: 20px
|
108
|
+
margin: 15px 0
|
109
|
+
text-shadow: 0 1px 1px rgba($gray-darkest, .1)
|
110
|
+
&-text
|
111
|
+
margin: 0 0 15px
|
112
|
+
font-weight: $bold
|
113
|
+
&-list
|
114
|
+
list-style: none
|
115
|
+
margin: 0
|
116
|
+
&-item
|
117
|
+
color: #fff
|
118
|
+
font-weight: $medium
|
119
|
+
&:before
|
120
|
+
content: ""
|
121
|
+
border: 1px solid rgba(#fff,.5)
|
122
|
+
margin: 0 15px 0 1px
|
123
|
+
display: inline-block
|
124
|
+
border-radius: 50%
|
125
|
+
+width-height(6px)
|
126
|
+
vertical-align: middle
|
127
|
+
position: relative
|
128
|
+
top: -1px
|