english_tea 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +6 -0
- data/LICENSE.txt +21 -0
- data/README.md +37 -0
- data/Rakefile +10 -0
- data/app/assets/stylesheets/english_tea/all.scss +154 -0
- data/app/assets/stylesheets/english_tea/border/_index.scss +77 -0
- data/app/assets/stylesheets/english_tea/buttons/_index.scss +44 -0
- data/app/assets/stylesheets/english_tea/color/_border.scss +32 -0
- data/app/assets/stylesheets/english_tea/color/_buttons.scss +182 -0
- data/app/assets/stylesheets/english_tea/color/_index.scss +57 -0
- data/app/assets/stylesheets/english_tea/color/_jobs.scss +46 -0
- data/app/assets/stylesheets/english_tea/color/_social.scss +21 -0
- data/app/assets/stylesheets/english_tea/color/_status.scss +25 -0
- data/app/assets/stylesheets/english_tea/dimension/_margin.scss +196 -0
- data/app/assets/stylesheets/english_tea/dimension/_padding.scss +166 -0
- data/app/assets/stylesheets/english_tea/dimension/_position.scss +80 -0
- data/app/assets/stylesheets/english_tea/forms/_autocomplete.scss +67 -0
- data/app/assets/stylesheets/english_tea/forms/_choices.scss +204 -0
- data/app/assets/stylesheets/english_tea/forms/_datepicker.scss +142 -0
- data/app/assets/stylesheets/english_tea/forms/_index.scss +246 -0
- data/app/assets/stylesheets/english_tea/forms/_media.scss +61 -0
- data/app/assets/stylesheets/english_tea/forms/_numeric.scss +47 -0
- data/app/assets/stylesheets/english_tea/forms/_range.scss +124 -0
- data/app/assets/stylesheets/english_tea/forms/_select.scss +398 -0
- data/app/assets/stylesheets/english_tea/forms/_text.scss +51 -0
- data/app/assets/stylesheets/english_tea/forms/_uploader.scss +51 -0
- data/app/assets/stylesheets/english_tea/layout/_alignment.scss +89 -0
- data/app/assets/stylesheets/english_tea/layout/_clearfix.scss +15 -0
- data/app/assets/stylesheets/english_tea/layout/_display.scss +93 -0
- data/app/assets/stylesheets/english_tea/layout/_flex.scss +266 -0
- data/app/assets/stylesheets/english_tea/layout/_float.scss +33 -0
- data/app/assets/stylesheets/english_tea/layout/_grid.scss +210 -0
- data/app/assets/stylesheets/english_tea/layout/_layers.scss +11 -0
- data/app/assets/stylesheets/english_tea/layout/_position.scss +36 -0
- data/app/assets/stylesheets/english_tea/layout/_sizing.scss +264 -0
- data/app/assets/stylesheets/english_tea/layout/_visibility.scss +121 -0
- data/app/assets/stylesheets/english_tea/marketing/_double_login.scss +10 -0
- data/app/assets/stylesheets/english_tea/marketing/_index.scss +1350 -0
- data/app/assets/stylesheets/english_tea/media/_icons.scss +61 -0
- data/app/assets/stylesheets/english_tea/modules/_avatars.scss +40 -0
- data/app/assets/stylesheets/english_tea/modules/_billing.scss +60 -0
- data/app/assets/stylesheets/english_tea/modules/_box-shadow.scss +11 -0
- data/app/assets/stylesheets/english_tea/modules/_bubbles.scss +36 -0
- data/app/assets/stylesheets/english_tea/modules/_celebrate.scss +27 -0
- data/app/assets/stylesheets/english_tea/modules/_cursors.scss +51 -0
- data/app/assets/stylesheets/english_tea/modules/_fadein.scss +38 -0
- data/app/assets/stylesheets/english_tea/modules/_index.scss +224 -0
- data/app/assets/stylesheets/english_tea/modules/_job_posts.scss +303 -0
- data/app/assets/stylesheets/english_tea/modules/_listings.scss +32 -0
- data/app/assets/stylesheets/english_tea/modules/_menu.scss +57 -0
- data/app/assets/stylesheets/english_tea/modules/_modal.scss +37 -0
- data/app/assets/stylesheets/english_tea/modules/_navigation.scss +94 -0
- data/app/assets/stylesheets/english_tea/modules/_notification.scss +8 -0
- data/app/assets/stylesheets/english_tea/modules/_notifications_stream.scss +18 -0
- data/app/assets/stylesheets/english_tea/modules/_overlay.scss +49 -0
- data/app/assets/stylesheets/english_tea/modules/_profile.scss +239 -0
- data/app/assets/stylesheets/english_tea/modules/_projects.scss +55 -0
- data/app/assets/stylesheets/english_tea/modules/_stickybanner.scss +46 -0
- data/app/assets/stylesheets/english_tea/modules/_tabs.scss +14 -0
- data/app/assets/stylesheets/english_tea/modules/_tiles.scss +401 -0
- data/app/assets/stylesheets/english_tea/modules/_tooltips.scss +53 -0
- data/app/assets/stylesheets/english_tea/setup/_config.scss +515 -0
- data/app/assets/stylesheets/english_tea/setup/_default.scss +286 -0
- data/app/assets/stylesheets/english_tea/setup/_functions.scss +110 -0
- data/app/assets/stylesheets/english_tea/setup/_mixins.scss +258 -0
- data/app/assets/stylesheets/english_tea/setup/_normalize.scss +427 -0
- data/app/assets/stylesheets/english_tea/transition/_index.scss +97 -0
- data/app/assets/stylesheets/english_tea/typography/_fonts.scss +41 -0
- data/app/assets/stylesheets/english_tea/typography/_hierarchy.scss +40 -0
- data/app/assets/stylesheets/english_tea/typography/_style.scss +126 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/english_tea.gemspec +28 -0
- data/lib/english_tea/rails/engine.rb +6 -0
- data/lib/english_tea/version.rb +3 -0
- data/lib/english_tea.rb +5 -0
- data/vendor/assets/stylesheets/snapper.scss +83 -0
- metadata +179 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 6dbed523b260d51208c3fdabe5e76c970e3bc44e
|
4
|
+
data.tar.gz: 3582c0f46cd06803d5b4d8fdacdce7e8cc887816
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 3581bc56912ee39d75946b2a90f73dde9d6ebd43f9010583f4c5c4d1c79dcd78fdc32515e4e2e864af3b0ad52a498ea5aae8146e568a291cee64f1a9a5a0c246
|
7
|
+
data.tar.gz: 95861c76e69e367a654f8fd83f9147142f4493326a99b058fec17cf169a143ae38e521bd01f8804d46afe2a2a93211605d3f405307ba12e668a76a865ff5d76a
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2017 Rob Cameron
|
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,37 @@
|
|
1
|
+
# EnglishTea
|
2
|
+
|
3
|
+
Atomic CSS from WorkingNotWorking.com
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'english_tea'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install english_tea
|
20
|
+
|
21
|
+
Include in your application.css file:
|
22
|
+
|
23
|
+
*= require english_tea/all
|
24
|
+
|
25
|
+
Alternatively you can include individual modules by directory/name:
|
26
|
+
|
27
|
+
*= require_tree english_tea/setup
|
28
|
+
*= require_tree english_tea/typography
|
29
|
+
*= require english_tea/buttons/index
|
30
|
+
|
31
|
+
## Documentation
|
32
|
+
|
33
|
+
See https://workingnotworking.com/styleguide for tons of usage examples (coming soon).
|
34
|
+
|
35
|
+
## License
|
36
|
+
|
37
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,154 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// WNW Styling
|
3
|
+
// @joelparr
|
4
|
+
// ==========================================================================
|
5
|
+
|
6
|
+
// ---
|
7
|
+
// VENDOR
|
8
|
+
// 3rd-party libraries (mixins etc)
|
9
|
+
// ---
|
10
|
+
|
11
|
+
@import 'bourbon';
|
12
|
+
@import 'snapper';
|
13
|
+
|
14
|
+
// ---
|
15
|
+
// SETUP
|
16
|
+
// Normalization, defaults, configuration & utilities
|
17
|
+
// ---
|
18
|
+
|
19
|
+
@import 'setup/config';
|
20
|
+
@import 'setup/functions';
|
21
|
+
@import 'setup/mixins';
|
22
|
+
@import 'setup/normalize';
|
23
|
+
@import 'setup/default';
|
24
|
+
|
25
|
+
// ---
|
26
|
+
// MEDIA
|
27
|
+
// Images, videos & icons
|
28
|
+
// ---
|
29
|
+
|
30
|
+
@import 'media/icons';
|
31
|
+
|
32
|
+
// ---
|
33
|
+
// BUTTONS
|
34
|
+
// Shorthand for buttons
|
35
|
+
// ---
|
36
|
+
|
37
|
+
@import 'buttons/index';
|
38
|
+
|
39
|
+
// ---
|
40
|
+
// FORMS
|
41
|
+
// Shorthand for form fields & inputs
|
42
|
+
// ---
|
43
|
+
|
44
|
+
@import 'forms/index';
|
45
|
+
@import 'forms/text';
|
46
|
+
@import 'forms/numeric';
|
47
|
+
@import 'forms/select';
|
48
|
+
@import 'forms/autocomplete';
|
49
|
+
@import 'forms/choices';
|
50
|
+
//@import 'forms/range';
|
51
|
+
@import 'forms/datepicker';
|
52
|
+
@import 'forms/uploader';
|
53
|
+
@import 'forms/media';
|
54
|
+
|
55
|
+
//@import 'forms/modules';
|
56
|
+
|
57
|
+
// ---
|
58
|
+
// MODULES
|
59
|
+
// Shorthands for modules & other patterns
|
60
|
+
// ---
|
61
|
+
|
62
|
+
@import 'modules/index';
|
63
|
+
|
64
|
+
@import 'modules/avatars';
|
65
|
+
@import 'modules/box-shadow';
|
66
|
+
@import 'modules/bubbles';
|
67
|
+
@import 'modules/celebrate';
|
68
|
+
@import 'modules/cursors';
|
69
|
+
@import 'modules/tooltips';
|
70
|
+
|
71
|
+
@import 'modules/navigation';
|
72
|
+
@import 'modules/tiles';
|
73
|
+
@import 'modules/listings';
|
74
|
+
@import 'modules/profile';
|
75
|
+
@import 'modules/projects';
|
76
|
+
@import 'modules/job_posts';
|
77
|
+
@import 'modules/notifications_stream';
|
78
|
+
|
79
|
+
@import 'modules/menu';
|
80
|
+
@import 'modules/overlay';
|
81
|
+
@import 'modules/notification';
|
82
|
+
@import 'modules/modal';
|
83
|
+
@import 'modules/fadein';
|
84
|
+
@import 'modules/stickybanner';
|
85
|
+
@import 'modules/tabs';
|
86
|
+
@import 'modules/billing';
|
87
|
+
|
88
|
+
// ---
|
89
|
+
// TYPOGRAPHY
|
90
|
+
// Fonts, type styles, type hierarchy & vertical rhythm
|
91
|
+
// ---
|
92
|
+
|
93
|
+
@import 'typography/fonts';
|
94
|
+
@import 'typography/style';
|
95
|
+
@import 'typography/hierarchy';
|
96
|
+
|
97
|
+
// ---
|
98
|
+
// LAYOUT
|
99
|
+
// Display types, positioning, horizontal + vertical alignment & visibility
|
100
|
+
// ---
|
101
|
+
|
102
|
+
@import 'layout/display';
|
103
|
+
@import 'layout/alignment';
|
104
|
+
@import 'layout/sizing';
|
105
|
+
@import 'layout/float';
|
106
|
+
@import 'layout/position';
|
107
|
+
@import 'layout/layers';
|
108
|
+
@import 'layout/clearfix';
|
109
|
+
@import 'layout/flex';
|
110
|
+
@import 'layout/visibility';
|
111
|
+
@import 'layout/grid';
|
112
|
+
|
113
|
+
// ---
|
114
|
+
// DIMENSION
|
115
|
+
// Hierarcical margins & padding
|
116
|
+
// ---
|
117
|
+
|
118
|
+
@import 'dimension/margin';
|
119
|
+
@import 'dimension/padding';
|
120
|
+
@import 'dimension/position';
|
121
|
+
|
122
|
+
// ---
|
123
|
+
// BORDER
|
124
|
+
// Borders (per-side) widths, colors & styles
|
125
|
+
// ---
|
126
|
+
|
127
|
+
@import 'border/index';
|
128
|
+
|
129
|
+
// ---
|
130
|
+
// COLOR
|
131
|
+
// All UI color classes
|
132
|
+
// ---
|
133
|
+
|
134
|
+
@import 'color/index';
|
135
|
+
@import 'color/border';
|
136
|
+
@import 'color/status';
|
137
|
+
@import 'color/jobs';
|
138
|
+
@import 'color/social';
|
139
|
+
@import 'color/buttons';
|
140
|
+
|
141
|
+
// ---
|
142
|
+
// TRANSITIONS + EFFECTS
|
143
|
+
// Transitions & animations on interaction
|
144
|
+
// ---
|
145
|
+
|
146
|
+
@import 'transition/index';
|
147
|
+
|
148
|
+
// ---
|
149
|
+
// MARKETING PAGES
|
150
|
+
// Special stying for marketing page components
|
151
|
+
// ---
|
152
|
+
|
153
|
+
@import 'marketing/index';
|
154
|
+
@import 'marketing/double_login';
|
@@ -0,0 +1,77 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Border widths & style declaration classes
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
// ---
|
6
|
+
// RADIUS
|
7
|
+
// ---
|
8
|
+
|
9
|
+
.b-rad-rnd
|
10
|
+
{
|
11
|
+
border-radius: $border-radius-rounded;
|
12
|
+
}
|
13
|
+
|
14
|
+
.b-rad-pill
|
15
|
+
{
|
16
|
+
border-radius: $border-radius-pill;
|
17
|
+
}
|
18
|
+
|
19
|
+
.b-rad-circ
|
20
|
+
{
|
21
|
+
border-radius: $border-radius-circle;
|
22
|
+
}
|
23
|
+
|
24
|
+
.b-rad-none
|
25
|
+
{
|
26
|
+
border-radius: $border-radius-base;
|
27
|
+
}
|
28
|
+
|
29
|
+
// ---
|
30
|
+
// 1PX SIDED + ALL BORDERS
|
31
|
+
// ---
|
32
|
+
|
33
|
+
@include _bp-prefixer(b)
|
34
|
+
{
|
35
|
+
&
|
36
|
+
{
|
37
|
+
border: $border-width $border-style $color-border-base !important;
|
38
|
+
}
|
39
|
+
|
40
|
+
&0
|
41
|
+
{
|
42
|
+
border: none !important;
|
43
|
+
}
|
44
|
+
|
45
|
+
@each $key, $val in (t: top, r: right, b: bottom, l: left)
|
46
|
+
{
|
47
|
+
// ---
|
48
|
+
// PER-SIDE BORDERS
|
49
|
+
// ---
|
50
|
+
|
51
|
+
&#{$key}
|
52
|
+
{
|
53
|
+
border-#{$val}: $border-width $border-style $color-border-base !important;
|
54
|
+
}
|
55
|
+
|
56
|
+
// ---
|
57
|
+
// REMOVE PER-SIDE BORDERS
|
58
|
+
// ---
|
59
|
+
|
60
|
+
&#{$key}0
|
61
|
+
{
|
62
|
+
border-#{$val}: none !important;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
// ---
|
68
|
+
// BORDERS WIDTHS
|
69
|
+
// ---
|
70
|
+
|
71
|
+
@for $i from 0 through 10
|
72
|
+
{
|
73
|
+
.bw#{$i}
|
74
|
+
{
|
75
|
+
border-width: #{$i}px !important;
|
76
|
+
}
|
77
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Shorthand button styling classes
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
.btn
|
6
|
+
{
|
7
|
+
$_type: map-get($type-scale, 1);
|
8
|
+
|
9
|
+
@each $key, $val in $button-scale
|
10
|
+
{
|
11
|
+
&#{$key}
|
12
|
+
{
|
13
|
+
display: block;
|
14
|
+
|
15
|
+
cursor: pointer;
|
16
|
+
font-size: _rem(map-get($_type, size));
|
17
|
+
font-weight: $type-weight-medium;
|
18
|
+
line-height: _rem(map-get($_type, line-height));
|
19
|
+
text-align: center;
|
20
|
+
|
21
|
+
@include transition(all $transition-timing-button $transition-easing-button);
|
22
|
+
}
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
// Inner element to lay out icons etc within buttons
|
27
|
+
.btn-layout
|
28
|
+
{
|
29
|
+
@include display(flex);
|
30
|
+
@include align-items(center);
|
31
|
+
width: 100%;
|
32
|
+
}
|
33
|
+
|
34
|
+
// Tweak padding across breakpoints
|
35
|
+
@include _bp-prefixer(btn)
|
36
|
+
{
|
37
|
+
@each $key, $val in $button-scale
|
38
|
+
{
|
39
|
+
&#{$key}
|
40
|
+
{
|
41
|
+
padding: _rem(map-get($val, padding-y)) _rem(map-get($val, padding-x));
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Border color declaration classes
|
3
|
+
// Pulled from $colors
|
4
|
+
// ==========================================================================
|
5
|
+
|
6
|
+
@each $key, $val in $colors
|
7
|
+
{
|
8
|
+
.c-b#{$key}
|
9
|
+
{
|
10
|
+
border-color: $val !important;
|
11
|
+
}
|
12
|
+
|
13
|
+
@each $_key, $_val in (top: t, right: r, bottom: b, left: l)
|
14
|
+
{
|
15
|
+
.c-b#{$_val}#{$key}
|
16
|
+
{
|
17
|
+
border-#{$_key}-color: $val !important;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
// ---
|
23
|
+
// Border color utility classes
|
24
|
+
// ---
|
25
|
+
|
26
|
+
@each $_key, $_val in (top: t, right: r, bottom: b, left: l)
|
27
|
+
{
|
28
|
+
.c-b#{$_val}-trans
|
29
|
+
{
|
30
|
+
border-#{$_key}-color: transparent !important;
|
31
|
+
}
|
32
|
+
}
|
@@ -0,0 +1,182 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Button color declaration classes
|
3
|
+
// - Button colors for all our global monochrome colors in $colors
|
4
|
+
// - Status button colors for all colors in $colors-status
|
5
|
+
// - Job button colors for all colors in $colors-job-statuses/types
|
6
|
+
// ==========================================================================
|
7
|
+
|
8
|
+
// BUTTON BASE COLORS
|
9
|
+
|
10
|
+
@for $i from 1 through length($colors)
|
11
|
+
{
|
12
|
+
$_iterator: nth($colors, $i);
|
13
|
+
$_key: nth($_iterator, 1);
|
14
|
+
$_val: nth($_iterator, 2);
|
15
|
+
|
16
|
+
// Default text + text hover colors are LIGHTEST
|
17
|
+
$_txt: map-get($colors, 1);
|
18
|
+
$_txt-hover: map-get($colors, 1);
|
19
|
+
|
20
|
+
$_fill: $_val;
|
21
|
+
$_fill-hover: map-get($colors, 1);
|
22
|
+
|
23
|
+
// If color LIGHTER than color #4, set text hover as DARKEST color
|
24
|
+
// i.e. Light fills have dark text
|
25
|
+
@if $i < 4
|
26
|
+
{
|
27
|
+
$_txt: map-get($colors, 10);
|
28
|
+
}
|
29
|
+
|
30
|
+
// If color is LIGHTEST, set text hover to DARKEST color
|
31
|
+
// (text hover otherwise always LIGHTEST color)
|
32
|
+
@if $i == 1
|
33
|
+
{
|
34
|
+
$_txt-hover: map-get($colors, 10);
|
35
|
+
}
|
36
|
+
|
37
|
+
// If color lighter than color #6, set fill hover one step DARKER,
|
38
|
+
// otherwise set color one step LIGHTER
|
39
|
+
@if $i < 6
|
40
|
+
{
|
41
|
+
$_fill-hover: map-get($colors, $i + 1);
|
42
|
+
}
|
43
|
+
@else
|
44
|
+
{
|
45
|
+
$_fill-hover: map-get($colors, $i - 1);
|
46
|
+
}
|
47
|
+
|
48
|
+
// If color is DARKEST, set fill hover two steps DARKER instead of one
|
49
|
+
@if $i == 10
|
50
|
+
{
|
51
|
+
$_fill-hover: map-get($colors, $i - 2);
|
52
|
+
}
|
53
|
+
|
54
|
+
.c-btn#{$_key}
|
55
|
+
{
|
56
|
+
background-color: $_fill;
|
57
|
+
border: $border-width $border-style $_fill;
|
58
|
+
color: $_txt;
|
59
|
+
|
60
|
+
&:not(:disabled):active,
|
61
|
+
&:not(:disabled):focus,
|
62
|
+
&:not(:disabled):hover
|
63
|
+
{
|
64
|
+
background-color: $_fill-hover;
|
65
|
+
border-color: $_fill-hover;
|
66
|
+
color: $_txt-hover;
|
67
|
+
opacity: 1;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
// BUTTON STATUS COLORS
|
73
|
+
|
74
|
+
@each $key, $val in $colors-status
|
75
|
+
{
|
76
|
+
.c-btn-#{$key}
|
77
|
+
{
|
78
|
+
background-color: map-get($val, 3);
|
79
|
+
border: $border-width $border-style map-get($val, 3);
|
80
|
+
color: map-get($colors, 1);
|
81
|
+
|
82
|
+
&:not(:disabled):active,
|
83
|
+
&:not(:disabled):focus,
|
84
|
+
&:not(:disabled):hover
|
85
|
+
{
|
86
|
+
background-color: map-get($val, 4);
|
87
|
+
border-color: map-get($val, 4);
|
88
|
+
color: map-get($colors, 1);
|
89
|
+
opacity: 1;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
// BUTTON JOB COLORS
|
95
|
+
|
96
|
+
// Job Statuses
|
97
|
+
@each $key, $val in $colors-job-statuses
|
98
|
+
{
|
99
|
+
.c-btn-job-#{$key}
|
100
|
+
{
|
101
|
+
background-color: map-get($val, 3);
|
102
|
+
border: $border-width $border-style map-get($val, 3);
|
103
|
+
color: map-get($colors, 1);
|
104
|
+
|
105
|
+
&:not(:disabled):active,
|
106
|
+
&:not(:disabled):focus,
|
107
|
+
&:not(:disabled):hover,
|
108
|
+
{
|
109
|
+
background-color: map-get($val, 4);
|
110
|
+
border-color: map-get($val, 4);
|
111
|
+
color: map-get($colors, 1);
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
// Job Types
|
117
|
+
@each $key, $val in $colors-job-types
|
118
|
+
{
|
119
|
+
.c-btn-job-#{$key}
|
120
|
+
{
|
121
|
+
background-color: map-get($val, 3);
|
122
|
+
border: $border-width $border-style map-get($val, 3);
|
123
|
+
color: map-get($colors, 1);
|
124
|
+
|
125
|
+
&:not(:disabled):active,
|
126
|
+
&:not(:disabled):focus,
|
127
|
+
&:not(:disabled):hover,
|
128
|
+
{
|
129
|
+
background-color: map-get($val, 4);
|
130
|
+
border-color: map-get($val, 4);
|
131
|
+
color: map-get($colors, 1);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
// GLOBAL INACTIVE + DISABLED BUTTONS
|
137
|
+
|
138
|
+
.c-btn-inactive
|
139
|
+
{
|
140
|
+
background-color: map-get($colors, 2);
|
141
|
+
border: $border-width $border-style map-get($colors, 2);
|
142
|
+
color: map-get($colors, 4);
|
143
|
+
|
144
|
+
&:not(:disabled):active,
|
145
|
+
&:not(:disabled):focus,
|
146
|
+
&:not(:disabled):hover
|
147
|
+
{
|
148
|
+
background-color: map-get($colors, 2);
|
149
|
+
border-color: map-get($colors, 2);
|
150
|
+
color: map-get($colors, 10);
|
151
|
+
opacity: 1;
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
155
|
+
.c-btn-disabled,
|
156
|
+
.c-btn-disabled:not(:disabled):active,
|
157
|
+
.c-btn-disabled:not(:disabled):focus,
|
158
|
+
.c-btn-disabled:not(:disabled):hover
|
159
|
+
{
|
160
|
+
background-color: map-get($colors, 2);
|
161
|
+
border: $border-width $border-style map-get($colors, 2);
|
162
|
+
color: map-get($colors, 3);
|
163
|
+
cursor: not-allowed;
|
164
|
+
opacity: 1;
|
165
|
+
}
|
166
|
+
|
167
|
+
// TRANSPARENT BG BUTTONS
|
168
|
+
|
169
|
+
.c-btn-trans
|
170
|
+
{
|
171
|
+
background-color: transparent;
|
172
|
+
border: $border-width $border-style transparent;
|
173
|
+
color: map-get($colors, 10);
|
174
|
+
|
175
|
+
&:active,
|
176
|
+
&:focus,
|
177
|
+
&:hover
|
178
|
+
{
|
179
|
+
background-color: map-get($colors, 2);
|
180
|
+
opacity: 1;
|
181
|
+
}
|
182
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Text, Fill, Shade and Effects color declaration classes
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
// ---
|
6
|
+
// TEXT COLORS
|
7
|
+
// Pulled from $colors
|
8
|
+
// ---
|
9
|
+
|
10
|
+
@each $key, $val in $colors
|
11
|
+
{
|
12
|
+
.c-txt#{$key}
|
13
|
+
{
|
14
|
+
color: $val !important;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// ---
|
19
|
+
// FILL (BG) COLORS
|
20
|
+
// Pulled from $colors
|
21
|
+
// ---
|
22
|
+
|
23
|
+
@each $key, $val in $colors
|
24
|
+
{
|
25
|
+
.c-fill#{$key}
|
26
|
+
{
|
27
|
+
background-color: $val !important;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// ---
|
32
|
+
// UNIQUE SHADE COLOR
|
33
|
+
// ---
|
34
|
+
|
35
|
+
.c-fill-shade
|
36
|
+
{
|
37
|
+
background-color: $color-fill-shade !important;
|
38
|
+
}
|
39
|
+
|
40
|
+
.c-txt-shade
|
41
|
+
{
|
42
|
+
color: $color-fill-shade !important;
|
43
|
+
}
|
44
|
+
|
45
|
+
.c-b-shade
|
46
|
+
{
|
47
|
+
border-color: $color-fill-shade !important;
|
48
|
+
}
|
49
|
+
|
50
|
+
// ---
|
51
|
+
// EFFECTS
|
52
|
+
// ---
|
53
|
+
|
54
|
+
.bw
|
55
|
+
{
|
56
|
+
@include prefixer(filter, grayscale(100%), webkit spec);
|
57
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Job color declaration classes
|
3
|
+
// Pulled from $colors-job-statuses/types
|
4
|
+
// ==========================================================================
|
5
|
+
|
6
|
+
@each $key, $val in $colors-job-statuses
|
7
|
+
{
|
8
|
+
.c-b-job-#{$key}
|
9
|
+
{
|
10
|
+
border-color: map-get($val, 3) !important;
|
11
|
+
}
|
12
|
+
|
13
|
+
.c-fill-job-#{$key}
|
14
|
+
{
|
15
|
+
background-color: map-get($val, 3) !important;
|
16
|
+
}
|
17
|
+
|
18
|
+
.c-txt-job-#{$key}
|
19
|
+
{
|
20
|
+
color: map-get($val, 3) !important;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
// Just dealing with job types (fulltime, freelance, etc)
|
25
|
+
@each $key, $val in $colors-job-types
|
26
|
+
{
|
27
|
+
.c-b-job-#{$key}
|
28
|
+
{
|
29
|
+
border-color: map-get($val, 2) !important;
|
30
|
+
}
|
31
|
+
|
32
|
+
.c-fill-job-#{$key}
|
33
|
+
{
|
34
|
+
background-color: map-get($val, 2) !important;
|
35
|
+
}
|
36
|
+
|
37
|
+
.c-txt-job-#{$key}
|
38
|
+
{
|
39
|
+
color: map-get($val, 2) !important;
|
40
|
+
}
|
41
|
+
|
42
|
+
.c-txt-job-#{$key}-light
|
43
|
+
{
|
44
|
+
color: map-get($val, 1) !important;
|
45
|
+
}
|
46
|
+
}
|