Skip to content

Linnea Samila / Moya

Go to a project
Commit 77f9a21b by rubiesonthesky Committed by Linnea Samila
Options

style rework

1 parent 2dd354b0
Inline Side-by-side
Showing with 52 additions and 43 deletions
code/moya-angular/src/app/app.component.scss
@import '../common';
#top-container { #top-container {
width: 100%; width: 100%;
display: flex; display: flex;
min-height: 100%; min-height: 100%;
} }
<<<<<<< HEAD
#left-menu { #left-menu {
} }
=======
>>>>>>> refactoring some scss
#contentarea { #contentarea {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
...@@ -24,7 +29,7 @@ ...@@ -24,7 +29,7 @@
#content { #content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: white; background-color: $color-bg-content;
margin-left: 30px; margin-left: 30px;
padding: 20px; padding: 20px;
flex-grow: 1; flex-grow: 1;
......
code/moya-angular/src/app/menu/left-menu/left-menu.component.scss
@import "../../scss/main.scss"; @import '../../../../common';
#leftNavTop { #leftNavTop {
min-height: 100vh; min-height: 100vh;
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
#leftNav { #leftNav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -22,7 +21,7 @@ ...@@ -22,7 +21,7 @@
} }
.leftNavItem { .leftNavItem {
font-family: Roboto; font-family: $font-menu;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
...@@ -32,23 +31,20 @@ ...@@ -32,23 +31,20 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
width: auto; width: auto;
}
.leftNavItem.active { &.:active {
background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%); background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
border-left: 3px solid #69B1A1; border-left: 3px solid #69B1A1;
text-decoration: none; text-decoration: none;
}
&:hover {
//background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
border-left: 3px solid #69B1A1;
text-decoration: none;
}
} }
.leftNavItem:hover {
//background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
border-left: 3px solid #69B1A1;
text-decoration: none;
}
.leftNavGroup { .leftNavGroup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -64,25 +60,21 @@ ...@@ -64,25 +60,21 @@
text-align: center; text-align: center;
padding-bottom: 12px; padding-bottom: 12px;
padding-top: 12px; padding-top: 12px;
} }
.adminMenu .leftNavGroup { .adminMenu .leftNavGroup {
color: $user-color; color: $user-color;
} }
.userMenu { .userMenu {
// background-color: $user-color; // background-color: $user-color;
background-image: linear-gradient(0deg, #485173 0%, #141721 100%); background-image: linear-gradient(0deg, #485173 0%, #141721 100%);
} }
.adminMenu { .adminMenu {
// background-color: $info-color; // background-color: $info-color;
background-image: linear-gradient(0deg, #fad9b1 0%, #de821f 100%); background-image: linear-gradient(0deg, #fad9b1 0%, #de821f 100%);
} }
.infoMenu{ .infoMenu{
// background-color: $admin-color; // background-color: $admin-color;
background-image: linear-gradient(0deg, #569f8e 0%, #11141b 100%); background-image: linear-gradient(0deg, #569f8e 0%, #11141b 100%);
} }
code/moya-angular/src/app/menu/top-menu/top-menu.component.scss
@import "../../scss/main.scss"; @import '../../../../common';
#topNav { #topNav {
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
display: flex; display: flex;
background-color: white; background-color: $color-bg-nav;
} }
.topNavItem { .topNavItem {
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
margin-right: 10px; margin-right: 10px;
font-family: Roboto; font-family: $font-nav;
font-size: 14px; font-size: 14px;
...@@ -22,10 +22,9 @@ ...@@ -22,10 +22,9 @@
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
} &:active {
opacity: 1.0;
.topNavItem.active { }
opacity: 1.0;
} }
#userTopNav { #userTopNav {
......
code/moya-angular/src/app/scss/main.scss deleted 100644 → 0
$user-color: #2b2c3a;
$admin-color: #de821f;
$info-color: #69B1A1;
code/moya-angular/src/common.scss 0 → 100644
// Add common styling used by components here. E.g. variables.
// Import this file to component styles.
@import 'mixins';
// Colors
$color-bg: #f2f3f9;
$color-bg-nav: #fff;
$color-bg-content: #fff;
// role colors
$user-color: #2b2c3a;
$admin-color: #de821f;
$info-color: #69b1a1;
// fonts
$font-text: Roboto, sans-serif;
$font-menu: Roboto, sans-serif;
//$font-title: ;
code/moya-angular/src/styles.scss
...@@ -3,13 +3,12 @@ ...@@ -3,13 +3,12 @@
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Roboto');
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';
body { @import 'common';
background-color: #f2f3f9;
}
html, body { html, body {
height: 100%; height: 100%;
} }
body {
background-color: $color-bg;
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!