PHP Classes

File: public/mdb/scss/free/_treeview.scss

Recommend this page to a friend!
  Classes of Ahmad Mustapha   PHP Todo List   public/mdb/scss/free/_treeview.scss   Download  
File: public/mdb/scss/free/_treeview.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Todo List
Application to manage a list of tasks to do
Author: By
Last change:
Date: 1 year ago
Size: 4,011 bytes
 

Contents

Class file image Download
// Treeview .treeview { &.w-20 { width: 20rem; } .rotate { margin-top: .2rem; font-size: .8rem; vertical-align: text-top; cursor: pointer; user-select: none; transition: all .1s linear; &.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; padding-left: 1em; list-style: none; } .treeview-animated-list { li { padding: .2em 0 0 .2em; } .treeview-animated-items { .nested { &::before { position: absolute; left: 5px; display: block; width: 5px; height: 100%; content: ""; background-color: #808080; } } .closed { display: block; padding: .2em .2em .2em .4em; margin-right: 0; border-top-left-radius: .3em; border-bottom-left-radius: .3em; &:hover { background-color: rgb(140, 185, 255); } .fa-angle-right { font-size: .8rem; transition: all .1s linear; &.down { position: relative; color: #f8f9fa; transform: rotate(90deg); } } } .open { background-color: rgb(50, 160, 255); transition: all .1s linear; &:hover { color: #f8f9fa; background-color: rgb(50, 160, 255); } span { color: #f8f9fa; } } } .treeview-animated-element { padding: .2em .2em .2em .6em; cursor: pointer; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transition: all .1s linear; &: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, .2); &.w-20 { width: 20rem; } hr { border-color: #a2127a; } h6 { font-size: 1.4em; font-weight: 500; color: #a2127a; } ul { position: relative; padding-left: 0; list-style: none; } .treeview-colorful-list { ul { padding-left: 1em; margin-top: .1em; background: rgba(224, 127, 178, .2); } } .treeview-colorful-element { padding: .2em .2em .2em 1em; cursor: pointer; border: 2px solid transparent; border-right: 0 solid transparent; transition: all .1s linear; &:hover { background-color: #e07fb2; } &.opened { color: #ffac47; background-color: #a2127a; border: 2px solid #ffac47; border-right: 0 solid transparent; &:hover { color: #ffac47; background-color: #a2127a; } } } .treeview-colorful-items-header { display: block; padding: .4em; margin-right: 0; border-bottom: 2px solid transparent; transition: all .1s linear; &:hover { background-color: #e07fb2; } &.open { background-color: #a2127a; border-bottom: 2px solid #ffac47; transition: all .1s linear; span { color: #ffac47; } &:hover { color: #ffac47; background-color: #a2127a; } div:hover { background-color: #a2127a; } } .fa-angle-right { font-size: .8rem; transition: all .2s linear; } .fas { position: relative; color: #ffac47; transition: all .2s linear; transform: rotate(90deg); } .fa-minus-circle { position: relative; color: #ffac47; transition: all .2s linear; transform: rotate(180deg); } } }