@oscarpalmer/oui 0.37.0 → 0.39.0

package/src/css/flex.scss

@@ -1,107 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-:where(.fill) {
-	flex: 1;
-}
-
-:where(.flow, .stack) {
-	display: flex;
-}
-
-:where(.flow) {
-	flex-flow: row wrap;
-	align-items: center;
-	gap: var(--flow-gap, 1rem);
-}
-
-.flow {
-	:where(&-large, &--large) {
-		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-nowrap, &--nowrap) {
-		flex-wrap: nowrap;
-	}
-
-	:where(&-small, &--small) {
-		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-text, &--text) {
-		gap: var(--flow-gap-text, 1em);
-	}
-}
-
-:where(.stack) {
-	flex-flow: column nowrap;
-	gap: var(--stack-gap, 1rem);
-}
-
-.stack {
-	:where(&-large, &--large) {
-		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-small, &--small) {
-		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-text, &--text) {
-		gap: var(--stack-gap-text, 1em);
-	}
-}
-
-.flex {
-	&-reverse,
-	&--reverse {
-		:where(&[class^='flow' i], &[class*=' flow' i]) {
-			flex-direction: row-reverse;
-		}
-
-		:where(&[class^='stack' i], &[class*=' stack' i]) {
-			flex-direction: column-reverse;
-		}
-	}
-}
-
-$alignment-origins: (
-	c: 'content',
-	i: 'items',
-	s: 'self',
-);
-
-$alignment-values: (
-	c: 'center',
-	fe: 'flex-end',
-	fs: 'flex-start',
-	s: 'stretch',
-);
-
-$justification-values: (
-	sa: 'space-around',
-	sb: 'space-between',
-	se: 'space-evenly',
-);
-
-$types: (
-	a: 'align',
-	j: 'justify',
-);
-
-@each $type-key, $type-value in $types {
-	@each $alignment-origin-key, $alignment-origin-value in $alignment-origins {
-		.flex-#{$type-key}#{$alignment-origin-key} {
-			@each $alignment-value-key, $alignment-value-value in $alignment-values {
-				:where(&-#{$alignment-value-key}, &--#{$alignment-value-key}) {
-					#{$type-value}-#{$alignment-origin-value}: #{$alignment-value-value};
-				}
-			}
-		}
-	}
-
-	@each $justification-key, $justification-value in $justification-values {
-		:where(.flex-#{$type-key}c-#{$justification-key}, .flex-#{$type-key}c--#{$justification-key}) {
-			#{$type-value}-content: #{$justification-value};
-		}
-	}
-}

package/src/css/floatable.scss

@@ -1,152 +0,0 @@
-@use 'mixins.scss' as mixins;
-
-:where([oui-dialog], [oui-popover], [oui-tooltip-content]),
-:where([oui-dialog])::backdrop {
-	opacity: 0;
-	transition: 0.125s ease-in-out;
-	transition-property: opacity, scale;
-}
-
-:where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
-	@include mixins.shadow-5;
-
-	background-color: var(--oui-absolute);
-	scale: 0.9;
-}
-
-:where([oui-dialog]:focus, [oui-popover]:focus, [oui-tooltip-content]:focus) {
-	outline: none;
-}
-
-:where(
-	[oui-dialog][oui-dialog-open],
-	[oui-popover][oui-popover-open],
-	[oui-tooltip-content][oui-tooltip-content-open]
-),
-:where([oui-dialog][oui-dialog-open])::backdrop {
-	opacity: 1;
-}
-
-:where(
-	[oui-dialog][oui-dialog-open],
-	[oui-popover][oui-popover-open],
-	[oui-tooltip-content][oui-tooltip-content-open]
-) {
-	scale: 1;
-	transition-delay: 0.125s;
-}
-
-:where([oui-dialog]) {
-	position: relative;
-}
-
-:where([oui-dialog-resizer]) {
-	position: absolute;
-	inset: auto 0 0 auto;
-}
-
-:where([oui-popover], [oui-tooltip-content]) {
-	@include mixins.floatable;
-}
-
-:where([oui-popover]) {
-	padding: 1rem;
-	background-color: var(--oui-absolute);
-	border-radius: 0.25rem;
-}
-
-:where(
-	[oui-tooltip]:is(
-		abbr,
-		b,
-		cite,
-		dfn,
-		code,
-		em,
-		i,
-		kbd,
-		mark,
-		q,
-		samp,
-		small,
-		span,
-		strong,
-		sub,
-		sup,
-		time,
-		var
-	)
-) {
-	text-decoration: underline dotted;
-	text-decoration-skip-ink: auto;
-	text-underline-offset: 0.25em;
-	cursor: help;
-}
-
-:where([oui-tooltip-content]) {
-	max-width: 48ch;
-	padding: 0.75em 1em;
-	background-color: var(--oui-absolute);
-	border-radius: 0.25rem;
-	font-size: 0.875rem;
-	pointer-events: none;
-
-	&::after {
-		content: '';
-		display: block;
-		position: absolute;
-	}
-
-	&[oui-position^='above' i],
-	&[oui-position^='below' i],
-	&[oui-position^='bottom' i],
-	&[oui-position^='top' i] {
-		&::after {
-			width: 100%;
-			height: 1em;
-		}
-	}
-
-	&[oui-position^='above' i],
-	&[oui-position^='top' i] {
-		&::after {
-			inset: calc(100% - 0.5em) 0 0;
-		}
-	}
-
-	&[oui-position^='below' i],
-	&[oui-position^='bottom' i] {
-		&::after {
-			inset: -0.5em 0 0;
-		}
-	}
-
-	&[oui-position^='end' i],
-	&[oui-position^='left' i],
-	&[oui-position^='right' i],
-	&[oui-position^='start' i] {
-		&::after {
-			width: 1em;
-			height: 100%;
-		}
-	}
-
-	&[oui-position^='end' i],
-	&[oui-position^='right' i] {
-		&::after {
-			inset: 0 0 0 -0.5em;
-		}
-	}
-
-	&[oui-position^='left' i],
-	&[oui-position^='start' i] {
-		&::after {
-			inset: 0 0 0 calc(100% - 0.5em);
-		}
-	}
-}
-
-:where([oui-tooltip-content][oui-tooltip-content-open]) {
-	opacity: 1;
-	pointer-events: all;
-}