diff --git a/CHANGELOG.md b/CHANGELOG.md index a8b271b0..99bcde26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Change-log](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). -# 12.0.0 (2024-12-18) +# 13.1.0 (2025-01-30) +- Updated deprecated SCSS imports and removed all @import. +# 13.0.0 (2024-12-18) - Upgraded to Angular 19. # 12.0.4 (2024-11-14) - Updated wcag for `filter-tag-group` so that you tab in/out of the component and inside you use the arrow keys. diff --git a/projects/komponentkartan/package.json b/projects/komponentkartan/package.json index 71d9c756..11103a7b 100644 --- a/projects/komponentkartan/package.json +++ b/projects/komponentkartan/package.json @@ -1,6 +1,6 @@ { "name": "vgr-komponentkartan", - "version": "13.0.0", + "version": "13.1.0-beta", "peerDependencies": { "@angular/cdk": ">=17.0.0", "@angular/common": ">=17.0.0", diff --git a/projects/komponentkartan/src/assets/komponentkartan.scss b/projects/komponentkartan/src/assets/komponentkartan.scss index 41829ba6..6f4ecb36 100644 --- a/projects/komponentkartan/src/assets/komponentkartan.scss +++ b/projects/komponentkartan/src/assets/komponentkartan.scss @@ -1,18 +1,18 @@ /* Struktur efter ITCSS, se https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/*/ -@import "partials/generic.reset"; -/* SETTINGS */ +@forward "partials/generic.reset"; +// /* SETTINGS */ -@import "partials/_base.page.scss"; -@import "partials/_base.links.scss"; -@import "partials/_base.text.scss"; -@import "partials/_base.input.scss"; -/* OBJECTS */ +@forward "partials/_base.page.scss"; +@forward "partials/_base.links.scss"; +@forward "partials/_base.text.scss"; +@forward "partials/_base.input.scss"; +// /* OBJECTS */ -@import "partials/_objects.colors.scss"; -@import "partials/_objects.layout.scss"; -@import "partials/_objects.sizes.scss"; -@import "partials/_objects.images.scss"; -@import "partials/_objects.validation.scss"; +@forward "partials/_objects.colors.scss"; +@forward "partials/_objects.layout.scss"; +@forward "partials/_objects.sizes.scss"; +@forward "partials/_objects.images.scss"; +@forward "partials/_objects.validation.scss"; /* COMPONENTS */ diff --git a/projects/komponentkartan/src/assets/partials/_base.input.scss b/projects/komponentkartan/src/assets/partials/_base.input.scss index 7238d203..ee7ad648 100644 --- a/projects/komponentkartan/src/assets/partials/_base.input.scss +++ b/projects/komponentkartan/src/assets/partials/_base.input.scss @@ -1,5 +1,7 @@ -@import "_settings.fonts.scss"; -@import "_settings.sizes.scss"; +@use "_settings.fonts.scss" as *; +@use "_settings.sizes.scss" as *; +@use "_settings.colors.scss" as *; + input, textarea { font-family: $font-family; @@ -12,8 +14,8 @@ textarea { border-radius: 1px; border: 1px solid $control-border-color--default; height: 30px; - &:focus { - outline: none; + &:focus, :focus-visible { + outline: none !important; } } diff --git a/projects/komponentkartan/src/assets/partials/_base.links.scss b/projects/komponentkartan/src/assets/partials/_base.links.scss index 7678b5a3..0cb32834 100644 --- a/projects/komponentkartan/src/assets/partials/_base.links.scss +++ b/projects/komponentkartan/src/assets/partials/_base.links.scss @@ -1,4 +1,4 @@ -@import "_settings.fonts.scss"; +@use "_settings.fonts.scss" as *; a { color: #006298; diff --git a/projects/komponentkartan/src/assets/partials/_base.page.scss b/projects/komponentkartan/src/assets/partials/_base.page.scss index d64f4b26..99ae0656 100644 --- a/projects/komponentkartan/src/assets/partials/_base.page.scss +++ b/projects/komponentkartan/src/assets/partials/_base.page.scss @@ -1,6 +1,6 @@ -@import "_settings.colors.scss"; -@import "_settings.fonts.scss"; -@import "_settings.sizes.scss"; +@use "_settings.colors.scss" as *; +@use "_settings.fonts.scss" as *; +@use "_settings.sizes.scss" as *; *, *:before, diff --git a/projects/komponentkartan/src/assets/partials/_base.text.scss b/projects/komponentkartan/src/assets/partials/_base.text.scss index 0c11ef3c..a5861b16 100644 --- a/projects/komponentkartan/src/assets/partials/_base.text.scss +++ b/projects/komponentkartan/src/assets/partials/_base.text.scss @@ -1,6 +1,6 @@ -@import "_settings.colors.scss"; -@import "_settings.fonts.scss"; -@import "_settings.sizes.scss"; +@use "_settings.colors.scss" as *; +@use "_settings.fonts.scss" as *; +@use "_settings.sizes.scss" as *; header, p, diff --git a/projects/komponentkartan/src/assets/partials/_base.themes.scss b/projects/komponentkartan/src/assets/partials/_base.themes.scss index 4f53782f..f64f52d9 100644 --- a/projects/komponentkartan/src/assets/partials/_base.themes.scss +++ b/projects/komponentkartan/src/assets/partials/_base.themes.scss @@ -11,6 +11,7 @@ * .background-color--secondary * With themes for all defined colors. **********************************************************************************/ +@use './_settings.colors' as *; @mixin theme($property) { .#{$property}--primary { diff --git a/projects/komponentkartan/src/assets/partials/_base.themify.scss b/projects/komponentkartan/src/assets/partials/_base.themify.scss index e6fed42a..29c3c2c6 100644 --- a/projects/komponentkartan/src/assets/partials/_base.themify.scss +++ b/projects/komponentkartan/src/assets/partials/_base.themify.scss @@ -1,4 +1,6 @@ - @import "_objects.colors.scss"; + @use "_objects.colors.scss" as *; + @use "_settings.colors.scss" as *; + @use "sass:map"; $theme-map: null; $themes: ( @@ -30,7 +32,7 @@ $themes: ( ); @function themed($key) { - @return map-get($theme-map, $key); + @return map.get($theme-map, $key); } @@ -40,8 +42,8 @@ $themes: ( .theme--#{$theme} & { $theme-map: () !global; @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); - $theme-map: map-merge($theme-map, ($key: $value)) !global; + $value: map.get(map.get($themes, $theme), '#{$key}'); + $theme-map: map.merge($theme-map, ($key: $value)) !global; } @content; diff --git a/projects/komponentkartan/src/assets/partials/_objects.colors.scss b/projects/komponentkartan/src/assets/partials/_objects.colors.scss index 1b5d4f8c..1026a4a6 100644 --- a/projects/komponentkartan/src/assets/partials/_objects.colors.scss +++ b/projects/komponentkartan/src/assets/partials/_objects.colors.scss @@ -1,3 +1,5 @@ +@use "_settings.colors.scss" as *; + .blue--primary { background-color: $primary-color--blue; color: $text-color--light; diff --git a/projects/komponentkartan/src/assets/partials/_objects.layout.scss b/projects/komponentkartan/src/assets/partials/_objects.layout.scss index 59a7d839..c0619ca4 100644 --- a/projects/komponentkartan/src/assets/partials/_objects.layout.scss +++ b/projects/komponentkartan/src/assets/partials/_objects.layout.scss @@ -1,3 +1,7 @@ +@use './settings.sizes' as *; +@use './settings.fonts' as *; +@use './settings.colors' as *; + .row-layout { display: flex; flex-direction: row; @@ -133,9 +137,11 @@ >*:first-child { padding-bottom: 10px; } - display: flex; - flex-direction: column; - justify-content: flex-end; + & { + display: flex; + flex-direction: column; + justify-content: flex-end; + } } .control-without-heading { diff --git a/projects/komponentkartan/src/assets/partials/_objects.validation.scss b/projects/komponentkartan/src/assets/partials/_objects.validation.scss index 568daef1..909cdb2d 100644 --- a/projects/komponentkartan/src/assets/partials/_objects.validation.scss +++ b/projects/komponentkartan/src/assets/partials/_objects.validation.scss @@ -1,3 +1,5 @@ +@use './settings.colors' as *; + .validation { max-height: none; // padding: 1px; // för att den skall ha plats för ev. validering (och inte hoppa) diff --git a/projects/komponentkartan/src/assets/partials/_settings.colors.scss b/projects/komponentkartan/src/assets/partials/_settings.colors.scss index 260113d1..1573e98d 100644 --- a/projects/komponentkartan/src/assets/partials/_settings.colors.scss +++ b/projects/komponentkartan/src/assets/partials/_settings.colors.scss @@ -1,4 +1,5 @@ -//background +@use "sass:color"; +//background $background-color--default: #f0f0f0; $background-color--content: #ffffff; $background-color--disabled: #87939f; @@ -25,10 +26,10 @@ $border-color: #87939f; $border-color--light: #dfdfdf; //menu $menu-text-color: $text-color--default; -$menu-color--inactive: transparentize($background-color--default, 0.3); +$menu-color--inactive: color.scale($background-color--default, $alpha: -30%); //misc $focus-color: #2275D3; -$modal-background-color: transparentize($text-color--default, 0.35); +$modal-background-color: color.scale($text-color--default, $alpha: -35%); //themes $primary-color--blue: #006298; $secondary-color--blue: #4C91B7; diff --git a/projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss b/projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss index 2576954a..c1b254bc 100644 --- a/projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss +++ b/projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; .action-panel { position: relative; diff --git a/projects/komponentkartan/src/lib/controls/button/button.base.scss b/projects/komponentkartan/src/lib/controls/button/button.base.scss index 8ff96fc8..b7eb2235 100644 --- a/projects/komponentkartan/src/lib/controls/button/button.base.scss +++ b/projects/komponentkartan/src/lib/controls/button/button.base.scss @@ -1,7 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify" as *; +@use "sass:color"; .button__base { @include themify($themes) { @@ -25,7 +26,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/projects/komponentkartan/src/lib/controls/button/button.component.scss b/projects/komponentkartan/src/lib/controls/button/button.component.scss index c3040e94..2e1b0a95 100644 --- a/projects/komponentkartan/src/lib/controls/button/button.component.scss +++ b/projects/komponentkartan/src/lib/controls/button/button.component.scss @@ -1,8 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "./button.base.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "./button.base.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "sass:color"; @mixin button-enabling--secondary($name, $color) { @keyframes #{$name} { @@ -68,7 +69,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/projects/komponentkartan/src/lib/controls/card/card.component.scss b/projects/komponentkartan/src/lib/controls/card/card.component.scss index 4be36a9b..280b57c1 100644 --- a/projects/komponentkartan/src/lib/controls/card/card.component.scss +++ b/projects/komponentkartan/src/lib/controls/card/card.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; :host::ng-deep { vgr-card-section { diff --git a/projects/komponentkartan/src/lib/controls/checkbox/checkbox-group.component.scss b/projects/komponentkartan/src/lib/controls/checkbox/checkbox-group.component.scss index c2e47edc..68fe776b 100644 --- a/projects/komponentkartan/src/lib/controls/checkbox/checkbox-group.component.scss +++ b/projects/komponentkartan/src/lib/controls/checkbox/checkbox-group.component.scss @@ -1,9 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; :host { - + .checkbox-group-validation-error--active .checkbox-group-validation { padding-bottom: 8px; @@ -31,7 +31,7 @@ .checkbox-group { min-width: 120px; - width: max-content; + width: max-content; } } diff --git a/projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss b/projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss index 41f45101..e4c16a00 100644 --- a/projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss +++ b/projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss @@ -1,5 +1,4 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.colors.scss" as *; /* First, hide the default checkbox. It cannot be styled with CSS. * Instead, we will use the "label" that is associated with our textbox. diff --git a/projects/komponentkartan/src/lib/controls/close-button/close-button.component.scss b/projects/komponentkartan/src/lib/controls/close-button/close-button.component.scss index 00086aa7..eca3e0df 100644 --- a/projects/komponentkartan/src/lib/controls/close-button/close-button.component.scss +++ b/projects/komponentkartan/src/lib/controls/close-button/close-button.component.scss @@ -1,6 +1,8 @@ -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../button/button.base.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "sass:color"; :host::ng-deep { .close-button { @@ -26,7 +28,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/projects/komponentkartan/src/lib/controls/combobox/combobox.component.scss b/projects/komponentkartan/src/lib/controls/combobox/combobox.component.scss index e4534432..adead72e 100644 --- a/projects/komponentkartan/src/lib/controls/combobox/combobox.component.scss +++ b/projects/komponentkartan/src/lib/controls/combobox/combobox.component.scss @@ -1,8 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify" as *; +@use "sass:map"; // @include theme(background-color); // @include theme(border-left-color); @@ -108,7 +109,7 @@ transition: all 0.6s linear; .combobox__header__button__icon { - background: transparent map-get($imagesBase64, 'bg-image-icon-chevron') center no-repeat; + background: transparent map.get($imagesBase64, 'bg-image-icon-chevron') center no-repeat; background-size: 40%; width: 36px; height: 30px; @@ -137,7 +138,7 @@ cursor: default; &::before { - background: transparent map-get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; + background: transparent map.get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; width: 16px; height: 21px; content: ""; diff --git a/projects/komponentkartan/src/lib/controls/datepicker/datepicker.component.scss b/projects/komponentkartan/src/lib/controls/datepicker/datepicker.component.scss index 71219c78..cc8b42a2 100644 --- a/projects/komponentkartan/src/lib/controls/datepicker/datepicker.component.scss +++ b/projects/komponentkartan/src/lib/controls/datepicker/datepicker.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { diff --git a/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.scss b/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.scss index 78e41f56..e46e0b3a 100644 --- a/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.scss +++ b/projects/komponentkartan/src/lib/controls/dropdown-select/dropdown-select.component.scss @@ -1,8 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify" as *; +@use "sass:map"; // @include theme(background-color); // @include theme(border-left-color); @@ -143,7 +144,7 @@ transition: all 0.6s linear; .dropdown-select__header__button__icon { - background: transparent map-get($imagesBase64, 'bg-image-icon-chevron') center no-repeat; + background: transparent map.get($imagesBase64, 'bg-image-icon-chevron') center no-repeat; background-size: 40%; width: 36px; height: 30px; @@ -190,7 +191,7 @@ &::before { // @extend .bg-image-menu-arrow; - background: transparent map-get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; + background: transparent map.get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; width: 16px; height: 21px; content: ""; diff --git a/projects/komponentkartan/src/lib/controls/editable-table/editable-table.component.scss b/projects/komponentkartan/src/lib/controls/editable-table/editable-table.component.scss index a266e63f..cc79e87f 100644 --- a/projects/komponentkartan/src/lib/controls/editable-table/editable-table.component.scss +++ b/projects/komponentkartan/src/lib/controls/editable-table/editable-table.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify" as *; :host::ng-deep { .scroll-container { @@ -147,7 +147,7 @@ .list-wrapper { border-collapse: collapse; display: table; - width: 100%; + width: 100%; margin-top: 10px; } diff --git a/projects/komponentkartan/src/lib/controls/expandableDiv/expandableDiv.component.scss b/projects/komponentkartan/src/lib/controls/expandableDiv/expandableDiv.component.scss index f0f69ae7..20fbf2fe 100644 --- a/projects/komponentkartan/src/lib/controls/expandableDiv/expandableDiv.component.scss +++ b/projects/komponentkartan/src/lib/controls/expandableDiv/expandableDiv.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; .expandable-div { position: relative; diff --git a/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag-group.component.scss b/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag-group.component.scss index fa5e6dee..29db11f9 100644 --- a/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag-group.component.scss +++ b/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag-group.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../button/button.base.scss" as *; :host::ng-deep { $filter-tag-height--medium: 28px; diff --git a/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag.component.scss b/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag.component.scss index f2ec8d72..619c6b8c 100644 --- a/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag.component.scss +++ b/projects/komponentkartan/src/lib/controls/filter-tag/filter-tag.component.scss @@ -1,7 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify" as *; +@use "../button/button.base.scss" as *; +@use "sass:color"; :host::ng-deep { $filter-tag-height--medium: 28px; @@ -31,7 +33,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/projects/komponentkartan/src/lib/controls/grid/grid.component.scss b/projects/komponentkartan/src/lib/controls/grid/grid.component.scss index ad0cdd68..eacfd0cd 100644 --- a/projects/komponentkartan/src/lib/controls/grid/grid.component.scss +++ b/projects/komponentkartan/src/lib/controls/grid/grid.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify" as *; :host { max-width: 1100px; diff --git a/projects/komponentkartan/src/lib/controls/header/header.component.scss b/projects/komponentkartan/src/lib/controls/header/header.component.scss index 3e79d0e4..38079287 100644 --- a/projects/komponentkartan/src/lib/controls/header/header.component.scss +++ b/projects/komponentkartan/src/lib/controls/header/header.component.scss @@ -1,7 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; -@import "../../../assets/partials/objects.images"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "sass:map"; /** * Headern innehåller VGR "vågen" som transparent bild. Det enda som krävs * @@ -26,13 +27,13 @@ padding-left: 16px; @include themify($themes) { background-color: themed('primaryColor'); - background-image: map-get($imagesBase64, 'bg-image-vgr-header'); + background-image: map.get($imagesBase64, 'bg-image-vgr-header'); border-color: themed('secondaryColor'); } transition: background-color ease-in 0.3s; .theme--pinkie & { - background-image: map-get($imagesBase64, 'bg-image-pinkie-header'); + background-image: map.get($imagesBase64, 'bg-image-pinkie-header'); background-position: right center; } @@ -42,7 +43,7 @@ background-image: none; } .header__vgr-logo { - background-image: map-get($imagesBase64, 'bg-image-vgr-logo'); + background-image: map.get($imagesBase64, 'bg-image-vgr-logo'); width: 236px; height: 48px; background-repeat: no-repeat; diff --git a/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss b/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss index ff70e338..6a38c247 100644 --- a/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss +++ b/projects/komponentkartan/src/lib/controls/headerMenu/headerMenu.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; -@import "../../../assets/partials/objects.images"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "../../../assets/partials/objects.images" as *; /* The small arrow indicating that there is a drop down menu below */ :host::ng-deep { diff --git a/projects/komponentkartan/src/lib/controls/icon/icon.component.scss b/projects/komponentkartan/src/lib/controls/icon/icon.component.scss index 1a023f91..a0255435 100644 --- a/projects/komponentkartan/src/lib/controls/icon/icon.component.scss +++ b/projects/komponentkartan/src/lib/controls/icon/icon.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { .icon { diff --git a/projects/komponentkartan/src/lib/controls/input/input.component.scss b/projects/komponentkartan/src/lib/controls/input/input.component.scss index 97c96a3c..69bce176 100644 --- a/projects/komponentkartan/src/lib/controls/input/input.component.scss +++ b/projects/komponentkartan/src/lib/controls/input/input.component.scss @@ -1,6 +1,5 @@ -@import "../../../assets/partials/settings.colors"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/_settings.sizes.scss"; +@use "../../../assets/partials/settings.colors" as *; +@use "../../../assets/partials/_settings.sizes" as *; .inputwrapper { border: 1px solid #151515; diff --git a/projects/komponentkartan/src/lib/controls/lock-button/lock-button.component.scss b/projects/komponentkartan/src/lib/controls/lock-button/lock-button.component.scss index b8684a59..1d859926 100644 --- a/projects/komponentkartan/src/lib/controls/lock-button/lock-button.component.scss +++ b/projects/komponentkartan/src/lib/controls/lock-button/lock-button.component.scss @@ -1,6 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify" as *; +@use "../button/button.base.scss" as *; +@use "sass:color"; :host::ng-deep { .lock-button { @@ -26,7 +28,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/projects/komponentkartan/src/lib/controls/menu/menu.component.scss b/projects/komponentkartan/src/lib/controls/menu/menu.component.scss index b59c85ed..27b8a07b 100644 --- a/projects/komponentkartan/src/lib/controls/menu/menu.component.scss +++ b/projects/komponentkartan/src/lib/controls/menu/menu.component.scss @@ -1,8 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify"; -@import "../../../assets/partials/objects.images"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify" as *; +@use "../../../assets/partials/objects.images" as *; :host::ng-deep { .menu__header { diff --git a/projects/komponentkartan/src/lib/controls/menu/sidebar-menu.component.scss b/projects/komponentkartan/src/lib/controls/menu/sidebar-menu.component.scss index 210fe50c..2994a89a 100644 --- a/projects/komponentkartan/src/lib/controls/menu/sidebar-menu.component.scss +++ b/projects/komponentkartan/src/lib/controls/menu/sidebar-menu.component.scss @@ -1,13 +1,11 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; ::ng-deep { .sidebar-menu { position: fixed; z-index: $layer-three; top: $header-height; - // height: calc(100vh - #{$header-height}) !important; // #{$header-height} width: $nav-width--small; background: white; border-right: solid 1px $gray-primary; diff --git a/projects/komponentkartan/src/lib/controls/modal/modal.component.scss b/projects/komponentkartan/src/lib/controls/modal/modal.component.scss index 60db6574..791592fc 100644 --- a/projects/komponentkartan/src/lib/controls/modal/modal.component.scss +++ b/projects/komponentkartan/src/lib/controls/modal/modal.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; :host::ng-deep { .modal { diff --git a/projects/komponentkartan/src/lib/controls/notification/notification.component.scss b/projects/komponentkartan/src/lib/controls/notification/notification.component.scss index c127a387..57ac05de 100644 --- a/projects/komponentkartan/src/lib/controls/notification/notification.component.scss +++ b/projects/komponentkartan/src/lib/controls/notification/notification.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host { display: flex; diff --git a/projects/komponentkartan/src/lib/controls/page-block/page-block.component.scss b/projects/komponentkartan/src/lib/controls/page-block/page-block.component.scss index afc41609..f6d34800 100644 --- a/projects/komponentkartan/src/lib/controls/page-block/page-block.component.scss +++ b/projects/komponentkartan/src/lib/controls/page-block/page-block.component.scss @@ -1,4 +1,4 @@ -@import "../../../assets/partials/_settings.sizes.scss"; +@use "../../../assets/partials/settings.sizes" as *; :host::ng-deep { .page-block { diff --git a/projects/komponentkartan/src/lib/controls/page-header/page-header.component.scss b/projects/komponentkartan/src/lib/controls/page-header/page-header.component.scss index ae9c84ac..a3ee50c1 100644 --- a/projects/komponentkartan/src/lib/controls/page-header/page-header.component.scss +++ b/projects/komponentkartan/src/lib/controls/page-header/page-header.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; :host::ng-deep { .page-header { @@ -42,7 +42,7 @@ - @media screen and (max-width: $desktop-width--small - 1px) { + @media screen and (max-width: ($desktop-width--small - 1px)) { .page-header { position: relative; top: 0; diff --git a/projects/komponentkartan/src/lib/controls/page/page.component.scss b/projects/komponentkartan/src/lib/controls/page/page.component.scss index f8c1f11c..da3cda65 100644 --- a/projects/komponentkartan/src/lib/controls/page/page.component.scss +++ b/projects/komponentkartan/src/lib/controls/page/page.component.scss @@ -1,4 +1,4 @@ -@import "../../../assets/partials/_settings.sizes.scss"; +@use "../../../assets/partials/settings.sizes" as *; :host::ng-deep { .page { diff --git a/projects/komponentkartan/src/lib/controls/pagination/pagination.component.scss b/projects/komponentkartan/src/lib/controls/pagination/pagination.component.scss index 40c987d3..2a54332d 100644 --- a/projects/komponentkartan/src/lib/controls/pagination/pagination.component.scss +++ b/projects/komponentkartan/src/lib/controls/pagination/pagination.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { .pagination { diff --git a/projects/komponentkartan/src/lib/controls/panel/panel.component.scss b/projects/komponentkartan/src/lib/controls/panel/panel.component.scss index 68992f63..d8f418a5 100644 --- a/projects/komponentkartan/src/lib/controls/panel/panel.component.scss +++ b/projects/komponentkartan/src/lib/controls/panel/panel.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host { &.panel-container { diff --git a/projects/komponentkartan/src/lib/controls/radioGroup/radioGroup.component.scss b/projects/komponentkartan/src/lib/controls/radioGroup/radioGroup.component.scss index f5f6dc10..8b9c66b2 100644 --- a/projects/komponentkartan/src/lib/controls/radioGroup/radioGroup.component.scss +++ b/projects/komponentkartan/src/lib/controls/radioGroup/radioGroup.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; :host { &.radio-group { diff --git a/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-group.component.scss b/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-group.component.scss index 9ae6dc99..fb09886c 100644 --- a/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-group.component.scss +++ b/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-group.component.scss @@ -1,6 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; .radiobutton-group { &-validation { diff --git a/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-item.component.scss b/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-item.component.scss index bc041fdf..9b4f186f 100644 --- a/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-item.component.scss +++ b/projects/komponentkartan/src/lib/controls/radiobutton-group/radiobutton-item.component.scss @@ -1,5 +1,5 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; :host { diff --git a/projects/komponentkartan/src/lib/controls/ring-with-text/ring-with-text.component.scss b/projects/komponentkartan/src/lib/controls/ring-with-text/ring-with-text.component.scss index cc144ec2..818541c7 100644 --- a/projects/komponentkartan/src/lib/controls/ring-with-text/ring-with-text.component.scss +++ b/projects/komponentkartan/src/lib/controls/ring-with-text/ring-with-text.component.scss @@ -1,4 +1,4 @@ -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.fonts.scss" as *; .ring-with-text { display: inline-block; diff --git a/projects/komponentkartan/src/lib/controls/scroll-to-top/scroll-to-top.component.scss b/projects/komponentkartan/src/lib/controls/scroll-to-top/scroll-to-top.component.scss index 10c070f3..75b184da 100644 --- a/projects/komponentkartan/src/lib/controls/scroll-to-top/scroll-to-top.component.scss +++ b/projects/komponentkartan/src/lib/controls/scroll-to-top/scroll-to-top.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify" as *; :host::ng-deep { .back-to-top { diff --git a/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.scss b/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.scss index 85c41ecd..6f7e71c8 100644 --- a/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.scss +++ b/projects/komponentkartan/src/lib/controls/scrollbar/scrollbar.component.scss @@ -1,4 +1,4 @@ -@import "../../../assets/partials/_settings.sizes.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; :host::ng-deep { .scroll-container { diff --git a/projects/komponentkartan/src/lib/controls/search-result/search-result.component.scss b/projects/komponentkartan/src/lib/controls/search-result/search-result.component.scss index a37a7ff8..2e63af13 100644 --- a/projects/komponentkartan/src/lib/controls/search-result/search-result.component.scss +++ b/projects/komponentkartan/src/lib/controls/search-result/search-result.component.scss @@ -1,8 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "sass:map"; ::ng-deep { .search-result-wrapper { @@ -62,7 +63,7 @@ cursor: default; &:before { // @extend .bg-image-menu-arrow; - background: transparent map-get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; + background: transparent map.get($imagesBase64, 'bg-image-menu-arrow') center no-repeat; width: 16px; height: 21px; content: ""; diff --git a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss index e4c26130..ee0f8e3d 100644 --- a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss +++ b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.scss @@ -1,8 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/objects.images"; -@import "../../../assets/partials/base.themify"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/objects.images" as *; +@use "../../../assets/partials/base.themify" as *; :host::ng-deep { outline: 0; @@ -26,7 +26,9 @@ background: themed('primaryColorDimmed') !important; border-left-color: themed('primaryColor') !important; } - border-left: 4px solid; + & { + border-left: 4px solid; + } } &.focused { @@ -53,7 +55,9 @@ background: themed('primaryColorDimmed') !important; border-left-color: themed('primaryColor') !important; } - border-left: 4px solid; + & { + border-left: 4px solid; + } } &.focused { @@ -96,7 +100,9 @@ background: themed('primaryColorDimmed') !important; border-left-color: themed('primaryColor') !important; } - border-left: 4px solid; + & { + border-left: 4px solid; + } } } } @@ -112,7 +118,9 @@ background: themed('primaryColorDimmed') !important; border-left-color: themed('primaryColor') !important; } - border-left: 4px solid; + & { + border-left: 4px solid; + } } } } diff --git a/projects/komponentkartan/src/lib/controls/tab-button/tab-button-group.component.scss b/projects/komponentkartan/src/lib/controls/tab-button/tab-button-group.component.scss index 000172d7..04ce63e6 100644 --- a/projects/komponentkartan/src/lib/controls/tab-button/tab-button-group.component.scss +++ b/projects/komponentkartan/src/lib/controls/tab-button/tab-button-group.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { .tab-button-group { @@ -12,7 +12,7 @@ flex-basis: 0; } .tab-button { - + margin-bottom: 10px; &:focus:not(:active) { z-index: $layer-three; @@ -24,11 +24,11 @@ & vgr-panel-container { margin-top : -3px } - - + + } - - + + @media screen and (min-width: $desktop-width--medium) { .tab-button-group { margin-bottom: -15px; @@ -38,7 +38,7 @@ & vgr-panel-container { margin-top : -6px } - + } .tab-button { @@ -50,4 +50,4 @@ :host.centrera { display: flex; justify-content: center; -} \ No newline at end of file +} diff --git a/projects/komponentkartan/src/lib/controls/tab-button/tab-button.component.scss b/projects/komponentkartan/src/lib/controls/tab-button/tab-button.component.scss index c4bf8c9e..79424f7b 100644 --- a/projects/komponentkartan/src/lib/controls/tab-button/tab-button.component.scss +++ b/projects/komponentkartan/src/lib/controls/tab-button/tab-button.component.scss @@ -1,8 +1,8 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "../button/button.base.scss" as *; :host::ng-deep { $tab-button-height: 30px; diff --git a/projects/komponentkartan/src/lib/controls/table/table.component.scss b/projects/komponentkartan/src/lib/controls/table/table.component.scss index a0aed3ab..8747714a 100644 --- a/projects/komponentkartan/src/lib/controls/table/table.component.scss +++ b/projects/komponentkartan/src/lib/controls/table/table.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { .table-header { diff --git a/projects/komponentkartan/src/lib/controls/textarea/textarea.component.scss b/projects/komponentkartan/src/lib/controls/textarea/textarea.component.scss index b22faa18..9379c91b 100644 --- a/projects/komponentkartan/src/lib/controls/textarea/textarea.component.scss +++ b/projects/komponentkartan/src/lib/controls/textarea/textarea.component.scss @@ -1,6 +1,6 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; .textarea { @@ -14,10 +14,6 @@ resize: none; padding: 10px; transition: border-color 0.6s linear; - // &:focus { - // outline: $focus-outline-width solid $focus-color; - // outline-offset: 2px; - // } &::placeholder { color: $gray-dark; } diff --git a/projects/komponentkartan/src/lib/controls/titleValue/titleValue.component.scss b/projects/komponentkartan/src/lib/controls/titleValue/titleValue.component.scss index c821391e..9931c434 100644 --- a/projects/komponentkartan/src/lib/controls/titleValue/titleValue.component.scss +++ b/projects/komponentkartan/src/lib/controls/titleValue/titleValue.component.scss @@ -1,4 +1,4 @@ -@import "../../../assets/partials/_settings.sizes.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; :host { display: table; diff --git a/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button-group.component.scss b/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button-group.component.scss index e6637782..b1eef233 100644 --- a/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button-group.component.scss +++ b/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button-group.component.scss @@ -1,7 +1,7 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; :host::ng-deep { .toggle-button-group { diff --git a/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button.component.scss b/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button.component.scss index 2c59d97d..d9039511 100644 --- a/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button.component.scss +++ b/projects/komponentkartan/src/lib/controls/toggle-button/toggle-button.component.scss @@ -1,8 +1,9 @@ -@import "../../../assets/partials/_settings.sizes.scss"; -@import "../../../assets/partials/_settings.colors.scss"; -@import "../../../assets/partials/_settings.fonts.scss"; -@import "../../../assets/partials/base.themify.scss"; -@import "../button/button.base.scss"; +@use "../../../assets/partials/_settings.sizes.scss" as *; +@use "../../../assets/partials/_settings.colors.scss" as *; +@use "../../../assets/partials/_settings.fonts.scss" as *; +@use "../../../assets/partials/base.themify.scss" as *; +@use "../button/button.base.scss" as *; +@use "sass:color"; :host::ng-deep { $toggle-button-height: 30px; @@ -29,7 +30,7 @@ transform: scale(0.96); outline: 0; .button__focus-line { - background-color: transparentize($secondary-color--default, 0.4); + background-color: color.scale($secondary-color--default, $alpha: -40%); } } &:hover:not(.button--disabled), diff --git a/src/app/filter-tag/filter-tag.component.html b/src/app/filter-tag/filter-tag.component.html index 67beca39..89b034fd 100644 --- a/src/app/filter-tag/filter-tag.component.html +++ b/src/app/filter-tag/filter-tag.component.html @@ -22,7 +22,7 @@
- {{filter.text}} + {{filter.text}}