⚡ styling themes

README.md

@@ -24,14 +24,14 @@
 |                 | [uuid](https://www.npmjs.com/package/uuid)                     | handle client-side generation of uuids   |
 
 ---
-
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
 # Framadate
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
+A libre polling software make by contributors around the French association Framasoft.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

src/app/app.component.html

@@ -1,16 +1,14 @@
 <div id="big_container" [class]="themeClass">
+	<div class="container">
 		<app-header [isSidebarOpened]="isSidebarOpened" (toggleSidebarEE)="toggleSidebar($event)"></app-header>
-
 		<main>
 			<router-outlet></router-outlet>
-		<app-feedback></app-feedback>
 		</main>
-
 		<app-footer></app-footer>
 	</div>
+</div>
 
 <p-toast position="bottom-center"></p-toast>
-
 <p-sidebar [(visible)]="isSidebarOpened">
 	<app-navigation></app-navigation>
 </p-sidebar>

src/app/core/components/header/header.component.html

@@ -1,4 +1,4 @@
-<header>
+<header class="big-header">
 	<nav class="navbar" role="navigation" aria-label="main navigation">
 		<div class="navbar-brand">
 			<a class="navbar-item">

src/app/core/components/header/header.component.scss

@@ -0,0 +1,7 @@
+:host {
+	header {
+		.container {
+			padding: 0;
+		}
+	}
+}

src/app/core/services/theme.service.ts

@@ -6,7 +6,7 @@ import { Theme } from '../enums/theme.enum';
 	providedIn: 'root',
 })
 export class ThemeService {
-	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.RED);
+	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.LIGHT);
 	public readonly theme: Observable<Theme> = this._theme.asObservable();
 
 	public selectTheme(theme: Theme): void {

src/app/shared/components/page-not-found/page-not-found.component.scss

@@ -0,0 +1,5 @@
+:host {
+	.title {
+		color: #222;
+	}
+}

src/styles.scss

@@ -21,7 +21,7 @@
 // most general dom elements
 @import './styles/partials/global';
 @import './styles/partials/logo';
-// @import './styles/partials/navigation';
+ @import './styles/partials/navigation';
 
 // main content elements
 @import './styles/partials/main';

src/styles/partials/_forms.scss

@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+.ui-inputswitch{
+	margin-left: 1ch;
+	margin-right: 1ch;
+}
+
 .input-lg {
 	display: block;
 	width: 100%;
@@ -59,3 +64,7 @@ li {
 	display: block;
 	width: 100%;
 }
+
+button[type='submit']{
+	margin-top : 2em;
+}

src/styles/partials/_navigation.scss

@@ -18,14 +18,14 @@ nav {
 			display: none;
 		}
 
-		&.active {
+		&.active, &.is-active {
 			color: $white;
-			background: $primary;
+			background: $primary_color;
 		}
 	}
 }
-
 a {
+	color: $primary_color;
 	&,
 	&:hover {
 		text-decoration: none;
@@ -81,3 +81,10 @@ a {
 		padding-left: 1rem;
 	}
 }
+// material override
+.navbar{
+	margin-bottom: 0
+}
+a span.ui-steps-number{
+	padding: 0;
+}

src/styles/themes/_base.scss

@@ -1,14 +1,18 @@
 #big_container {
 	background: $primary;
 
-	.container {
-		padding: 1em;
+	main{
+		margin-bottom: 2em;
+		padding-bottom: 5em;
+		padding-top: 1em;
+		background: $white;
 	}
-
 	.big-header {
-		margin-bottom: 22px;
+		margin-bottom: 1em;
 
 		.container {
+			padding-bottom: 5em;
+
 			@extend .boxed-shadow;
 
 			.column:last-of-type {

src/styles/themes/_dark.scss

@@ -6,10 +6,6 @@ $theme-color-tertiary: #ccc;
 		background: #222;
 		color: #ddd;
 
-		.container {
-			padding: 1em;
-		}
-
 		main {
 			background: #444;
 		}
@@ -33,7 +29,7 @@ $theme-color-tertiary: #ccc;
 		}
 
 		select {
-			background: $theme-color-secondary;
+			background: $white;
 			border-color: $theme-color-secondary;
 
 			&:hover {
@@ -54,5 +50,25 @@ $theme-color-tertiary: #ccc;
 		.big-header {
 			margin-bottom: 22px;
 		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary !important;
+			color: $theme-color-tertiary !important;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary !important;
+		}
+
+		.navbar-link:not(.is-arrowless)::after{
+			border-color: $theme-color-primary;
+		}
+
+		body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+			background-color: $theme-color-primary;
+		}
 	}
 }

src/styles/themes/_light.scss

@@ -17,4 +17,16 @@
 			}
 		}
 	}
+
+	// material override
+	body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number{
+		color: $primary_color;
+	}
+	body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+		background-color: $primary_color;
+	}
+	.navbar-link:not(.is-arrowless)::after{
+		border-color: $primary_color;
+	}
+
 }

src/styles/themes/_red.scss

@@ -1,17 +1,36 @@
+$theme-color-primary: #850003;
+$theme-color-secondary: #501016;
+$theme-color-tertiary: #ffbca4;
+
 #big_container {
 	&.theme-hot-covid {
-		background: #ffbca4;
-		color: #501016;
+		background: $theme-color-tertiary;
+		color: $theme-color-secondary;
 
+		main{
+			background: $white;
+		}
 		h1::after {
-			background-color: #850003;
+			background-color: $theme-color-primary;
 		}
 
 		.btn--primary:focus,
 		.btn--primary:hover,
 		.btn--primary:active,
 		.btn--primary {
-			background-color: #850003 !important;
-		}
+			background-color: $theme-color-primary !important;
+		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary;
+			color: $theme-color-tertiary;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary;
+		}
+
 	}
 }