ethosstyles 0.1.13 → 0.1.14
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/_ethosstyles.scss +1 -0
- data/app/assets/stylesheets/components/_blurbs.scss +40 -14
- data/app/assets/stylesheets/components/_buttons.scss +5 -3
- data/app/assets/stylesheets/components/_checks.scss +7 -5
- data/app/assets/stylesheets/components/_links.scss +20 -3
- data/app/assets/stylesheets/components/_pills.scss +46 -0
- data/app/assets/stylesheets/components/_tooltip.scss +23 -0
- data/app/assets/stylesheets/settings/_variables.scss +23 -0
- data/app/assets/stylesheets/utilities/_mixins.scss +10 -12
- data/lib/ethosstyles/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0aee2aeac24c749ccddb800dafe531d3ad62d6e2471b8b3cf738414de408a365
|
|
4
|
+
data.tar.gz: eb53a8b1ebe1d59ffc580c05eb99b191159810318e705ff6d03d03171e492b59
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2bcd45bcfbc424ce84ac60f3ad4e0f761de42d149a2162bbe44d59ee5cbbcc7d2a5874c97f36ac7987d4cf8c7456ade2ac024dba00929536aabcde441bbfa37e
|
|
7
|
+
data.tar.gz: 2bb871e668eae7f4f9b806bc85b3e6e03afb6805c0fc8548b2e43655529dd76b72231b0bc9ceb32ca47f4bb18e7bef33c20e60319da67c1bda81f56c000c9160
|
|
@@ -3,27 +3,42 @@
|
|
|
3
3
|
// todo: add success and info styles
|
|
4
4
|
//
|
|
5
5
|
|
|
6
|
+
|
|
7
|
+
%blurb-icon {
|
|
8
|
+
background-color: $white;
|
|
9
|
+
border-radius: 10px;
|
|
10
|
+
display: block;
|
|
11
|
+
font-family: $font-icon-f5;
|
|
12
|
+
font-size: 18px;
|
|
13
|
+
font-weight: 900;
|
|
14
|
+
height: 15px;
|
|
15
|
+
left: -11px;
|
|
16
|
+
line-height: 17px;
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 15px;
|
|
19
|
+
width: 16px;
|
|
20
|
+
}
|
|
21
|
+
|
|
6
22
|
.rf-blurb {
|
|
7
23
|
@extend %p;
|
|
8
24
|
|
|
9
25
|
background-color: $prewhite;
|
|
10
|
-
border-radius:
|
|
26
|
+
border-radius: 0;
|
|
11
27
|
padding: $list-padding;
|
|
12
28
|
position: relative;
|
|
13
29
|
width: 100%;
|
|
14
30
|
|
|
31
|
+
p:last-child {
|
|
32
|
+
margin-bottom: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.rf-blurb--info {
|
|
37
|
+
border-left: 4px solid $blue-bright;
|
|
38
|
+
|
|
15
39
|
&:before {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
content: '';
|
|
19
|
-
display: block;
|
|
20
|
-
font-family: 'Glyphicons Halflings';
|
|
21
|
-
font-size: 18px;
|
|
22
|
-
height: 18px;
|
|
23
|
-
left: -11px;
|
|
24
|
-
position: absolute;
|
|
25
|
-
top: 16px;
|
|
26
|
-
width: 18px;
|
|
40
|
+
@extend %blurb-icon;
|
|
41
|
+
@extend %icon--info;
|
|
27
42
|
}
|
|
28
43
|
}
|
|
29
44
|
|
|
@@ -31,7 +46,18 @@
|
|
|
31
46
|
border-left: 4px solid $red;
|
|
32
47
|
|
|
33
48
|
&:before {
|
|
34
|
-
|
|
35
|
-
|
|
49
|
+
@extend %blurb-icon;
|
|
50
|
+
@extend %icon--error;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rf-blurb--warning {
|
|
55
|
+
border-left: 4px solid $gold;
|
|
56
|
+
|
|
57
|
+
&:before {
|
|
58
|
+
@extend %blurb-icon;
|
|
59
|
+
@extend %icon--warning;
|
|
60
|
+
|
|
61
|
+
left: -12px;
|
|
36
62
|
}
|
|
37
63
|
}
|
|
@@ -95,8 +95,9 @@ $btn-padding-x: $btn-padding-y * 1.8;
|
|
|
95
95
|
&:after {
|
|
96
96
|
content: "\f0d7";
|
|
97
97
|
display: inline-block;
|
|
98
|
-
font-family: $font-icon-
|
|
98
|
+
font-family: $font-icon-f5;
|
|
99
99
|
font-size: .8em;
|
|
100
|
+
font-weight: 900;
|
|
100
101
|
line-height: 1em;
|
|
101
102
|
margin-left: 7px;
|
|
102
103
|
}
|
|
@@ -118,10 +119,11 @@ $btn-padding-x: $btn-padding-y * 1.8;
|
|
|
118
119
|
// Warning icon
|
|
119
120
|
|
|
120
121
|
&:before {
|
|
122
|
+
|
|
123
|
+
@extend %icon--warning;
|
|
124
|
+
|
|
121
125
|
color: $white;
|
|
122
|
-
content: "\f071";
|
|
123
126
|
display: inline-block;
|
|
124
|
-
font-family: $font-icon-f;
|
|
125
127
|
font-size: 1em;
|
|
126
128
|
line-height: .6em;
|
|
127
129
|
margin-right: 4px;
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
.rf-check__label {
|
|
37
37
|
display: inline-block;
|
|
38
38
|
font-size: 14px;
|
|
39
|
+
font-weight: 400;
|
|
39
40
|
line-height: 14px;
|
|
40
41
|
text-indent: -22px;
|
|
41
42
|
}
|
|
@@ -45,15 +46,16 @@
|
|
|
45
46
|
border-radius: $border-radius;
|
|
46
47
|
color: $blue-bright;
|
|
47
48
|
display: inline-block;
|
|
48
|
-
font-family:
|
|
49
|
-
font-size:
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
font-family: $font-icon-f5;
|
|
50
|
+
font-size: 11px;
|
|
51
|
+
font-weight: 900;
|
|
52
|
+
height: 18px;
|
|
53
|
+
line-height: 1.6em;
|
|
52
54
|
margin-right: 8px;
|
|
53
55
|
margin-top: -2px;
|
|
54
56
|
text-align: center;
|
|
55
57
|
text-indent: 0;
|
|
56
|
-
width:
|
|
58
|
+
width: 18px;
|
|
57
59
|
vertical-align: middle;
|
|
58
60
|
}
|
|
59
61
|
|
|
@@ -6,12 +6,16 @@
|
|
|
6
6
|
color: $slate;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
font-size: 12px;
|
|
9
|
+
font-weight: 400;
|
|
9
10
|
text-decoration: underline;
|
|
11
|
+
text-indent: 0;
|
|
12
|
+
white-space: nowrap;
|
|
10
13
|
|
|
11
14
|
&:after {
|
|
12
15
|
display: inline-block;
|
|
13
|
-
font-family:
|
|
14
|
-
font-size:
|
|
16
|
+
font-family: $font-icon-f5;
|
|
17
|
+
font-size: 13px;
|
|
18
|
+
font-weight: 900;
|
|
15
19
|
margin-left: 4px;
|
|
16
20
|
}
|
|
17
21
|
|
|
@@ -25,7 +29,8 @@
|
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
.rf-infolink--external:after {
|
|
28
|
-
content: '\
|
|
32
|
+
content: '\f35d';
|
|
33
|
+
font-size: 10px;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
.rf-infolink--external:before {
|
|
@@ -47,3 +52,15 @@
|
|
|
47
52
|
.rf-infolink--trigger[aria-expanded='true']:after {
|
|
48
53
|
content: '\2212';
|
|
49
54
|
}
|
|
55
|
+
|
|
56
|
+
.rf-infolink--refresh:after {
|
|
57
|
+
content: "\f2f1";
|
|
58
|
+
font-family: $font-icon-f5;
|
|
59
|
+
font-size: 10px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.rf-infolink--noprefix {
|
|
63
|
+
&:before {
|
|
64
|
+
content: '' !important;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
// Pills
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
%rf-pill--neutral {
|
|
6
|
+
border-color: $blue-bright;
|
|
7
|
+
color: $blue-bright;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
%rf-pill--minor {
|
|
11
|
+
border-color: $stormy;
|
|
12
|
+
color: $stormy;
|
|
13
|
+
}
|
|
14
|
+
|
|
5
15
|
.rf-pill {
|
|
6
16
|
border-radius: 20px;
|
|
7
17
|
border-style: solid;
|
|
@@ -35,7 +45,43 @@
|
|
|
35
45
|
color: $green;
|
|
36
46
|
}
|
|
37
47
|
|
|
48
|
+
.rf-pill--warning {
|
|
49
|
+
border-color: $gold;
|
|
50
|
+
color: $gold;
|
|
51
|
+
}
|
|
52
|
+
|
|
38
53
|
.rf-pill--minor {
|
|
39
54
|
border-color: $stormy;
|
|
40
55
|
color: $stormy;
|
|
41
56
|
}
|
|
57
|
+
|
|
58
|
+
.rf-pill--met,
|
|
59
|
+
%rf-pill--met {
|
|
60
|
+
@extend %rf-pill--neutral;
|
|
61
|
+
|
|
62
|
+
&:before {
|
|
63
|
+
content: "\e013";
|
|
64
|
+
font-family: $font-icon-g;
|
|
65
|
+
font-size: 8px;
|
|
66
|
+
margin-right: 2px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.rf-pill--unmet,
|
|
71
|
+
%rf-pill--unmet {
|
|
72
|
+
@extend %rf-pill--minor;
|
|
73
|
+
|
|
74
|
+
&:before {
|
|
75
|
+
content: "\e014";
|
|
76
|
+
font-family: $font-icon-g;
|
|
77
|
+
font-size: 8px;
|
|
78
|
+
margin-right: 2px;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Solid pills
|
|
83
|
+
|
|
84
|
+
.rf-pill--solid {
|
|
85
|
+
background-color: $prewhite;
|
|
86
|
+
border-color: $prewhite;
|
|
87
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//
|
|
2
|
+
// TOOLTIP
|
|
3
|
+
//
|
|
4
|
+
// Format:
|
|
5
|
+
// <span class="rf-tooltip__trigger"
|
|
6
|
+
// data-toggle="tooltip"
|
|
7
|
+
// data-placement="top"
|
|
8
|
+
// title="This is the content of the tooltip."></span>
|
|
9
|
+
//
|
|
10
|
+
|
|
11
|
+
.tooltip {
|
|
12
|
+
white-space: normal;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.rf-tooltip__trigger {
|
|
16
|
+
color: $blue-bright;
|
|
17
|
+
font-family: $font-icon-g;
|
|
18
|
+
font-size: 12px;
|
|
19
|
+
|
|
20
|
+
&:before {
|
|
21
|
+
content: "\e085";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -57,3 +57,26 @@ $font-icon-f5: "Font Awesome 5 Free"; // solid
|
|
|
57
57
|
$font-icon-f5-r: "Font Awesome 5 Free Regular"; // regular
|
|
58
58
|
$font-icon-f5-b: 'Font Awesome 5 Brands'; // brands
|
|
59
59
|
$font-icon-g: "Glyphicons Halflings";
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
// Icons
|
|
63
|
+
%icon--info {
|
|
64
|
+
color: $blue-bright;
|
|
65
|
+
content: "\f05a";
|
|
66
|
+
font-family: $font-icon-f5;
|
|
67
|
+
font-weight: 900;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
%icon--error {
|
|
71
|
+
color: $red;
|
|
72
|
+
content: "\f06a";
|
|
73
|
+
font-family: $font-icon-f5;
|
|
74
|
+
font-weight: 900;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
%icon--warning {
|
|
78
|
+
color: $gold;
|
|
79
|
+
content: "\f071";
|
|
80
|
+
font-family: $font-icon-f5;
|
|
81
|
+
font-weight: 900;
|
|
82
|
+
}
|
|
@@ -91,15 +91,11 @@
|
|
|
91
91
|
@mixin trigger_arrow ( $display: block, $arrow-pos: $list-padding ) {
|
|
92
92
|
&[aria-expanded='false']:after,
|
|
93
93
|
&[aria-expanded='true']:after {
|
|
94
|
-
|
|
95
|
-
font-family: 'octicons';
|
|
94
|
+
font-family: $font-icon-f5;
|
|
96
95
|
font-size: 14px;
|
|
96
|
+
font-weight: 900;
|
|
97
97
|
vertical-align: middle;
|
|
98
98
|
|
|
99
|
-
@include hocus() {
|
|
100
|
-
color: inherit;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
99
|
@if ($display==block) {
|
|
104
100
|
display: block;
|
|
105
101
|
position: absolute;
|
|
@@ -116,14 +112,15 @@
|
|
|
116
112
|
}
|
|
117
113
|
|
|
118
114
|
&[aria-expanded='false']:after {
|
|
119
|
-
content: '\
|
|
115
|
+
content: '\f0da'; // triangle right
|
|
120
116
|
}
|
|
121
117
|
|
|
122
118
|
&[aria-expanded='true']:after {
|
|
123
|
-
content: '\
|
|
119
|
+
content: '\f0d7'; // triangle down
|
|
124
120
|
}
|
|
125
121
|
}
|
|
126
122
|
|
|
123
|
+
|
|
127
124
|
//
|
|
128
125
|
// INPUT HANDLE
|
|
129
126
|
// Used for toggles and ranges
|
|
@@ -157,8 +154,9 @@
|
|
|
157
154
|
&[aria-expanded='false']:after,
|
|
158
155
|
&[aria-expanded='true']:after {
|
|
159
156
|
color: inherit;
|
|
160
|
-
font-family:
|
|
157
|
+
font-family: $font-icon-f5;
|
|
161
158
|
font-size: 14px;
|
|
159
|
+
font-weight: 900;
|
|
162
160
|
vertical-align: middle;
|
|
163
161
|
height: $arrow-height;
|
|
164
162
|
width: $arrow-width;
|
|
@@ -172,11 +170,11 @@
|
|
|
172
170
|
}
|
|
173
171
|
}
|
|
174
172
|
|
|
175
|
-
|
|
176
|
-
content: '\
|
|
173
|
+
&[aria-expanded='false']:after {
|
|
174
|
+
content: '\f0da'; // triangle right
|
|
177
175
|
}
|
|
178
176
|
|
|
179
177
|
&[aria-expanded='true']:after {
|
|
180
|
-
content: '\
|
|
178
|
+
content: '\f0d7'; // triangle down
|
|
181
179
|
}
|
|
182
180
|
}
|
data/lib/ethosstyles/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ethosstyles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.14
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ethos
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-06-
|
|
11
|
+
date: 2018-06-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -66,6 +66,7 @@ files:
|
|
|
66
66
|
- app/assets/stylesheets/components/_sliders.scss
|
|
67
67
|
- app/assets/stylesheets/components/_tables.scss
|
|
68
68
|
- app/assets/stylesheets/components/_timestamp.scss
|
|
69
|
+
- app/assets/stylesheets/components/_tooltip.scss
|
|
69
70
|
- app/assets/stylesheets/components/_well.scss
|
|
70
71
|
- app/assets/stylesheets/lib/_normalize.scss
|
|
71
72
|
- app/assets/stylesheets/lib/fontawesome/scss/_variables.scss
|