wiki-grav/plugins/admin/themes/grav/scss/template/_forms.scss
2022-04-24 14:32:58 +02:00

998 lines
20 KiB
SCSS

// Forms
form {
h1, h3, .form-spacer h3 {
padding: 0 $padding-default 0.5rem;
margin: 0 0 1rem;
font-size: 1.5rem;
text-align: left;
letter-spacing: -1px;
}
h3 {
padding-left: 0;
}
p {
padding: 0 $padding-default;
}
pre {
padding: 1.5rem 3rem;
}
.nowrap {
white-space: nowrap;
}
.form-description {
p {
padding: 0;
}
}
.button {
@include breakpoint(mobile-only) {
padding: 0.25rem 0.5rem;
}
}
.form-field {
margin-bottom: 1rem;
padding-left: $padding-default;
@include breakpoint(mobile-only) {
padding-left: 1rem;
}
.file-thumbnail-wrapper {
display: inline-block;
position: relative;
}
.file-thumbnail {
max-height: 150px;
vertical-align: top;
display: inline-block;
margin-bottom: 10px;
}
.file-thumbnail-remove {
position: absolute;
text-align: center;
display: block;
top: 3px;
right: 3px;
width: 25px;
height: 25px;
border-radius:100%;
.fa {
font-size: 20px;
line-height: 25px;
vertical-align: top;
}
}
}
.form-data {
padding-right: $padding-default;
@include breakpoint(mobile-only) {
padding-right: 1rem;
}
}
.form-input-addon-wrapper {
display: flex;
.form-input-addon {
display: flex;
padding: 0 5px;
justify-content: center;
align-items: center;
&.copy-to-clipboard {
cursor: pointer;
}
&[data-regenerate] {
cursor: pointer;
}
}
input {
height: 35px;
display: table-cell;
&[name="data[folder]"] {
transition: background-color .5s ease;
}
}
.form-input-prepend {
border-radius: 4px 0 0 4px;
border-right-width: 0 !important;
}
.form-input-append {
border-radius: 0 4px 4px 0;
border-left-width: 0 !important;
}
input:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
input:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.overlay {
padding-top: 1rem;
padding-bottom: 1px;
&.bottom {
margin: 2rem auto -2rem auto;
}
}
.required {
display: inline-block;
font-family: helvetica, arial, sans-serif;
vertical-align: middle;
line-height: 0;
font-size: 30px;
margin-left: 0px;
margin-bottom: -5px;
}
label {
padding: 5px 0;
font-weight: 400;
margin:0;
p {
margin: 0;
}
[data-hint] {
display: inline;
}
.hint-icon {
opacity: 0.7;
transition: 0.5s opacity;
}
&:hover .hint-icon {
opacity: 1.0;
}
&.inline {
display: inline;
vertical-align: middle;
margin-right: 15px;
}
&.toggleable {
display: inline;
}
}
.form-sublabel {
p {
opacity: 0.8;
font-size: 0.9rem;
margin: 10px 20px 0 0;
padding: 0;
}
}
input, select, textarea, button, .selectize-input {
font-size: $core-font-size;
line-height: $core-line-height;
border-radius: $form-border-radius;
-webkit-font-smoothing: antialiased;
}
.form-input-file {
position: relative;
min-height: 70px;
border-radius: $form-border-radius;
ul {
margin: 1rem 0;
text-align: left;
font-size: 1rem;
border-radius: $form-border-radius;
}
p {
display: block;
height: 100%;
text-align: center;
margin: 0;
padding: 0.8rem 1rem 0;
font-size: 1.2rem;
}
input {
display: none;
}
}
.selectize-dropdown {
z-index: 100000;
}
// vertical alignment of forms
.grid.vertical {
@include flex-flow(column);
}
// compact
.compact {
.form-field {
margin-bottom: 0.2rem;
}
.form-list-wrapper {
li {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.form-field {
width: 50%;
@include breakpoint(mobile-only) {
width: 100%;
}
}
}
}
}
.form-select-wrapper, .selectize-control.single .selectize-input {
position: relative;
&:after {
margin-top: 0;
border: 0;
position: absolute;
content: '\f078';
font-family: 'FontAwesome';
right: 12px;
top: 50%;
line-height: 0;
pointer-events: none;
}
}
.selectize-input {
display: block !important;
box-shadow: none;
padding: $form-select-pad;
margin: 0;
> input {
font-size: $core-font-size;
line-height: $core-line-height;
}
}
.selectize-control.single.plugin-remove_button .selectize-input {
.item, .remove-single {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 2px 6px;
display: inline-block;
border-radius: 2px 0 0 2px !important;
}
.remove-single {
border-radius: 0 2px 2px 0 !important;
margin-left: -2px;
}
}
.selectize-control.single.plugin-remove_button .selectize-input,
.selectize-control.multi .selectize-input {
padding: ($leading-margin / 4) ($leading-margin / 4);
&.has-items {
padding-top: 6px;
padding-bottom: 4px;
}
.item, .remove-single {
border-radius: 2px;
line-height: 1.5;
}
.item > img {
max-height: 20px !important;
max-width: inherit !important;
}
}
.selectize-control.single .selectize-input {
&:after {
right: 27px;
}
&.dropdown-active {
&:after {
content: '\f077';
}
}
}
.x-small {
max-width: 5rem !important;
&.form-input-addon-wrapper {
max-width: inherit !important;
input {
max-width: 5rem !important;
}
}
}
.small {
max-width: 10rem !important;
&.form-input-addon-wrapper {
max-width: inherit !important;
input {
max-width: 10rem !important;
}
}
}
.medium:not(.switch-toggle), .medium.form-input-addon-wrapper input {
max-width: 20rem;
textarea {
height: 7rem;
}
&[data-grav-array-type="container"] {
max-width: 100% !important;
input[type=text] {
width: calc(70% - 110px);
}
}
}
.large, .large.form-input-addon-wrapper input {
max-width: 30rem !important;
textarea {
height: 10rem;
}
&[data-grav-array-type="container"] {
max-width: 100% !important;
input[type=text] {
width: calc(100% - 110px);
}
}
}
select {
width: 100%;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding: $form-select-pad;
cursor: pointer;
margin: 0;
}
input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=tel],
input[type=time],
input[type=week],
input[type=month],
input[type=number],
input[type=color],
input[type=url] {
width: 100%;
}
textarea {
width: 100%;
}
.form-frontmatter-wrapper {
border-radius: $form-border-radius;
}
.switch-toggle {
label {
cursor: pointer;
}
a,label {
outline: none !important;
}
}
.dynfields, [data-grav-field="array"], [data-grav-field="multilevel"] {
input[type=text] {
width: 40%;
float: left;
margin: 0 5px 5px 0;
}
.form-row {
display: inline-block;
width: 100%;
margin-right: 0;
max-width: 100% !important;
span {
padding: 0.5rem;
display: inline-block;
line-height: 1.5;
cursor: pointer;
&[data-grav-array-action="sort"] {
float: left;
cursor: move;
}
}
&.array-field-value_only {
width: 100%;
}
}
}
[data-grav-field="multilevel"] input:disabled {
background-color: lightgray;
}
[data-grav-array-type="container"].one-child {
[data-grav-array-action="sort"] {
display: none;
}
}
.button-bar {
margin-top: 1rem;
padding: 1.2rem 3rem;
width: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.checkboxes {
display: inline-block;
padding: 5px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
label {
display: inline;
cursor: pointer;
position: relative;
padding: 0 0 0 2rem;
margin-right: 15px;
}
label:before {
content:"";
display: inline-block;
width: 1.5rem;
height: 1.5rem;
top: 50%;
left: 0;
margin-top: -0.75rem;
margin-right: 10px;
position: absolute;
border-radius: $form-border-radius;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + label:before {
content:"\f00c";
font-family: "FontAwesome", sans-serif;
font-size: 1.2rem;
line-height: 1;
text-align: center;
}
&.toggleable label{
margin-right: 0;
}
}
}
// Display
.form-display-wrapper {
p {
padding-left: 0;
padding-right: 0;
&:first-child {
margin-top: 0;
}
}
}
// Frontmatter Field
div.frontmatter {
margin-bottom: 3rem;
}
// parents
[data-grav-field="parents"] {
.form-input-wrapper {
cursor: pointer;
i {
margin-right: .25rem;
}
}
}
[data-remodal-id].parents-container {
form {
overflow: hidden;
}
form > h1 {
margin-bottom: 0;
border-bottom: 1px solid #eee;
}
form > .button-bar {
margin-top: 0;
}
.fjs-list {
overflow: auto;
overflow-y: scroll;
max-height: 400px;
min-height: 100%;
}
.fjs-item {
margin-left: 0;
list-style-type: none;
text-align: left;
}
.parents-content:empty {
display: none;
}
}
textarea.frontmatter {
height: 130px !important;
& + .CodeMirror {
height: 130px;
}
}
// parents
[data-grav-field="parents"] {
.form-input-wrapper {
cursor: pointer;
i {
margin-right: .25rem;
}
}
}
[data-remodal-id].parents-container {
form {
overflow: hidden;
}
form > h1 {
margin-bottom: 0;
border-bottom: 1px solid #eee;
}
form > .button-bar {
margin-top: 0;
}
.fjs-list {
overflow: auto;
overflow-y: scroll;
max-height: 400px;
min-height: 100%;
}
.fjs-item {
margin-left: 0;
list-style-type: none;
text-align: left;
}
.parents-content:empty {
display: none;
}
}
// Sortables
.form-order-wrapper {
.notice {
padding: 5px;
}
ul.orderable {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 0.2rem 1rem;
border-radius: $form-border-radius;
margin: 3px 0;
position: relative;
&.drag-handle {
cursor: move;
&::after {
content: '\f0c9';
font-family: FontAwesome;
position: absolute;
right: 10px;
}
}
i {
font-size: 0.8rem;
}
}
}
}
// Sortables
.form-list-wrapper {
ul[data-collection-holder] {
list-style: none;
margin: 0;
padding: 0;
> li {
padding: 1rem;
border-radius: $form-border-radius;
margin: 3px 0;
position: relative;
.item-actions {
position: absolute;
right: 10px;
top: 4px;
.fa {
cursor: pointer;
}
}
&.collection-collapsed {
height: 70px;
overflow: hidden;
@include transform(translateZ(0));
@include breakpoint(mobile-only) {
height: 120px;
}
// Fix for grav-plugin-admin#1928
// overflow: hidden;
> .form-field ~ .form-field {
display: none;
}
// end fix
}
}
&[data-collection-nosort] > li {
cursor: default;
}
}
.collection-actions {
text-align: right;
}
.collection-sort {
position: absolute;
top: 0;
left: 0;
width: 32px;
bottom: 0;
cursor: move;
@include breakpoint(mobile-only) {
width: 20px;
.fa {
font-size: 0.8rem;
}
}
.fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
[data-collection-nosort] .collection-sort {
display: none;
}
.list-confirm-deletion {
cursor: pointer;
display: flex;
position: absolute !important;
z-index: 10010;
padding: .5rem;
top: 13px;
right: 20px;
> i, span {
text-align: center;
display: inline-flex;
align-items: center;
}
}
}
.form-label.block {
position: relative;
&:hover {
z-index: 2;
}
label {
z-index: 2;
}
}
// Fieldset
#admin-main .admin-block h2 {
font-size: 1.25rem;
margin: 0 0 .5rem;
letter-spacing: normal;
}
.form-fieldset {
margin: 1rem 1.5rem;
}
.form-fieldset--label {
label {
display: table;
font-size: 1.25rem;
padding: .5rem 1rem;
width: 100%;
}
h2 {
margin: 0 !important;
}
.actions {
font-size: initial;
display: table-cell;
text-align: right;
vertical-align: middle;
}
& + .form-data {
margin-top: 1rem;
padding: 0;
}
}
.form-fieldset--cursor {
cursor: pointer;
}
.form-fieldset--info {
font-size: small;
}
.form-fieldset > input:checked ~ .form-data,
.form-fieldset--collapsible .open,
.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .close {
display: block;
}
.form-fieldset > .form-data,
.form-fieldset--collapsible .close,
.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .open {
display: none;
}
.filepicker-field-image {
width: 30px;
vertical-align: middle;
margin-right: 5px;
}
.filepicker-field-name {
vertical-align: middle;
}
.permissions-container {
.permission-value {
width: 50%;
float: left;
margin: 0 5px 5px 0;
height: 39px;
}
.switch-toggle {
line-height: 37px;
margin: 0 5px 5px 0;
}
.crudp-container {
display: flex;
.checkboxes.toggleable {
display: block;
label {
display: inline-flex;
padding: inherit;
padding-left: 1.5rem;
padding-right: 0.5rem;
font-weight: bold;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 0;
border-style: solid;
&:before {
border: none;
background: none;
}
}
& input[type=checkbox] + label:before {
content:"\f023";
font-family: "FontAwesome";
font-size: 0.8rem;
line-height: 1.8;
text-align: center;
}
&[data-_check-status="1"] input[type=checkbox] + label:before {
content:"\f00c";
font-family: "FontAwesome";
}
&[data-_check-status="2"] input[type=checkbox] + label:before {
content:"\f05e";
}
}
& > div:first-child {
.checkboxes.toggleable {
label {
border-left-width: 1px;
border-radius: $form-border-radius 0 0 $form-border-radius;
}
}
}
& > div:last-of-type {
.checkboxes.toggleable {
label {
border-right-width: 1px;
border-radius: 0 $form-border-radius $form-border-radius 0;
}
}
}
}
}
[data-grav-field="cron"] {
display: flex;
align-items: center;
}
.cron-selector {
input {
font-family: $monospace !important;
font-weight: bold !important;
}
}
.cron-install {
margin: 1rem;
padding: 0;
border-radius: 4px;
form & pre {
padding: 1rem;
margin: 0 1.5rem;
line-height: 1;
}
.setup-status {
font-weight: bold;
}
}
.cron-status, .backups-history {
margin-bottom: 4rem;
.cron-at code {
font-size: 120%;
padding: 2px 10px;
border-radius: 2px;
}
.badge {
white-space: nowrap;
}
tr {
&.deleting {
background: #efefef;
color: #bbb;
text-shadow: 0 1px white;
button, .button {
background: #777;
pointer-events: none;
}
}
}
}
form .cron-job-list, form .backups-list {
li {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.form-field.grid {
width: calc(50% - 5px);
@include breakpoint(mobile-only) {
width: 100%;
}
}
}