tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

⚡ styling themes

Browse Source
This commit is contained in:
tykayn 2020-06-07 13:52:14 +02:00
parent f00afc94db
commit 23c6b9400e
13 changed files with 108 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -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

16
src/app/app.component.html
View File

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

2
src/app/core/components/header/header.component.html
View File

@ -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">

7
src/app/core/components/header/header.component.scss
View File

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

2
src/app/core/services/theme.service.ts
View File

@ -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 {

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

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

2
src/styles.scss
View File

@ -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';

9
src/styles/partials/_forms.scss
View File

@ -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;
}

13
src/styles/partials/_navigation.scss
View File

@ -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;
}

12
src/styles/themes/_base.scss
View File

@ -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 {

26
src/styles/themes/_dark.scss
View File

@ -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;
}
}
}

12
src/styles/themes/_light.scss
View File

@ -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;
}
}

27
src/styles/themes/_red.scss
View File

@ -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;
}
}
}