mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
Feature/simplify scss
This commit is contained in:
ty kayn
parent
88fec2c0c6
commit
ba7a24708d
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@ image: weboaks/node-karma-protractor-chrome
|
||||
|
||||
stages:
|
||||
- test
|
||||
- e2e
|
||||
# - e2e
|
||||
|
||||
cache:
|
||||
paths:
|
||||
@ -13,17 +13,17 @@ test:
|
||||
script:
|
||||
- npm i
|
||||
- pkill Xvfb
|
||||
- npm run test
|
||||
- npm run test:ci
|
||||
artifacts:
|
||||
paths:
|
||||
- coverage/
|
||||
|
||||
e2e:
|
||||
stage: e2e
|
||||
script:
|
||||
- npm i
|
||||
- pkill Xvfb
|
||||
- npm run e2e
|
||||
#e2e:
|
||||
# stage: e2e
|
||||
# script:
|
||||
# - npm i
|
||||
# - pkill Xvfb
|
||||
# - npm run e2e
|
||||
|
||||
pages:
|
||||
stage: .post
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
"node_modules/font-awesome/css/font-awesome.css",
|
||||
"node_modules/primeng/resources/themes/nova-light/theme.css",
|
||||
"node_modules/primeng/resources/primeng.min.css",
|
||||
"src/styles.scss"
|
||||
"src/assets/scss/styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/marked/lib/marked.js",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,7 +1,11 @@
|
||||
import 'jest-preset-angular';
|
||||
// const { defaults } = require('jest-config');
|
||||
|
||||
//
|
||||
// module.exports = {
|
||||
// verbose: true,
|
||||
// collectCoverage: true,
|
||||
// collectCoverageFrom: ['src/**/*.ts'],
|
||||
// // collectCoverageFrom: ['src/**/*.ts'],
|
||||
// collectCoverageFrom: ['src/app/pages/admin/*.ts'],
|
||||
// };
|
||||
Error.stackTraceLimit = 2;
|
||||
|
||||
13
package.json
13
package.json
@ -11,7 +11,9 @@
|
||||
"bld:pkg": "npm run build && npm run package",
|
||||
"build:demo": "ng build --crossOrigin=anonymous --extractCss=true --progress=true --prod && npm run package",
|
||||
"build:demobliss": "ng build --crossOrigin=anonymous --extractCss=true --baseHref=https://framadate-api.cipherbliss.com --progress=true --prod && npm run package",
|
||||
"test": "ng test --watch=false",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:ci": "jest --runInBand",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
|
||||
@ -40,6 +42,7 @@
|
||||
"bulma": "^0.8.2",
|
||||
"chart.js": "^2.8.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jest-preset-angular": "^8.1.3",
|
||||
"karma-coverage": "^2.0.1",
|
||||
"karma-firefox-launcher": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
@ -66,7 +69,6 @@
|
||||
"@storybook/addon-notes": "^5.3.18",
|
||||
"@storybook/addons": "^5.3.18",
|
||||
"@storybook/angular": "^5.3.18",
|
||||
"@types/jasmine": "^3.5.10",
|
||||
"@types/jasminewd2": "~2.0.8",
|
||||
"@types/jest": "^25.2.1",
|
||||
"@types/node": "^13.11.1",
|
||||
@ -96,7 +98,10 @@
|
||||
"src/{app,environments,assets}/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.js": "eslint --cache --fix"
|
||||
]
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-preset-angular",
|
||||
"setupFilesAfterEnv": "./jest.config.js"
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,12 +15,11 @@
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="column is-one-quarter togglable-menu" *ngIf="config.menuVisible">
|
||||
<framadate-theme-selector></framadate-theme-selector>
|
||||
|
||||
<framadate-navigation *ngIf="config.menuVisible" [step]="step"></framadate-navigation>
|
||||
<framadate-navigation [step]="step"></framadate-navigation>
|
||||
<framadate-debugger *ngIf="isDevelopmentEnv"></framadate-debugger>
|
||||
<p-toast position="top-right"></p-toast>
|
||||
</div>
|
||||
<div class="column">
|
||||
<router-outlet></router-outlet>
|
||||
@ -28,4 +27,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<p-toast position="top-right"></p-toast>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@ export class DateUtilities {
|
||||
* @param d1
|
||||
* @param d2
|
||||
*/
|
||||
dayDiff(d1: Date, d2: Date): Number {
|
||||
dayDiff(d1: Date, d2: Date): number {
|
||||
return Number(d2.getTime() - d1.getTime() / 31536000000);
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ export class PollConfig {
|
||||
description: string = environment.production ? '' : 'ma description';
|
||||
myName: string = environment.production ? '' : 'mon pseudo';
|
||||
myComment: string = environment.production ? '' : 'wouah trop bien framadate!';
|
||||
isAdmin: boolean = !environment.production;
|
||||
isAdmin = !environment.production;
|
||||
myVoteStack: any;
|
||||
myTempVoteStack = 0;
|
||||
myEmail: string = environment.production ? '' : 'tktest@tktest.com';
|
||||
|
||||
@ -12,7 +12,7 @@ export class PollUtilities {
|
||||
*/
|
||||
makeUuid() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
const r = (Math.random() * 16) | 0,
|
||||
v = c == 'x' ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
@ -38,9 +38,9 @@ export class PollUtilities {
|
||||
str = str.toLowerCase();
|
||||
|
||||
// remove accents, swap ñ for n, etc
|
||||
var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
|
||||
var to = 'aaaaeeeeiiiioooouuuunc------';
|
||||
for (var i = 0, l = from.length; i < l; i++) {
|
||||
const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
|
||||
const to = 'aaaaeeeeiiiioooouuuunc------';
|
||||
for (let i = 0, l = from.length; i < l; i++) {
|
||||
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<div class="well debug">
|
||||
<strong>
|
||||
<h2 i18n>
|
||||
infos de debug - environement de Dev
|
||||
</h2>
|
||||
<span class="demo">
|
||||
{{ 'config.demo' | translate }}
|
||||
</span>
|
||||
</strong>
|
||||
<ul>
|
||||
<li>étape actuelle {{ config.step }} / {{ config.stepMax }}</li>
|
||||
<li>formulaire valide : {{ formIsValid }}</li>
|
||||
<li>type de formulaire: {{ config.pollType }}</li>
|
||||
</ul>
|
||||
<button class="btn btn--primary" i18n (click)="config.createPoll()">
|
||||
Envoyer le formulaire
|
||||
</button>
|
||||
<button class="btn btn--primary" i18n (click)="config.getPollById('1', 'example password')">
|
||||
get poll 1
|
||||
</button>
|
||||
<button class="btn btn--primary" i18n (click)="config.getMyPolls('tktest@tktest.com')">
|
||||
get my polls
|
||||
</button>
|
||||
<button class="btn btn--success" (click)="launchToast()">
|
||||
launch success toast
|
||||
</button>
|
||||
<a [routerLink]="'/vote/poll/id/3'" class="btn btn--success">
|
||||
See example of vote page
|
||||
</a>
|
||||
</div>
|
||||
<!--<div class="well debug">-->
|
||||
<!-- <strong>-->
|
||||
<!-- <h2 i18n>-->
|
||||
<!-- infos de debug - environement de Dev-->
|
||||
<!-- </h2>-->
|
||||
<!-- <span class="demo">-->
|
||||
<!-- {{ 'config.demo' | translate }}-->
|
||||
<!-- </span>-->
|
||||
<!-- </strong>-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li>étape actuelle {{ config.step }} / {{ config.stepMax }}</li>-->
|
||||
<!-- <li>formulaire valide : {{ formIsValid }}</li>-->
|
||||
<!-- <li>type de formulaire: {{ config.pollType }}</li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <button class="btn btn--primary" i18n (click)="config.createPoll()">-->
|
||||
<!-- Envoyer le formulaire-->
|
||||
<!-- </button>-->
|
||||
<!-- <button class="btn btn--primary" i18n (click)="config.getPollById('1', 'example password')">-->
|
||||
<!-- get poll 1-->
|
||||
<!-- </button>-->
|
||||
<!-- <button class="btn btn--primary" i18n (click)="config.getMyPolls('tktest@tktest.com')">-->
|
||||
<!-- get my polls-->
|
||||
<!-- </button>-->
|
||||
<!-- <button class="btn btn--success" (click)="launchToast()">-->
|
||||
<!-- launch success toast-->
|
||||
<!-- </button>-->
|
||||
<!-- <a [routerLink]="'/vote/poll/id/3'" class="btn btn--success">-->
|
||||
<!-- See example of vote page-->
|
||||
<!-- </a>-->
|
||||
<!--</div>-->
|
||||
|
||||
@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AdminComponent } from './admin.component';
|
||||
|
||||
describe('AdminComponent', () => {
|
||||
fdescribe('AdminComponent', () => {
|
||||
let component: AdminComponent;
|
||||
let fixture: ComponentFixture<AdminComponent>;
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import { ConfigService } from '../../services/config.service';
|
||||
styleUrls: ['./create-or-retrieve.component.scss'],
|
||||
})
|
||||
export class CreateOrRetrieveComponent extends BaseComponent implements OnInit {
|
||||
loadedMyPolls: boolean = false;
|
||||
loadedMyPolls = false;
|
||||
|
||||
constructor(public config: ConfigService) {
|
||||
super(config);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
:host {
|
||||
.several-times {
|
||||
padding-left: 1em;
|
||||
}
|
||||
@ -7,15 +8,36 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.dates-list {
|
||||
.btn--primary {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.date-choice {
|
||||
input {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
:host {
|
||||
input,
|
||||
button {
|
||||
+ button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.identical-dates {
|
||||
label {
|
||||
width: 3ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,10 +12,10 @@ import { DateUtilities } from '../../config/DateUtilities';
|
||||
styleUrls: ['./dates.component.scss'],
|
||||
})
|
||||
export class DatesComponent extends BaseComponent implements OnInit {
|
||||
showDateInterval: boolean = false;
|
||||
showDateInterval = false;
|
||||
startDateInterval: any;
|
||||
intervalDays: any;
|
||||
intervalDaysDefault: number = 7;
|
||||
intervalDaysDefault = 7;
|
||||
endDateInterval: any;
|
||||
|
||||
constructor(
|
||||
@ -39,7 +39,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
* set the interval options
|
||||
*/
|
||||
ngOnInit() {
|
||||
let dateCurrent = new Date();
|
||||
const dateCurrent = new Date();
|
||||
const dateJson = dateCurrent.toISOString();
|
||||
this.startDateInterval = dateJson.substring(0, 10);
|
||||
this.endDateInterval = this.dateUtilities
|
||||
@ -54,7 +54,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
date_object: new Date(),
|
||||
timeList: [],
|
||||
});
|
||||
let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
|
||||
const selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
|
||||
this.cd.detectChanges();
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
@ -89,7 +89,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
*/
|
||||
addTimeToDate(config: any, id: number) {
|
||||
config.timeList.push({ literal: '' });
|
||||
let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
|
||||
const selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
|
||||
this.cd.detectChanges();
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
@ -115,7 +115,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
* add all the dates between the start and end dates in the interval section
|
||||
*/
|
||||
addIntervalOfDates() {
|
||||
let newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
|
||||
const newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
|
||||
|
||||
const converted = [];
|
||||
newIntervalArray.forEach((element) => {
|
||||
|
||||
@ -42,20 +42,12 @@
|
||||
<h3 class="margin-top-x6 margin-btm-x3">
|
||||
Exporter/Imprimer
|
||||
</h3>
|
||||
<input
|
||||
type="submit"
|
||||
name="export"
|
||||
class="margin-btm-x3 btn btn--primary btn--outline"
|
||||
value="Exporter en .csv"
|
||||
(click)="config.exportCSV()"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
name="copy-link"
|
||||
class="btn btn--primary btn--outline"
|
||||
value="Imprimer le sondage"
|
||||
(click)="config.print()"
|
||||
/>
|
||||
<button class="export export-csv" (click)="config.exportCSV()">
|
||||
Exporter en .csv
|
||||
</button>
|
||||
<button class="export export-print" (click)="config.print()">
|
||||
Imprimer le sondage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
></framadate-voting-choice>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bar-votestack">
|
||||
<button
|
||||
class="btn btn-block submit-votestack"
|
||||
(click)="config.addVote()"
|
||||
@ -24,3 +26,4 @@
|
||||
>
|
||||
<i class="fa fa-pencil"></i> Mettre à jour
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
.submit-votestack {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
@ -9,7 +9,7 @@ import { ConfirmationService, MessageService } from 'primeng';
|
||||
import { Router } from '@angular/router';
|
||||
import { ConfigService } from '../../../services/config.service';
|
||||
|
||||
const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
|
||||
const routerSpy = jest.fn({ navigateByUrl: jest.fn() });
|
||||
|
||||
describe('CommentsListComponent', () => {
|
||||
let component: CommentsListComponent;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<!-- add .choicebox--active to most voted -->
|
||||
<button
|
||||
*ngIf="showChangeChoicebutton"
|
||||
class="btn btn--primary"
|
||||
class="btn btn--primary manage"
|
||||
(click)="choice.simpleAnswer = !choice.simpleAnswer"
|
||||
>
|
||||
<i class="fa fa-gears"></i>
|
||||
|
||||
@ -24,8 +24,7 @@ $breakpoint-responsive: 640px; // à définir
|
||||
|
||||
.choicebox {
|
||||
position: relative;
|
||||
min-width: 32rem;
|
||||
min-height: 16rem;
|
||||
min-height: 10rem;
|
||||
display: block;
|
||||
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
|
||||
border-left: $box-border-width solid transparent;
|
||||
|
||||
@ -10,7 +10,7 @@ import { VotingChoiceComponent } from './voting-choice.component';
|
||||
import { mockChoice } from '../../../config/mocks/choice';
|
||||
import { mockPoll3 } from '../../../config/mocks/mock-poll3';
|
||||
|
||||
const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
|
||||
const routerSpy = jest.fn({ navigateByUrl: jest.fn() });
|
||||
|
||||
describe('VotingChoiceComponent', () => {
|
||||
let component: VotingChoiceComponent;
|
||||
|
||||
@ -30,8 +30,8 @@ export class VotingChoiceComponent {
|
||||
@Input() public choices_count: any;
|
||||
@Input() public choice_id: any;
|
||||
@Input() public poll: any;
|
||||
@Input() public simpleAnswer: boolean = true;
|
||||
@Input() public pollIsSpecialDate: boolean = false;
|
||||
@Input() public simpleAnswer = true;
|
||||
@Input() public pollIsSpecialDate = false;
|
||||
|
||||
constructor(private el: ElementRef, private config: ConfigService) {
|
||||
if (this.poll && this.poll.allowedAnswers) {
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
{{ preferred }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table is-striped is-bordered is-hoverable">
|
||||
<thead>
|
||||
<tr *ngIf="config.currentPoll.choices && config.currentPoll.choices_count">
|
||||
@ -107,6 +108,8 @@
|
||||
<!-- bottom line shows each answer details-->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button
|
||||
*ngIf="config.isAdmin"
|
||||
type="button"
|
||||
|
||||
@ -8,8 +8,8 @@ import { mockPoll3 } from '../../../config/mocks/mock-poll3';
|
||||
styleUrls: ['./voting-summary.component.scss'],
|
||||
})
|
||||
export class VotingSummaryComponent implements OnInit {
|
||||
preferred: string = 'rien';
|
||||
severalPreferred: boolean = false;
|
||||
preferred = 'rien';
|
||||
severalPreferred = false;
|
||||
|
||||
@Input() pollconfig = mockPoll3;
|
||||
|
||||
@ -27,10 +27,10 @@ export class VotingSummaryComponent implements OnInit {
|
||||
* find the most "yes"
|
||||
*/
|
||||
computePreferred() {
|
||||
let keys = Object.keys(this.pollconfig.choices_count.counts);
|
||||
const keys = Object.keys(this.pollconfig.choices_count.counts);
|
||||
this.preferred = '';
|
||||
this.severalPreferred = false;
|
||||
let maxScore = this.pollconfig.choices_count.maxScore;
|
||||
const maxScore = this.pollconfig.choices_count.maxScore;
|
||||
|
||||
keys.forEach((item) => {
|
||||
if (maxScore === this.pollconfig.choices_count.counts[item].score) {
|
||||
|
||||
@ -12,14 +12,14 @@ import { mockPoll3 } from '../config/mocks/mock-poll3';
|
||||
styleUrls: ['./poll-graphic.component.scss'],
|
||||
})
|
||||
export class PollGraphicComponent implements OnInit {
|
||||
isColorblind: boolean = false;
|
||||
isColorblind = false;
|
||||
pollConfigRetrieved: any = mockPoll3;
|
||||
graphicConfig: any = mockGraphConfig;
|
||||
preferred: any = 'rien';
|
||||
yesList: number[] = [];
|
||||
maybeList: number[] = [];
|
||||
noList: number[] = [];
|
||||
nbPoll: number = 0;
|
||||
nbPoll = 0;
|
||||
dateList: string[] = [];
|
||||
|
||||
constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {}
|
||||
|
||||
@ -138,7 +138,7 @@ export class ConfigService extends PollConfig {
|
||||
return jsonConfig;
|
||||
}
|
||||
|
||||
checkIfSlugIsUniqueInDatabase(slug: string = '') {
|
||||
checkIfSlugIsUniqueInDatabase(slug = '') {
|
||||
this.customUrlIsUnique = null;
|
||||
if (!slug) {
|
||||
slug = this.utils.makeSlug(this);
|
||||
@ -645,7 +645,7 @@ export class ConfigService extends PollConfig {
|
||||
}
|
||||
|
||||
download(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
const element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<a [routerLink]="'home'" class="home_link" aria-roledescription="home">
|
||||
<div class="home_link">
|
||||
<a [routerLink]="'home'" aria-roledescription="home">
|
||||
<h1>
|
||||
<span class="logo_first">Frama</span>
|
||||
<span class="logo_second">date</span>
|
||||
(démo)
|
||||
</h1>
|
||||
</a>
|
||||
<div class="legend">
|
||||
proposé par
|
||||
<span class="legend_first">Frama</span>
|
||||
<span class="legend_second">soft</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,50 +1,44 @@
|
||||
<nav class="choices">
|
||||
<a [routerLink]="'home'" [ngClass]="{ active: step === 'home' }" i18n>
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
<a [routerLink]="'/step/creation'" [ngClass]="{ active: step == 'creation' }" i18n>
|
||||
<a [routerLink]="'home'" [ngClass]="{ active: step === 'home' }"> <i class="fa fa-home"></i> Accueil </a>
|
||||
<a [routerLink]="'/step/creation'" [ngClass]="{ active: step == 'creation' }">
|
||||
Création
|
||||
</a>
|
||||
<a [routerLink]="'/step/date'" [ngClass]="{ active: step == 'date' }" i18n>
|
||||
<a [routerLink]="'/step/date'" [ngClass]="{ active: step == 'date' }">
|
||||
Les Dates
|
||||
</a>
|
||||
<a [routerLink]="'/step/answers'" [ngClass]="{ active: step == 'answers' }" i18>
|
||||
<a [routerLink]="'/step/answers'" [ngClass]="{ active: step == 'answers' }">
|
||||
Réponses
|
||||
</a>
|
||||
<a [routerLink]="'/step/visibility'" [ngClass]="{ active: step == 'visibility' }" i18n>
|
||||
<a [routerLink]="'/step/visibility'" [ngClass]="{ active: step == 'visibility' }">
|
||||
Visibilité
|
||||
</a>
|
||||
<a [routerLink]="'/step/base'" [ngClass]="{ active: step == 'base' }" i18n>
|
||||
Base
|
||||
</a>
|
||||
<a [routerLink]="'/step/pictures'" [ngClass]="{ active: step == 'pictures' }" i18n>
|
||||
Images
|
||||
</a>
|
||||
<a [routerLink]="'/step/resume'" [ngClass]="{ active: step == 'resume' }" i18n>
|
||||
<a [routerLink]="'/step/resume'" [ngClass]="{ active: step == 'resume' }">
|
||||
Résumé
|
||||
</a>
|
||||
<a [routerLink]="'/step/end'" [ngClass]="{ active: step == 'end' }" i18n>
|
||||
<a [routerLink]="'/step/end'" [ngClass]="{ active: step == 'end' }">
|
||||
Confirmation
|
||||
</a>
|
||||
<a [routerLink]="'/step/kind'" [ngClass]="{ active: step == 'kind' }" i18n>
|
||||
Page démo
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 3]" i18n>
|
||||
Sondage dessins animés
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 4]" i18n>
|
||||
Sondage 4
|
||||
</a>
|
||||
<a [routerLink]="'/vote/poll/id/5'" i18n>
|
||||
Sondage 5
|
||||
</a>
|
||||
<a [routerLink]="'/graphic/toto'" [ngClass]="{ active: step == 'graphic' }" i18n>
|
||||
Graphique
|
||||
</a>
|
||||
<a [routerLink]="'/step/admin'" i18n>
|
||||
<a [routerLink]="'/step/admin'">
|
||||
Administration
|
||||
</a>
|
||||
<a [routerLink]="'/home'" i18n>
|
||||
Accueil
|
||||
<hr />
|
||||
|
||||
<a [routerLink]="'/step/kind'" [ngClass]="{ active: step == 'kind' }">
|
||||
Page démo
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 3]">
|
||||
Sondage dessins animés
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 1]">
|
||||
Sondage 1
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 2]">
|
||||
Sondage 2
|
||||
</a>
|
||||
<a [routerLink]="['vote/poll/id/', 3]">
|
||||
Sondage 3
|
||||
</a>
|
||||
<a [routerLink]="'/graphic/toto'" [ngClass]="{ active: step == 'graphic' }">
|
||||
Graphique
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
@ -1,32 +1 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
margin-bottom: 3.2rem;
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
border-top: 2px solid #ffd52c;
|
||||
border-bottom: 2px solid #ffd52c;
|
||||
|
||||
a {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:first-of-type)::before {
|
||||
content: ' | ';
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<div id="translate_example">
|
||||
<div class="wrapper">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<img
|
||||
src="assets/img/icone-langue.svg"
|
||||
alt="location icon"
|
||||
(click)="changeLanguage()"
|
||||
class="lang_icon clickable"
|
||||
/>
|
||||
<img (click)="toggleMenu()" alt="menu icon" class="menu_icon clickable" src="assets/img/icone-menu.svg" />
|
||||
|
||||
<select
|
||||
name="language"
|
||||
class="language-selector"
|
||||
@ -17,6 +18,11 @@
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img (click)="toggleMenu()" alt="menu icon" class="menu_icon clickable" src="assets/img/icone-menu.svg" />
|
||||
<br />
|
||||
<span (click)="toggleMenu()" class="menu_label">Menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@mixin btnTheme($color) {
|
||||
background-color: $color;
|
||||
color: $white;
|
||||
&.btn--outline {
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
color: $font-color;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: rgba($color, 0.8);
|
||||
|
||||
&.btn--outline {
|
||||
background-color: rgba($color, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0.5rem 0;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: normal;
|
||||
border: 0.2rem solid transparent;
|
||||
border-radius: 0.3rem;
|
||||
font-weight: normal;
|
||||
|
||||
&--primary {
|
||||
@include btnTheme($primary_color);
|
||||
}
|
||||
|
||||
&--semi-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--black-text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background-color: $pale-purple;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include btnTheme($dusty-orange);
|
||||
}
|
||||
|
||||
&--alert,
|
||||
&--danger {
|
||||
@include btnTheme($red);
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
&--full {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
background-color: $mini-button-color;
|
||||
}
|
||||
|
||||
&--link {
|
||||
min-width: 219.3px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'pt_sans';
|
||||
src: url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pt_sans';
|
||||
src: url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $default_font, Arial, Helvetica, sans-serif;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $title_font, 'Brie Light', 'Arial', 'DejaVu Sans Mono';
|
||||
}
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -1,165 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.input-lg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 1ch;
|
||||
|
||||
&[type='date']::after {
|
||||
content: 'au format JJ/MM/AAAA';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: 1rem;
|
||||
border: 1px solid $secondary_color;
|
||||
border-bottom: 3px solid $primary_color;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border-left: 3px solid $primary_color;
|
||||
}
|
||||
|
||||
select,
|
||||
option {
|
||||
// delete default display
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url('./assets/img/fleche_bas.svg');
|
||||
padding-right: 2.5rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 9px 8px;
|
||||
background-position: right 1rem center;
|
||||
|
||||
background-clip: border-box;
|
||||
|
||||
// TODO -> check what angular can do
|
||||
}
|
||||
|
||||
label {
|
||||
&[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not([for]) {
|
||||
color: $dusty-orange;
|
||||
|
||||
&:before {
|
||||
content: "ce label n'a pas d'attribut for, c'est mal.";
|
||||
color: $violet;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([id]) {
|
||||
color: $dusty-orange;
|
||||
|
||||
&:before {
|
||||
content: "cet input n'a pas d'attribut id, c'est mal.";
|
||||
color: $violet;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
background: yellow;
|
||||
position: relative;
|
||||
top: -1em;
|
||||
z-index: 2;
|
||||
margin-right: 0.5em;
|
||||
right: 0;
|
||||
border: solid red 2px;
|
||||
box-shadow: 0 0 10px orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
border-left: 6px solid $ugly-purple;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.cname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.next {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
}
|
||||
|
||||
.next {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 213px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
@extend .clickable;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn,
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: $title_font;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
background-color: $primary_color;
|
||||
height: 2px;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
.img-thumbnail {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
margin: 1ch 0;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-family: $default_font;
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
color: $font_color !important;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&.next::before,
|
||||
&.prev::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.6rem;
|
||||
margin: auto;
|
||||
background-color: $secondary_color;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.next::after,
|
||||
&.prev::before {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
&.next::after {
|
||||
margin-right: 1rem;
|
||||
border-right: 2px solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&.prev::before {
|
||||
margin-left: 1rem;
|
||||
border-left: 2px solid #000;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.next::before,
|
||||
&.prev::after {
|
||||
background-color: rgba($primary_color, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
@ -1,9 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
//max-width: 320px; // to look like the styleguide, to remove when we will have full width views
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
@ -1,28 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
html {
|
||||
font-size: 62.5%; /* 10px */
|
||||
font-size: calc(1em * 0.625); /* fix */
|
||||
color: $font_color;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.Language- {
|
||||
padding-right: 2em;
|
||||
font-family: SourceSansPro;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: var(--black);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select_language {
|
||||
display: none;
|
||||
}
|
||||
51
src/assets/scss/dev-utilities/_debug.scss
Normal file
51
src/assets/scss/dev-utilities/_debug.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.debug {
|
||||
font-size: 1rem;
|
||||
background: $grey-dark;
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1rem;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
&[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not([for]) {
|
||||
color: $dusty-orange;
|
||||
|
||||
&:before {
|
||||
content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
|
||||
color: $violet;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([id]) {
|
||||
color: $dusty-orange;
|
||||
|
||||
&:before {
|
||||
content: "### debug: cet input n'a pas d'attribut id, c'est mal. ###";
|
||||
color: $violet;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
background: yellow;
|
||||
position: relative;
|
||||
top: -1em;
|
||||
z-index: 2;
|
||||
margin-right: 0.5em;
|
||||
right: 0;
|
||||
border: solid red 2px;
|
||||
box-shadow: 0 0 10px orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/assets/scss/dev-utilities/_helpers.scss
Normal file
20
src/assets/scss/dev-utilities/_helpers.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.boxed-shadow {
|
||||
background: $white;
|
||||
box-shadow: $dark-lavender 0 0 10px;
|
||||
}
|
||||
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
18
src/assets/scss/dev-utilities/_mixins.scss
Normal file
18
src/assets/scss/dev-utilities/_mixins.scss
Normal file
@ -0,0 +1,18 @@
|
||||
@mixin btnTheme($color) {
|
||||
background-color: $color;
|
||||
color: $white;
|
||||
&.btn--outline {
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
color: $font-color;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: rgba($color, 0.8);
|
||||
|
||||
&.btn--outline {
|
||||
background-color: rgba($color, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/assets/scss/libraries/_frameworks.scss
Normal file
11
src/assets/scss/libraries/_frameworks.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import '../../../node_modules/bulma/bulma.sass';
|
||||
// Import only what you need from Bulma
|
||||
@import '../../../node_modules/bulma/sass/utilities/_all.sass';
|
||||
@import '../../../node_modules/bulma/sass/base/_all.sass';
|
||||
@import '../../../node_modules/bulma/sass/elements/button.sass';
|
||||
@import '../../../node_modules/bulma/sass/elements/container.sass';
|
||||
@import '../../../node_modules/bulma/sass/elements/title.sass';
|
||||
@import '../../../node_modules/bulma/sass/form/_all.sass';
|
||||
@import '../../../node_modules/bulma/sass/components/navbar.sass';
|
||||
@import '../../../node_modules/bulma/sass/layout/hero.sass';
|
||||
@import '../../../node_modules/bulma/sass/layout/section.sass';
|
||||
13
src/assets/scss/libraries/_overrides.scss
Normal file
13
src/assets/scss/libraries/_overrides.scss
Normal file
@ -0,0 +1,13 @@
|
||||
// Update Bulma's global variables
|
||||
$family-sans-serif: 'Nunito', sans-serif;
|
||||
|
||||
$primary: $dark-lavender;
|
||||
$link: $wisteria;
|
||||
$widescreen-enabled: false;
|
||||
$fullhd-enabled: false;
|
||||
|
||||
// Update some of Bulma's component variables
|
||||
$body-background-color: $black;
|
||||
$control-border-width: 2px;
|
||||
$input-border-color: transparent;
|
||||
$input-shadow: none;
|
||||
@ -1,15 +0,0 @@
|
||||
.debug {
|
||||
font-size: 1rem;
|
||||
background: $dark-lavender;
|
||||
margin: 2em;
|
||||
padding: 2em;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1rem;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.flex-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > input,
|
||||
& > select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
.logo_first,
|
||||
.logo_second {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.logo_first {
|
||||
color: $logo_color;
|
||||
}
|
||||
|
||||
.logo_second {
|
||||
color: $logo_color_2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 20em;
|
||||
margin-top: 1rem;
|
||||
|
||||
select {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.lang_icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1ch;
|
||||
}
|
||||
|
||||
.menu_icon {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lang_label {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.menu_label {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-family: SourceSansPro;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.legend_first {
|
||||
color: $legend_color;
|
||||
padding-right: 0rem;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.legend_second {
|
||||
color: $legend_color_2;
|
||||
padding-right: 0rem;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
font-size: 10px;
|
||||
}
|
||||
33
src/assets/scss/partials/_buttons.scss
Normal file
33
src/assets/scss/partials/_buttons.scss
Normal file
@ -0,0 +1,33 @@
|
||||
button,
|
||||
.btn,
|
||||
.back {
|
||||
@extend .button;
|
||||
}
|
||||
|
||||
.btn--full {
|
||||
@extend .is-block;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
@extend .is-primary;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.btn--warning {
|
||||
@extend .is-warning;
|
||||
}
|
||||
|
||||
.btn--info {
|
||||
@extend .is-info;
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
@extend .is-danger;
|
||||
}
|
||||
|
||||
main {
|
||||
[ng-reflect-router-link] {
|
||||
min-width: 50%;
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
49
src/assets/scss/partials/_font-families.scss
Normal file
49
src/assets/scss/partials/_font-families.scss
Normal file
@ -0,0 +1,49 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'pt_sans';
|
||||
src: url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pt_sans';
|
||||
src: url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proza_libre';
|
||||
src: url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff2') format('woff2'),
|
||||
url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
66
src/assets/scss/partials/_form-controls.scss
Normal file
66
src/assets/scss/partials/_form-controls.scss
Normal file
@ -0,0 +1,66 @@
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@extend .clickable;
|
||||
margin-bottom: 0.25rem;
|
||||
border-bottom: 2px solid $primary_color;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
option {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: url('/assets/img/fleche_bas.svg');
|
||||
padding-right: 2.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 9px 8px;
|
||||
background-position: right 1rem center;
|
||||
background-clip: border-box;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
select {
|
||||
@extend .select, .input;
|
||||
}
|
||||
|
||||
#multi_hours select {
|
||||
min-width: 300px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .input, .text-ellipsis;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 213px;
|
||||
padding: 0.5em 1em;
|
||||
margin-bottom: 1em;
|
||||
border-left: 3px solid $primary_color;
|
||||
}
|
||||
|
||||
.comment {
|
||||
border-left: 6px solid $primary_color;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.cname {
|
||||
font-weight: bold;
|
||||
}
|
||||
61
src/assets/scss/partials/_forms.scss
Normal file
61
src/assets/scss/partials/_forms.scss
Normal file
@ -0,0 +1,61 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.input-lg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 1ch;
|
||||
|
||||
&[type='date']::after {
|
||||
content: 'au format JJ/MM/AAAA';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: 1rem;
|
||||
border: 1px solid $secondary_color;
|
||||
border-bottom: 3px solid $primary_color;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.next {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.next {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
6
src/assets/scss/partials/_images.scss
Normal file
6
src/assets/scss/partials/_images.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.img-thumbnail {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
margin: 1ch 0;
|
||||
display: inline-block;
|
||||
}
|
||||
42
src/assets/scss/partials/_links.scss
Normal file
42
src/assets/scss/partials/_links.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@charset "UTF-8";
|
||||
a {
|
||||
color: $primary !important;
|
||||
@extend .button, .is-hoverable;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dark !important;
|
||||
background: $pale-purple;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $dark !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white !important;
|
||||
background: $pale-purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-my-polls {
|
||||
a {
|
||||
@extend .is-block;
|
||||
}
|
||||
|
||||
sub {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-url {
|
||||
a {
|
||||
overflow: hidden;
|
||||
@extend .text-ellipsis;
|
||||
}
|
||||
|
||||
framadate-copy-text {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
70
src/assets/scss/partials/_logo.scss
Normal file
70
src/assets/scss/partials/_logo.scss
Normal file
@ -0,0 +1,70 @@
|
||||
.home_link {
|
||||
border: none;
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.logo_first,
|
||||
.logo_second {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.logo_first {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.logo_second {
|
||||
color: $logo_color_2;
|
||||
}
|
||||
|
||||
.lang_label {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.lang_icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1ch;
|
||||
}
|
||||
|
||||
.menu_icon {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.menu_label {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.legend {
|
||||
font-size: 14px;
|
||||
margin-left: 14px;
|
||||
color: $dark-lavender;
|
||||
}
|
||||
|
||||
.legend_first {
|
||||
color: $legend_color;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.legend_second {
|
||||
color: $legend_color_2;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
8
src/assets/scss/partials/_main.scss
Normal file
8
src/assets/scss/partials/_main.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
83
src/assets/scss/partials/_navigation.scss
Normal file
83
src/assets/scss/partials/_navigation.scss
Normal file
@ -0,0 +1,83 @@
|
||||
nav {
|
||||
text-align: center;
|
||||
margin-bottom: 3.2rem;
|
||||
padding-top: 1.6rem;
|
||||
padding-bottom: 1.6rem;
|
||||
border-top: 2px solid $primary;
|
||||
border-bottom: 2px solid $primary;
|
||||
|
||||
a {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&.next::before,
|
||||
&.prev::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.6rem;
|
||||
margin: auto;
|
||||
background-color: $secondary_color;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.next::after,
|
||||
&.prev::before {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
&.next::after {
|
||||
margin-right: 1rem;
|
||||
border-right: 2px solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&.prev::before {
|
||||
margin-left: 1rem;
|
||||
border-left: 2px solid #000;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.next::before,
|
||||
&.prev::after {
|
||||
background-color: rgba($primary_color, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
21
src/assets/scss/partials/_responsive.scss
Normal file
21
src/assets/scss/partials/_responsive.scss
Normal file
@ -0,0 +1,21 @@
|
||||
@media (min-width: $widescreen) {
|
||||
select,
|
||||
input,
|
||||
label + select,
|
||||
label {
|
||||
width: 45%;
|
||||
}
|
||||
.date-choice > input:first-of-type {
|
||||
width: 80%;
|
||||
}
|
||||
.date-choice .btn--primary,
|
||||
.several-times {
|
||||
margin-left: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.time-choice {
|
||||
input {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/assets/scss/partials/_tables.scss
Normal file
7
src/assets/scss/partials/_tables.scss
Normal file
@ -0,0 +1,7 @@
|
||||
table {
|
||||
@extend .table, .is-striped, .is-hoverable;
|
||||
}
|
||||
|
||||
framadate-voting-summary {
|
||||
@extend .table-container;
|
||||
}
|
||||
34
src/assets/scss/partials/_typo.scss
Normal file
34
src/assets/scss/partials/_typo.scss
Normal file
@ -0,0 +1,34 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@extend .title;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend .is-1;
|
||||
|
||||
&::after {
|
||||
background-color: $primary_color;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .is-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend .is-3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend .is-4;
|
||||
}
|
||||
|
||||
// icons font awesome
|
||||
.fa {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
9
src/assets/scss/partials/global.scss
Normal file
9
src/assets/scss/partials/global.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
html {
|
||||
font-size: 1rem; /* 10px */
|
||||
color: $font_color;
|
||||
}
|
||||
main {
|
||||
min-height: 90vh;
|
||||
}
|
||||
35
src/assets/scss/styles.scss
Normal file
35
src/assets/scss/styles.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
You can add global.scss styles to this file, and also import other style files
|
||||
==================================================
|
||||
all styles should be imported in an order from top:
|
||||
most global scope, to bottom: the most specific scope of qualification.
|
||||
==================================================
|
||||
*/
|
||||
// configuration
|
||||
@import 'variables';
|
||||
@import 'dev-utilities/mixins';
|
||||
@import 'dev-utilities/helpers';
|
||||
@import 'dev-utilities/debug';
|
||||
@import 'libraries/frameworks';
|
||||
@import 'libraries/overrides';
|
||||
// typography
|
||||
//@import 'partials/font-families';
|
||||
@import 'partials/typo';
|
||||
// themes
|
||||
@import 'themes/all';
|
||||
// most general dom elements
|
||||
@import 'partials/global';
|
||||
@import 'partials/logo';
|
||||
@import 'partials/navigation';
|
||||
|
||||
// main content elements
|
||||
@import 'partials/main';
|
||||
@import 'partials/tables';
|
||||
@import 'partials/buttons';
|
||||
@import 'partials/links';
|
||||
@import 'partials/forms';
|
||||
@import 'partials/form-controls';
|
||||
@import 'partials/images';
|
||||
// responsive, mobile first goal
|
||||
@import 'partials/responsive';
|
||||
@ -1,3 +1,4 @@
|
||||
@import 'base';
|
||||
@import 'light';
|
||||
@import 'dark';
|
||||
@import 'red';
|
||||
|
||||
39
src/assets/scss/themes/_base.scss
Normal file
39
src/assets/scss/themes/_base.scss
Normal file
@ -0,0 +1,39 @@
|
||||
#big_container {
|
||||
background: $primary;
|
||||
|
||||
.container {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.big-header {
|
||||
margin-bottom: 22px;
|
||||
|
||||
.container {
|
||||
@extend .boxed-shadow;
|
||||
|
||||
.column:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
@extend .boxed-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-votestack {
|
||||
background: $white;
|
||||
border-top: 2px solid $primary_color;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.ui-toast-message-content {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
@ -1,47 +1,58 @@
|
||||
$theme-color-primary: #1b6d85;
|
||||
$theme-color-secondary: #1b6d85;
|
||||
$theme-color-tertiary: #ccc;
|
||||
#big_container {
|
||||
&.theme-dark-crystal {
|
||||
background: #222;
|
||||
color: #ddd;
|
||||
|
||||
.container {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
background-color: #1b6d85;
|
||||
background-color: $theme-color-primary;
|
||||
}
|
||||
|
||||
.btn--primary:focus,
|
||||
.btn--primary:hover,
|
||||
.btn--primary:active,
|
||||
.btn--primary {
|
||||
background-color: #1b6d85;
|
||||
background-color: $theme-color-secondary;
|
||||
}
|
||||
|
||||
.btn--warning:focus,
|
||||
.btn--warning:hover,
|
||||
.btn--warning:active,
|
||||
.btn--warning {
|
||||
background-color: #554685;
|
||||
background-color: $theme-color-secondary;
|
||||
}
|
||||
|
||||
select {
|
||||
background: #1b6d85;
|
||||
border-color: #1b6d85;
|
||||
background: $theme-color-secondary;
|
||||
border-color: $theme-color-secondary;
|
||||
|
||||
&:hover {
|
||||
color: #ccc;
|
||||
color: $theme-color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #ccc;
|
||||
color: $theme-color-tertiary;
|
||||
}
|
||||
|
||||
.lang_icon,
|
||||
.menu_icon {
|
||||
fill: #1b6d85 !important;
|
||||
color: #1b6d85 !important;
|
||||
fill: $theme-color-secondary !important;
|
||||
color: $theme-color-secondary !important;
|
||||
}
|
||||
|
||||
.big-header {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
21
src/assets/scss/themes/_high-contrast.scss
Normal file
21
src/assets/scss/themes/_high-contrast.scss
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
aimed for visual impaired people
|
||||
*/
|
||||
$main-theme-color: #00003b;
|
||||
#big_container {
|
||||
&.theme-high-contrast {
|
||||
background: #465f66;
|
||||
color: $main-theme-color;
|
||||
|
||||
h1::after {
|
||||
background-color: $main-theme-color;
|
||||
}
|
||||
|
||||
.btn--primary:focus,
|
||||
.btn--primary:hover,
|
||||
.btn--primary:active,
|
||||
.btn--primary {
|
||||
background-color: $main-theme-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,20 @@
|
||||
#big_container {
|
||||
background: $primary;
|
||||
|
||||
&.theme-light-watermelon {
|
||||
.big-header {
|
||||
.container {
|
||||
.column:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
.container {
|
||||
background: #fff;
|
||||
padding-bottom: 10em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,167 +0,0 @@
|
||||
@charset "UTF_8";
|
||||
|
||||
.align-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*Btm paddings*/
|
||||
.padding-btm-x1 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.padding-btm-x2 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.padding-btm-x3 {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.padding-btm-x4 {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.padding-btm-x5 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.padding-btm-x6 {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.padding-btm-x7 {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.padding-btm-x8 {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/*Btm margins*/
|
||||
.margin-btm-x1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.margin-btm-x2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.margin-btm-x3 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.margin-btm-x4 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.margin-btm-x5 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.margin-btm-x6 {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.margin-btm-x7 {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.margin-btm-x8 {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/*Top paddings*/
|
||||
.padding-top-x1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.padding-top-x2 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.padding-top-x3 {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.padding-top-x4 {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.padding-top-x5 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.padding-top-x6 {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.padding-top-x7 {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.padding-top-x8 {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/*Top margins*/
|
||||
.margin-top-x1 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.margin-top-x2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.margin-top-x3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.margin-top-x4 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.margin-top-x5 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.margin-top-x6 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.margin-top-x7 {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.margin-top-x8 {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.margin-right-x2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.text-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/*Pour masquer la page lors de l'apparition d'une popup*/
|
||||
.rgba-black {
|
||||
position: fixed;
|
||||
inset: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border: medium none;
|
||||
z-index: 2147483647;
|
||||
background-color: rgba(216, 216, 216, 0.4);
|
||||
}
|
||||
|
||||
.text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
max-width: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
@ -14,8 +14,16 @@ $cool-grey: #aeafb1;
|
||||
$warm-grey: #807e7e;
|
||||
$wisteria: #bf83c2;
|
||||
$pale-purple: #d198d4;
|
||||
|
||||
$purple: #8a4d76;
|
||||
$pink: #fa7c91;
|
||||
$brown: #757763;
|
||||
$beige-light: #d0d1cd;
|
||||
$beige-lighter: #eff0eb;
|
||||
|
||||
// interpretations in app
|
||||
$primary_color: $ugly-purple;
|
||||
$primary: $ugly-purple;
|
||||
$secondary_color: $lavender-pink;
|
||||
$font_color: $black;
|
||||
$logo_color: $dark-lavender;
|
||||
@ -24,8 +32,13 @@ $legend_color: $dark-lavender;
|
||||
$legend_color_2: $dusty-orange;
|
||||
$choice_select_border_color: $cool-grey;
|
||||
$hover-color: $warm-grey;
|
||||
$grey-dark: $warm-grey;
|
||||
$grey-light: $beige-light;
|
||||
$clicked-color: $wisteria;
|
||||
$mini-button-color: $pale-purple;
|
||||
$warning: $dusty-orange;
|
||||
$danger: $red;
|
||||
|
||||
// FONT
|
||||
$default_font: 'pt_sans';
|
||||
$title_font: 'proza_libre';
|
||||
$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import '~bulma/bulma';
|
||||
@import 'assets/scss/variables';
|
||||
@import 'assets/scss/default';
|
||||
@import 'assets/scss/themes/all';
|
||||
@import 'assets/scss/useful_classes';
|
||||
|
||||
@import 'assets/scss/atoms/main';
|
||||
@import 'assets/scss/atoms/section';
|
||||
@import 'assets/scss/atoms/fonts';
|
||||
@import 'assets/scss/atoms/headings';
|
||||
@import 'assets/scss/atoms/buttons';
|
||||
@import 'assets/scss/atoms/links';
|
||||
@import 'assets/scss/atoms/forms';
|
||||
@import 'assets/scss/atoms/lists';
|
||||
@import 'assets/scss/atoms/images';
|
||||
|
||||
@import 'assets/scss/molecules/logo';
|
||||
@import 'assets/scss/molecules/debug';
|
||||
@import 'assets/scss/molecules/flex-line';
|
||||
@ -11,7 +11,7 @@
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"types": ["node"],
|
||||
"types": ["node","jest"],
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"lib": ["es2018", "dom"]
|
||||
},
|
||||
|
||||
@ -8139,7 +8139,7 @@ jest-pnp-resolver@^1.2.1:
|
||||
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
|
||||
integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
|
||||
|
||||
jest-preset-angular@^8.1.2:
|
||||
jest-preset-angular@^8.1.2, jest-preset-angular@^8.1.3:
|
||||
version "8.1.3"
|
||||
resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-8.1.3.tgz#99951afe34ffa5a3d2fd879936515d3235e3567a"
|
||||
integrity sha512-T53bmWG4mNynumYcWqvhKGslQCJCTFpcL3SMrggrI65hI2G0ErYZ6WtdJqPDsFFk+KRN+iNLwNBG1idHO9k2uQ==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user