From 44de43568a36404b95e5cf9e1c335100bde67925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Chauveau?= Date: Sun, 3 May 2020 21:07:18 +0200 Subject: [PATCH] =?UTF-8?q?s=C3=A9parations=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/_vars.scss | 5 ++ src/assets/menubar.scss | 112 --------------------------------------- src/assets/menuchar.scss | 112 +++++++++++++++++++++++++++++++++++++++ src/assets/menupara.scss | 44 +++++++++++++++ 4 files changed, 161 insertions(+), 112 deletions(-) create mode 100644 src/assets/_vars.scss delete mode 100644 src/assets/menubar.scss create mode 100644 src/assets/menuchar.scss create mode 100644 src/assets/menupara.scss diff --git a/src/assets/_vars.scss b/src/assets/_vars.scss new file mode 100644 index 0000000..3c4813e --- /dev/null +++ b/src/assets/_vars.scss @@ -0,0 +1,5 @@ + +$txt-color: black; +$bg-color: white; +$button-border: 2px solid $txt-color; +$button-border-small: 1px solid $txt-color; diff --git a/src/assets/menubar.scss b/src/assets/menubar.scss deleted file mode 100644 index 6898f4e..0000000 --- a/src/assets/menubar.scss +++ /dev/null @@ -1,112 +0,0 @@ -$button-width: 42px; -$button-border: 2px solid black; -.menubar { - - - &.paragraph-menubar { - position: fixed; - display: flex; - flex-direction: column; - - top: 100px; - right: 25px; - - button { - cursor: pointer; - width: $button-width; - height: $button-width; - background-color: white; - border-left: $button-border; - border-right: $button-border; - border-bottom: $button-border; - border-top: none; - - &:nth-child(1) { - border-top: $button-border; - } - - &:hover { - color: white; - background-color: black; - } - } - } - - &.char-menubar { - - top: 10px; - left: 0px; - display: block; - width: 100%; - position: fixed; - text-align: center; - z-index: 10; - ul, li { - padding: 0; - margin: 0; - } - - - & > ul { - display: flex; - justify-content: center; - position: relative; - - li, button { - cursor: pointer; - } - - ul { - display: none; - position: absolute; - } - - & > li { - background-color: white; - width: 150px; - list-style-type: none; - border-top: $button-border; - border-right: $button-border; - border-bottom: $button-border; - - &:nth-child(1) { - border-left: $button-border; - } - } - - li:hover { - ul { - display: flex; - flex-direction: column; - position: absolute; - width: 152px; - - li { - border-left: $button-border; - border-right: $button-border; - border-bottom: $button-border; - list-style-type: none; - margin-left: -2px; - background-color: white; - - button { - border: none; - background-color: white; - width: 100%; - } - } - } - } - - } - - - - } - - .menubar__button.is-active{ - color: white; - background-color: black; - } - -} diff --git a/src/assets/menuchar.scss b/src/assets/menuchar.scss new file mode 100644 index 0000000..b123407 --- /dev/null +++ b/src/assets/menuchar.scss @@ -0,0 +1,112 @@ +@import '_vars'; + +$btn-width:120px; + + +/* Dropdown Button */ +.dropbtn { + background-color: $bg-color; + color: $txt-color; + //padding: 16px; + //font-size: 16px; + //border: none; + min-width: $btn-width; + border-top: $button-border; + border-right: $button-border-small; + border-bottom: $button-border; + border-left: $button-border-small; + + &.border-left{ + border-left : $button-border; + } + + &.border-right{ + border-right : $button-border; + } +} + + + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + min-width: $btn-width; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + //padding: 12px 16px; + //text-decoration: none; + display: block; + //border: $button-border; + background-color: $txt-color; + padding: 5px; + button { + //background-color: transparent; + border: none; + } +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover { + //background-color: $txt-color; + //color: $bg-color; + button{ + //background-color: $txt-color; + //color: $bg-color; + cursor: pointer; + } +} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn { + //background-color: $txt-color; + //color: $bg-color; +} + + +/*menububble */ +.menububble { + visibility: hidden; + background-color: black; + border-radius: 5px; + z-index: 100; + padding: 5px; + position: fixed; + top: 15px; + //width: 50vw; + //margin: auto; + bottom : unset !important; + left: unset !important; + //position: absolute; + //bottom: 25px; + //left:0px; +} + +.menububble.is-active { + visibility: visible; +} + +.menububble button { + background-color: black; + border: none; + color: white; + border-radius: 5px; +} + +#link__button{ + min-width: 80px; +} diff --git a/src/assets/menupara.scss b/src/assets/menupara.scss new file mode 100644 index 0000000..cda6594 --- /dev/null +++ b/src/assets/menupara.scss @@ -0,0 +1,44 @@ + +@import '_vars.scss'; + +$button-width: 42px; + +.menubar { + + + &.paragraph-menubar { + position: fixed; + display: flex; + flex-direction: column; + + top: 100px; + right: 25px; + + button { + cursor: pointer; + width: $button-width; + height: $button-width; + background-color: white; + border-left: $button-border; + border-right: $button-border; + border-bottom: $button-border; + border-top: none; + + &:nth-child(1) { + border-top: $button-border; + } + + &:hover { + color: white; + background-color: black; + } + } + } + + .menubar__button.is-active{ + color: white; + background-color: black; + } + +} +