uniform-ui 0.5 → 0.5.1
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/.gitignore +2 -1
- data/Gemfile +2 -1
- data/Gemfile.lock +12 -0
- data/Rakefile +34 -8
- data/index.html +587 -406
- data/preview/index.html.erb +423 -433
- data/preview/preview.scss +42 -0
- data/site/index.html +660 -0
- data/site/logo.png +0 -0
- data/site/preview.css +1 -0
- data/site/site/logo.png +0 -0
- data/site/site/preview.css +1 -0
- data/site/site/uniform.css +1 -0
- data/site/uniform.css +1 -0
- data/uniform.gemspec +3 -2
- data/vendor/assets/stylesheets/uniform/components/{buttons.css.scss → buttons.scss} +66 -33
- data/vendor/assets/stylesheets/uniform/components/card.scss +83 -0
- data/vendor/assets/stylesheets/uniform/components/form.scss +221 -0
- data/vendor/assets/stylesheets/uniform/components/grid.scss +83 -0
- data/vendor/assets/stylesheets/uniform/components/{inputs.css.scss → inputs.scss} +57 -29
- data/vendor/assets/stylesheets/uniform/components/lists.scss +62 -0
- data/vendor/assets/stylesheets/uniform/components/loaders.scss +62 -0
- data/vendor/assets/stylesheets/uniform/components/nav.scss +44 -0
- data/vendor/assets/stylesheets/uniform/components/row.scss +165 -0
- data/vendor/assets/stylesheets/uniform/components/table-container.scss +44 -0
- data/vendor/assets/stylesheets/uniform/components/table-form.scss +264 -0
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +32 -0
- data/vendor/assets/stylesheets/uniform/components/tile.scss +32 -0
- data/vendor/assets/stylesheets/uniform/defaults.scss +30 -0
- data/vendor/assets/stylesheets/uniform/helpers.scss +128 -0
- data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +142 -0
- data/vendor/assets/stylesheets/uniform/{mixins.css.scss → mixins.scss} +16 -32
- data/vendor/assets/stylesheets/uniform/variables.scss +54 -0
- data/vendor/assets/stylesheets/{uniform.css.scss → uniform.scss} +4 -1
- metadata +44 -13
- data/preview/preview.css +0 -1
- data/preview/preview.css.scss +0 -3
- data/preview/uniform.css +0 -0
- data/vendor/assets/stylesheets/uniform/components/loaders.css.scss +0 -149
- data/vendor/assets/stylesheets/uniform/helpers.css.scss +0 -31
- data/vendor/assets/stylesheets/uniform/variables.css.scss +0 -44
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
//----------------------------------------------------------------
|
|
2
|
+
// Borrowed from Bootstrap
|
|
3
|
+
//----------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
$screen-xs: 480px !default;
|
|
6
|
+
$screen-sm: 768px !default;
|
|
7
|
+
$screen-md: 992px !default;
|
|
8
|
+
$screen-lg: 1200px !default;
|
|
9
|
+
|
|
10
|
+
$grid-columns: 12 !default;
|
|
11
|
+
$grid-gutter-width: 30px !default;
|
|
12
|
+
$container-sm: (720px + $grid-gutter-width);
|
|
13
|
+
$container-md: (940px + $grid-gutter-width);
|
|
14
|
+
$container-lg: (1140px + $grid-gutter-width);
|
|
15
|
+
|
|
16
|
+
$xs: new-breakpoint(max-width 767px);
|
|
17
|
+
$sm: new-breakpoint(min-width 768px max-width 991px);
|
|
18
|
+
$md: new-breakpoint(min-width 992px max-width 1199px);
|
|
19
|
+
$lg: new-breakpoint(min-width 1200px);
|
|
20
|
+
$max-xs: new-breakpoint(max-width 767px);
|
|
21
|
+
$max-sm: new-breakpoint(max-width 991px);
|
|
22
|
+
$max-md: new-breakpoint(max-width 1199px);
|
|
23
|
+
$max-lg: new-breakpoint(min-width 1200px);
|
|
24
|
+
$min-xs: new-breakpoint(min-width 480px);
|
|
25
|
+
$min-sm: new-breakpoint(min-width 768px);
|
|
26
|
+
$min-md: new-breakpoint(min-width 992px);
|
|
27
|
+
$min-lg: new-breakpoint( min-width 1200px);
|
|
28
|
+
|
|
29
|
+
@mixin clearfix() {
|
|
30
|
+
&:before,
|
|
31
|
+
&:after {
|
|
32
|
+
content: " "; // 1
|
|
33
|
+
display: table; // 2
|
|
34
|
+
}
|
|
35
|
+
&:after {
|
|
36
|
+
clear: both;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Grid system
|
|
41
|
+
//
|
|
42
|
+
// Generate semantic grid columns with these mixins.
|
|
43
|
+
|
|
44
|
+
// Centered container element
|
|
45
|
+
@mixin container-fixed($gutter: $grid-gutter-width) {
|
|
46
|
+
margin-right: auto;
|
|
47
|
+
margin-left: auto;
|
|
48
|
+
padding-left: floor(($gutter / 2));
|
|
49
|
+
padding-right: ceil(($gutter / 2));
|
|
50
|
+
@include clearfix;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Creates a wrapper for a series of columns
|
|
54
|
+
@mixin make-row($gutter: $grid-gutter-width) {
|
|
55
|
+
margin-left: ceil(($gutter / -2));
|
|
56
|
+
margin-right: floor(($gutter / -2));
|
|
57
|
+
@include clearfix;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Framework grid generation
|
|
61
|
+
//
|
|
62
|
+
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
63
|
+
// any value of `$grid-columns`.
|
|
64
|
+
|
|
65
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
66
|
+
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
|
67
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
68
|
+
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
|
69
|
+
}
|
|
70
|
+
#{$list} {
|
|
71
|
+
position: relative;
|
|
72
|
+
// Prevent columns from collapsing when empty
|
|
73
|
+
min-height: 1px;
|
|
74
|
+
// Inner gutter via padding
|
|
75
|
+
padding-left: ceil(($grid-gutter-width / 2));
|
|
76
|
+
padding-right: floor(($grid-gutter-width / 2));
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
82
|
+
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
|
83
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
84
|
+
$list: "#{$list}, .col-#{$class}-#{$i}";
|
|
85
|
+
}
|
|
86
|
+
#{$list} {
|
|
87
|
+
float: left;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
@mixin calc-grid-column($index, $class, $type) {
|
|
93
|
+
@if ($type == width) and ($index > 0) {
|
|
94
|
+
.col-#{$class}-#{$index} {
|
|
95
|
+
width: percentage(($index / $grid-columns));
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
@if ($type == push) and ($index > 0) {
|
|
99
|
+
.col-#{$class}-push-#{$index} {
|
|
100
|
+
left: percentage(($index / $grid-columns));
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@if ($type == push) and ($index == 0) {
|
|
104
|
+
.col-#{$class}-push-0 {
|
|
105
|
+
left: auto;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
@if ($type == pull) and ($index > 0) {
|
|
109
|
+
.col-#{$class}-pull-#{$index} {
|
|
110
|
+
right: percentage(($index / $grid-columns));
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
@if ($type == pull) and ($index == 0) {
|
|
114
|
+
.col-#{$class}-pull-0 {
|
|
115
|
+
right: auto;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
@if ($type == offset) {
|
|
119
|
+
.col-#{$class}-offset-#{$index} {
|
|
120
|
+
margin-left: percentage(($index / $grid-columns));
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
126
|
+
@mixin loop-grid-columns($columns, $class, $type) {
|
|
127
|
+
@for $i from 0 through $columns {
|
|
128
|
+
@include calc-grid-column($i, $class, $type);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
// Create grid for specific class
|
|
134
|
+
@mixin make-grid($class) {
|
|
135
|
+
@include float-grid-columns($class);
|
|
136
|
+
@include loop-grid-columns($grid-columns, $class, width);
|
|
137
|
+
@include loop-grid-columns($grid-columns, $class, pull);
|
|
138
|
+
@include loop-grid-columns($grid-columns, $class, push);
|
|
139
|
+
@include loop-grid-columns($grid-columns, $class, offset);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
//----------------------------------------------------------------
|
|
2
|
-
// Image Filters
|
|
3
|
-
//----------------------------------------------------------------
|
|
4
1
|
@mixin opacity($o: 1){
|
|
5
2
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$o*100+")";
|
|
6
3
|
filter: alpha(opacity=$o*100);
|
|
@@ -8,7 +5,6 @@
|
|
|
8
5
|
-khtml-opacity: $o;
|
|
9
6
|
opacity: $o;
|
|
10
7
|
}
|
|
11
|
-
|
|
12
8
|
@mixin blur($amount: 5px){
|
|
13
9
|
filter: blur($amount);
|
|
14
10
|
-webkit-filter: blur($amount);
|
|
@@ -16,23 +12,6 @@
|
|
|
16
12
|
-o-filter: blur($amount);
|
|
17
13
|
-ms-filter: blur($amount);
|
|
18
14
|
}
|
|
19
|
-
|
|
20
|
-
@mixin grayscale($gray: 0.7, $opacity: 1){
|
|
21
|
-
opacity: $opacity;
|
|
22
|
-
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=$gray)";
|
|
23
|
-
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);
|
|
24
|
-
filter: gray($gray);
|
|
25
|
-
-webkit-filter: grayscale($gray * 100%);
|
|
26
|
-
@if $gray == 0 {
|
|
27
|
-
filter: none;
|
|
28
|
-
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
|
|
29
|
-
-webkit-filter: grayscale(0);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
//----------------------------------------------------------------
|
|
34
|
-
// Text
|
|
35
|
-
//----------------------------------------------------------------
|
|
36
15
|
@mixin text-overflow($inherit:false){
|
|
37
16
|
@if $inherit == false {
|
|
38
17
|
text-overflow: ellipsis;
|
|
@@ -48,31 +27,36 @@
|
|
|
48
27
|
-webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
|
|
49
28
|
-webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
|
|
50
29
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
30
|
+
@mixin grayscale($gray: 0.7, $opacity: 1){
|
|
31
|
+
opacity: $opacity;
|
|
32
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=$gray)";
|
|
33
|
+
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);
|
|
34
|
+
filter: gray($gray);
|
|
35
|
+
-webkit-filter: grayscale($gray * 100%);
|
|
36
|
+
@if $gray == 0 {
|
|
37
|
+
filter: none;
|
|
38
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
|
|
39
|
+
-webkit-filter: grayscale(0);
|
|
40
|
+
}
|
|
55
41
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
//----------------------------------------------------------------
|
|
59
|
-
// Position Alignment
|
|
60
|
-
//----------------------------------------------------------------
|
|
61
42
|
@mixin vertical-middle(){
|
|
62
43
|
position:absolute;
|
|
63
44
|
top:50%;
|
|
64
45
|
@include transform(translateY(-50%));
|
|
65
46
|
}
|
|
66
|
-
|
|
67
47
|
@mixin horizontal-center(){
|
|
68
48
|
position:absolute;
|
|
69
49
|
left:50%;
|
|
70
50
|
@include transform(translateX(-50%));
|
|
71
51
|
}
|
|
72
|
-
|
|
73
52
|
@mixin align-middle(){
|
|
74
53
|
position:absolute;
|
|
75
54
|
left:50%;
|
|
76
55
|
top:50%;
|
|
77
56
|
@include transform(translate(-50%, -50%));
|
|
57
|
+
}
|
|
58
|
+
@mixin clean-icon(){
|
|
59
|
+
-webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
|
|
60
|
+
-webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
|
|
61
|
+
-webkit-font-smoothing: antialiased;
|
|
78
62
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
// Colors
|
|
2
|
+
|
|
3
|
+
$gray:#505153;
|
|
4
|
+
$gray-light: #d9d9d9;
|
|
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
|
+
|
|
19
|
+
$yellow: #D7E542;
|
|
20
|
+
$yellow-dark: #BBC02C;
|
|
21
|
+
$yellow-light: #E9F75A;
|
|
22
|
+
|
|
23
|
+
$gray-background: rgb(238, 238, 238);
|
|
24
|
+
$background: lighten($gray, 63);
|
|
25
|
+
|
|
26
|
+
$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
|
|
27
|
+
|
|
28
|
+
//----------------------------------------------------------------
|
|
29
|
+
// TODO add breaks for sizes based on bootstrap
|
|
30
|
+
//----------------------------------------------------------------
|
|
31
|
+
|
|
32
|
+
//----------------------------------------------------------------
|
|
33
|
+
// Scoped Fortycons
|
|
34
|
+
//----------------------------------------------------------------
|
|
35
|
+
@font-face {
|
|
36
|
+
font-family: "fortycons";
|
|
37
|
+
src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff");
|
|
38
|
+
font-weight: normal;
|
|
39
|
+
font-style: normal;
|
|
40
|
+
}
|
|
41
|
+
$fortycons:"fortycons";
|
|
42
|
+
$fortycon-add: "\f18b";
|
|
43
|
+
$fortycon-add-outline: "\f18a";
|
|
44
|
+
$fortycon-arrow-down-large: "\f111";
|
|
45
|
+
$fortycon-arrow-left-large: "\f112";
|
|
46
|
+
$fortycon-arrow-right-large: "\f113";
|
|
47
|
+
$fortycon-arrow-up-large: "\f114";
|
|
48
|
+
$fortycon-caret-down: "\f11a";
|
|
49
|
+
$fortycon-caret-left: "\f11b";
|
|
50
|
+
$fortycon-caret-right: "\f11c";
|
|
51
|
+
$fortycon-caret-up: "\f11d";
|
|
52
|
+
$fortycon-check: "\f120";
|
|
53
|
+
$fortycon-check-outline: "\f121";
|
|
54
|
+
$fortycon-x: "\f17a";
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: uniform-ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 0.5.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ben Ehmke
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-09-
|
|
11
|
+
date: 2016-09-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rake
|
|
@@ -38,6 +38,20 @@ dependencies:
|
|
|
38
38
|
- - ">="
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '0'
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: activesupport
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - ">="
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '0'
|
|
48
|
+
type: :development
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - ">="
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: '0'
|
|
41
55
|
- !ruby/object:Gem::Dependency
|
|
42
56
|
name: bourbon
|
|
43
57
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -66,7 +80,7 @@ dependencies:
|
|
|
66
80
|
- - ">="
|
|
67
81
|
- !ruby/object:Gem::Version
|
|
68
82
|
version: '0'
|
|
69
|
-
description: Sass
|
|
83
|
+
description: Sass components and defaults for building a UI that's on fleak.
|
|
70
84
|
email:
|
|
71
85
|
- benehmke@gmail.com
|
|
72
86
|
executables: []
|
|
@@ -85,17 +99,34 @@ files:
|
|
|
85
99
|
- lib/uniform/ui.rb
|
|
86
100
|
- preview.css
|
|
87
101
|
- preview/index.html.erb
|
|
88
|
-
- preview/preview.
|
|
89
|
-
-
|
|
90
|
-
-
|
|
102
|
+
- preview/preview.scss
|
|
103
|
+
- site/index.html
|
|
104
|
+
- site/logo.png
|
|
105
|
+
- site/preview.css
|
|
106
|
+
- site/site/logo.png
|
|
107
|
+
- site/site/preview.css
|
|
108
|
+
- site/site/uniform.css
|
|
109
|
+
- site/uniform.css
|
|
91
110
|
- uniform.gemspec
|
|
92
|
-
- vendor/assets/stylesheets/uniform.
|
|
93
|
-
- vendor/assets/stylesheets/uniform/components/buttons.
|
|
94
|
-
- vendor/assets/stylesheets/uniform/components/
|
|
95
|
-
- vendor/assets/stylesheets/uniform/components/
|
|
96
|
-
- vendor/assets/stylesheets/uniform/
|
|
97
|
-
- vendor/assets/stylesheets/uniform/
|
|
98
|
-
- vendor/assets/stylesheets/uniform/
|
|
111
|
+
- vendor/assets/stylesheets/uniform.scss
|
|
112
|
+
- vendor/assets/stylesheets/uniform/components/buttons.scss
|
|
113
|
+
- vendor/assets/stylesheets/uniform/components/card.scss
|
|
114
|
+
- vendor/assets/stylesheets/uniform/components/form.scss
|
|
115
|
+
- vendor/assets/stylesheets/uniform/components/grid.scss
|
|
116
|
+
- vendor/assets/stylesheets/uniform/components/inputs.scss
|
|
117
|
+
- vendor/assets/stylesheets/uniform/components/lists.scss
|
|
118
|
+
- vendor/assets/stylesheets/uniform/components/loaders.scss
|
|
119
|
+
- vendor/assets/stylesheets/uniform/components/nav.scss
|
|
120
|
+
- vendor/assets/stylesheets/uniform/components/row.scss
|
|
121
|
+
- vendor/assets/stylesheets/uniform/components/table-container.scss
|
|
122
|
+
- vendor/assets/stylesheets/uniform/components/table-form.scss
|
|
123
|
+
- vendor/assets/stylesheets/uniform/components/tabs.scss
|
|
124
|
+
- vendor/assets/stylesheets/uniform/components/tile.scss
|
|
125
|
+
- vendor/assets/stylesheets/uniform/defaults.scss
|
|
126
|
+
- vendor/assets/stylesheets/uniform/helpers.scss
|
|
127
|
+
- vendor/assets/stylesheets/uniform/mixins.scss
|
|
128
|
+
- vendor/assets/stylesheets/uniform/mixins/grid-framework.scss
|
|
129
|
+
- vendor/assets/stylesheets/uniform/variables.scss
|
|
99
130
|
homepage: http://bemky.github.io/uniform/
|
|
100
131
|
licenses:
|
|
101
132
|
- MIT
|
data/preview/preview.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
*{box-sizing:border-box}
|
data/preview/preview.css.scss
DELETED
data/preview/uniform.css
DELETED
|
File without changes
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
//----------------------------------------------------------------
|
|
2
|
-
// Dots
|
|
3
|
-
//----------------------------------------------------------------
|
|
4
|
-
.loader-dots{
|
|
5
|
-
font-size:2em;
|
|
6
|
-
line-height:1em;
|
|
7
|
-
display:inline-block;
|
|
8
|
-
.loader-dots-container{
|
|
9
|
-
letter-spacing:-.05em;
|
|
10
|
-
white-space:nowrap;
|
|
11
|
-
span{
|
|
12
|
-
color:rgba(white, 1);
|
|
13
|
-
text-shadow:-1px -1px 0 rgba(black, .2);
|
|
14
|
-
@include animation(loader-dots 1s infinite linear);
|
|
15
|
-
@include animation-delay(.2s);
|
|
16
|
-
}
|
|
17
|
-
span:first-of-type{
|
|
18
|
-
@include animation-delay(0);
|
|
19
|
-
}
|
|
20
|
-
span:last-of-type{
|
|
21
|
-
@include animation-delay(.4s);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
&.light{
|
|
25
|
-
.loader-dots-container{
|
|
26
|
-
span{
|
|
27
|
-
color:rgba(black, 1);
|
|
28
|
-
text-shadow:-1px -1px 0 rgba(white, .2);
|
|
29
|
-
@include animation(loader-dots-light 1s infinite linear);
|
|
30
|
-
@include animation-delay(.2s);
|
|
31
|
-
}
|
|
32
|
-
span:first-of-type{
|
|
33
|
-
@include animation-delay(0);
|
|
34
|
-
}
|
|
35
|
-
span:last-of-type{
|
|
36
|
-
@include animation-delay(.4s);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
@include keyframes (loader-dots) {
|
|
42
|
-
0%{ color:rgba(white, 0); }
|
|
43
|
-
25%{ color:rgba(white, 1); }
|
|
44
|
-
100%{ color:rgba(white, 1); }
|
|
45
|
-
}
|
|
46
|
-
@include keyframes (loader-dots-light) {
|
|
47
|
-
0%{ color:rgba(black, 1); }
|
|
48
|
-
25%{ color:rgba(black, 0.2); }
|
|
49
|
-
100%{ color:rgba(black, 0.2); }
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
//----------------------------------------------------------------
|
|
54
|
-
// Windows
|
|
55
|
-
//----------------------------------------------------------------
|
|
56
|
-
.loader-windows{
|
|
57
|
-
display:inline-block;
|
|
58
|
-
.loader-windows-container{
|
|
59
|
-
$size:5px;
|
|
60
|
-
$margin:3px;
|
|
61
|
-
$speed:.5s;
|
|
62
|
-
height:($size + $margin)*5;
|
|
63
|
-
width:($size + $margin)*4;
|
|
64
|
-
position:relative;
|
|
65
|
-
&>div{
|
|
66
|
-
width:$size;
|
|
67
|
-
height:$size;
|
|
68
|
-
background:rgba(white, 0.2);
|
|
69
|
-
position:absolute;
|
|
70
|
-
@include animation(loader-fade $speed infinite linear);
|
|
71
|
-
box-shadow: inset 1px 1px 1px rgba(black, .1)
|
|
72
|
-
}
|
|
73
|
-
&>[class*=a]{left:0;}
|
|
74
|
-
&>[class*=b]{left:$size+$margin;}
|
|
75
|
-
&>[class*=c]{left:$size*2+$margin*2;}
|
|
76
|
-
&>[class*=d]{left:$size*3+$margin*3;}
|
|
77
|
-
&>[class*="1"]{top:$size*4+$margin*4;}
|
|
78
|
-
&>[class*="2"]{top:$size*3+$margin*3;}
|
|
79
|
-
&>[class*="3"]{top:$size*2+$margin*2;}
|
|
80
|
-
&>[class*="4"]{top:$size+$margin;}
|
|
81
|
-
&>[class*="5"]{top:0;}
|
|
82
|
-
.a1{@include animation-delay($speed/4);}
|
|
83
|
-
.a2{@include animation-delay($speed/2);}
|
|
84
|
-
.a3{@include animation-delay($speed/4*3);}
|
|
85
|
-
.a4{@include animation-delay($speed);}
|
|
86
|
-
.b1{@include animation-delay($speed/3);}
|
|
87
|
-
.b2{@include animation-delay($speed/3*2);}
|
|
88
|
-
.b3{@include animation-delay($speed);}
|
|
89
|
-
.c1{@include animation-delay($speed/5);}
|
|
90
|
-
.c2{@include animation-delay($speed/5*2);}
|
|
91
|
-
.c3{@include animation-delay($speed/5*3);}
|
|
92
|
-
.c4{@include animation-delay($speed/5*4);}
|
|
93
|
-
.c5{@include animation-delay($speed);}
|
|
94
|
-
.d1{@include animation-delay($speed/2);}
|
|
95
|
-
.d2{@include animation-delay($speed);}
|
|
96
|
-
}
|
|
97
|
-
&.small{
|
|
98
|
-
.loader-windows-container{
|
|
99
|
-
$size:3px;
|
|
100
|
-
$margin:1px;
|
|
101
|
-
height:($size + $margin)*5;
|
|
102
|
-
width:($size + $margin)*4;
|
|
103
|
-
&>div{
|
|
104
|
-
width:$size;
|
|
105
|
-
height:$size;
|
|
106
|
-
}
|
|
107
|
-
&>[class*=a]{left:0;}
|
|
108
|
-
&>[class*=b]{left:$size+$margin;}
|
|
109
|
-
&>[class*=c]{left:$size*2+$margin*2;}
|
|
110
|
-
&>[class*=d]{left:$size*3+$margin*3;}
|
|
111
|
-
&>[class*="1"]{top:$size*4+$margin*4;}
|
|
112
|
-
&>[class*="2"]{top:$size*3+$margin*3;}
|
|
113
|
-
&>[class*="3"]{top:$size*2+$margin*2;}
|
|
114
|
-
&>[class*="4"]{top:$size+$margin;}
|
|
115
|
-
&>[class*="5"]{top:0;}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@include keyframes (loader-fade) {
|
|
121
|
-
0%{ background:rgba($green, 1); }
|
|
122
|
-
100%{ background:rgba(white, 0.2); }
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
//----------------------------------------------------------------
|
|
127
|
-
// Cover Option
|
|
128
|
-
//----------------------------------------------------------------
|
|
129
|
-
.loader-windows,
|
|
130
|
-
.loader-dots{
|
|
131
|
-
&.cover{
|
|
132
|
-
display:block;
|
|
133
|
-
position:absolute;
|
|
134
|
-
top:0;
|
|
135
|
-
left:0;
|
|
136
|
-
width:100%;
|
|
137
|
-
height:100%;
|
|
138
|
-
z-index:999;
|
|
139
|
-
background:rgba(black, .5);
|
|
140
|
-
.loader-dots-container,
|
|
141
|
-
.loader-windows-container{
|
|
142
|
-
@include align-middle;
|
|
143
|
-
position:absolute;
|
|
144
|
-
}
|
|
145
|
-
&.light{
|
|
146
|
-
background:rgba(white, 0.5);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
.text-overflow{
|
|
2
|
-
@include text-overflow;
|
|
3
|
-
}
|
|
4
|
-
.strong,
|
|
5
|
-
strong{
|
|
6
|
-
font-weight: 700;
|
|
7
|
-
}
|
|
8
|
-
.hide{
|
|
9
|
-
display:none;
|
|
10
|
-
}
|
|
11
|
-
.center{
|
|
12
|
-
text-align: center;
|
|
13
|
-
}
|
|
14
|
-
.clear{
|
|
15
|
-
clear:both;
|
|
16
|
-
}
|
|
17
|
-
.bleed-fix{
|
|
18
|
-
position:static;
|
|
19
|
-
overflow:hidden;
|
|
20
|
-
}
|
|
21
|
-
.handle{
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
cursor: hand;
|
|
24
|
-
}
|
|
25
|
-
.right{
|
|
26
|
-
float:right;
|
|
27
|
-
}
|
|
28
|
-
.no-gutter{
|
|
29
|
-
padding-left:0;
|
|
30
|
-
padding-right:0;
|
|
31
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
// Colors
|
|
2
|
-
$gray:#585858;
|
|
3
|
-
$gray-light: #d9d9d9;
|
|
4
|
-
$gray-dark:darken($gray, 10);
|
|
5
|
-
$gray-background: rgb(238, 238, 238);
|
|
6
|
-
|
|
7
|
-
$green:#97C848;
|
|
8
|
-
$green-light:#BBFF00;
|
|
9
|
-
$green-dark:#709239;
|
|
10
|
-
|
|
11
|
-
$blue:#0994E2;
|
|
12
|
-
$blue-light:#A7CDF2;
|
|
13
|
-
$blue-dark:#396F96;
|
|
14
|
-
|
|
15
|
-
$red:#E1563E;
|
|
16
|
-
$red-light:#E5766C;
|
|
17
|
-
$red-dark:#971710;
|
|
18
|
-
|
|
19
|
-
$yellow: #D7E542;
|
|
20
|
-
$yellow-dark: #BBC02C;
|
|
21
|
-
$yellow-light: #E9F75A;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
//Responsive Breakpoints
|
|
25
|
-
$mobile: new-breakpoint(max-width 600px 6);
|
|
26
|
-
$mobile-narrow: new-breakpoint(max-width 450px 6);
|
|
27
|
-
$wide: new-breakpoint(min-width 1200px);
|
|
28
|
-
$narrow: new-breakpoint( max-width 1000px);
|
|
29
|
-
$normal: new-breakpoint( min-width 1000px max-width 1200px);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// Responsive Breakpoints based on Bootstrap sizes
|
|
33
|
-
$xs: new-breakpoint(max-width 767px);
|
|
34
|
-
$sm: new-breakpoint(min-width 768px max-width 991px);
|
|
35
|
-
$md: new-breakpoint(min-width 992px max-width 1199px);
|
|
36
|
-
$lg: new-breakpoint(min-width 1200px);
|
|
37
|
-
$max-xs: new-breakpoint(max-width 767px);
|
|
38
|
-
$max-sm: new-breakpoint(max-width 991px);
|
|
39
|
-
$max-md: new-breakpoint(max-width 1199px);
|
|
40
|
-
$max-lg: new-breakpoint(min-width 1200px);
|
|
41
|
-
$min-xs: new-breakpoint(min-width 480px);
|
|
42
|
-
$min-sm: new-breakpoint(min-width 768px);
|
|
43
|
-
$min-md: new-breakpoint(min-width 992px);
|
|
44
|
-
$min-lg: new-breakpoint( min-width 1200px);
|