wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3028 from nextcloud/tooltip-scss-optimisation

Browse source 
Tooltip scss optimisation
This commit is contained in:
Roeland Jago Douma 2017-01-11 16:38:18 +01:00 committed by GitHub
commit 96d2f2f124
1 changed files with 62 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
core/css/tooltip.scss
View file

@ -30,21 +30,79 @@
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity = 90); filter: alpha(opacity = 90);
} }
&.top { &.top {
margin-top: -3px; margin-top: -3px;
padding: 5px 0; padding: 5px 0;
} }
&.right {
margin-left: 3px;
padding: 0 5px;
}
&.bottom { &.bottom {
margin-top: 3px; margin-top: 3px;
padding: 5px 0; padding: 5px 0;
} }
&.right {
margin-left: 3px;
padding: 0 5px;
.tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
}
&.left { &.left {
margin-left: -3px; margin-left: -3px;
padding: 0 5px; padding: 0 5px;
.tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
}
/* TOP */
&.top .tooltip-arrow,
&.top-left .tooltip-arrow,
&.top-right .tooltip-arrow {
bottom: 0;
border-width: 5px 5px 0;
border-top-color: #000000;
}
&.top .tooltip-arrow {
left: 50%;
margin-left: -5px;
}
&.top-left .tooltip-arrow {
right: 5px;
margin-bottom: -5px;
}
&.top-right .tooltip-arrow {
left: 5px;
margin-bottom: -5px;
}
/* BOTTOM */
&.bottom .tooltip-arrow,
&.bottom-left .tooltip-arrow,
&.bottom-right .tooltip-arrow {
top: 0;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
&.bottom .tooltip-arrow {
left: 50%;
margin-left: -5px;
}
&.bottom-left .tooltip-arrow {
right: 5px;
margin-top: -5px;
}
&.bottom-right .tooltip-arrow {
left: 5px;
margin-top: -5px;
} }
} }
@ -64,62 +122,3 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
&.top-left .tooltip-arrow {
bottom: 0;
right: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
}