place fixed nav on bottom of steps
This commit is contained in:
tykayn
parent
cf7e6603f9
commit
f993f5c31e
|
|
@ -1,5 +1,5 @@
|
|||
<form [formGroup]="form" class="form-advanced-config">
|
||||
<fieldset class="complete well">
|
||||
<fieldset>
|
||||
<label for="descr">Description (optionnel)</label>
|
||||
<br />
|
||||
<textarea
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
réinitialiser
|
||||
</span>
|
||||
</button>
|
||||
<fieldset class="range-container is-boxed" *ngIf="!form.value.hasSeveralHours">
|
||||
<fieldset *ngIf="!form.value.hasSeveralHours">
|
||||
<div class="range-time">
|
||||
<h2>
|
||||
<span class="count-dates-txt">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{{ 'dates.add_interval' | translate }}
|
||||
</span>
|
||||
</button>
|
||||
<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
|
||||
<fieldset *ngIf="showDateInterval">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<app-wip-todo></app-wip-todo>
|
||||
|
|
|
|||
|
|
@ -54,19 +54,20 @@
|
|||
|
||||
.cancel-button {
|
||||
margin-top: 0;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
line-height: $header-nav-inner-height;
|
||||
height: $header-nav-inner-height;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
|
||||
&:hover {
|
||||
background: $font_color;
|
||||
color: $font_color;
|
||||
}
|
||||
}
|
||||
|
||||
.step-info {
|
||||
padding: 9px 10px;
|
||||
background: $white;
|
||||
height: 60px;
|
||||
height: $header-nav-inner-height;
|
||||
i {
|
||||
margin-left: 1ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="has-navbar-fixed-top">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="/" />
|
||||
|
|
|
|||
|
|
@ -52,3 +52,21 @@ input {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng-pristine,
|
||||
.ng-dirty {
|
||||
//border-left: #ccc 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.ng-touched.ng-invalid {
|
||||
//border-left: $danger 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.theme-dark-crystal {
|
||||
.ng-touched.ng-valid {
|
||||
//border-left: $success 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
}
|
||||
|
||||
.fixed-box {
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ $input-shadow: none;
|
|||
width: 80%;
|
||||
}
|
||||
|
||||
html.has-navbar-fixed-top,
|
||||
body.has-navbar-fixed-top {
|
||||
padding-top: 68px;
|
||||
html {
|
||||
padding-top: $header-nav-height;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,22 +19,12 @@ app-step-one,
|
|||
app-step-two,
|
||||
app-step-three,
|
||||
app-step-four,
|
||||
app-step-five,
|
||||
app-step-six,
|
||||
app-step-seven {
|
||||
display: block;
|
||||
}
|
||||
|
||||
app-step-five {
|
||||
app-stepper {
|
||||
padding: 2em 2.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
|
@ -219,7 +209,7 @@ mat-checkbox {
|
|||
width: 500px;
|
||||
max-width: 100%;
|
||||
border: solid 1px #ccc;
|
||||
min-height: 60px;
|
||||
min-height: $header-nav-inner-height;
|
||||
display: block;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
|
|
@ -272,27 +262,7 @@ mat-checkbox {
|
|||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ng-pristine,
|
||||
.ng-dirty {
|
||||
//border-left: #ccc 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.ng-touched.ng-invalid {
|
||||
//border-left: $danger 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.theme-dark-crystal {
|
||||
.ng-touched.ng-valid {
|
||||
//border-left: $success 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-nav-admin {
|
||||
//position:fixed;
|
||||
//bottom: 0;
|
||||
background: #ccc;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -302,14 +272,14 @@ mat-checkbox {
|
|||
.advanced-config {
|
||||
.work-in-progress {
|
||||
background: $primary-light;
|
||||
padding: 0.25em;
|
||||
border-left: 1px solid $warning-dark;
|
||||
color: $warning-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
padding: 1rem 1rem;
|
||||
padding: 2rem 1rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
color: $d-primary-intense;
|
||||
margin-bottom: 36px;
|
||||
|
|
|
|||
|
|
@ -109,20 +109,18 @@ a span.ui-steps-number {
|
|||
|
||||
.bottom-step-buttons {
|
||||
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.05);
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
height: auto;
|
||||
background: $white;
|
||||
|
||||
padding: 8px 16px;
|
||||
position: fixed !important;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 8px 16px;
|
||||
}
|
||||
.button {
|
||||
&.is-secondary {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@ main {
|
|||
|
||||
.columns {
|
||||
&.half-columns {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -70,3 +70,5 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
|
|||
// sizes and breakpoints
|
||||
$main-column-width: 400px;
|
||||
$mobile-size: 400px;
|
||||
$header-nav-height: 68px;
|
||||
$header-nav-inner-height: 60px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue