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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/stylesheets/_ethosstyles.scss +7 -0
- data/app/assets/stylesheets/components/_base.scss +130 -0
- data/app/assets/stylesheets/components/_blurbs.scss +37 -0
- data/app/assets/stylesheets/components/{buttons.scss → _buttons.scss} +44 -23
- data/app/assets/stylesheets/components/{checks.scss → _checks.scss} +14 -3
- data/app/assets/stylesheets/components/_forms.scss +73 -0
- data/app/assets/stylesheets/components/{grid.scss → _grid.scss} +41 -1
- data/app/assets/stylesheets/components/_icons.scss +53 -0
- data/app/assets/stylesheets/components/{links.scss → _links.scss} +4 -3
- data/app/assets/stylesheets/components/{lists.scss → _lists.scss} +87 -1
- data/app/assets/stylesheets/components/{logs.scss → _logs.scss} +0 -0
- data/app/assets/stylesheets/components/_notices.scss +15 -0
- data/app/assets/stylesheets/components/_panels.scss +10 -0
- data/app/assets/stylesheets/components/{pills.scss → _pills.scss} +0 -0
- data/app/assets/stylesheets/components/{progress.scss → _progress.scss} +0 -0
- data/app/assets/stylesheets/components/_sections.scss +21 -0
- data/app/assets/stylesheets/components/_sliders.scss +59 -0
- data/app/assets/stylesheets/components/_tables.scss +104 -0
- data/app/assets/stylesheets/components/{timestamp.scss → _timestamp.scss} +0 -0
- data/app/assets/stylesheets/components/{well.scss → _well.scss} +9 -0
- data/app/assets/stylesheets/settings/_variables.scss +7 -0
- data/app/assets/stylesheets/utilities/_animations.scss +13 -0
- data/app/assets/stylesheets/utilities/_mixins.scss +196 -0
- data/app/assets/stylesheets/utilities/_shame.scss +18 -0
- data/app/assets/stylesheets/utilities/_utilities.scss +166 -0
- data/lib/ethosstyles/version.rb +1 -1
- metadata +25 -18
- data/app/assets/stylesheets/components/base.scss +0 -37
- data/app/assets/stylesheets/components/forms.scss +0 -4
- data/app/assets/stylesheets/components/tables.scss +0 -66
- data/app/assets/stylesheets/utilities/mixins.scss +0 -75
- data/app/assets/stylesheets/utilities/shame.scss +0 -9
- 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,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,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
|
-
}
|