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
@@ -1,37 +0,0 @@
1
- %h3 {
2
- @include remove_bootstrap_styles();
3
- color: $charcoal;
4
- font-size: 14px;
5
- font-weight: bold;
6
- line-height: 18px;
7
- }
8
-
9
- .rf-h3 {
10
- @extend %h3;
11
- }
12
-
13
- %h5 {
14
- color: $slate;
15
- font-family: acumin-pro, semibold, sans-serif;
16
- font-size: 10px;
17
- letter-spacing: 0.78px;
18
- padding-top: 0px;
19
- padding-bottom: 5px;
20
- text-align: left;
21
- }
22
-
23
- %p {
24
- color: $slate;
25
- font-size: 14px;
26
- line-height: 20px;
27
- }
28
-
29
- .rf-p--lead,
30
- %rf-p--lead {
31
- font-size: 16px;
32
- line-height: 22px;
33
- }
34
-
35
- .rf-ul--lead {
36
- @extend %rf-p--lead;
37
- }
@@ -1,4 +0,0 @@
1
- .rf-form-group {
2
- display: block;
3
- margin-bottom: 6px;
4
- }
@@ -1,66 +0,0 @@
1
- //
2
- // Tables
3
- //
4
-
5
- $table-border-default: solid 1px $mercury;
6
- $input-border-default: solid 1px $stormy;
7
- $table-td-padding: 14px;
8
-
9
- .rf-table {
10
- width: 100%;
11
- border-collapse: separate; // Necessary to round corners
12
- table-layout: fixed;
13
- }
14
-
15
- .rf-table__col--centered {
16
- text-align: center;
17
-
18
- .form-control {
19
- text-align: center;
20
- }
21
- }
22
- .rf-table__col--right { text-align: right; }
23
-
24
-
25
- // Padding and borders for table cells
26
-
27
- .rf-table__td,
28
- .rf-table__th {
29
- @include word-wrap;
30
- }
31
-
32
- .rf-table__td {
33
- border-bottom: $table-border-default;
34
- font-size: 13px;
35
- padding: $table-td-padding;
36
- vertical-align: middle;
37
- }
38
-
39
- .rf-table__th {
40
- @extend %h5;
41
- padding: 0px $table-td-padding 5px;
42
- }
43
-
44
- .rf-table__td--strong {
45
- color: $charcoal;
46
- font-weight: bold;
47
- }
48
-
49
-
50
- // Draws table borders
51
- tr:first-of-type > .rf-table__td {
52
- border-top: $table-border-default;
53
- }
54
-
55
- .rf-table__row > td:first-of-type {
56
- border-left: $table-border-default;
57
- }
58
-
59
- .rf-table__row > td:last-of-type {
60
- border-right: $table-border-default;
61
- }
62
-
63
- // Rounds corners of the table body
64
- .rf-table__body {
65
- @include round-table-corners();
66
- }
@@ -1,75 +0,0 @@
1
- // Generate `:hover` and `:focus` styles in one go.
2
- @mixin hocus() {
3
- &:hover,
4
- &:focus {
5
- @content;
6
- }
7
- }
8
-
9
- // Hanldes placeholder text across browsers in one line
10
- //
11
- // usage, NOTE: input { is important otherwise
12
- // an errant space is generated before :
13
- //
14
- // input { @include placeholder {
15
- // font-style: italic;
16
- // }}
17
- @mixin placeholder {
18
- &::-webkit-input-placeholder {@content}
19
- &::-moz-placeholder {@content}
20
- &:-moz-placeholder {@content}
21
- &:-ms-input-placeholder {@content}
22
- }
23
-
24
-
25
- // Round the corners of a table by a specified radius
26
- // NOTE: default is to use $border-radius. Depends
27
- // on borders being present, and made by td's
28
- // Also needs border-collapese: seperate
29
- //
30
- // (outer type or class) {
31
- // Simple usage
32
- // @include round-table-corners(<value>);
33
- //
34
- // Detailed Usage
35
- // @include round-table-corners(<value>);
36
- // }
37
- @mixin round-table-corners($radius: $border-radius) {
38
- tr:first-of-type td:first-of-type {
39
- border-top-left-radius: $border-radius;
40
- }
41
-
42
- tr:first-of-type td:last-of-type {
43
- border-top-right-radius: $border-radius;
44
- }
45
-
46
- tr:last-of-type td:first-of-type {
47
- border-bottom-left-radius: $border-radius;
48
- }
49
-
50
- tr:last-of-type td:last-of-type {
51
- border-bottom-right-radius: $border-radius;
52
- }
53
- }
54
-
55
- // Simple truncation mixin to cut off text using an ellipsis after a certain
56
- // width.
57
- //
58
- // .simple-usage {
59
- // @include truncate();
60
- // }
61
- //
62
- // .detailed-usage {
63
- // @include truncate(<value>);
64
- // }
65
- @mixin truncate($width: 100%) {
66
- max-width: $width;
67
- white-space:nowrap;
68
- overflow: hidden;
69
- text-overflow: ellipsis;
70
- }
71
-
72
- @mixin word-wrap {
73
- -ms-word-break: break-all;
74
- overflow-wrap: break-word;
75
- }
@@ -1,9 +0,0 @@
1
- //
2
- // Bootstrap hacks
3
- // todo: remove after refactoring
4
- //
5
-
6
- @mixin remove_bootstrap_styles {
7
- margin: 0;
8
- padding: 0;
9
- }
@@ -1,74 +0,0 @@
1
- .rf-u-textleft {
2
- text-align: left;
3
- }
4
-
5
- .rf-u-textright {
6
- text-align: right;
7
- }
8
-
9
- .rf-u-textcenter {
10
- text-align: center;
11
- }
12
-
13
- .rf-u-pullleft {
14
- float: left;
15
- }
16
-
17
- .rf-u-pullright {
18
- float: right;
19
- }
20
-
21
- .rf-u-block {
22
- display: block !important;
23
- }
24
-
25
- .rf-u-inline {
26
- display: inline-block !important;
27
- }
28
-
29
- .rf-u-success {
30
- color: $green !important;
31
- }
32
-
33
- .rf-u-fail {
34
- color: $red !important;
35
- }
36
-
37
- .rf-u-caps {
38
- text-transform: uppercase;
39
- }
40
-
41
- .rf-u-truncate {
42
- @include truncate;
43
- }
44
-
45
- .rf-u-text-minor {
46
- color: $stormy;
47
- font-size: inherit;
48
- font-style: italic;
49
- font-weight: normal;
50
- }
51
-
52
-
53
- //
54
- // Spacing
55
- // based off of Bootstrap naming https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
56
- //
57
-
58
- .rf-u-m-y {
59
- margin-bottom: 10px;
60
- margin-top: 10px;
61
- }
62
-
63
- .rf-u-m-t {
64
- margin-top: 10px;
65
- }
66
-
67
- .rf-u-p-x {
68
- padding-left: 10px;
69
- padding-right: 10px;
70
- }
71
-
72
- .rf-u-p-r {
73
- padding-right: 10px;
74
- }