material-sass 4.0.0.alpha5 → 4.0.0.alpha6

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.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js +7 -5
  3. data/app/assets/javascripts/material/addons-materialise/wave.js +11 -8
  4. data/app/assets/javascripts/material/src/floating-label.js +5 -5
  5. data/app/assets/javascripts/material/src/navdrawer.js +7 -7
  6. data/app/assets/javascripts/material/src/tab-switch.js +15 -18
  7. data/app/assets/javascripts/material/src/util.js +1 -1
  8. data/app/assets/javascripts/material.js +24 -27
  9. data/app/assets/stylesheets/material/_mixins.scss +2 -0
  10. data/app/assets/stylesheets/material/_utilities.scss +3 -0
  11. data/app/assets/stylesheets/material/_variables.scss +24 -2
  12. data/app/assets/stylesheets/material/base/_base.scss +5 -482
  13. data/app/assets/stylesheets/material/base/_grid.scss +11 -0
  14. data/app/assets/stylesheets/material/base/_normalize.scss +253 -0
  15. data/app/assets/stylesheets/material/base/_reboot.scss +239 -0
  16. data/app/assets/stylesheets/material/base/_typography.scss +0 -10
  17. data/app/assets/stylesheets/material/bootstrap/_alert.scss +0 -1
  18. data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss +15 -10
  19. data/app/assets/stylesheets/material/bootstrap/_button-group.scss +21 -42
  20. data/app/assets/stylesheets/material/bootstrap/_carousel.scss +81 -126
  21. data/app/assets/stylesheets/material/bootstrap/_close.scss +1 -4
  22. data/app/assets/stylesheets/material/bootstrap/_custom-form.scss +14 -16
  23. data/app/assets/stylesheets/material/bootstrap/_form.scss +95 -52
  24. data/app/assets/stylesheets/material/bootstrap/_media.scss +6 -67
  25. data/app/assets/stylesheets/material/bootstrap/_nav.scss +23 -45
  26. data/app/assets/stylesheets/material/bootstrap/_pagination.scss +4 -14
  27. data/app/assets/stylesheets/material/bootstrap/_popover.scss +7 -5
  28. data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss +18 -5
  29. data/app/assets/stylesheets/material/bootstrap/{_animation.scss → _transition.scss} +11 -2
  30. data/app/assets/stylesheets/material/material/_card.scss +185 -123
  31. data/app/assets/stylesheets/material/material/_chip.scss +12 -12
  32. data/app/assets/stylesheets/material/material/_data-table.scss +0 -2
  33. data/app/assets/stylesheets/material/material/_dialog.scss +23 -17
  34. data/app/assets/stylesheets/material/material/_expansion-panel.scss +42 -183
  35. data/app/assets/stylesheets/material/material/_menu.scss +19 -4
  36. data/app/assets/stylesheets/material/material/_navdrawer.scss +16 -12
  37. data/app/assets/stylesheets/material/material/_progress-circular.scss +2 -2
  38. data/app/assets/stylesheets/material/material/_progress.scss +68 -92
  39. data/app/assets/stylesheets/material/material/_selection-control.scss +11 -28
  40. data/app/assets/stylesheets/material/material/_tab.scss +52 -117
  41. data/app/assets/stylesheets/material/material/_text-field-floating-label.scss +9 -4
  42. data/app/assets/stylesheets/material/material/_text-field-input-group.scss +37 -35
  43. data/app/assets/stylesheets/material/material/_text-field.scss +41 -32
  44. data/app/assets/stylesheets/material/material/_toolbar.scss +192 -306
  45. data/app/assets/stylesheets/material/material/_tooltip.scss +19 -20
  46. data/app/assets/stylesheets/material/material.scss +2 -2
  47. data/app/assets/stylesheets/material/mixins/_border-radius.scss +9 -19
  48. data/app/assets/stylesheets/material/mixins/_breakpoint.scss +11 -3
  49. data/app/assets/stylesheets/material/mixins/_form.scss +15 -30
  50. data/app/assets/stylesheets/material/mixins/_grid-framework.scss +58 -0
  51. data/app/assets/stylesheets/material/mixins/_grid.scss +6 -78
  52. data/app/assets/stylesheets/material/mixins/_transform.scss +9 -0
  53. data/app/assets/stylesheets/material/utilities/_border.scss +31 -5
  54. data/app/assets/stylesheets/material/utilities/_display.scss +37 -8
  55. data/app/assets/stylesheets/material/utilities/_flex.scss +140 -0
  56. data/app/assets/stylesheets/material/utilities/_float.scss +5 -3
  57. data/app/assets/stylesheets/material/utilities/_position.scss +24 -0
  58. data/app/assets/stylesheets/material/utilities/_sizing.scss +16 -0
  59. data/app/assets/stylesheets/material/utilities/_spacing.scss +56 -46
  60. data/app/assets/stylesheets/material/utilities/_text.scss +5 -3
  61. data/app/assets/stylesheets/material/variables/_grid.scss +16 -10
  62. data/app/assets/stylesheets/material/variables/_spacer.scss +22 -3
  63. data/app/assets/stylesheets/material/variables/_typography.scss +2 -0
  64. data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss +24 -17
  65. data/app/assets/stylesheets/material/variables/_variable-material.scss +47 -52
  66. data/lib/material-sass/version.rb +1 -1
  67. metadata +9 -2
@@ -1,5 +1,5 @@
1
- .chip,
2
- .tag {
1
+ .badge,
2
+ .chip {
3
3
  background-color: $chip-bg;
4
4
  border-radius: ($chip-height / 2);
5
5
  color: $chip-color;
@@ -17,8 +17,8 @@
17
17
  }
18
18
  }
19
19
 
20
- a.chip,
21
- a.tag {
20
+ a.badge,
21
+ a.chip {
22
22
  color: $chip-color;
23
23
  z-index: 1;
24
24
  @include transition-standard(box-shadow);
@@ -62,14 +62,14 @@ a.tag {
62
62
  }
63
63
 
64
64
  // colour
65
- .chip-inverse,
66
- .tag-inverse {
65
+ .badge-inverse,
66
+ .chip-inverse {
67
67
  background-color: $chip-bg-inverse;
68
68
  color: $chip-color-inverse;
69
69
  }
70
70
 
71
- a.chip-inverse,
72
- a.tag-inverse {
71
+ a.badge-inverse,
72
+ a.chip-inverse {
73
73
  @include plain-active-focus-hover {
74
74
  color: $chip-color-inverse;
75
75
  }
@@ -78,14 +78,14 @@ a.tag {
78
78
  @each $color in $palettes {
79
79
  $i: index($palettes, $color);
80
80
 
81
- .chip-#{$color},
82
- .tag-#{$color} {
81
+ .badge-#{$color},
82
+ .chip-#{$color} {
83
83
  background-color: nth($palettes-color, $i);
84
84
  color: nth($palettes-text-color, $i);
85
85
  }
86
86
 
87
- a.chip-#{$color},
88
- a.tag-#{$color} {
87
+ a.badge-#{$color},
88
+ a.chip-#{$color} {
89
89
  @include plain-active-focus-hover {
90
90
  color: nth($palettes-text-color, $i);
91
91
  }
@@ -3,9 +3,7 @@
3
3
  //
4
4
 
5
5
  .table {
6
- background-color: $table-bg;
7
6
  border: 0;
8
- border-collapse: separate;
9
7
  margin-bottom: $table-margin-bottom;
10
8
  max-width: 100%;
11
9
  width: 100%;
@@ -10,7 +10,6 @@
10
10
  left: 0;
11
11
  text-align: center;
12
12
  white-space: nowrap;
13
- -webkit-overflow-scrolling: touch;
14
13
  z-index: map-get($dialog-elevation-shadow, elevation);
15
14
 
16
15
  &::before {
@@ -46,7 +45,7 @@
46
45
  z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
47
46
 
48
47
  &.fade {
49
- transform: scale(1);
48
+ transform: none;
50
49
  }
51
50
  }
52
51
 
@@ -81,16 +80,22 @@
81
80
  //
82
81
  .dialog-body,
83
82
  .modal-body {
83
+ flex: 1 1 auto;
84
84
  padding: $dialog-inner-padding;
85
85
  position: relative;
86
+
87
+ > :last-child {
88
+ margin-bottom: 0;
89
+ }
86
90
  }
87
91
 
88
92
  .dialog-content,
89
93
  .modal-content {
90
94
  background-clip: padding-box;
91
95
  background-color: $dialog-content-bg;
92
- border: 1px solid transparent;
93
96
  box-shadow: map-get($dialog-elevation-shadow, shadow);
97
+ display: flex;
98
+ flex-direction: column;
94
99
  outline: 0;
95
100
  position: relative;
96
101
  vertical-align: baseline;
@@ -99,13 +104,18 @@
99
104
 
100
105
  .dialog-footer,
101
106
  .modal-footer {
102
- padding: $dialog-footer-spacer-y $dialog-footer-spacer-x;
103
- padding-left: $dialog-inner-padding;
104
- text-align: right;
105
- @include clearfix;
107
+ align-items: center;
108
+ display: flex;
109
+ justify-content: flex-end;
110
+ padding: $dialog-footer-spacer-y ($dialog-footer-spacer-x / 2);
111
+ padding-left: ($dialog-inner-padding - $dialog-footer-spacer-x / 2);
112
+
113
+ > * {
114
+ margin-right: ($dialog-footer-spacer-x / 2);
115
+ margin-left: ($dialog-footer-spacer-x / 2);
116
+ }
106
117
 
107
118
  .btn {
108
- margin-left: $dialog-footer-spacer-x;
109
119
  min-width: $dialog-footer-btn-min-width;
110
120
  padding-right: $dialog-footer-spacer-x;
111
121
  padding-left: $dialog-footer-spacer-x;
@@ -114,18 +124,14 @@
114
124
 
115
125
  .dialog-header,
116
126
  .modal-header {
127
+ align-items: center;
128
+ display: flex;
129
+ justify-content: space-between;
117
130
  padding: $dialog-inner-padding;
131
+ padding-bottom: 0;
118
132
 
119
- + .dialog-body,
120
- + .modal-body {
121
- padding-top: 0;
122
- }
123
- }
124
-
125
- .dialog-text,
126
- .modal-text {
127
133
  &:last-child {
128
- margin-bottom: 0;
134
+ padding-bottom: $dialog-inner-padding;
129
135
  }
130
136
  }
131
137
 
@@ -1,36 +1,50 @@
1
- .expansion-panel,
1
+ //
2
+ // todo: bootstrap accordion (i.e. material expansion panel)
3
+ // since bootstrap accordion now relies on `.card`
4
+ // some tweaks are needed for the default accordion example to work correctly
5
+ // we probably need a wrapper to add additional styles in line with material design guidelines
6
+ //
7
+
2
8
  .list-group {
3
- margin-bottom: $expansion-panel-margin-bottom;
9
+ display: flex;
10
+ flex-direction: column;
11
+ margin-bottom: 0;
4
12
  padding-left: 0;
5
13
  }
6
14
 
7
15
  //
8
16
  // item
9
17
  //
10
- .expansion-panel-item,
11
18
  .list-group-item {
19
+ align-items: center;
12
20
  background-color: $expansion-panel-bg;
13
21
  border: 0;
14
- border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
22
+ border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
15
23
  box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
16
24
  color: $expansion-panel-color;
17
- display: block;
25
+ display: flex;
26
+ flex-flow: row wrap;
18
27
  font-size: $expansion-panel-font-size;
19
28
  min-height: $expansion-panel-height;
20
- padding: $expansion-panel-spacer-y $expansion-panel-spacer-x;
29
+ padding: $expansion-panel-inner-spacer-y $expansion-panel-inner-spacer-x;
21
30
  position: relative;
22
31
  @include transition-standard(background-color, color);
23
32
 
24
- &:first-of-type {
25
- border-top-color: transparent;
33
+ &:first-child {
26
34
  @include border-top-radius($border-radius);
27
35
  }
28
36
 
29
- &:last-of-type {
37
+ &:last-child {
38
+ border-bottom: 0;
30
39
  @include border-bottom-radius($border-radius);
31
40
  }
32
41
 
33
42
  // active, focus, hover
43
+ @include active-focus-hover {
44
+ color: $expansion-panel-color;
45
+ text-decoration: none;
46
+ }
47
+
34
48
  &.active {
35
49
  background-color: $expansion-panel-bg-active;
36
50
  }
@@ -39,10 +53,10 @@
39
53
  &.disabled {
40
54
  background-color: $expansion-panel-bg-disabled;
41
55
  color: $expansion-panel-color-disabled;
56
+ cursor: $cursor-disabled;
42
57
  }
43
58
  }
44
59
 
45
- .expansion-panel-item-action,
46
60
  .list-group-item-action {
47
61
  color: $expansion-panel-color;
48
62
  text-align: inherit;
@@ -51,11 +65,6 @@
51
65
  // active, focus, hover
52
66
  @include active-focus-hover {
53
67
  background-color: $expansion-panel-bg-active;
54
- color: $expansion-panel-color;
55
-
56
- @if ($link-decoration-active != "none") {
57
- text-decoration: none;
58
- }
59
68
  }
60
69
 
61
70
  &:focus {
@@ -65,8 +74,6 @@
65
74
  // disabled
66
75
  &.disabled {
67
76
  background-color: $expansion-panel-bg-disabled;
68
- color: $expansion-panel-color-disabled;
69
- cursor: $cursor-disabled;
70
77
  }
71
78
  }
72
79
 
@@ -74,18 +81,20 @@
74
81
  @each $color in $palettes {
75
82
  $i: index($palettes, $color);
76
83
 
77
- .expansion-panel-item-#{$color},
78
84
  .list-group-item-#{$color} {
79
85
  background-color: nth($palettes-color, $i);
80
86
  color: nth($palettes-text-color, $i);
81
87
 
82
88
  // active, focus, hover
89
+ @include active-focus-hover {
90
+ color: nth($palettes-text-color, $i);
91
+ }
92
+
83
93
  &.active {
84
94
  background-color: nth($palettes-color-dark, $i);
85
95
  color: nth($palettes-text-color-dark, $i);
86
96
  }
87
97
 
88
- &.expansion-panel-item-action,
89
98
  &.list-group-item-action {
90
99
  // active, focus, hover
91
100
  @include active-focus-hover {
@@ -97,144 +106,34 @@
97
106
  }
98
107
 
99
108
  //
100
- // expansion
109
+ // flush
101
110
  //
102
- .expansion-panel-collapse {
103
- background-color: $expansion-panel-bg;
104
- box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
105
- position: relative;
106
- @include border-bottom-radius($border-radius);
107
-
108
- &.collapsing,
109
- &.in {
110
- margin-bottom: $expansion-panel-margin-between;
111
-
112
- + .expansion-panel-item,
113
- + .list-group-item {
114
- border-top-color: transparent;
115
- @include border-top-radius($border-radius);
116
- }
117
- }
118
-
119
- &.collapsing {
120
- transition-property: height, margin-bottom;
121
- }
122
-
123
- .collapsed + & {
124
- &.collapsing {
125
- margin-bottom: 0;
126
-
127
- + .expansion-panel-item,
128
- + .list-group-item {
129
- border-top-color: $expansion-panel-border-color;
130
- border-top-left-radius: 0;
131
- border-top-right-radius: 0;
132
- }
133
- }
134
- }
135
-
136
- }
137
-
138
- .expansion-panel-collapse-body {
139
- padding: $expansion-panel-body-spacer-y $expansion-panel-spacer-x;
140
-
141
- > :last-child {
142
- margin-bottom: 0;
143
- }
144
- }
145
-
146
- .expansion-panel-collapse-footer {
147
- border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
148
- padding: $expansion-panel-footer-spacer-y $expansion-panel-footer-spacer-x;
149
- padding-left: $expansion-panel-spacer-y;
150
- text-align: right;
151
-
152
- .btn {
153
- min-width: 0;
154
-
155
- + .btn {
156
- margin-left: $expansion-panel-footer-spacer-x;
157
- }
158
- }
159
- }
160
-
161
- .expansion-panel-item,
162
- .list-group-item {
163
- &[data-toggle="collapse"] {
164
- border-top-color: transparent;
165
- cursor: pointer;
166
- margin-top: $expansion-panel-margin-between;
167
- transition-property: background-color, border-radius, border-top-color, color, margin-top;
168
- @include border-top-radius($border-radius);
169
-
170
- &::before {
171
- background-color: inherit;
172
- content: "";
173
- display: block;
174
- height: 2px;
175
- position: absolute;
176
- right: 0;
177
- bottom: 0;
178
- left: 0;
179
- z-index: 1;
180
- }
111
+ .list-group-flush {
112
+ .list-group-item {
113
+ border-radius: 0;
114
+ box-shadow: none;
181
115
 
182
116
  &:first-child {
183
- margin-top: 0;
117
+ border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
184
118
  }
185
119
 
186
- // active, focus, hover
187
- @include active-focus-hover {
188
- background-color: $expansion-panel-bg-active;
189
- color: $expansion-panel-color;
190
-
191
- @if ($link-decoration-active != "none") {
192
- text-decoration: none;
193
- }
194
- }
195
-
196
- &:focus {
197
- outline: 0;
198
- }
199
- }
200
-
201
- &[data-toggle="collapse"].collapsed {
202
- border-radius: 0;
203
- border-top-color: $expansion-panel-border-color;
204
- margin-top: 0;
205
-
206
- &::before {
207
- display: none;
120
+ &:last-child {
121
+ border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
208
122
  }
209
123
  }
210
124
 
211
- &[data-toggle="collapse"].disabled {
212
- background-color: $expansion-panel-bg-disabled;
213
- color: $expansion-panel-color-disabled;
214
- cursor: $cursor-disabled;
125
+ &:first-child .list-group-item:first-child {
126
+ border-top: 0;
215
127
  }
216
- }
217
128
 
218
- // colour
219
- @each $color in $palettes {
220
- $i: index($palettes, $color);
221
-
222
- .expansion-panel-item-#{$color},
223
- .list-group-item-#{$color} {
224
- &[data-toggle="collapse"] {
225
- // active, focus, hover
226
- @include active-focus-hover {
227
- background-color: nth($palettes-color-dark, $i);
228
- color: nth($palettes-text-color-dark, $i);
229
- }
230
- }
231
- }
129
+ &:last-child .list-group-item:last-child {
130
+ border-bottom: 0;
232
131
  }
132
+ }
233
133
 
234
134
  //
235
135
  // misc
236
136
  //
237
- .expansion-panel-item-heading,
238
137
  .list-group-item-heading {
239
138
  color: inherit;
240
139
  font-size: $expansion-panel-font-size;
@@ -243,50 +142,10 @@
243
142
  margin-bottom: 0;
244
143
  }
245
144
 
246
- .expansion-panel-item-icon {
247
- color: $expansion-panel-icon-color;
248
- font-size: $font-size-base;
249
- line-height: $material-icon-size;
250
- height: $material-icon-size;
251
- margin-top: ($material-icon-size / -2);
252
- position: absolute;
253
- top: ($expansion-panel-height / 2);
254
- right: $expansion-panel-spacer-x;
255
- width: $material-icon-size;
256
- @include transition-standard(color);
257
- }
258
-
259
- // active, focus, hover
260
- .expansion-panel-item,
261
- .list-group-item {
262
- &[data-toggle="collapse"] {
263
- @include active-focus-hover {
264
- .expansion-panel-item-icon {
265
- color: $expansion-panel-icon-color-active;
266
- }
267
- }
268
- }
269
- }
270
-
271
- // variation
272
- .expansion-panel-item-icon-rotate {
273
- transition-property: color, transform;
274
-
275
- .expansion-panel-item[data-toggle="collapse"] &,
276
- .list-group-item[data-toggle="collapse"] & {
277
- transform: rotate(180deg);
278
- }
279
-
280
- .expansion-panel-item.collapsed[data-toggle="collapse"] &,
281
- .list-group-item.collapsed[data-toggle="collapse"] & {
282
- transform: rotate(0);
283
- }
284
- }
285
-
286
- .expansion-panel-item-text,
287
145
  .list-group-item-text {
288
146
  color: inherit;
289
147
  font-size: $expansion-panel-font-size-secondary;
290
148
  line-height: $line-height-base;
149
+ margin-top: 0;
291
150
  margin-bottom: 0;
292
151
  }
@@ -16,7 +16,7 @@
16
16
  line-height: $menu-line-height;
17
17
  list-style: none;
18
18
  margin: 0;
19
- min-width: 100%;
19
+ min-width: $menu-min-width;
20
20
  padding: $menu-padding-y 0;
21
21
  position: absolute;
22
22
  left: 0;
@@ -48,7 +48,7 @@
48
48
  .dropdown-menu {
49
49
  // position
50
50
  bottom: 100%;
51
- transform-origin: 0 100%;
51
+ transform-origin: 0 100%;
52
52
  @include border-top-radius($border-radius);
53
53
  @include border-bottom-radius(0);
54
54
  }
@@ -61,7 +61,11 @@
61
61
  }
62
62
 
63
63
  // open
64
- .open {
64
+ .show {
65
+ > a {
66
+ outline: 0;
67
+ }
68
+
65
69
  > .dropdown-menu,
66
70
  > .menu {
67
71
  animation-duration: $transition-duration-lg;
@@ -118,7 +122,7 @@
118
122
  }
119
123
  }
120
124
 
121
- .dropup.open {
125
+ .dropup.show {
122
126
  > .dropdown-menu {
123
127
  animation-name: dropup-open;
124
128
  }
@@ -143,6 +147,13 @@
143
147
  }
144
148
 
145
149
  // positioning
150
+ .dropdown-menu-left,
151
+ .menu-left {
152
+ // position
153
+ right: auto;
154
+ left: 0;
155
+ }
156
+
146
157
  .dropdown-menu-right,
147
158
  .menu-right {
148
159
  // position
@@ -161,6 +172,10 @@
161
172
  font-size: $menu-font-size-cascading;
162
173
  line-height: $menu-line-height-cascading;
163
174
  padding: $menu-padding-y-cascading 0;
175
+
176
+ @include media-breakpoint-up(sm) {
177
+ min-width: $menu-min-width-cascading;
178
+ }
164
179
  }
165
180
 
166
181
  //
@@ -22,11 +22,10 @@
22
22
  bottom: 0;
23
23
  left: 0;
24
24
  z-index: (map-get($navdrawer-elevation-shadow, elevation) - 1);
25
- @include transition-sharp(opacity);
25
+ @include transition-standard(opacity);
26
26
 
27
- &.in {
27
+ &.show {
28
28
  opacity: 1;
29
- @include transition-deceleration(opacity);
30
29
  }
31
30
  }
32
31
 
@@ -45,7 +44,6 @@
45
44
  left: 0;
46
45
  transform: translate3d(-100%, 0, 0);
47
46
  width: $navdrawer-width-mobile;
48
- -webkit-overflow-scrolling: touch;
49
47
  @include transition-sharp(transform);
50
48
 
51
49
  // direction
@@ -57,7 +55,7 @@
57
55
  }
58
56
 
59
57
  // open
60
- .navdrawer.in & {
58
+ .navdrawer.show & {
61
59
  transform: translate3d(0, 0, 0);
62
60
  @include transition-deceleration(transform);
63
61
  }
@@ -81,7 +79,7 @@
81
79
  border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
82
80
  display: block;
83
81
  margin-bottom: $navdrawer-inner-spacer-y;
84
- padding: ($navdrawer-inner-spacer-y * 2) $navdrawer-inner-spacer-x;
82
+ padding: $toolbar-padding-y $navdrawer-inner-spacer-x;
85
83
  }
86
84
 
87
85
  .navdrawer-subheader {
@@ -104,15 +102,14 @@
104
102
  // nav
105
103
  //
106
104
  .navdrawer-nav {
105
+ display: flex;
106
+ flex-direction: column;
107
+ list-style: none;
107
108
  margin-bottom: $navdrawer-inner-spacer-y;
108
-
109
- .nav-item + .nav-item {
110
- margin-top: 1px;
111
- }
109
+ padding-left: 0;
112
110
 
113
111
  .nav-link {
114
112
  color: $navdrawer-nav-link-color;
115
- display: block;
116
113
  font-size: $navdrawer-nav-link-font-size;
117
114
  font-weight: $navdrawer-nav-link-font-weight;
118
115
  line-height: 1;
@@ -133,6 +130,10 @@
133
130
  outline: 0;
134
131
  }
135
132
 
133
+ &.active {
134
+ color: $navdrawer-nav-link-color-active;
135
+ }
136
+
136
137
  // disabled
137
138
  &.disabled {
138
139
  background-color: transparent;
@@ -140,7 +141,6 @@
140
141
  }
141
142
  }
142
143
 
143
- .nav-link.active,
144
144
  .active > .nav-link {
145
145
  color: $navdrawer-nav-link-color-active;
146
146
  }
@@ -156,6 +156,10 @@
156
156
  }
157
157
  }
158
158
 
159
+ .active > .nav-link .navdrawer-nav-icon {
160
+ color: $navdrawer-nav-link-color-active;
161
+ }
162
+
159
163
  //
160
164
  // permanent
161
165
  //
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  .progress-circular-gap {
8
- border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-color;
8
+ border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-bg;
9
9
  position: absolute;
10
10
  top: 0;
11
11
  right: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .progress-circular-spinner {
43
- border: $progress-circular-spinner-width solid $progress-circular-color;
43
+ border: $progress-circular-spinner-width solid $progress-circular-bg;
44
44
  border-bottom-color: transparent;
45
45
  border-radius: 50%;
46
46
  height: $progress-circular-height;