materialize-sass 0.95.3 → 0.95.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,92 +1,92 @@
1
- .slider {
2
- position: relative;
3
- height: 440px;
4
- width: 100%;
5
-
6
- // Fullscreen slider
7
- &.fullscreen {
8
- height: 100%;
9
- width: 100%;
10
- position: absolute;
11
- top: 0;
12
- left: 0;
13
- right: 0;
14
- bottom: 0;
15
-
16
- ul.slides {
17
- height: 100%;
18
- }
19
-
20
- ul.indicators {
21
- z-index: 2;
22
- bottom: 30px;
23
- }
24
- }
25
-
26
- ul.slides {
27
- background-color: color('grey', 'base');
28
- margin: 0;
29
- height: 400px;
30
-
31
- li {
32
- @include opacity(0);
33
- position: absolute;
34
- top: 0;
35
- left: 0;
36
- z-index: 1;
37
- width: 100%;
38
- height: inherit;
39
- overflow: hidden;
40
-
41
- img {
42
- height: 100%;
43
- width: 100%;
44
- background-size: cover;
45
- background-position: center;
46
- }
47
-
48
- .caption {
49
- color: #fff;
50
- position: absolute;
51
- top: 15%;
52
- left: 15%;
53
- width: 70%;
54
- @include opacity(0);
55
-
56
- p { color: color('grey', 'lighten-2'); }
57
- }
58
-
59
- &.active {
60
- z-index: 2;
61
- }
62
- }
63
- }
64
-
65
-
66
- ul.indicators {
67
- position: absolute;
68
- text-align: center;
69
- left: 0;
70
- right: 0;
71
- bottom: 0;
72
- margin: 0;
73
-
74
- li.indicator-item {
75
- display: inline-block;
76
- position: relative;
77
- cursor: pointer;
78
- height: 16px;
79
- width: 16px;
80
- margin: 0 12px;
81
- background-color: color('grey', 'lighten-2');
82
-
83
- @include transition(background-color .3s);
84
- @include border-radius(50%);
85
-
86
- &.active {
87
- background-color: color('green', 'base');
88
- }
89
- }
90
- }
91
-
92
- }
1
+ .slider {
2
+ position: relative;
3
+ height: 440px;
4
+ width: 100%;
5
+
6
+ // Fullscreen slider
7
+ &.fullscreen {
8
+ height: 100%;
9
+ width: 100%;
10
+ position: absolute;
11
+ top: 0;
12
+ left: 0;
13
+ right: 0;
14
+ bottom: 0;
15
+
16
+ ul.slides {
17
+ height: 100%;
18
+ }
19
+
20
+ ul.indicators {
21
+ z-index: 2;
22
+ bottom: 30px;
23
+ }
24
+ }
25
+
26
+ ul.slides {
27
+ background-color: color('grey', 'base');
28
+ margin: 0;
29
+ height: 400px;
30
+
31
+ li {
32
+ @include opacity(0);
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ z-index: 1;
37
+ width: 100%;
38
+ height: inherit;
39
+ overflow: hidden;
40
+
41
+ img {
42
+ height: 100%;
43
+ width: 100%;
44
+ background-size: cover;
45
+ background-position: center;
46
+ }
47
+
48
+ .caption {
49
+ color: #fff;
50
+ position: absolute;
51
+ top: 15%;
52
+ left: 15%;
53
+ width: 70%;
54
+ @include opacity(0);
55
+
56
+ p { color: color('grey', 'lighten-2'); }
57
+ }
58
+
59
+ &.active {
60
+ z-index: 2;
61
+ }
62
+ }
63
+ }
64
+
65
+
66
+ ul.indicators {
67
+ position: absolute;
68
+ text-align: center;
69
+ left: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ margin: 0;
73
+
74
+ li.indicator-item {
75
+ display: inline-block;
76
+ position: relative;
77
+ cursor: pointer;
78
+ height: 16px;
79
+ width: 16px;
80
+ margin: 0 12px;
81
+ background-color: color('grey', 'lighten-2');
82
+
83
+ @include transition(background-color .3s);
84
+ @include border-radius(50%);
85
+
86
+ &.active {
87
+ background-color: color('green', 'base');
88
+ }
89
+ }
90
+ }
91
+
92
+ }
@@ -4,25 +4,25 @@ a {
4
4
 
5
5
  html{
6
6
  line-height: 1.5;
7
-
7
+
8
8
  @media only screen and (min-width: 0) {
9
9
  font-size: 14px;
10
10
  }
11
-
11
+
12
12
  @media only screen and (min-width: $medium-screen) {
13
13
  font-size: 14.5px;
14
14
  }
15
-
15
+
16
16
  @media only screen and (min-width: $large-screen) {
17
17
  font-size: 15px;
18
18
  }
19
-
19
+
20
20
  font-family: "Roboto", sans-serif;
21
21
  font-weight: normal;
22
22
  color: $off-black;
23
23
  }
24
24
  h1, h2, h3, h4, h5, h6 {
25
- font-weight: 400;
25
+ font-weight: 400;
26
26
  }
27
27
 
28
28
  // Header Styles
@@ -52,4 +52,4 @@ small { font-size: 75%; }
52
52
  }
53
53
  $i: $i + 1;
54
54
  }
55
- }
55
+ }
@@ -1,135 +1,135 @@
1
- /*** Colors ***/
2
- $primary-color: color("materialize-red", "lighten-2") !default;
3
- $primary-color-light: false !default;
4
- $primary-color-dark: false !default;
5
- @if not $primary-color-light {
6
- $primary-color-light: lighten($primary-color, 15%);
7
- }
8
- @if not $primary-color-dark {
9
- $primary-color-dark: darken($primary-color, 15%);
10
- }
11
-
12
- $secondary-color: color("teal", "lighten-1") !default;
13
- $success-color: color("green", "base") !default;
14
- $error-color: color("red", "base") !default;
15
- $link-color: color("light-blue", "darken-1") !default;
16
-
17
- /*** Badges ***/
18
- $badge-bg-color: $secondary-color;
19
-
20
- /*** Buttons ***/
21
- $button-bg-color-disabled: #DFDFDF !default;
22
- $button-color: $secondary-color !default;
23
- $button-color-disabled: #9F9F9F !default;
24
- $button-color-flat: #343434 !default;
25
- $button-color-raised: #FFF !default;
26
- $button-floating-size: 37px !default;
27
- $button-height: 36px !default;
28
- $button-font-size-shared: 1.3rem !default;
29
- $button-line-height: 36px !default;
30
-
31
-
32
- /*** Cards ***/
33
- $card-padding: 20px !default;
34
- $card-bg-color: #fff !default;
35
-
36
- /*** Collapsible ***/
37
- $collapsible-height: 3rem !default;
38
- $collapsible-header-color: #fff !default;
39
- $collapsible-border-color: #ddd !default;
40
-
41
-
42
- /*** Dropdown ***/
43
- $dropdown-color: $secondary-color;
44
-
45
- /*** Fonts ***/
46
- $roboto-font-path: "roboto/" !default;
47
- $icons-font-path: "material-design-icons/" !default;
48
-
49
- /*** Forms ***/
50
- // Text Inputs + Textarea
51
- $input-border-color: color("grey", "base") !default;
52
- $input-error-color: $error-color !default;
53
- $input-success-color: $success-color !default;
54
- $input-focus-color: $secondary-color !default;
55
- $label-font-size: .8rem !default;
56
- $input-disabled-color: rgba(0,0,0, .26) !default;
57
-
58
-
59
- // Radio Buttons
60
- $radio-fill-color: $secondary-color !default;
61
- $radio-empty-color: #5a5a5a !default;
62
-
63
- /*** Global ***/
64
- // Media Query Ranges
65
- $small-screen-up: 601px !default;
66
- $medium-screen-up: 993px !default;
67
- $large-screen-up: 1201px !default;
68
- $small-screen: 600px !default;
69
- $medium-screen: 992px !default;
70
- $large-screen: 1200px !default;
71
-
72
- $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
73
- $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
74
- $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
75
- $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
76
- $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
77
-
78
- // Grid Variables
79
- $num-cols: 12 !default;
80
- $gutter-width: 1.5rem !default;
81
- $element-top-margin: $gutter-width/3 !default;
82
- $element-bottom-margin: ($gutter-width*2)/3 !default;
83
-
84
- /*** Navbar ***/
85
- $navbar-height: 64px !default;
86
- $navbar-height-mobile: 56px !default;
87
-
88
-
89
- /*** SideNav ***/
90
-
91
-
92
-
93
- /*** Tabs ***/
94
- $tabs-underline-color: $primary-color-light;
95
- $tabs-text-color: $primary-color;
96
-
97
- /*** Tables ***/
98
- $table-border-color: #d0d0d0;
99
- $table-striped-color: #f2f2f2;
100
-
101
- /*** Toasts ***/
102
- $toast-height: 48px !default;
103
- $toast-color: #323232 !default;
104
- $toast-text-color: #fff !default;
105
-
106
- /*** Typography ***/
107
- $off-black: rgba(0, 0, 0, 0.87) !default;
108
- // Header Styles
109
- $h1-fontsize: 4.2rem !default;
110
- $h2-fontsize: 3.56rem !default;
111
- $h3-fontsize: 2.92rem !default;
112
- $h4-fontsize: 2.28rem !default;
113
- $h5-fontsize: 1.64rem !default;
114
- $h6-fontsize: 1rem !default;
115
-
116
- // Footer
117
- $footer-bg-color: $primary-color;
118
-
119
- // Flowtext
120
- $range : $large-screen - $small-screen !default;
121
- $intervals: 20 !default;
122
- $interval-size: $range / $intervals !default;
123
-
124
- /*** Collections ***/
125
- $collection-border-color: #e0e0e0 !default;
126
- $collection-bg-color: #999 !default;
127
- $collection-item-color: #fff !default;
128
- $collection-active-bg-color: $secondary-color !default;
129
- $collection-active-color: lighten($secondary-color, 55%) !default;
130
- $collection-hover-bg-color: #ddd !default;
131
- $collection-header-color: #fff !default;
132
- // $collection-hover-bg-color: rgba(0,0,0,.08) !default;
133
-
134
- /* Progress Bar */
135
- $progress-bar-color: $secondary-color;
1
+ /*** Colors ***/
2
+ $primary-color: color("materialize-red", "lighten-2") !default;
3
+ $primary-color-light: false !default;
4
+ $primary-color-dark: false !default;
5
+ @if not $primary-color-light {
6
+ $primary-color-light: lighten($primary-color, 15%);
7
+ }
8
+ @if not $primary-color-dark {
9
+ $primary-color-dark: darken($primary-color, 15%);
10
+ }
11
+
12
+ $secondary-color: color("teal", "lighten-1") !default;
13
+ $success-color: color("green", "base") !default;
14
+ $error-color: color("red", "base") !default;
15
+ $link-color: color("light-blue", "darken-1") !default;
16
+
17
+ /*** Badges ***/
18
+ $badge-bg-color: $secondary-color;
19
+
20
+ /*** Buttons ***/
21
+ $button-bg-color-disabled: #DFDFDF !default;
22
+ $button-color: $secondary-color !default;
23
+ $button-color-disabled: #9F9F9F !default;
24
+ $button-color-flat: #343434 !default;
25
+ $button-color-raised: #FFF !default;
26
+ $button-floating-size: 37px !default;
27
+ $button-height: 36px !default;
28
+ $button-font-size-shared: 1.3rem !default;
29
+ $button-line-height: 36px !default;
30
+
31
+
32
+ /*** Cards ***/
33
+ $card-padding: 20px !default;
34
+ $card-bg-color: #fff !default;
35
+
36
+ /*** Collapsible ***/
37
+ $collapsible-height: 3rem !default;
38
+ $collapsible-header-color: #fff !default;
39
+ $collapsible-border-color: #ddd !default;
40
+
41
+
42
+ /*** Dropdown ***/
43
+ $dropdown-color: $secondary-color;
44
+
45
+ /*** Fonts ***/
46
+ $roboto-font-path: "roboto/" !default;
47
+ $icons-font-path: "material-design-icons/" !default;
48
+
49
+ /*** Forms ***/
50
+ // Text Inputs + Textarea
51
+ $input-border-color: color("grey", "base") !default;
52
+ $input-error-color: $error-color !default;
53
+ $input-success-color: $success-color !default;
54
+ $input-focus-color: $secondary-color !default;
55
+ $label-font-size: .8rem !default;
56
+ $input-disabled-color: rgba(0,0,0, .26) !default;
57
+
58
+
59
+ // Radio Buttons
60
+ $radio-fill-color: $secondary-color !default;
61
+ $radio-empty-color: #5a5a5a !default;
62
+
63
+ /*** Global ***/
64
+ // Media Query Ranges
65
+ $small-screen-up: 601px !default;
66
+ $medium-screen-up: 993px !default;
67
+ $large-screen-up: 1201px !default;
68
+ $small-screen: 600px !default;
69
+ $medium-screen: 992px !default;
70
+ $large-screen: 1200px !default;
71
+
72
+ $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
73
+ $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
74
+ $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
75
+ $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
76
+ $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
77
+
78
+ // Grid Variables
79
+ $num-cols: 12 !default;
80
+ $gutter-width: 1.5rem !default;
81
+ $element-top-margin: $gutter-width/3 !default;
82
+ $element-bottom-margin: ($gutter-width*2)/3 !default;
83
+
84
+ /*** Navbar ***/
85
+ $navbar-height: 64px !default;
86
+ $navbar-height-mobile: 56px !default;
87
+
88
+
89
+ /*** SideNav ***/
90
+
91
+
92
+
93
+ /*** Tabs ***/
94
+ $tabs-underline-color: $primary-color-light;
95
+ $tabs-text-color: $primary-color;
96
+
97
+ /*** Tables ***/
98
+ $table-border-color: #d0d0d0;
99
+ $table-striped-color: #f2f2f2;
100
+
101
+ /*** Toasts ***/
102
+ $toast-height: 48px !default;
103
+ $toast-color: #323232 !default;
104
+ $toast-text-color: #fff !default;
105
+
106
+ /*** Typography ***/
107
+ $off-black: rgba(0, 0, 0, 0.87) !default;
108
+ // Header Styles
109
+ $h1-fontsize: 4.2rem !default;
110
+ $h2-fontsize: 3.56rem !default;
111
+ $h3-fontsize: 2.92rem !default;
112
+ $h4-fontsize: 2.28rem !default;
113
+ $h5-fontsize: 1.64rem !default;
114
+ $h6-fontsize: 1rem !default;
115
+
116
+ // Footer
117
+ $footer-bg-color: $primary-color;
118
+
119
+ // Flowtext
120
+ $range : $large-screen - $small-screen !default;
121
+ $intervals: 20 !default;
122
+ $interval-size: $range / $intervals !default;
123
+
124
+ /*** Collections ***/
125
+ $collection-border-color: #e0e0e0 !default;
126
+ $collection-bg-color: #999 !default;
127
+ $collection-item-color: #fff !default;
128
+ $collection-active-bg-color: $secondary-color !default;
129
+ $collection-active-color: lighten($secondary-color, 55%) !default;
130
+ $collection-hover-bg-color: #ddd !default;
131
+ $collection-header-color: #fff !default;
132
+ // $collection-hover-bg-color: rgba(0,0,0,.08) !default;
133
+
134
+ /* Progress Bar */
135
+ $progress-bar-color: $secondary-color;