From 19af7858fcaab02bf23df4d6294ea5a6d3577f60 Mon Sep 17 00:00:00 2001 From: Le Libre Au Quotidien Date: Mon, 23 Nov 2020 10:34:13 +0100 Subject: [PATCH] UI with Piperade Grid --- public/css/app.css | 1707 ----------------- resources/sass/grille.scss | 57 + .../sass/materialize/sass/materialize.scss | 7 - 3 files changed, 57 insertions(+), 1714 deletions(-) create mode 100644 resources/sass/grille.scss diff --git a/public/css/app.css b/public/css/app.css index 819d3fe..46c4133 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -3526,988 +3526,6 @@ table span.badge { font-feature-settings: "liga"; } -.container { - margin: 0 auto; - max-width: 1280px; - width: 90%; -} - -@media only screen and (min-width : 601px) { - .container { - width: 85%; - } -} - -@media only screen and (min-width : 993px) { - .container { - width: 70%; - } -} - -.col .row { - margin-left: -0.75rem; - margin-right: -0.75rem; -} - -.section { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.section.no-pad { - padding: 0; -} - -.section.no-pad-bot { - padding-bottom: 0; -} - -.section.no-pad-top { - padding-top: 0; -} - -.row { - margin-left: auto; - margin-right: auto; - margin-bottom: 20px; -} - -.row:after { - content: ""; - display: table; - clear: both; -} - -.row .col { - float: left; - box-sizing: border-box; - padding: 0 0.75rem; - min-height: 1px; -} - -.row .col[class*=push-], -.row .col[class*=pull-] { - position: relative; -} - -.row .col.s1 { - width: 8.3333333333%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s2 { - width: 16.6666666667%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s3 { - width: 25%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s4 { - width: 33.3333333333%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s5 { - width: 41.6666666667%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s6 { - width: 50%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s7 { - width: 58.3333333333%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s8 { - width: 66.6666666667%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s9 { - width: 75%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s10 { - width: 83.3333333333%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s11 { - width: 91.6666666667%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.s12 { - width: 100%; - margin-left: auto; - left: auto; - right: auto; -} - -.row .col.offset-s1 { - margin-left: 8.3333333333%; -} - -.row .col.pull-s1 { - right: 8.3333333333%; -} - -.row .col.push-s1 { - left: 8.3333333333%; -} - -.row .col.offset-s2 { - margin-left: 16.6666666667%; -} - -.row .col.pull-s2 { - right: 16.6666666667%; -} - -.row .col.push-s2 { - left: 16.6666666667%; -} - -.row .col.offset-s3 { - margin-left: 25%; -} - -.row .col.pull-s3 { - right: 25%; -} - -.row .col.push-s3 { - left: 25%; -} - -.row .col.offset-s4 { - margin-left: 33.3333333333%; -} - -.row .col.pull-s4 { - right: 33.3333333333%; -} - -.row .col.push-s4 { - left: 33.3333333333%; -} - -.row .col.offset-s5 { - margin-left: 41.6666666667%; -} - -.row .col.pull-s5 { - right: 41.6666666667%; -} - -.row .col.push-s5 { - left: 41.6666666667%; -} - -.row .col.offset-s6 { - margin-left: 50%; -} - -.row .col.pull-s6 { - right: 50%; -} - -.row .col.push-s6 { - left: 50%; -} - -.row .col.offset-s7 { - margin-left: 58.3333333333%; -} - -.row .col.pull-s7 { - right: 58.3333333333%; -} - -.row .col.push-s7 { - left: 58.3333333333%; -} - -.row .col.offset-s8 { - margin-left: 66.6666666667%; -} - -.row .col.pull-s8 { - right: 66.6666666667%; -} - -.row .col.push-s8 { - left: 66.6666666667%; -} - -.row .col.offset-s9 { - margin-left: 75%; -} - -.row .col.pull-s9 { - right: 75%; -} - -.row .col.push-s9 { - left: 75%; -} - -.row .col.offset-s10 { - margin-left: 83.3333333333%; -} - -.row .col.pull-s10 { - right: 83.3333333333%; -} - -.row .col.push-s10 { - left: 83.3333333333%; -} - -.row .col.offset-s11 { - margin-left: 91.6666666667%; -} - -.row .col.pull-s11 { - right: 91.6666666667%; -} - -.row .col.push-s11 { - left: 91.6666666667%; -} - -.row .col.offset-s12 { - margin-left: 100%; -} - -.row .col.pull-s12 { - right: 100%; -} - -.row .col.push-s12 { - left: 100%; -} - -@media only screen and (min-width : 601px) { - .row .col.m1 { - width: 8.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m2 { - width: 16.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m3 { - width: 25%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m4 { - width: 33.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m5 { - width: 41.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m6 { - width: 50%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m7 { - width: 58.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m8 { - width: 66.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m9 { - width: 75%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m10 { - width: 83.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m11 { - width: 91.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.m12 { - width: 100%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.offset-m1 { - margin-left: 8.3333333333%; - } - - .row .col.pull-m1 { - right: 8.3333333333%; - } - - .row .col.push-m1 { - left: 8.3333333333%; - } - - .row .col.offset-m2 { - margin-left: 16.6666666667%; - } - - .row .col.pull-m2 { - right: 16.6666666667%; - } - - .row .col.push-m2 { - left: 16.6666666667%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.pull-m3 { - right: 25%; - } - - .row .col.push-m3 { - left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.3333333333%; - } - - .row .col.pull-m4 { - right: 33.3333333333%; - } - - .row .col.push-m4 { - left: 33.3333333333%; - } - - .row .col.offset-m5 { - margin-left: 41.6666666667%; - } - - .row .col.pull-m5 { - right: 41.6666666667%; - } - - .row .col.push-m5 { - left: 41.6666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.pull-m6 { - right: 50%; - } - - .row .col.push-m6 { - left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.3333333333%; - } - - .row .col.pull-m7 { - right: 58.3333333333%; - } - - .row .col.push-m7 { - left: 58.3333333333%; - } - - .row .col.offset-m8 { - margin-left: 66.6666666667%; - } - - .row .col.pull-m8 { - right: 66.6666666667%; - } - - .row .col.push-m8 { - left: 66.6666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.pull-m9 { - right: 75%; - } - - .row .col.push-m9 { - left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.3333333333%; - } - - .row .col.pull-m10 { - right: 83.3333333333%; - } - - .row .col.push-m10 { - left: 83.3333333333%; - } - - .row .col.offset-m11 { - margin-left: 91.6666666667%; - } - - .row .col.pull-m11 { - right: 91.6666666667%; - } - - .row .col.push-m11 { - left: 91.6666666667%; - } - - .row .col.offset-m12 { - margin-left: 100%; - } - - .row .col.pull-m12 { - right: 100%; - } - - .row .col.push-m12 { - left: 100%; - } -} - -@media only screen and (min-width : 993px) { - .row .col.l1 { - width: 8.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l2 { - width: 16.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l3 { - width: 25%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l4 { - width: 33.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l5 { - width: 41.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l6 { - width: 50%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l7 { - width: 58.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l8 { - width: 66.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l9 { - width: 75%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l10 { - width: 83.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l11 { - width: 91.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.l12 { - width: 100%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.offset-l1 { - margin-left: 8.3333333333%; - } - - .row .col.pull-l1 { - right: 8.3333333333%; - } - - .row .col.push-l1 { - left: 8.3333333333%; - } - - .row .col.offset-l2 { - margin-left: 16.6666666667%; - } - - .row .col.pull-l2 { - right: 16.6666666667%; - } - - .row .col.push-l2 { - left: 16.6666666667%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.pull-l3 { - right: 25%; - } - - .row .col.push-l3 { - left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.3333333333%; - } - - .row .col.pull-l4 { - right: 33.3333333333%; - } - - .row .col.push-l4 { - left: 33.3333333333%; - } - - .row .col.offset-l5 { - margin-left: 41.6666666667%; - } - - .row .col.pull-l5 { - right: 41.6666666667%; - } - - .row .col.push-l5 { - left: 41.6666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.pull-l6 { - right: 50%; - } - - .row .col.push-l6 { - left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.3333333333%; - } - - .row .col.pull-l7 { - right: 58.3333333333%; - } - - .row .col.push-l7 { - left: 58.3333333333%; - } - - .row .col.offset-l8 { - margin-left: 66.6666666667%; - } - - .row .col.pull-l8 { - right: 66.6666666667%; - } - - .row .col.push-l8 { - left: 66.6666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.pull-l9 { - right: 75%; - } - - .row .col.push-l9 { - left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.3333333333%; - } - - .row .col.pull-l10 { - right: 83.3333333333%; - } - - .row .col.push-l10 { - left: 83.3333333333%; - } - - .row .col.offset-l11 { - margin-left: 91.6666666667%; - } - - .row .col.pull-l11 { - right: 91.6666666667%; - } - - .row .col.push-l11 { - left: 91.6666666667%; - } - - .row .col.offset-l12 { - margin-left: 100%; - } - - .row .col.pull-l12 { - right: 100%; - } - - .row .col.push-l12 { - left: 100%; - } -} - -@media only screen and (min-width : 1201px) { - .row .col.xl1 { - width: 8.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl2 { - width: 16.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl3 { - width: 25%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl4 { - width: 33.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl5 { - width: 41.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl6 { - width: 50%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl7 { - width: 58.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl8 { - width: 66.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl9 { - width: 75%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl10 { - width: 83.3333333333%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl11 { - width: 91.6666666667%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.xl12 { - width: 100%; - margin-left: auto; - left: auto; - right: auto; - } - - .row .col.offset-xl1 { - margin-left: 8.3333333333%; - } - - .row .col.pull-xl1 { - right: 8.3333333333%; - } - - .row .col.push-xl1 { - left: 8.3333333333%; - } - - .row .col.offset-xl2 { - margin-left: 16.6666666667%; - } - - .row .col.pull-xl2 { - right: 16.6666666667%; - } - - .row .col.push-xl2 { - left: 16.6666666667%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.pull-xl3 { - right: 25%; - } - - .row .col.push-xl3 { - left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.3333333333%; - } - - .row .col.pull-xl4 { - right: 33.3333333333%; - } - - .row .col.push-xl4 { - left: 33.3333333333%; - } - - .row .col.offset-xl5 { - margin-left: 41.6666666667%; - } - - .row .col.pull-xl5 { - right: 41.6666666667%; - } - - .row .col.push-xl5 { - left: 41.6666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.pull-xl6 { - right: 50%; - } - - .row .col.push-xl6 { - left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.3333333333%; - } - - .row .col.pull-xl7 { - right: 58.3333333333%; - } - - .row .col.push-xl7 { - left: 58.3333333333%; - } - - .row .col.offset-xl8 { - margin-left: 66.6666666667%; - } - - .row .col.pull-xl8 { - right: 66.6666666667%; - } - - .row .col.push-xl8 { - left: 66.6666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.pull-xl9 { - right: 75%; - } - - .row .col.push-xl9 { - left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.3333333333%; - } - - .row .col.pull-xl10 { - right: 83.3333333333%; - } - - .row .col.push-xl10 { - left: 83.3333333333%; - } - - .row .col.offset-xl11 { - margin-left: 91.6666666667%; - } - - .row .col.pull-xl11 { - right: 91.6666666667%; - } - - .row .col.push-xl11 { - left: 91.6666666667%; - } - - .row .col.offset-xl12 { - margin-left: 100%; - } - - .row .col.pull-xl12 { - right: 100%; - } - - .row .col.push-xl12 { - left: 100%; - } -} - nav { color: #fff; background-color: #ee6e73; @@ -8467,731 +7485,6 @@ input[type=range]::-ms-thumb { } } -.slider { - position: relative; - height: 400px; - width: 100%; -} - -.slider.fullscreen { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.slider.fullscreen ul.slides { - height: 100%; -} - -.slider.fullscreen ul.indicators { - z-index: 2; - bottom: 30px; -} - -.slider .slides { - background-color: #9e9e9e; - margin: 0; - height: 400px; -} - -.slider .slides li { - opacity: 0; - position: absolute; - top: 0; - left: 0; - z-index: 1; - width: 100%; - height: inherit; - overflow: hidden; -} - -.slider .slides li img { - height: 100%; - width: 100%; - background-size: cover; - background-position: center; -} - -.slider .slides li .caption { - color: #fff; - position: absolute; - top: 15%; - left: 15%; - width: 70%; - opacity: 0; -} - -.slider .slides li .caption p { - color: #e0e0e0; -} - -.slider .slides li.active { - z-index: 2; -} - -.slider .indicators { - position: absolute; - text-align: center; - left: 0; - right: 0; - bottom: 0; - margin: 0; -} - -.slider .indicators .indicator-item { - display: inline-block; - position: relative; - cursor: pointer; - height: 16px; - width: 16px; - margin: 0 12px; - background-color: #e0e0e0; - transition: background-color 0.3s; - border-radius: 50%; -} - -.slider .indicators .indicator-item.active { - background-color: #4CAF50; -} - -.carousel { - overflow: hidden; - position: relative; - width: 100%; - height: 400px; - perspective: 500px; - transform-style: preserve-3d; - transform-origin: 0% 50%; -} - -.carousel.carousel-slider { - top: 0; - left: 0; -} - -.carousel.carousel-slider .carousel-fixed-item { - position: absolute; - left: 0; - right: 0; - bottom: 20px; - z-index: 1; -} - -.carousel.carousel-slider .carousel-fixed-item.with-indicators { - bottom: 68px; -} - -.carousel.carousel-slider .carousel-item { - width: 100%; - height: 100%; - min-height: 400px; - position: absolute; - top: 0; - left: 0; -} - -.carousel.carousel-slider .carousel-item h2 { - font-size: 24px; - font-weight: 500; - line-height: 32px; -} - -.carousel.carousel-slider .carousel-item p { - font-size: 15px; -} - -.carousel .carousel-item { - visibility: hidden; - width: 200px; - height: 200px; - position: absolute; - top: 0; - left: 0; -} - -.carousel .carousel-item > img { - width: 100%; -} - -.carousel .indicators { - position: absolute; - text-align: center; - left: 0; - right: 0; - bottom: 0; - margin: 0; -} - -.carousel .indicators .indicator-item { - display: inline-block; - position: relative; - cursor: pointer; - height: 8px; - width: 8px; - margin: 24px 4px; - background-color: rgba(255, 255, 255, 0.5); - transition: background-color 0.3s; - border-radius: 50%; -} - -.carousel .indicators .indicator-item.active { - background-color: #fff; -} - -.carousel.scrolling .carousel-item .materialboxed, -.carousel .carousel-item:not(.active) .materialboxed { - pointer-events: none; -} - -.tap-target-wrapper { - width: 800px; - height: 800px; - position: fixed; - z-index: 1000; - visibility: hidden; - transition: visibility 0s 0.3s; -} - -.tap-target-wrapper.open { - visibility: visible; - transition: visibility 0s; -} - -.tap-target-wrapper.open .tap-target { - transform: scale(1); - opacity: 0.95; - transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); -} - -.tap-target-wrapper.open .tap-target-wave::before { - transform: scale(1); -} - -.tap-target-wrapper.open .tap-target-wave::after { - visibility: visible; - -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - transition: opacity 0.3s, transform 0.3s, visibility 0s 1s; -} - -.tap-target { - position: absolute; - font-size: 1rem; - border-radius: 50%; - background-color: #ee6e73; - box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2); - width: 100%; - height: 100%; - opacity: 0; - transform: scale(0); - transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1); -} - -.tap-target-content { - position: relative; - display: table-cell; -} - -.tap-target-wave { - position: absolute; - border-radius: 50%; - z-index: 10001; -} - -.tap-target-wave::before, -.tap-target-wave::after { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #ffffff; -} - -.tap-target-wave::before { - transform: scale(0); - transition: transform 0.3s; -} - -.tap-target-wave::after { - visibility: hidden; - transition: opacity 0.3s, transform 0.3s, visibility 0s; - z-index: -1; -} - -.tap-target-origin { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 10002; - position: absolute !important; -} - -.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small), -.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover { - background: none; -} - -@media only screen and (max-width: 600px) { - .tap-target, - .tap-target-wrapper { - width: 600px; - height: 600px; - } -} - -.pulse { - overflow: visible; - position: relative; -} - -.pulse::before { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: inherit; - border-radius: inherit; - transition: opacity 0.3s, transform 0.3s; - -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - z-index: -1; -} - -@-webkit-keyframes pulse-animation { - 0% { - opacity: 1; - transform: scale(1); - } - - 50% { - opacity: 0; - transform: scale(1.5); - } - - 100% { - opacity: 0; - transform: scale(1.5); - } -} - -@keyframes pulse-animation { - 0% { - opacity: 1; - transform: scale(1); - } - - 50% { - opacity: 0; - transform: scale(1.5); - } - - 100% { - opacity: 0; - transform: scale(1.5); - } -} - -/* Modal */ - -.datepicker-modal { - max-width: 325px; - min-width: 300px; - max-height: none; -} - -.datepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; -} - -.datepicker-controls { - display: flex; - justify-content: space-between; - width: 280px; - margin: 0 auto; -} - -.datepicker-controls .selects-container { - display: flex; -} - -.datepicker-controls .select-wrapper input { - border-bottom: none; - text-align: center; - margin: 0; -} - -.datepicker-controls .select-wrapper input:focus { - border-bottom: none; -} - -.datepicker-controls .select-wrapper .caret { - display: none; -} - -.datepicker-controls .select-year input { - width: 50px; -} - -.datepicker-controls .select-month input { - width: 70px; -} - -.month-prev, -.month-next { - margin-top: 4px; - cursor: pointer; - background-color: transparent; - border: none; -} - -/* Date Display */ - -.datepicker-date-display { - flex: 1 auto; - background-color: #26a69a; - color: #fff; - padding: 20px 22px; - font-weight: 500; -} - -.datepicker-date-display .year-text { - display: block; - font-size: 1.5rem; - line-height: 25px; - color: rgba(255, 255, 255, 0.7); -} - -.datepicker-date-display .date-text { - display: block; - font-size: 2.8rem; - line-height: 47px; - font-weight: 500; -} - -/* Calendar */ - -.datepicker-calendar-container { - flex: 2.5 auto; -} - -.datepicker-table { - width: 280px; - font-size: 1rem; - margin: 0 auto; -} - -.datepicker-table thead { - border-bottom: none; -} - -.datepicker-table th { - padding: 10px 5px; - text-align: center; -} - -.datepicker-table tr { - border: none; -} - -.datepicker-table abbr { - text-decoration: none; - color: #999; -} - -.datepicker-table td { - border-radius: 50%; - padding: 0; -} - -.datepicker-table td.is-today { - color: #26a69a; -} - -.datepicker-table td.is-selected { - background-color: #26a69a; - color: #fff; -} - -.datepicker-table td.is-outside-current-month, -.datepicker-table td.is-disabled { - color: rgba(0, 0, 0, 0.3); - pointer-events: none; -} - -.datepicker-day-button { - background-color: transparent; - border: none; - line-height: 38px; - display: block; - width: 100%; - border-radius: 50%; - padding: 0 5px; - cursor: pointer; - color: inherit; -} - -.datepicker-day-button:focus { - background-color: rgba(43, 161, 150, 0.25); -} - -/* Footer */ - -.datepicker-footer { - width: 280px; - margin: 0 auto; - padding-bottom: 5px; - display: flex; - justify-content: space-between; -} - -.datepicker-cancel, -.datepicker-clear, -.datepicker-today, -.datepicker-done { - color: #26a69a; - padding: 0 1rem; -} - -.datepicker-clear { - color: #F44336; -} - -/* Media Queries */ - -@media only screen and (min-width : 601px) { - .datepicker-modal { - max-width: 625px; - } - - .datepicker-container.modal-content { - flex-direction: row; - } - - .datepicker-date-display { - flex: 0 1 270px; - } - - .datepicker-controls, - .datepicker-table, - .datepicker-footer { - width: 320px; - } - - .datepicker-day-button { - line-height: 44px; - } -} - -/* Timepicker Containers */ - -.timepicker-modal { - max-width: 325px; - max-height: none; -} - -.timepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; -} - -.text-primary { - color: white; -} - -/* Clock Digital Display */ - -.timepicker-digital-display { - flex: 1 auto; - background-color: #26a69a; - padding: 10px; - font-weight: 300; -} - -.timepicker-text-container { - font-size: 4rem; - font-weight: bold; - text-align: center; - color: rgba(255, 255, 255, 0.6); - font-weight: 400; - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.timepicker-span-hours, -.timepicker-span-minutes, -.timepicker-span-am-pm div { - cursor: pointer; -} - -.timepicker-span-hours { - margin-right: 3px; -} - -.timepicker-span-minutes { - margin-left: 3px; -} - -.timepicker-display-am-pm { - font-size: 1.3rem; - position: absolute; - right: 1rem; - bottom: 1rem; - font-weight: 400; -} - -/* Analog Clock Display */ - -.timepicker-analog-display { - flex: 2.5 auto; -} - -.timepicker-plate { - background-color: #eee; - border-radius: 50%; - width: 270px; - height: 270px; - overflow: visible; - position: relative; - margin: auto; - margin-top: 25px; - margin-bottom: 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.timepicker-canvas, -.timepicker-dial { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} - -.timepicker-minutes { - visibility: hidden; -} - -.timepicker-tick { - border-radius: 50%; - color: rgba(0, 0, 0, 0.87); - line-height: 40px; - text-align: center; - width: 40px; - height: 40px; - position: absolute; - cursor: pointer; - font-size: 15px; -} - -.timepicker-tick.active, -.timepicker-tick:hover { - background-color: rgba(38, 166, 154, 0.25); -} - -.timepicker-dial { - transition: transform 350ms, opacity 350ms; -} - -.timepicker-dial-out { - opacity: 0; -} - -.timepicker-dial-out.timepicker-hours { - transform: scale(1.1, 1.1); -} - -.timepicker-dial-out.timepicker-minutes { - transform: scale(0.8, 0.8); -} - -.timepicker-canvas { - transition: opacity 175ms; -} - -.timepicker-canvas line { - stroke: #26a69a; - stroke-width: 4; - stroke-linecap: round; -} - -.timepicker-canvas-out { - opacity: 0.25; -} - -.timepicker-canvas-bearing { - stroke: none; - fill: #26a69a; -} - -.timepicker-canvas-bg { - stroke: none; - fill: #26a69a; -} - -/* Footer */ - -.timepicker-footer { - margin: 0 auto; - padding: 5px 1rem; - display: flex; - justify-content: space-between; -} - -.timepicker-clear { - color: #F44336; -} - -.timepicker-close { - color: #26a69a; -} - -.timepicker-clear, -.timepicker-close { - padding: 0 20px; -} - -/* Media Queries */ - -@media only screen and (min-width : 601px) { - .timepicker-modal { - max-width: 600px; - } - - .timepicker-container.modal-content { - flex-direction: row; - } - - .timepicker-text-container { - top: 32%; - } - - .timepicker-display-am-pm { - position: relative; - right: auto; - bottom: auto; - text-align: center; - margin-top: 1.2rem; - } -} - /*! * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) diff --git a/resources/sass/grille.scss b/resources/sass/grille.scss new file mode 100644 index 0000000..0e96154 --- /dev/null +++ b/resources/sass/grille.scss @@ -0,0 +1,57 @@ +$col: 13; + +.start { + justify-content: flex-start; +} + +.center { + justify-content: center; +} + +.end { + justify-content: flex-end; +} + +.v-center { + align-items: center; +} +.row{ + display:flex; + flex-direction: row; +} +/* +// ENABLE FOR DEV OR FOR DEMONSTRATION + +.col{ + border: 3px solid red; +} +.row{ + border: 3px solid green; +} +*/ + + + @media screen and (min-width: 600px) { + @for $i from 1 to $col { + + .s#{$i} { + width: calc(#{$i} * 8.334%); + } + } + } + @media screen and (min-width: 600px) and (max-width: 992px) { + @for $i from 1 to $col { + + .m#{$i} { + width: calc(#{$i} * 8.334%); + } + } + } + @media screen and (min-width: 992px) { + @for $i from 1 to $col { + + .l#{$i} { + width: calc(#{$i} * 8.334%); + } + } + } diff --git a/resources/sass/materialize/sass/materialize.scss b/resources/sass/materialize/sass/materialize.scss index 6a51657..56af04b 100644 --- a/resources/sass/materialize/sass/materialize.scss +++ b/resources/sass/materialize/sass/materialize.scss @@ -14,7 +14,6 @@ @import "components/global"; @import "components/badges"; @import "components/icons-material-design"; -@import "components/grid"; @import "components/navbar"; @import "components/typography"; @import "components/transitions"; @@ -33,9 +32,3 @@ @import "components/table_of_contents"; @import "components/sidenav"; @import "components/preloader"; -@import "components/slider"; -@import "components/carousel"; -@import "components/tapTarget"; -@import "components/pulse"; -@import "components/datepicker"; -@import "components/timepicker";