forked from tykayn/funky-framadate-front
remove dom classes in popups
This commit is contained in:
tykayn
parent
0d3fdf78eb
commit
86229138da
@ -8,6 +8,9 @@
|
||||
width: 100%;
|
||||
background: $white;
|
||||
z-index: 2;
|
||||
.logo-home-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.app-title {
|
||||
color: $white !important;
|
||||
|
||||
@ -3,42 +3,10 @@
|
||||
<div class="landing container content">
|
||||
<div class="columns presentation">
|
||||
<div class="column">
|
||||
<section class="buttons-demo contained-in-main-column">
|
||||
<h1 class="title is-1">titre h1</h1>
|
||||
<h2 class="title is-2">titre h2</h2>
|
||||
<h3 class="title is-3">titre h3</h3>
|
||||
<button class="is-primary is-disabled">bouton primaire inactif</button>
|
||||
<button class="is-primary">bouton primaire</button>
|
||||
<button class="is-primary is-thin">bouton primaire fin</button>
|
||||
<button class="is-final">bouton succès</button>
|
||||
<button class="is-secondary is-disabled">bouton secondaire inactif</button>
|
||||
<button class="is-secondary">bouton secondaire</button>
|
||||
<button class="is-secondary is-thin">bouton secondaire fin</button>
|
||||
<button class="is-action">bouton action</button>
|
||||
<button class="is-action is-thin">bouton action fin</button>
|
||||
</section>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h2 class="title is-2">
|
||||
<h1 class="title is-1 has-text-primary marged-v">
|
||||
{{ 'config.landing_title' | translate }}
|
||||
</h2>
|
||||
<p class="subtitle">
|
||||
</h1>
|
||||
<p class="subtitle marged-v">
|
||||
{{ 'config.landing_subtitle' | translate: { AppTitle: AppTitle } }}
|
||||
</p>
|
||||
<div class="columns">
|
||||
@ -68,6 +36,46 @@
|
||||
<!-- <img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="buttons-demo">
|
||||
<h1 class="title is-1">Titre h1</h1>
|
||||
<h2 class="title is-2">Titre h2</h2>
|
||||
<h3 class="title is-3">Titre h3</h3>
|
||||
<button class="is-primary is-disabled">bouton primaire inactif</button>
|
||||
<button class="is-primary">bouton primaire</button>
|
||||
<button class="is-primary is-thin">bouton primaire fin</button>
|
||||
<button class="is-final">bouton succès</button>
|
||||
<button class="is-secondary is-disabled">bouton secondaire inactif</button>
|
||||
<button class="is-secondary">bouton secondaire</button>
|
||||
<button class="is-secondary is-thin">bouton secondaire fin</button>
|
||||
<button class="is-action">bouton action</button>
|
||||
<button class="is-action is-thin">bouton action fin</button>
|
||||
</section>
|
||||
<section>
|
||||
Autres boutons:
|
||||
<button id="close_dialog_more" class="is-closing-popup">
|
||||
bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
<app-language-selector></app-language-selector>
|
||||
</section>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -75,8 +83,8 @@
|
||||
<p-dialog
|
||||
[modal]="true"
|
||||
[(visible)]="display_poll_search_dialog"
|
||||
[breakpoints]="{ '960px': '75vw' }"
|
||||
[style]="{ width: '454px' }"
|
||||
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
|
||||
[style]="{ width: '486px' }"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="true"
|
||||
@ -91,10 +99,10 @@
|
||||
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="">
|
||||
<section class="search">
|
||||
<form (ngSubmit)="searchMyPolls()">
|
||||
<div class="columns">
|
||||
<div class="">
|
||||
<div class="search-others column">
|
||||
<h2 class="title is-2">
|
||||
{{ 'home.search_title' | translate }}
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
<p-dialog
|
||||
[modal]="true"
|
||||
[(visible)]="display_option_dialog"
|
||||
[breakpoints]="{ '960px': '75vw' }"
|
||||
[style]="{ width: '454px' }"
|
||||
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
|
||||
[style]="{ width: '486px' }"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="true"
|
||||
|
||||
@ -73,25 +73,20 @@
|
||||
[modal]="true"
|
||||
[(visible)]="display_same_hours_dialog"
|
||||
[breakpoints]="{ '960px': '454px' }"
|
||||
[style]="{ width: '454px' }"
|
||||
[style]="{ width: '486px' }"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="false"
|
||||
>
|
||||
<ng-template pTemplate="titlebar">
|
||||
<div class="columns">
|
||||
<div class="column"></div>
|
||||
<div class="column is-narrow">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
|
||||
(click)="closeModalAndFocusOnOpenModalButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
|
||||
(click)="closeModalAndFocusOnOpenModalButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
<h1 class="title is-1">
|
||||
{{ 'hours.modal.title' | translate }}
|
||||
</h1>
|
||||
<section class="same-time-slices">
|
||||
@ -144,18 +139,16 @@
|
||||
</section>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="footer">
|
||||
<div class="columns">
|
||||
<div class="column has-no-padding time-slice-list-of-a-day">
|
||||
<button
|
||||
class="button is-primary is-fullwidth pull-right has-text-white"
|
||||
(click)="applyTimeSlicesToDateChoices()"
|
||||
>
|
||||
{{ 'hours.modal.validate' | translate }}
|
||||
</button>
|
||||
<button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
|
||||
{{ 'SENTENCES.Cancel' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="has-no-padding time-slice-list-of-a-day">
|
||||
<button
|
||||
class="button is-primary is-fullwidth pull-right has-text-white"
|
||||
(click)="applyTimeSlicesToDateChoices()"
|
||||
>
|
||||
{{ 'hours.modal.validate' | translate }}
|
||||
</button>
|
||||
<button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
|
||||
{{ 'SENTENCES.Cancel' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p-confirmDialog #cd [style]="{ width: '454px' }">
|
||||
<p-confirmDialog #cd [style]="{ width: '486px' }">
|
||||
<ng-template pTemplate="header">
|
||||
<h3>{{ 'creation.dialog' | translate }}</h3>
|
||||
</ng-template>
|
||||
|
||||
@ -103,25 +103,23 @@
|
||||
id="close_stepper"
|
||||
[modal]="true"
|
||||
[(visible)]="display_cancel_dialog"
|
||||
[breakpoints]="{ '960px': '75vw' }"
|
||||
[style]="{ width: '454px', 'border-radius': '1rem' }"
|
||||
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
|
||||
[style]="{ width: '486px', 'border-radius': '1rem' }"
|
||||
[styleClass]="'roundToPercentWidth-borders'"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="false"
|
||||
>
|
||||
<ng-template pTemplate="titlebar">
|
||||
<div class="top">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
<img class="icon" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="title">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
<img class="icon" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
<h1 class="title is-1">
|
||||
{{ 'popup.cancel.title' | translate }}
|
||||
</h1>
|
||||
<p class="description">
|
||||
@ -129,8 +127,8 @@
|
||||
</p>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="footer">
|
||||
<div class="columns">
|
||||
<div class="column has-no-padding">
|
||||
<div class="">
|
||||
<div class="has-no-padding">
|
||||
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
|
||||
{{ 'popup.cancel.reject' | translate }}
|
||||
</button>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
[modal]="true"
|
||||
[(visible)]="display_lang_dialog"
|
||||
[breakpoints]="['960px']"
|
||||
[style]="{ width: '454px' }"
|
||||
[style]="{ width: '486px' }"
|
||||
[draggable]="false"
|
||||
[showHeader]="false"
|
||||
[resizable]="true"
|
||||
@ -29,8 +29,8 @@
|
||||
id="lang_selector_modale"
|
||||
>
|
||||
<ng-template pTemplate="titlebar">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div class="top">
|
||||
<button
|
||||
id="close_dialog{{ idSuffix }}"
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
|
||||
<h1 class="title is-1 has-text-left" id="lang_selector_modale_title">
|
||||
{{ 'popup.languages.title' | translate }}
|
||||
</h1>
|
||||
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
float: left;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
margin: 0.5em;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
input {
|
||||
//height: 1.5rem;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ export class LanguageSelectorComponent implements OnInit {
|
||||
public availableLanguages: any = ['FR', 'EN', 'ES'];
|
||||
language: string;
|
||||
language_to_apply: string;
|
||||
display_lang_dialog: boolean = false;
|
||||
display_lang_dialog: boolean = true;
|
||||
display_dynamic_langs: boolean = false;
|
||||
|
||||
availableLanguagesStatic: any = [
|
||||
|
||||
@ -22,31 +22,49 @@ $input-shadow: none;
|
||||
}
|
||||
|
||||
// modal dialog
|
||||
.p-dialog-content {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
.p-dialog-footer {
|
||||
border-bottom-left-radius: 0.5rem !important;
|
||||
border-bottom-right-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.p-dialog {
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
font-family: $title_font !important;
|
||||
max-width: $widescreen-width-main-column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 1rem;
|
||||
@extend .is-3;
|
||||
}
|
||||
|
||||
.p-dialog-header {
|
||||
color: $primary_color;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
border-bottom-left-radius: 8px !important;
|
||||
border-bottom-right-radius: 8px !important;
|
||||
padding: 1rem;
|
||||
|
||||
button {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button-reject {
|
||||
background: none;
|
||||
margin-right: -1.55rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem !important;
|
||||
float: right;
|
||||
|
||||
.icon {
|
||||
margin-left: 1rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.round-borders {
|
||||
@ -81,5 +99,5 @@ button .icon:first-child:last-child,
|
||||
.p-datepicker table td > span:focus,
|
||||
.p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
|
||||
.p-datepicker .p-datepicker-header .p-datepicker-next:focus {
|
||||
outline: 3px solid $black !important;
|
||||
outline: 3px solid $outline-color !important;
|
||||
}
|
||||
|
||||
@ -108,6 +108,17 @@ a {
|
||||
.is-closing-popup {
|
||||
background: #fff;
|
||||
color: #6359cf !important;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
|
||||
.icon {
|
||||
margin-left: 1rem;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-top: 0.15rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-demo button {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
body {
|
||||
font-family: $default_font;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@ -27,8 +28,9 @@ body {
|
||||
color: $d-primary-intense;
|
||||
font-family: $title_font;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@ -49,32 +51,12 @@ body {
|
||||
color: $d-primary-intense;
|
||||
font-family: $title_font;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.p-dialog {
|
||||
font-family: $title_font !important;
|
||||
max-width: $widescreen-width-main-column;
|
||||
|
||||
.p-dialog-header {
|
||||
color: $primary_color !important;
|
||||
|
||||
.p-dialog-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
padding: 3rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nobold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user