@drivenets/design-system 0.3.0 → 0.4.0

package/src/styles/shared/_modal.scss

@@ -1,123 +0,0 @@
-@use '../typography' as typography;
-
-@mixin overlay-base {
-	position: fixed;
-	inset: 0;
-	background: var(--color-background-brand);
-	opacity: 0.4;
-	z-index: 1199;
-
-	&[data-state='open'] {
-		animation: fade-in-overlay 0.2s ease-in-out both;
-	}
-
-	&[data-state='closed'] {
-		animation: fade-out-overlay 0.2s 0.1s ease-in-out both;
-	}
-}
-
-@keyframes fade-in-overlay {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 0.4;
-	}
-}
-
-@keyframes fade-out-overlay {
-	0% {
-		opacity: 0.4;
-	}
-
-	100% {
-		opacity: 0;
-	}
-}
-
-@mixin modal-base {
-	position: fixed;
-	inset: 50% auto auto 50%;
-	background: var(--color-background);
-	border-radius: 4px;
-	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	z-index: 1200;
-	overflow: hidden;
-
-	&[data-state='open'] {
-		animation: scale-in-modal 0.2s 0.1s ease-in-out both;
-	}
-
-	&[data-state='closed'] {
-		animation: scale-out-modal 0.2s ease-in-out both;
-	}
-}
-
-@keyframes scale-in-modal {
-	0% {
-		opacity: 0;
-		transform: translate(-50%, -50%) scale(0.9);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
-	}
-}
-
-@keyframes scale-out-modal {
-	0% {
-		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	100% {
-		opacity: 0;
-		transform: translate(-50%, -50%) scale(0.9);
-	}
-}
-
-@mixin content-base {
-	display: flex;
-	flex-direction: column;
-}
-
-@mixin header-footer-base {
-	background: inherit;
-	flex-shrink: 0;
-}
-
-@mixin header-base {
-	@include header-footer-base;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-@mixin footer-base($has-border: true) {
-	@include header-footer-base;
-
-	@if $has-border {
-		border-top: 1px solid rgba(0, 0, 0, 0.06);
-	}
-}
-
-@mixin title-base {
-	color: var(--color-font-main);
-	margin: 0;
-	flex: 1;
-}
-
-@mixin body-base {
-	flex: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-height: 0;
-}
-
-@mixin actions-base {
-	display: flex;
-	gap: 8px;
-	justify-content: flex-end;
-}

package/dist/components/ds-confirmation/ds-confirmation.module.cjs

@@ -1,21 +0,0 @@
-
-//#region src/components/ds-confirmation/ds-confirmation.module.scss
-var ds_confirmation_module_default = {
-	"overlay": "_overlay_1hsf6_1",
-	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
-	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
-	"modal": "_modal_1hsf6_1",
-	"scale-in-modal": "_scale-in-modal_1hsf6_1",
-	"scale-out-modal": "_scale-out-modal_1hsf6_1",
-	"content": "_content_1hsf6_1",
-	"header": "_header_1hsf6_1",
-	"footer": "_footer_1hsf6_1",
-	"actions": "_actions_1hsf6_1",
-	"title": "_title_1hsf6_1",
-	"icon": "_icon_1hsf6_1",
-	"body": "_body_1hsf6_1",
-	"cancel": "_cancel_1hsf6_1"
-};
-
-//#endregion
-exports.default = ds_confirmation_module_default;

package/dist/components/ds-confirmation/ds-confirmation.module.js

@@ -1,21 +0,0 @@
-//#region src/components/ds-confirmation/ds-confirmation.module.scss
-var ds_confirmation_module_default = {
-	"overlay": "_overlay_1hsf6_1",
-	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
-	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
-	"modal": "_modal_1hsf6_1",
-	"scale-in-modal": "_scale-in-modal_1hsf6_1",
-	"scale-out-modal": "_scale-out-modal_1hsf6_1",
-	"content": "_content_1hsf6_1",
-	"header": "_header_1hsf6_1",
-	"footer": "_footer_1hsf6_1",
-	"actions": "_actions_1hsf6_1",
-	"title": "_title_1hsf6_1",
-	"icon": "_icon_1hsf6_1",
-	"body": "_body_1hsf6_1",
-	"cancel": "_cancel_1hsf6_1"
-};
-
-//#endregion
-export { ds_confirmation_module_default as default };
-//# sourceMappingURL=ds-confirmation.module.js.map

package/dist/components/ds-confirmation/ds-confirmation.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-confirmation.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_modal.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-confirmation/ds-confirmation.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n@use '../../styles/shared/modal' as shared;\n\n$max-width: 400px;\n$min-height: 188px;\n$max-height: 244px;\n\n.overlay {\n\t@include shared.overlay-base;\n}\n\n.modal {\n\t@include shared.modal-base;\n\tinline-size: $max-width;\n}\n\n.content {\n\t@include shared.content-base;\n\tmin-block-size: $min-height;\n\tmax-block-size: $max-height;\n\tpadding: var(--spacing-md) var(--spacing-lg);\n\tgap: var(--spacing-standard);\n}\n\n.header {\n\t@include shared.header-base;\n\tgap: var(--spacing-xs);\n\tpadding-bottom: var(--spacing-xs);\n}\n\n.footer {\n\t@include shared.footer-base(false);\n\tdisplay: flex;\n\n\t.actions {\n\t\t@include shared.actions-base;\n\t\tflex-grow: 1;\n\t}\n}\n\n.title {\n\t@include shared.title-base;\n\tflex-grow: 1;\n}\n\n.icon {\n\tflex-shrink: 0;\n}\n\n.body {\n\t@include shared.body-base;\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-font-main);\n}\n\n.cancel {\n\tmargin-right: auto;\n}\n"],"mappings":""}

package/src/components/ds-confirmation/ds-confirmation.module.scss

@@ -1,58 +0,0 @@
-@use '../../styles/typography';
-@use '../../styles/shared/modal' as shared;
-
-$max-width: 400px;
-$min-height: 188px;
-$max-height: 244px;
-
-.overlay {
-	@include shared.overlay-base;
-}
-
-.modal {
-	@include shared.modal-base;
-	inline-size: $max-width;
-}
-
-.content {
-	@include shared.content-base;
-	min-block-size: $min-height;
-	max-block-size: $max-height;
-	padding: var(--spacing-md) var(--spacing-lg);
-	gap: var(--spacing-standard);
-}
-
-.header {
-	@include shared.header-base;
-	gap: var(--spacing-xs);
-	padding-bottom: var(--spacing-xs);
-}
-
-.footer {
-	@include shared.footer-base(false);
-	display: flex;
-
-	.actions {
-		@include shared.actions-base;
-		flex-grow: 1;
-	}
-}
-
-.title {
-	@include shared.title-base;
-	flex-grow: 1;
-}
-
-.icon {
-	flex-shrink: 0;
-}
-
-.body {
-	@include shared.body-base;
-	@include typography.body-sm-reg;
-	color: var(--color-font-main);
-}
-
-.cancel {
-	margin-right: auto;
-}