Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrering scss #656

Merged
merged 6 commits into from
Jan 30, 2025
+253 −224
Merged

migrering scss #656

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f425a37
wip
aljlo2 Jan 20, 2025
8e577c8
småfix
aljlo2 Jan 21, 2025
2511b20
en hel del fixar
aljlo2 Jan 22, 2025
886e401
fixat det mesta
aljlo2 Jan 22, 2025
903dab3
liten buggfix
aljlo2 Jan 23, 2025
1a2ddef
wip
aljlo2 Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
småfix
@aljlo2
aljlo2 committed Jan 21, 2025
commit 8e577c8233f9a713fb0b53b5f76ab625ab6efaee
22 changes: 11 additions & 11 deletions projects/komponentkartan/src/lib/controls/action-panel/action-panel.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/_settings.colors.scss" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as *;
@use "../../../assets/partials/_settings.colors.scss" as *;

.action-panel {
position: relative;
background-color: white;
width: sizes.$content-width--small;
width: $content-width--small;
padding: 0;
overflow: hidden;
&.action-panel--open {
@@ -14,9 +14,9 @@
display: flex;
justify-content: space-between;
align-items: center;
padding-left: sizes.$margin--slim;
padding-right: sizes.$margin--slim;
border-bottom: 1px solid colors.$gray-primary;
padding-left: $margin--slim;
padding-right: $margin--slim;
border-bottom: 1px solid $gray-primary;
.action-panel__title {
font-weight: bold;
}
@@ -25,20 +25,20 @@
}
}
.action-panel__content {
padding: sizes.$margin--slim;
padding: $margin--slim;
}
}

@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.action-panel {
width: sizes.$content-width--medium;
width: $content-width--medium;
.action-panel__header {
padding-left: sizes.$margin--fat;
padding-left: $margin--fat;
padding-bottom: 0;
padding-right: 10px;
}
.action-panel__content {
padding: sizes.$margin--fat;
padding: $margin--fat;
}
}
}
14 changes: 7 additions & 7 deletions projects/komponentkartan/src/lib/controls/checkbox/checkbox.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "../../../assets/partials/_settings.colors.scss" as colors;
@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.
@@ -17,13 +17,13 @@

.checkbox-validation-error--active .checkbox-validation_status__message {
display: inline-block;
color: colors.$text-color--default;
color: $text-color--default;
margin-left: 4px;
margin-top: 4px;
}

.checkbox-validation-error--active .checkbox-validation_status__icon ::ng-deep .icon {
color: colors.$primary-color--error;
color: $primary-color--error;
}

.checkbox-validation-error--active .checkbox-validation_status__icon {
@@ -43,7 +43,7 @@
cursor: pointer;
}
.checkbox--disabled {
color: colors.$gray-primary;
color: $gray-primary;
transition: color 0.6s linear;
cursor: default;
}
@@ -75,19 +75,19 @@
}

&:disabled + .checkbox__control {
border: 2px solid colors.$gray-primary;
border: 2px solid $gray-primary;
background-color: white;
cursor: default;
}

&:checked:disabled + .checkbox__control svg {
background-color: colors.$gray-primary;
background-color: $gray-primary;
color: #fff;
cursor: default;
}

&:checked:disabled + .checkbox__control {
background-color: colors.$gray-primary;
background-color: $gray-primary;
cursor: default;
}
}
8 changes: 4 additions & 4 deletions projects/komponentkartan/src/lib/controls/expandableDiv/expandableDiv.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/_settings.colors.scss" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as *;
@use "../../../assets/partials/_settings.colors.scss" as *;

.expandable-div {
position: relative;
@@ -30,11 +30,11 @@

&:focus-visible {
outline: 0; // z-index: 999;
box-shadow: inset 0px 0px 0px sizes.$focus-outline-width colors.$focus-color;
box-shadow: inset 0px 0px 0px $focus-outline-width $focus-color;
}
}

.expandable-div-header:focus-visible {
outline: 0;
box-shadow: inset 0px 0px 0px sizes.$focus-outline-width colors.$focus-color;
box-shadow: inset 0px 0px 0px $focus-outline-width $focus-color;
}
14 changes: 7 additions & 7 deletions projects/komponentkartan/src/lib/controls/input/input.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "../../../assets/partials/settings.colors" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/settings.colors" as *;
@use "../../../assets/partials/_settings.sizes" as *;

.inputwrapper {
border: 1px solid #151515;
@@ -21,7 +21,7 @@
}
}
input::placeholder {
color: colors.$gray-dark;
color: $gray-dark;
}
div.prefix,
div.suffix {
@@ -59,12 +59,12 @@
}

.disabled_focus:focus-visible {
outline: sizes.$focus-outline-width solid colors.$focus-color!important;
outline: $focus-outline-width solid $focus-color!important;
}

.validation-error--editing {
.inputwrapper {
outline: sizes.$focus-outline-width solid colors.$focus-color!important;
outline: $focus-outline-width solid $focus-color!important;
}
}
.validation.readonly {
@@ -88,8 +88,8 @@
display: inline-block;
&.vgr-input--disabled {
.inputwrapper {
background-color: colors.$gray-dimmed;
border-color: colors.$gray-primary;
background-color: $gray-dimmed;
border-color: $gray-primary;
}
}
}
16 changes: 8 additions & 8 deletions projects/komponentkartan/src/lib/controls/menu/sidebar-menu.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/_settings.colors.scss" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as *;
@use "../../../assets/partials/_settings.colors.scss" as *;

::ng-deep {
.sidebar-menu {
position: fixed;
z-index: sizes.$layer-three;
top: sizes.$header-height;
width: sizes.$nav-width--small;
z-index: $layer-three;
top: $header-height;
width: $nav-width--small;
background: white;
border-right: solid 1px colors.$gray-primary;
border-right: solid 1px $gray-primary;

.ng-scroll-content {
height: 100%;
}

}

@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.sidebar-menu {
width: sizes.$nav-width--medium;
width: $nav-width--medium;
}
}
}
10 changes: 5 additions & 5 deletions projects/komponentkartan/src/lib/controls/modal/modal.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/_settings.colors.scss" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as *;
@use "../../../assets/partials/_settings.colors.scss" as *;

:host::ng-deep {
.modal {
display: none;
position: fixed;
z-index: sizes.$layer-modal;
z-index: $layer-modal;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: colors.$modal-background-color;
background-color: $modal-background-color;
.vgr-modal--open & {
display: flex;
}
@@ -48,7 +48,7 @@
}
}

@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.modal-content {
padding-top: 38px;
min-width: 500px;
14 changes: 7 additions & 7 deletions projects/komponentkartan/src/lib/controls/page-block/page-block.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/settings.sizes" as *;

:host::ng-deep {
.page-block {
position: relative;
padding: sizes.$margin--slim;
padding: $margin--slim;
background-color: white;
width: sizes.$content-width--small;
margin-bottom: sizes.$margin--slim;
width: $content-width--small;
margin-bottom: $margin--slim;
&.page-block--transparent {
background-color: transparent;
}
@@ -17,10 +17,10 @@
border-radius: 2px;
}

@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.page-block {
padding: sizes.$margin--fat;
width: sizes.$content-width--medium;
padding: $margin--fat;
width: $content-width--medium;
}
}
}
34 changes: 17 additions & 17 deletions projects/komponentkartan/src/lib/controls/page-header/page-header.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/_settings.colors.scss" as colors;
@use "../../../assets/partials/_settings.sizes.scss" as *;
@use "../../../assets/partials/_settings.colors.scss" as *;

:host::ng-deep {
.page-header {
position: fixed;
z-index: sizes.$layer-page-header;
top: sizes.$header-height;
// width: sizes.$content-width--small + 34px;
z-index: $layer-page-header;
top: $header-height;
// width: $content-width--small + 34px;
width: 100%;
padding-bottom: 10px;
background-color: colors.$background-color--default;
background-color: $background-color--default;
.page-header__block {
min-height: 52px;
width: calc(100vw - #{sizes.$nav-width--small});
min-width: calc(#{sizes.$desktop-width--small} - #{sizes.$nav-width--small});
padding: sizes.$margin--slim sizes.$margin--fat;
background-color: colors.$gray-ultradimmed;
width: calc(100vw - #{$nav-width--small});
min-width: calc(#{$desktop-width--small} - #{$nav-width--small});
padding: $margin--slim $margin--fat;
background-color: $gray-ultradimmed;
box-shadow: 0px 2px 8px #0000001A;
border-bottom: 2px solid colors.$gray-secondary;
border-bottom: 2px solid $gray-secondary;
.page-header__title {
float: right;
margin-left: 10px;
@@ -29,24 +29,24 @@
}


@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.page-header {
// width: sizes.$content-width--medium + 34px;
// width: $content-width--medium + 34px;
.page-header__block {
min-height: 52px;
width: calc(100vw - #{sizes.$nav-width--medium});
min-width: calc(#{sizes.$desktop-width--medium} - #{sizes.$nav-width--medium});
width: calc(100vw - #{$nav-width--medium});
min-width: calc(#{$desktop-width--medium} - #{$nav-width--medium});
}
}
}



@media screen and (max-width: (sizes.$desktop-width--small - 1px)) {
@media screen and (max-width: ($desktop-width--small - 1px)) {
.page-header {
position: relative;
top: 0;
z-index: sizes.$layer-one;
z-index: $layer-one;

}
}
16 changes: 8 additions & 8 deletions projects/komponentkartan/src/lib/controls/page/page.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
@use "../../../assets/partials/_settings.sizes.scss" as sizes;
@use "../../../assets/partials/settings.sizes" as *;

:host::ng-deep {
.page {
position: relative;
top: sizes.$header-height;
left: sizes.$nav-width--small;
width: sizes.$content-width--small + 48px;
top: $header-height;
left: $nav-width--small;
width: $content-width--small + 48px;
.page__page-body-container {
position: relative;
padding-left: sizes.$margin--x-fat;
padding-left: $margin--x-fat;
}
}

@media screen and (min-width: sizes.$desktop-width--medium) {
@media screen and (min-width: $desktop-width--medium) {
.page {
left: sizes.$nav-width--medium;
width: sizes.$content-width--medium + 44px;
left: $nav-width--medium;
width: $content-width--medium + 44px;
}
}
}
Loading