|
- $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;
- display: block;
- width : 75%;
- margin : 50px 0px 100px 0px;
- ul, li {
- padding:0;
- margin: 0;
- }
-
-
-
- & > ul {
- display: flex;
- justify-content:flex-start;
- position: relative;
- li, button{
- cursor: pointer;
- }
- ul {
- display:none;
- position: absolute;
- }
- & > li {
- 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;
-
- button {
- border :none;
- background-color: white;
- width: 100%;
- }
- }
- }
- }
-
-
- }
- }
-
- }
|