@elliemae/ds-basic 3.14.0-rc.0 → 3.14.0-rc.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.
- package/dist/css/dimsum.css +1029 -1029
- package/dist/css/dimsum.min.css +2 -2
- package/dist/css/dimsum.min.css.map +1 -1
- package/dist/styles/base/_generic/_general-functions.scss +2 -7
- package/dist/styles/base/spacing.scss +29 -44
- package/dist/styles/components/packages/ds-basic/styles/base/_generic/_general-functions.scss +2 -7
- package/dist/styles/components/packages/ds-basic/styles/base/spacing.scss +29 -44
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ $default-browser-font-size: 16px;
|
|
|
12
12
|
} @else if $unit == 'rem' {
|
|
13
13
|
@return $value;
|
|
14
14
|
} @else if $unit == 'px' {
|
|
15
|
-
@return $value / $theme-base-font-size * 1rem;
|
|
15
|
+
@return round($value / $theme-base-font-size) * 1rem;
|
|
16
16
|
} @else if $unit == 'em' {
|
|
17
17
|
@return $unit / 1em * 1rem;
|
|
18
18
|
} @else {
|
|
@@ -20,7 +20,6 @@ $default-browser-font-size: 16px;
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
23
|
/// Returns the value in ems for a given pixel value. Note that this
|
|
25
24
|
/// only works for elements that have had no font-size changes.
|
|
26
25
|
/// @param {Number} $value - The pixel value to be converted.
|
|
@@ -42,7 +41,6 @@ $default-browser-font-size: 16px;
|
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
|
|
45
|
-
|
|
46
44
|
///
|
|
47
45
|
/// Returns whether `$list` contains `$value`.
|
|
48
46
|
/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain
|
|
@@ -64,13 +62,11 @@ $default-browser-font-size: 16px;
|
|
|
64
62
|
/// @requires sl-contain
|
|
65
63
|
/// @alias sl-contain
|
|
66
64
|
///
|
|
67
|
-
|
|
65
|
+
|
|
68
66
|
@function include($list, $value) {
|
|
69
67
|
@return contain($list, $value);
|
|
70
68
|
}
|
|
71
69
|
|
|
72
|
-
|
|
73
|
-
|
|
74
70
|
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
|
75
71
|
///
|
|
76
72
|
/// @param {Number} $num - Number to strip unit from.
|
|
@@ -167,7 +163,6 @@ $default-browser-font-size: 16px;
|
|
|
167
163
|
///
|
|
168
164
|
/// @return {Number} - Unitless number
|
|
169
165
|
@function unitless-calc($value, $base: null) {
|
|
170
|
-
|
|
171
166
|
// If no base is defined, defer to the global font size
|
|
172
167
|
@if $base == null {
|
|
173
168
|
$base: $global-font-size;
|
|
@@ -1,20 +1,25 @@
|
|
|
1
|
-
$point-unit:
|
|
1
|
+
$point-unit: 6.5px !default;
|
|
2
2
|
// Point-Grid System
|
|
3
3
|
// Use multiples of this value to define dimensions, padding, and margin of both block and inline elements.
|
|
4
4
|
// Learn more here: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
|
|
5
5
|
|
|
6
6
|
$spacing-data: (
|
|
7
|
-
none: 0,
|
|
8
|
-
xxs:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
none: 0,
|
|
8
|
+
xxs: rem($point-unit / 2),
|
|
9
|
+
// 4px
|
|
10
|
+
xs: rem($point-unit),
|
|
11
|
+
// 8px
|
|
12
|
+
s: rem($point-unit * 2),
|
|
13
|
+
// 16px
|
|
14
|
+
m: rem($point-unit * 3),
|
|
15
|
+
// 24px
|
|
16
|
+
l: rem($point-unit * 4),
|
|
17
|
+
// 32px
|
|
18
|
+
xl: rem($point-unit * 6),
|
|
19
|
+
// 48px
|
|
20
|
+
xxl: rem($point-unit * 8) // 64px,,,
|
|
15
21
|
) !default;
|
|
16
22
|
|
|
17
|
-
|
|
18
23
|
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
|
|
19
24
|
/// @type Map
|
|
20
25
|
$breakpoints: (
|
|
@@ -25,62 +30,42 @@ $breakpoints: (
|
|
|
25
30
|
xxlarge: 1440px,
|
|
26
31
|
) !default;
|
|
27
32
|
|
|
28
|
-
|
|
29
33
|
// Small devices
|
|
30
34
|
@mixin sm {
|
|
31
|
-
@media (max-width: 32rem
|
|
32
|
-
|
|
35
|
+
@media (max-width: 32rem) {
|
|
36
|
+
@content;
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
// Medium devices
|
|
36
40
|
@mixin md {
|
|
37
41
|
@media (max-width: 48rem) {
|
|
38
|
-
|
|
42
|
+
@content;
|
|
39
43
|
}
|
|
40
|
-
@media only screen
|
|
41
|
-
and (max-device-width: 667px)
|
|
42
|
-
and (-webkit-min-device-pixel-ratio: 2) {
|
|
44
|
+
@media only screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
|
|
43
45
|
@content;
|
|
44
46
|
}
|
|
45
|
-
@media only screen
|
|
46
|
-
|
|
47
|
-
and (-webkit-min-device-pixel-ratio: 3) {
|
|
48
|
-
@content;
|
|
47
|
+
@media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
|
|
48
|
+
@content;
|
|
49
49
|
}
|
|
50
|
-
@media screen
|
|
51
|
-
|
|
52
|
-
and (device-height: 640px)
|
|
53
|
-
and (-webkit-device-pixel-ratio: 2) {
|
|
54
|
-
@content;
|
|
50
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
|
|
51
|
+
@content;
|
|
55
52
|
}
|
|
56
|
-
@media screen
|
|
57
|
-
and (device-width: 320px)
|
|
58
|
-
and (device-height: 640px)
|
|
59
|
-
and (-webkit-device-pixel-ratio: 3) {
|
|
53
|
+
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
|
|
60
54
|
@content;
|
|
61
55
|
}
|
|
62
|
-
@media screen
|
|
63
|
-
and (device-width: 360px)
|
|
64
|
-
and (device-height: 640px)
|
|
65
|
-
and (-webkit-device-pixel-ratio: 4) {
|
|
56
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
|
|
66
57
|
@content;
|
|
67
58
|
}
|
|
68
|
-
@media screen
|
|
69
|
-
and (device-width: 360px)
|
|
70
|
-
and (device-height: 640px)
|
|
71
|
-
and (-webkit-device-pixel-ratio: 3) {
|
|
59
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
|
|
72
60
|
@content;
|
|
73
61
|
}
|
|
74
|
-
@media screen
|
|
75
|
-
and (device-width: 360px)
|
|
76
|
-
and (device-height: 640px)
|
|
77
|
-
and (-webkit-device-pixel-ratio: 4) {
|
|
62
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
|
|
78
63
|
@content;
|
|
79
64
|
}
|
|
80
65
|
}
|
|
81
66
|
// Large devices
|
|
82
67
|
@mixin lg {
|
|
83
68
|
@media (max-width: 64rem) {
|
|
84
|
-
|
|
69
|
+
@content;
|
|
85
70
|
}
|
|
86
|
-
}
|
|
71
|
+
}
|
package/dist/styles/components/packages/ds-basic/styles/base/_generic/_general-functions.scss
CHANGED
|
@@ -12,7 +12,7 @@ $default-browser-font-size: 16px;
|
|
|
12
12
|
} @else if $unit == 'rem' {
|
|
13
13
|
@return $value;
|
|
14
14
|
} @else if $unit == 'px' {
|
|
15
|
-
@return $value / $theme-base-font-size * 1rem;
|
|
15
|
+
@return round($value / $theme-base-font-size) * 1rem;
|
|
16
16
|
} @else if $unit == 'em' {
|
|
17
17
|
@return $unit / 1em * 1rem;
|
|
18
18
|
} @else {
|
|
@@ -20,7 +20,6 @@ $default-browser-font-size: 16px;
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
23
|
/// Returns the value in ems for a given pixel value. Note that this
|
|
25
24
|
/// only works for elements that have had no font-size changes.
|
|
26
25
|
/// @param {Number} $value - The pixel value to be converted.
|
|
@@ -42,7 +41,6 @@ $default-browser-font-size: 16px;
|
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
|
|
45
|
-
|
|
46
44
|
///
|
|
47
45
|
/// Returns whether `$list` contains `$value`.
|
|
48
46
|
/// @ignore Documentation: http://at-import.github.io/SassyLists/documentation/#function-sl-contain
|
|
@@ -64,13 +62,11 @@ $default-browser-font-size: 16px;
|
|
|
64
62
|
/// @requires sl-contain
|
|
65
63
|
/// @alias sl-contain
|
|
66
64
|
///
|
|
67
|
-
|
|
65
|
+
|
|
68
66
|
@function include($list, $value) {
|
|
69
67
|
@return contain($list, $value);
|
|
70
68
|
}
|
|
71
69
|
|
|
72
|
-
|
|
73
|
-
|
|
74
70
|
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
|
75
71
|
///
|
|
76
72
|
/// @param {Number} $num - Number to strip unit from.
|
|
@@ -167,7 +163,6 @@ $default-browser-font-size: 16px;
|
|
|
167
163
|
///
|
|
168
164
|
/// @return {Number} - Unitless number
|
|
169
165
|
@function unitless-calc($value, $base: null) {
|
|
170
|
-
|
|
171
166
|
// If no base is defined, defer to the global font size
|
|
172
167
|
@if $base == null {
|
|
173
168
|
$base: $global-font-size;
|
|
@@ -1,20 +1,25 @@
|
|
|
1
|
-
$point-unit:
|
|
1
|
+
$point-unit: 6.5px !default;
|
|
2
2
|
// Point-Grid System
|
|
3
3
|
// Use multiples of this value to define dimensions, padding, and margin of both block and inline elements.
|
|
4
4
|
// Learn more here: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
|
|
5
5
|
|
|
6
6
|
$spacing-data: (
|
|
7
|
-
none: 0,
|
|
8
|
-
xxs:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
none: 0,
|
|
8
|
+
xxs: rem($point-unit / 2),
|
|
9
|
+
// 4px
|
|
10
|
+
xs: rem($point-unit),
|
|
11
|
+
// 8px
|
|
12
|
+
s: rem($point-unit * 2),
|
|
13
|
+
// 16px
|
|
14
|
+
m: rem($point-unit * 3),
|
|
15
|
+
// 24px
|
|
16
|
+
l: rem($point-unit * 4),
|
|
17
|
+
// 32px
|
|
18
|
+
xl: rem($point-unit * 6),
|
|
19
|
+
// 48px
|
|
20
|
+
xxl: rem($point-unit * 8) // 64px,,,
|
|
15
21
|
) !default;
|
|
16
22
|
|
|
17
|
-
|
|
18
23
|
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
|
|
19
24
|
/// @type Map
|
|
20
25
|
$breakpoints: (
|
|
@@ -25,62 +30,42 @@ $breakpoints: (
|
|
|
25
30
|
xxlarge: 1440px,
|
|
26
31
|
) !default;
|
|
27
32
|
|
|
28
|
-
|
|
29
33
|
// Small devices
|
|
30
34
|
@mixin sm {
|
|
31
|
-
@media (max-width: 32rem
|
|
32
|
-
|
|
35
|
+
@media (max-width: 32rem) {
|
|
36
|
+
@content;
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
// Medium devices
|
|
36
40
|
@mixin md {
|
|
37
41
|
@media (max-width: 48rem) {
|
|
38
|
-
|
|
42
|
+
@content;
|
|
39
43
|
}
|
|
40
|
-
@media only screen
|
|
41
|
-
and (max-device-width: 667px)
|
|
42
|
-
and (-webkit-min-device-pixel-ratio: 2) {
|
|
44
|
+
@media only screen and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
|
|
43
45
|
@content;
|
|
44
46
|
}
|
|
45
|
-
@media only screen
|
|
46
|
-
|
|
47
|
-
and (-webkit-min-device-pixel-ratio: 3) {
|
|
48
|
-
@content;
|
|
47
|
+
@media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
|
|
48
|
+
@content;
|
|
49
49
|
}
|
|
50
|
-
@media screen
|
|
51
|
-
|
|
52
|
-
and (device-height: 640px)
|
|
53
|
-
and (-webkit-device-pixel-ratio: 2) {
|
|
54
|
-
@content;
|
|
50
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
|
|
51
|
+
@content;
|
|
55
52
|
}
|
|
56
|
-
@media screen
|
|
57
|
-
and (device-width: 320px)
|
|
58
|
-
and (device-height: 640px)
|
|
59
|
-
and (-webkit-device-pixel-ratio: 3) {
|
|
53
|
+
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
|
|
60
54
|
@content;
|
|
61
55
|
}
|
|
62
|
-
@media screen
|
|
63
|
-
and (device-width: 360px)
|
|
64
|
-
and (device-height: 640px)
|
|
65
|
-
and (-webkit-device-pixel-ratio: 4) {
|
|
56
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
|
|
66
57
|
@content;
|
|
67
58
|
}
|
|
68
|
-
@media screen
|
|
69
|
-
and (device-width: 360px)
|
|
70
|
-
and (device-height: 640px)
|
|
71
|
-
and (-webkit-device-pixel-ratio: 3) {
|
|
59
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
|
|
72
60
|
@content;
|
|
73
61
|
}
|
|
74
|
-
@media screen
|
|
75
|
-
and (device-width: 360px)
|
|
76
|
-
and (device-height: 640px)
|
|
77
|
-
and (-webkit-device-pixel-ratio: 4) {
|
|
62
|
+
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
|
|
78
63
|
@content;
|
|
79
64
|
}
|
|
80
65
|
}
|
|
81
66
|
// Large devices
|
|
82
67
|
@mixin lg {
|
|
83
68
|
@media (max-width: 64rem) {
|
|
84
|
-
|
|
69
|
+
@content;
|
|
85
70
|
}
|
|
86
|
-
}
|
|
71
|
+
}
|