@ulu/frontend 0.1.0-beta.51 → 0.1.0-beta.52

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 (3) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/scss/components/_slider.scss +36 -40
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Change Log
2
2
 
3
+ ## Version 0.1.0-beta.52
4
+
5
+ - **scss/components/slider**
6
+ - Remove "button-size" option (was never hooked up)
7
+ - Change "dot-" prefixed options to "nav-" so it's not describing it visually
8
+ - Change "margin-bottom" and "margin-top" to singular margin rule
9
+
3
10
  ## Version 0.1.0-beta.51
4
11
 
5
12
  - **scss/components/slider**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ulu/frontend",
3
- "version": "0.1.0-beta.51",
3
+ "version": "0.1.0-beta.52",
4
4
  "description": "Modular Sass Theming Library",
5
5
  "browser": "js/index.js",
6
6
  "main": "index.js",
package/scss/components/_slider.scss CHANGED
@@ -12,51 +12,47 @@
12
12
  /// Module Settings
13
13
  /// @type Map
14
14
  /// @prop {Color} background-color [transparent] Background color for the entire slider section.
15
- /// @prop {Dimension} margin-bottom [3rem] Bottom margin color for the entire slider section.
16
- /// @prop {Dimension} margin-top [1rem] Top margin color for the entire slider section.
17
- /// @prop {Dimension} padding-bottom [0] Bottom padding for individual slides.
15
+ /// @prop {Dimension} margin [(1rem 0 3rem 0)] Margin for slider container
18
16
  /// @prop {Dimension} padding-top [0] Top padding for individual slides.
19
17
  /// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides.
20
18
  /// @prop {Dimension} button-icon-offset-y [false] Offsets the control options down by adding a margin.
21
19
  /// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
22
- /// @prop {Dimension} button-size [3rem] Size of the button. Likely antiquated and replaced with button-width and button-height
23
20
  /// @prop {Color} nav-margin [(0.5rem 0)] Margin for nav (dots)
24
- /// @prop {Color} dot-background-color [transparent] The color of the dot when unselected.
25
- /// @prop {Color} dot-background-color-hover [color.get("link")] The color of the dot when hovered.
26
- /// @prop {Color} dot-background-color-selected [color.get("link")] The color of the dot when selected.
27
- /// @prop {Dimension} dot-border-radius [50%] The border-radius of the dot.
28
- /// @prop {Color} dot-border-color [color.get("link")] The border color of the dot.
29
- /// @prop {Color} dot-border-color-hover [color.get("link")] The border color of the dot when hovered.
30
- /// @prop {Color} dot-border-color-selected [color.get("link")] The border color of the dot when selected.
31
- /// @prop {Dimension} dot-border-width [2px] The border width of the dot.
32
- /// @prop {Dimension} dot-size [1rem] The height and width of the dot.
33
- /// @prop {Dimension} dot-gap [0.2rem] Gap between dots
21
+ /// @prop {Color} nav-background-color [transparent] The color of the dot when unselected.
22
+ /// @prop {Color} nav-background-color-hover [color.get("link")] The color of the dot when hovered.
23
+ /// @prop {Color} nav-background-color-selected [color.get("link")] The color of the dot when selected.
24
+ /// @prop {Dimension} nav-border-radius [50%] The border-radius of the dot.
25
+ /// @prop {Color} nav-border-color [color.get("link")] The border color of the dot.
26
+ /// @prop {Color} nav-border-color-hover [color.get("link")] The border color of the dot when hovered.
27
+ /// @prop {Color} nav-border-color-selected [color.get("link")] The border color of the dot when selected.
28
+ /// @prop {Dimension} nav-border-width [2px] The border width of the dot.
29
+ /// @prop {Dimension} nav-size [1rem] The height and width of the dot.
30
+ /// @prop {Dimension} nav-gap [0.2rem] Gap between dots
34
31
  /// @prop {Dimension} button-height [1rem] The height of the button.
35
32
  /// @prop {Dimension} button-width [1rem] The width of the button.
36
33
 
37
34
  $config: (
38
35
  "background-color" : transparent,
39
- "margin-bottom" : 3rem,
40
- "margin-top" : 1rem,
36
+ "margin" : (1rem 0 3rem 0),
37
+ "padding-bottom" : 0,
38
+ "padding-top" : 0,
41
39
  "button-icon-offset-x" : 2rem,
42
40
  "button-icon-offset-y" : null,
43
41
  "button-margin" : 2rem,
44
- "button-size" : 3rem,
45
42
  "button-height": 2.5rem,
46
43
  "button-width": 2.5rem,
47
- "dot-background-color" : transparent,
48
- "dot-background-color-hover" : "link",
49
- "dot-background-color-selected" : "link",
50
- "dot-border-color" : "link",
51
- "dot-border-color-hover" : "link",
52
- "dot-border-color-selected" : "link",
53
- "dot-border-radius" : 50%,
54
- "dot-gap" : 0.2rem,
55
- "dot-border-width" : 2px,
56
- "dot-size" : 1rem,
44
+ "nav-background-color" : transparent,
45
+ "nav-background-color-hover" : "link",
46
+ "nav-background-color-selected" : "link",
47
+ "nav-border-color" : "link",
48
+ "nav-border-color-hover" : "link",
49
+ "nav-border-color-selected" : "link",
50
+ "nav-border-radius" : 50%,
51
+ "nav-gap" : 0.2rem,
52
+ "nav-border-width" : 2px,
53
+ "nav-size" : 1rem,
57
54
  "nav-margin" : (0.5rem 0),
58
- "padding-bottom" : 0,
59
- "padding-top" : 0,
55
+
60
56
  ) !default;
61
57
 
62
58
  /// Change modules $config
@@ -88,7 +84,7 @@ $config: (
88
84
  #{ $prefix } {
89
85
  position: relative; // for controls
90
86
  background-color: color.get(get("background-color"));
91
- margin: get("margin-top") 0 get("margin-bottom") 0;
87
+ margin: get("margin");
92
88
  }
93
89
  #{ $prefix }__track,
94
90
  #{ $prefix-plugin }__controls,
@@ -107,24 +103,24 @@ $config: (
107
103
  display: flex;
108
104
  justify-content: center;
109
105
  margin: get("nav-margin");
110
- gap: get("dot-gap");
106
+ gap: get("nav-gap");
111
107
  }
112
108
  #{ $prefix-plugin }__nav-button {
113
109
  display: block;
114
- width: get("dot-size");
115
- height: get("dot-size");
116
- background-color: color.get(get("dot-background-color"));
117
- border: get("dot-border-width") solid color.get(get("dot-border-color"));
118
- border-radius: get("dot-border-radius");
110
+ width: get("nav-size");
111
+ height: get("nav-size");
112
+ background-color: color.get(get("nav-background-color"));
113
+ border: get("nav-border-width") solid color.get(get("nav-border-color"));
114
+ border-radius: get("nav-border-radius");
119
115
  &:hover {
120
- background-color: color.get(get("dot-background-color-hover"));
121
- border-color: color.get(get("dot-border-color-hover"));
116
+ background-color: color.get(get("nav-background-color-hover"));
117
+ border-color: color.get(get("nav-border-color-hover"));
122
118
  }
123
119
  }
124
120
  #{ $prefix-plugin }__nav-button--active,
125
121
  #{ $prefix-plugin }__nav-button--active:hover {
126
- background-color: color.get(get("dot-background-color-selected"));
127
- border-color: color.get(get("dot-border-color-selected"));
122
+ background-color: color.get(get("nav-background-color-selected"));
123
+ border-color: color.get(get("nav-border-color-selected"));
128
124
  }
129
125
  #{ $prefix-plugin }__control-button,
130
126
  #{ $prefix-plugin }__nav-button {