From: Vincent Vanwaelscappel Date: Tue, 25 Oct 2022 07:22:15 +0000 (+0200) Subject: wip #5541 @0.25 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=65c83e61af268c2250bdeb17448515453c64d3ab;p=eif-extranet.git wip #5541 @0.25 --- diff --git a/style/inc/_common.sass b/style/inc/_common.sass new file mode 100644 index 0000000..14718f4 --- /dev/null +++ b/style/inc/_common.sass @@ -0,0 +1,66 @@ +html, body, main + min-height: 100% + +body + background-color: $background-color + font-family: $font + opacity: 0 + transition: opacity 100ms + + &.ready + opacity: 1 + +.button + border-radius: 6px + display: inline-block + padding: 12px 50px 8px 20px + color: #fff + background-color: $button-color + height: 40px + position: relative + font-weight: bold + line-height: 0.9em + + svg + height: 30px + position: absolute + top: 5px + right: 13px + +svg + .no-msie + width: auto + height: auto + +main + // Le site est élastique jusqu'à 1650px, puis une scrollbar horizontale apparaît + min-width: 1650px + padding: $space $space $space $space*3+150px + + section + margin-top: 15px + padding: 15px 0 + + &.nomargin + margin-top: 0 + + h2 + color: $headings-color + font-size: 24px + font-weight: 900 + margin-bottom: 9px + + article + position: relative + background-color: #fff + border-radius: 6px + transition: box-shadow 0.5s + padding: 15px + + &:hover + box-shadow: 0 0 50px rgba(0, 0, 0, 0.1) + + h4 + color: $light-color + font-size: 16px + font-weight: 400 \ No newline at end of file diff --git a/style/inc/_forms.sass b/style/inc/_forms.sass new file mode 100644 index 0000000..64aaef5 --- /dev/null +++ b/style/inc/_forms.sass @@ -0,0 +1,141 @@ +.submit, input[type="text"], input[type="search"], select, textarea + height: 50px + padding: 15px + border: 0 + outline: 0 + border-radius: 4px + position: relative + font-size: 16px + +select + -webkit-appearance: none + -moz-appearance: none + background-image: url("data:image/svg+xml;utf8,") + background-repeat: no-repeat + background-position-x: 98% + background-position-y: 50% + + +input[type="text"], input[type="search"], select, textarea + background-color: #fff + color: $input-text-color + +.submit + display: inline-block + vertical-align: top + background-color: $button-color + color: #fff + cursor: pointer + padding: 15px 50px 15px 25px + + svg + position: absolute + top: 11px + right: 15px + height: 25px + +form + label + display: inline-block + vertical-align: bottom + position: relative + margin: 0 15px 30px 0 + + span + color: $input-text-color + font-size: 12px + text-transform: uppercase + position: absolute + top: -16px + left: 0 + + // Formulaires de filtre + &.filter-form + &.section + margin-bottom: 40px + @include white-block + + input[type="text"], input[type="search"], select, textarea + background-color: $background-color + + margin-top: 20px + + &.fields-large + input[type="text"], input[type="search"], select, textarea + width: 450px + + &.fields-medium + input[type="text"], input[type="search"], select, textarea + width: 300px + + .reset + display: inline-block + vertical-align: top + color: $cancel-color + margin: 17px 0 0 20px + + svg + height: 12px + + // Formulaire détail projet + &.details + input[type="text"], input[type="search"], select, textarea + height: 38px + padding: 9px 15px + + fieldset + padding-top: 30px + margin-top: 40px + + legend + display: block + width: 100% + padding: 10px + text-align: left + background-color: $thead-background + color: #ffffff + border-radius: 4px 4px 0 0 + + .fields + display: grid + grid-template-columns: repeat( 4, 1fr) + grid-gap: 35px 25px + + .no-cssgrid & + label + display: inline-block + width: 22% + margin: 0 25px 30px 0 + + &.grid-12 + grid-template-columns: repeat( 12, 1fr) + + .grid-item-2 + grid-column: 2 span + + .grid-item-4 + grid-column: 4 span + + .grid-item-6 + grid-column: 6 span + + + label + margin: 0 + + input[type="text"], input[type="search"], select, textarea + background-color: $background-color + width: 100% + + // Formulaire observations calcul projet + &.notes + label + height: 175px + width: 66% + margin-bottom: 0 + + textarea + width: 100% + height: 100% + resize: none + background-color: $background-color diff --git a/style/inc/_menu.sass b/style/inc/_menu.sass new file mode 100644 index 0000000..3fbac78 --- /dev/null +++ b/style/inc/_menu.sass @@ -0,0 +1,137 @@ +#menu + $width: 150px + $bgcolor: $menu-background + $bghover: $menu-background-hover + + position: fixed + top: $space + left: $space + text-align: center + width: $width + border-radius: 6px + height: calc(100% - 2 * $space) + background-color: $menu-background + font-size: 14px + z-index: 1 + + // Logo client + #logo-client + padding: $space + + // Logo EIF en bas du menu + #logo-eif + @media(max-height: 880px) + display: none + position: absolute + bottom: 0 + left: 0 + padding: 40px + color: #fff + font-size: 10px + + span + display: block + margin-top: 9px + + .compact + display: none + + .large + display: block + + // Elements de menu + nav + position: absolute + top: 90px + + & > ul > li + position: relative + font-weight: bold + + a + display: block + height: 125px + padding: $space + + svg + width: 40px + + span + display: block + text-transform: uppercase + text-align: center + margin: 5px auto + word-spacing: 50px + + ul + position: absolute + display: none + top: 20px + left: $width+1 + width: 180px + text-align: left + text-transform: uppercase + font-size: 14px + line-height: 1em + + li + a + display: block + padding: 13px 16px + height: 40px + background-color: $bgcolor + + &:hover + background-color: $bghover + + &:hover + background-color: $bghover + + &.active + background-color: $bghover + + ul + display: block + + a + color: #fff + + // Bouton de passage en mode compact + .toggle-menu + $width: 20px + position: absolute + right: -$width + top: $width + width: $width + height: 50px + background-color: $button-color + border-radius: 0 4px 4px 0 + padding: 14px 0 + + svg + width: 20px + transform-origin: 50% 50% + transform: scale(-1, 1) + +// Le menu est forcé en mode compact sur des hauteurs de fenêtre inférieures à 780px +@media(max-height: 780px) + @include menu-compact + + .toggle-menu + display: none + +.menu-compact + @include menu-compact + +// Style des tooltips du menu +.tippy-box[data-theme~='menu'] + $tooltip-menu-background: #292929 + background-color: $tooltip-menu-background + color: #fff + text-transform: uppercase + + &[data-placement^='top'], &[data-placement^='bottom'], &[data-placement^='left'], &[data-placement^='right'] + > .tippy-arrow::before + border-top-color: $tooltip-menu-background + + diff --git a/style/inc/_mixins.sass b/style/inc/_mixins.sass new file mode 100644 index 0000000..9333e99 --- /dev/null +++ b/style/inc/_mixins.sass @@ -0,0 +1,45 @@ +@import "variables" + +// Blocs blancs avec bords arrondis +@mixin white-block + border-radius: 6px + background-color: #fff + padding: $space + +// Menu compact +@mixin menu-compact + $compact-menu-space: 15px + $width: 70px + + main + padding: $space $space $space $space*3+70px + + #menu + width: $width + + .compact + display: block + + .large + display: none + + #logo-client, #logo-eif + padding: $compact-menu-space + + #logo-client + padding-top: $space + + nav > ul > li + > a + padding: $compact-menu-space + height: $width + + span + display: none + + ul + left: $width+1 + + .toggle-menu + svg + transform: scale(1, 1) \ No newline at end of file diff --git a/style/inc/_msie.sass b/style/inc/_msie.sass new file mode 100644 index 0000000..3a41e85 --- /dev/null +++ b/style/inc/_msie.sass @@ -0,0 +1,10 @@ +// Code spécifique à IE11 +.msie + #logo-client + .compact + svg + width: 40px + .menu-compact + #logo-eif + svg + width: 40px diff --git a/style/inc/_page-dashboard.sass b/style/inc/_page-dashboard.sass new file mode 100644 index 0000000..355d0e9 --- /dev/null +++ b/style/inc/_page-dashboard.sass @@ -0,0 +1,91 @@ +// Styles des pages de type dashboard (Missions > Tableau de bord ou Patrimoine) +main + section + + .grid + display: grid + grid-template-columns: repeat( 3, 1fr) + grid-gap: 25px + + // Indicateurs numériques (Tableau de bord et Patrimoine) + &.indicators + article + height: 100px + text-align: right + color: $headings-color + + .no-cssgrid & + display: inline-block + width: 30% + margin: 0 25px 25px 0 + + &.map + height: auto + min-height: 600px + grid-column: 2 / 4 + grid-row: 3 / 9 + .no-cssgrid & + height: 600px + width: calc(90% + 55px) + + strong + font-weight: 900 + font-size: 36px + margin-top: 10px + display: block + + svg + position: absolute + top: 15px + left: 15px + height: 70px + + // Graphiques (Tableau de bord) + &.charts + article + position: relative + padding: 20px + .no-cssgrid & + display: inline-block + width: 30% + margin: 0 25px 25px 0 + + h4 + margin: 5px + + .chart + img + width: 100% + height: 100% + object-fit: contain + object-position: 50% 0 + + .chart-menu + position: absolute + top: 20px + right: 20px + color: $light-color + + .dots + margin-top: 6px + svg + height: 10px + + .buttons + display: none + + a + display: inline-block + margin: 0 1px + color: $light-color + + svg + height: 30px + + &:hover + .chart-menu + .dots + display: none + + .buttons + display: block \ No newline at end of file diff --git a/style/inc/_page-table.sass b/style/inc/_page-table.sass new file mode 100644 index 0000000..bc17ee3 --- /dev/null +++ b/style/inc/_page-table.sass @@ -0,0 +1,35 @@ +// Pages de tableaux +main + section + &.table + @include white-block + + header, footer + position: relative + height: 40px + margin: 0 0 20px 0 + + .actions + position: absolute + top: 0 + right: 0 + + .button + margin-left: 15px + + h3 + color: $headings-color + text-align: center + font-size: 24px + font-weight: 900 + line-height: 40px + + footer + min-height: 40px + height: auto + margin: 20px 0 0 0 + + &.calculation + margin-top: 60px + + @import "table" diff --git a/style/inc/_reset.sass b/style/inc/_reset.sass new file mode 100644 index 0000000..d9535e1 --- /dev/null +++ b/style/inc/_reset.sass @@ -0,0 +1,42 @@ +// @see https://www.boag.online/blog/css-reset + +*, *:before, *:after + box-sizing: border-box + +html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video + margin: 0 + padding: 0 + border: 0 + font-size: 100% + font: inherit + vertical-align: baseline + text-rendering: optimizeLegibility + -webkit-font-smoothing: antialiased + text-size-adjust: none + +footer, header, nav, section, main + display: block + +body + line-height: 1 + +ol, ul + list-style: none + +blockquote, q + quotes: none + +blockquote:before, blockquote:after, q:before, q:after + content: '' + content: none + +table + border-collapse: collapse + border-spacing: 0 + +input[type="text"],input[type="input"] + -webkit-appearance: none + border-radius: 0 + +a + text-decoration: none \ No newline at end of file diff --git a/style/inc/_switch.sass b/style/inc/_switch.sass new file mode 100644 index 0000000..ff61bd5 --- /dev/null +++ b/style/inc/_switch.sass @@ -0,0 +1,33 @@ +// Style des switch (Interrupteurs Afficher Tout / Ma sélection) +.switch-large + margin-bottom: 40px + .switch + height: 50px + position: static + label, a + padding: 15px + +.switch + display: inline-block + background-color: #F0EDEB + border-radius: 4px + padding: 3px + position: absolute + + label, a + border-radius: 3px + padding: 8px 12px 12px + font-size: 16px + line-height: 0.9em + text-align: center + display: inline-block + cursor: pointer + color: $input-text-color + + input + visibility: hidden + position: absolute + + &.checked,&.active + background-color: #fff + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) \ No newline at end of file diff --git a/style/inc/_table.sass b/style/inc/_table.sass new file mode 100644 index 0000000..963c1a2 --- /dev/null +++ b/style/inc/_table.sass @@ -0,0 +1,121 @@ +table + width: 100% + font-size: 16px + + &.table-compact + font-size: 12px + td, th + padding: 10px 8px + + &.calculation + td, th + text-align: right + padding-right: 10px + + &:first-child + text-align: right + + &:last-child + padding-right: 30px + + input[type=checkbox] + text-align: center + + tr[data-href] + td + cursor: pointer + + &:first-child + cursor: auto + + td, th + padding: 10px + vertical-align: middle + text-align: left + height: 70px + + &:first-child + text-align: center + + thead + th + background-color: $thead-background + color: #fff + font-weight: bold + padding-right: 30px + position: relative + + svg + position: absolute + display: inline-block + height: 5px + overflow: visible + top: calc(50% - 6px) + right: 10px + + &.eif-order + height: 12px + color: rgba(255, 255, 255, 0.25) + + &.eif-order-asc + top: calc(50% - 6px) + + &.eif-order-desc + top: calc(50%) + + &:first-child + border-radius: 4px 0 0 0 + padding-right: 10px + + &:last-child + border-radius: 0 4px 0 0 + + tbody + tr + border-style: solid + border-width: 1px 0 + border-color: $light-color + + &.selected + td + background-color: $table-selected-background + + &:nth-child(even) + td + background-color: $table-odd-background + + &.selected + td + background-color: $table-odd-selected-background + + .svg-icon[class^=eif-evolution-] + position: relative + top: 2px + margin-left: 5px + + .svg-icon.eif-evolution-stable + color: $evolution-stable + height: 14px + + .svg-icon.eif-evolution-asc + color: $evolution-asc + height: 16px + + .svg-icon.eif-evolution-desc + color: $evolution-desc + height: 16px + + tfoot + tr:last-child + td:first-child + border-radius: 0 0 0 4px + + td:last-child + border-radius: 0 0 4px 0 + + td + background-color: $thead-background + color: #fff + font-weight: bold + height: 50px + padding: 15px 10px diff --git a/style/inc/_tags.sass b/style/inc/_tags.sass new file mode 100644 index 0000000..2ad66d0 --- /dev/null +++ b/style/inc/_tags.sass @@ -0,0 +1,20 @@ +// Tags de la page simulations +.tag + color: #fff + width: 180px + text-align: center + padding: 5px 0 + text-transform: uppercase + font-size: 14px + font-weight: bold + + &.red + background-color: $tag-red + &.yellow + background-color: $tag-yellow + &.green + background-color: $tag-green + &.orange + background-color: $tag-orange + &.brown + background-color: $tag-brown \ No newline at end of file diff --git a/style/inc/_variables.sass b/style/inc/_variables.sass new file mode 100644 index 0000000..d66b34d --- /dev/null +++ b/style/inc/_variables.sass @@ -0,0 +1,33 @@ +$font: Lato, sans-serif +$background-color: #F0EDEB +$menu-background: #363636 +$menu-background-hover: #151515 + +// Couleurs des tableaux +$thead-background: #363636 +$table-odd-background: rgba(240, 237, 235, 0.5) +$table-selected-background: #F9CABB +$table-odd-selected-background: #F9CABB + +// Réinitialiser les filtrers +$cancel-color: #D6231A + +// Boutons +$button-color: #c1ce3a +// Couleurs des textes +$input-text-color: #454565 +$headings-color: #454565 +$light-color: #a2a1bc +$space: 25px + +// Tags (simulations) +$tag-green: #c1ce3a +$tag-yellow: #F7D000 +$tag-orange: #f07800 +$tag-red: #d6231a +$tag-brown: #D2B48C + +// Flèches évolution (projections) +$evolution-stable: #BCBDC0 +$evolution-asc: #D6231A +$evolution-desc: #C1CE3A \ No newline at end of file diff --git a/style/inc/common.sass b/style/inc/common.sass deleted file mode 100644 index 14718f4..0000000 --- a/style/inc/common.sass +++ /dev/null @@ -1,66 +0,0 @@ -html, body, main - min-height: 100% - -body - background-color: $background-color - font-family: $font - opacity: 0 - transition: opacity 100ms - - &.ready - opacity: 1 - -.button - border-radius: 6px - display: inline-block - padding: 12px 50px 8px 20px - color: #fff - background-color: $button-color - height: 40px - position: relative - font-weight: bold - line-height: 0.9em - - svg - height: 30px - position: absolute - top: 5px - right: 13px - -svg - .no-msie - width: auto - height: auto - -main - // Le site est élastique jusqu'à 1650px, puis une scrollbar horizontale apparaît - min-width: 1650px - padding: $space $space $space $space*3+150px - - section - margin-top: 15px - padding: 15px 0 - - &.nomargin - margin-top: 0 - - h2 - color: $headings-color - font-size: 24px - font-weight: 900 - margin-bottom: 9px - - article - position: relative - background-color: #fff - border-radius: 6px - transition: box-shadow 0.5s - padding: 15px - - &:hover - box-shadow: 0 0 50px rgba(0, 0, 0, 0.1) - - h4 - color: $light-color - font-size: 16px - font-weight: 400 \ No newline at end of file diff --git a/style/inc/forms.sass b/style/inc/forms.sass deleted file mode 100644 index 64aaef5..0000000 --- a/style/inc/forms.sass +++ /dev/null @@ -1,141 +0,0 @@ -.submit, input[type="text"], input[type="search"], select, textarea - height: 50px - padding: 15px - border: 0 - outline: 0 - border-radius: 4px - position: relative - font-size: 16px - -select - -webkit-appearance: none - -moz-appearance: none - background-image: url("data:image/svg+xml;utf8,") - background-repeat: no-repeat - background-position-x: 98% - background-position-y: 50% - - -input[type="text"], input[type="search"], select, textarea - background-color: #fff - color: $input-text-color - -.submit - display: inline-block - vertical-align: top - background-color: $button-color - color: #fff - cursor: pointer - padding: 15px 50px 15px 25px - - svg - position: absolute - top: 11px - right: 15px - height: 25px - -form - label - display: inline-block - vertical-align: bottom - position: relative - margin: 0 15px 30px 0 - - span - color: $input-text-color - font-size: 12px - text-transform: uppercase - position: absolute - top: -16px - left: 0 - - // Formulaires de filtre - &.filter-form - &.section - margin-bottom: 40px - @include white-block - - input[type="text"], input[type="search"], select, textarea - background-color: $background-color - - margin-top: 20px - - &.fields-large - input[type="text"], input[type="search"], select, textarea - width: 450px - - &.fields-medium - input[type="text"], input[type="search"], select, textarea - width: 300px - - .reset - display: inline-block - vertical-align: top - color: $cancel-color - margin: 17px 0 0 20px - - svg - height: 12px - - // Formulaire détail projet - &.details - input[type="text"], input[type="search"], select, textarea - height: 38px - padding: 9px 15px - - fieldset - padding-top: 30px - margin-top: 40px - - legend - display: block - width: 100% - padding: 10px - text-align: left - background-color: $thead-background - color: #ffffff - border-radius: 4px 4px 0 0 - - .fields - display: grid - grid-template-columns: repeat( 4, 1fr) - grid-gap: 35px 25px - - .no-cssgrid & - label - display: inline-block - width: 22% - margin: 0 25px 30px 0 - - &.grid-12 - grid-template-columns: repeat( 12, 1fr) - - .grid-item-2 - grid-column: 2 span - - .grid-item-4 - grid-column: 4 span - - .grid-item-6 - grid-column: 6 span - - - label - margin: 0 - - input[type="text"], input[type="search"], select, textarea - background-color: $background-color - width: 100% - - // Formulaire observations calcul projet - &.notes - label - height: 175px - width: 66% - margin-bottom: 0 - - textarea - width: 100% - height: 100% - resize: none - background-color: $background-color diff --git a/style/inc/menu.sass b/style/inc/menu.sass deleted file mode 100644 index 5d94a9f..0000000 --- a/style/inc/menu.sass +++ /dev/null @@ -1,137 +0,0 @@ -#menu - $width: 150px - $bgcolor: $menu-background - $bghover: #292929 - - position: fixed - top: $space - left: $space - text-align: center - width: $width - border-radius: 6px - height: calc(100% - 2 * $space) - background-color: $menu-background - font-size: 14px - z-index: 1 - - // Logo client - #logo-client - padding: $space - - // Logo EIF en bas du menu - #logo-eif - @media(max-height: 880px) - display: none - position: absolute - bottom: 0 - left: 0 - padding: 40px - color: #fff - font-size: 10px - - span - display: block - margin-top: 9px - - .compact - display: none - - .large - display: block - - // Elements de menu - nav - position: absolute - top: 90px - - & > ul > li - position: relative - font-weight: bold - - a - display: block - height: 125px - padding: $space - - svg - width: 40px - - span - display: block - text-transform: uppercase - text-align: center - margin: 5px auto - word-spacing: 50px - - ul - position: absolute - display: none - top: 20px - left: $width+1 - width: 180px - text-align: left - text-transform: uppercase - font-size: 14px - line-height: 1em - - li - a - display: block - padding: 13px 16px - height: 40px - background-color: $bgcolor - - &:hover - background-color: $bghover - - &:hover - background-color: $bghover - - &.active - background-color: $bghover - - ul - display: block - - a - color: #fff - - // Bouton de passage en mode compact - .toggle-menu - $width: 20px - position: absolute - right: -$width - top: $width - width: $width - height: 50px - background-color: $button-color - border-radius: 0 4px 4px 0 - padding: 14px 0 - - svg - width: 20px - transform-origin: 50% 50% - transform: scale(-1, 1) - -// Le menu est forcé en mode compact sur des hauteurs de fenêtre inférieures à 780px -@media(max-height: 780px) - @include menu-compact - - .toggle-menu - display: none - -.menu-compact - @include menu-compact - -// Style des tooltips du menu -.tippy-box[data-theme~='menu'] - $tooltip-menu-background: #292929 - background-color: $tooltip-menu-background - color: #fff - text-transform: uppercase - - &[data-placement^='top'], &[data-placement^='bottom'], &[data-placement^='left'], &[data-placement^='right'] - > .tippy-arrow::before - border-top-color: $tooltip-menu-background - - diff --git a/style/inc/mixins.sass b/style/inc/mixins.sass deleted file mode 100644 index 9333e99..0000000 --- a/style/inc/mixins.sass +++ /dev/null @@ -1,45 +0,0 @@ -@import "variables" - -// Blocs blancs avec bords arrondis -@mixin white-block - border-radius: 6px - background-color: #fff - padding: $space - -// Menu compact -@mixin menu-compact - $compact-menu-space: 15px - $width: 70px - - main - padding: $space $space $space $space*3+70px - - #menu - width: $width - - .compact - display: block - - .large - display: none - - #logo-client, #logo-eif - padding: $compact-menu-space - - #logo-client - padding-top: $space - - nav > ul > li - > a - padding: $compact-menu-space - height: $width - - span - display: none - - ul - left: $width+1 - - .toggle-menu - svg - transform: scale(1, 1) \ No newline at end of file diff --git a/style/inc/msie.sass b/style/inc/msie.sass deleted file mode 100644 index 2c630a3..0000000 --- a/style/inc/msie.sass +++ /dev/null @@ -1,11 +0,0 @@ -// Code spécifique à IE11 -.msie - #logo-client - .compact - svg - width: 40px - .menu-compact - #logo-eif - svg - width: 40px - diff --git a/style/inc/page-dashboard.sass b/style/inc/page-dashboard.sass deleted file mode 100644 index 355d0e9..0000000 --- a/style/inc/page-dashboard.sass +++ /dev/null @@ -1,91 +0,0 @@ -// Styles des pages de type dashboard (Missions > Tableau de bord ou Patrimoine) -main - section - - .grid - display: grid - grid-template-columns: repeat( 3, 1fr) - grid-gap: 25px - - // Indicateurs numériques (Tableau de bord et Patrimoine) - &.indicators - article - height: 100px - text-align: right - color: $headings-color - - .no-cssgrid & - display: inline-block - width: 30% - margin: 0 25px 25px 0 - - &.map - height: auto - min-height: 600px - grid-column: 2 / 4 - grid-row: 3 / 9 - .no-cssgrid & - height: 600px - width: calc(90% + 55px) - - strong - font-weight: 900 - font-size: 36px - margin-top: 10px - display: block - - svg - position: absolute - top: 15px - left: 15px - height: 70px - - // Graphiques (Tableau de bord) - &.charts - article - position: relative - padding: 20px - .no-cssgrid & - display: inline-block - width: 30% - margin: 0 25px 25px 0 - - h4 - margin: 5px - - .chart - img - width: 100% - height: 100% - object-fit: contain - object-position: 50% 0 - - .chart-menu - position: absolute - top: 20px - right: 20px - color: $light-color - - .dots - margin-top: 6px - svg - height: 10px - - .buttons - display: none - - a - display: inline-block - margin: 0 1px - color: $light-color - - svg - height: 30px - - &:hover - .chart-menu - .dots - display: none - - .buttons - display: block \ No newline at end of file diff --git a/style/inc/page-table.sass b/style/inc/page-table.sass deleted file mode 100644 index bc17ee3..0000000 --- a/style/inc/page-table.sass +++ /dev/null @@ -1,35 +0,0 @@ -// Pages de tableaux -main - section - &.table - @include white-block - - header, footer - position: relative - height: 40px - margin: 0 0 20px 0 - - .actions - position: absolute - top: 0 - right: 0 - - .button - margin-left: 15px - - h3 - color: $headings-color - text-align: center - font-size: 24px - font-weight: 900 - line-height: 40px - - footer - min-height: 40px - height: auto - margin: 20px 0 0 0 - - &.calculation - margin-top: 60px - - @import "table" diff --git a/style/inc/reset.sass b/style/inc/reset.sass deleted file mode 100644 index d9535e1..0000000 --- a/style/inc/reset.sass +++ /dev/null @@ -1,42 +0,0 @@ -// @see https://www.boag.online/blog/css-reset - -*, *:before, *:after - box-sizing: border-box - -html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video - margin: 0 - padding: 0 - border: 0 - font-size: 100% - font: inherit - vertical-align: baseline - text-rendering: optimizeLegibility - -webkit-font-smoothing: antialiased - text-size-adjust: none - -footer, header, nav, section, main - display: block - -body - line-height: 1 - -ol, ul - list-style: none - -blockquote, q - quotes: none - -blockquote:before, blockquote:after, q:before, q:after - content: '' - content: none - -table - border-collapse: collapse - border-spacing: 0 - -input[type="text"],input[type="input"] - -webkit-appearance: none - border-radius: 0 - -a - text-decoration: none \ No newline at end of file diff --git a/style/inc/switch.sass b/style/inc/switch.sass deleted file mode 100644 index ff61bd5..0000000 --- a/style/inc/switch.sass +++ /dev/null @@ -1,33 +0,0 @@ -// Style des switch (Interrupteurs Afficher Tout / Ma sélection) -.switch-large - margin-bottom: 40px - .switch - height: 50px - position: static - label, a - padding: 15px - -.switch - display: inline-block - background-color: #F0EDEB - border-radius: 4px - padding: 3px - position: absolute - - label, a - border-radius: 3px - padding: 8px 12px 12px - font-size: 16px - line-height: 0.9em - text-align: center - display: inline-block - cursor: pointer - color: $input-text-color - - input - visibility: hidden - position: absolute - - &.checked,&.active - background-color: #fff - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) \ No newline at end of file diff --git a/style/inc/table.sass b/style/inc/table.sass deleted file mode 100644 index 963c1a2..0000000 --- a/style/inc/table.sass +++ /dev/null @@ -1,121 +0,0 @@ -table - width: 100% - font-size: 16px - - &.table-compact - font-size: 12px - td, th - padding: 10px 8px - - &.calculation - td, th - text-align: right - padding-right: 10px - - &:first-child - text-align: right - - &:last-child - padding-right: 30px - - input[type=checkbox] - text-align: center - - tr[data-href] - td - cursor: pointer - - &:first-child - cursor: auto - - td, th - padding: 10px - vertical-align: middle - text-align: left - height: 70px - - &:first-child - text-align: center - - thead - th - background-color: $thead-background - color: #fff - font-weight: bold - padding-right: 30px - position: relative - - svg - position: absolute - display: inline-block - height: 5px - overflow: visible - top: calc(50% - 6px) - right: 10px - - &.eif-order - height: 12px - color: rgba(255, 255, 255, 0.25) - - &.eif-order-asc - top: calc(50% - 6px) - - &.eif-order-desc - top: calc(50%) - - &:first-child - border-radius: 4px 0 0 0 - padding-right: 10px - - &:last-child - border-radius: 0 4px 0 0 - - tbody - tr - border-style: solid - border-width: 1px 0 - border-color: $light-color - - &.selected - td - background-color: $table-selected-background - - &:nth-child(even) - td - background-color: $table-odd-background - - &.selected - td - background-color: $table-odd-selected-background - - .svg-icon[class^=eif-evolution-] - position: relative - top: 2px - margin-left: 5px - - .svg-icon.eif-evolution-stable - color: $evolution-stable - height: 14px - - .svg-icon.eif-evolution-asc - color: $evolution-asc - height: 16px - - .svg-icon.eif-evolution-desc - color: $evolution-desc - height: 16px - - tfoot - tr:last-child - td:first-child - border-radius: 0 0 0 4px - - td:last-child - border-radius: 0 0 4px 0 - - td - background-color: $thead-background - color: #fff - font-weight: bold - height: 50px - padding: 15px 10px diff --git a/style/inc/tags.sass b/style/inc/tags.sass deleted file mode 100644 index 2ad66d0..0000000 --- a/style/inc/tags.sass +++ /dev/null @@ -1,20 +0,0 @@ -// Tags de la page simulations -.tag - color: #fff - width: 180px - text-align: center - padding: 5px 0 - text-transform: uppercase - font-size: 14px - font-weight: bold - - &.red - background-color: $tag-red - &.yellow - background-color: $tag-yellow - &.green - background-color: $tag-green - &.orange - background-color: $tag-orange - &.brown - background-color: $tag-brown \ No newline at end of file diff --git a/style/inc/variables.sass b/style/inc/variables.sass deleted file mode 100644 index cedf43d..0000000 --- a/style/inc/variables.sass +++ /dev/null @@ -1,32 +0,0 @@ -$font: Lato, sans-serif -$background-color: #F0EDEB -$menu-background: #363636 - -// Couleurs des tableaux -$thead-background: #363636 -$table-odd-background: rgba(240, 237, 235, 0.5) -$table-selected-background: #F9CABB -$table-odd-selected-background: #F9CABB - -// Réinitialiser les filtrers -$cancel-color: #D6231A - -// Boutons -$button-color: #c1ce3a -// Couleurs des textes -$input-text-color: #454565 -$headings-color: #454565 -$light-color: #a2a1bc -$space: 25px - -// Tags (simulations) -$tag-green: #c1ce3a -$tag-yellow: #F7D000 -$tag-orange: #f07800 -$tag-red: #d6231a -$tag-brown: #D2B48C - -// Flèches évolution (projections) -$evolution-stable: #BCBDC0 -$evolution-asc: #D6231A -$evolution-desc: #C1CE3A \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index 8d57526..5020b89 100644 --- a/style/style.sass +++ b/style/style.sass @@ -1,12 +1,12 @@ -@import "inc/variables" -@import "inc/reset" -@import "inc/mixins" -@import "inc/common" -@import "inc/page-dashboard" -@import "inc/page-table" -@import "inc/table" -@import "inc/forms" -@import "inc/menu" -@import "inc/switch" -@import "inc/tags" -@import "inc/msie" \ No newline at end of file +@import "inc/_variables" +@import "inc/_reset" +@import "inc/_mixins" +@import "inc/_common" +@import "inc/_page-dashboard" +@import "inc/_page-table" +@import "inc/_table" +@import "inc/_forms" +@import "inc/_menu" +@import "inc/_switch" +@import "inc/_tags" +@import "inc/_msie"