fddc36f02f
As the input field was used for KV's it looked like you couldn't save multiline KV's. Changed to textarea so you can see the multilines. Also, JSON is slightly misleading as clicking the toggle doesn't necessarily mean 'I'm going to edit some JSON' it means I want the code editor with syntax highlighting, so renamed the toggle to say 'Code'
168 lines
3 KiB
SCSS
168 lines
3 KiB
SCSS
.type-toggle {
|
|
@extend %toggle;
|
|
float: right;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
%form-element > span {
|
|
display: block;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
[type='radio'] {
|
|
cursor: pointer;
|
|
}
|
|
%form-element textarea {
|
|
display: block;
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
min-height: 70px;
|
|
padding: 0.625em 15px;
|
|
resize: vertical;
|
|
line-height: 1.5;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'] {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
height: 2.25em;
|
|
line-height: 1.5;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'] {
|
|
border: 1px solid;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'] {
|
|
box-shadow: none;
|
|
border-radius: $radius-small;
|
|
}
|
|
.has-error > input,
|
|
.has-error > textarea {
|
|
border: 1px solid;
|
|
}
|
|
%form-element > span {
|
|
color: $text-gray;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'],
|
|
%form-element textarea {
|
|
color: $user-text-gray;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'],
|
|
%form-element textarea {
|
|
background-color: $gray-050;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'],
|
|
%form-element textarea {
|
|
border-color: $border-mid;
|
|
}
|
|
%form-element [type='text']:hover,
|
|
%form-element [type='password']:hover,
|
|
%form-element textarea:hover {
|
|
border-color: $blue;
|
|
}
|
|
%form-element [type='text']:focus,
|
|
%form-element [type='password']:focus,
|
|
%form-element textarea:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-color: $border-dark;
|
|
}
|
|
.has-error > input {
|
|
border-color: $dangerous-red !important;
|
|
}
|
|
%toggle input:checked + span::before {
|
|
background-color: $green;
|
|
}
|
|
%toggle span {
|
|
color: $text;
|
|
}
|
|
%form-element > em {
|
|
color: $text-note;
|
|
}
|
|
%toggle span::after {
|
|
border-radius: 100%;
|
|
background-color: $white;
|
|
}
|
|
%toggle span::before {
|
|
background-color: $border-blue;
|
|
border-radius: 7px;
|
|
}
|
|
%form-element,
|
|
%form-element > em {
|
|
display: block;
|
|
}
|
|
%form-element > em {
|
|
margin-left: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
%form-element,
|
|
%radio-group {
|
|
margin-bottom: 1.55em;
|
|
}
|
|
%form-element > span {
|
|
margin-bottom: 0.4em !important;
|
|
}
|
|
%radio-group {
|
|
overflow: hidden;
|
|
padding-left: 1px;
|
|
}
|
|
%radio-group label {
|
|
@extend %form-element;
|
|
float: left;
|
|
}
|
|
%radio-group label:not(:last-child) {
|
|
margin-right: 25px;
|
|
}
|
|
%radio-group label > span {
|
|
margin-left: 1em;
|
|
margin-top: 0.2em;
|
|
float: right;
|
|
}
|
|
%radio-group label,
|
|
%radio-group label > span {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
%form-element [type='text'],
|
|
%form-element [type='password'] {
|
|
padding: 17px 15px;
|
|
}
|
|
%toggle {
|
|
position: relative;
|
|
}
|
|
%toggle input {
|
|
display: none;
|
|
}
|
|
%toggle span {
|
|
display: inline-block;
|
|
padding-left: 25px;
|
|
}
|
|
%toggle span::before,
|
|
%toggle span::after {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
top: 50%;
|
|
cursor: pointer;
|
|
}
|
|
%toggle span::before {
|
|
left: 0px;
|
|
width: 20px;
|
|
height: 12px;
|
|
margin-top: -8px;
|
|
}
|
|
%toggle span::after {
|
|
left: 2px;
|
|
margin-top: -6px;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
%toggle input:checked + span::after {
|
|
left: 10px;
|
|
}
|