@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_panels.scss

@@ -1,5 +1,6 @@
 $panel-bg: $white !default;
 $panel-border-color: transparent !default;
+$panel-border-radius: $border-radius !default;
 $panel-border-style: solid !default;
 
 $panel-border-bottom-width: 1px !default;
@@ -8,23 +9,24 @@ $panel-border-right-width: 1px !default;
 $panel-border-top-width: 1px !default;
 $panel-border-width: $panel-border-top-width $panel-border-right-width
 	$panel-border-bottom-width $panel-border-left-width !default;
-
-$panel-border-radius: $border-radius !default;
 $panel-box-shadow: null !default;
 $panel-margin-bottom: $spacer !default;
 
 // Panel Header
 
 $panel-header-border-bottom-width: 1px !default;
+
 $panel-header-offset-border-radius: calc(
 	#{$panel-border-radius} - #{$panel-border-top-width}
 ) !default;
+
 $panel-header-font-size: $font-size-base !default;
 $panel-header-line-height: $headings-line-height !default;
 $panel-header-padding-x: 1.25rem !default;
 $panel-header-padding-y: 0.75rem !default;
 
 $panel-header-collapse-icon-font-size: 0.875rem !default; // 14px
+
 $panel-header-collapse-icon-bottom: null !default;
 $panel-header-collapse-icon-left: null !default;
 $panel-header-collapse-icon-right: null !default;
@@ -39,6 +41,7 @@ $panel-header-collapse-icon-padding-left: null !default;
 $panel-header-collapse-icon-padding-right: null !default;
 
 $panel-header-link-text-decoration: null !default;
+
 $panel-header-link-hover-text-decoration: null !default;
 
 $panel-header-link: () !default;
@@ -49,10 +52,12 @@ $panel-header-link: map-deep-merge(
 		text-decoration: $panel-header-link-text-decoration,
 		transition: #{border-color 0.1s ease,
 		border-radius 0.5s ease},
+
 		hover: (
 			color: inherit,
 			text-decoration: $panel-header-link-hover-text-decoration,
 		),
+
 		focus: (
 			z-index: $zindex-panel-header-link-focus,
 		),
@@ -105,11 +110,13 @@ $panel: map-deep-merge(
 		box-shadow: clay-enable-shadows($panel-box-shadow),
 		margin-bottom: $panel-margin-bottom,
 		word-wrap: break-word,
+
 		collapse-icon-middle: (
 			collapse-icon: (
 				font-size: inherit,
 			),
 		),
+
 		panel-header: (
 			border-bottom: $panel-header-border-bottom-width solid transparent,
 			border-top-left-radius:
@@ -122,6 +129,7 @@ $panel: map-deep-merge(
 			padding: $panel-header-padding-y $panel-header-padding-x,
 			position: relative,
 			width: 100%,
+
 			collapsed: (
 				border-bottom-left-radius:
 					clay-enable-rounded($panel-header-offset-border-radius),
@@ -129,15 +137,19 @@ $panel: map-deep-merge(
 					clay-enable-rounded($panel-header-offset-border-radius),
 				link: $panel-header-collapsed-link,
 			),
+
 			collapse-icon: (
 				padding-left: $panel-header-collapse-icon-padding-left,
 				padding-right: $panel-header-collapse-icon-padding-right,
 			),
+
 			link: $panel-header-link,
 		),
+
 		panel-body: (
 			padding: $panel-body-padding-y $panel-body-padding-x,
 		),
+
 		panel-footer: (
 			border-bottom-left-radius:
 				clay-enable-rounded($panel-footer-offset-border-radius),
@@ -146,10 +158,12 @@ $panel: map-deep-merge(
 			border-top: $panel-footer-border-top-width solid transparent,
 			padding: $panel-footer-padding-y $panel-footer-padding-x,
 		),
+
 		panel-title: (
 			font-size: $panel-title-font-size,
 			font-weight: $panel-title-font-weight,
 			text-transform: $panel-title-text-transform,
+
 			small: (
 				font-size: $panel-title-small-font-size,
 				margin-left: $panel-title-small-margin-left,
@@ -161,8 +175,8 @@ $panel: map-deep-merge(
 
 // Panel Group
 
-$panel-group-panel-margin-bottom: math-sign(
-	$panel-border-bottom-width
+$panel-group-panel-margin-bottom: calc(
+	#{$panel-border-bottom-width} * -1
 ) !default;
 
 $panel-group-panel-unstyled: () !default;
@@ -179,13 +193,16 @@ $panel-group-sm: () !default;
 $panel-group-sm: map-deep-merge(
 	(
 		font-size: 0.875rem,
+
 		panel-header: (
 			padding-bottom: 0.5rem,
 			padding-top: 0.5rem,
 		),
+
 		panel-title: (
 			font-size: 0.875rem,
 		),
+
 		collapse-icon: (
 			top: 0.6875rem,
 		),
@@ -204,10 +221,11 @@ $panel-group-sm-panel-unstyled: map-deep-merge(
 // Panel Group Flush
 
 $panel-group-flush-body-margin-bottom: 1.5rem !default;
-$panel-group-flush-body-padding: 0 !default;
+$panel-group-flush-body-padding: 0rem !default;
 
 $panel-group-flush-collapse-icon-left: null !default;
-$panel-group-flush-collapse-icon-right: 0 !default;
+$panel-group-flush-collapse-icon-right: 0rem !default;
+
 $panel-group-flush-collapse-icon-padding-left: null !default;
 $panel-group-flush-collapse-icon-padding-right: 1.5rem !default;
 
@@ -215,8 +233,9 @@ $panel-group-flush-panel-unstyled: () !default;
 $panel-group-flush-panel-unstyled: map-deep-merge(
 	(
 		margin-bottom: 1.5rem,
+
 		panel-body: (
-			margin-bottom: 0,
+			margin-bottom: 0rem,
 		),
 	),
 	$panel-group-flush-panel-unstyled
@@ -235,6 +254,7 @@ $panel-secondary: map-deep-merge(
 			border-color: rgba($black, 0.125),
 			link: $panel-secondary-header-link,
 		),
+
 		panel-footer: (
 			background-color: $gray-100,
 			border-color: rgba($black, 0.125),
@@ -254,25 +274,31 @@ $panel-unstyled: map-deep-merge(
 		border-radius: 0px,
 		border-width: 0px,
 		margin-bottom: 1.5rem,
+
 		panel-header: (
 			border-color: $gray-500,
 			border-radius: 0px,
 			border-style: solid,
-			border-width: 0 0 1px 0,
-			padding-left: 0,
+			border-width: 0px 0px 1px 0px,
+			padding-left: 0rem,
+
 			collapsed: (
 				border-color: $gray-500,
 			),
+
 			link: $panel-unstyled-header-link,
 		),
+
 		collapse-icon: (
-			right: 0,
+			right: 0rem,
 		),
+
 		panel-body: (
-			padding: 1rem 0 0.1px 0,
+			padding: 1rem 0rem 0.1px 0rem,
 		),
+
 		panel-footer: (
-			padding: 1rem 0 0.1px 0,
+			padding: 1rem 0rem 0.1px 0rem,
 		),
 	),
 	$panel-unstyled
@@ -283,66 +309,81 @@ $panel-palette: map-deep-merge(
 	(
 		panel-block: (
 			border-color: $gray-400,
+
 			collapse-icon: (
 				font-size: inherit,
 				top: 1.3125rem,
 			),
+
 			panel-header: (
 				font-size: 1.25rem,
 				line-height: 1.25,
 				padding: 1.15625rem 1.25rem,
+
 				'&.collapse-icon': (
 					padding-right: 3rem,
 				),
 			),
+
 			panel-title: (
 				font-size: inherit,
 				text-transform: none,
 			),
+
 			panel-body: (
-				padding: 0 1.25rem 1.25rem,
+				padding: 0rem 1.25rem 1.25rem,
 			),
+
 			panel-footer: (
-				padding: 0 1.25rem 1.25rem,
+				padding: 0rem 1.25rem 1.25rem,
 			),
 		),
+
 		panel-default: (
 			border-width: 0px,
+
 			panel-header: (
 				border-radius: clay-enable-rounded(0),
 				color: $gray-600,
 				font-size: 0.875rem,
 				line-height: 1.125rem,
 				padding-bottom: 0.40625rem,
-				padding-left: 0,
-				padding-right: 0,
+				padding-left: 0rem,
+				padding-right: 0rem,
 				padding-top: 0.40625rem,
 				text-transform: uppercase,
+
 				'&.collapse-icon': (
 					padding-right: 1.75rem,
 				),
+
 				link: (
 					border-bottom: 1px solid $gray-400,
 				),
 			),
+
 			collapse-icon: (
 				font-size: inherit,
-				right: 0,
+				right: 0rem,
 				top: 0.5rem,
 			),
+
 			collapse-icon-middle: (
 				collapse-icon: (
-					right: 0,
+					right: 0rem,
 				),
 			),
+
 			panel-body: (
-				padding: 1.25rem 0,
+				padding: 1.25rem 0rem,
 			),
+
 			panel-title: (
 				font-size: inherit,
 			),
+
 			panel-footer: (
-				padding: 1.25rem 0,
+				padding: 1.25rem 0rem,
 			),
 		),
 	),
@@ -358,47 +399,59 @@ $panel-sizes: map-deep-merge(
 			collapse-icon: (
 				top: 1.75rem,
 			),
+
 			panel-header: (
 				font-size: 1.5rem,
 				padding: 1.5rem 1.5rem,
+
 				'&.collapse-icon': (
 					padding-right: calc(1.5rem * 3),
 				),
 			),
+
 			panel-body: (
-				padding: 0 1.5rem 1.5rem,
+				padding: 0rem 1.5rem 1.5rem,
 			),
+
 			panel-footer: (
-				padding: 0 1.5rem 1.5rem,
+				padding: 0rem 1.5rem 1.5rem,
 			),
 		),
+
 		'.panel-sm.panel-block': (
 			collapse-icon: (
 				top: 0.9375rem,
 			),
+
 			panel-header: (
 				font-size: 1rem,
 				padding: 0.8125rem 1rem,
+
 				'&.collapse-icon': (
 					padding-right: calc(1rem * 3),
 				),
 			),
+
 			panel-body: (
-				padding: 0 1rem 1rem,
+				padding: 0rem 1rem 1rem,
 			),
+
 			panel-footer: (
-				padding: 0 1rem 1rem,
+				padding: 0rem 1rem 1rem,
 			),
 		),
+
 		'.panel-sm.panel-default': (
 			collapse-icon: (
 				top: 0.375rem,
 			),
+
 			panel-header: (
 				font-size: 0.75rem,
 				line-height: 1,
 				padding-bottom: 0.34375rem,
 				padding-top: 0.34375rem,
+
 				'&.collapse-icon': (
 					padding-right: 1.75rem,
 				),

package/src/scss/variables/_popovers.scss

@@ -1,8 +1,8 @@
 $popover-bg: $white !default;
 $popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
 $popover-border-width: $border-width !default;
 
-$popover-border-radius: $border-radius-lg !default;
 $popover-inner-border-radius: calc(
 	#{$popover-border-radius} - #{$popover-border-width}
 ) !default;
@@ -19,7 +19,7 @@ $popover-header-color: $headings-color !default;
 $popover-header-font-size: $font-size-base !default;
 $popover-header-font-weight: $font-weight-semi-bold !default;
 $popover-header-margin-x: null !default;
-$popover-header-margin-y: 0 !default;
+$popover-header-margin-y: 0rem !default;
 $popover-header-padding-x: 0.75rem !default;
 $popover-header-padding-y: 0.5rem !default;
 
@@ -64,7 +64,7 @@ $popover: map-deep-merge(
 		font-size: $popover-font-size,
 		font-style: normal,
 		font-weight: $font-weight-normal,
-		left: 0,
+		left: 0rem,
 		letter-spacing: normal,
 		line-break: auto,
 		line-height: $line-height-base,
@@ -74,22 +74,25 @@ $popover: map-deep-merge(
 		text-decoration: none,
 		text-shadow: none,
 		text-transform: none,
-		top: 0,
+		top: 0rem,
 		white-space: normal,
 		word-break: normal,
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $zindex-popover,
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		arrow: (
 			display: block,
 			height: $popover-arrow-height,
-			margin: 0 $popover-border-radius,
+			margin: 0rem $popover-border-radius,
 			position: absolute,
 			width: $popover-arrow-width,
+
 			before: (
 				border-color: transparent,
 				border-style: solid,
@@ -97,6 +100,7 @@ $popover: map-deep-merge(
 				display: block,
 				position: absolute,
 			),
+
 			after: (
 				border-color: transparent,
 				border-style: solid,
@@ -105,6 +109,7 @@ $popover: map-deep-merge(
 				position: absolute,
 			),
 		),
+
 		inline-scroller: (
 			max-height: $popover-inline-scroller-max-height,
 		),
@@ -118,6 +123,7 @@ $popovers: () !default;
 $popovers: map-deep-merge(
 	(
 		popover: $popover,
+
 		// @deprecated as of v3.141.0 popover-secondary
 		popover-secondary:
 			(
@@ -125,8 +131,9 @@ $popovers: map-deep-merge(
 				popover-header: (
 					background-color: transparent,
 					border-color: transparent,
-					padding-bottom: 0,
+					padding-bottom: 0rem,
 				),
+
 				close: (
 					color: $gray-600,
 				),
@@ -156,6 +163,7 @@ $popover-header: map-deep-merge(
 		margin-right: $popover-header-margin-x,
 		margin-top: $popover-header-margin-y,
 		padding: $popover-header-padding-y $popover-header-padding-x,
+
 		empty: (
 			display: none,
 		),
@@ -216,28 +224,25 @@ $clay-popover-top: () !default;
 $clay-popover-top: map-deep-merge(
 	(
 		margin-bottom: $popover-arrow-height,
+
 		arrow: (
 			left: 50%,
-			margin-left: math-sign($popover-arrow-width * 0.5),
+			margin-left: calc(#{$popover-arrow-width} * -0.5),
 			bottom:
 				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
-			margin: 0,
+			margin: 0rem,
+
 			before: (
 				border-top-color: $popover-arrow-outer-color,
 				border-width: $popover-arrow-height
-					(
-						$popover-arrow-width * 0.5,
-					)
-					0,
-				bottom: 0,
+					calc(#{$popover-arrow-width} * 0.5) 0rem,
+				bottom: 0rem,
 			),
+
 			after: (
 				border-top-color: $popover-top-arrow-color,
 				border-width: $popover-arrow-height
-					(
-						$popover-arrow-width * 0.5,
-					)
-					0,
+					calc(#{$popover-arrow-width} * 0.5) 0rem,
 				bottom: $popover-border-width,
 			),
 		),
@@ -252,7 +257,8 @@ $clay-popover-top-left: map-deep-merge(
 	(
 		arrow: (
 			left: $popover-arrow-offset,
-			margin: 0,
+			margin: 0rem,
+
 			after: (
 				border-top-color: $popover-top-left-arrow-color,
 			),
@@ -269,7 +275,8 @@ $clay-popover-top-right: map-deep-merge(
 		arrow: (
 			left: auto,
 			right: $popover-arrow-offset,
-			margin: 0,
+			margin: 0rem,
+
 			after: (
 				border-top-color: $popover-top-right-arrow-color,
 			),
@@ -284,35 +291,28 @@ $clay-popover-right: () !default;
 $clay-popover-right: map-deep-merge(
 	(
 		margin-left: $popover-arrow-height,
+
 		arrow: (
 			height: $popover-arrow-width,
 			left:
 				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
-			margin: math-sign($popover-arrow-height * 0.5) 0 0,
+			margin: calc(#{$popover-arrow-height} * -0.5) 0rem 0rem,
 			top: 50%,
 			width: $popover-arrow-height,
+
 			before: (
 				border-right-color: $popover-arrow-outer-color,
-				border-width: (
-					$popover-arrow-width * 0.5,
-				)
-				$popover-arrow-height
-				(
-					$popover-arrow-width * 0.5,
-				)
-				0,
-				left: 0,
+				border-width: calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5)
+					0rem,
+				left: 0rem,
 			),
+
 			after: (
 				border-right-color: $popover-right-arrow-color,
-				border-width: (
-					$popover-arrow-width * 0.5,
-				)
-				$popover-arrow-height
-				(
-					$popover-arrow-width * 0.5,
-				)
-				0,
+				border-width: calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5)
+					0rem,
 				left: $popover-border-width,
 			),
 		),
@@ -327,8 +327,9 @@ $clay-popover-right-bottom: map-deep-merge(
 	(
 		arrow: (
 			bottom: $popover-arrow-offset,
-			margin: 0,
+			margin: 0rem,
 			top: auto,
+
 			after: (
 				border-right-color: $popover-right-bottom-arrow-color,
 			),
@@ -343,8 +344,9 @@ $clay-popover-right-top: () !default;
 $clay-popover-right-top: map-deep-merge(
 	(
 		arrow: (
-			margin: 0,
+			margin: 0rem,
 			top: $popover-arrow-offset,
+
 			after: (
 				border-right-color: $popover-right-top-arrow-color,
 			),
@@ -359,33 +361,23 @@ $clay-popover-bottom: () !default;
 $clay-popover-bottom: map-deep-merge(
 	(
 		margin-top: $popover-arrow-height,
+
 		arrow: (
 			left: 50%,
-			margin: 0 0 0 math-sign($popover-arrow-width * 0.5),
+			margin: 0rem 0rem 0rem calc(#{$popover-arrow-width} * -0.5),
 			top:
 				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
 			before: (
 				border-bottom-color: $popover-arrow-outer-color,
-				border-width: 0
-					(
-						$popover-arrow-width * 0.5,
-					)
-					$popover-arrow-height
-					(
-						$popover-arrow-width * 0.5,
-					),
-				top: 0,
+				border-width: 0rem calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5),
+				top: 0rem,
 			),
+
 			after: (
 				border-bottom-color: $popover-bottom-arrow-color,
-				border-width: 0
-					(
-						$popover-arrow-width * 0.5,
-					)
-					$popover-arrow-height
-					(
-						$popover-arrow-width * 0.5,
-					),
+				border-width: 0rem calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5),
 				top: $popover-border-width,
 			),
 		),
@@ -400,7 +392,8 @@ $clay-popover-bottom-left: map-deep-merge(
 	(
 		arrow: (
 			left: $popover-arrow-offset,
-			margin: 0,
+			margin: 0rem,
+
 			after: (
 				border-bottom-color: $popover-bottom-left-arrow-color,
 			),
@@ -417,6 +410,7 @@ $clay-popover-bottom-right: map-deep-merge(
 		arrow: (
 			left: auto,
 			right: $popover-arrow-offset,
+
 			after: (
 				border-bottom-color: $popover-bottom-right-arrow-color,
 			),
@@ -431,35 +425,26 @@ $clay-popover-left: () !default;
 $clay-popover-left: map-deep-merge(
 	(
 		margin-right: $popover-arrow-height,
+
 		arrow: (
 			height: $popover-arrow-width,
-			margin: math-sign($popover-arrow-height * 0.5) 0 0,
+			margin: calc(#{$popover-arrow-height} * -0.5) 0rem 0rem,
 			right:
 				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
 			top: 50%,
 			width: $popover-arrow-height,
+
 			before: (
 				border-left-color: $popover-arrow-outer-color,
-				border-width: (
-					$popover-arrow-width * 0.5,
-				)
-				0
-				(
-					$popover-arrow-width * 0.5,
-				)
-				$popover-arrow-height,
-				right: 0,
+				border-width: calc(#{$popover-arrow-width} * 0.5) 0rem
+					calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height,
+				right: 0rem,
 			),
+
 			after: (
 				border-left-color: $popover-left-arrow-color,
-				border-width: (
-					$popover-arrow-width * 0.5,
-				)
-				0
-				(
-					$popover-arrow-width * 0.5,
-				)
-				$popover-arrow-height,
+				border-width: calc(#{$popover-arrow-width} * 0.5) 0rem
+					calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height,
 				right: $popover-border-width,
 			),
 		),
@@ -474,8 +459,9 @@ $clay-popover-left-bottom: map-deep-merge(
 	(
 		arrow: (
 			bottom: $popover-arrow-offset,
-			margin: 0,
+			margin: 0rem,
 			top: auto,
+
 			after: (
 				border-left-color: $popover-left-bottom-arrow-color,
 			),
@@ -490,8 +476,9 @@ $clay-popover-left-top: () !default;
 $clay-popover-left-top: map-deep-merge(
 	(
 		arrow: (
-			margin: 0,
+			margin: 0rem,
 			top: $popover-arrow-offset,
+
 			after: (
 				border-left-color: $popover-left-top-arrow-color,
 			),