first commit
This commit is contained in:
33
media/system/scss/fields/joomla-field-media.scss
Normal file
33
media/system/scss/fields/joomla-field-media.scss
Normal file
@ -0,0 +1,33 @@
|
||||
joomla-field-media .field-media-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 356px;
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-width: 1px 1px 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
joomla-field-media .field-media-preview-icon {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(0,0,0,.25)' d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'/%3E%3C/svg%3E");
|
||||
background-size: 7rem;
|
||||
}
|
||||
|
||||
joomla-field-media .field-media-input {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
joomla-field-media .button-clear {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
joomla-field-media img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
32
media/system/scss/fields/joomla-field-permissions.scss
Normal file
32
media/system/scss/fields/joomla-field-permissions.scss
Normal file
@ -0,0 +1,32 @@
|
||||
joomla-field-permissions .joomla-icon::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1.5;
|
||||
content: "";
|
||||
}
|
||||
|
||||
joomla-field-permissions .joomla-icon.joomla-field-permissions__allowed::after {
|
||||
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
|
||||
}
|
||||
|
||||
joomla-field-permissions .joomla-icon.joomla-field-permissions__denied::after {
|
||||
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
|
||||
}
|
||||
|
||||
joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner {
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner::after {
|
||||
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z'/%3E%3C/svg%3E") no-repeat;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
69
media/system/scss/fields/joomla-field-simple-color.scss
Normal file
69
media/system/scss/fields/joomla-field-simple-color.scss
Normal file
@ -0,0 +1,69 @@
|
||||
joomla-field-simple-color {
|
||||
display: block;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 3px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
width: auto;
|
||||
padding: 0 6px;
|
||||
margin-top: -4px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nocolor {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggRDQENU0dyawAAACZJREFUGNNjPHXqDAMSMDY2ROYyMeAFNJVm/Pv3LzL/7Nnzg8VpAKebCGpIIxHBAAAAAElFTkSuQmCC") !important;
|
||||
}
|
||||
.simplecolors-panel .swatch {
|
||||
margin: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.swatch:hover,
|
||||
.swatch.active {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
|
||||
}
|
||||
|
||||
.simplecolors-panel[data-open=""] {
|
||||
display: block;
|
||||
}
|
||||
.simplecolors-panel {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
display: none;
|
||||
float: left;
|
||||
padding: 6px 2px 2px 6px;
|
||||
margin: 1px 0 0;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
86
media/system/scss/fields/switcher.scss
Normal file
86
media/system/scss/fields/switcher.scss
Normal file
@ -0,0 +1,86 @@
|
||||
$off-background-colour: #d3d3d3;
|
||||
$on-background-colour: #2f7d32;
|
||||
$switcher-width: 62px;
|
||||
$switcher-height: 28px;
|
||||
|
||||
.switcher {
|
||||
position: relative;
|
||||
width: 18rem;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.switcher input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
width: $switcher-width;
|
||||
height: $switcher-height;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switcher input:checked {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.switcher input:checked + label {
|
||||
z-index: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switcher input:not(:checked) + label {
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switcher input:focus ~ .toggle-outside {
|
||||
border-color: var(--focus);
|
||||
box-shadow: 0 0 0 .2rem rgba(26, 70, 107, .25);
|
||||
}
|
||||
|
||||
.switcher label {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 6rem;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
margin-inline-start: 70px;
|
||||
line-height: $switcher-height;
|
||||
text-align: start;
|
||||
transition: opacity .25s ease;
|
||||
}
|
||||
|
||||
.switcher .toggle-outside {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
box-sizing: border-box;
|
||||
width: 58px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $off-background-colour;
|
||||
border: 1px solid rgba(0, 0, 0, .18);
|
||||
transition: .2s ease all;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.switcher input ~ input:checked ~ .toggle-outside {
|
||||
background: $on-background-colour;
|
||||
}
|
||||
|
||||
.switcher .toggle-inside {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: ($switcher-width - 6) * .5;
|
||||
height: $switcher-height;
|
||||
background: #fff;
|
||||
transition: .4s ease all;
|
||||
}
|
||||
|
||||
.switcher input ~ input:checked ~ .toggle-outside .toggle-inside {
|
||||
left: ($switcher-width * .5) - 1;
|
||||
}
|
||||
Reference in New Issue
Block a user