QRouland/qrouland.com
1
0
Fork 0
Code Pull Requests Releases Activity

Site Skeleton

Browse Source
This commit is contained in:
Quentin Rouland
2019-09-05 14:38:10 +02:00
parent 62f9eaf019
commit 9185f3cf63
136 changed files with 91634 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
mdb/scss/free/_treeview.scss Normal file
View File

@ -0,0 +1,229 @@
// Treeview
.treeview {
&.w-20 {
width: 20rem;
}
.rotate {
cursor: pointer;
user-select: none;
transition: all .1s linear;
font-size: .8rem;
vertical-align: text-top;
margin-top: .2rem;
&.down {
transform: rotate(90deg);
}
}
.nested {
display: none;
}
.active {
display: block;
}
ul {
list-style-type: none;
}
.ic-w {
width: 1.3rem;
}
}
.treeview-animated {
&.w-20 {
width: 20rem;
}
ul {
position: relative;
list-style: none;
padding-left: 1em;
}
.treeview-animated-list {
li {
padding: 0.2em 0 0 0.2em;
}
.treeview-animated-items {
.nested {
&::before {
content: "";
display: block;
position: absolute;
background-color: grey;
left: 5px;
width: 5px;
height: 100%;
}
}
.closed {
display: block;
padding: 0.2em 0.2em 0.2em 0.4em;
margin-right: 0;
border-top-left-radius: 0.3em;
border-bottom-left-radius: 0.3em;
&:hover {
background-color: rgb(140, 185, 255);
}
.fa-angle-right {
transition: all .1s linear;
font-size: .8rem;
&.down {
position: relative;
color: #f8f9fa;
transform: rotate(90deg);
}
}
}
.open {
transition: all .1s linear;
background-color: rgb(50, 160, 255);
&:hover {
color: #f8f9fa;
background-color: rgb(50, 160, 255);
}
span {
color: #f8f9fa;
}
}
}
.treeview-animated-element {
padding: 0.2em 0.2em 0.2em 0.6em;
cursor: pointer;
transition: all .1s linear;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
&:hover {
background-color: rgb(140, 185, 255);
}
&.opened {
color: #f8f9fa;
background-color: rgb(50, 160, 255);
&:hover {
color: #f8f9fa;
background-color: rgb(50, 160, 255);
}
}
}
}
}
.treeview-colorful {
font-size: 16px;
font-weight: 400;
background: rgba(224, 127, 178, 0.2);
&.w-20 {
width: 20rem;
}
hr {
border-color: #a2127a;
}
h6 {
font-size: 1.4em;
font-weight: 500;
color: #a2127a;
}
ul {
position: relative;
list-style: none;
padding-left: 0;
}
.treeview-colorful-list {
ul {
padding-left: 1em;
margin-top: 0.1em;
background: rgba(224, 127, 178, 0.2);
}
}
.treeview-colorful-element {
padding: 0.2em 0.2em 0.2em 1em;
cursor: pointer;
transition: all .1s linear;
border: 2px solid transparent;
border-right: 0px solid transparent;
&:hover {
background-color: #e07fb2;
}
&.opened {
color: #ffac47;
border: 2px solid #ffac47;
border-right: 0px solid transparent;
background-color: #a2127a;
&:hover {
color: #ffac47;
background-color: #a2127a;
}
}
}
.treeview-colorful-items-header {
display: block;
padding: 0.4em;
margin-right: 0;
border-bottom: 2px solid transparent;
transition: all .1s linear;
&:hover {
background-color: #e07fb2
}
&.open {
transition: all .1s linear;
background-color: #a2127a;
border-bottom: 2px solid #ffac47;
span {
color: #ffac47;
}
&:hover {
color: #ffac47;
background-color: #a2127a;
}
div:hover {
background-color: #a2127a;
}
}
.fa-angle-right {
transition: all .2s linear;
font-size: .8rem;
}
.fas {
position: relative;
transition: all .2s linear;
transform: rotate(90deg);
color: #ffac47;
}
.fa-minus-circle {
transition: all .2s linear;
position: relative;
color: #ffac47;
transform: rotate(180deg);
}
}
}