@agilekit/ui 0.0.402-alpha.0 → 0.0.403-alpha.0
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/package.json +2 -2
- package/src/assets/styles/global/bootstrap/_card.scss +6 -5
- package/src/assets/styles/global/bootstrap/_carousel.scss +3 -2
- package/src/assets/styles/global/bootstrap/_custom-forms.scss +5 -4
- package/src/assets/styles/global/bootstrap/_forms.scss +5 -4
- package/src/assets/styles/global/bootstrap/_functions.scss +2 -1
- package/src/assets/styles/global/bootstrap/_jumbotron.scss +3 -1
- package/src/assets/styles/global/bootstrap/_popover.scss +7 -5
- package/src/assets/styles/global/bootstrap/_tooltip.scss +6 -4
- package/src/assets/styles/global/bootstrap/mixins/_grid.scss +1 -2
- package/src/assets/styles/global/bootstrap/utilities/_embed.scss +2 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agilekit/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.403-alpha.0",
|
|
4
4
|
"description": "Agile's product component library",
|
|
5
5
|
"author": "Michael de Lima Alves <michaelalves@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"react-spring": "*"
|
|
144
144
|
},
|
|
145
145
|
"bugs": {},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "b729673db2031a038ce54b8e4105cf519b690e1c"
|
|
147
147
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
//
|
|
2
3
|
// Base styles
|
|
3
4
|
//
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
.card-subtitle {
|
|
46
|
-
margin-top: -$card-spacer-y
|
|
47
|
+
margin-top: math.div(-$card-spacer-y, 2);
|
|
47
48
|
margin-bottom: 0;
|
|
48
49
|
}
|
|
49
50
|
|
|
@@ -99,15 +100,15 @@
|
|
|
99
100
|
//
|
|
100
101
|
|
|
101
102
|
.card-header-tabs {
|
|
102
|
-
margin-right: -$card-spacer-x
|
|
103
|
+
margin-right: math.div(-$card-spacer-x, 2);
|
|
103
104
|
margin-bottom: -$card-spacer-y;
|
|
104
|
-
margin-left: -$card-spacer-x
|
|
105
|
+
margin-left: math.div(-$card-spacer-x, 2);
|
|
105
106
|
border-bottom: 0;
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
.card-header-pills {
|
|
109
|
-
margin-right: -$card-spacer-x
|
|
110
|
-
margin-left: -$card-spacer-x
|
|
110
|
+
margin-right: math.div(-$card-spacer-x, 2);
|
|
111
|
+
margin-left: math.div(-$card-spacer-x, 2);
|
|
111
112
|
}
|
|
112
113
|
|
|
113
114
|
// Card image
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
// Notes on the classes:
|
|
2
3
|
//
|
|
3
4
|
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
|
@@ -187,9 +188,9 @@
|
|
|
187
188
|
|
|
188
189
|
.carousel-caption {
|
|
189
190
|
position: absolute;
|
|
190
|
-
right: (100% - $carousel-caption-width)
|
|
191
|
+
right: math.div((100% - $carousel-caption-width), 2);
|
|
191
192
|
bottom: 20px;
|
|
192
|
-
left: (100% - $carousel-caption-width)
|
|
193
|
+
left: math.div((100% - $carousel-caption-width), 2);
|
|
193
194
|
z-index: 10;
|
|
194
195
|
padding-top: 20px;
|
|
195
196
|
padding-bottom: 20px;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
// Embedded icons from Open Iconic.
|
|
2
3
|
// Released under MIT and copyright 2014 Waybury.
|
|
3
4
|
// https://useiconic.com/open
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
// Background-color and (when enabled) gradient
|
|
75
76
|
&::before {
|
|
76
77
|
position: absolute;
|
|
77
|
-
top: ($font-size-base * $line-height-base - $custom-control-indicator-size)
|
|
78
|
+
top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
|
|
78
79
|
left: -($custom-control-gutter + $custom-control-indicator-size);
|
|
79
80
|
display: block;
|
|
80
81
|
width: $custom-control-indicator-size;
|
|
@@ -89,7 +90,7 @@
|
|
|
89
90
|
// Foreground (icon)
|
|
90
91
|
&::after {
|
|
91
92
|
position: absolute;
|
|
92
|
-
top: ($font-size-base * $line-height-base - $custom-control-indicator-size)
|
|
93
|
+
top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
|
|
93
94
|
left: -($custom-control-gutter + $custom-control-indicator-size);
|
|
94
95
|
display: block;
|
|
95
96
|
width: $custom-control-indicator-size;
|
|
@@ -387,7 +388,7 @@
|
|
|
387
388
|
&::-webkit-slider-thumb {
|
|
388
389
|
width: $custom-range-thumb-width;
|
|
389
390
|
height: $custom-range-thumb-height;
|
|
390
|
-
margin-top: ($custom-range-track-height - $custom-range-thumb-height)
|
|
391
|
+
margin-top: math.div(($custom-range-track-height - $custom-range-thumb-height), 2); // Webkit specific
|
|
391
392
|
@include gradient-bg($custom-range-thumb-bg);
|
|
392
393
|
border: $custom-range-thumb-border;
|
|
393
394
|
@include border-radius($custom-range-thumb-border-radius);
|
|
@@ -462,7 +463,7 @@
|
|
|
462
463
|
cursor: $custom-range-track-cursor;
|
|
463
464
|
background-color: transparent;
|
|
464
465
|
border-color: transparent;
|
|
465
|
-
border-width: $custom-range-thumb-height
|
|
466
|
+
border-width: math.div($custom-range-thumb-height, 2);
|
|
466
467
|
@include box-shadow($custom-range-track-box-shadow);
|
|
467
468
|
}
|
|
468
469
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
// stylelint-disable selector-no-qualifying-type
|
|
2
3
|
|
|
3
4
|
//
|
|
@@ -190,13 +191,13 @@ textarea.form-control {
|
|
|
190
191
|
.form-row {
|
|
191
192
|
display: flex;
|
|
192
193
|
flex-wrap: wrap;
|
|
193
|
-
margin-right:
|
|
194
|
-
margin-left:
|
|
194
|
+
margin-right: calc(-#{$form-grid-gutter-width} / 2);
|
|
195
|
+
margin-left: calc(-#{$form-grid-gutter-width} / 2);
|
|
195
196
|
|
|
196
197
|
> .col,
|
|
197
198
|
> [class*="col-"] {
|
|
198
|
-
padding-right: $form-grid-gutter-width
|
|
199
|
-
padding-left: $form-grid-gutter-width
|
|
199
|
+
padding-right: math.div($form-grid-gutter-width, 2);
|
|
200
|
+
padding-left: math.div($form-grid-gutter-width, 2);
|
|
200
201
|
}
|
|
201
202
|
}
|
|
202
203
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
// Bootstrap functions
|
|
2
3
|
//
|
|
3
4
|
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
$g: green($color);
|
|
55
56
|
$b: blue($color);
|
|
56
57
|
|
|
57
|
-
$yiq: (($r * 299) + ($g * 587) + ($b * 114))
|
|
58
|
+
$yiq: math.div((($r * 299) + ($g * 587) + ($b * 114)), 1000);
|
|
58
59
|
|
|
59
60
|
@if ($yiq >= $yiq-contrasted-threshold) {
|
|
60
61
|
@return $dark;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
|
|
1
3
|
.jumbotron {
|
|
2
|
-
padding: $jumbotron-padding ($jumbotron-padding
|
|
4
|
+
padding: $jumbotron-padding (math.div($jumbotron-padding, 2));
|
|
3
5
|
margin-bottom: $jumbotron-padding;
|
|
4
6
|
background-color: $jumbotron-bg;
|
|
5
7
|
@include border-radius($border-radius-lg);
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
|
|
1
3
|
.popover {
|
|
2
4
|
position: absolute;
|
|
3
5
|
top: 0;
|
|
@@ -44,7 +46,7 @@
|
|
|
44
46
|
|
|
45
47
|
.arrow::before,
|
|
46
48
|
.arrow::after {
|
|
47
|
-
border-width: $popover-arrow-height ($popover-arrow-width
|
|
49
|
+
border-width: $popover-arrow-height (math.div($popover-arrow-width, 2)) 0;
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
.arrow::before {
|
|
@@ -70,7 +72,7 @@
|
|
|
70
72
|
|
|
71
73
|
.arrow::before,
|
|
72
74
|
.arrow::after {
|
|
73
|
-
border-width: ($popover-arrow-width
|
|
75
|
+
border-width: (math.div($popover-arrow-width, 2)) $popover-arrow-height (math.div($popover-arrow-width, 2)) 0;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
.arrow::before {
|
|
@@ -93,7 +95,7 @@
|
|
|
93
95
|
|
|
94
96
|
.arrow::before,
|
|
95
97
|
.arrow::after {
|
|
96
|
-
border-width: 0 ($popover-arrow-width
|
|
98
|
+
border-width: 0 (math.div($popover-arrow-width, 2)) $popover-arrow-height (math.div($popover-arrow-width, 2));
|
|
97
99
|
}
|
|
98
100
|
|
|
99
101
|
.arrow::before {
|
|
@@ -113,7 +115,7 @@
|
|
|
113
115
|
left: 50%;
|
|
114
116
|
display: block;
|
|
115
117
|
width: $popover-arrow-width;
|
|
116
|
-
margin-left: -$popover-arrow-width
|
|
118
|
+
margin-left: math.div(-$popover-arrow-width, 2);
|
|
117
119
|
content: "";
|
|
118
120
|
border-bottom: $popover-border-width solid $popover-header-bg;
|
|
119
121
|
}
|
|
@@ -131,7 +133,7 @@
|
|
|
131
133
|
|
|
132
134
|
.arrow::before,
|
|
133
135
|
.arrow::after {
|
|
134
|
-
border-width: ($popover-arrow-width
|
|
136
|
+
border-width: (math.div($popover-arrow-width, 2)) 0 (math.div($popover-arrow-width, 2)) $popover-arrow-height;
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
.arrow::before {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
|
|
1
3
|
// Base class
|
|
2
4
|
.tooltip {
|
|
3
5
|
position: absolute;
|
|
@@ -37,7 +39,7 @@
|
|
|
37
39
|
|
|
38
40
|
&::before {
|
|
39
41
|
top: 0;
|
|
40
|
-
border-width: $tooltip-arrow-height ($tooltip-arrow-width
|
|
42
|
+
border-width: $tooltip-arrow-height (math.div($tooltip-arrow-width, 2)) 0;
|
|
41
43
|
border-top-color: $tooltip-arrow-color;
|
|
42
44
|
}
|
|
43
45
|
}
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
|
|
54
56
|
&::before {
|
|
55
57
|
right: 0;
|
|
56
|
-
border-width: ($tooltip-arrow-width
|
|
58
|
+
border-width: (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height (math.div($tooltip-arrow-width, 2)) 0;
|
|
57
59
|
border-right-color: $tooltip-arrow-color;
|
|
58
60
|
}
|
|
59
61
|
}
|
|
@@ -67,7 +69,7 @@
|
|
|
67
69
|
|
|
68
70
|
&::before {
|
|
69
71
|
bottom: 0;
|
|
70
|
-
border-width: 0 ($tooltip-arrow-width
|
|
72
|
+
border-width: 0 (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height;
|
|
71
73
|
border-bottom-color: $tooltip-arrow-color;
|
|
72
74
|
}
|
|
73
75
|
}
|
|
@@ -83,7 +85,7 @@
|
|
|
83
85
|
|
|
84
86
|
&::before {
|
|
85
87
|
left: 0;
|
|
86
|
-
border-width: ($tooltip-arrow-width
|
|
88
|
+
border-width: (math.div($tooltip-arrow-width, 2)) 0 (math.div($tooltip-arrow-width, 2)) $tooltip-arrow-height;
|
|
87
89
|
border-left-color: $tooltip-arrow-color;
|
|
88
90
|
}
|
|
89
91
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:math";
|
|
1
2
|
// Credit: Nicolas Gallagher and SUIT CSS.
|
|
2
3
|
|
|
3
4
|
.embed-responsive {
|
|
@@ -33,7 +34,7 @@
|
|
|
33
34
|
|
|
34
35
|
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
|
|
35
36
|
&::before {
|
|
36
|
-
padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
|
|
37
|
+
padding-top: percentage(math.div($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x));
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
}
|