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

More user-friendly editing of commands; COommands style as component

Browse Source
This commit is contained in:
James Barnsley
2018-10-13 15:57:01 +13:00
parent 11f21e252b
commit a4a02bcd6d
33 changed files with 1435 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/scss/components/_colour-field.scss Executable file
View File

@ -0,0 +1,25 @@
.colour-field {
&__option {
display: inline-block;
border-radius: 3px;
background: colour(grey);
width: 26px;
height: 26px;
margin: 2px 8px 2px 0;
position: relative;
cursor: pointer;
border: 2px solid colour(grey);
&--selected {
border-color: colour(turquoise);
}
&__icon {
position: absolute;
top: 3px;
left: 3px;
font-size: 20px;
}
}
}

48
src/scss/components/_commands.scss Executable file
View File

@ -0,0 +1,48 @@
.commands {
&__item {
text-align: center;
color: colour(white);
display: inline-block;
position: relative;
width: 26px;
height: 26px;
margin-bottom: 4px;
margin-right: 6px;
z-index: 1;
&__icon {
padding-top: 6px;
padding-right: 0 !important;
font-size: 12px;
}
&__background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
background: colour(grey);
z-index: -1;
border-radius: 50%;
opacity: 1;
}
&--large {
width: 32px;
height: 32px;
.commands__item__icon {
padding-top: 7px;
font-size: 16px;
}
}
&--interactive {
@include click_feedback(rgba(0,0,0,0.5));
cursor: pointer;
}
}
}

30
src/scss/components/_output-control.scss
View File

@ -52,36 +52,6 @@
&--commands {
@include clearfix();
background: rgba(0,0,0,0.1);
.commands__item {
@include click_feedback(rgba(0,0,0,0.5));
width: 26px;
height: 26px;
margin-bottom: 4px;
text-align: center;
color: colour(white);
cursor: pointer;
margin-right: 6px;
float: left;
&__icon {
padding-top: 7px;
font-size: 12px;
}
&__background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
background: colour(light_grey);
z-index: -1;
border-radius: 50%;
opacity: 1;
}
}
}
&:not(:first-child) {