@doodl/slate 1.21.4 → 1.22.2
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.
- package/CHANGELOG.md +26 -0
- package/js/dist/accordion/accordion.js +2 -0
- package/js/dist/react-components/container/index.js +24 -0
- package/js/dist/react-components/grid/grid-item.js +35 -0
- package/js/dist/react-components/grid/index.js +43 -0
- package/js/dist/react-components/grid/padded-grid.js +27 -0
- package/js/dist/react-components/section/index.js +28 -0
- package/js/dist/react-components/typography/index.js +39 -0
- package/package.json +7 -1
- package/scss/_helpers.scss +208 -0
- package/scss/_mixins.scss +197 -65
- package/scss/core/_base.scss +4 -3
- package/scss/core/_button.scss +34 -16
- package/scss/core/_layout.scss +5 -56
- package/scss/core/_lists.scss +1 -13
- package/scss/core/_typography.scss +2 -14
- package/scss/core/global-helpers/_button.scss +11 -0
- package/scss/core/parts/_container-safe.scss +20 -0
- package/scss/core/parts/_grid-safe.scss +147 -0
- package/scss/core/parts/_gutter-safe.scss +16 -0
- package/scss/core/parts/_lists-safe.scss +15 -0
- package/scss/core/parts/_section-safe.scss +27 -0
- package/scss/core/parts/_typography-safe.scss +34 -0
- package/scss/css-modules/container.module.scss +2 -0
- package/scss/css-modules/grid.module.scss +13 -0
- package/scss/css-modules/section.module.scss +2 -0
- package/scss/css-modules/typography.module.scss +11 -0
- package/scss/css-modules/utils.module.scss +3 -0
- package/scss/globalcustoms.scss +1 -0
- package/scss/silverstripe/_messages.scss +15 -10
- package/scss/variables/_base.scss +3 -2
- package/scss/variables/_button.scss +9 -8
- package/scss/variables/_colours.scss +21 -1
- package/scss/variables/_forms.scss +1 -1
- package/scss/variables/_menu-bar.scss +2 -1
- package/scss/variables/_silverstripe-messages.scss +4 -4
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
@import '../../variables/grid';
|
|
2
|
+
@import '../../variables/breakpoints';
|
|
3
|
+
@import '../../mixins';
|
|
4
|
+
|
|
5
|
+
#{$slate-grid-selector} {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: row;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
|
|
10
|
+
@each $den in $slate-grid-division-denominators {
|
|
11
|
+
@for $num from 1 through $den {
|
|
12
|
+
&#{$slate-grid-selector}-width-#{$num}-#{$den} {
|
|
13
|
+
> * {
|
|
14
|
+
width: percentage($num / $den);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@each $label, $query in $slate-media-queries {
|
|
21
|
+
@include respond($label) {
|
|
22
|
+
@each $den in $slate-grid-division-denominators {
|
|
23
|
+
@for $num from 1 through $den {
|
|
24
|
+
&#{$slate-grid-selector}-width-#{$label}-#{$num}-#{$den} {
|
|
25
|
+
> * {
|
|
26
|
+
width: percentage($num / $den);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@each $den in $slate-grid-division-denominators {
|
|
35
|
+
@for $num from 1 through $den {
|
|
36
|
+
> #{$slate-grid-selector}--item-width-#{$num}-#{$den},
|
|
37
|
+
> .width-#{$num}-#{$den} {
|
|
38
|
+
width: percentage($num / $den);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@each $label, $query in $slate-media-queries {
|
|
44
|
+
@include respond($label) {
|
|
45
|
+
@each $den in $slate-grid-division-denominators {
|
|
46
|
+
@for $num from 1 through $den {
|
|
47
|
+
> #{$slate-grid-selector}--item-width-#{$label}-#{$num}-#{$den},
|
|
48
|
+
> .width-#{$label}-#{$num}-#{$den} {
|
|
49
|
+
width: percentage($num / $den);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&.center {
|
|
57
|
+
justify-content: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&.vertical-center {
|
|
61
|
+
align-items: center;
|
|
62
|
+
}
|
|
63
|
+
> * {
|
|
64
|
+
flex: none;
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
* + #{$slate-grid-selector} {
|
|
70
|
+
margin-top: $slate-grid-trailing-margin;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
#{$slate-padded-grid-selector} {
|
|
74
|
+
display: block;
|
|
75
|
+
width: 100%;
|
|
76
|
+
> #{$slate-grid-selector} {
|
|
77
|
+
width: calc(100% + #{$slate-grid-padded-grid-padding-horizontal});
|
|
78
|
+
margin-top: -$slate-grid-padded-grid-padding-vertical;
|
|
79
|
+
margin-left: -$slate-grid-padded-grid-padding-horizontal;
|
|
80
|
+
@each $den in $slate-grid-division-denominators {
|
|
81
|
+
@for $num from 1 through $den {
|
|
82
|
+
&#{$slate-grid-selector}-width-#{$num}-#{$den} {
|
|
83
|
+
> * {
|
|
84
|
+
width: calc(
|
|
85
|
+
#{percentage($num / $den)} -
|
|
86
|
+
#{$slate-grid-padded-grid-padding-horizontal}
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@each $label, $query in $slate-media-queries {
|
|
94
|
+
@include respond($label) {
|
|
95
|
+
@each $den in $slate-grid-division-denominators {
|
|
96
|
+
@for $num from 1 through $den {
|
|
97
|
+
&#{$slate-grid-selector}-width-#{$label}-#{$num}-#{$den} {
|
|
98
|
+
> * {
|
|
99
|
+
width: calc(
|
|
100
|
+
#{percentage($num / $den)} -
|
|
101
|
+
#{$slate-grid-padded-grid-padding-horizontal}
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@each $den in $slate-grid-division-denominators {
|
|
111
|
+
@for $num from 1 through $den {
|
|
112
|
+
> #{$slate-grid-selector}--item-width-#{$num}-#{$den},
|
|
113
|
+
> .width-#{$num}-#{$den} {
|
|
114
|
+
width: calc(
|
|
115
|
+
#{percentage($num / $den)} -
|
|
116
|
+
#{$slate-grid-padded-grid-padding-horizontal}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@each $label, $query in $slate-media-queries {
|
|
123
|
+
@include respond($label) {
|
|
124
|
+
@each $den in $slate-grid-division-denominators {
|
|
125
|
+
@for $num from 1 through $den {
|
|
126
|
+
> #{$slate-grid-selector}--item-width-#{$label}-#{$num}-#{$den},
|
|
127
|
+
> .width-#{$label}-#{$num}-#{$den} {
|
|
128
|
+
width: calc(
|
|
129
|
+
#{percentage($num / $den)} -
|
|
130
|
+
#{$slate-grid-padded-grid-padding-horizontal}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
> * {
|
|
138
|
+
width: calc(100% - #{$slate-grid-padded-grid-padding-horizontal});
|
|
139
|
+
margin-top: $slate-grid-padded-grid-padding-vertical;
|
|
140
|
+
margin-left: $slate-grid-padded-grid-padding-horizontal;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
* + #{$slate-padded-grid-selector} {
|
|
146
|
+
margin-top: $slate-grid-trailing-margin;
|
|
147
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@import '../../variables/layout';
|
|
2
|
+
|
|
3
|
+
.gutter {
|
|
4
|
+
&-top {
|
|
5
|
+
margin-top: $slate-layout-gutter;
|
|
6
|
+
&--large {
|
|
7
|
+
margin-top: $slate-layout-gutter--large;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
&-bottom {
|
|
11
|
+
margin-bottom: $slate-layout-gutter;
|
|
12
|
+
&--large {
|
|
13
|
+
margin-bottom: $slate-layout-gutter--large;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@import '../../variables/lists';
|
|
2
|
+
|
|
3
|
+
%lists-typography {
|
|
4
|
+
ul,
|
|
5
|
+
ol {
|
|
6
|
+
max-width: $slate-lists-max-width--typography;
|
|
7
|
+
margin-right: $slate-lists-margin-right--typography;
|
|
8
|
+
margin-left: $slate-lists-margin-left--typography;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
%lists-reset {
|
|
13
|
+
padding: 0;
|
|
14
|
+
list-style: none;
|
|
15
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@import '../../variables/layout';
|
|
2
|
+
@import '../../mixins';
|
|
3
|
+
|
|
4
|
+
.section,
|
|
5
|
+
%section {
|
|
6
|
+
padding: $slate-layout-section-vertical-padding
|
|
7
|
+
$slate-layout-section-horizontal-padding;
|
|
8
|
+
&:nth-of-type(even) {
|
|
9
|
+
background: $slate-layout-section-alternate-bg;
|
|
10
|
+
}
|
|
11
|
+
&.remove-bottom-padding {
|
|
12
|
+
padding-bottom: 0;
|
|
13
|
+
}
|
|
14
|
+
&.remove-top-padding {
|
|
15
|
+
padding-top: 0;
|
|
16
|
+
}
|
|
17
|
+
&.remove-left-padding {
|
|
18
|
+
padding-left: 0;
|
|
19
|
+
}
|
|
20
|
+
&.remove-right-padding {
|
|
21
|
+
padding-right: 0;
|
|
22
|
+
}
|
|
23
|
+
@include respond(medium) {
|
|
24
|
+
padding: $slate-layout-section-vertical-padding--med
|
|
25
|
+
$slate-layout-section-horizontal-padding--med;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@import '../../variables/typography';
|
|
2
|
+
|
|
3
|
+
.typography {
|
|
4
|
+
display: block;
|
|
5
|
+
width: 100%;
|
|
6
|
+
max-width: $slate-typography-max-width;
|
|
7
|
+
margin: $slate-typography-margin;
|
|
8
|
+
padding: $slate-typography-padding-vertical
|
|
9
|
+
$slate-typography-padding-horizontal;
|
|
10
|
+
&.align-left {
|
|
11
|
+
margin: 0 auto 0 0;
|
|
12
|
+
}
|
|
13
|
+
&.align-right {
|
|
14
|
+
margin: 0 0 0 auto;
|
|
15
|
+
}
|
|
16
|
+
&.remove-vertical-padding {
|
|
17
|
+
padding-top: 0;
|
|
18
|
+
padding-bottom: 0;
|
|
19
|
+
}
|
|
20
|
+
&.remove-horizontal-padding {
|
|
21
|
+
padding-left: 0;
|
|
22
|
+
padding-right: 0;
|
|
23
|
+
}
|
|
24
|
+
&.wide {
|
|
25
|
+
max-width: $slate-typography-wide-max-width;
|
|
26
|
+
}
|
|
27
|
+
&.full-width {
|
|
28
|
+
max-width: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
* + .typography {
|
|
33
|
+
margin-top: $slate-typography-trailing-margin;
|
|
34
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import 'projectCSSConfig';
|
|
2
|
+
@import '../core/grid';
|
|
3
|
+
|
|
4
|
+
@function parse-dotless($class) {
|
|
5
|
+
$this: quote($class);
|
|
6
|
+
@return if(str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Get a bit clever here so we can access the selector dynamically
|
|
10
|
+
:export {
|
|
11
|
+
slateGridClassName: unquote(parse-dotless(#{$slate-grid-selector}));
|
|
12
|
+
slatePaddedGridClassName: unquote(parse-dotless(#{$slate-padded-grid-selector}));
|
|
13
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@import 'projectCSSConfig';
|
|
2
|
+
@import '../core/parts/typography-safe';
|
|
3
|
+
@import '../core/parts/lists-safe';
|
|
4
|
+
@import '../silverstripe/editor';
|
|
5
|
+
|
|
6
|
+
.typography {
|
|
7
|
+
:global {
|
|
8
|
+
@extend %silverstripe-typography !optional;
|
|
9
|
+
@extend %lists-typography !optional;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import './core/global-helpers/button';
|
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
@import '../variables/silverstripe-messages';
|
|
2
2
|
@import '../mixins';
|
|
3
|
+
@import '../helpers';
|
|
3
4
|
|
|
4
5
|
.message {
|
|
5
|
-
@include message-variant(
|
|
6
|
-
$slate-silverstripe-messages-info-colour,
|
|
7
|
-
$slate-silverstripe-messages-background-lightness,
|
|
8
|
-
$slate-silverstripe-messages-background-opacity
|
|
9
|
-
);
|
|
10
6
|
display: block;
|
|
11
7
|
padding: $slate-silverstripe-messages-padding;
|
|
12
|
-
border: $slate-silverstripe-messages-border-thickness
|
|
13
|
-
|
|
8
|
+
border-width: $slate-silverstripe-messages-border-thickness;
|
|
9
|
+
border-style: solid;
|
|
14
10
|
border-radius: $slate-silverstripe-messages-border-radius;
|
|
15
11
|
font-size: $slate-silverstripe-messages-font-size;
|
|
12
|
+
@include message-variant(
|
|
13
|
+
$slate-silverstripe-messages-info-colour,
|
|
14
|
+
$slate-silverstripe-messages-background-lightness,
|
|
15
|
+
$slate-silverstripe-messages-background-opacity,
|
|
16
|
+
info
|
|
17
|
+
);
|
|
16
18
|
&.good,
|
|
17
19
|
&.success {
|
|
18
20
|
@include message-variant(
|
|
19
21
|
$slate-silverstripe-messages-good-colour,
|
|
20
22
|
$slate-silverstripe-messages-background-lightness,
|
|
21
|
-
$slate-silverstripe-messages-background-opacity
|
|
23
|
+
$slate-silverstripe-messages-background-opacity,
|
|
24
|
+
good
|
|
22
25
|
);
|
|
23
26
|
}
|
|
24
27
|
&.bad,
|
|
@@ -27,14 +30,16 @@
|
|
|
27
30
|
@include message-variant(
|
|
28
31
|
$slate-silverstripe-messages-bad-colour,
|
|
29
32
|
$slate-silverstripe-messages-background-lightness,
|
|
30
|
-
$slate-silverstripe-messages-background-opacity
|
|
33
|
+
$slate-silverstripe-messages-background-opacity,
|
|
34
|
+
bad
|
|
31
35
|
);
|
|
32
36
|
}
|
|
33
37
|
&.warning {
|
|
34
38
|
@include message-variant(
|
|
35
39
|
$slate-silverstripe-messages-warning-colour,
|
|
36
40
|
$slate-silverstripe-messages-background-lightness,
|
|
37
|
-
$slate-silverstripe-messages-background-opacity
|
|
41
|
+
$slate-silverstripe-messages-background-opacity,
|
|
42
|
+
warning
|
|
38
43
|
);
|
|
39
44
|
}
|
|
40
45
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import 'colours';
|
|
2
2
|
@import 'animations';
|
|
3
3
|
@import 'spacing';
|
|
4
|
+
@import '../helpers';
|
|
4
5
|
|
|
5
6
|
$slate-base-default-box-sizing: border-box !default;
|
|
6
7
|
|
|
@@ -29,13 +30,13 @@ $slate-base-p-margin: 0 !default;
|
|
|
29
30
|
$slate-base-p-text-transform: none !default;
|
|
30
31
|
$slate-base-p-trailing-margin: 1rem !default;
|
|
31
32
|
|
|
32
|
-
$slate-base-anchor-colour: $slate-highlight-colour !default;
|
|
33
|
+
$slate-base-anchor-colour: map-get($slate-highlight-colour-map,500) !default;
|
|
33
34
|
$slate-base-anchor-font-weight: inherit !default;
|
|
34
35
|
$slate-base-anchor-text-decoration: none !default;
|
|
35
36
|
$slate-base-anchor-transition: color $slate-animation-timing $slate-animation-easing !default;
|
|
36
37
|
$slate-base-anchor-colour--visited: $slate-base-anchor-colour !default;
|
|
37
38
|
$slate-base-anchor-text-decoration--visited: $slate-base-anchor-text-decoration !default;
|
|
38
|
-
$slate-base-anchor-colour--hover:
|
|
39
|
+
$slate-base-anchor-colour--hover: map-get($slate-highlight-colour-map,300) !default;
|
|
39
40
|
$slate-base-anchor-cursor--hover: pointer !default;
|
|
40
41
|
$slate-base-anchor-text-decoration--hover: $slate-base-anchor-text-decoration !default;
|
|
41
42
|
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@import 'colours';
|
|
3
3
|
@import 'defaults';
|
|
4
4
|
@import 'animations';
|
|
5
|
+
@import '../helpers';
|
|
5
6
|
|
|
6
7
|
$slate-button-selector: '.button, a.button, input[type="button"], input[type="submit"], button' !default;
|
|
7
8
|
|
|
@@ -41,8 +42,8 @@ $slate-button-font-size--large: 1.2rem !default;
|
|
|
41
42
|
$slate-button-padding--small: $slate-button-padding !default;
|
|
42
43
|
$slate-button-padding--large: 0.4rem 0.6rem !default;
|
|
43
44
|
|
|
44
|
-
$slate-button-primary-colour: $slate-primary-colour !default;
|
|
45
|
-
$slate-button-secondary-colour: $slate-secondary-colour !default;
|
|
45
|
+
$slate-button-primary-colour: $slate-primary-colour-map !default;
|
|
46
|
+
$slate-button-secondary-colour: $slate-secondary-colour-map !default;
|
|
46
47
|
$slate-button-good-colour: $slate-good-colour !default;
|
|
47
48
|
$slate-button-bad-colour: $slate-bad-colour !default;
|
|
48
49
|
|
|
@@ -82,18 +83,18 @@ $slate-button-border-colour-bad-override--contained--hover: 0 !default;
|
|
|
82
83
|
////
|
|
83
84
|
|
|
84
85
|
$slate-button-lighten-amount: 20 !default;
|
|
85
|
-
$slate-button-darken-amount:
|
|
86
|
-
$slate-button-box-shadow--active: inset
|
|
87
|
-
$slate-button-background--contained:
|
|
86
|
+
$slate-button-darken-amount: 15 !default;
|
|
87
|
+
$slate-button-box-shadow--active: inset 0.05em 0.05em 0.5em !default; // Don't include the colour here
|
|
88
|
+
$slate-button-background--contained: scale-color($slate-button-colour, $lightness: $slate-button-lighten-amount) !default;
|
|
88
89
|
$slate-button-background--contained--lightness-correction-threshold: 80% !default;
|
|
89
90
|
$slate-button-color--contained--lightness-correction: 25 !default;
|
|
90
91
|
|
|
91
|
-
$slate-button-colour--disabled:
|
|
92
|
-
$slate-button-background--contained--disabled:
|
|
92
|
+
$slate-button-colour--disabled: scale-color($slate-button-colour,15%) !default;
|
|
93
|
+
$slate-button-background--contained--disabled: scale-color($slate-button-background--contained,$lightness: -15%) !default;
|
|
93
94
|
|
|
94
95
|
$slate-button-loader-fade-in-easing: $slate-animation-easing !default;
|
|
95
96
|
$slate-button-loader-fade-in-timing: $slate-animation-timing !default;
|
|
96
97
|
$slate-button-loader-size: 1rem !default;
|
|
97
98
|
$slate-button-loader-width: 3px !default;
|
|
98
|
-
$slate-button-loader-colour: $slate-secondary-colour !default;
|
|
99
|
+
$slate-button-loader-colour: $slate-secondary-colour-map !default;
|
|
99
100
|
$slate-button-loader-rotate-animation: rotate 1s linear infinite !default;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "../helpers";
|
|
2
|
+
|
|
1
3
|
$slate-primary-colour: #3ea2ff !default;
|
|
2
4
|
$slate-secondary-colour: #ff653e !default;
|
|
3
5
|
$slate-highlight-colour: $slate-primary-colour !default;
|
|
@@ -11,4 +13,22 @@ $slate-neutral: #eee !default;
|
|
|
11
13
|
$slate-muted: #bbb !default;
|
|
12
14
|
$slate-dark-neutral: lighten($slate-black,50) !default;
|
|
13
15
|
|
|
14
|
-
$slate-contrast-colour: $slate-white;
|
|
16
|
+
$slate-contrast-colour: $slate-white;
|
|
17
|
+
|
|
18
|
+
$slate-primary-colour-map: build-colour-map(slate-primary-colour,$slate-primary-colour) !default;
|
|
19
|
+
$slate-secondary-colour-map: build-colour-map(slate-secondary-colour,$slate-secondary-colour) !default;
|
|
20
|
+
// Provide some sensible defaults for highlight colour if it matches
|
|
21
|
+
// Primary or secondary colour
|
|
22
|
+
$_slate-highlight-colour-map-candidate: "";
|
|
23
|
+
@if $slate-highlight-colour == $slate-primary-colour {
|
|
24
|
+
$_slate-highlight-colour-map-candidate: $slate-primary-colour-map;
|
|
25
|
+
} @else if $slate-highlight-colour == $slate-secondary-colour {
|
|
26
|
+
$_slate-highlight-colour-map-candidate: $slate-secondary-colour-map;
|
|
27
|
+
} @else {
|
|
28
|
+
$_slate-highlight-colour-map-candidate: build-colour-map(slate-highlight-colour,$slate-highlight-colour) !default;
|
|
29
|
+
}
|
|
30
|
+
$slate-highlight-colour-map: $_slate-highlight-colour-map-candidate !default;
|
|
31
|
+
$slate-info-colour-map: build-colour-map(slate-info-colour,$slate-info-colour) !default;
|
|
32
|
+
$slate-good-colour-map: build-colour-map(slate-good-colour,$slate-good-colour) !default;
|
|
33
|
+
$slate-bad-colour-map: build-colour-map(slate-bad-colour,$slate-bad-colour) !default;
|
|
34
|
+
$slate-warning-colour-map: build-colour-map(slate-warning-colour,$slate-warning-colour) !default;
|
|
@@ -58,7 +58,7 @@ $slate-forms-loader-fade-in-easing: $slate-animation-easing !default;
|
|
|
58
58
|
$slate-forms-loader-fade-in-timing: $slate-animation-timing !default;
|
|
59
59
|
$slate-forms-loader-size: 2rem !default;
|
|
60
60
|
$slate-forms-loader-width: 3px !default;
|
|
61
|
-
$slate-forms-loader-colour: $slate-secondary-colour !default;
|
|
61
|
+
$slate-forms-loader-colour: $slate-secondary-colour-map !default;
|
|
62
62
|
$slate-forms-loader-rotate-animation: rotate 1s linear infinite !default;
|
|
63
63
|
|
|
64
64
|
// exports for listbox field
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@import '../variables/spacing';
|
|
4
4
|
@import '../variables/layout';
|
|
5
5
|
@import '../variables/animations';
|
|
6
|
+
@import '../helpers';
|
|
6
7
|
|
|
7
8
|
$slate-menu-bar-background: transparent !default;
|
|
8
9
|
$slate-menu-bar-z-index: 10 !default;
|
|
@@ -29,7 +30,7 @@ $slate-menu-bar-items-item-padding--horizontal: 0 !default;
|
|
|
29
30
|
$slate-menu-bar-items-colour--visited: $slate-menu-bar-items-colour !default;
|
|
30
31
|
$slate-menu-bar-items-text-decoration--visited: $slate-menu-bar-items-text-decoration !default;
|
|
31
32
|
|
|
32
|
-
$slate-menu-bar-items-colour--hover: darken($slate-menu-bar-items-colour,15%) !default;
|
|
33
|
+
$slate-menu-bar-items-colour--hover: darken(guarantee-colour-value($slate-menu-bar-items-colour),15%) !default;
|
|
33
34
|
$slate-menu-bar-items-text-decoration--hover: $slate-menu-bar-items-text-decoration !default;
|
|
34
35
|
|
|
35
36
|
$slate-menu-bar-children-background: $slate-neutral !default;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
|
-
$slate-silverstripe-messages-info-colour: $slate-info-colour !default;
|
|
3
|
-
$slate-silverstripe-messages-good-colour: $slate-good-colour !default;
|
|
4
|
-
$slate-silverstripe-messages-bad-colour: $slate-bad-colour !default;
|
|
5
|
-
$slate-silverstripe-messages-warning-colour: $slate-warning-colour !default;
|
|
2
|
+
$slate-silverstripe-messages-info-colour: $slate-info-colour-map !default;
|
|
3
|
+
$slate-silverstripe-messages-good-colour: $slate-good-colour-map !default;
|
|
4
|
+
$slate-silverstripe-messages-bad-colour: $slate-bad-colour-map !default;
|
|
5
|
+
$slate-silverstripe-messages-warning-colour: $slate-warning-colour-map !default;
|
|
6
6
|
|
|
7
7
|
$slate-silverstripe-messages-font-size: 0.8rem !default;
|
|
8
8
|
$slate-silverstripe-messages-padding: 0.5rem !default;
|