github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-05-30 20:15:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Major CSS revamp

Browse Source 
- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.
This commit is contained in:
Toby Zerner
2015-07-17 14:47:49 +09:30
parent 76678f72f2
commit a9ded36b57
206 changed files with 4337 additions and 8830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
less/lib/Tooltip.less Executable file
View File

@ -0,0 +1,72 @@
// ------------------------------------
// Tooltips
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
font-size: 12px;
font-weight: normal;
line-height: 1.4;
opacity: 0;
.transition(0.15s opacity linear);
&.in { opacity: 1; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 7px 12px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius;
}
// Arrows
@tooltip-arrow-width: 5px;
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
}
}