ethosstyles 0.1.14 → 0.1.15
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.gitignore +9 -0
- data/Dockerfile +7 -0
- data/Gemfile +4 -0
- data/Makefile +15 -0
- data/README.md +32 -0
- data/Rakefile +9 -0
- data/app/assets/images/loader.svg +12 -0
- data/app/assets/stylesheets/_ethosstyles.scss +8 -1
- data/app/assets/stylesheets/components/_avatars.scss +59 -0
- data/app/assets/stylesheets/components/_blurbs.scss +14 -40
- data/app/assets/stylesheets/components/_buttons.scss +3 -5
- data/app/assets/stylesheets/components/_checks.scss +5 -7
- data/app/assets/stylesheets/components/_icons.scss +10 -54
- data/app/assets/stylesheets/components/_links.scss +3 -20
- data/app/assets/stylesheets/components/_modal.scss +14 -43
- data/app/assets/stylesheets/components/_pills.scss +0 -46
- data/app/assets/stylesheets/components/_tables.scss +0 -13
- data/app/assets/stylesheets/components/_tooltips.scss +55 -0
- data/app/assets/stylesheets/main.scss +0 -4
- data/app/assets/stylesheets/settings/_variables.scss +0 -25
- data/app/assets/stylesheets/utilities/_animations.scss +0 -22
- data/app/assets/stylesheets/utilities/_mixins.scss +12 -10
- data/app/views/avatars.php +31 -0
- data/app/views/buttons.html +105 -0
- data/app/views/buttons.php +105 -0
- data/app/views/favicon.ico +0 -0
- data/app/views/icons.php +129 -0
- data/app/views/index.php +66 -0
- data/app/views/list-groups.php +318 -0
- data/app/views/modal_partial.php +21 -0
- data/app/views/modals.php +20 -0
- data/app/views/partial_avatars.php +20 -0
- data/app/views/partial_icons.php +16 -0
- data/app/views/partial_tooltips.php +19 -0
- data/app/views/tooltips.php +27 -0
- data/ethosstyles.gemspec +28 -0
- data/lib/ethosstyles.rb +23 -2
- data/lib/ethosstyles/engine.rb +1 -0
- data/lib/ethosstyles/generator.rb +80 -0
- data/lib/ethosstyles/version.rb +1 -1
- metadata +61 -10
- data/app/assets/stylesheets/components/_tooltip.scss +0 -23
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 95e0be2e152179fc55900ae9659e3b43f1172737
|
4
|
+
data.tar.gz: 9be708925dbbda7e350e8612491f75986c49fea7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 731bf7ab2b4f4998a7407f45cb15fa5486ba0fa8410b0f5067f552b11071f0b9ccd50c655c267eb4df07b972a69b5d57d44d783a2fabd61cd623d9b4393b7325
|
7
|
+
data.tar.gz: d3f897e5b5eefc89d324605e92fe0d9ce9f35d3d835e07417b7ba9716a8103b8c2915d4744f59b5b395be85306fcb327cbaa13f68347292a12656431f1c5dfad
|
data/.gitignore
ADDED
data/Dockerfile
ADDED
data/Gemfile
ADDED
data/Makefile
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
export DOCKER_IP = $(shell which docker-machine > /dev/null 2>&1 && docker-machine ip $(DOCKER_MACHINE_NAME))
|
2
|
+
|
3
|
+
down:
|
4
|
+
docker stop stardust || true
|
5
|
+
docker rm -v $$(docker ps -a -q -f status=exited -f status=created) || true
|
6
|
+
up: down
|
7
|
+
docker run --name stardust -p 9090:8080 -d \
|
8
|
+
-v $$(pwd)/app:/app/public:ro \
|
9
|
+
stardust
|
10
|
+
build:
|
11
|
+
docker build -t stardust .
|
12
|
+
sass --watch app/assets/stylesheets:app/assets/compiled &
|
13
|
+
open:
|
14
|
+
open "http://$(DOCKER_IP):9090/views/"
|
15
|
+
dev: build up open
|
data/README.md
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
# Ethos Styles
|
2
|
+
|
3
|
+
These are Ethos's main styles.
|
4
|
+
|
5
|
+
Note: These are foundational styles, and should be edited sparingly. You can still add styles to Moonbeam and OrCA in the `stylesheets` directories.
|
6
|
+
|
7
|
+
## To edit gem
|
8
|
+
To develop this gem locally:
|
9
|
+
|
10
|
+
1. Clone this repo to your computer.
|
11
|
+
|
12
|
+
2. Replace gem name with gem file path in Gemfile:
|
13
|
+
|
14
|
+
# gem "ethosstyles"
|
15
|
+
gem "ethosstyles", :path => "/usr/ethosstyles"
|
16
|
+
|
17
|
+
3. Add directory to `docker-compose.yml` under volumes within web:
|
18
|
+
|
19
|
+
web:
|
20
|
+
...
|
21
|
+
volumes:
|
22
|
+
...
|
23
|
+
- ../ethosstyles:/usr/ethosstyles
|
24
|
+
|
25
|
+
4. You may need to rebuild moonbeam.
|
26
|
+
|
27
|
+
flotilla rebuild moonbeam
|
28
|
+
|
29
|
+
|
30
|
+
## Process
|
31
|
+
|
32
|
+
**Review any changes on Moonbeam and OrCA before pushing to [prod](https://rubygems.org/gems/ethosstyles).**
|
data/Rakefile
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
2
|
+
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
3
|
+
<path fill="#0057ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
4
|
+
<animateTransform attributeType="xml"
|
5
|
+
attributeName="transform"
|
6
|
+
type="rotate"
|
7
|
+
from="0 25 25"
|
8
|
+
to="360 25 25"
|
9
|
+
dur="0.8s"
|
10
|
+
repeatCount="indefinite"/>
|
11
|
+
</path>
|
12
|
+
</svg>
|
@@ -1,3 +1,9 @@
|
|
1
|
+
@import 'settings/test';
|
2
|
+
|
3
|
+
@import 'lib/fontawesome/scss/fa-regular.scss';
|
4
|
+
@import 'lib/fontawesome/scss/fa-solid.scss';
|
5
|
+
@import 'lib/fontawesome/scss/fa-brands.scss';
|
6
|
+
|
1
7
|
@import 'settings/variables';
|
2
8
|
|
3
9
|
@import 'utilities/animations';
|
@@ -5,6 +11,7 @@
|
|
5
11
|
@import 'utilities/utilities';
|
6
12
|
@import 'utilities/shame';
|
7
13
|
|
14
|
+
@import 'components/avatars';
|
8
15
|
@import 'components/base';
|
9
16
|
@import 'components/blurbs';
|
10
17
|
@import 'components/buttons';
|
@@ -25,7 +32,7 @@
|
|
25
32
|
@import 'components/sliders';
|
26
33
|
@import 'components/tables';
|
27
34
|
@import 'components/timestamp';
|
28
|
-
@import 'components/
|
35
|
+
@import 'components/tooltips';
|
29
36
|
@import 'components/well';
|
30
37
|
|
31
38
|
@import 'pages/styleguide';
|
@@ -0,0 +1,59 @@
|
|
1
|
+
//
|
2
|
+
// AVATARS
|
3
|
+
//
|
4
|
+
|
5
|
+
.rf-avatar {
|
6
|
+
position: relative;
|
7
|
+
display: inline-block;
|
8
|
+
margin-right: 4px;
|
9
|
+
margin-bottom: 4px;
|
10
|
+
}
|
11
|
+
|
12
|
+
.rf-avatar--med {
|
13
|
+
width: 50px;
|
14
|
+
height: 50px;
|
15
|
+
}
|
16
|
+
|
17
|
+
.rf-avatar--small {
|
18
|
+
width: 32px;
|
19
|
+
height: 32px;
|
20
|
+
}
|
21
|
+
|
22
|
+
.rf-avatar__img {
|
23
|
+
width: 100%;
|
24
|
+
height: 100%;
|
25
|
+
border-radius: 2px;
|
26
|
+
}
|
27
|
+
|
28
|
+
.rf-avatar__nametag {
|
29
|
+
width: 100%;
|
30
|
+
height: 15px;
|
31
|
+
background: $black;
|
32
|
+
opacity: .8;
|
33
|
+
border-radius: 0 0 2px 2px;
|
34
|
+
position: absolute;
|
35
|
+
font-size: 10px;
|
36
|
+
color: $white;
|
37
|
+
bottom: 0;
|
38
|
+
line-height: 15px;
|
39
|
+
text-overflow: ellipsis;
|
40
|
+
white-space: nowrap;
|
41
|
+
overflow: hidden;
|
42
|
+
text-indent: 2px;
|
43
|
+
}
|
44
|
+
|
45
|
+
.rf-avatar__overlay {
|
46
|
+
width: 100%;
|
47
|
+
height: 100%;
|
48
|
+
border-radius: 2px;
|
49
|
+
position: absolute;
|
50
|
+
opacity: .7;
|
51
|
+
}
|
52
|
+
|
53
|
+
.rf-avatar__overlay--success {
|
54
|
+
background: $green;
|
55
|
+
}
|
56
|
+
|
57
|
+
.rf-avatar__overlay--failure {
|
58
|
+
background: $red;
|
59
|
+
}
|
@@ -3,42 +3,27 @@
|
|
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
|
-
|
22
6
|
.rf-blurb {
|
23
7
|
@extend %p;
|
24
8
|
|
25
9
|
background-color: $prewhite;
|
26
|
-
border-radius:
|
10
|
+
border-radius: $border-radius;
|
27
11
|
padding: $list-padding;
|
28
12
|
position: relative;
|
29
13
|
width: 100%;
|
30
14
|
|
31
|
-
p:last-child {
|
32
|
-
margin-bottom: 0;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
.rf-blurb--info {
|
37
|
-
border-left: 4px solid $blue-bright;
|
38
|
-
|
39
15
|
&:before {
|
40
|
-
|
41
|
-
|
16
|
+
background-color: $white;
|
17
|
+
border-radius: 10px;
|
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;
|
42
27
|
}
|
43
28
|
}
|
44
29
|
|
@@ -46,18 +31,7 @@
|
|
46
31
|
border-left: 4px solid $red;
|
47
32
|
|
48
33
|
&:before {
|
49
|
-
|
50
|
-
|
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;
|
34
|
+
color: $red;
|
35
|
+
content: "\e101";;
|
62
36
|
}
|
63
37
|
}
|
@@ -95,9 +95,8 @@ $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-f;
|
99
99
|
font-size: .8em;
|
100
|
-
font-weight: 900;
|
101
100
|
line-height: 1em;
|
102
101
|
margin-left: 7px;
|
103
102
|
}
|
@@ -119,11 +118,10 @@ $btn-padding-x: $btn-padding-y * 1.8;
|
|
119
118
|
// Warning icon
|
120
119
|
|
121
120
|
&:before {
|
122
|
-
|
123
|
-
@extend %icon--warning;
|
124
|
-
|
125
121
|
color: $white;
|
122
|
+
content: "\f071";
|
126
123
|
display: inline-block;
|
124
|
+
font-family: $font-icon-f;
|
127
125
|
font-size: 1em;
|
128
126
|
line-height: .6em;
|
129
127
|
margin-right: 4px;
|
@@ -36,7 +36,6 @@
|
|
36
36
|
.rf-check__label {
|
37
37
|
display: inline-block;
|
38
38
|
font-size: 14px;
|
39
|
-
font-weight: 400;
|
40
39
|
line-height: 14px;
|
41
40
|
text-indent: -22px;
|
42
41
|
}
|
@@ -46,16 +45,15 @@
|
|
46
45
|
border-radius: $border-radius;
|
47
46
|
color: $blue-bright;
|
48
47
|
display: inline-block;
|
49
|
-
font-family:
|
50
|
-
font-size:
|
51
|
-
|
52
|
-
height:
|
53
|
-
line-height: 1.6em;
|
48
|
+
font-family: FontAwesome;
|
49
|
+
font-size: 9px;
|
50
|
+
height: 14px;
|
51
|
+
line-height: 1.4em;
|
54
52
|
margin-right: 8px;
|
55
53
|
margin-top: -2px;
|
56
54
|
text-align: center;
|
57
55
|
text-indent: 0;
|
58
|
-
width:
|
56
|
+
width: 14px;
|
59
57
|
vertical-align: middle;
|
60
58
|
}
|
61
59
|
|
@@ -9,7 +9,7 @@
|
|
9
9
|
font-family: $font-icon-f5;
|
10
10
|
font-size: 1em;
|
11
11
|
font-style: normal;
|
12
|
-
font-weight:
|
12
|
+
font-weight: normal;
|
13
13
|
line-height: 1em;
|
14
14
|
-webkit-font-smoothing: antialiased;
|
15
15
|
-moz-osx-font-smoothing: grayscale;
|
@@ -48,6 +48,11 @@
|
|
48
48
|
}
|
49
49
|
}
|
50
50
|
|
51
|
+
.rf-icon--caret--right:after {
|
52
|
+
content: "\f0da";
|
53
|
+
font-family: $font-icon-f5;
|
54
|
+
}
|
55
|
+
|
51
56
|
.rf-icon--refresh:after {
|
52
57
|
content: "\f021";
|
53
58
|
font-family: $font-icon-f5;
|
@@ -115,41 +120,6 @@
|
|
115
120
|
font-family: $font-icon-f5-b;
|
116
121
|
}
|
117
122
|
|
118
|
-
.rf-icon--caret--right:after {
|
119
|
-
content: "\f0da";
|
120
|
-
font-family: $font-icon-f5;
|
121
|
-
}
|
122
|
-
|
123
|
-
.rf-icon--caret--left:after {
|
124
|
-
content: "\f0d9";
|
125
|
-
font-family: $font-icon-f5;
|
126
|
-
}
|
127
|
-
|
128
|
-
.rf-icon--caret--up:after {
|
129
|
-
content: "\f0d8";
|
130
|
-
font-family: $font-icon-f5;
|
131
|
-
}
|
132
|
-
|
133
|
-
.rf-icon--caret--down:after {
|
134
|
-
content: "\f0d7";
|
135
|
-
font-family: $font-icon-f5;
|
136
|
-
}
|
137
|
-
|
138
|
-
.rf-icon--external:after {
|
139
|
-
content: "\f360";
|
140
|
-
font-family: $font-icon-f5;
|
141
|
-
}
|
142
|
-
|
143
|
-
.rf-icon--minus:after {
|
144
|
-
content: "\f068";
|
145
|
-
font-family: $font-icon-f5;
|
146
|
-
}
|
147
|
-
|
148
|
-
.rf-icon--plus:after {
|
149
|
-
content: "\f067";
|
150
|
-
font-family: $font-icon-f5;
|
151
|
-
}
|
152
|
-
|
153
123
|
|
154
124
|
//
|
155
125
|
// MODAL
|
@@ -240,41 +210,27 @@
|
|
240
210
|
//
|
241
211
|
|
242
212
|
.rf-icon--loading {
|
243
|
-
-
|
244
|
-
-
|
245
|
-
-webkit-transform: translateZ(0);
|
246
|
-
animation: rf-spin 1.1s infinite linear;
|
247
|
-
border-radius: 50%;
|
248
|
-
border-bottom: 4px solid rgba(0,87,255, 0.2);
|
249
|
-
border-left: 4px solid $blue-bright;
|
250
|
-
border-right: 4px solid rgba(0,87,255, 0.2);
|
251
|
-
border-top: 4px solid rgba(0,87,255, 0.2);
|
213
|
+
background-image: url(../images/loader.svg);
|
214
|
+
background-size: 100% 100%;
|
252
215
|
height: 30px;
|
253
|
-
position: relative;
|
254
|
-
text-indent: -9999em;
|
255
|
-
transform: translateZ(0);
|
256
216
|
width: 30px;
|
257
217
|
|
258
218
|
&.rf-icon--xlarge {
|
259
|
-
|
260
|
-
|
261
|
-
width: 60px;
|
219
|
+
height: 50px;
|
220
|
+
width: 50px;
|
262
221
|
}
|
263
222
|
|
264
223
|
&.rf-icon--large {
|
265
|
-
border-width: 6px;
|
266
224
|
height: 38px;
|
267
225
|
width: 38px;
|
268
226
|
}
|
269
227
|
|
270
228
|
&.rf-icon--small {
|
271
|
-
border-width: 4px;
|
272
229
|
height: 20px;
|
273
230
|
width: 20px;
|
274
231
|
}
|
275
232
|
|
276
233
|
&.rf-icon--xsmall {
|
277
|
-
border-width: 4px;
|
278
234
|
height: 14px;
|
279
235
|
width: 14px;
|
280
236
|
}
|
@@ -6,16 +6,12 @@
|
|
6
6
|
color: $slate;
|
7
7
|
cursor: pointer;
|
8
8
|
font-size: 12px;
|
9
|
-
font-weight: 400;
|
10
9
|
text-decoration: underline;
|
11
|
-
text-indent: 0;
|
12
|
-
white-space: nowrap;
|
13
10
|
|
14
11
|
&:after {
|
15
12
|
display: inline-block;
|
16
|
-
font-family:
|
17
|
-
font-size:
|
18
|
-
font-weight: 900;
|
13
|
+
font-family: 'Glyphicons Halflings';
|
14
|
+
font-size: 9px;
|
19
15
|
margin-left: 4px;
|
20
16
|
}
|
21
17
|
|
@@ -29,8 +25,7 @@
|
|
29
25
|
}
|
30
26
|
|
31
27
|
.rf-infolink--external:after {
|
32
|
-
content: '\
|
33
|
-
font-size: 10px;
|
28
|
+
content: '\e164';
|
34
29
|
}
|
35
30
|
|
36
31
|
.rf-infolink--external:before {
|
@@ -52,15 +47,3 @@
|
|
52
47
|
.rf-infolink--trigger[aria-expanded='true']:after {
|
53
48
|
content: '\2212';
|
54
49
|
}
|
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
|
-
}
|