uniform-ui 1.0 → 2.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/lib/assets/config/manifest.js +1 -0
- data/lib/assets/javascripts/uniform/checkbox.js +31 -0
- data/lib/assets/javascripts/uniform/component.js +42 -0
- data/lib/assets/javascripts/uniform/dom-helpers.js +136 -0
- data/lib/assets/javascripts/uniform/dropdown.js +149 -0
- data/lib/assets/javascripts/uniform/floating-label.js +54 -0
- data/lib/assets/javascripts/uniform/icons.js +16 -0
- data/lib/assets/javascripts/uniform/modal.js +103 -0
- data/lib/assets/javascripts/uniform/resizer.js +43 -0
- data/lib/assets/javascripts/uniform/select.js +235 -0
- data/lib/assets/javascripts/uniform/tooltip.js +120 -0
- data/lib/assets/javascripts/uniform-es5.js +1 -0
- data/lib/assets/javascripts/uniform-jquery.js +124 -0
- data/lib/assets/javascripts/uniform.js +17 -0
- data/lib/assets/stylesheets/uniform/base.scss +3 -0
- data/lib/assets/stylesheets/uniform/components/alert.scss +72 -0
- data/lib/assets/stylesheets/uniform/components/buttons.scss +219 -0
- data/{vendor → lib}/assets/stylesheets/uniform/components/card.scss +33 -25
- data/lib/assets/stylesheets/uniform/components/container.scss +19 -0
- data/{vendor → lib}/assets/stylesheets/uniform/components/dropdown.scss +8 -4
- data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +103 -0
- data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +58 -0
- data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +64 -0
- data/lib/assets/stylesheets/uniform/components/form/input-group.scss +56 -0
- data/lib/assets/stylesheets/uniform/components/form.scss +143 -0
- data/lib/assets/stylesheets/uniform/components/grid.scss +158 -0
- data/lib/assets/stylesheets/uniform/components/label.scss +26 -0
- data/lib/assets/stylesheets/uniform/components/loaders.scss +80 -0
- data/{vendor → lib}/assets/stylesheets/uniform/components/modal.scss +26 -4
- data/lib/assets/stylesheets/uniform/components/nav.scss +124 -0
- data/lib/assets/stylesheets/uniform/components/row.scss +69 -0
- data/lib/assets/stylesheets/uniform/components/select.scss +122 -0
- data/lib/assets/stylesheets/uniform/components/table.scss +127 -0
- data/lib/assets/stylesheets/uniform/components/thumb.scss +41 -0
- data/lib/assets/stylesheets/uniform/components/tooltip.scss +63 -0
- data/lib/assets/stylesheets/uniform/components.scss +11 -0
- data/{vendor → lib}/assets/stylesheets/uniform/defaults.scss +7 -4
- data/lib/assets/stylesheets/uniform/functions.scss +31 -0
- data/lib/assets/stylesheets/uniform/helpers/border.scss +19 -0
- data/lib/assets/stylesheets/uniform/helpers/colors.scss +23 -0
- data/lib/assets/stylesheets/uniform/helpers/margin.scss +27 -0
- data/lib/assets/stylesheets/uniform/helpers/padding.scss +9 -0
- data/lib/assets/stylesheets/uniform/helpers/position.scss +13 -0
- data/lib/assets/stylesheets/uniform/helpers/sizes.scss +38 -0
- data/{vendor → lib}/assets/stylesheets/uniform/helpers/text.scss +86 -73
- data/lib/assets/stylesheets/uniform/helpers.scss +127 -0
- data/lib/assets/stylesheets/uniform/mixins.scss +116 -0
- data/lib/assets/stylesheets/uniform/print/grid.scss +50 -0
- data/lib/assets/stylesheets/uniform/variables.scss +72 -0
- data/lib/assets/stylesheets/uniform-print.scss +1 -0
- data/lib/assets/stylesheets/uniform.scss +11 -0
- data/lib/uniform/version.rb +3 -0
- data/lib/uniform.rb +15 -0
- metadata +87 -95
- data/.gitignore +0 -2
- data/CHANGELOG.md +0 -27
- data/CNAME +0 -1
- data/Gemfile +0 -8
- data/Gemfile.lock +0 -40
- data/LICENSE +0 -22
- data/README.md +0 -35
- data/Rakefile +0 -74
- data/index.html +0 -251
- data/lib/uniform/rails/engine.rb +0 -8
- data/lib/uniform/rails.rb +0 -6
- data/lib/uniform/ui.rb +0 -1
- data/preview/alerts.html.erb +0 -1
- data/preview/buttons.html.erb +0 -62
- data/preview/cards.html.erb +0 -23
- data/preview/colors.html.erb +0 -22
- data/preview/dropdown.html.erb +0 -1
- data/preview/form.html.erb +0 -233
- data/preview/grid.html.erb +0 -304
- data/preview/helpers.html.erb +0 -225
- data/preview/index.html.erb +0 -77
- data/preview/labels.html.erb +0 -1
- data/preview/layout.html.erb +0 -63
- data/preview/loaders.html.erb +0 -83
- data/preview/modal.html.erb +0 -1
- data/preview/nav.html.erb +0 -77
- data/preview/preview.scss +0 -76
- data/preview/rows.html.erb +0 -36
- data/preview/select.html.erb +0 -1
- data/preview/tables.html.erb +0 -1
- data/preview/tabs.html.erb +0 -17
- data/preview/tiles.html.erb +0 -1
- data/preview/tooltip.erb +0 -1
- data/preview.css +0 -0
- data/site/alerts.html +0 -157
- data/site/alerts.html copy +0 -133
- data/site/buttons.html +0 -286
- data/site/cards.html +0 -177
- data/site/colors.html +0 -275
- data/site/dropdown.html +0 -157
- data/site/dropdown.html copy +0 -141
- data/site/form.html +0 -369
- data/site/grid.html +0 -716
- data/site/helpers.html +0 -1008
- data/site/index.html +0 -251
- data/site/labels.html +0 -157
- data/site/layout.html +0 -313
- data/site/loaders.html +0 -233
- data/site/logo.png +0 -0
- data/site/modal.html +0 -157
- data/site/nav.html +0 -229
- data/site/preview.css +0 -1
- data/site/preview.js +0 -59
- data/site/rows.html +0 -190
- data/site/select.html +0 -157
- data/site/tables.html +0 -157
- data/site/tabs.html +0 -171
- data/site/tiles.html +0 -157
- data/site/tiles.html copy +0 -109
- data/site/tooltip +0 -157
- data/site/uniform.css +0 -1
- data/uniform.gemspec +0 -22
- data/vendor/assets/stylesheets/uniform/base.scss +0 -2
- data/vendor/assets/stylesheets/uniform/components/alert.scss +0 -27
- data/vendor/assets/stylesheets/uniform/components/buttons.scss +0 -212
- data/vendor/assets/stylesheets/uniform/components/form.scss +0 -290
- data/vendor/assets/stylesheets/uniform/components/grid.scss +0 -225
- data/vendor/assets/stylesheets/uniform/components/label.scss +0 -63
- data/vendor/assets/stylesheets/uniform/components/loaders.scss +0 -82
- data/vendor/assets/stylesheets/uniform/components/nav.scss +0 -197
- data/vendor/assets/stylesheets/uniform/components/row.scss +0 -92
- data/vendor/assets/stylesheets/uniform/components/select.scss +0 -98
- data/vendor/assets/stylesheets/uniform/components/table.scss +0 -83
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +0 -45
- data/vendor/assets/stylesheets/uniform/components/tile.scss +0 -20
- data/vendor/assets/stylesheets/uniform/components/tooltip.scss +0 -46
- data/vendor/assets/stylesheets/uniform/helpers/colors.scss +0 -37
- data/vendor/assets/stylesheets/uniform/helpers/margin.scss +0 -44
- data/vendor/assets/stylesheets/uniform/helpers/padding.scss +0 -74
- data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +0 -31
- data/vendor/assets/stylesheets/uniform/helpers.scss +0 -124
- data/vendor/assets/stylesheets/uniform/mixins.scss +0 -77
- data/vendor/assets/stylesheets/uniform/variables.scss +0 -36
- data/vendor/assets/stylesheets/uniform.scss +0 -9
@@ -1,46 +0,0 @@
|
|
1
|
-
.uniformTooltip{
|
2
|
-
position:relative;
|
3
|
-
.uniformTooltip-popup{
|
4
|
-
position: absolute;
|
5
|
-
background: white;
|
6
|
-
transition: opacity 0.2s, bottom 0.2s;
|
7
|
-
border: 1px solid $gray-light;
|
8
|
-
padding: 0.5em;
|
9
|
-
opacity: 0;
|
10
|
-
bottom: 0;
|
11
|
-
left: -1.5em;
|
12
|
-
margin: 0.5em;
|
13
|
-
z-index: -1;
|
14
|
-
color: $gray;
|
15
|
-
font-size:0.8em;
|
16
|
-
border-radius: 0.25em;
|
17
|
-
max-width: 30vw;
|
18
|
-
p:last-child{
|
19
|
-
margin-bottom: 0;
|
20
|
-
}
|
21
|
-
&.active{
|
22
|
-
z-index: 2;
|
23
|
-
bottom: 100%;
|
24
|
-
opacity: 1;
|
25
|
-
}
|
26
|
-
.uniformTooltip-pointer{
|
27
|
-
position:absolute;
|
28
|
-
top: 100%;
|
29
|
-
left: 1em;
|
30
|
-
width: 1em;
|
31
|
-
height: 1em;
|
32
|
-
overflow: hidden;
|
33
|
-
&:after{
|
34
|
-
content: "";
|
35
|
-
position: absolute;
|
36
|
-
width: 100%;
|
37
|
-
height: 100%;
|
38
|
-
background: white;
|
39
|
-
transform: rotate(-45deg);
|
40
|
-
top: -85%;
|
41
|
-
left: 0;
|
42
|
-
border: 1px solid $gray-light;
|
43
|
-
}
|
44
|
-
}
|
45
|
-
}
|
46
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
@mixin generate-color($class, $color){
|
2
|
-
.text-#{$class} { color: $color !important;}
|
3
|
-
.a-hover-#{$class} a:hover { color: $color !important;}
|
4
|
-
.bg-#{$class} { background-color: $color !important;}
|
5
|
-
.uniformLabel-#{$class}{ border-color: $color !important;}
|
6
|
-
.a-#{$class} a {
|
7
|
-
color: $color;
|
8
|
-
&:hover{
|
9
|
-
color: lighten($color, 20);
|
10
|
-
}
|
11
|
-
&:visited{
|
12
|
-
color: $color;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
|
17
|
-
@include generate-color('green', $green);
|
18
|
-
@include generate-color('green-light', $green-light);
|
19
|
-
@include generate-color('green-dark', $green-dark);
|
20
|
-
@include generate-color('blue', $blue);
|
21
|
-
@include generate-color('blue-light', $blue-light);
|
22
|
-
@include generate-color('blue-dark', $blue-dark);
|
23
|
-
@include generate-color('red', $red);
|
24
|
-
@include generate-color('red-light', $red-light);
|
25
|
-
@include generate-color('red-dark', $red-dark);
|
26
|
-
@include generate-color('gray', $gray);
|
27
|
-
@include generate-color('gray-light', $gray-light);
|
28
|
-
@include generate-color('gray-dark', $gray-dark);
|
29
|
-
@include generate-color('yellow', $yellow);
|
30
|
-
@include generate-color('yellow-light', $yellow-light);
|
31
|
-
@include generate-color('yellow-dark', $yellow-dark);
|
32
|
-
@include generate-color('background', $background);
|
33
|
-
@include generate-color('background-light', lighten($background, 2));
|
34
|
-
@include generate-color('background-dark', darken($background, 5));
|
35
|
-
|
36
|
-
@include generate-color('white', #FFFFFF);
|
37
|
-
@include generate-color('muted', lighten($gray, 30));
|
@@ -1,44 +0,0 @@
|
|
1
|
-
.margin{
|
2
|
-
margin-top: 1em;
|
3
|
-
margin-bottom: 1em;
|
4
|
-
}
|
5
|
-
.margin-h{
|
6
|
-
margin-left: 1em;
|
7
|
-
margin-right: 1em;
|
8
|
-
}
|
9
|
-
.margin-more{
|
10
|
-
margin-top: 2em !important;
|
11
|
-
margin-bottom: 2em !important;
|
12
|
-
}
|
13
|
-
.margin-super{
|
14
|
-
margin-top: 4em !important;
|
15
|
-
margin-bottom: 4em !important;
|
16
|
-
}
|
17
|
-
@include apply-media-sizes('.margin-less'){
|
18
|
-
margin-top: 0.5em;
|
19
|
-
margin-bottom: 0.5em;
|
20
|
-
}
|
21
|
-
.margin-tiny{
|
22
|
-
margin-top: 0.25em;
|
23
|
-
margin-bottom: 0.25em;
|
24
|
-
}
|
25
|
-
.margin-none{
|
26
|
-
margin: 0 !important;
|
27
|
-
}
|
28
|
-
@each $direction in 'top' 'right' 'bottom' 'left' {
|
29
|
-
.margin-#{$direction}-none{
|
30
|
-
margin-#{$direction}: 0 !important;
|
31
|
-
}
|
32
|
-
.margin-#{$direction}-tiny{
|
33
|
-
margin-#{$direction}: 0.25em !important;
|
34
|
-
}
|
35
|
-
.margin-#{$direction}-less{
|
36
|
-
margin-#{$direction}: 0.5em !important;
|
37
|
-
}
|
38
|
-
@include apply-media-sizes('.margin-#{$direction}'){
|
39
|
-
margin-#{$direction}: 1em !important;
|
40
|
-
}
|
41
|
-
@include apply-media-sizes('.margin-#{$direction}-more'){
|
42
|
-
margin-#{$direction}: 2em !important;
|
43
|
-
}
|
44
|
-
}
|
@@ -1,74 +0,0 @@
|
|
1
|
-
@include apply-media-sizes('.pad'){
|
2
|
-
padding: 1em;
|
3
|
-
}
|
4
|
-
@include apply-media-sizes('.pad-tiny'){
|
5
|
-
padding: 0.25em;
|
6
|
-
}
|
7
|
-
@include apply-media-sizes('.pad-less'){
|
8
|
-
padding: 0.5em;
|
9
|
-
}
|
10
|
-
@include apply-media-sizes('.pad-more'){
|
11
|
-
padding: 2em;
|
12
|
-
}
|
13
|
-
@include apply-media-sizes('.pad-super'){
|
14
|
-
padding: 4em;
|
15
|
-
}
|
16
|
-
@include apply-media-sizes('.pad-more-important'){
|
17
|
-
padding: 2em !important;
|
18
|
-
}
|
19
|
-
.pad-h{
|
20
|
-
padding-left: 1em;
|
21
|
-
padding-right: 1em;
|
22
|
-
}
|
23
|
-
.pad-h-less{
|
24
|
-
padding-left: 0.5em;
|
25
|
-
padding-right: 0.5em;
|
26
|
-
}
|
27
|
-
.pad-v{
|
28
|
-
padding-top: 1em;
|
29
|
-
padding-bottom: 1em;
|
30
|
-
}
|
31
|
-
.pad-v-less{
|
32
|
-
padding-top: 0.5em;
|
33
|
-
padding-bottom: 0.5em;
|
34
|
-
}
|
35
|
-
.pad-v-more{
|
36
|
-
padding-top: 2em;
|
37
|
-
padding-bottom: 2em;
|
38
|
-
}
|
39
|
-
.pad-v-super{
|
40
|
-
padding-top: 4em;
|
41
|
-
padding-bottom: 4em;
|
42
|
-
}
|
43
|
-
.pad-none{
|
44
|
-
padding:0 !important;
|
45
|
-
}
|
46
|
-
.pad-none-h{
|
47
|
-
padding-left: 0 !important;
|
48
|
-
padding-right: 0 !important;
|
49
|
-
}
|
50
|
-
.un-pad{
|
51
|
-
margin-left: -1em;
|
52
|
-
margin-right: -1em;
|
53
|
-
}
|
54
|
-
.un-pad-less{
|
55
|
-
margin-left: -0.5em;
|
56
|
-
margin-right: -0.5em;
|
57
|
-
}
|
58
|
-
.x-pad{
|
59
|
-
padding: 4em;
|
60
|
-
}
|
61
|
-
@each $direction in 'top' 'right' 'bottom' 'left' {
|
62
|
-
@include apply-media-sizes('.pad-#{$direction}-tiny'){
|
63
|
-
padding-#{$direction}: 0.25em !important;
|
64
|
-
}
|
65
|
-
@include apply-media-sizes('.pad-#{$direction}-less'){
|
66
|
-
padding-#{$direction}: 0.5em !important;
|
67
|
-
}
|
68
|
-
@include apply-media-sizes('.pad-#{$direction}'){
|
69
|
-
padding-#{$direction}: 1em !important;
|
70
|
-
}
|
71
|
-
@include apply-media-sizes('.pad-#{$direction}-more'){
|
72
|
-
padding-#{$direction}: 2em !important;
|
73
|
-
}
|
74
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
@for $i from 1 through 100 {
|
2
|
-
.col-#{$i * 5}-px { flex: 0 0 #{$i * 5 +"px"}; max-width: #{$i * 5 + "px"}; }
|
3
|
-
.col-#{$i}-p { flex: 0 0 #{$i+"%"}; max-width: #{$i + "%"}; }
|
4
|
-
.width-#{$i}-p { width: #{$i + "%"}; max-width: #{$i + "%"}; }
|
5
|
-
.width-#{$i * 5}-px { width: #{$i * 5 + "px"}; }
|
6
|
-
.max-width-#{$i * 5}-px { max-width: #{$i * 5 + "px"}; }
|
7
|
-
.max-width-#{$i}-p { max-width: #{$i + "%"}; }
|
8
|
-
.height-#{$i * 5}-px { height: #{$i * 5 + "px"}; }
|
9
|
-
.height-#{$i * 5}-p { height: #{$i * 5 + "%"}; }
|
10
|
-
.max-height-#{$i * 5}-px { max-height: #{$i * 5 + "px"}; }
|
11
|
-
}
|
12
|
-
@for $i from 1 through 20 {
|
13
|
-
.width-#{$i * 5}-vw { width: #{$i * 5 +"vw"}; }
|
14
|
-
.height-#{$i * 5}-vh { height: #{$i * 5 +"vh"}; }
|
15
|
-
.min-height-#{$i * 5}-vh { min-height: #{$i * 5 +"vh"}; }
|
16
|
-
}
|
17
|
-
|
18
|
-
@each $name, $size in ('sm', $sm) ('md', $md) ('lg', $lg) ('xl', $xl) {
|
19
|
-
@include media($size){
|
20
|
-
@for $i from 1 through 100 {
|
21
|
-
.col-#{$i * 5}-px-#{$name} { flex: 0 0 #{$i * 5 +"px"}; max-width: #{$i * 5 + "px"}; }
|
22
|
-
.col-#{$i}-p-#{$name} { flex: 0 0 #{$i+"%"}; max-width: #{$i + "%"}; }
|
23
|
-
.width-#{$i}-p-#{$name} { width: #{$i + "%"}; max-width: #{$i + "%"}; }
|
24
|
-
.width-#{$i * 5}-px-#{$name} { width: #{$i * 5 + "px"}; }
|
25
|
-
}
|
26
|
-
@for $i from 1 through 20 {
|
27
|
-
.height-#{$i * 5}-vh-#{$name} { height: #{$i * 5 +"vh"}; }
|
28
|
-
.min-height-#{$i * 5}-vh-#{$name} { min-height: #{$i * 5 +"vh"}; }
|
29
|
-
}
|
30
|
-
}
|
31
|
-
}
|
@@ -1,124 +0,0 @@
|
|
1
|
-
.square-icon{
|
2
|
-
display: inline-block;
|
3
|
-
height: 1em;
|
4
|
-
width: 1em;
|
5
|
-
border: 1px solid $gray;
|
6
|
-
border-radius: 0.1em;
|
7
|
-
vertical-align:middle;
|
8
|
-
&.gray-light{
|
9
|
-
border-color: lighten($gray, 40);
|
10
|
-
}
|
11
|
-
}
|
12
|
-
.hidden{
|
13
|
-
display:none !important;
|
14
|
-
}
|
15
|
-
.round{
|
16
|
-
border-radius:50%;
|
17
|
-
}
|
18
|
-
.rounded{
|
19
|
-
border-radius: 0.25em;
|
20
|
-
}
|
21
|
-
[data-href],
|
22
|
-
.pointer{
|
23
|
-
cursor: pointer !important;
|
24
|
-
}
|
25
|
-
.cursor-help{
|
26
|
-
cursor: help;
|
27
|
-
}
|
28
|
-
|
29
|
-
.handle{
|
30
|
-
cursor: hand;
|
31
|
-
}
|
32
|
-
.honeypot{
|
33
|
-
position:absolute !important;
|
34
|
-
left:-999999px !important;
|
35
|
-
width:1px !important;
|
36
|
-
display:block !important;
|
37
|
-
}
|
38
|
-
@include apply-media-sizes('.border'){
|
39
|
-
border: 1px solid $gray-light;
|
40
|
-
}
|
41
|
-
@each $direction in 'top' 'right' 'bottom' 'left' {
|
42
|
-
@include apply-media-sizes('.border-#{$direction}'){
|
43
|
-
border-#{$direction}: 1px solid $gray-light;
|
44
|
-
}
|
45
|
-
@include apply-media-sizes('.border-dark-#{$direction}'){
|
46
|
-
border-#{$direction}: 1px solid darken($gray-light, 20);
|
47
|
-
}
|
48
|
-
}
|
49
|
-
img.disabled{
|
50
|
-
@include grayscale(1, 0.3)
|
51
|
-
}
|
52
|
-
table.fixed{
|
53
|
-
table-layout: fixed;
|
54
|
-
}
|
55
|
-
|
56
|
-
//----------------------------------------------------------------
|
57
|
-
// Layout
|
58
|
-
//----------------------------------------------------------------
|
59
|
-
@include apply-media-sizes('.float-right'){
|
60
|
-
float:right;
|
61
|
-
&.margin{
|
62
|
-
margin: 0 0 1rem 1rem;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
.float-left{
|
66
|
-
float: left;
|
67
|
-
&.margin{
|
68
|
-
margin: 0 1rem 1rem 0;
|
69
|
-
}
|
70
|
-
}
|
71
|
-
.bleed-fix{
|
72
|
-
position:static;
|
73
|
-
overflow:hidden;
|
74
|
-
}
|
75
|
-
.clear{
|
76
|
-
clear:both;
|
77
|
-
}
|
78
|
-
@include apply-media-sizes('.block') {
|
79
|
-
display: block;
|
80
|
-
}
|
81
|
-
@include apply-media-sizes('.inline-block') {
|
82
|
-
display:inline-block !important;
|
83
|
-
}
|
84
|
-
.align-middle{
|
85
|
-
@include align-middle;
|
86
|
-
}
|
87
|
-
|
88
|
-
|
89
|
-
.relative{
|
90
|
-
position:relative;
|
91
|
-
}
|
92
|
-
|
93
|
-
|
94
|
-
ul.raw{
|
95
|
-
margin: 0;
|
96
|
-
padding: 0;
|
97
|
-
list-style:none;
|
98
|
-
}
|
99
|
-
|
100
|
-
|
101
|
-
.text-col-2{
|
102
|
-
column-count: 2;
|
103
|
-
column-gap: 5em;
|
104
|
-
}
|
105
|
-
button.raw{
|
106
|
-
outline: none;
|
107
|
-
appearance: none;
|
108
|
-
border: none;
|
109
|
-
background:none;
|
110
|
-
}
|
111
|
-
.overflow-hidden{
|
112
|
-
overflow:hidden;
|
113
|
-
}
|
114
|
-
.overflow-y{
|
115
|
-
overflow-y: auto;
|
116
|
-
}
|
117
|
-
|
118
|
-
img.block{
|
119
|
-
display:block;
|
120
|
-
width: 100%;
|
121
|
-
}
|
122
|
-
.height-auto{
|
123
|
-
height: auto;
|
124
|
-
}
|
@@ -1,77 +0,0 @@
|
|
1
|
-
$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
|
2
|
-
|
3
|
-
@mixin text-overflow($inherit:false){
|
4
|
-
@if $inherit == false {
|
5
|
-
text-overflow: ellipsis;
|
6
|
-
white-space: nowrap;
|
7
|
-
overflow: hidden;
|
8
|
-
} @else {
|
9
|
-
text-overflow: inherit;
|
10
|
-
white-space: inherit;
|
11
|
-
overflow: inherit;
|
12
|
-
}
|
13
|
-
}
|
14
|
-
@mixin flicker-fix(){
|
15
|
-
-webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
|
16
|
-
-webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
|
17
|
-
}
|
18
|
-
@mixin grayscale($gray: 0.7, $opacity: 1){
|
19
|
-
opacity: $opacity;
|
20
|
-
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=$gray)";
|
21
|
-
filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
|
22
|
-
filter: gray($gray);
|
23
|
-
-webkit-filter: grayscale($gray * 100%);
|
24
|
-
@if $gray == 0 {
|
25
|
-
filter: none;
|
26
|
-
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
|
27
|
-
-webkit-filter: grayscale(0);
|
28
|
-
}
|
29
|
-
}
|
30
|
-
@mixin vertical-middle(){
|
31
|
-
position:absolute;
|
32
|
-
top:50%;
|
33
|
-
transform: translateY(-50%);
|
34
|
-
}
|
35
|
-
@mixin horizontal-center(){
|
36
|
-
position:absolute;
|
37
|
-
left:50%;
|
38
|
-
transform: translateX(-50%);
|
39
|
-
}
|
40
|
-
@mixin align-middle(){
|
41
|
-
position:absolute;
|
42
|
-
left:50%;
|
43
|
-
top:50%;
|
44
|
-
transform: translate(-50%, -50%);
|
45
|
-
}
|
46
|
-
@mixin clean-icon(){
|
47
|
-
-webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
|
48
|
-
-webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
|
49
|
-
-webkit-font-smoothing: antialiased;
|
50
|
-
}
|
51
|
-
|
52
|
-
@mixin media($query) {
|
53
|
-
@media only screen and (#{$query}){
|
54
|
-
@content;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
@mixin apply-media-sizes($base-name){
|
59
|
-
#{$base-name}{
|
60
|
-
@content
|
61
|
-
}
|
62
|
-
@each $name, $size in ('sm', $sm) ('md', $md) ('lg', $lg) ('xl', $xl) {
|
63
|
-
@include media($size){
|
64
|
-
#{$base-name}-#{$name}{
|
65
|
-
@content
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
70
|
-
|
71
|
-
@mixin position-fill() {
|
72
|
-
position: absolute;
|
73
|
-
top: 0;
|
74
|
-
bottom: 0;
|
75
|
-
left: 0;
|
76
|
-
right: 0;
|
77
|
-
}
|
@@ -1,36 +0,0 @@
|
|
1
|
-
// Colors
|
2
|
-
|
3
|
-
$gray:#505153;
|
4
|
-
$gray-light: #cccccc;
|
5
|
-
$gray-dark:darken($gray, 10);
|
6
|
-
|
7
|
-
$green:#97C848;
|
8
|
-
$green-light:#BBFF00;
|
9
|
-
$green-dark:#709239;
|
10
|
-
|
11
|
-
$blue:#0994E2;
|
12
|
-
$blue-light:#A7CDF2;
|
13
|
-
$blue-dark:#167DBA;
|
14
|
-
|
15
|
-
$red:#E1563E;
|
16
|
-
$red-light:#E5766C;
|
17
|
-
$red-dark:#971710;
|
18
|
-
$red-bright:#ffab9b;
|
19
|
-
|
20
|
-
$yellow: #D7E542;
|
21
|
-
$yellow-dark: #BBC02C;
|
22
|
-
$yellow-light: #E9F75A;
|
23
|
-
|
24
|
-
$gray-background: rgb(238, 238, 238);
|
25
|
-
$background: lighten($gray, 63);
|
26
|
-
|
27
|
-
$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
|
28
|
-
|
29
|
-
$system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
30
|
-
|
31
|
-
// Responsive Breakpoints
|
32
|
-
// breakpoints at 720, 1080, 1440
|
33
|
-
$sm: "max-width: 719px";
|
34
|
-
$md: "min-width: 720px";
|
35
|
-
$lg: "min-width: 1080px";
|
36
|
-
$xl: "min-width: 1440px";
|