mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
style of small trash icon, placing negative margins, bg icon in css
This commit is contained in:
tykayn
parent
86229138da
commit
a44100b7a0
@ -2,6 +2,7 @@
|
||||
.big-header {
|
||||
height: $header-nav-height;
|
||||
padding-top: 1rem;
|
||||
padding-left: 1rem;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@ -57,6 +57,19 @@
|
||||
bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
<app-language-selector></app-language-selector>
|
||||
|
||||
<div class="delete-date">
|
||||
<button class="has-background-trash has-background-icon-left is-filtered-icon-primary">
|
||||
{{ 'dates.remove' | translate }} N
|
||||
</button>
|
||||
</div>
|
||||
<div class="add-time-choice">
|
||||
<button
|
||||
class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
|
||||
>
|
||||
{{ 'hours.add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
@ -15,7 +15,7 @@ export class PollConfiguration {
|
||||
public isOwnerNotifiedByEmailOnNewComment: boolean = false,
|
||||
public isZeroKnoledge: boolean = true,
|
||||
public hasSeveralHours: boolean = false,
|
||||
public hasMaxCountOfAnswers: boolean = false,
|
||||
public hasMaxCountOfAnswers: boolean = true,
|
||||
public whoCanChangeAnswers: string = environment.poll.defaultConfig.whoCanChangeAnswers, // everybody, self, nobody (= just admin)
|
||||
public visibility: string = environment.poll.defaultConfig.visibility, // visible to anyone with the link:
|
||||
public voteChoices: string = environment.poll.defaultConfig.voteChoices, // possible answers to a vote timeSlice: only "yes", "yes, maybe, no": number = environment.poll.defaultConfig.maxCountOfAnswers,
|
||||
|
||||
@ -37,7 +37,7 @@ export class PollService implements Resolve<Poll> {
|
||||
public intervalDays: number = 1;
|
||||
public intervalDaysDefault = 7;
|
||||
public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
|
||||
public timeList: TimeSlices[] = [{ literal: 'example' }]; // ranges of time expressed as strings
|
||||
public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings
|
||||
public previousRouteName: string = '/administration';
|
||||
public nextRouteName: string = '/administration/step/2';
|
||||
public step_current: number = 1;
|
||||
@ -197,7 +197,7 @@ export class PollService implements Resolve<Poll> {
|
||||
isMaybeAnswerAvailable: [true, [Validators.required]],
|
||||
isNoAnswerAvailable: [true, [Validators.required]],
|
||||
allowComments: [true, [Validators.required]],
|
||||
maxCountOfAnswers: [1, []],
|
||||
maxCountOfAnswers: ['', []],
|
||||
hasMaxCountOfAnswers: ['', [Validators.required]],
|
||||
useVoterUniqueLink: [false, [Validators.required]],
|
||||
voterEmailList: ['', []],
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<h2 class="title is-3">
|
||||
{{ 'advanced.limit_title' | translate }}
|
||||
</h2>
|
||||
<div *ngIf="form.value.hasMaxCountOfAnswers">
|
||||
<div>
|
||||
<label for="maxCountOfAnswers">
|
||||
{{ 'advanced.limit_label' | translate }}
|
||||
</label>
|
||||
|
||||
@ -28,10 +28,9 @@
|
||||
<hr />
|
||||
<div class="delete-date">
|
||||
<button
|
||||
class="has-no-outline has-no-background has-text-primary has-text-left"
|
||||
class="has-background-trash has-background-icon-left is-filtered-icon-primary"
|
||||
(click)="deleteChoiceField(id)"
|
||||
>
|
||||
<img class="icon" aria-hidden="true" src="assets/icons/trash-2.svg" />
|
||||
{{ 'dates.remove' | translate }} {{ id + 1 }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -76,49 +76,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-date {
|
||||
color: $primary_color;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background: transparent;
|
||||
|
||||
margin-right: 0;
|
||||
|
||||
button {
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-left: 1rem;
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
float: left;
|
||||
color: $primary_color;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
height: 1.25rem;
|
||||
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary_color;
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
color: $white;
|
||||
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.format-helper {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
||||
@ -22,11 +22,11 @@
|
||||
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
|
||||
<button
|
||||
[attr.aria-label]="'choices.delete' | translate"
|
||||
class="has-no-border delete-hour"
|
||||
class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary"
|
||||
(click)="removeHour(dayChoice.timeSlices, id)"
|
||||
>
|
||||
<!-- {{ 'choices.delete' | translate }}-->
|
||||
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
|
||||
<!-- <img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="add-time-choice">
|
||||
@ -110,12 +110,9 @@
|
||||
<input class="input" type="text" id="timeList_{{ id }}" [(ngModel)]="timeSlice.literal" />
|
||||
<button
|
||||
[attr.aria-label]="'choices.delete' | translate"
|
||||
class="has-no-border delete-hour"
|
||||
class="has-no-border delete-hour has-background-trash has-background-icon-left"
|
||||
(click)="pollService.timeList.splice(id, 1)"
|
||||
>
|
||||
<!-- {{ 'choices.delete' | translate }}-->
|
||||
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
|
||||
</button>
|
||||
></button>
|
||||
</div>
|
||||
<div class="title" *ngIf="environment.display_count_timelist && pollService.timeList.length">
|
||||
<span class="count-dates">
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
width: calc(100% - 2rem);
|
||||
width: calc(100% - 40px);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -43,22 +43,26 @@
|
||||
}
|
||||
|
||||
.add-time-choice {
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.button {
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
button {
|
||||
justify-content: inherit;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
background-position: 0;
|
||||
padding: 0.5rem 0.5rem 0.5rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-hour {
|
||||
background: transparent;
|
||||
background-position: center;
|
||||
background-size: 20px 20px;
|
||||
font-size: 0.8rem;
|
||||
width: 2rem;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
float: right;
|
||||
margin-top: -3rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
<!-- <img class="icon" src="assets/img/kind_date.svg" alt="icone cal" />-->
|
||||
<label for="isAboutDate_true">
|
||||
{{ 'creation.kind.date' | translate }}
|
||||
</label>
|
||||
@ -30,8 +29,6 @@
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
<!-- <img class="icon" src="assets/img/kind_classic.svg" alt="icone chart" />-->
|
||||
|
||||
<label for="isAboutDate_false">
|
||||
{{ 'creation.kind.classic' | translate }}
|
||||
</label>
|
||||
|
||||
@ -21,6 +21,11 @@
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
float: left;
|
||||
display: inline;
|
||||
margin-top: -0.5rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -35,6 +40,9 @@
|
||||
input[type='radio'] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-top: -0.7rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
|
||||
@ -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 = true;
|
||||
display_lang_dialog: boolean = false;
|
||||
display_dynamic_langs: boolean = false;
|
||||
|
||||
availableLanguagesStatic: any = [
|
||||
|
||||
@ -98,15 +98,17 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
.has-background-icon-left {
|
||||
padding-left: 33px;
|
||||
padding-left: 44px;
|
||||
}
|
||||
// icone bg
|
||||
.has-background-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.has-background-plus {
|
||||
background: url('/assets/icons/plus-circle.svg') no-repeat left center;
|
||||
//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
|
||||
background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
|
||||
}
|
||||
.has-background-trash {
|
||||
background: url('/assets/icons/trash-2.svg') no-repeat 16px center;
|
||||
}
|
||||
.is-block {
|
||||
display: block;
|
||||
|
||||
@ -4,6 +4,9 @@
|
||||
outline-style: solid;
|
||||
outline-offset: 0.15rem;
|
||||
}
|
||||
&:active {
|
||||
outline: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
@ -14,6 +17,7 @@ button,
|
||||
.btn--full {
|
||||
@extend .is-block;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
a {
|
||||
@ -24,6 +28,7 @@ a {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-fullwidth {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@ -36,10 +41,12 @@ a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.is-final {
|
||||
background: #128149;
|
||||
border-color: #128149;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #07532d;
|
||||
border-color: #07532d;
|
||||
@ -50,12 +57,15 @@ a {
|
||||
background: #6359cf;
|
||||
color: #fff;
|
||||
border-color: #6359cf;
|
||||
|
||||
&.is-disabled {
|
||||
background: #767486;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #3e3882;
|
||||
border-color: #3e3882;
|
||||
|
||||
&.is-disabled {
|
||||
background: #767486;
|
||||
border-color: #6359cf;
|
||||
@ -72,14 +82,17 @@ a {
|
||||
background: #fff;
|
||||
color: #6359cf;
|
||||
border-color: #6359cf;
|
||||
|
||||
&.is-disabled {
|
||||
color: #767486;
|
||||
border-color: #767486;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f5fb;
|
||||
border-color: #3e3882;
|
||||
color: #3e3882;
|
||||
|
||||
&.is-disabled {
|
||||
color: #767486;
|
||||
border-color: #767486;
|
||||
@ -105,6 +118,7 @@ a {
|
||||
color: #3e3882;
|
||||
}
|
||||
}
|
||||
|
||||
.is-closing-popup {
|
||||
background: #fff;
|
||||
color: #6359cf !important;
|
||||
@ -122,8 +136,7 @@ a {
|
||||
}
|
||||
|
||||
.buttons-demo button {
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -134,9 +147,11 @@ a {
|
||||
.is-warning {
|
||||
@extend .is-warning;
|
||||
}
|
||||
|
||||
.is-info {
|
||||
background-color: #94bae2;
|
||||
}
|
||||
|
||||
.btn--info {
|
||||
@extend .is-info;
|
||||
}
|
||||
@ -144,6 +159,42 @@ a {
|
||||
.is-danger {
|
||||
background-color: #e08181;
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
@extend .is-danger;
|
||||
}
|
||||
|
||||
.delete-date {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background: #f6f5fd;
|
||||
cursor: pointer;
|
||||
margin-right: 0;
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
//background-color: $primary_color;
|
||||
button {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: $primary_color;
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
padding-left: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
@extend .outlined;
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user