Skip to content
This repository was archived by the owner on Jul 24, 2019. It is now read-only.

Commit 5aa3af0

Browse files
author
Aaron Imming
committed
Styling rules for multi-level toolbox
1 parent 09de2af commit 5aa3af0

File tree

1 file changed

+110
-96
lines changed

1 file changed

+110
-96
lines changed

‎src/assets/sass/scratch/_toolbox.scss

Lines changed: 110 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
$category-colours: (
2-
trade-definition: #303f9f,
3-
before-purchase : #00897b,
4-
during-purchase : #78909c,
5-
after-purchase : #d81b60,
6-
mathematical : #689f38,
7-
logic : #8e24aa,
8-
text : #fb8c00,
9-
variables : #5d4037,
10-
functions : #1976d2,
11-
loop : #e53935,
12-
list : #00acc1,
13-
indicators : #616161,
14-
time : #afb42b,
15-
tick-analysis : #2e7d32,
16-
candle : #5e35b1,
17-
miscellaneous : #ffb300,
2+
trade_parameters : #30409f,
3+
purchase_conditions: #00897b,
4+
sell_conditions : #78909c,
5+
trade_results : #d81a60,
6+
technical_analysis : #689e38,
7+
utility : #8e25aa,
8+
math : #fc8b01,
9+
text : #5d4037,
10+
logic : #1876d2,
11+
lists : #e53836,
12+
custom_functions : #00acc1,
13+
variables : #616161,
14+
loops : #afb42b,
1815
);
1916

2017
.toolbox {
21-
$toolbox : &;
22-
$white : #fff;
23-
$lightgrey: #ebebeb;
24-
$grey : #f4f4f6;
18+
$toolbox : &;
19+
$white : #fff;
20+
$lightgrey : #ebebeb;
21+
$grey : #f4f4f6;
22+
$cat-text-spacing: 15px;
2523

2624
background-color: $white;
2725
border: 1px solid $lightgrey;
@@ -34,102 +32,118 @@ $category-colours: (
3432
overflow: hidden;
3533
position: absolute;
3634
user-select: none;
37-
z-index: 99 !important;
35+
z-index: 1;
36+
width: 250px;
3837

3938
&__header {
39+
padding: 0.5em;
40+
position: relative;
4041
font-weight: bold;
42+
font-size: 1.6em;
4143
background-color: $grey;
42-
}
43-
&__category-menu {
44-
display: flex;
45-
flex-direction: column;
46-
flex-grow: 1;
47-
min-height: 0;
48-
overflow: auto;
49-
}
50-
&__row {
51-
cursor: pointer;
52-
border-top: 1px solid $lightgrey;
53-
}
54-
&__header, &__label {
55-
font-size: 1em;
56-
padding: 0.6em 1em;
57-
}
58-
&__title {
59-
margin-right: 0.6em;
60-
}
61-
&__arrow {
62-
cursor: pointer;
63-
position: absolute;
64-
top: 0.6em;
65-
right: 0.6em;
66-
transform: rotate(90deg);
67-
transition: transform 0.25s ease;
44+
text-align: center;
6845
}
6946
&__item {
70-
position: relative;
71-
}
72-
&__color {
73-
position: absolute;
74-
left: 0;
75-
width: 4px;
76-
height: 100%;
47+
display: flex;
48+
flex-direction: row;
7749
}
78-
&--collapsed {
79-
#{$toolbox}__header, #{$toolbox}__item {
80-
padding: 0.6em;
81-
}
82-
#{$toolbox}__color {
83-
position: relative;
84-
width: 20px;
85-
height: 20px;
86-
border-radius: 50%;
87-
}
88-
#{$toolbox}__title, #{$toolbox}__label {
89-
display: none;
50+
&__cat-arrow {
51+
display: flex;
52+
margin: auto;
53+
54+
&--back {
55+
margin-left: $cat-text-spacing;
56+
fill: $white;
57+
transform: rotate(90deg);
9058
}
91-
#{$toolbox}__arrow {
92-
position: relative;
59+
&--open {
60+
margin-right: $cat-text-spacing;
9361
transform: rotate(270deg);
94-
margin-top: -2px;
95-
top: 0;
96-
right: -2px;
97-
}
98-
#{$toolbox}__row {
99-
border-top: none;
10062
}
10163
}
102-
@each $category, $category-colour in $category-colours {
103-
&__category--#{$category}#{&}__category--selected {
104-
background-color: transparentize($category-colour, 0.9);
105-
}
106-
&__category--#{$category} {
107-
&:hover {
108-
background-color: transparentize($category-colour, 0.95);
64+
&__cat-colour {
65+
width: 5px;
66+
flex-shrink: 0;
67+
}
68+
@each $category, $colour in $category-colours {
69+
&__cat {
70+
&--#{$category} {
71+
#{$toolbox}__cat-colour {
72+
background-color: $colour;
73+
}
10974
}
110-
& > #{$toolbox}__color {
111-
background-color: $category-colour;
75+
}
76+
&__cat-return {
77+
#{$toolbox}__cat {
78+
&--#{$category} {
79+
background-color: $colour;
80+
}
11281
}
11382
}
11483
}
115-
}
11684

117-
.nested__category--collapsed {
118-
display: none;
119-
}
85+
&__cat-menu {
86+
display: flex;
87+
flex-direction: column;
88+
flex-grow: 1;
89+
min-height: 0;
90+
overflow: auto;
91+
}
92+
&__cat-return {
93+
cursor: pointer;
94+
color: $white;
95+
text-align: center;
12096

121-
.category--back {
122-
background-color: #ebebeb;
97+
#{$toolbox}__label {
98+
margin-left: -($cat-text-spacing * 2);
99+
}
100+
}
101+
&__cat-text {
102+
align-self: center;
103+
margin: $cat-text-spacing;
104+
width: 100%;
105+
}
106+
&__description {
107+
font-size: 1.3em;
108+
}
109+
&__icon {
110+
display: flex;
111+
align-self: center;
112+
margin-right: $cat-text-spacing;
123113

124-
&:before {
125-
content: '<';
114+
> svg {
115+
height: 25px;
116+
width: 25px;
117+
}
118+
}
119+
&__label {
120+
font-weight: bold;
121+
font-size: 1.6em;
126122
}
127-
}
123+
&__row {
124+
cursor: pointer;
125+
border-top: 1px solid $lightgrey;
128126

129-
.category--subcategories {
130-
background-color: green;
127+
&:last-of-type {
128+
border-bottom: 1px solid $lightgrey;
129+
}
131130

132-
&:after {
133-
content: '>';
131+
@each $category, $colour in $category-colours {
132+
#{$toolbox}__cat {
133+
&--#{$category} {
134+
&:hover:not(#{$toolbox}__cat--selected) {
135+
background-image: linear-gradient(to right, $white 25%, transparentize($colour, 0.8) 100%);
136+
}
137+
}
138+
&--#{$category}#{$toolbox}__cat--selected {
139+
background-color: transparentize($colour, 0.9);
140+
transition: background-color 0.25s ease;
141+
}
142+
}
143+
}
144+
}
145+
&__separator {
146+
padding: 20px 0;
147+
border-top: 1px solid $lightgrey;
134148
}
135149
}

0 commit comments

Comments
 (0)