studiokit-scaffolding-js 7.0.12-next.2.9 → 7.0.13-alpha.1

package/lib/css/components/_buttons.css

@@ -1,397 +1,397 @@
-button,
-.btn {
-	text-align: center;
-	border: 0 transparent;
-	border-radius: var(--border-radius);
-	max-width: 100%;
-	margin: auto;
-
-	& span {
-		font-size: 0.9rem;
-		font-weight: var(--font-weight-bold);
-		text-transform: capitalize;
-	}
-}
-
-button.ttc .MuiButton-label {
-	text-transform: capitalize;
-}
-
-/* Targeting Bootstrap buttons only */
-.btn {
-	box-shadow: none;
-	padding: 0.5rem 0.75rem;
-
-	@media (--md) {
-		width: auto;
-	}
-
-	&.mr4 {
-		margin-right: 1.25rem !important;
-	}
-}
-
-button:focus,
-.btn:focus {
-	outline: none;
-}
-
-.stepper button,
-.stepper .btn {
-	&:focus {
-		outline: 5px auto -webkit-focus-ring-color !important;
-		outline-offset: -2px;
-	}
-}
-
-*[class*="btn-"]:not(.btn-link):not(.btn-copy-to-clipboard) {
-	padding: 0.5rem 0.75rem;
-	text-transform: capitalize;
-	font-size: 0.9rem;
-	font-weight: var(--font-weight-bold);
-}
-
-a[class*="btn-"]:active,
-a[class*="btn-"]:focus,
-a[class*="btn-"]:active:focus {
-	text-decoration: none;
-}
-
-.btn span {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-.btn .icon-lg,
-.btn .icon-md {
-	display: inline-block;
-	min-width: 1.5em;
-	padding-right: 0.5em;
-	margin-left: -0.25em;
-}
-
-/* material-ui style overrides */
-.btn-primary,
-.btn-bad,
-.btn-disabled {
-	color: var(--color-white);
-	float: none;
-	margin-bottom: 1rem;
-	overflow: visible;
-
-	& svg {
-		margin-right: 0.4rem;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-
-	/* sometimes you don’t want a bottom margin */
-	&.mb0 {
-		margin-bottom: 0;
-	}
-
-	&.mt2 {
-		margin-top: 0.5rem;
-	}
-
-	&.padding {
-		padding-right: 0.5rem;
-		padding-left: 0.5rem;
-	}
-}
-
-/* Primary */
-.btn-primary {
-	color: var(--color-white);
-	white-space: normal;
-	background-color: var(--color-primary);
-
-	&:hover {
-		background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
-	}
-
-	&:active,
-	&:focus,
-	&:active:focus,
-	&:not(:disabled):not(.disabled):active,
-	&:not(:disabled):not(.disabled):active:focus {
-		outline: 7px auto -webkit-focus-ring-color;
-		outline-offset: -2px;
-		box-shadow: none;
-		color: var(--color-white);
-		background-color: var(--color-primary);
-	}
-}
-
-/* Disabled */
-.btn-primary[disabled],
-.btn-primary.disabled,
-.btn-primary.Mui-disabled,
-.btn-primary.Mui-disabled:hover,
-.btn-primary.Mui-disabled:focus,
-.btn-disabled,
-.btn-disabled:hover {
-	background-color: var(--color-light-grey);
-
-	/* making disabled button color darker to meet accessibility standards */
-	color: rgb(0 0 0 / 60%);
-}
-
-/* Bad */
-.btn-bad {
-	background-color: var(--color-error);
-	white-space: normal;
-
-	&:hover {
-		color: var(--color-white);
-		background-color: color-mod(var(--color-error) l(+7%) s(+15%));
-	}
-
-	&:active,
-	&:focus,
-	&:active:focus {
-		background-color: var(--color-error);
-		color: var(--color-white);
-	}
-}
-
-/* Text */
-.btn-text {
-	text-transform: none;
-
-	& span {
-		text-transform: none;
-	}
-
-	& .caret {
-		margin-left: 0.5rem;
-	}
-
-	&.color-primary:hover {
-		color: var(--color-primary);
-		background-color: color-mod(var(--color-primary) a(4%));
-	}
-
-	&.color-purple:hover {
-		color: var(--color-purple);
-		background-color: color-mod(var(--color-purple) a(4%));
-	}
-
-	&.color-red:hover {
-		color: var(--color-red);
-		background-color: color-mod(var(--color-red) a(4%));
-	}
-
-	&.color-pink:hover {
-		color: var(--color-pink);
-		background-color: color-mod(var(--color-pink) a(4%));
-	}
-
-	&.color-blue:hover {
-		color: var(--color-blue);
-		background-color: color-mod(var(--color-blue) a(4%));
-	}
-
-	&.underline:hover {
-		text-decoration: underline;
-	}
-
-	&:focus {
-		outline: none !important;
-	}
-}
-
-/* Toggle */
-.btn-toggle {
-	font-size: 0.75rem;
-	padding: 10px;
-	background-color: transparent;
-	background-image: none;
-	box-shadow: none;
-
-	& > .hamburger {
-		display: inline-block;
-	}
-
-	& .icon-bar {
-		display: block;
-		width: 23px;
-		height: 4px;
-
-		& + .icon-bar {
-			margin-top: 4px;
-		}
-	}
-
-	&:hover {
-		& .icon-bar {
-			background-color: color-mod(var(--color-white));
-		}
-	}
-
-	&:active,
-	&:focus,
-	&:active:focus {
-		color: var(--color-white);
-	}
-}
-
-.btn-toggle-label {
-	display: none;
-
-	@media (--md) {
-		display: inherit;
-	}
-}
-
-.btn-flat-icon,
-.btn-flat-icon div {
-	height: 36px;
-
-	& svg {
-		margin-top: 6px;
-	}
-}
-
-/* modal close button tweak */
-button.close > span {
-	font-size: 36px;
-	font-weight: inherit;
-}
-
-.button-fat {
-	padding: 0.875em 3em;
-
-	@media (--md) {
-		padding: 0.875em 4em;
-	}
-}
-
-.button-large {
-	min-height: 30vh;
-	max-width: 20rem;
-}
-
-.dropdown-item.active,
-.dropdown-item:active {
-	color: #16181b;
-	background-color: #f8f9fa;
-}
-
-/**
- * ActionList
- */
-
-.action-list {
-	display: block;
-	min-width: 146px;
-
-	& .btn-default {
-		padding: 0.5rem 1rem;
-		font-weight: var(--font-weight-bold);
-		background-color: var(--color-light-grey);
-	}
-
-	& .dropdown-toggle {
-		padding: 0.5rem;
-		border-left: 2px solid var(--color-white);
-		margin: 0;
-		align-self: stretch;
-	}
-
-	& .action-list-menu svg {
-		height: 2rem;
-		width: 2rem;
-		vertical-align: middle;
-		margin-right: 0.5rem;
-	}
-}
-
-.action-list.fr {
-	& .btn-group-default {
-		float: right;
-	}
-}
-
-.w-100-lt-xs .action-list {
-	min-width: 86px;
-
-	& .dropdown {
-		width: 100%;
-
-		@media (--xs) {
-			width: auto;
-		}
-	}
-
-	& .btn-default:not(.dropdown-toggle) {
-		width: 90%;
-
-		@media (--xs) {
-			width: auto;
-		}
-	}
-}
-
-.action-list-text-button {
-	display: none;
-}
-
-/**
- * Material UI Buttons
- */
-
-/* Hide bootstrap focus outline on Material buttons since they use their own highlight */
-.MuiButtonBase-root:focus,
-.MuiButtonBase-root:active,
-.MuiButtonBase-root:not(:disabled):not(.disabled):active,
-.MuiButtonBase-root:not(:disabled):not(.disabled):active:focus {
-	outline: none;
-}
-
-/* Material UI icon spacing */
-.MuiButton-text .MuiButton-label .MuiSvgIcon-root {
-	margin-right: 0.4rem;
-}
-
-.MuiSwitch-switchBase .MuiTouchRipple-root {
-	color: var(--color-primary);
-}
-
-.MuiSwitch-switchBase.MuiSwitch-checked .MuiTouchRipple-root {
-	color: inherit;
-}
-
-/* making disabled button color darker to meet accessibility standards */
-.MuiButton-root.Mui-disabled {
-	color: rgb(0 0 0 / 60%);
-}
-
-/* allow disabled buttons to have popovers */
-.MuiButtonBase-root.Mui-disabled.enable-popovers {
-	cursor: auto;
-	pointer-events: all;
-
-	&.MuiButton-outlinedPrimary {
-		&:hover {
-			border: 1px solid rgb(0 0 0 / 12%);
-		}
-	}
-}
-
-.MuiToggleButton-root {
-	color: var(--color-primary);
-
-	&.Mui-selected {
-		background-color: var(--color-primary);
-		color: var(--color-white);
-
-		&:hover {
-			background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
-		}
-
-		&:focus {
-			background-color: var(--color-primary);
-		}
-	}
-}
+button,
+.btn {
+	text-align: center;
+	border: 0 transparent;
+	border-radius: var(--border-radius);
+	max-width: 100%;
+	margin: auto;
+
+	& span {
+		font-size: 0.9rem;
+		font-weight: var(--font-weight-bold);
+		text-transform: capitalize;
+	}
+}
+
+button.ttc .MuiButton-label {
+	text-transform: capitalize;
+}
+
+/* Targeting Bootstrap buttons only */
+.btn {
+	box-shadow: none;
+	padding: 0.5rem 0.75rem;
+
+	@media (--md) {
+		width: auto;
+	}
+
+	&.mr4 {
+		margin-right: 1.25rem !important;
+	}
+}
+
+button:focus,
+.btn:focus {
+	outline: none;
+}
+
+.stepper button,
+.stepper .btn {
+	&:focus {
+		outline: 5px auto -webkit-focus-ring-color !important;
+		outline-offset: -2px;
+	}
+}
+
+*[class*="btn-"]:not(.btn-link):not(.btn-copy-to-clipboard) {
+	padding: 0.5rem 0.75rem;
+	text-transform: capitalize;
+	font-size: 0.9rem;
+	font-weight: var(--font-weight-bold);
+}
+
+a[class*="btn-"]:active,
+a[class*="btn-"]:focus,
+a[class*="btn-"]:active:focus {
+	text-decoration: none;
+}
+
+.btn span {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.btn .icon-lg,
+.btn .icon-md {
+	display: inline-block;
+	min-width: 1.5em;
+	padding-right: 0.5em;
+	margin-left: -0.25em;
+}
+
+/* material-ui style overrides */
+.btn-primary,
+.btn-bad,
+.btn-disabled {
+	color: var(--color-white);
+	float: none;
+	margin-bottom: 1rem;
+	overflow: visible;
+
+	& svg {
+		margin-right: 0.4rem;
+		height: 1.25rem;
+		width: 1.25rem;
+	}
+
+	/* sometimes you don’t want a bottom margin */
+	&.mb0 {
+		margin-bottom: 0;
+	}
+
+	&.mt2 {
+		margin-top: 0.5rem;
+	}
+
+	&.padding {
+		padding-right: 0.5rem;
+		padding-left: 0.5rem;
+	}
+}
+
+/* Primary */
+.btn-primary {
+	color: var(--color-white);
+	white-space: normal;
+	background-color: var(--color-primary);
+
+	&:hover {
+		background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
+	}
+
+	&:active,
+	&:focus,
+	&:active:focus,
+	&:not(:disabled):not(.disabled):active,
+	&:not(:disabled):not(.disabled):active:focus {
+		outline: 7px auto -webkit-focus-ring-color;
+		outline-offset: -2px;
+		box-shadow: none;
+		color: var(--color-white);
+		background-color: var(--color-primary);
+	}
+}
+
+/* Disabled */
+.btn-primary[disabled],
+.btn-primary.disabled,
+.btn-primary.Mui-disabled,
+.btn-primary.Mui-disabled:hover,
+.btn-primary.Mui-disabled:focus,
+.btn-disabled,
+.btn-disabled:hover {
+	background-color: var(--color-light-grey);
+
+	/* making disabled button color darker to meet accessibility standards */
+	color: rgba(0, 0, 0, 0.6);
+}
+
+/* Bad */
+.btn-bad {
+	background-color: var(--color-error);
+	white-space: normal;
+
+	&:hover {
+		color: var(--color-white);
+		background-color: color-mod(var(--color-error) l(+7%) s(+15%));
+	}
+
+	&:active,
+	&:focus,
+	&:active:focus {
+		background-color: var(--color-error);
+		color: var(--color-white);
+	}
+}
+
+/* Text */
+.btn-text {
+	text-transform: none;
+
+	& span {
+		text-transform: none;
+	}
+
+	& .caret {
+		margin-left: 0.5rem;
+	}
+
+	&.color-primary:hover {
+		color: var(--color-primary);
+		background-color: color-mod(var(--color-primary) a(4%));
+	}
+
+	&.color-purple:hover {
+		color: var(--color-purple);
+		background-color: color-mod(var(--color-purple) a(4%));
+	}
+
+	&.color-red:hover {
+		color: var(--color-red);
+		background-color: color-mod(var(--color-red) a(4%));
+	}
+
+	&.color-pink:hover {
+		color: var(--color-pink);
+		background-color: color-mod(var(--color-pink) a(4%));
+	}
+
+	&.color-blue:hover {
+		color: var(--color-blue);
+		background-color: color-mod(var(--color-blue) a(4%));
+	}
+
+	&.underline:hover {
+		text-decoration: underline;
+	}
+
+	&:focus {
+		outline: none !important;
+	}
+}
+
+/* Toggle */
+.btn-toggle {
+	font-size: 0.75rem;
+	padding: 10px;
+	background-color: transparent;
+	background-image: none;
+	box-shadow: none;
+
+	& > .hamburger {
+		display: inline-block;
+	}
+
+	& .icon-bar {
+		display: block;
+		width: 23px;
+		height: 4px;
+
+		& + .icon-bar {
+			margin-top: 4px;
+		}
+	}
+
+	&:hover {
+		& .icon-bar {
+			background-color: color-mod(var(--color-white));
+		}
+	}
+
+	&:active,
+	&:focus,
+	&:active:focus {
+		color: var(--color-white);
+	}
+}
+
+.btn-toggle-label {
+	display: none;
+
+	@media (--md) {
+		display: inherit;
+	}
+}
+
+.btn-flat-icon,
+.btn-flat-icon div {
+	height: 36px;
+
+	& svg {
+		margin-top: 6px;
+	}
+}
+
+/* modal close button tweak */
+button.close > span {
+	font-size: 36px;
+	font-weight: inherit;
+}
+
+.button-fat {
+	padding: 0.875em 3em;
+
+	@media (--md) {
+		padding: 0.875em 4em;
+	}
+}
+
+.button-large {
+	min-height: 30vh;
+	max-width: 20rem;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+	color: #16181b;
+	background-color: #f8f9fa;
+}
+
+/**
+ * ActionList
+ */
+
+.action-list {
+	display: block;
+	min-width: 146px;
+
+	& .btn-default {
+		padding: 0.5rem 1rem;
+		font-weight: var(--font-weight-bold);
+		background-color: var(--color-light-grey);
+	}
+
+	& .dropdown-toggle {
+		padding: 0.5rem;
+		border-left: 2px solid var(--color-white);
+		margin: 0;
+		align-self: stretch;
+	}
+
+	& .action-list-menu svg {
+		height: 2rem;
+		width: 2rem;
+		vertical-align: middle;
+		margin-right: 0.5rem;
+	}
+}
+
+.action-list.fr {
+	& .btn-group-default {
+		float: right;
+	}
+}
+
+.w-100-lt-xs .action-list {
+	min-width: 86px;
+
+	& .dropdown {
+		width: 100%;
+
+		@media (--xs) {
+			width: auto;
+		}
+	}
+
+	& .btn-default:not(.dropdown-toggle) {
+		width: 90%;
+
+		@media (--xs) {
+			width: auto;
+		}
+	}
+}
+
+.action-list-text-button {
+	display: none;
+}
+
+/**
+ * Material UI Buttons
+ */
+
+/* Hide bootstrap focus outline on Material buttons since they use their own highlight */
+.MuiButtonBase-root:focus,
+.MuiButtonBase-root:active,
+.MuiButtonBase-root:not(:disabled):not(.disabled):active,
+.MuiButtonBase-root:not(:disabled):not(.disabled):active:focus {
+	outline: none;
+}
+
+/* Material UI icon spacing */
+.MuiButton-text .MuiButton-label .MuiSvgIcon-root {
+	margin-right: 0.4rem;
+}
+
+.MuiSwitch-switchBase .MuiTouchRipple-root {
+	color: var(--color-primary);
+}
+
+.MuiSwitch-switchBase.MuiSwitch-checked .MuiTouchRipple-root {
+	color: inherit;
+}
+
+/* making disabled button color darker to meet accessibility standards */
+.MuiButton-root.Mui-disabled {
+	color: rgba(0, 0, 0, 0.6);
+}
+
+/* allow disabled buttons to have popovers */
+.MuiButtonBase-root.Mui-disabled.enable-popovers {
+	cursor: auto;
+	pointer-events: all;
+
+	&.MuiButton-outlinedPrimary {
+		&:hover {
+			border: 1px solid rgba(0, 0, 0, 0.12);
+		}
+	}
+}
+
+.MuiToggleButton-root {
+	color: var(--color-primary);
+
+	&.Mui-selected {
+		background-color: var(--color-primary);
+		color: var(--color-white);
+
+		&:hover {
+			background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
+		}
+
+		&:focus {
+			background-color: var(--color-primary);
+		}
+	}
+}