arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added som basic functionality

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-17 10:58:55 +01:00
committed by Erik Tiekstra
parent dd743fd638
commit bf66859f06
20 changed files with 271 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/dafa-web/src/app/components/navigation/navigation.component.scss
View File

@@ -1,24 +1,22 @@
@import 'mixins/list';
@import 'variables/border-radius';
@import 'variables/breakpoints';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
$navigation-height: 2.5rem;
$navigation-height-large: 4rem;
@import 'variables/navigation';
.navigation {
background-color: white;
border-bottom: 1px solid $af__color-background-gray;
background-color: $af__color-primary;
border-bottom: 1px solid $af__color-background-dark-gray;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 $af__gutter-m;
height: $dafa__navigation-height;
@media (max-width: $af__breakpoint-s-below) {
flex-direction: column;
@media (min-width: $af__breakpoint-m) {
height: $dafa__navigation-height-large;
}
&__logo-wrapper {
@@ -28,23 +26,24 @@ $navigation-height-large: 4rem;
}
&__logo {
height: $navigation-height / 2;
height: $dafa__navigation-height / 2.5;
vertical-align: middle;
@media (min-width: $af__breakpoint-m) {
height: $navigation-height-large / 2;
height: $dafa__navigation-height-large / 2.5;
}
}
&__list {
@include dafa__reset-list;
display: flex;
height: 100%;
}
&__item {
display: flex;
align-items: center;
border-left: 1px solid $af__color-background-gray;
border-left: 1px solid $af__color-background-dark-gray;
&--no-link {
padding: 0 $af__gutter-m;
@@ -56,7 +55,7 @@ $navigation-height-large: 4rem;
}
&:last-child {
border-right: 1px solid $af__color-background-gray;
border-right: 1px solid $af__color-background-dark-gray;
}
}
@@ -68,20 +67,16 @@ $navigation-height-large: 4rem;
align-items: center;
justify-content: center;
font-size: $af__font-size-xs;
color: $af__color-text;
color: $af__color-text-light;
width: 7rem;
height: $navigation-height;
height: 100%;
font-weight: $af__font-weight-normal;
text-decoration: none;
@media (min-width: $af__breakpoint-m) {
height: $navigation-height-large;
}
}
&__link {
&:hover {
background-color: $af__color-background-gray;
background-color: $af__color-interactive;
}
&--active {
@@ -92,7 +87,7 @@ $navigation-height-large: 4rem;
bottom: 0;
left: 0;
height: 5px;
background-color: $af__color-primary;
background-color: $af__color-secondary;
}
}
}
@@ -100,17 +95,4 @@ $navigation-height-large: 4rem;
&__text {
margin-top: $af__gutter-xxs;
}
&__news {
display: flex;
gap: $af__gutter-xs;
padding: $af__gutter-xs $af__gutter-s;
background-color: $af__color-complementary-alt;
color: $af__color-text-light;
border-radius: $af__border-radius;
&:hover {
background-color: darken($af__color-complementary-alt, 10%);
}
}
}