scinote-web/app/assets/stylesheets/partials/_tree_view.scss

142 lines
2.5 KiB
SCSS
Raw Normal View History

2020-02-28 21:03:08 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
2018-03-22 18:41:33 +08:00
@import "constants";
2016-02-12 23:52:43 +08:00
@import "mixins";
.tree {
2020-02-28 21:03:08 +08:00
height: calc(100% - 30px);
2016-02-12 23:52:43 +08:00
padding-bottom: 30px;
2020-02-28 21:03:08 +08:00
.sidebar-root {
2018-03-22 18:41:33 +08:00
padding-left: 0;
}
2020-02-28 21:03:08 +08:00
.branch,
.leaf {
2018-03-22 18:41:33 +08:00
list-style-type: none;
margin: 0;
position: relative;
2020-02-28 21:03:08 +08:00
.tree-link {
align-items: center;
display: flex;
height: 50px;
position: relative;
2018-03-22 18:41:33 +08:00
.btn-secondary {
background: transparent;
margin-left: 20px;
2018-03-22 18:41:33 +08:00
}
2020-02-28 21:03:08 +08:00
.tree-toggle {
cursor: pointer;
2018-03-22 18:41:33 +08:00
display: inline-block;
2020-02-28 21:03:08 +08:00
line-height: 30px;
position: absolute;
text-align: center;
top: 10px;
width: 30px;
z-index: 2;
2018-03-22 18:41:33 +08:00
}
2016-02-12 23:52:43 +08:00
2020-02-28 21:03:08 +08:00
.line-wrap {
animation-timing-function: $timing-function-sharp;
color: $color-volcano;
flex-grow: 1;
height: 100%;
line-height: 50px;
padding: 0 10px 0 30px;
transition: .2s;
&.disabled {
color: $brand-primary;
pointer-events: none;
}
2018-03-22 18:41:33 +08:00
}
2016-02-12 23:52:43 +08:00
2020-02-28 21:03:08 +08:00
.canvas-center-on {
animation-timing-function: $timing-function-sharp;
color: $color-volcano;
2020-04-01 04:12:38 +08:00
display: none;
2020-02-28 21:03:08 +08:00
flex-basis: 36px;
flex-shrink: 0;
line-height: 50px;
padding-right: 16px;
text-align: center;
transition: .2s;
}
2018-03-22 18:41:33 +08:00
2020-04-01 04:12:38 +08:00
&.active {
.line-wrap {
font-weight: bold;
}
}
2020-02-28 21:03:08 +08:00
&:hover {
.line-wrap {
background-color: $color-alto;
text-decoration: none;
}
.canvas-center-on {
background-color: $color-alto;
}
2018-03-22 18:41:33 +08:00
}
}
2020-02-28 21:03:08 +08:00
&.active > .tree-link {
background-color: $color-white;
color: $brand-primary;
font-weight: bold;
2018-03-22 18:41:33 +08:00
2020-02-28 21:03:08 +08:00
.line-wrap {
background-color: $color-white;
2020-01-24 20:22:04 +08:00
color: $brand-primary;
2020-02-28 21:03:08 +08:00
text-decoration: none;
}
2020-02-28 21:03:08 +08:00
.canvas-center-on {
background-color: $color-white;
color: $brand-primary;
2018-03-22 18:41:33 +08:00
}
}
2020-04-01 04:12:38 +08:00
&.show-canvas-handler {
.canvas-center-on {
display: inline-block;
}
}
2016-02-12 23:52:43 +08:00
}
2020-02-28 21:03:08 +08:00
.leaf {
.tree-link {
.line-wrap {
padding-left: 10px;
}
}
}
2016-02-12 23:52:43 +08:00
}
#repo-tree {
height: calc(100% - 50px);
2020-05-29 19:17:07 +08:00
.line-wrap {
padding-right: 3em;
}
.fas-custom {
2020-05-29 19:17:07 +08:00
flex-shrink: 0;
margin-right: 1em;
position: absolute;
right: 0;
top: 17px;
}
.active {
.fas-custom {
2020-01-24 20:22:04 +08:00
fill: $brand-primary;
}
}
}