flectra/doc/_extensions/flectra_ext/static/aside.less
2018-02-11 23:55:56 -08:00

339 lines
7.3 KiB
Plaintext

// ====== Aside =======
// ======================
aside {
.pseudo-col();
width: 100%;
max-width: 240px;
position: static;
padding: 0;
display: block;
border-right: 1px solid @gray-lighter;
@media (max-width:@screen-md-min) {
display: none;
}
}
.navbar-aside {
position: relative;
overflow: hidden;
font-family: @headings-font-family;
font-size: 0.85em;
line-height: 1.5;
overflow-y: auto;
&.affix {
z-index: 2;
top: @w-sub-nav-height - 1;
position: fixed;
backface-visibility: hidden;
@media (max-width:@screen-md-min) {
display: none;
}
}
> ul.list-group {
margin: 0;
z-index: 0;
}
> h3 {
margin: 0;
padding: 15px 0 10px;
text-transform: uppercase;
font-weight: @fw_semibold;
font-size: 16px;
color: @text-color;
overflow-x: hidden;
position: relative;
z-index: 1;
.box-shadow(0 10px 9px -10px #d2d2d2);
}
.gith-container {
margin: 0;
z-index: 1;
position: relative;
overflow-x: hidden;
.gith-link {
color: @text-color;
text-decoration: none;
display: inline-block;
position: relative;
margin: 10px 0;
font-family: @font-family-base;
&:hover {
color: @headings-color;
text-decoration: none;
}
&:before {
.square(1em);
content: '';
position: relative;
background-image: url('img/github-square_32.png');
background-size: 100%;
display: inline-block;
vertical-align: middle;
.translate(0;-1px);
}
}
}
//-- All menu levels
ul {
padding: 0;
position: relative;
margin-bottom: 0 !important;
li {
padding: 0;
margin-bottom: 0;
&:first-child, &:last-child {
// Reset border radius
border-radius: 0;
}
&:first-child {
overflow: hidden;
border-radius: 2px 0 0 0;
}
> a {
display: block;
padding: 5px 15px;
color: @text-color;
line-height: 1.2;
&:focus, &:hover {
color: @headings-color;
}
}
&.parent > a:after{
content: '\e7c1';
font-family: 'Material-Design-Icons';
opacity: 0.8;
margin-top: -6px;
.o-position-absolute(50%, 10px);
.rotate(90deg);
.transition(transform 0.2s);
}
&.parent.active > a:after{
.rotate(0);
}
}
//-- Inner menu list
ul {
max-height: 0;
background-color: fade(@gray-light, 20%);
padding: 0px;
overflow: hidden;
margin-left: 0;
box-shadow: inset 0 3px 5px -2px @gray-light;
.transition(max-height 0.3s @o-ease);
> li:not(:last-child) {
box-shadow: 0 1px 0 fade(black, 4%);
&.active > ul > li:not(:first-child) {
border-top: 1px solid @gray-lighter;
}
}
}
}
//-- Active lis
li.active {
&, &:focus, &:hover {
border-color: @gray-lighter;
background: transparent;
> a {
font-weight: bold;
color: @headings-color;
}
}
> ul {
max-height: 1000px;
}
}
// First menu level
> ul > li {
background: white;
border-bottom: 1px solid fade(black, 8%);
> a {
padding: 10px 15px;
border-left: 3px solid transparent;
}
&:focus, &:hover {
> a {
border-left: 3px solid @gray-light;
background-color: transparent;
}
}
&.active, &.active:focus, &.active:hover {
> a {
border-left: 3px solid @brand-primary;
}
}
&.active.parent + li {
box-shadow: 0 -3px 5px -4px fade(@gray-darker, 40%);
}
> ul > li {
> a {
padding-left: 20px;
}
> ul > li {
> a {
padding-left: 30px;
}
> ul > li > a {
padding-left: 40px;
}
}
}
}
}
.floating_action_container {
position: fixed;
right: 8px;
bottom: 8px;
width: auto;
z-index: @zIndex--float_action;
@media (min-width:@screen-md-min) {
display: none;
}
}
#floating_action {
.square(56px);
display: inline-block;
z-index: 0;
background-color: transparent;
border-radius: 50%;
padding: 16px;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
background-color: @brand-primary;
.transition(transform 500ms @o-ease);
i {
color: white;
}
&.active {
.transform(~ "translateZ(0px) rotateZ(-180deg)");
}
}
#floating_action_menu {
.o-position-absolute(auto,0,0);
z-index: 1;
overflow: hidden;
width: 380px;
padding: 0;
display: block;
border-radius: 2px;
visibility: hidden;
.transition(all 0.5s);
.box-shadow(0 0 0 transparent);
.content {
margin: 0;
opacity:0;
li {
border: none;
border-top: 1px solid #DDD;
&:first-child {
border-top: none;
}
}
a {
display: inline-block;
cursor: pointer;
color: @headings-color;
text-decoration: none;
float: left;
width: 100%;
padding: 5px 10px;
}
}
.bubble {
.o-position-absolute(auto,28px,28px);
.square(1px);
background: @brand-primary;
content: '';
color: #fff;
border-radius: 50%;
.transition(all 300ms @o-ease);
}
&:before {
.bubble;
background: white;
}
&.active {
display: block;
visibility: visible;
.transition(all 500ms @o-ease);
&:before, .bubble {
.size(1000px; 2000px);
border-radius: 50%;
opacity: 0;
margin-right: -500px;
margin-bottom: -500px;
display: block;
.transition(all .4s @o-ease);
}
&:before {
.opacity(1);
}
.content {
position: relative;
z-index: 1;
.opacity(1);
.transition(all 500ms @ease-material-3);
}
}
}
#mask {
.opacity(0);
position: fixed;
z-index: @zIndex--mask;
top: 0;
left: 0;
.size(100%; 0);
background-color: fade(black, 20%);
.transition(opacity .3s);
&.active {
.opacity(1);
display: block;
.square(100%);
.transition(opacity .3s);
}
}