ethosstyles 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/_ethosstyles.scss +7 -0
  4. data/app/assets/stylesheets/components/_base.scss +130 -0
  5. data/app/assets/stylesheets/components/_blurbs.scss +37 -0
  6. data/app/assets/stylesheets/components/{buttons.scss → _buttons.scss} +44 -23
  7. data/app/assets/stylesheets/components/{checks.scss → _checks.scss} +14 -3
  8. data/app/assets/stylesheets/components/_forms.scss +73 -0
  9. data/app/assets/stylesheets/components/{grid.scss → _grid.scss} +41 -1
  10. data/app/assets/stylesheets/components/_icons.scss +53 -0
  11. data/app/assets/stylesheets/components/{links.scss → _links.scss} +4 -3
  12. data/app/assets/stylesheets/components/{lists.scss → _lists.scss} +87 -1
  13. data/app/assets/stylesheets/components/{logs.scss → _logs.scss} +0 -0
  14. data/app/assets/stylesheets/components/_notices.scss +15 -0
  15. data/app/assets/stylesheets/components/_panels.scss +10 -0
  16. data/app/assets/stylesheets/components/{pills.scss → _pills.scss} +0 -0
  17. data/app/assets/stylesheets/components/{progress.scss → _progress.scss} +0 -0
  18. data/app/assets/stylesheets/components/_sections.scss +21 -0
  19. data/app/assets/stylesheets/components/_sliders.scss +59 -0
  20. data/app/assets/stylesheets/components/_tables.scss +104 -0
  21. data/app/assets/stylesheets/components/{timestamp.scss → _timestamp.scss} +0 -0
  22. data/app/assets/stylesheets/components/{well.scss → _well.scss} +9 -0
  23. data/app/assets/stylesheets/settings/_variables.scss +7 -0
  24. data/app/assets/stylesheets/utilities/_animations.scss +13 -0
  25. data/app/assets/stylesheets/utilities/_mixins.scss +196 -0
  26. data/app/assets/stylesheets/utilities/_shame.scss +18 -0
  27. data/app/assets/stylesheets/utilities/_utilities.scss +166 -0
  28. data/lib/ethosstyles/version.rb +1 -1
  29. metadata +25 -18
  30. data/app/assets/stylesheets/components/base.scss +0 -37
  31. data/app/assets/stylesheets/components/forms.scss +0 -4
  32. data/app/assets/stylesheets/components/tables.scss +0 -66
  33. data/app/assets/stylesheets/utilities/mixins.scss +0 -75
  34. data/app/assets/stylesheets/utilities/shame.scss +0 -9
  35. data/app/assets/stylesheets/utilities/utilities.scss +0 -74
@@ -0,0 +1,21 @@
1
+ //
2
+ // SECTIONS
3
+ //
4
+
5
+ .rf-section {
6
+ padding-bottom: 20px;
7
+ padding-top: 20px;
8
+
9
+ &:first-of-type {
10
+ padding-top: 0;
11
+ }
12
+ }
13
+
14
+ .rf-section__headline {
15
+ margin-bottom: 10px;
16
+ }
17
+
18
+ .rf-section__headline + .rf-section__description {
19
+ margin-top: -4px;
20
+ margin-bottom: 10px;
21
+ }
@@ -0,0 +1,59 @@
1
+ //
2
+ // SLIDER (not BEM because of jqueryUI)
3
+ //
4
+
5
+ .ui-slider {
6
+ border: $input-border-default;
7
+ border-radius: 20px;
8
+ width: 100%;
9
+ }
10
+
11
+ .ui-slider .ui-widget-header {
12
+ background: $blue-bright;
13
+ }
14
+
15
+ .ui-slider .ui-slider-handle {
16
+ @include input_handle($transition: false);
17
+ }
18
+
19
+ // Range
20
+ $range-number-width: 24px;
21
+
22
+ .rf-range__container {
23
+ // padding to make room for max and min display values
24
+ padding-left: 22px;
25
+ padding-right: 22px;
26
+ }
27
+
28
+ .rf-range {
29
+ position: relative;
30
+ }
31
+
32
+ .rf-range__val {
33
+ color: $slate;
34
+ font-size: 10px;
35
+ font-weight: 300;
36
+ height: 14px;
37
+ position: absolute;
38
+ text-align: center;
39
+ top: -4px;
40
+ width: $range-number-width;
41
+ }
42
+
43
+ .rf-range__val--current {
44
+ font-weight: 800;
45
+ top: -16px;
46
+ width: 100%;
47
+ }
48
+
49
+ .rf-range__val--min {
50
+ left: -$range-number-width;
51
+ padding-right: 4px;
52
+ text-align: right;
53
+ }
54
+
55
+ .rf-range__val--max {
56
+ padding-left: 4px;
57
+ right: -$range-number-width;
58
+ text-align: left;
59
+ }
@@ -0,0 +1,104 @@
1
+ //
2
+ // Tables
3
+ //
4
+
5
+ //
6
+ // Structure
7
+ //
8
+ //<table class="rf-table">
9
+ // <tr class="rf-table__row rf-table__row--header">
10
+ // <th class="rf-table__th">Product</th>
11
+ // <th class="rf-table__th">Name</th>
12
+ // </tr>
13
+ // <tbody class="rf-table__body">
14
+ // <tr class="rf-table__row">
15
+ // <td class="rf-table__td"> Cell #1</td>
16
+ // <td class="rf-table__td"> Cell #2</td>
17
+ // </tr>
18
+ // </tbody>
19
+ //</table>
20
+ //
21
+ // Best Practices
22
+ //
23
+ // Set column widths in the header
24
+ //
25
+
26
+ .rf-table {
27
+ width: 100%;
28
+ border-collapse: separate; // Necessary to round corners
29
+ table-layout: fixed;
30
+ }
31
+
32
+ .rf-table__th,
33
+ .rf-table__td {
34
+ padding-left: $list-padding/2;
35
+ padding-right: $list-padding/2;
36
+
37
+ &:last-of-type {
38
+ padding-right: $list-padding;
39
+ }
40
+
41
+ &:first-of-type {
42
+ padding-left: $list-padding;
43
+ }
44
+ }
45
+
46
+ .rf-table__row--header {
47
+ vertical-align: bottom;
48
+ }
49
+
50
+ .rf-table__col--centered {
51
+ text-align: center;
52
+
53
+ .form-control {
54
+ text-align: center;
55
+ }
56
+ }
57
+
58
+ .rf-table__col--right {
59
+ text-align: right;
60
+ }
61
+
62
+
63
+ // Padding and borders for table cells
64
+
65
+ .rf-table__td,
66
+ .rf-table__th {
67
+ @include word-wrap;
68
+ }
69
+
70
+ .rf-table__td {
71
+ border-bottom: $border-default;
72
+ font-size: 13px;
73
+ padding: $list-padding;
74
+ vertical-align: middle;
75
+ }
76
+
77
+ .rf-table__th {
78
+ @extend %h5;
79
+ padding: 0px $list-padding 5px;
80
+ }
81
+
82
+ .rf-table__td--strong {
83
+ color: $charcoal;
84
+ font-weight: bold;
85
+ }
86
+
87
+
88
+ // Draws table borders
89
+ tr:first-of-type > .rf-table__td {
90
+ border-top: $border-default;
91
+ }
92
+
93
+ .rf-table__row > td:first-of-type {
94
+ border-left: $border-default;
95
+ }
96
+
97
+ .rf-table__row > td:last-of-type {
98
+ border-right: $border-default;
99
+ }
100
+
101
+ // Rounds corners of the table body
102
+ .rf-table__body {
103
+ @include round-table-corners();
104
+ }
@@ -19,3 +19,12 @@
19
19
  .rf-well__list {
20
20
  margin: 20px;
21
21
  }
22
+
23
+ .rf-well--noborder {
24
+ border-width: 0;
25
+ }
26
+
27
+ .rf-well--tabpane {
28
+ @extend .rf-well;
29
+ border-radius: 0 0 $border-radius $border-radius;
30
+ }
@@ -36,3 +36,10 @@ $powder: #f8fbff;
36
36
  $border-radius: 3px;
37
37
  $list-padding: 14px;
38
38
  $border-default: solid 1px $mercury;
39
+ $opacity-default: .3;
40
+ $input-border-default: solid 1px $stormy;
41
+
42
+ // Forms
43
+
44
+ $input-padding-v: 8px;
45
+ $input-padding-h: 12px;
@@ -0,0 +1,13 @@
1
+ //
2
+ // Animations
3
+ //
4
+
5
+ // Currently used for loading icon
6
+ @keyframes spin {
7
+ 0% {
8
+ transform: rotate(0deg);
9
+ }
10
+ 100% {
11
+ transform: rotate(360deg);
12
+ }
13
+ }
@@ -0,0 +1,196 @@
1
+ // Generate `:hover` and `:focus` styles in one go.
2
+ @mixin hocus {
3
+ &:hover,
4
+ &:focus,
5
+ &:active {
6
+ @content;
7
+ }
8
+ }
9
+
10
+ // Hanldes placeholder text across browsers in one line
11
+ //
12
+ // usage, NOTE: input { is important otherwise
13
+ // an errant space is generated before :
14
+ //
15
+ // input { @include placeholder {
16
+ // font-style: italic;
17
+ // }}
18
+ @mixin placeholder {
19
+ &::-webkit-input-placeholder {@content}
20
+ &::-moz-placeholder {@content}
21
+ &:-moz-placeholder {@content}
22
+ &:-ms-input-placeholder {@content}
23
+ }
24
+
25
+
26
+ // Round the corners of a table by a specified radius
27
+ // NOTE: default is to use $border-radius. Depends
28
+ // on borders being present, and made by td's
29
+ // Also needs border-collapese: seperate
30
+ //
31
+ // (outer type or class) {
32
+ // Simple usage
33
+ // @include round-table-corners(<value>);
34
+ //
35
+ // Detailed Usage
36
+ // @include round-table-corners(<value>);
37
+ // }
38
+ @mixin round-table-corners($radius: $border-radius) {
39
+ tr:first-of-type td:first-of-type {
40
+ border-top-left-radius: $border-radius;
41
+ }
42
+
43
+ tr:first-of-type td:last-of-type {
44
+ border-top-right-radius: $border-radius;
45
+ }
46
+
47
+ tr:last-of-type td:first-of-type {
48
+ border-bottom-left-radius: $border-radius;
49
+ }
50
+
51
+ tr:last-of-type td:last-of-type {
52
+ border-bottom-right-radius: $border-radius;
53
+ }
54
+ }
55
+
56
+ // Simple truncation mixin to cut off text using an ellipsis after a certain
57
+ // width.
58
+ //
59
+ // .simple-usage {
60
+ // @include truncate();
61
+ // }
62
+ //
63
+ // .detailed-usage {
64
+ // @include truncate(<value>);
65
+ // }
66
+ @mixin truncate($width: 100%) {
67
+ max-width: $width;
68
+ white-space: nowrap;
69
+ overflow: hidden;
70
+ text-overflow: ellipsis;
71
+ }
72
+
73
+ @mixin untrunc($width: 100%) {
74
+ max-width: $width;
75
+ white-space: normal;
76
+ overflow: hidden;
77
+ }
78
+
79
+ @mixin word-wrap {
80
+ -ms-word-break: break-all;
81
+ overflow-wrap: break-word;
82
+ }
83
+
84
+
85
+ //
86
+ // LOADING ICON
87
+ //
88
+
89
+ // Can specify background color and size
90
+
91
+ @mixin rf-loader( $bg-color: $white, $size: 30px ) {
92
+ display: inline-block;
93
+ vertical-align: middle;
94
+ font-size: 10px;
95
+ text-indent: -9999em;
96
+ width: $size;
97
+ height: $size;
98
+ border-radius: 50%;
99
+ background: $blue-bright;
100
+ background: -webkit-linear-gradient(left, $blue-bright 10%, rgba(0,87,255, 0) 42%);
101
+ background: linear-gradient(to right, $blue-bright 10%, rgba(0,87,255, 0) 42%);
102
+ position: relative;
103
+ animation: spin 1.4s infinite linear;
104
+ transform: translateZ(0);
105
+
106
+ &:before {
107
+ width: 50%;
108
+ height: 50%;
109
+ background: $blue-bright;
110
+ border-radius: 100% 0 0 0;
111
+ position: absolute;
112
+ top: 0;
113
+ left: 0;
114
+ content: '';
115
+ }
116
+
117
+ &:after {
118
+ background: $bg-color;
119
+ width: 75%;
120
+ height: 75%;
121
+ border-radius: 50%;
122
+ content: '';
123
+ margin: auto;
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ bottom: 0;
128
+ right: 0;
129
+ }
130
+ }
131
+
132
+
133
+ //
134
+ // TRIGGER ARROW
135
+ //
136
+
137
+ // Can specify display (inline vs block) and arrow position
138
+
139
+ @mixin trigger_arrow ( $display: block, $arrow-pos: $list-padding ) {
140
+ &[aria-expanded='false']:after,
141
+ &[aria-expanded='true']:after {
142
+ color: inherit;
143
+ font-family: 'octicons';
144
+ font-size: 14px;
145
+ vertical-align: middle;
146
+
147
+ @include hocus() {
148
+ color: inherit;
149
+ }
150
+
151
+ @if ($display==block) {
152
+ display: block;
153
+ position: absolute;
154
+ right: $arrow-pos;
155
+ top: $arrow-pos;
156
+ }
157
+
158
+ @if ($display==inline) {
159
+ display: inline-block;
160
+ position: relative;
161
+ margin-bottom: 2px;
162
+ margin-left: 2px;
163
+ }
164
+ }
165
+
166
+ &[aria-expanded='false']:after {
167
+ content: '\f05a'; // triangle right
168
+ }
169
+
170
+ &[aria-expanded='true']:after {
171
+ content: '\f05b'; // triangle down
172
+ }
173
+ }
174
+
175
+ //
176
+ // INPUT HANDLE
177
+ // Used for toggles and ranges
178
+ //
179
+
180
+ @mixin input_handle($transition: true) {
181
+ background-color: $white;
182
+ border: $input-border-default;
183
+ border-radius: 50%;
184
+ bottom: 1px;
185
+ content: "";
186
+ cursor: pointer;
187
+ height: 18px;
188
+ left: 1px;
189
+ position: absolute;
190
+ width: 18px;
191
+
192
+ @if $transition == 'true' {
193
+ transition: .4s;
194
+ -webkit-transition: .4s;
195
+ }
196
+ }
@@ -0,0 +1,18 @@
1
+ //
2
+ // Bootstrap hacks
3
+ // todo: remove after refactoring
4
+ //
5
+
6
+ @mixin remove_bootstrap_styles {
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+
11
+ .rf-pre {
12
+ margin-bottom: 0;
13
+ }
14
+
15
+ // This is 1px different and I don't know why
16
+ .rf-form-control {
17
+ padding-top: $input-padding-v - 1;
18
+ }
@@ -0,0 +1,166 @@
1
+ //
2
+ // TEXT
3
+ //
4
+
5
+ .rf-u-textleft {
6
+ text-align: left;
7
+ }
8
+
9
+ .rf-u-textright {
10
+ text-align: right;
11
+ }
12
+
13
+ .rf-u-textcenter {
14
+ text-align: center!important;
15
+ }
16
+
17
+ .rf-u-unbold {
18
+ font-weight: normal !important;
19
+ }
20
+
21
+ .rf-u-caps {
22
+ text-transform: uppercase;
23
+ }
24
+
25
+ .rf-u-truncate {
26
+ @include truncate;
27
+ }
28
+
29
+ .rf-u-text-minor {
30
+ color: $stormy;
31
+ font-size: inherit;
32
+ font-style: italic;
33
+ font-weight: normal;
34
+ }
35
+
36
+
37
+ //
38
+ // POSITIONING
39
+ //
40
+
41
+ .rf-u-pullleft {
42
+ float: left;
43
+ }
44
+
45
+ .rf-u-pullright {
46
+ float: right;
47
+ }
48
+
49
+ .rf-u-block {
50
+ display: block !important;
51
+ }
52
+
53
+ .rf-u-inline {
54
+ display: inline-block !important;
55
+ }
56
+
57
+ .rf-u-clearfix {
58
+ &:before,
59
+ &:after {
60
+ content: " ";
61
+ display: table;
62
+ }
63
+
64
+ &:after {
65
+ clear: both;
66
+ }
67
+ }
68
+
69
+
70
+ //
71
+ // STATUSES
72
+ //
73
+
74
+ .rf-u-success {
75
+ color: $green !important;
76
+ }
77
+
78
+ .rf-u-fail {
79
+ color: $red !important;
80
+ }
81
+
82
+
83
+ //
84
+ // SHOW/HIDE
85
+ //
86
+
87
+ .rf-hide {
88
+ display: none !important;
89
+ }
90
+
91
+ .rf-show {
92
+ display: block !important;
93
+ }
94
+
95
+
96
+ //
97
+ // SPACING
98
+ // based off of Bootstrap naming https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
99
+ //
100
+
101
+ // Padding
102
+ // todo: remove duplicate format
103
+
104
+ .rf-u-p-0,
105
+ .rf-u-p0 {
106
+ padding: 0;
107
+ }
108
+
109
+ .rf-u-p {
110
+ padding: 10px;
111
+ }
112
+
113
+ .rf-u-p-l,
114
+ .rf-u-pl {
115
+ padding-left: 10px;
116
+ }
117
+
118
+ .rf-u-p-r,
119
+ .rf-u-pr {
120
+ padding-right: 10px;
121
+ }
122
+
123
+ .rf-u-pb {
124
+ padding-bottom: 10px;
125
+ }
126
+
127
+ .rf-u-p-y,
128
+ .rf-u-py {
129
+ padding-top: 10px;
130
+ padding-bottom: 10px;
131
+ }
132
+
133
+ .rf-u-p-x,
134
+ .rf-u-px {
135
+ padding-left: 10px;
136
+ padding-right: 10px;
137
+ }
138
+
139
+
140
+ // Margin
141
+ // todo: remove duplicate format
142
+
143
+ .rf-u-m {
144
+ margin: 10px;
145
+ }
146
+
147
+ .rf-u-m-b,
148
+ .rf-u-mb {
149
+ margin-bottom: 10px;
150
+ }
151
+
152
+ .rf-u-m-y,
153
+ .rf-u-my {
154
+ margin-bottom: 10px;
155
+ margin-top: 10px;
156
+ }
157
+
158
+ .rf-u-m-t,
159
+ .rf-u-mt {
160
+ margin-top: 10px;
161
+ }
162
+
163
+ .rf-u-mb0 {
164
+ margin-bottom: 0;
165
+ }
166
+
@@ -1,3 +1,3 @@
1
1
  module Ethosstyles
2
- VERSION = "0.1.2"
2
+ VERSION = "0.1.3"
3
3
  end
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.2
4
+ version: 0.1.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ethos
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-14 00:00:00.000000000 Z
11
+ date: 2017-10-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -78,24 +78,31 @@ files:
78
78
  - README.md
79
79
  - Rakefile
80
80
  - app/assets/stylesheets/_ethosstyles.scss
81
- - app/assets/stylesheets/components/base.scss
82
- - app/assets/stylesheets/components/buttons.scss
83
- - app/assets/stylesheets/components/checks.scss
84
- - app/assets/stylesheets/components/forms.scss
85
- - app/assets/stylesheets/components/grid.scss
86
- - app/assets/stylesheets/components/links.scss
87
- - app/assets/stylesheets/components/lists.scss
88
- - app/assets/stylesheets/components/logs.scss
89
- - app/assets/stylesheets/components/pills.scss
90
- - app/assets/stylesheets/components/progress.scss
91
- - app/assets/stylesheets/components/tables.scss
92
- - app/assets/stylesheets/components/timestamp.scss
93
- - app/assets/stylesheets/components/well.scss
81
+ - app/assets/stylesheets/components/_base.scss
82
+ - app/assets/stylesheets/components/_blurbs.scss
83
+ - app/assets/stylesheets/components/_buttons.scss
84
+ - app/assets/stylesheets/components/_checks.scss
85
+ - app/assets/stylesheets/components/_forms.scss
86
+ - app/assets/stylesheets/components/_grid.scss
87
+ - app/assets/stylesheets/components/_icons.scss
88
+ - app/assets/stylesheets/components/_links.scss
89
+ - app/assets/stylesheets/components/_lists.scss
90
+ - app/assets/stylesheets/components/_logs.scss
91
+ - app/assets/stylesheets/components/_notices.scss
92
+ - app/assets/stylesheets/components/_panels.scss
93
+ - app/assets/stylesheets/components/_pills.scss
94
+ - app/assets/stylesheets/components/_progress.scss
95
+ - app/assets/stylesheets/components/_sections.scss
96
+ - app/assets/stylesheets/components/_sliders.scss
97
+ - app/assets/stylesheets/components/_tables.scss
98
+ - app/assets/stylesheets/components/_timestamp.scss
99
+ - app/assets/stylesheets/components/_well.scss
94
100
  - app/assets/stylesheets/settings/_test.scss
95
101
  - app/assets/stylesheets/settings/_variables.scss
96
- - app/assets/stylesheets/utilities/mixins.scss
97
- - app/assets/stylesheets/utilities/shame.scss
98
- - app/assets/stylesheets/utilities/utilities.scss
102
+ - app/assets/stylesheets/utilities/_animations.scss
103
+ - app/assets/stylesheets/utilities/_mixins.scss
104
+ - app/assets/stylesheets/utilities/_shame.scss
105
+ - app/assets/stylesheets/utilities/_utilities.scss
99
106
  - ethosstyles.gemspec
100
107
  - lib/ethosstyles.rb
101
108
  - lib/ethosstyles/engine.rb