@openedx/paragon 23.6.0 → 23.6.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/Button/_mixins.scss +51 -2
- package/dist/Button/button-group.scss +7 -4
- package/dist/core.css +45 -2
- package/dist/core.css.map +1 -1
- package/dist/core.min.css +1 -1
- package/package.json +1 -1
- package/src/Button/_mixins.scss +51 -2
- package/src/Button/button-group.scss +7 -4
package/package.json
CHANGED
package/src/Button/_mixins.scss
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
// OVERRIDE FROM BOOTSTRAP
|
|
2
|
-
// No changes made. We do this to keep all button related mixins together,
|
|
3
1
|
//
|
|
2
|
+
// Includes common mixins related to button styles.
|
|
3
|
+
//
|
|
4
|
+
|
|
4
5
|
// Button sizes
|
|
6
|
+
// OVERRIDE FROM BOOTSTRAP
|
|
7
|
+
// No changes made. We do this to keep all button related mixins together,
|
|
5
8
|
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
|
|
6
9
|
padding: $padding-y $padding-x;
|
|
7
10
|
|
|
@@ -12,3 +15,49 @@
|
|
|
12
15
|
// Manually declare to provide an override to the browser default
|
|
13
16
|
@include border-radius($button-border-radius, 0);
|
|
14
17
|
}
|
|
18
|
+
|
|
19
|
+
// Mixin for button states that affect border radius
|
|
20
|
+
@mixin button-border-radius-0($side) {
|
|
21
|
+
@if $side == 'right' {
|
|
22
|
+
@include border-right-radius(0);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@if $side == 'left' {
|
|
26
|
+
@include border-left-radius(0);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// Handle pseudo-classes
|
|
30
|
+
&.btn:not(:disabled, .disabled):focus,
|
|
31
|
+
&.btn:not(:disabled, .disabled):focus::before {
|
|
32
|
+
@if $side == 'left' {
|
|
33
|
+
@include border-left-radius(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@if $side == 'right' {
|
|
37
|
+
@include border-right-radius(0);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.btn:not(:disabled, .disabled):active,
|
|
42
|
+
&.btn:not(:disabled, .disabled):active::before {
|
|
43
|
+
@if $side == 'left' {
|
|
44
|
+
@include border-left-radius(0);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@if $side == 'right' {
|
|
48
|
+
@include border-right-radius(0);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Handle .active class
|
|
53
|
+
&.btn:not(:disabled, .disabled).active,
|
|
54
|
+
&.btn:not(:disabled, .disabled).active::before {
|
|
55
|
+
@if $side == 'right' {
|
|
56
|
+
@include border-right-radius(0);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@if $side == 'left' {
|
|
60
|
+
@include border-left-radius(0);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
&:focus,
|
|
16
16
|
&:active,
|
|
17
17
|
&.active {
|
|
18
|
-
z-index:
|
|
18
|
+
z-index: 2;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}
|
|
@@ -36,14 +36,17 @@
|
|
|
36
36
|
margin-left: calc(var(--pgn-size-btn-border-width) * -1);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
// Right border radius for non-last buttons
|
|
40
|
+
> .btn:not(:last-child, .dropdown-toggle, :first-child),
|
|
39
41
|
> .btn:not(:last-child, .dropdown-toggle),
|
|
40
42
|
> .btn-group:not(:last-child) > .btn {
|
|
41
|
-
@include border-
|
|
43
|
+
@include button-border-radius-0('right');
|
|
42
44
|
}
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
// Left border radius for non-first buttons
|
|
47
|
+
> .btn:not(:first-child, .dropdown-toggle),
|
|
45
48
|
> .btn-group:not(:first-child) > .btn {
|
|
46
|
-
@include border-
|
|
49
|
+
@include button-border-radius-0('left');
|
|
47
50
|
}
|
|
48
51
|
}
|
|
49
52
|
|