ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve tips styling and allow it in any button

Browse Source
This commit is contained in:
Alice Gaudon 2020-07-30 10:54:14 +02:00
parent 3b94b9818c
commit 7d75df2f56
1 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
assets/sass/layout.scss
View File

@ -21,6 +21,46 @@ body {
background-color: $backgroundColor; background-color: $backgroundColor;
} }
@mixin tip {
position: relative;
.tip {
visibility: hidden;
position: absolute;
z-index: 10000;
pointer-events: none;
display: block;
width: max-content;
height: 30px;
padding: 4px 8px;
line-height: 22px;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 18px;
color: $defaultTextColor;
opacity: 0;
transition: opacity ease-out 100ms, visibility step-end 150ms;
transition-delay: 0ms;
background-color: #000;
border-radius: 5px;
text-transform: initial;
font-weight: initial;
}
&:hover, &:active {
.tip {
visibility: visible;
opacity: 1;
transition: opacity ease-out 100ms;
transition-delay: 150ms;
}
}
}
header { header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -77,13 +117,6 @@ header {
&:not(button) { &:not(button) {
background-color: rgba(255, 255, 255, 0.07); background-color: rgba(255, 255, 255, 0.07);
} }
.tip {
visibility: visible;
opacity: 1;
transition: opacity ease-out 100ms;
transition-delay: 150ms;
}
} }
.feather { .feather {
@ -99,11 +132,6 @@ header {
.feather { .feather {
margin-right: 0; margin-right: 0;
} }
.tip {
text-transform: initial;
font-weight: initial;
}
} }
form { form {
@ -179,32 +207,12 @@ header {
@media (min-width: $menuLayoutSwitchTreshold) { @media (min-width: $menuLayoutSwitchTreshold) {
nav ul li { nav ul li {
a, button { a, button, .button {
.tip { @include tip;
visibility: hidden;
position: absolute;
display: block;
width: max-content;
height: 30px;
padding: 4px 8px;
line-height: 22px;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 18px;
color: $defaultTextColor;
opacity: 0;
transition: opacity ease-out 100ms, visibility step-end 150ms;
transition-delay: 0ms;
background-color: #000;
border-radius: 5px;
}
} }
&:last-child { &:last-child {
a, button { a, button, .button {
.tip { .tip {
left: unset; left: unset;
right: 4px; right: 4px;
@ -226,6 +234,10 @@ footer {
main { main {
flex: 1; flex: 1;
padding: 8px; padding: 8px;
button, .button {
@include tip;
}
} }
h1 { h1 {