mirror of
https://github.com/gchq/CyberChef.git
synced 2025-05-07 15:07:11 -04:00
some final modularising of the CSS
This commit is contained in:
Robin Scholtes
parent
e5e82032eb
commit
1171f0a517
7 changed files with 356 additions and 341 deletions
|
|
@ -6,6 +6,11 @@
|
|||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
/*
|
||||
Note: .op-list is used in the 'edit favourites' modal & for each
|
||||
category > c-operation-list in the Operations component
|
||||
*/
|
||||
|
||||
.op-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@
|
|||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
/*
|
||||
Note: .operation is used in the c-operation-li custom web components, but also
|
||||
for list items in #recipe-list
|
||||
*/
|
||||
|
||||
.operation {
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
|
|
@ -65,320 +70,10 @@ li.operation.favourite > .op-icon.star-icon {
|
|||
font-weight: var(--op-title-font-weight);
|
||||
}
|
||||
|
||||
.ingredients {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
column-gap: 14px;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.ing-very-wide {
|
||||
flex: 4 400px;
|
||||
}
|
||||
|
||||
.ing-wide {
|
||||
flex: 3 200px;
|
||||
}
|
||||
|
||||
.ing-medium {
|
||||
flex: 2 120px;
|
||||
}
|
||||
|
||||
.ing-short {
|
||||
flex: 1 80px;
|
||||
}
|
||||
|
||||
.ing-flexible {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ingredients .form-group {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.arg {
|
||||
font-family: var(--fixed-width-font-family);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select.arg {
|
||||
font-family: var(--primary-font-family);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
textarea.arg {
|
||||
min-height: 74px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
div.toggle-string {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input.toggle-string {
|
||||
border-top-right-radius: 0 !important;
|
||||
height: 42px !important;
|
||||
}
|
||||
|
||||
.operation [class^='bmd-label'],
|
||||
.operation [class*=' bmd-label'] {
|
||||
top: 13px !important;
|
||||
left: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.operation label,
|
||||
.operation .checkbox label {
|
||||
color: var(--arg-label-colour);
|
||||
}
|
||||
|
||||
.operation .is-focused [class^='bmd-label'],
|
||||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused [class^='bmd-label'],
|
||||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused label,
|
||||
.operation .checkbox label:hover {
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
|
||||
border-color: var(--input-border-colour);
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--input-highlight-colour);
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--disabled-font-colour);
|
||||
color: var(--disabled-font-colour);
|
||||
}
|
||||
|
||||
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--breakpoint-font-colour);
|
||||
color: var(--breakpoint-font-colour);
|
||||
}
|
||||
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--fc-breakpoint-operation-font-colour);
|
||||
color: var(--fc-breakpoint-operation-font-colour);
|
||||
}
|
||||
|
||||
.operation .form-control {
|
||||
padding: 20px 12px 6px 12px !important;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-image: none;
|
||||
background-color: var(--arg-background);
|
||||
background-position-y: 100%, 100%;
|
||||
color: var(--arg-font-colour);
|
||||
}
|
||||
|
||||
.operation .form-control:hover {
|
||||
background-image:
|
||||
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
|
||||
filter: brightness(97%);
|
||||
}
|
||||
|
||||
.operation .form-control:focus {
|
||||
background-color: var(--arg-background);
|
||||
background-image:
|
||||
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
|
||||
filter: brightness(100%);
|
||||
}
|
||||
|
||||
.operation .bmd-form-group.is-filled label.bmd-label-floating,
|
||||
.operation .bmd-form-group.is-focused label.bmd-label-floating {
|
||||
top: 4px !important;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.operation label.bmd-label-floating {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 13px);
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group-append button {
|
||||
border-top-right-radius: 4px;
|
||||
background-color: var(--arg-background) !important;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.input-group-append button:hover {
|
||||
filter: brightness(97%);
|
||||
}
|
||||
|
||||
.editable-option-menu {
|
||||
height: auto;
|
||||
max-height: 350px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.editable-option-menu .dropdown-item {
|
||||
padding: 0.3rem 1rem 0.3rem 1rem;
|
||||
min-height: 1.6rem;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.ingredients .dropdown-toggle-split {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.boolean-arg {
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox label {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox-decorator {
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.custom-control-label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-control-label::before {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 1px solid var(--input-border-colour);
|
||||
}
|
||||
|
||||
.custom-control-input:checked + .custom-control-label::before {
|
||||
background-color: var(--input-highlight-colour);
|
||||
border: 1px solid var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.custom-control-label::after {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.register-list {
|
||||
background-color: var(--fc-operation-border-colour);
|
||||
font-family: var(--fixed-width-font-family);
|
||||
padding: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.recipe-icons {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.recipe-icons i {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-icons i:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.disable-icon {
|
||||
color: var(--disable-icon-colour);
|
||||
}
|
||||
|
||||
.disable-icon-selected {
|
||||
color: var(--disable-icon-selected-colour);
|
||||
}
|
||||
|
||||
.breakpoint-icon {
|
||||
color: var(--breakpoint-icon-colour);
|
||||
}
|
||||
|
||||
.breakpoint-selected {
|
||||
color: var(--breakpoint-icon-selected-colour);
|
||||
}
|
||||
|
||||
.break {
|
||||
color: var(--breakpoint-font-colour) !important;
|
||||
background-color: var(--breakpoint-bg-colour) !important;
|
||||
border-color: var(--breakpoint-border-colour) !important;
|
||||
}
|
||||
|
||||
.break .form-group * { color: var(--breakpoint-font-colour) !important; }
|
||||
|
||||
c-operation-li li.operation.focused-op {
|
||||
color: var(--focused-operation-font-color) !important;
|
||||
background-color: var(--focused-operation-bg-colour) !important;
|
||||
border-color: var(--focused-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
/*.focused-op .form-group * { color: var(--focused-operation-font-color) !important; }*/
|
||||
|
||||
.flow-control-op {
|
||||
color: var(--fc-operation-font-colour) !important;
|
||||
background-color: var(--fc-operation-bg-colour) !important;
|
||||
border-color: var(--fc-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op .form-group *:not(.arg) { color: var(--fc-operation-font-colour) }
|
||||
|
||||
.flow-control-op.break {
|
||||
color: var(--fc-breakpoint-operation-font-colour) !important;
|
||||
background-color: var(--fc-breakpoint-operation-bg-colour) !important;
|
||||
border-color: var(--fc-breakpoint-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; }
|
||||
|
||||
.disabled {
|
||||
color: var(--disabled-font-colour) !important;
|
||||
background-color: var(--disabled-bg-colour) !important;
|
||||
border-color: var(--disabled-border-colour) !important;
|
||||
}
|
||||
|
||||
.disabled .form-group * { color: var(--disabled-font-colour) !important; }
|
||||
|
||||
.break .register-list {
|
||||
color: var(--fc-breakpoint-operation-font-colour) !important;
|
||||
background-color: var(--fc-breakpoint-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.disabled .register-list {
|
||||
color: var(--disabled-font-colour) !important;
|
||||
background-color: var(--disabled-border-colour) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* Recipe area styles
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
#recipe {
|
||||
position: relative;
|
||||
background-color: var(--primary-background-colour);
|
||||
border-bottom: 1px solid var(--primary-border-colour);
|
||||
}
|
||||
|
||||
#rec-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#rec-list .operation {
|
||||
color: var(--rec-list-operation-font-colour);
|
||||
background-color: var(--rec-list-operation-bg-colour);
|
||||
border-color: var(--rec-list-operation-border-colour);
|
||||
padding: 14px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#rec-list li.sortable-chosen{
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
219
src/web/stylesheets/components/recipe/_ingredients.css
Normal file
219
src/web/stylesheets/components/recipe/_ingredients.css
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
.ingredients {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
column-gap: 14px;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.ing-very-wide {
|
||||
flex: 4 400px;
|
||||
}
|
||||
|
||||
.ing-wide {
|
||||
flex: 3 200px;
|
||||
}
|
||||
|
||||
.ing-medium {
|
||||
flex: 2 120px;
|
||||
}
|
||||
|
||||
.ing-short {
|
||||
flex: 1 80px;
|
||||
}
|
||||
|
||||
|
||||
.ing-flexible {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ingredients .form-group {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.arg {
|
||||
font-family: var(--fixed-width-font-family);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select.arg {
|
||||
font-family: var(--primary-font-family);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
textarea.arg {
|
||||
min-height: 74px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
div.toggle-string {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input.toggle-string {
|
||||
border-top-right-radius: 0 !important;
|
||||
height: 42px !important;
|
||||
}
|
||||
|
||||
|
||||
.operation label,
|
||||
.operation .checkbox label {
|
||||
color: var(--arg-label-colour);
|
||||
}
|
||||
|
||||
.operation .is-focused [class^='bmd-label'],
|
||||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused [class^='bmd-label'],
|
||||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused label,
|
||||
.operation .checkbox label:hover {
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
|
||||
border-color: var(--input-border-colour);
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--input-highlight-colour);
|
||||
color: var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--disabled-font-colour);
|
||||
color: var(--disabled-font-colour);
|
||||
}
|
||||
|
||||
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--breakpoint-font-colour);
|
||||
color: var(--breakpoint-font-colour);
|
||||
}
|
||||
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check,
|
||||
.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before {
|
||||
border-color: var(--fc-breakpoint-operation-font-colour);
|
||||
color: var(--fc-breakpoint-operation-font-colour);
|
||||
}
|
||||
|
||||
.operation .form-control {
|
||||
padding: 20px 12px 6px 12px !important;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-image: none;
|
||||
background-color: var(--arg-background);
|
||||
background-position-y: 100%, 100%;
|
||||
color: var(--arg-font-colour);
|
||||
}
|
||||
|
||||
.operation .form-control:hover {
|
||||
background-image:
|
||||
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
|
||||
filter: brightness(97%);
|
||||
}
|
||||
|
||||
.operation .form-control:focus {
|
||||
background-color: var(--arg-background);
|
||||
background-image:
|
||||
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
|
||||
filter: brightness(100%);
|
||||
}
|
||||
|
||||
|
||||
.operation .bmd-form-group.is-filled label.bmd-label-floating,
|
||||
.operation .bmd-form-group.is-focused label.bmd-label-floating {
|
||||
top: 4px !important;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.operation label.bmd-label-floating {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 13px);
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group-append button {
|
||||
border-top-right-radius: 4px;
|
||||
background-color: var(--arg-background) !important;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.input-group-append button:hover {
|
||||
filter: brightness(97%);
|
||||
}
|
||||
|
||||
.editable-option-menu {
|
||||
height: auto;
|
||||
max-height: 350px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.editable-option-menu .dropdown-item {
|
||||
padding: 0.3rem 1rem 0.3rem 1rem;
|
||||
min-height: 1.6rem;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.ingredients .dropdown-toggle-split {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.boolean-arg {
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox label {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.boolean-arg .checkbox-decorator {
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.custom-control-label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-control-label::before {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 1px solid var(--input-border-colour);
|
||||
}
|
||||
|
||||
.custom-control-input:checked + .custom-control-label::before {
|
||||
background-color: var(--input-highlight-colour);
|
||||
border: 1px solid var(--input-highlight-colour);
|
||||
}
|
||||
|
||||
.custom-control-label::after {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
110
src/web/stylesheets/components/recipe/_recipe-list.css
Normal file
110
src/web/stylesheets/components/recipe/_recipe-list.css
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
#rec-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#rec-list .operation {
|
||||
color: var(--rec-list-operation-font-colour);
|
||||
background-color: var(--rec-list-operation-bg-colour);
|
||||
border-color: var(--rec-list-operation-border-colour);
|
||||
padding: 14px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#rec-list li.sortable-chosen{
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.operation [class^='bmd-label'],
|
||||
.operation [class*=' bmd-label'] {
|
||||
top: 13px !important;
|
||||
left: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.register-list {
|
||||
background-color: var(--fc-operation-border-colour);
|
||||
font-family: var(--fixed-width-font-family);
|
||||
padding: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.recipe-icons {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.recipe-icons i {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-icons i:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.disable-icon {
|
||||
color: var(--disable-icon-colour);
|
||||
}
|
||||
|
||||
.disable-icon-selected {
|
||||
color: var(--disable-icon-selected-colour);
|
||||
}
|
||||
|
||||
.breakpoint-icon {
|
||||
color: var(--breakpoint-icon-colour);
|
||||
}
|
||||
|
||||
.breakpoint-selected {
|
||||
color: var(--breakpoint-icon-selected-colour);
|
||||
}
|
||||
|
||||
.break {
|
||||
color: var(--breakpoint-font-colour) !important;
|
||||
background-color: var(--breakpoint-bg-colour) !important;
|
||||
border-color: var(--breakpoint-border-colour) !important;
|
||||
}
|
||||
|
||||
.break .form-group * { color: var(--breakpoint-font-colour) !important; }
|
||||
|
||||
/*.focused-op .form-group * { color: var(--focused-operation-font-color) !important; }*/
|
||||
|
||||
.flow-control-op {
|
||||
color: var(--fc-operation-font-colour) !important;
|
||||
background-color: var(--fc-operation-bg-colour) !important;
|
||||
border-color: var(--fc-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op .form-group *:not(.arg) { color: var(--fc-operation-font-colour) }
|
||||
|
||||
.flow-control-op.break {
|
||||
color: var(--fc-breakpoint-operation-font-colour) !important;
|
||||
background-color: var(--fc-breakpoint-operation-bg-colour) !important;
|
||||
border-color: var(--fc-breakpoint-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; }
|
||||
|
||||
.disabled {
|
||||
color: var(--disabled-font-colour) !important;
|
||||
background-color: var(--disabled-bg-colour) !important;
|
||||
border-color: var(--disabled-border-colour) !important;
|
||||
}
|
||||
|
||||
.disabled .form-group * { color: var(--disabled-font-colour) !important; }
|
||||
|
||||
.break .register-list {
|
||||
color: var(--fc-breakpoint-operation-font-colour) !important;
|
||||
background-color: var(--fc-breakpoint-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.disabled .register-list {
|
||||
color: var(--disabled-font-colour) !important;
|
||||
background-color: var(--disabled-border-colour) !important;
|
||||
}
|
||||
13
src/web/stylesheets/components/recipe/_recipe.css
Normal file
13
src/web/stylesheets/components/recipe/_recipe.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Recipe area styles
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2017
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
#recipe {
|
||||
position: relative;
|
||||
background-color: var(--primary-background-colour);
|
||||
border-bottom: 1px solid var(--primary-border-colour);
|
||||
}
|
||||
|
|
@ -31,12 +31,15 @@
|
|||
@import "./components/_dividers.css";
|
||||
@import "./components/_modals.css";
|
||||
@import "./components/_banner.css";
|
||||
@import "./components/_recipe.css";
|
||||
@import "./components/_controls.css";
|
||||
/* Components: Operations */
|
||||
@import "./components/operations/_operations.css";
|
||||
@import "./components/operations/_search.css";
|
||||
@import "./components/operations/_categories.css";
|
||||
/* Components: Recipe */
|
||||
@import "./components/recipe/_recipe.css";
|
||||
@import "./components/recipe/_recipe-list.css";
|
||||
@import "./components/recipe/_ingredients.css";
|
||||
/* Components: IO */
|
||||
@import "./components/io/_io.css";
|
||||
@import "./components/io/_search-results.css";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue