@clayui/css 3.154.0 → 3.157.0-alpha.0

package/src/scss/atlas/variables/_buttons.scss

@@ -26,15 +26,19 @@ $btn: map-deep-merge(
 		focus: (
 			box-shadow: $btn-focus-box-shadow,
 		),
+
 		active: (
 			box-shadow: $btn-active-box-shadow,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			opacity: $btn-disabled-opacity,
 		),
+
 		inline-item: (
 			font-size: $btn-inline-item-font-size,
 		),
@@ -61,6 +65,7 @@ $btn-lg: map-deep-merge(
 		padding-left: $btn-padding-x-lg,
 		padding-right: $btn-padding-x-lg,
 		padding-top: $btn-padding-y-lg,
+
 		inline-item: (
 			font-size: $btn-inline-item-font-size-lg,
 		),
@@ -84,6 +89,7 @@ $btn-sm: map-deep-merge(
 		padding-left: $btn-padding-x-sm,
 		padding-right: $btn-padding-x-sm,
 		padding-top: $btn-padding-y-sm,
+
 		lexicon-icon: (
 			font-size: 1rem,
 		),
@@ -127,23 +133,28 @@ $btn-primary: () !default;
 $btn-primary: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $primary-d1,
 			background-image: clay-enable-gradients($primary-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $primary-d1,
 			background-image: clay-enable-gradients($primary-d1),
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $primary-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $primary,
 		),
@@ -159,12 +170,14 @@ $btn-secondary: map-deep-merge(
 		border-color: $secondary-l0,
 		box-shadow: c-unset,
 		color: $secondary,
+
 		hover: (
 			background-color: $gray-100,
 			background-image: clay-enable-gradients($gray-100),
 			border-color: $secondary-l0,
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: $gray-100,
 			background-image: clay-enable-gradients($gray-100),
@@ -172,14 +185,17 @@ $btn-secondary: map-deep-merge(
 			box-shadow: c-unset,
 			color: $gray-900,
 		),
+
 		active: (
 			background-color: $gray-200,
 			border-color: $secondary-l0,
 			color: $gray-900,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $white,
 			background-image: clay-enable-gradients($white),
@@ -194,24 +210,29 @@ $btn-success: () !default;
 $btn-success: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $success-d1,
 			background-image: clay-enable-gradients($success-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $success-d1,
 			background-image: clay-enable-gradients($success-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $success-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $success,
 		),
@@ -223,24 +244,29 @@ $btn-info: () !default;
 $btn-info: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $info-d1,
 			background-image: clay-enable-gradients($info-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $info-d1,
 			background-image: clay-enable-gradients($info-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $info-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $info,
 		),
@@ -252,24 +278,29 @@ $btn-warning: () !default;
 $btn-warning: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $warning-d1,
 			background-image: clay-enable-gradients($warning-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $warning-d1,
 			background-image: clay-enable-gradients($warning-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $warning-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $warning,
 		),
@@ -281,24 +312,29 @@ $btn-danger: () !default;
 $btn-danger: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $danger-d1,
 			background-image: clay-enable-gradients($danger-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $danger-d1,
 			background-image: clay-enable-gradients($danger-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $danger-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $danger,
 		),
@@ -311,24 +347,29 @@ $btn-light: map-deep-merge(
 	(
 		box-shadow: c-unset,
 		color: $gray-900,
+
 		hover: (
 			background-color: $light-d1,
 			background-image: clay-enable-gradients($light-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $light-d1,
 			background-image: clay-enable-gradients($light-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $light-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $light,
 		),
@@ -340,24 +381,29 @@ $btn-dark: () !default;
 $btn-dark: map-deep-merge(
 	(
 		box-shadow: c-unset,
+
 		hover: (
 			background-color: $dark-d1,
 			background-image: clay-enable-gradients($dark-d1),
 			border-color: transparent,
 		),
+
 		focus: (
 			background-color: $dark-d1,
 			background-image: clay-enable-gradients($dark-d1),
 			border-color: transparent,
 			box-shadow: c-unset,
 		),
+
 		active: (
 			background-color: $dark-d2,
 			border-color: transparent,
+
 			focus: (
 				box-shadow: c-unset,
 			),
 		),
+
 		disabled: (
 			background-color: $dark,
 		),
@@ -371,24 +417,26 @@ $btn-outline-primary: () !default;
 $btn-outline-primary: map-deep-merge(
 	(
 		hover: (
-			background-color: $primary-l3,
-			color: $primary,
+			background-color: rgba($primary, 0.06),
+			color: $primary-d1,
 		),
+
 		focus: (
-			background-color: $primary-l3,
+			background-color: rgba($primary, 0.06),
 			box-shadow: map-deep-get($btn-primary, focus, box-shadow),
-			color: $primary,
+			color: $primary-d1,
 		),
+
 		active: (
-			background-color:
-				clay-lighten(clay-desaturate($primary, 42.05), 41.76),
-			color: $primary,
+			background-color: rgba($primary, 0.12),
+			color: $primary-d1,
 			box-shadow: map-deep-get($btn-primary, active, box-shadow),
 			focus: (
 				box-shadow:
 					map-deep-get($btn-primary, active, focus, box-shadow),
 			),
 		),
+
 		disabled: (
 			background-color: transparent,
 			border-color: map-get($btn-primary, background-color),
@@ -403,24 +451,28 @@ $btn-outline-secondary: map-deep-merge(
 	(
 		background-color: c-unset,
 		border-color: $secondary-l2,
+
 		hover: (
-			background-color: rgba($gray-900, 0.03),
+			background-color: rgba($gray-900, 0.06),
 			border-color: transparent,
 			color: map-deep-get($btn-secondary, hover, color),
 		),
+
 		focus: (
-			background-color: rgba($gray-900, 0.03),
+			background-color: rgba($gray-900, 0.06),
 			border-color: transparent,
 			box-shadow: map-deep-get($btn-secondary, focus, box-shadow),
 			color: map-deep-get($btn-secondary, focus, color),
 		),
+
 		disabled: (
 			background-color: transparent,
 			border-color: $secondary,
 			color: $secondary,
 		),
+
 		active: (
-			background-color: rgba($gray-900, 0.06),
+			background-color: rgba($gray-900, 0.12),
 			border-color: transparent,
 			box-shadow: map-deep-get($btn-secondary, active, box-shadow),
 			color: map-deep-get($btn-secondary, active, color),
@@ -439,11 +491,13 @@ $btn-outline-info: map-deep-merge(
 		hover: (
 			background-color: map-deep-get($btn-info, hover, background-color),
 		),
+
 		focus: (
 			background-color: map-deep-get($btn-info, hover, background-color),
 			box-shadow: map-deep-get($btn-info, focus, box-shadow),
 			color: $white,
 		),
+
 		active: (
 			background-color: map-deep-get($btn-info, active, background-color),
 			box-shadow: map-deep-get($btn-info, active, box-shadow),
@@ -462,12 +516,14 @@ $btn-outline-success: map-deep-merge(
 			background-color:
 				map-deep-get($btn-success, hover, background-color),
 		),
+
 		focus: (
 			background-color:
 				map-deep-get($btn-success, hover, background-color),
 			box-shadow: map-deep-get($btn-success, focus, box-shadow),
 			color: $white,
 		),
+
 		active: (
 			background-color:
 				map-deep-get($btn-success, active, background-color),
@@ -488,12 +544,14 @@ $btn-outline-warning: map-deep-merge(
 			background-color:
 				map-deep-get($btn-warning, hover, background-color),
 		),
+
 		focus: (
 			background-color:
 				map-deep-get($btn-warning, hover, background-color),
 			box-shadow: map-deep-get($btn-warning, focus, box-shadow),
 			color: $white,
 		),
+
 		active: (
 			background-color:
 				map-deep-get($btn-warning, active, background-color),
@@ -513,11 +571,13 @@ $btn-outline-danger: map-deep-merge(
 		hover: (
 			background-color: map-deep-get($btn-danger, hover, background-color),
 		),
+
 		focus: (
 			background-color: map-deep-get($btn-danger, hover, background-color),
 			box-shadow: map-deep-get($btn-danger, focus, box-shadow),
 			color: $white,
 		),
+
 		active: (
 			background-color:
 				map-deep-get($btn-danger, active, background-color),
@@ -536,11 +596,13 @@ $btn-outline-light: map-deep-merge(
 		hover: (
 			background-color: map-deep-get($btn-light, hover, background-color),
 		),
+
 		focus: (
 			background-color: map-deep-get($btn-light, hover, background-color),
 			box-shadow: map-deep-get($btn-light, focus, box-shadow),
 			color: $gray-900,
 		),
+
 		active: (
 			background-color: map-deep-get($btn-light, active, background-color),
 			box-shadow: map-deep-get($btn-light, active, box-shadow),
@@ -558,11 +620,13 @@ $btn-outline-dark: map-deep-merge(
 		hover: (
 			background-color: map-deep-get($btn-dark, hover, background-color),
 		),
+
 		focus: (
 			background-color: map-deep-get($btn-dark, hover, background-color),
 			box-shadow: map-deep-get($btn-dark, focus, box-shadow),
 			color: $white,
 		),
+
 		active: (
 			background-color: map-deep-get($btn-dark, active, background-color),
 			box-shadow: map-deep-get($btn-dark, active, box-shadow),

package/src/scss/atlas/variables/_globals.scss

@@ -383,12 +383,17 @@ $embed-responsive-aspect-ratios: join(
 	$embed-responsive-aspect-ratios
 );
 
-$component-transition: color 0.15s ease-in-out,
-	background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+$component-transition:
+	color 0.15s ease-in-out,
+	background-color 0.15s ease-in-out,
+	border-color 0.15s ease-in-out,
 	box-shadow 0.15s ease-in-out !default;
 
-$component-focus-box-shadow: #{0 0 0 0.125rem $white, 0 0 0 0.25rem $primary-l0} !default;
-$component-focus-inset-box-shadow: #{inset 0 0 0 0.125rem $primary-l0,
+$component-focus-box-shadow:
+	#{0 0 0 0.125rem $white,
+	0 0 0 0.25rem $primary-l0} !default;
+$component-focus-inset-box-shadow:
+	#{inset 0 0 0 0.125rem $primary-l0,
 	inset 0 0 0 0.25rem $white} !default;
 
 $component-active-color: #fff !default;
@@ -456,9 +461,21 @@ $webkit-font-smoothing: antialiased !default;
 
 $font-import-url: null !default;
 
-$font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont,
-	'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial,
-	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$font-family-sans-serif:
+	system-ui,
+	-apple-system,
+	BlinkMacSystemFont,
+	'Segoe UI',
+	Roboto,
+	Oxygen-Sans,
+	Ubuntu,
+	Cantarell,
+	'Helvetica Neue',
+	Arial,
+	sans-serif,
+	'Apple Color Emoji',
+	'Segoe UI Emoji',
+	'Segoe UI Symbol' !default;
 $font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 	'Liberation Mono', 'Courier New', monospace !default;

package/src/scss/atlas/variables/_pagination.scss

@@ -17,7 +17,8 @@ $pagination-link-border-radius: 4px !default;
 
 // @deprecated as of v2 use the Sass map `$pagination-link` instead
 
-$pagination-link-transition: background-color 0.15s ease-in-out,
+$pagination-link-transition:
+	background-color 0.15s ease-in-out,
 	border-color 0.15s ease-in-out !default;
 
 $pagination-link-first-border-radius: $pagination-link-border-radius !default;

package/src/scss/cadmin/components/_forms.scss

@@ -173,8 +173,8 @@ fieldset[disabled] {
 
 	&.form-control-sm,
 	&.form-control-lg {
-		padding-right: 0;
 		padding-left: 0;
+		padding-right: 0;
 	}
 }
 

package/src/scss/cadmin/components/_list-group.scss

@@ -213,8 +213,8 @@
 		.list-group-title:only-child {
 			align-items: center;
 			display: flex;
-			min-height: 32px;
 			margin-top: 0;
+			min-height: 32px;
 
 			// IE11 flexbox min-height workaround
 

package/src/scss/cadmin/components/_multi-step-nav.scss

@@ -253,8 +253,8 @@
 	display: flex;
 	font-size: $cadmin-multi-step-icon-font-size;
 	font-weight: $cadmin-multi-step-icon-font-weight;
-	justify-content: center;
 	height: $cadmin-multi-step-icon-size;
+	justify-content: center;
 	padding-bottom: $cadmin-multi-step-icon-padding-bottom;
 	padding-left: $cadmin-multi-step-icon-padding-left;
 	padding-right: $cadmin-multi-step-icon-padding-right;

package/src/scss/cadmin/components/_navbar.scss

@@ -64,8 +64,8 @@
 	.nav-item .dropdown {
 		align-items: center;
 		display: flex;
-		word-wrap: normal;
 		max-width: 100%;
+		word-wrap: normal;
 	}
 
 	.nav-item {
@@ -141,8 +141,8 @@
 // Navbar Toggler
 
 .navbar-toggler-icon {
-	background-size: 100% 100%;
 	background: no-repeat center center;
+	background-size: 100% 100%;
 	content: '';
 	display: inline-block;
 	height: 1.5em;
@@ -176,17 +176,17 @@
 
 .navbar-toggler-link {
 	align-items: center;
-	display: flex;
 	border-width: 0;
+	display: flex;
 	line-height: $cadmin-line-height-base;
 	max-width: 100%;
 	padding: $cadmin-navbar-brand-padding-y $cadmin-navbar-nav-link-padding-x;
 	position: relative;
 
 	.lexicon-icon {
-		min-width: 1em;
 		margin-left: 3px;
 		margin-top: 0;
+		min-width: 1em;
 	}
 }
 

package/src/scss/cadmin/components/_print.scss

@@ -8,8 +8,8 @@
 		*,
 		*::before,
 		*::after {
-			text-shadow: none !important;
 			box-shadow: none !important;
+			text-shadow: none !important;
 		}
 
 		a {

package/src/scss/cadmin/components/_reboot.scss

@@ -377,8 +377,8 @@ html#{$cadmin-selector} {
 		summary {
 			// Add the correct display in all browsers
 
-			display: list-item;
 			cursor: pointer;
+			display: list-item;
 		}
 
 		template {