You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.5 KiB
148 lines
3.5 KiB
/**
|
|
* CSS code for the "Import" screen.
|
|
*
|
|
* @package TablePress
|
|
* @subpackage Views CSS
|
|
* @author Tobias Bäthge
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* Red border for form fields that have invalid values */
|
|
#tablepress-page form .postbox:not(.no-validation-highlighting) :invalid {
|
|
border-color: #cc0000 !important;
|
|
box-shadow: 0 0 0 1px #cc0000;
|
|
}
|
|
|
|
/* Adjust positioning of labels in relation to checkboxes/radio buttons */
|
|
#tablepress_import-import-form .column-2 label {
|
|
margin-right: 24px; /* some margin on radio buttons */
|
|
}
|
|
|
|
.file-upload-area {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.dropzone {
|
|
background-color: #f5f5f5;
|
|
border: 2px dashed #ddd;
|
|
border-radius: 4px;
|
|
font-size: 18px;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
margin-bottom: 10px;
|
|
transition: background-color 0.3s ease-in-out;
|
|
width: 100%;
|
|
min-height: 180px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
|
|
/* Print selected file names in italics. */
|
|
span ~ span {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
&:hover .dropzone {
|
|
border: 2px dashed #cccccc;
|
|
background: #ffffff;
|
|
}
|
|
|
|
#tables-import-file-upload {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
|
|
&:valid + .dropzone,
|
|
+ .dropzone.dragover {
|
|
border-color: rgba(0, 255, 0, 0.4);
|
|
background-color: rgba(0, 255, 0, 0.1);
|
|
}
|
|
|
|
/* :focus style after :valid style to allow for both. */
|
|
&:focus + .dropzone {
|
|
border-color: #2271b1;
|
|
}
|
|
}
|
|
|
|
.postbox:not(.no-validation-highlighting) & #tables-import-file-upload:invalid + .dropzone {
|
|
border-color: #cc0000;
|
|
}
|
|
}
|
|
|
|
/* Style the artificial dropdown like a WP Core select field. */
|
|
.jdropdown {
|
|
width: 100%;
|
|
|
|
/* Show the dropdown above WP Core UI elements on small screens (< 800px width). */
|
|
&.jdropdown-searchbar.jdropdown-focus {
|
|
z-index: 100000;
|
|
}
|
|
|
|
.jdropdown-header {
|
|
/* stylelint-disable-next-line function-url-quotes */
|
|
background: #ffffff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 5px top 55%;
|
|
background-size: 16px 16px;
|
|
padding: 0 24px 0 8px;
|
|
border-color: #8c8f94;
|
|
border-radius: 3px;
|
|
|
|
&:hover,
|
|
&:hover::placeholder {
|
|
color: #2271b1;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: #2271b1;
|
|
color: #0a4b78;
|
|
box-shadow: 0 0 0 1px #2271b1;
|
|
}
|
|
|
|
&:focus::placeholder {
|
|
color: #0a4b78;
|
|
}
|
|
|
|
&:active {
|
|
border-color: #8c8f94;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Prevent overflowing of the expanded list of options. */
|
|
.jdropdown-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Style the disabled state via a class, as the artificial dropdown can not use :disabled. */
|
|
&.disabled {
|
|
pointer-events: none;
|
|
|
|
.jdropdown-header {
|
|
color: #a7aaad;
|
|
border-color: #dcdcde;
|
|
background-color: #f6f7f7;
|
|
/* The SVG is arrow-down-alt2 from Dashicons. */
|
|
/* stylelint-disable-next-line function-url-quotes */
|
|
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E");
|
|
box-shadow: none;
|
|
text-shadow: 0 1px 0 #ffffff;
|
|
cursor: default;
|
|
transform: none;
|
|
|
|
&::placeholder {
|
|
color: #a7aaad;
|
|
}
|
|
}
|
|
}
|
|
}
|