init
This commit is contained in:
AlexBa16
@@ -0,0 +1,40 @@
|
||||
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;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
joomla-field-media .input-group > .btn.btn-success.button-select {
|
||||
border-top-right-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
|
||||
joomla-field-media .button-clear {
|
||||
border-top-right-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
|
||||
joomla-field-media img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
joomla-field-simple-color {
|
||||
display: block;
|
||||
|
||||
button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
|
||||
border-radius: var(--border-radius, .25rem);
|
||||
margin-inline: .5rem;
|
||||
margin-block-end: .24rem;
|
||||
}
|
||||
|
||||
&::part(close) {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin-inline: .5rem;
|
||||
margin-block-end: .2rem;
|
||||
}
|
||||
|
||||
&::part(opener) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
|
||||
border-radius: var(--border-radius, .25rem);
|
||||
appearance: none;
|
||||
margin-block: .7rem;
|
||||
}
|
||||
|
||||
&::part(opener):focus,
|
||||
&::part(opener):hover,
|
||||
button[aria-pressed=true] {
|
||||
border: 2px solid var(--template-link-color, rgba(82 168 236 / .8));
|
||||
box-shadow: 0 0 0 .25rem #2a69b740;
|
||||
}
|
||||
|
||||
&::part(panel) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
float: inline-start;
|
||||
padding: .64rem 0 .4rem;
|
||||
background-color: var(--body-bg, #fff);
|
||||
background-clip: padding-box;
|
||||
border: var(--border-width, 1px) solid var(--input-border-color, #ccc);
|
||||
border-radius: var(--border-radius, .25rem);
|
||||
box-shadow: 0 5px 10px rgba(0 0 0 / .2);
|
||||
}
|
||||
}
|
||||
@@ -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