@oardi/css-utils 0.19.0

package/scss/components/icon-button.scss

@@ -0,0 +1,130 @@
+@use 'sass:map';
+@use '../theme.scss';
+
+$sizes: (
+	xs: 32px,
+	sm: 36px,
+	md: 40px,
+	lg: 44px,
+);
+
+:root {
+	--icon-button-padding: 0.25rem;
+	--icon-button-border-width: 2px;
+	--icon-button-highlight: var(--gray-90);
+	--icon-button-disabled-bg-color: none;
+}
+
+.icon-btn {
+	fill: var(--font-color);
+	padding: var(--icon-button-padding);
+	min-width: 40px;
+	width: 40px;
+	height: 40px;
+	border-radius: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	border-width: var(--icon-button-border-width);
+	border-style: solid;
+	background-color: transparent;
+	border-color: transparent;
+	color: var(--font-color);
+	transition: all 0.3s ease;
+	-webkit-tap-highlight-color: transparent;
+	touch-action: manipulation; // ios fix
+
+	svg {
+		max-width: 18px;
+		max-height: 18px;
+		overflow: visible;
+	}
+
+	&:hover {
+		cursor: pointer;
+		text-decoration: none;
+		background-color: var(--icon-button-highlight);
+	}
+
+	&[disabled],
+	&[disabled]:hover,
+	&[active]:hover {
+		color: var(--gray-80);
+		fill: var(--gray-80);
+		cursor: not-allowed;
+		box-shadow: none;
+		background-color: var(--icon-button-disabled-bg-color);
+		outline: 0;
+	}
+
+	&:focus {
+		outline: 0;
+		box-shadow: 0 0 0 0.2rem var(--font-color);
+	}
+}
+
+@each $name, $value in $sizes {
+	.icon-btn-#{$name} {
+		min-width: $value;
+		width: $value;
+		height: $value;
+
+		svg {
+			max-width: calc($value - 20px);
+			max-height: calc($value - 20px);
+		}
+	}
+}
+
+@each $name, $value in map.get(theme.$theme, colors) {
+	.icon-btn-#{$name} {
+		color: var(--#{$name});
+		fill: var(--#{$name});
+		background-color: transparent;
+		box-shadow: 0 0 0 0.2rem transparent;
+
+		&:hover,
+		&:active,
+		&:focus {
+			box-shadow: 0 0 0 0.2rem var(--icon-button-highlight);
+			color: var(--on-#{$name});
+		}
+
+		&[disabled],
+		&[disabled]:hover,
+		&[active]:hover {
+			color: var(--#{$name}-light);
+			fill: var(--#{$name}-light);
+			cursor: not-allowed;
+			box-shadow: none;
+			background-color: var(--icon-button-disabled-bg-color);
+			outline: 0;
+		}
+	}
+
+	.icon-btn-#{$name}-contained {
+		color: var(--on-#{$name});
+		fill: var(--on-#{$name});
+		background-color: var(--#{$name});
+		box-shadow: 0 0 0 0.2rem transparent;
+
+		&:hover,
+		&:active,
+		&:focus {
+			box-shadow: 0 0 0 0.2rem var(--#{$name});
+			background-color: var(--#{$name}-dark);
+		}
+
+		&[disabled],
+		&[disabled]:hover,
+		&[active]:hover {
+			color: var(--#{$name}-light);
+			fill: var(--#{$name}-light);
+			cursor: not-allowed;
+			box-shadow: none;
+			background-color: var(--icon-button-disabled-bg-color);
+			outline: 0;
+		}
+	}
+}

package/scss/components/list.scss

@@ -0,0 +1,33 @@
+:root {
+	--list-bg-color: var(--white);
+	--list-border-color: transparent;
+	// --list-item-hover-bg-color: var(--highlight);
+	--list-border-width: 1px;
+	--list-padding: 0rem;
+	--list-item-padding: 1rem;
+}
+
+.list {
+	background-color: var(--list-bg-color);
+	border: var(--list-border-width) solid var(--list-border-color);
+	padding: var(--list-padding);
+	list-style-type: none;
+
+	.list-item {
+		color: var(--font-color);
+		min-height: 1px;
+		padding: var(--list-item-padding);
+		display: flex;
+		align-items: start;
+		flex-direction: column;
+
+		&.is-active,
+		&:hover {
+			cursor: pointer;
+			// background-color: var(--list-item-hover-bg-color);
+			color: var(--primary);
+			fill: var(--primary);
+			text-decoration: none;
+		}
+	}
+}

package/scss/components/nav.scss

@@ -0,0 +1,61 @@
+:root {
+	--nav-bg-color: #ffffff;
+}
+
+nav {
+	padding-top: 0.6rem;
+	padding-bottom: 0.6rem;
+	background-color: var(--nav-bg-color);
+	min-height: 60px;
+	display: flex;
+	align-items: center;
+}
+
+nav .logo:hover {
+	text-decoration: none;
+	color: var(--primary-dark);
+}
+
+nav .nav-open,
+nav .nav-close {
+	display: none;
+	border: none;
+}
+
+nav .nav-open svg,
+nav .nav-close svg {
+	height: 20px;
+}
+
+nav .nav-open:hover,
+nav .nav-close:hover {
+	background-color: var(--gray-90);
+}
+
+nav .menu {
+	background-color: var(--white);
+}
+
+nav .menu ul {
+	display: flex;
+	align-items: center;
+	list-style: none;
+}
+
+nav .menu ul li {
+	display: flex;
+	border-radius: var(--border-radius);
+}
+
+nav .menu ul li:hover {
+	background-color: var(--gray-90);
+}
+
+nav .menu ul li:hover a {
+	color: var(--primary-dark);
+}
+
+nav .menu ul li a {
+	padding: 0.75rem 0.75rem;
+	text-decoration: none;
+}

package/scss/components/overlay.scss

@@ -0,0 +1,7 @@
+.overlay {
+	background: rgba(0, 0, 0, 0.5);
+	position: fixed;
+	inset: 0;
+	z-index: 1040;
+	display: none;
+}

package/scss/components/tabs.scss

@@ -0,0 +1,47 @@
+:root {
+	--tab-highlight: var(--highlight);
+}
+
+.tabs {
+	display: flex;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+	overflow-x: scroll;
+	overflow-y: visible;
+	padding-inline: 0.2rem; // fix for box-shadow on focus
+	padding-block: 0.2rem; // fix for box-shadow on focus
+	margin-inline: -0.2rem; // fix for box-shadow on focus
+
+	.tab {
+		color: var(--font-color);
+		padding: 16px 20px;
+		border-bottom: 3px solid var(--gray-80);
+		flex: 0 0 auto;
+
+		&.active {
+			color: var(--primary);
+			background: var(--body-bg-color);
+			border-bottom: 3px solid var(--primary);
+		}
+
+		&:focus {
+			outline: 0;
+			box-shadow: var(--box-shadow);
+			z-index: 1;
+		}
+
+		&:hover {
+			cursor: pointer;
+			background-color: var(--tab-highlight);
+		}
+	}
+}
+
+.tab-content {
+	display: none;
+	padding: 20px;
+
+	&.active {
+		display: block;
+	}
+}

package/scss/components/toast.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../theme.scss';
+
+.toast {
+	background-color: white;
+	border-color: transparent;
+	color: var(--font-color);
+	box-shadow: var(--shadow);
+	padding: 1rem;
+	border-radius: var(--border-radius);
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+@each $name, $value in map.get(theme.$theme, colors) {
+	.toast-#{$name} {
+		color: var(--white);
+		background-color: var(--#{$name});
+	}
+}

package/scss/components.scss

@@ -0,0 +1,12 @@
+@use './components/button.scss';
+@use './components/card.scss';
+@use './components/chip.scss';
+@use './components/drawer.scss';
+@use './components/expansion-panel.scss';
+@use './components/form.scss';
+@use './components/icon-button.scss';
+@use './components/list.scss';
+@use './components/nav.scss';
+@use './components/overlay.scss';
+@use './components/tabs.scss';
+@use './components/toast.scss';

package/scss/flex-responsive.scss

@@ -0,0 +1,108 @@
+@use 'sass:map';
+@use './theme.scss';
+
+// TODO
+// add responsive classes for
+// d-flex, d-inline-flex
+
+@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+	@media (min-width: #{$bp-value}) {
+		@each $key, $value in map.get(theme.$theme, spacings) {
+			.gap-#{$bp}-#{$key} {
+				gap: $value !important;
+			}
+
+			.row-gap-#{$bp}-#{$key} {
+				row-gap: $value !important;
+			}
+
+			.column-gap-#{$bp}-#{$key} {
+				column-gap: $value !important;
+			}
+		}
+
+		// basic
+		.d-#{$bp}-flex {
+			display: flex !important;
+		}
+
+		.d-#{$bp}-inline-flex {
+			display: inline-flex !important;
+		}
+
+		// directions
+		.flex-#{$bp}-row {
+			flex-direction: row !important;
+		}
+
+		.flex-#{$bp}-column {
+			flex-direction: column !important;
+		}
+
+		.flex-#{$bp}-row-reverse {
+			flex-direction: row-reverse !important;
+		}
+
+		.flex-#{$bp}-column-reverse {
+			flex-direction: column-reverse !important;
+		}
+
+		// justify content - start, end, center, between, around, evenly
+		.justify-content-#{$bp}-start {
+			justify-content: start !important;
+		}
+
+		.justify-content-#{$bp}-end {
+			justify-content: end !important;
+		}
+
+		.justify-content-#{$bp}-center {
+			justify-content: center !important;
+		}
+
+		.justify-content-#{$bp}-between {
+			justify-content: space-between !important;
+		}
+
+		.justify-content-#{$bp}-around {
+			justify-content: space-around !important;
+		}
+
+		.justify-content-#{$bp}-evenly {
+			justify-content: space-evenly !important;
+		}
+
+		// align items - start, end, center, baseline, or stretch
+		.align-items-#{$bp}-start {
+			align-items: start !important;
+		}
+
+		.align-items-#{$bp}-end {
+			align-items: end !important;
+		}
+
+		.align-items-#{$bp}-center {
+			align-items: center !important;
+		}
+
+		.align-items-#{$bp}-baseline {
+			align-items: baseline !important;
+		}
+
+		.align-items-#{$bp}-stretch {
+			align-items: stretch !important;
+		}
+
+		// align self
+		// TODO
+
+		// fill
+		// TODO
+
+		// grow
+		// TODO
+
+		// shrink
+		// TODO
+	}
+}

package/scss/flex.scss

@@ -0,0 +1,166 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+// TODO - use the following to iterate
+$flex-directions: (row, row-reverse, column, column-reverse);
+$flex-ratios: (0, 1);
+$flex-justify-content-alignments: (start, end, center, between, around, evenly);
+$flex-align-items-alignments: (start, end, center, between, around, evenly);
+
+// basic
+.d-flex {
+	display: flex;
+}
+
+.d-inline-flex {
+	display: inline-flex;
+}
+
+// directions
+.flex-row {
+	flex-direction: row;
+}
+
+.flex-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.flex-column-reverse {
+	flex-direction: column-reverse;
+}
+
+// justify content - start, end, center, between, around or evenly
+.justify-content-start {
+	justify-content: start;
+}
+
+.justify-content-end {
+	justify-content: end;
+}
+
+.justify-content-center {
+	justify-content: center;
+}
+
+.justify-content-between {
+	justify-content: space-between;
+}
+
+.justify-content-around {
+	justify-content: space-around;
+}
+
+.justify-content-evenly {
+	justify-content: space-evenly;
+}
+
+// align items - start, end, center, baseline, or stretch
+.align-items-start {
+	align-items: start;
+}
+
+.align-items-end {
+	align-items: end;
+}
+
+.align-items-center {
+	align-items: center;
+}
+
+.align-items-baseline {
+	align-items: baseline;
+}
+
+.align-items-stretch {
+	align-items: stretch;
+}
+
+// align self
+// TODO
+
+// fill
+.flex-fill {
+	flex: 1 1 auto;
+}
+
+// grow
+.flex-grow-0 {
+	flex-grow: 0;
+}
+
+.flex-grow-1 {
+	flex-grow: 1;
+}
+
+// shrink
+.flex-shrink-0 {
+	flex-shrink: 0;
+}
+
+.flex-shrink-1 {
+	flex-shrink: 1;
+}
+
+// wrap
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+// order
+.order-0 {
+	order: 0;
+}
+
+.order-1 {
+	order: 1;
+}
+
+.order-2 {
+	order: 2;
+}
+
+.order-3 {
+	order: 3;
+}
+
+.order-4 {
+	order: 4;
+}
+
+.order-5 {
+	order: 5;
+}
+
+.order-first {
+	order: -1;
+}
+
+.order-last {
+	order: 6;
+}
+
+// align-content
+// TODO
+
+// gap - move to own file?
+@each $key, $value in map.get(theme.$theme, spacings) {
+	.gap-#{$key} {
+		gap: $value;
+	}
+
+	.row-gap-#{$key} {
+		row-gap: $value;
+	}
+
+	.column-gap-#{$key} {
+		column-gap: $value;
+	}
+}

package/scss/grid-responsive.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+// grid responsive
+
+@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+	@media (min-width: #{$bp-value}) {
+		@for $i from 1 through 12 {
+			.col-#{$bp}-#{$i} {
+				grid-column: span $i !important;
+			}
+		}
+	}
+}

package/scss/grid.scss

@@ -0,0 +1,17 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+
+	column-gap: 1rem;
+	row-gap: 1rem;
+}
+
+.col {
+	grid-column: span 12;
+}
+
+@for $i from 1 through 12 {
+	.col-#{$i} {
+		grid-column: span $i;
+	}
+}

package/scss/index.scss

@@ -0,0 +1,10 @@
+@use './theme.scss';
+@use './variables.scss';
+@use './typography.scss';
+@use './utilities.scss';
+@use './spacings.scss';
+@use './spacings-responsive.scss';
+@use './flex.scss';
+@use './flex-responsive.scss';
+@use './grid.scss';
+@use './grid-responsive.scss';

package/scss/mixins/breakpoints.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use './theme.scss' as theme;
+
+@mixin media($size) {
+	$bps: map.get(theme.$theme, breakpoints);
+
+	@if map.has-key($bps, $size) {
+		@media (min-width: #{map.get($bps, $size)}) {
+			@content;
+		}
+	} @else {
+		@error "Breakpoint `#{$size}` wurde nicht gefunden!";
+	}
+}
+
+// usage
+// @use './breakpoints' as bp;
+// @include bp.media(md) {
+//		dosomething;
+// }

package/scss/spacings-responsive.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use './theme.scss';
+
+// margin / padding with breakpoints and directions
+@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+	@media (min-width: #{$bp-value}) {
+		@each $key, $value in map.get(theme.$theme, spacings) {
+			@each $dir, $prop in map.get(theme.$theme, directions) {
+				.m#{$dir}-#{$bp}-#{$key} {
+					margin-#{$prop}: $value !important;
+				}
+
+				.p#{$dir}-#{$bp}-#{$key} {
+					padding-#{$prop}: $value !important;
+				}
+			}
+		}
+	}
+}

package/scss/spacings.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use './theme.scss';
+
+.ml-auto {
+	margin-left: auto;
+}
+
+// margin / padding spacings
+@each $key, $value in map.get(theme.$theme, spacings) {
+	.m-#{$key} {
+		margin: $value;
+	}
+
+	.p-#{$key} {
+		padding: $value;
+	}
+}
+
+// margin / padding with directions
+@each $key, $value in map.get(theme.$theme, spacings) {
+	@each $dir, $prop in map.get(theme.$theme, directions) {
+		.m#{$dir}-#{$key} {
+			margin-#{$prop}: $value !important;
+		}
+
+		.p#{$dir}-#{$key} {
+			padding-#{$prop}: $value !important;
+		}
+	}
+}