@agilekit/ui 0.0.513-alpha.0 → 0.0.514-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/README.md +42 -42
- package/lib/index.js +1 -1
- package/lib/index.js.LICENSE.txt +2 -0
- package/lib/src/components/FileUpload/FileUpload.d.ts +3 -0
- package/lib/src/components/Loader/Loader.styles.d.ts +2 -0
- package/lib/src/components/Slider/Slider.d.ts +1 -1
- package/lib/src/components/Switch/Switch.d.ts +1 -1
- package/lib/src/components/TextField/TextField.styles.d.ts +1 -1
- package/package.json +162 -162
- package/src/assets/fonts/fontello/README.txt +75 -75
- package/src/assets/fonts/fontello/config.json +933 -933
- package/src/assets/fonts/fontello/css/animation.css +85 -85
- package/src/assets/fonts/fontello/css/fontello-codes.css +66 -66
- package/src/assets/fonts/fontello/css/fontello-embedded.css +119 -119
- package/src/assets/fonts/fontello/css/fontello-ie7-codes.css +66 -66
- package/src/assets/fonts/fontello/css/fontello-ie7.css +77 -77
- package/src/assets/fonts/fontello/css/fontello.css +122 -122
- package/src/assets/fonts/fontello/demo.html +402 -402
- package/src/assets/fonts/fontello/font/fontello.eot +0 -0
- package/src/assets/fonts/fontello/font/fontello.svg +141 -141
- package/src/assets/fonts/fontello/font/fontello.ttf +0 -0
- package/src/assets/fonts/fontello/font/fontello.woff +0 -0
- package/src/assets/fonts/fontello/font/fontello.woff2 +0 -0
- package/src/assets/fonts/svg/Icon/ic-chat.svg +12 -12
- package/src/assets/fonts/svg/Icon/ic-dollar.svg +13 -13
- package/src/assets/fonts/svg/Icon/ic-invoice.svg +15 -15
- package/src/assets/fonts/svg/Icon/ic-menu.svg +8 -8
- package/src/assets/fonts/svg/ic-activity.svg +8 -8
- package/src/assets/fonts/svg/ic-arrow-long-right.svg +48 -48
- package/src/assets/fonts/svg/ic-arrows.svg +9 -9
- package/src/assets/fonts/svg/ic-atm-card.svg +9 -9
- package/src/assets/fonts/svg/ic-bank-solid.svg +10 -10
- package/src/assets/fonts/svg/ic-bell.svg +10 -10
- package/src/assets/fonts/svg/ic-briefcase.svg +9 -9
- package/src/assets/fonts/svg/ic-calendar-alt.svg +15 -15
- package/src/assets/fonts/svg/ic-check-alt.svg +26 -26
- package/src/assets/fonts/svg/ic-check.svg +10 -10
- package/src/assets/fonts/svg/ic-circle-solid.svg +7 -7
- package/src/assets/fonts/svg/ic-circle.svg +7 -7
- package/src/assets/fonts/svg/ic-close.svg +9 -9
- package/src/assets/fonts/svg/ic-cog-solid.svg +14 -14
- package/src/assets/fonts/svg/ic-credit-card-solid.svg +7 -7
- package/src/assets/fonts/svg/ic-credit-card.svg +7 -7
- package/src/assets/fonts/svg/ic-database.svg +9 -9
- package/src/assets/fonts/svg/ic-desktop.svg +9 -9
- package/src/assets/fonts/svg/ic-dollar-solid.svg +10 -10
- package/src/assets/fonts/svg/ic-exclamation.svg +10 -10
- package/src/assets/fonts/svg/ic-globe.svg +9 -9
- package/src/assets/fonts/svg/ic-grid-solid.svg +9 -9
- package/src/assets/fonts/svg/ic-hash.svg +10 -10
- package/src/assets/fonts/svg/ic-help-circle.svg +11 -11
- package/src/assets/fonts/svg/ic-info.svg +10 -10
- package/src/assets/fonts/svg/ic-keyhole-square.svg +9 -9
- package/src/assets/fonts/svg/ic-lock.svg +8 -8
- package/src/assets/fonts/svg/ic-log-in.svg +9 -9
- package/src/assets/fonts/svg/ic-log-out.svg +9 -9
- package/src/assets/fonts/svg/ic-mail.svg +8 -8
- package/src/assets/fonts/svg/ic-map-pin.svg +8 -8
- package/src/assets/fonts/svg/ic-menu.svg +8 -8
- package/src/assets/fonts/svg/ic-minus.svg +6 -6
- package/src/assets/fonts/svg/ic-mobile-android.svg +9 -9
- package/src/assets/fonts/svg/ic-more.svg +27 -27
- package/src/assets/fonts/svg/ic-pen.svg +9 -9
- package/src/assets/fonts/svg/ic-phone.svg +13 -13
- package/src/assets/fonts/svg/ic-plus.svg +10 -10
- package/src/assets/fonts/svg/ic-question.svg +8 -8
- package/src/assets/fonts/svg/ic-search.svg +8 -8
- package/src/assets/fonts/svg/ic-settings.svg +27 -27
- package/src/assets/fonts/svg/ic-shield.svg +8 -8
- package/src/assets/fonts/svg/ic-shopping-cart.svg +9 -9
- package/src/assets/fonts/svg/ic-slash-solid.svg +7 -7
- package/src/assets/fonts/svg/ic-slash.svg +9 -9
- package/src/assets/fonts/svg/ic-sliders.svg +12 -12
- package/src/assets/fonts/svg/ic-store.svg +11 -11
- package/src/assets/fonts/svg/ic-tablet.svg +10 -10
- package/src/assets/fonts/svg/ic-user-circle.svg +10 -10
- package/src/assets/fonts/svg/ic-users.svg +21 -21
- package/src/assets/fonts/svg/ic-x-alt.svg +8 -8
- package/src/assets/styles/global/bootstrap/_alert.scss +51 -51
- package/src/assets/styles/global/bootstrap/_badge.scss +53 -53
- package/src/assets/styles/global/bootstrap/_breadcrumb.scss +41 -41
- package/src/assets/styles/global/bootstrap/_button-group.scss +163 -163
- package/src/assets/styles/global/bootstrap/_buttons.scss +140 -140
- package/src/assets/styles/global/bootstrap/_card.scss +311 -311
- package/src/assets/styles/global/bootstrap/_carousel.scss +199 -199
- package/src/assets/styles/global/bootstrap/_close.scss +44 -44
- package/src/assets/styles/global/bootstrap/_code.scss +48 -48
- package/src/assets/styles/global/bootstrap/_custom-forms.scss +508 -508
- package/src/assets/styles/global/bootstrap/_dropdown.scss +191 -191
- package/src/assets/styles/global/bootstrap/_forms.scss +335 -335
- package/src/assets/styles/global/bootstrap/_functions.scss +87 -87
- package/src/assets/styles/global/bootstrap/_grid.scss +52 -52
- package/src/assets/styles/global/bootstrap/_images.scss +42 -42
- package/src/assets/styles/global/bootstrap/_input-group.scss +193 -193
- package/src/assets/styles/global/bootstrap/_jumbotron.scss +18 -18
- package/src/assets/styles/global/bootstrap/_list-group.scss +121 -121
- package/src/assets/styles/global/bootstrap/_media.scss +8 -8
- package/src/assets/styles/global/bootstrap/_mixins.scss +41 -41
- package/src/assets/styles/global/bootstrap/_modal.scss +186 -186
- package/src/assets/styles/global/bootstrap/_nav.scss +120 -120
- package/src/assets/styles/global/bootstrap/_navbar.scss +299 -299
- package/src/assets/styles/global/bootstrap/_pagination.scss +78 -78
- package/src/assets/styles/global/bootstrap/_popover.scss +185 -185
- package/src/assets/styles/global/bootstrap/_print.scss +141 -141
- package/src/assets/styles/global/bootstrap/_progress.scss +34 -34
- package/src/assets/styles/global/bootstrap/_reboot.scss +462 -462
- package/src/assets/styles/global/bootstrap/_root.scss +19 -19
- package/src/assets/styles/global/bootstrap/_spinners.scss +53 -53
- package/src/assets/styles/global/bootstrap/_tables.scss +187 -187
- package/src/assets/styles/global/bootstrap/_toasts.scss +43 -43
- package/src/assets/styles/global/bootstrap/_tooltip.scss +117 -117
- package/src/assets/styles/global/bootstrap/_transitions.scss +22 -22
- package/src/assets/styles/global/bootstrap/_type.scss +125 -125
- package/src/assets/styles/global/bootstrap/_utilities.scss +16 -16
- package/src/assets/styles/global/bootstrap/_variables.scss +1088 -1088
- package/src/assets/styles/global/bootstrap/bootstrap-grid.scss +29 -29
- package/src/assets/styles/global/bootstrap/bootstrap-reboot.scss +12 -12
- package/src/assets/styles/global/bootstrap/bootstrap.scss +44 -44
- package/src/assets/styles/global/bootstrap/mixins/_alert.scss +13 -13
- package/src/assets/styles/global/bootstrap/mixins/_background-variant.scss +21 -21
- package/src/assets/styles/global/bootstrap/mixins/_badge.scss +11 -11
- package/src/assets/styles/global/bootstrap/mixins/_border-radius.scss +35 -35
- package/src/assets/styles/global/bootstrap/mixins/_box-shadow.scss +5 -5
- package/src/assets/styles/global/bootstrap/mixins/_breakpoints.scss +123 -123
- package/src/assets/styles/global/bootstrap/mixins/_buttons.scss +111 -111
- package/src/assets/styles/global/bootstrap/mixins/_caret.scss +62 -62
- package/src/assets/styles/global/bootstrap/mixins/_clearfix.scss +7 -7
- package/src/assets/styles/global/bootstrap/mixins/_float.scss +11 -11
- package/src/assets/styles/global/bootstrap/mixins/_forms.scss +198 -198
- package/src/assets/styles/global/bootstrap/mixins/_gradients.scss +45 -45
- package/src/assets/styles/global/bootstrap/mixins/_grid-framework.scss +66 -66
- package/src/assets/styles/global/bootstrap/mixins/_grid.scss +51 -51
- package/src/assets/styles/global/bootstrap/mixins/_hover.scss +37 -37
- package/src/assets/styles/global/bootstrap/mixins/_image.scss +36 -36
- package/src/assets/styles/global/bootstrap/mixins/_list-group.scss +21 -21
- package/src/assets/styles/global/bootstrap/mixins/_lists.scss +7 -7
- package/src/assets/styles/global/bootstrap/mixins/_nav-divider.scss +10 -10
- package/src/assets/styles/global/bootstrap/mixins/_pagination.scss +22 -22
- package/src/assets/styles/global/bootstrap/mixins/_reset-text.scss +17 -17
- package/src/assets/styles/global/bootstrap/mixins/_resize.scss +6 -6
- package/src/assets/styles/global/bootstrap/mixins/_screen-reader.scss +33 -33
- package/src/assets/styles/global/bootstrap/mixins/_size.scss +6 -6
- package/src/assets/styles/global/bootstrap/mixins/_table-row.scss +39 -39
- package/src/assets/styles/global/bootstrap/mixins/_text-emphasis.scss +14 -14
- package/src/assets/styles/global/bootstrap/mixins/_text-hide.scss +13 -13
- package/src/assets/styles/global/bootstrap/mixins/_text-truncate.scss +8 -8
- package/src/assets/styles/global/bootstrap/mixins/_transition.scss +16 -16
- package/src/assets/styles/global/bootstrap/mixins/_visibility.scss +7 -7
- package/src/assets/styles/global/bootstrap/utilities/_align.scss +8 -8
- package/src/assets/styles/global/bootstrap/utilities/_background.scss +19 -19
- package/src/assets/styles/global/bootstrap/utilities/_borders.scss +63 -63
- package/src/assets/styles/global/bootstrap/utilities/_clearfix.scss +3 -3
- package/src/assets/styles/global/bootstrap/utilities/_display.scss +38 -38
- package/src/assets/styles/global/bootstrap/utilities/_embed.scss +40 -40
- package/src/assets/styles/global/bootstrap/utilities/_flex.scss +51 -51
- package/src/assets/styles/global/bootstrap/utilities/_float.scss +9 -9
- package/src/assets/styles/global/bootstrap/utilities/_overflow.scss +5 -5
- package/src/assets/styles/global/bootstrap/utilities/_position.scss +32 -32
- package/src/assets/styles/global/bootstrap/utilities/_screenreaders.scss +11 -11
- package/src/assets/styles/global/bootstrap/utilities/_shadows.scss +6 -6
- package/src/assets/styles/global/bootstrap/utilities/_sizing.scss +20 -20
- package/src/assets/styles/global/bootstrap/utilities/_spacing.scss +73 -73
- package/src/assets/styles/global/bootstrap/utilities/_text.scss +67 -67
- package/src/assets/styles/global/bootstrap/utilities/_visibility.scss +11 -11
- package/src/assets/styles/global/core/card.scss +6 -6
- package/src/assets/styles/global/core/color.scss +76 -76
- package/src/assets/styles/global/core/status.scss +17 -17
- package/src/assets/styles/global/styles.scss +24 -24
- package/src/assets/styles/global/vendors/ant-design-grid.scss +5046 -5046
- package/src/assets/styles/shared/elements/scrollbar.scss +30 -30
- package/src/assets/styles/shared/settings/breakpoints.scss +10 -10
- package/src/assets/styles/shared/settings/colors.scss +110 -110
- package/src/assets/styles/shared/settings/depth.scss +14 -14
- package/src/assets/styles/shared/settings/layout.scss +10 -10
- package/src/assets/styles/shared/settings/typography.scss +9 -9
- package/src/assets/styles/shared/shared.scss +8 -8
- package/src/assets/styles/shared/tools/respond-to.scss +32 -32
- package/src/components/utils/breakpoints.ts +14 -14
- package/src/components/utils/browser.ts +10 -10
- package/src/components/utils/findParentBySelector.ts +17 -17
- package/src/components/utils/idGenerator.ts +4 -4
- package/src/components/utils/index.ts +4 -4
- package/src/components/utils/setNativeValue.ts +13 -13
- package/lib/src/components/Loader/tests/Loader.test.d.ts +0 -0
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
@use "sass:math";
|
|
2
|
-
/// Grid system
|
|
3
|
-
//
|
|
4
|
-
// Generate semantic grid columns with these mixins.
|
|
5
|
-
|
|
6
|
-
@mixin make-container($gutter: $grid-gutter-width) {
|
|
7
|
-
width: 100%;
|
|
8
|
-
padding-right: calc(#{$gutter} / 2);
|
|
9
|
-
padding-left: calc(#{$gutter} / 2);
|
|
10
|
-
margin-right: auto;
|
|
11
|
-
margin-left: auto;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// For each breakpoint, define the maximum width of the container in a media query
|
|
16
|
-
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
|
17
|
-
@each $breakpoint, $container-max-width in $max-widths {
|
|
18
|
-
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
19
|
-
max-width: $container-max-width;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin make-row($gutter: $grid-gutter-width) {
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-wrap: wrap;
|
|
27
|
-
margin-right: calc(-#{$gutter} / 2);
|
|
28
|
-
margin-left: calc(-#{$gutter} / 2);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
|
32
|
-
position: relative;
|
|
33
|
-
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
34
|
-
// always setting `width: 100%;`. This works because we use `flex` values
|
|
35
|
-
// later on to override this initial width.
|
|
36
|
-
width: 100%;
|
|
37
|
-
padding-right: calc(#{$gutter} / 2);
|
|
38
|
-
padding-left: calc(#{$gutter} / 2);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@mixin make-col($size, $columns: $grid-columns) {
|
|
42
|
-
flex: 0 0 percentage(math.div($size, $columns));
|
|
43
|
-
// Add a `max-width` to ensure content within each column does not blow out
|
|
44
|
-
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
45
|
-
// do not appear to require this.
|
|
46
|
-
max-width: percentage(math.div($size, $columns));
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
50
|
-
margin-left: if(math.div($size, $columns) == 0, 0, percentage(math.div($size, $columns)));
|
|
51
|
-
}
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
/// Grid system
|
|
3
|
+
//
|
|
4
|
+
// Generate semantic grid columns with these mixins.
|
|
5
|
+
|
|
6
|
+
@mixin make-container($gutter: $grid-gutter-width) {
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding-right: calc(#{$gutter} / 2);
|
|
9
|
+
padding-left: calc(#{$gutter} / 2);
|
|
10
|
+
margin-right: auto;
|
|
11
|
+
margin-left: auto;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
// For each breakpoint, define the maximum width of the container in a media query
|
|
16
|
+
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
|
17
|
+
@each $breakpoint, $container-max-width in $max-widths {
|
|
18
|
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
19
|
+
max-width: $container-max-width;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin make-row($gutter: $grid-gutter-width) {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-wrap: wrap;
|
|
27
|
+
margin-right: calc(-#{$gutter} / 2);
|
|
28
|
+
margin-left: calc(-#{$gutter} / 2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
|
32
|
+
position: relative;
|
|
33
|
+
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
34
|
+
// always setting `width: 100%;`. This works because we use `flex` values
|
|
35
|
+
// later on to override this initial width.
|
|
36
|
+
width: 100%;
|
|
37
|
+
padding-right: calc(#{$gutter} / 2);
|
|
38
|
+
padding-left: calc(#{$gutter} / 2);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin make-col($size, $columns: $grid-columns) {
|
|
42
|
+
flex: 0 0 percentage(math.div($size, $columns));
|
|
43
|
+
// Add a `max-width` to ensure content within each column does not blow out
|
|
44
|
+
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
45
|
+
// do not appear to require this.
|
|
46
|
+
max-width: percentage(math.div($size, $columns));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
50
|
+
margin-left: if(math.div($size, $columns) == 0, 0, percentage(math.div($size, $columns)));
|
|
51
|
+
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
// Hover mixin and `$enable-hover-media-query` are deprecated.
|
|
2
|
-
//
|
|
3
|
-
// Originally added during our alphas and maintained during betas, this mixin was
|
|
4
|
-
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
|
|
5
|
-
// would persist after initial touch.
|
|
6
|
-
//
|
|
7
|
-
// For backward compatibility, we've kept these mixins and updated them to
|
|
8
|
-
// always return their regular pseudo-classes instead of a shimmed media query.
|
|
9
|
-
//
|
|
10
|
-
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
|
11
|
-
|
|
12
|
-
@mixin hover {
|
|
13
|
-
&:hover { @content; }
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@mixin hover-focus {
|
|
17
|
-
&:hover,
|
|
18
|
-
&:focus {
|
|
19
|
-
@content;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@mixin plain-hover-focus {
|
|
24
|
-
&,
|
|
25
|
-
&:hover,
|
|
26
|
-
&:focus {
|
|
27
|
-
@content;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin hover-focus-active {
|
|
32
|
-
&:hover,
|
|
33
|
-
&:focus,
|
|
34
|
-
&:active {
|
|
35
|
-
@content;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
1
|
+
// Hover mixin and `$enable-hover-media-query` are deprecated.
|
|
2
|
+
//
|
|
3
|
+
// Originally added during our alphas and maintained during betas, this mixin was
|
|
4
|
+
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
|
|
5
|
+
// would persist after initial touch.
|
|
6
|
+
//
|
|
7
|
+
// For backward compatibility, we've kept these mixins and updated them to
|
|
8
|
+
// always return their regular pseudo-classes instead of a shimmed media query.
|
|
9
|
+
//
|
|
10
|
+
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
|
11
|
+
|
|
12
|
+
@mixin hover {
|
|
13
|
+
&:hover { @content; }
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@mixin hover-focus {
|
|
17
|
+
&:hover,
|
|
18
|
+
&:focus {
|
|
19
|
+
@content;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin plain-hover-focus {
|
|
24
|
+
&,
|
|
25
|
+
&:hover,
|
|
26
|
+
&:focus {
|
|
27
|
+
@content;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin hover-focus-active {
|
|
32
|
+
&:hover,
|
|
33
|
+
&:focus,
|
|
34
|
+
&:active {
|
|
35
|
+
@content;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
// Image Mixins
|
|
2
|
-
// - Responsive image
|
|
3
|
-
// - Retina image
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// Responsive image
|
|
7
|
-
//
|
|
8
|
-
// Keep images from scaling beyond the width of their parents.
|
|
9
|
-
|
|
10
|
-
@mixin img-fluid {
|
|
11
|
-
// Part 1: Set a maximum relative to the parent
|
|
12
|
-
max-width: 100%;
|
|
13
|
-
// Part 2: Override the height to auto, otherwise images will be stretched
|
|
14
|
-
// when setting a width and height attribute on the img element.
|
|
15
|
-
height: auto;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// Retina image
|
|
20
|
-
//
|
|
21
|
-
// Short retina mixin for setting background-image and -size.
|
|
22
|
-
|
|
23
|
-
// stylelint-disable indentation, media-query-list-comma-newline-after
|
|
24
|
-
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
|
25
|
-
background-image: url($file-1x);
|
|
26
|
-
|
|
27
|
-
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
|
28
|
-
// but doesn't convert dppx=>dpi.
|
|
29
|
-
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
|
30
|
-
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
|
31
|
-
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
|
32
|
-
only screen and (min-resolution: 2dppx) { // Standardized
|
|
33
|
-
background-image: url($file-2x);
|
|
34
|
-
background-size: $width-1x $height-1x;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
1
|
+
// Image Mixins
|
|
2
|
+
// - Responsive image
|
|
3
|
+
// - Retina image
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// Responsive image
|
|
7
|
+
//
|
|
8
|
+
// Keep images from scaling beyond the width of their parents.
|
|
9
|
+
|
|
10
|
+
@mixin img-fluid {
|
|
11
|
+
// Part 1: Set a maximum relative to the parent
|
|
12
|
+
max-width: 100%;
|
|
13
|
+
// Part 2: Override the height to auto, otherwise images will be stretched
|
|
14
|
+
// when setting a width and height attribute on the img element.
|
|
15
|
+
height: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
// Retina image
|
|
20
|
+
//
|
|
21
|
+
// Short retina mixin for setting background-image and -size.
|
|
22
|
+
|
|
23
|
+
// stylelint-disable indentation, media-query-list-comma-newline-after
|
|
24
|
+
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
|
25
|
+
background-image: url($file-1x);
|
|
26
|
+
|
|
27
|
+
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
|
28
|
+
// but doesn't convert dppx=>dpi.
|
|
29
|
+
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
|
30
|
+
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
|
31
|
+
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
|
32
|
+
only screen and (min-resolution: 2dppx) { // Standardized
|
|
33
|
+
background-image: url($file-2x);
|
|
34
|
+
background-size: $width-1x $height-1x;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
// List Groups
|
|
2
|
-
|
|
3
|
-
@mixin list-group-item-variant($state, $background, $color) {
|
|
4
|
-
.list-group-item-#{$state} {
|
|
5
|
-
color: $color;
|
|
6
|
-
background-color: $background;
|
|
7
|
-
|
|
8
|
-
&.list-group-item-action {
|
|
9
|
-
@include hover-focus {
|
|
10
|
-
color: $color;
|
|
11
|
-
background-color: darken($background, 5%);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
&.active {
|
|
15
|
-
color: $white;
|
|
16
|
-
background-color: $color;
|
|
17
|
-
border-color: $color;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
1
|
+
// List Groups
|
|
2
|
+
|
|
3
|
+
@mixin list-group-item-variant($state, $background, $color) {
|
|
4
|
+
.list-group-item-#{$state} {
|
|
5
|
+
color: $color;
|
|
6
|
+
background-color: $background;
|
|
7
|
+
|
|
8
|
+
&.list-group-item-action {
|
|
9
|
+
@include hover-focus {
|
|
10
|
+
color: $color;
|
|
11
|
+
background-color: darken($background, 5%);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.active {
|
|
15
|
+
color: $white;
|
|
16
|
+
background-color: $color;
|
|
17
|
+
border-color: $color;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
// Lists
|
|
2
|
-
|
|
3
|
-
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
|
4
|
-
@mixin list-unstyled {
|
|
5
|
-
padding-left: 0;
|
|
6
|
-
list-style: none;
|
|
7
|
-
}
|
|
1
|
+
// Lists
|
|
2
|
+
|
|
3
|
+
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
|
4
|
+
@mixin list-unstyled {
|
|
5
|
+
padding-left: 0;
|
|
6
|
+
list-style: none;
|
|
7
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
// Horizontal dividers
|
|
2
|
-
//
|
|
3
|
-
// Dividers (basically an hr) within dropdowns and nav lists
|
|
4
|
-
|
|
5
|
-
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
|
|
6
|
-
height: 0;
|
|
7
|
-
margin: $margin-y 0;
|
|
8
|
-
overflow: hidden;
|
|
9
|
-
border-top: 1px solid $color;
|
|
10
|
-
}
|
|
1
|
+
// Horizontal dividers
|
|
2
|
+
//
|
|
3
|
+
// Dividers (basically an hr) within dropdowns and nav lists
|
|
4
|
+
|
|
5
|
+
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
|
|
6
|
+
height: 0;
|
|
7
|
+
margin: $margin-y 0;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
border-top: 1px solid $color;
|
|
10
|
+
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
// Pagination
|
|
2
|
-
|
|
3
|
-
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
|
4
|
-
.page-link {
|
|
5
|
-
padding: $padding-y $padding-x;
|
|
6
|
-
font-size: $font-size;
|
|
7
|
-
line-height: $line-height;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.page-item {
|
|
11
|
-
&:first-child {
|
|
12
|
-
.page-link {
|
|
13
|
-
@include border-left-radius($border-radius);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
&:last-child {
|
|
17
|
-
.page-link {
|
|
18
|
-
@include border-right-radius($border-radius);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
1
|
+
// Pagination
|
|
2
|
+
|
|
3
|
+
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
|
4
|
+
.page-link {
|
|
5
|
+
padding: $padding-y $padding-x;
|
|
6
|
+
font-size: $font-size;
|
|
7
|
+
line-height: $line-height;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.page-item {
|
|
11
|
+
&:first-child {
|
|
12
|
+
.page-link {
|
|
13
|
+
@include border-left-radius($border-radius);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
&:last-child {
|
|
17
|
+
.page-link {
|
|
18
|
+
@include border-right-radius($border-radius);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
@mixin reset-text {
|
|
2
|
-
font-family: $font-family-base;
|
|
3
|
-
// We deliberately do NOT reset font-size or word-wrap.
|
|
4
|
-
font-style: normal;
|
|
5
|
-
font-weight: $font-weight-normal;
|
|
6
|
-
line-height: $line-height-base;
|
|
7
|
-
text-align: left; // Fallback for where `start` is not supported
|
|
8
|
-
text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
|
|
9
|
-
text-decoration: none;
|
|
10
|
-
text-shadow: none;
|
|
11
|
-
text-transform: none;
|
|
12
|
-
letter-spacing: normal;
|
|
13
|
-
word-break: normal;
|
|
14
|
-
word-spacing: normal;
|
|
15
|
-
white-space: normal;
|
|
16
|
-
line-break: auto;
|
|
17
|
-
}
|
|
1
|
+
@mixin reset-text {
|
|
2
|
+
font-family: $font-family-base;
|
|
3
|
+
// We deliberately do NOT reset font-size or word-wrap.
|
|
4
|
+
font-style: normal;
|
|
5
|
+
font-weight: $font-weight-normal;
|
|
6
|
+
line-height: $line-height-base;
|
|
7
|
+
text-align: left; // Fallback for where `start` is not supported
|
|
8
|
+
text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
text-shadow: none;
|
|
11
|
+
text-transform: none;
|
|
12
|
+
letter-spacing: normal;
|
|
13
|
+
word-break: normal;
|
|
14
|
+
word-spacing: normal;
|
|
15
|
+
white-space: normal;
|
|
16
|
+
line-break: auto;
|
|
17
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
// Resize anything
|
|
2
|
-
|
|
3
|
-
@mixin resizable($direction) {
|
|
4
|
-
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
|
5
|
-
resize: $direction; // Options: horizontal, vertical, both
|
|
6
|
-
}
|
|
1
|
+
// Resize anything
|
|
2
|
+
|
|
3
|
+
@mixin resizable($direction) {
|
|
4
|
+
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
|
5
|
+
resize: $direction; // Options: horizontal, vertical, both
|
|
6
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
// Only display content to screen readers
|
|
2
|
-
//
|
|
3
|
-
// See: https://a11yproject.com/posts/how-to-hide-content/
|
|
4
|
-
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
|
5
|
-
|
|
6
|
-
@mixin sr-only {
|
|
7
|
-
position: absolute;
|
|
8
|
-
width: 1px;
|
|
9
|
-
height: 1px;
|
|
10
|
-
padding: 0;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
clip: rect(0, 0, 0, 0);
|
|
13
|
-
white-space: nowrap;
|
|
14
|
-
border: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Use in conjunction with .sr-only to only display content when it's focused.
|
|
18
|
-
//
|
|
19
|
-
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
|
20
|
-
//
|
|
21
|
-
// Credit: HTML5 Boilerplate
|
|
22
|
-
|
|
23
|
-
@mixin sr-only-focusable {
|
|
24
|
-
&:active,
|
|
25
|
-
&:focus {
|
|
26
|
-
position: static;
|
|
27
|
-
width: auto;
|
|
28
|
-
height: auto;
|
|
29
|
-
overflow: visible;
|
|
30
|
-
clip: auto;
|
|
31
|
-
white-space: normal;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
1
|
+
// Only display content to screen readers
|
|
2
|
+
//
|
|
3
|
+
// See: https://a11yproject.com/posts/how-to-hide-content/
|
|
4
|
+
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
|
5
|
+
|
|
6
|
+
@mixin sr-only {
|
|
7
|
+
position: absolute;
|
|
8
|
+
width: 1px;
|
|
9
|
+
height: 1px;
|
|
10
|
+
padding: 0;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
clip: rect(0, 0, 0, 0);
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
border: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Use in conjunction with .sr-only to only display content when it's focused.
|
|
18
|
+
//
|
|
19
|
+
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
|
20
|
+
//
|
|
21
|
+
// Credit: HTML5 Boilerplate
|
|
22
|
+
|
|
23
|
+
@mixin sr-only-focusable {
|
|
24
|
+
&:active,
|
|
25
|
+
&:focus {
|
|
26
|
+
position: static;
|
|
27
|
+
width: auto;
|
|
28
|
+
height: auto;
|
|
29
|
+
overflow: visible;
|
|
30
|
+
clip: auto;
|
|
31
|
+
white-space: normal;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
// Sizing shortcuts
|
|
2
|
-
|
|
3
|
-
@mixin size($width, $height: $width) {
|
|
4
|
-
width: $width;
|
|
5
|
-
height: $height;
|
|
6
|
-
}
|
|
1
|
+
// Sizing shortcuts
|
|
2
|
+
|
|
3
|
+
@mixin size($width, $height: $width) {
|
|
4
|
+
width: $width;
|
|
5
|
+
height: $height;
|
|
6
|
+
}
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
// Tables
|
|
2
|
-
|
|
3
|
-
@mixin table-row-variant($state, $background, $border: null) {
|
|
4
|
-
// Exact selectors below required to override `.table-striped` and prevent
|
|
5
|
-
// inheritance to nested tables.
|
|
6
|
-
.table-#{$state} {
|
|
7
|
-
&,
|
|
8
|
-
> th,
|
|
9
|
-
> td {
|
|
10
|
-
background-color: $background;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@if $border != null {
|
|
14
|
-
th,
|
|
15
|
-
td,
|
|
16
|
-
thead th,
|
|
17
|
-
tbody + tbody {
|
|
18
|
-
border-color: $border;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Hover states for `.table-hover`
|
|
24
|
-
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
|
25
|
-
.table-hover {
|
|
26
|
-
$hover-background: darken($background, 5%);
|
|
27
|
-
|
|
28
|
-
.table-#{$state} {
|
|
29
|
-
@include hover {
|
|
30
|
-
background-color: $hover-background;
|
|
31
|
-
|
|
32
|
-
> td,
|
|
33
|
-
> th {
|
|
34
|
-
background-color: $hover-background;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
1
|
+
// Tables
|
|
2
|
+
|
|
3
|
+
@mixin table-row-variant($state, $background, $border: null) {
|
|
4
|
+
// Exact selectors below required to override `.table-striped` and prevent
|
|
5
|
+
// inheritance to nested tables.
|
|
6
|
+
.table-#{$state} {
|
|
7
|
+
&,
|
|
8
|
+
> th,
|
|
9
|
+
> td {
|
|
10
|
+
background-color: $background;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@if $border != null {
|
|
14
|
+
th,
|
|
15
|
+
td,
|
|
16
|
+
thead th,
|
|
17
|
+
tbody + tbody {
|
|
18
|
+
border-color: $border;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Hover states for `.table-hover`
|
|
24
|
+
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
|
25
|
+
.table-hover {
|
|
26
|
+
$hover-background: darken($background, 5%);
|
|
27
|
+
|
|
28
|
+
.table-#{$state} {
|
|
29
|
+
@include hover {
|
|
30
|
+
background-color: $hover-background;
|
|
31
|
+
|
|
32
|
+
> td,
|
|
33
|
+
> th {
|
|
34
|
+
background-color: $hover-background;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
// stylelint-disable declaration-no-important
|
|
2
|
-
|
|
3
|
-
// Typography
|
|
4
|
-
|
|
5
|
-
@mixin text-emphasis-variant($parent, $color) {
|
|
6
|
-
#{$parent} {
|
|
7
|
-
color: $color !important;
|
|
8
|
-
}
|
|
9
|
-
a#{$parent} {
|
|
10
|
-
@include hover-focus {
|
|
11
|
-
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
1
|
+
// stylelint-disable declaration-no-important
|
|
2
|
+
|
|
3
|
+
// Typography
|
|
4
|
+
|
|
5
|
+
@mixin text-emphasis-variant($parent, $color) {
|
|
6
|
+
#{$parent} {
|
|
7
|
+
color: $color !important;
|
|
8
|
+
}
|
|
9
|
+
a#{$parent} {
|
|
10
|
+
@include hover-focus {
|
|
11
|
+
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
// CSS image replacement
|
|
2
|
-
@mixin text-hide($ignore-warning: false) {
|
|
3
|
-
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
|
|
4
|
-
font: 0/0 a;
|
|
5
|
-
color: transparent;
|
|
6
|
-
text-shadow: none;
|
|
7
|
-
background-color: transparent;
|
|
8
|
-
border: 0;
|
|
9
|
-
|
|
10
|
-
@if ($ignore-warning != true) {
|
|
11
|
-
@warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
|
|
12
|
-
}
|
|
13
|
-
}
|
|
1
|
+
// CSS image replacement
|
|
2
|
+
@mixin text-hide($ignore-warning: false) {
|
|
3
|
+
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
|
|
4
|
+
font: 0/0 a;
|
|
5
|
+
color: transparent;
|
|
6
|
+
text-shadow: none;
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
border: 0;
|
|
9
|
+
|
|
10
|
+
@if ($ignore-warning != true) {
|
|
11
|
+
@warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
// Text truncate
|
|
2
|
-
// Requires inline-block or block for proper styling
|
|
3
|
-
|
|
4
|
-
@mixin text-truncate() {
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
text-overflow: ellipsis;
|
|
7
|
-
white-space: nowrap;
|
|
8
|
-
}
|
|
1
|
+
// Text truncate
|
|
2
|
+
// Requires inline-block or block for proper styling
|
|
3
|
+
|
|
4
|
+
@mixin text-truncate() {
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
text-overflow: ellipsis;
|
|
7
|
+
white-space: nowrap;
|
|
8
|
+
}
|