anc 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/_sass/anc.scss +9 -0
  3. data/_sass/anc/_base.scss +144 -0
  4. data/_sass/anc/_layout.scss +0 -0
  5. data/_sass/anc/_materialize.scss +42 -0
  6. data/_sass/anc/_syntax-highlighting.scss +78 -0
  7. data/_sass/anc/components/_variables.scss +343 -0
  8. data/_sass/materialize/components/_badges.scss +47 -0
  9. data/_sass/materialize/components/_buttons.scss +291 -0
  10. data/_sass/materialize/components/_cards.scss +196 -0
  11. data/_sass/materialize/components/_carousel.scss +90 -0
  12. data/_sass/materialize/components/_chips.scss +89 -0
  13. data/_sass/materialize/components/_collapsible.scss +84 -0
  14. data/_sass/materialize/components/_color.scss +412 -0
  15. data/_sass/materialize/components/_dropdown.scss +68 -0
  16. data/_sass/materialize/components/_global.scss +734 -0
  17. data/_sass/materialize/components/_grid.scss +156 -0
  18. data/_sass/materialize/components/_icons-material-design.scss +5 -0
  19. data/_sass/materialize/components/_materialbox.scss +43 -0
  20. data/_sass/materialize/components/_modal.scss +90 -0
  21. data/_sass/materialize/components/_navbar.scss +208 -0
  22. data/_sass/materialize/components/_normalize.scss +424 -0
  23. data/_sass/materialize/components/_preloader.scss +334 -0
  24. data/_sass/materialize/components/_pulse.scss +34 -0
  25. data/_sass/materialize/components/_roboto.scss +39 -0
  26. data/_sass/materialize/components/_sideNav.scss +214 -0
  27. data/_sass/materialize/components/_slider.scss +92 -0
  28. data/_sass/materialize/components/_table_of_contents.scss +33 -0
  29. data/_sass/materialize/components/_tabs.scss +93 -0
  30. data/_sass/materialize/components/_tapTarget.scss +103 -0
  31. data/_sass/materialize/components/_toast.scss +59 -0
  32. data/_sass/materialize/components/_tooltip.scss +31 -0
  33. data/_sass/materialize/components/_transitions.scss +13 -0
  34. data/_sass/materialize/components/_typography.scss +61 -0
  35. data/_sass/materialize/components/_variables.scss +343 -0
  36. data/_sass/materialize/components/_waves.scss +114 -0
  37. data/_sass/materialize/components/date_picker/_default.date.scss +456 -0
  38. data/_sass/materialize/components/date_picker/_default.scss +212 -0
  39. data/_sass/materialize/components/date_picker/_default.time.scss +267 -0
  40. data/_sass/materialize/components/forms/_checkboxes.scss +210 -0
  41. data/_sass/materialize/components/forms/_file-input.scss +44 -0
  42. data/_sass/materialize/components/forms/_forms.scss +22 -0
  43. data/_sass/materialize/components/forms/_input-fields.scss +333 -0
  44. data/_sass/materialize/components/forms/_radio-buttons.scss +115 -0
  45. data/_sass/materialize/components/forms/_range.scss +160 -0
  46. data/_sass/materialize/components/forms/_select.scss +182 -0
  47. data/_sass/materialize/components/forms/_switches.scss +89 -0
  48. data/_sass/materialize/materialize.scss +42 -0
  49. metadata +48 -1
@@ -0,0 +1,34 @@
1
+ .pulse {
2
+ &::before {
3
+ content: '';
4
+ display: block;
5
+ position: absolute;
6
+ width: 100%;
7
+ height: 100%;
8
+ top: 0;
9
+ left: 0;
10
+ background-color: inherit;
11
+ border-radius: inherit;
12
+ transition: opacity .3s, transform .3s;
13
+ animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
14
+ z-index: -1;
15
+ }
16
+
17
+ overflow: initial;
18
+ position: relative;
19
+ }
20
+
21
+ @keyframes pulse-animation {
22
+ 0% {
23
+ opacity: 1;
24
+ transform: scale(1);
25
+ }
26
+ 50% {
27
+ opacity: 0;
28
+ transform: scale(1.5);
29
+ }
30
+ 100% {
31
+ opacity: 0;
32
+ transform: scale(1.5);
33
+ }
34
+ }
@@ -0,0 +1,39 @@
1
+ @font-face {
2
+ font-family: "Roboto";
3
+ src: local(Roboto Thin),
4
+ url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
5
+ url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
6
+
7
+ font-weight: 100;
8
+ }
9
+ @font-face {
10
+ font-family: "Roboto";
11
+ src: local(Roboto Light),
12
+ url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
13
+ url("#{$roboto-font-path}Roboto-Light.woff") format("woff");
14
+ font-weight: 300;
15
+ }
16
+
17
+ @font-face {
18
+ font-family: "Roboto";
19
+ src: local(Roboto Regular),
20
+ url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
21
+ url("#{$roboto-font-path}Roboto-Regular.woff") format("woff");
22
+ font-weight: 400;
23
+ }
24
+
25
+ @font-face {
26
+ font-family: "Roboto";
27
+ src: local(Roboto Medium),
28
+ url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
29
+ url("#{$roboto-font-path}Roboto-Medium.woff") format("woff");
30
+ font-weight: 500;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: "Roboto";
35
+ src: local(Roboto Bold),
36
+ url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
37
+ url("#{$roboto-font-path}Roboto-Bold.woff") format("woff");
38
+ font-weight: 700;
39
+ }
@@ -0,0 +1,214 @@
1
+ .side-nav {
2
+ position: fixed;
3
+ width: 300px;
4
+ left: 0;
5
+ top: 0;
6
+ margin: 0;
7
+ transform: translateX(-100%);
8
+ height: 100%;
9
+ height: calc(100% + 60px);
10
+ height: -moz-calc(100%); //Temporary Firefox Fix
11
+ padding-bottom: 60px;
12
+ background-color: $sidenav-bg-color;
13
+ z-index: 999;
14
+ overflow-y: auto;
15
+ will-change: transform;
16
+ backface-visibility: hidden;
17
+ transform: translateX(-105%);
18
+
19
+ @extend .z-depth-1;
20
+
21
+ // Right Align
22
+ &.right-aligned {
23
+ right: 0;
24
+ transform: translateX(105%);
25
+ left: auto;
26
+ transform: translateX(100%);
27
+ }
28
+
29
+ .collapsible {
30
+ margin: 0;
31
+ }
32
+
33
+
34
+ li {
35
+ float: none;
36
+ line-height: $sidenav-line-height;
37
+
38
+ &.active { background-color: rgba(0,0,0,.05); }
39
+ }
40
+
41
+ li > a {
42
+ color: $sidenav-font-color;
43
+ display: block;
44
+ font-size: $sidenav-font-size;
45
+ font-weight: 500;
46
+ height: $sidenav-item-height;
47
+ line-height: $sidenav-line-height;
48
+ padding: 0 ($sidenav-padding * 2);
49
+
50
+ &:hover { background-color: rgba(0,0,0,.05);}
51
+
52
+ &.btn, &.btn-large, &.btn-flat, &.btn-floating {
53
+ margin: 10px 15px;
54
+ }
55
+
56
+ &.btn,
57
+ &.btn-large,
58
+ &.btn-floating { color: $button-raised-color; }
59
+ &.btn-flat { color: $button-flat-color; }
60
+
61
+ &.btn:hover,
62
+ &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
63
+ &.btn-floating:hover { background-color: $button-raised-background; }
64
+
65
+ & > i,
66
+ & > [class^="mdi-"], li > a > [class*="mdi-"],
67
+ & > i.material-icons {
68
+ float: left;
69
+ height: $sidenav-item-height;
70
+ line-height: $sidenav-line-height;
71
+ margin: 0 ($sidenav-padding * 2) 0 0;
72
+ width: $sidenav-item-height / 2;
73
+ color: rgba(0,0,0,.54);
74
+ }
75
+ }
76
+
77
+
78
+ .divider {
79
+ margin: ($sidenav-padding / 2) 0 0 0;
80
+ }
81
+
82
+ .subheader {
83
+ &:hover {
84
+ background-color: transparent;
85
+ }
86
+
87
+ cursor: initial;
88
+ pointer-events: none;
89
+ color: rgba(0,0,0,.54);
90
+ font-size: $sidenav-font-size;
91
+ font-weight: 500;
92
+ line-height: $sidenav-line-height;
93
+ }
94
+
95
+ .user-view,
96
+ .userView {
97
+ position: relative;
98
+ padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
99
+ margin-bottom: $sidenav-padding / 2;
100
+
101
+ & > a {
102
+ &:hover { background-color: transparent; }
103
+ height: auto;
104
+ padding: 0;
105
+ }
106
+
107
+ .background {
108
+ overflow: hidden;
109
+ position: absolute;
110
+ top: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ left: 0;
114
+ z-index: -1;
115
+ }
116
+
117
+ .circle, .name, .email {
118
+ display: block;
119
+ }
120
+
121
+ .circle {
122
+ height: 64px;
123
+ width: 64px;
124
+ }
125
+
126
+ .name,
127
+ .email {
128
+ font-size: $sidenav-font-size;
129
+ line-height: $sidenav-line-height / 2;
130
+ }
131
+
132
+ .name {
133
+ margin-top: 16px;
134
+ font-weight: 500;
135
+ }
136
+
137
+ .email {
138
+ padding-bottom: 16px;
139
+ font-weight: 400;
140
+ }
141
+ }
142
+ }
143
+
144
+
145
+ // Touch interaction
146
+ .drag-target {
147
+ height: 100%;
148
+ width: 10px;
149
+ position: fixed;
150
+ top: 0;
151
+ z-index: 998;
152
+ }
153
+
154
+
155
+ // Fixed side-nav shown
156
+ .side-nav.fixed {
157
+ left: 0;
158
+ transform: translateX(0);
159
+ position: fixed;
160
+
161
+ // Right Align
162
+ &.right-aligned {
163
+ right: 0;
164
+ left: auto;
165
+ }
166
+ }
167
+
168
+ // Fixed sideNav hide on smaller
169
+ @media #{$medium-and-down} {
170
+ .side-nav {
171
+ &.fixed {
172
+ transform: translateX(-105%);
173
+
174
+ &.right-aligned {
175
+ transform: translateX(105%);
176
+ }
177
+ }
178
+
179
+ a {
180
+ padding: 0 $sidenav-padding;
181
+ }
182
+
183
+ .user-view,
184
+ .userView {
185
+ padding: $sidenav-padding $sidenav-padding 0;
186
+ }
187
+ }
188
+ }
189
+
190
+
191
+ .side-nav .collapsible-body > ul:not(.collapsible) > li.active,
192
+ .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
193
+ background-color: $primary-color;
194
+ a {
195
+ color: $sidenav-bg-color;
196
+ }
197
+ }
198
+ .side-nav .collapsible-body {
199
+ padding: 0;
200
+ }
201
+
202
+
203
+ #sidenav-overlay {
204
+ position: fixed;
205
+ top: 0;
206
+ left: 0;
207
+ right: 0;
208
+
209
+ height: 120vh;
210
+ background-color: rgba(0,0,0,.5);
211
+ z-index: 997;
212
+
213
+ will-change: opacity;
214
+ }
@@ -0,0 +1,92 @@
1
+ .slider {
2
+ position: relative;
3
+ height: 400px;
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
+ .slides {
27
+ background-color: $slider-bg-color;
28
+ margin: 0;
29
+ height: 400px;
30
+
31
+ li {
32
+ 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
+ opacity: 0;
55
+
56
+ p { color: $slider-bg-color-light; }
57
+ }
58
+
59
+ &.active {
60
+ z-index: 2;
61
+ }
62
+ }
63
+ }
64
+
65
+
66
+ .indicators {
67
+ position: absolute;
68
+ text-align: center;
69
+ left: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ margin: 0;
73
+
74
+ .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: $slider-bg-color-light;
82
+
83
+ transition: background-color .3s;
84
+ border-radius: 50%;
85
+
86
+ &.active {
87
+ background-color: $slider-indicator-color;
88
+ }
89
+ }
90
+ }
91
+
92
+ }
@@ -0,0 +1,33 @@
1
+ /***************
2
+ Nav List
3
+ ***************/
4
+ .table-of-contents {
5
+ &.fixed {
6
+ position: fixed;
7
+ }
8
+
9
+ li {
10
+ padding: 2px 0;
11
+ }
12
+ a {
13
+ display: inline-block;
14
+ font-weight: 300;
15
+ color: #757575;
16
+ padding-left: 20px;
17
+ height: 1.5rem;
18
+ line-height: 1.5rem;
19
+ letter-spacing: .4;
20
+ display: inline-block;
21
+
22
+ &:hover {
23
+ color: lighten(#757575, 20%);
24
+ padding-left: 19px;
25
+ border-left: 1px solid $primary-color;
26
+ }
27
+ &.active {
28
+ font-weight: 500;
29
+ padding-left: 18px;
30
+ border-left: 2px solid $primary-color;
31
+ }
32
+ }
33
+ }
@@ -0,0 +1,93 @@
1
+ .tabs {
2
+ &.tabs-transparent {
3
+ background-color: transparent;
4
+
5
+ .tab a,
6
+ .tab.disabled a,
7
+ .tab.disabled a:hover {
8
+ color: rgba(255,255,255,0.7);
9
+ }
10
+
11
+ .tab a:hover,
12
+ .tab a.active {
13
+ color: #fff;
14
+ }
15
+
16
+ .indicator {
17
+ background-color: #fff;
18
+ }
19
+ }
20
+
21
+ &.tabs-fixed-width {
22
+ display: flex;
23
+
24
+ .tab {
25
+ flex-grow: 1;
26
+ }
27
+ }
28
+
29
+ position: relative;
30
+ overflow-x: auto;
31
+ overflow-y: hidden;
32
+ height: 48px;
33
+ width: 100%;
34
+ background-color: $tabs-bg-color;
35
+ margin: 0 auto;
36
+ white-space: nowrap;
37
+
38
+ .tab {
39
+ display: inline-block;
40
+ text-align: center;
41
+ line-height: 48px;
42
+ height: 48px;
43
+ padding: 0;
44
+ margin: 0;
45
+ text-transform: uppercase;
46
+
47
+ a {
48
+ &:hover,
49
+ &.active {
50
+ background-color: transparent;
51
+ color: $tabs-text-color;
52
+ }
53
+
54
+ color: rgba($tabs-text-color, .7);
55
+ display: block;
56
+ width: 100%;
57
+ height: 100%;
58
+ padding: 0 24px;
59
+ font-size: 14px;
60
+ text-overflow: ellipsis;
61
+ overflow: hidden;
62
+ transition: color .28s ease;
63
+ }
64
+
65
+ &.disabled a,
66
+ &.disabled a:hover {
67
+ color: rgba($tabs-text-color, .7);
68
+ cursor: default;
69
+ }
70
+ }
71
+ .indicator {
72
+ position: absolute;
73
+ bottom: 0;
74
+ height: 2px;
75
+ background-color: $tabs-underline-color;
76
+ will-change: left, right;
77
+ }
78
+ }
79
+
80
+ // Fixed sideNav hide on smaller
81
+ @media #{$medium-and-down} {
82
+ .tabs {
83
+ display: flex;
84
+
85
+ .tab {
86
+ flex-grow: 1;
87
+
88
+ a {
89
+ padding: 0 12px;
90
+ }
91
+ }
92
+ }
93
+ }