@internetstiftelsen/styleguide 4.1.13 → 5.0.1

package/src/atoms/button/_button.scss

@@ -1,25 +1,31 @@
-@charset 'UTF-8';
+@charset "UTF-8";
 @use "sass:color";
-
-// Default Button
-/// @group Buttons
-@include atom(button) {
+@use '../../configurations/mixins' as mixin;
+@use '../../configurations/bem' as bem;
+@use '../../configurations/variables' as var;
+@use '../../configurations/functions' as func;
+@use '../../configurations/colors/colors' as colors;
+@use '../../vendor/grid/breakpoints' as breakpoint;
+
+/* Default Button
+/// @group Buttons */
+@include mixin.atom(button) {
 	display: inline-flex;
 	position: relative;
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: center;
 	margin: 0;
-	padding: rhythm(1.112) rhythm(2);
+	padding: func.rhythm(1.112) func.rhythm(2);
 	overflow: hidden;
 	border: 0;
-	border-radius: $border-radius;
+	border-radius: var.$border-radius;
 	background-color: currentColor;
-	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+	background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214;httpshttpshttps */
 	box-shadow: 0 0 0 1px inset currentColor;
-	color: $color-ocean-dark;
-	font-family: $font-family-headings;
-	font-size: rem(16px);
+	color: colors.$color-ocean-dark;
+	font-family: var.$font-family-headings;
+	font-size: func.to_rem(16px);
 	text-decoration: none;
 	text-shadow: none;
 	hyphens: auto;
@@ -27,182 +33,182 @@
 
 	&:hover,
 	&:focus {
-		color: $color-ocean;
+		color: colors.$color-ocean;
 	}
 
 	&:disabled {
-		background-color: $color-granit !important;
+		background-color: colors.$color-granit !important;
 		box-shadow: none;
 		cursor: not-allowed;
 
 		[class*='text'] {
-			color: $color-snow !important;
+			color: colors.$color-snow !important;
 			text-shadow: none !important;
 		}
 	}
 
-	// States
+	/* States */
 	&.is-loading {
 		cursor: wait;
 	}
 
 	&.is-loading & {
-		@include e(text) {
+		@include bem.e(text) {
 			transform: translateY(-100%);
 			opacity: 0;
 		}
 
-		@include e(icon) {
+		@include bem.e(icon) {
 			transform: translateY(-100%);
 			opacity: 0;
 		}
 
-		@include e(spinner) {
+		@include bem.e(spinner) {
 			transform: translate(-50%, -50%);
 			opacity: 1;
 		}
 	}
 
-	@include e(text) {
+	@include bem.e(text) {
 		position: relative;
 		transform: translateY(0);
 		transition: 0.3s opacity, 0.3s transform;
 		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 		opacity: 1;
-		color: $color-snow;
+		color: colors.$color-snow;
 		pointer-events: none;
 	}
 
-	@include e(spinner) {
+	@include bem.e(spinner) {
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		width: $icon-size-small;
-		height: $icon-size-small;
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
 		transform: translate(-50%, 50%);
 		transition: 0.3s opacity, 0.3s transform;
 		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 		opacity: 0;
 	}
 
-	// Modifiers
+	/* Modifiers */
 
-	@include m(full-width) {
+	@include bem.m(full-width) {
 		display: flex;
 		width: 100%;
 	}
 
-	@include m(small) {
-		padding: rhythm(0.6) rhythm(1.5);
+	@include bem.m(small) {
+		padding: func.rhythm(0.6) func.rhythm(1.5);
 	}
 
-	@include m(large) {
-		padding: rhythm(1.6) rhythm(4);
+	@include bem.m(large) {
+		padding: func.rhythm(1.6) func.rhythm(4);
 
-		@include e(text) {
-			@include bp-up(sm) {
-				font-size: rem(24px);
+		@include bem.e(text) {
+			@include breakpoint.bp-up(sm) {
+				font-size: func.to_rem(24px);
 			}
 		}
 
-		@include e(icon) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(icon) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 
-		@include e(spinner) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(spinner) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 	}
 
-	@include m(large-responsive) {
-		padding: rhythm(1.6) rhythm(4);
+	@include bem.m(large-responsive) {
+		padding: func.rhythm(1.6) func.rhythm(4);
 
-		@include e(text) {
-			font-size: rem(24px);
+		@include bem.e(text) {
+			font-size: func.to_rem(24px);
 		}
 
-		@include e(icon) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(icon) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 
-		@include e(spinner) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(spinner) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 		}
 
-		@include bp-down(sm) {
-			padding: rhythm(1.112) rhythm(2);
+		@include breakpoint.bp-down(sm) {
+			padding: func.rhythm(1.112) func.rhythm(2);
 
-			@include e(text) {
-				font-size: rem(16px);
+			@include bem.e(text) {
+				font-size: func.to_rem(16px);
 			}
 		}
 	}
 
-	@include m(icon) {
+	@include bem.m(icon) {
 		justify-content: space-between;
-		max-width: rhythm(50);
-		padding-right: rhythm(5);
+		max-width: func.rhythm(50);
+		padding-right: func.rhythm(5);
 		text-align: left;
 	}
 
-	@include m(icon-left) {
+	@include bem.m(icon-left) {
 		justify-content: space-between;
-		max-width: rhythm(50);
-		padding-right: rhythm(2);
-		padding-left: rhythm(5);
+		max-width: func.rhythm(50);
+		padding-right: func.rhythm(2);
+		padding-left: func.rhythm(5);
 
-		@include e(icon) {
+		@include bem.e(icon) {
 			right: auto;
-			left: rhythm(1.5);
+			left: func.rhythm(1.5);
 		}
 	}
 
-	@include m(standalone-icon) {
-		padding: rhythm(1);
+	@include bem.m(standalone-icon) {
+		padding: func.rhythm(1);
 		border: 0;
 		border-radius: 0;
 		background-color: transparent;
 		box-shadow: none;
 
-		@include e(text) {
-			@include visuallyhidden;
+		@include bem.e(text) {
+			@include mixin.visuallyhidden;
 		}
 
-		@include e(icon) {
+		@include bem.e(icon) {
 			position: static;
-			width: $icon-size;
-			height: $icon-size;
+			width: var.$icon-size;
+			height: var.$icon-size;
 			transform: none;
 			color: var(--cyberspace-color);
 			fill: currentColor;
 		}
 
-		@include m(white) {
-			@include e(icon) {
-				fill: $color-snow;
+		@include bem.m(white) {
+			@include bem.e(icon) {
+				fill: colors.$color-snow;
 			}
 		}
 	}
 
-	@include e(icon) {
+	@include bem.e(icon) {
 		position: absolute;
-		z-index: z_index(background);
+		z-index: func.z_index(background);
 		top: 50%;
-		right: rhythm(1.5);
-		width: $icon-size-small;
-		height: $icon-size-small;
+		right: func.rhythm(1.5);
+		width: var.$icon-size-small;
+		height: var.$icon-size-small;
 		transform: translateY(-50%);
 		transition: fill 100ms linear;
-		fill: $color-snow;
+		fill: colors.$color-snow;
 		pointer-events: none;
 	}
 
-	// More colors
-	@include m(transparent) {
+	/* More colors */
+	@include bem.m(transparent) {
 		border-color: transparent;
 		background-color: transparent;
 		box-shadow: none;
@@ -214,325 +220,325 @@
 			text-decoration: underline;
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			color: var(--cyberspace-color);
 		}
 
-		@include e(icon) {
-			width: $icon-size;
-			height: $icon-size;
+		@include bem.e(icon) {
+			width: var.$icon-size;
+			height: var.$icon-size;
 			fill: var(--cyberspace-cyberspace);
 			fill: currentColor;
 		}
 
-		@include m(small-icon) {
-			@include e(icon) {
-				width: $icon-size-small;
-				height: $icon-size-small;
+		@include bem.m(small-icon) {
+			@include bem.e(icon) {
+				width: var.$icon-size-small;
+				height: var.$icon-size-small;
 			}
 		}
 	}
 
-	@include m(cyberspace) {
-		color: $color-cyberspace;
+	@include bem.m(cyberspace) {
+		color: colors.$color-cyberspace;
 
 		&:hover,
 		&:focus {
-			color: $color-granit;
+			color: colors.$color-granit;
 		}
 
-		@include e(text) {
-			color: $color-snow;
+		@include bem.e(text) {
+			color: colors.$color-snow;
 		}
 
-		@include e(icon) {
-			fill: $color-snow;
+		@include bem.e(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(snow) {
+	@include bem.m(snow) {
 		color: transparent;
 
 		&:hover,
 		&:focus {
-			color: $color-snow;
+			color: colors.$color-snow;
 		}
 
-		@include e(text) {
-			color: $color-snow;
+		@include bem.e(text) {
+			color: colors.$color-snow;
 		}
 
-		@include e(icon) {
-			fill: $color-snow;
+		@include bem.e(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(ruby) {
-		color: $color-ruby;
+	@include bem.m(ruby) {
+		color: colors.$color-ruby;
 
 		&:hover,
 		&:focus {
-			color: $color-ruby-dark;
+			color: colors.$color-ruby-dark;
 		}
 
-		@include e(text) {
-			color: $color-snow;
-			text-shadow: 0 0 rhythm(0.5) $color-ruby-dark;
+		@include bem.e(text) {
+			color: colors.$color-snow;
+			text-shadow: 0 0 func.rhythm(0.5) colors.$color-ruby-dark;
 		}
 
-		@include e(icon) {
-			fill: $color-snow;
+		@include bem.e(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(ruby-light) {
-		box-shadow: 0 0 0 1px inset $color-ruby;
-		color: $color-ruby-light;
+	@include bem.m(ruby-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-ruby;
+		color: colors.$color-ruby-light;
 
 		&:hover,
 		&:focus {
-			color: $color-ruby;
+			color: colors.$color-ruby;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(ruby-dark) {
-		color: $color-ruby-dark;
+	@include bem.m(ruby-dark) {
+		color: colors.$color-ruby-dark;
 
 		&:hover,
 		&:focus {
-			color: $color-ruby;
+			color: colors.$color-ruby;
 		}
 
-		@include e(text) {
-			color: $color-snow;
+		@include bem.e(text) {
+			color: colors.$color-snow;
 		}
 
-		@include e(icon) {
-			fill: $color-snow;
+		@include bem.e(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(ocean-light) {
-		box-shadow: 0 0 0 1px inset $color-ocean;
-		color: $color-ocean-light;
+	@include bem.m(ocean-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-ocean;
+		color: colors.$color-ocean-light;
 
 		&:hover,
 		&:focus {
-			color: $color-ocean;
+			color: colors.$color-ocean;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(jade) {
-		color: $color-jade;
+	@include bem.m(jade) {
+		color: colors.$color-jade;
 
 		&:hover,
 		&:focus {
-			color: color.adjust($color-jade, $lightness: -10%);
+			color: color.adjust(colors.$color-jade, $lightness: -10%);
 			text-shadow: none;
 		}
 
-		@include e(text) {
-			color: $color-snow;
-			text-shadow: 0 0 rhythm(2) $color-jade-dark;
+		@include bem.e(text) {
+			color: colors.$color-snow;
+			text-shadow: 0 0 func.rhythm(2) colors.$color-jade-dark;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(jade-light) {
-		box-shadow: 0 0 0 1px inset $color-jade;
-		color: $color-jade-light;
+	@include bem.m(jade-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-jade;
+		color: colors.$color-jade-light;
 
 		&:hover,
 		&:focus {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(jade-dark) {
-		color: $color-jade-dark;
+	@include bem.m(jade-dark) {
+		color: colors.$color-jade-dark;
 
 		&:hover,
 		&:focus {
-			color: $color-jade;
+			color: colors.$color-jade;
 		}
 
-		@include e(text) {
-			color: $color-snow;
+		@include bem.e(text) {
+			color: colors.$color-snow;
 		}
 
-		@include e(icon) {
-			fill: $color-snow;
+		@include bem.e(icon) {
+			fill: colors.$color-snow;
 		}
 	}
 
-	@include m(lemon) {
-		color: $color-lemon;
+	@include bem.m(lemon) {
+		color: colors.$color-lemon;
 
 		&:hover,
 		&:focus {
-			color: $color-lemon-light;
+			color: colors.$color-lemon-light;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(lemon-light) {
-		box-shadow: 0 0 0 1px inset $color-lemon;
-		color: $color-lemon-light;
+	@include bem.m(lemon-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-lemon;
+		color: colors.$color-lemon-light;
 
 		&:hover,
 		&:focus {
-			background-color: $color-lemon;
+			background-color: colors.$color-lemon;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(peacock) {
-		color: $color-peacock;
+	@include bem.m(peacock) {
+		color: colors.$color-peacock;
 
 		&:hover {
-			color: color.adjust($color-peacock, $lightness: -10%);
+			color: color.adjust(colors.$color-peacock, $lightness: -10%);
 			text-shadow: none;
 		}
 
 		&:focus {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&:hover:focus {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
-		@include e(text) {
-			color: $color-snow;
-			text-shadow: 0 0 rhythm(2) $color-peacock-dark;
+		@include bem.e(text) {
+			color: colors.$color-snow;
+			text-shadow: 0 0 func.rhythm(2) colors.$color-peacock-dark;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(peacock-light) {
-		box-shadow: 0 0 0 1px inset $color-peacock;
-		color: $color-peacock-light;
+	@include bem.m(peacock-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-peacock;
+		color: colors.$color-peacock-light;
 
 		&:hover {
-			color: $color-peacock;
+			color: colors.$color-peacock;
 		}
 
 		&:focus {
-			color: $color-peacock-light;
+			color: colors.$color-peacock-light;
 		}
 
 		&:hover:focus {
-			color: $color-peacock-light;
+			color: colors.$color-peacock-light;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(sandstone) {
-		color: $color-sandstone;
+	@include bem.m(sandstone) {
+		color: colors.$color-sandstone;
 
 		&:hover,
 		&:focus {
-			color: $color-sandstone-light;
+			color: colors.$color-sandstone-light;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(sandstone-light) {
-		box-shadow: 0 0 0 1px inset $color-sandstone;
-		color: $color-sandstone-light;
+	@include bem.m(sandstone-light) {
+		box-shadow: 0 0 0 1px inset colors.$color-sandstone;
+		color: colors.$color-sandstone-light;
 
 		&:hover {
-			color: $color-sandstone;
+			color: colors.$color-sandstone;
 		}
 
 		&:focus {
-			color: $color-sandstone-light;
+			color: colors.$color-sandstone-light;
 		}
 
 		&:hover:focus {
-			color: $color-sandstone-light;
+			color: colors.$color-sandstone-light;
 		}
 
-		@include e(text) {
-			color: $color-cyberspace;
+		@include bem.e(text) {
+			color: colors.$color-cyberspace;
 		}
 
-		@include e(icon) {
-			fill: $color-cyberspace;
+		@include bem.e(icon) {
+			fill: colors.$color-cyberspace;
 		}
 	}
 
-	@include m(dashed) {
+	@include bem.m(dashed) {
 		border: 1px dashed;
 		background: transparent;
 		box-shadow: none;
-		color: $color-cyberspace;
+		color: colors.$color-cyberspace;
 
 		&:hover,
 		&:focus {
-			color: $color-cyberspace;
+			color: colors.$color-cyberspace;
 			text-decoration: underline;
 		}
 
-		@include e(text) {
+		@include bem.e(text) {
 			color: inherit;
 		}
 	}