secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Icon and Colour fields for managing commands

Browse Source
This commit is contained in:
James Barnsley
2018-10-13 23:13:43 +13:00
parent a4a02bcd6d
commit f2cb39ba97
9 changed files with 1253 additions and 1016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/scss/components/_colour-field.scss
View File

@ -1,6 +1,7 @@
.colour-field {
&__option {
@include animate(0.1s);
display: inline-block;
border-radius: 3px;
background: colour(grey);
@ -9,10 +10,17 @@
margin: 2px 8px 2px 0;
position: relative;
cursor: pointer;
border: 2px solid colour(grey);
overflow: hidden;
&--selected {
border-color: colour(turquoise);
&:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
&__icon {
@ -20,6 +28,20 @@
top: 3px;
left: 3px;
font-size: 20px;
z-index: 3;
}
&:hover {
&:after {
background: rgba(255,255,255,0.15);
}
}
&:active,
&:focus {
&:after {
background: rgba(0,0,0,0.15);
}
}
}
}

52
src/scss/components/_icon-field.scss Executable file
View File

@ -0,0 +1,52 @@
.icon-field {
&__option {
@include animate(0.1s);
display: inline-block;
border-radius: 3px;
width: 30px;
height: 30px;
margin: 0 4px 4px 0;
position: relative;
cursor: pointer;
overflow: hidden;
&--selected {
&:after {
background: colour(grey) !important;
}
}
&__icon {
position: absolute;
top: 6px;
left: 6px;
font-size: 18px;
z-index: 3;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
&:hover {
&:after {
background: rgba(255,255,255,0.15);
}
}
&:active,
&:focus {
&:after {
background: rgba(255,255,255,0.3);
}
}
}
}