primo commit
This commit is contained in:
120
media/regularlabs/scss/_colors.scss
Normal file
120
media/regularlabs/scss/_colors.scss
Normal file
@ -0,0 +1,120 @@
|
||||
$rl-colors: (
|
||||
gray-50: #f9fafa,
|
||||
gray-100: #f4f5f6,
|
||||
gray-200: #e6e8ec,
|
||||
gray-300: #c0c6cf,
|
||||
gray-400: #929cab,
|
||||
gray-500: #637188,
|
||||
gray-600: #4f5a6c,
|
||||
gray-700: #3c4452,
|
||||
gray-800: #2a303a,
|
||||
gray-900: #1e2228,
|
||||
red-50: #fdf8f8,
|
||||
red-100: #fcf0ef,
|
||||
red-200: #f9dcdc,
|
||||
red-300: #f1a9a9,
|
||||
red-400: #e66968,
|
||||
red-500: #dc2a28,
|
||||
red-600: #b02120,
|
||||
red-700: #861918,
|
||||
red-800: #5e1211,
|
||||
red-900: #420c0c,
|
||||
orange-50: #fefaf7,
|
||||
orange-100: #fef4ee,
|
||||
orange-200: #fee7d9,
|
||||
orange-300: #fdc3a1,
|
||||
orange-400: #fc975a,
|
||||
orange-500: #fb6b14,
|
||||
orange-600: #c85510,
|
||||
orange-700: #99410c,
|
||||
orange-800: #6b2e08,
|
||||
orange-900: #4b2006,
|
||||
yellow-50: #fffcf7,
|
||||
yellow-100: #fff8ee,
|
||||
yellow-200: #fff1d9,
|
||||
yellow-300: #ffdca0,
|
||||
yellow-400: #ffc259,
|
||||
yellow-500: #ffa813,
|
||||
yellow-600: #cc860f,
|
||||
yellow-700: #9b660b,
|
||||
yellow-800: #6d4808,
|
||||
yellow-900: #4c3205,
|
||||
green-50: #f8fcf9,
|
||||
green-100: #eef8f2,
|
||||
green-200: #daefe1,
|
||||
green-300: #a2d9b5,
|
||||
green-400: #5dbc7e,
|
||||
green-500: #18a047,
|
||||
green-600: #138038,
|
||||
green-700: #0e612b,
|
||||
green-800: #0a441e,
|
||||
green-900: #073015,
|
||||
teal-50: #f7fbfc,
|
||||
teal-100: #eef7f8,
|
||||
teal-200: #d8eef0,
|
||||
teal-300: #9fd6da,
|
||||
teal-400: #57b8bf,
|
||||
teal-500: #0f9aa4,
|
||||
teal-600: #0c7b83,
|
||||
teal-700: #095d64,
|
||||
teal-800: #064246,
|
||||
teal-900: #042e31,
|
||||
blue-50: #f7fafd,
|
||||
blue-100: #eef3fc,
|
||||
blue-200: #d8e5f9,
|
||||
blue-300: #9fbef0,
|
||||
blue-400: #588de5,
|
||||
blue-500: #115dda,
|
||||
blue-600: #0d4aae,
|
||||
blue-700: #0a3884,
|
||||
blue-800: #07275d,
|
||||
blue-900: #051b41,
|
||||
purple-50: #faf8fd,
|
||||
purple-100: #f5effc,
|
||||
purple-200: #e9daf9,
|
||||
purple-300: #c8a3f0,
|
||||
purple-400: #9f5fe5,
|
||||
purple-500: #761bda,
|
||||
purple-600: #5e15ae,
|
||||
purple-700: #471084,
|
||||
purple-800: #320b5d,
|
||||
purple-900: #230841,
|
||||
pink-50: #fdf8fc,
|
||||
pink-100: #fbeef8,
|
||||
pink-200: #f7daf0,
|
||||
pink-300: #eda3da,
|
||||
pink-400: #e05ebf,
|
||||
pink-500: #d319a4,
|
||||
pink-600: #a81483,
|
||||
pink-700: #800f64,
|
||||
pink-800: #5a0a46,
|
||||
pink-900: #3f0731,
|
||||
);
|
||||
|
||||
@function rl-color($color, $number: 500) {
|
||||
@if ($number == 0) {
|
||||
@return $rl-white;
|
||||
}
|
||||
|
||||
@if ($number == 1000) {
|
||||
@return $rl-black;
|
||||
}
|
||||
|
||||
@if ($color == "grey") {
|
||||
$color: gray;
|
||||
}
|
||||
|
||||
@return map-get($rl-colors, #{$color}-#{$number});
|
||||
}
|
||||
|
||||
$rl-white: #ffffff;
|
||||
$rl-black: #000000;
|
||||
$rl-gray: rl-color(gray, 500);
|
||||
$rl-red: rl-color(red, 500);
|
||||
$rl-orange: rl-color(orange, 500);
|
||||
$rl-yellow: rl-color(yellow, 500);
|
||||
$rl-green: rl-color(green, 500);
|
||||
$rl-teal: rl-color(teal, 500);
|
||||
$rl-blue: rl-color(blue, 500);
|
||||
$rl-purple: rl-color(purple, 500);
|
||||
$rl-pink: rl-color(pink, 500);
|
||||
42
media/regularlabs/scss/_icons.scss
Normal file
42
media/regularlabs/scss/_icons.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@import "../../vendor/fontawesome-free/scss/variables";
|
||||
@import "../../vendor/fontawesome-free/scss/mixins";
|
||||
|
||||
.icon-reglab {
|
||||
background-color: #000000;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
height: 1em;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
width: 1em;
|
||||
|
||||
.page-title & {
|
||||
background-color: #ffffff;
|
||||
vertical-align: -.1em;
|
||||
}
|
||||
}
|
||||
|
||||
$extra_fa_icons: (
|
||||
file-import : $fa-var-file-import,
|
||||
file-export : $fa-var-file-export,
|
||||
hand-pointer : $fa-var-hand-pointer,
|
||||
) !default;
|
||||
|
||||
// Parse standard icons mapping array
|
||||
@each $key, $value in $extra_fa_icons {
|
||||
.#{$jicon-css-prefix}-#{$key} {
|
||||
&:before {
|
||||
content: fa-content($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
4
media/regularlabs/scss/_variables.scss
Normal file
4
media/regularlabs/scss/_variables.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "../../templates/administrator/atum/scss/_variables";
|
||||
@import "_colors";
|
||||
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
742
media/regularlabs/scss/admin-form.scss
Normal file
742
media/regularlabs/scss/admin-form.scss
Normal file
@ -0,0 +1,742 @@
|
||||
/**
|
||||
* [Copyright Regular Labs]
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
@import "_icons";
|
||||
|
||||
/*
|
||||
* Regular Labs specific styles
|
||||
*/
|
||||
|
||||
.rl-flex {
|
||||
display: flex;
|
||||
|
||||
.rl-flex > {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@mixin rl-w($width: "", $postfix: "") {
|
||||
.rl-w-#{$width},
|
||||
.input-group.rl-w-#{$width},
|
||||
.form-control.rl-w-#{$width},
|
||||
.input-group > .form-control.rl-w-#{$width} {
|
||||
max-width: 100%;
|
||||
width: #{$width}#{$postfix};
|
||||
}
|
||||
.rl-min-w-#{$width} {
|
||||
min-width: #{$width}#{$postfix};
|
||||
}
|
||||
}
|
||||
|
||||
@include rl-w(2em);
|
||||
@include rl-w(3em);
|
||||
@include rl-w(4em);
|
||||
@include rl-w(5em);
|
||||
@include rl-w(6em);
|
||||
@include rl-w(7em);
|
||||
@include rl-w(8em);
|
||||
@include rl-w(9em);
|
||||
@include rl-w(10em);
|
||||
@include rl-w(12em);
|
||||
@include rl-w(16em);
|
||||
@include rl-w(20em);
|
||||
@include rl-w(24em);
|
||||
|
||||
@each $color in gray, red, orange, yellow, green, teal, blue, purple, pink {
|
||||
.rl-#{$color} {
|
||||
color: rl-color($color, 600);
|
||||
}
|
||||
.rl-bg-#{$color} {
|
||||
background-color: rl-color($color, 500);
|
||||
}
|
||||
.rl-border-#{$color} {
|
||||
border-color: rl-color($color, 500);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-license,
|
||||
.rl-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
a,
|
||||
a[target=_blank] {
|
||||
&:before {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-footer {
|
||||
.rl-footer-review {
|
||||
a.stars {
|
||||
display: inline-block;
|
||||
|
||||
.icon-star {
|
||||
color: $yellow;
|
||||
margin: 0;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.icon-star {
|
||||
transform: rotate(216deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-footer-copyright {
|
||||
font-size: 0.7em;
|
||||
margin-top: 3px;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-code {
|
||||
background-color: var(--template-bg-dark-3);
|
||||
border: 1px solid var(--template-bg-dark-10);
|
||||
border-radius: .25rem;
|
||||
color: var(--alert-success);
|
||||
font-family: $font-family-monospace;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
padding: .1rem .1rem;
|
||||
|
||||
&.rl-code-block {
|
||||
max-width: 100%;
|
||||
padding: .25rem .5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.rl-form {
|
||||
//.control-group {
|
||||
// .form-select {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
.form-control {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
padding: 0;
|
||||
|
||||
option {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options-form {
|
||||
legend {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.labels-sm {
|
||||
.control-label {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
|
||||
.is-flipped .choices__list--dropdown {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
}
|
||||
|
||||
a.rl-no-styling {
|
||||
text-decoration: none !important;
|
||||
|
||||
&:before {
|
||||
content: "" !important;
|
||||
-webkit-padding-end: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
input.rl-code-field {
|
||||
&.form-control {
|
||||
font-family: $font-family-monospace;
|
||||
|
||||
&.inactive {
|
||||
font-weight: 700;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.rl-key-field {
|
||||
&.form-control {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-admin-popover-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.rl-admin-popover-full {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-admin-popover {
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, .15);
|
||||
color: $gray-800;
|
||||
|
||||
font-size: 1rem;
|
||||
left: 0;
|
||||
|
||||
margin: .25em;
|
||||
|
||||
max-width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
z-index: 1060;
|
||||
|
||||
.form-vertical & {
|
||||
margin-top: -.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-panel {
|
||||
border: 1px solid $info-bg;
|
||||
border-left-width: .6rem;
|
||||
border-radius: .3rem;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.rl-panel-success {
|
||||
border-color: $success-bg;
|
||||
}
|
||||
|
||||
&.rl-panel-warning {
|
||||
border-color: $warning-bg;
|
||||
}
|
||||
|
||||
&.rl-panel-error {
|
||||
border-color: $danger-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-alert.alert {
|
||||
&.alert-info {
|
||||
background-color: $blue;
|
||||
border: 1px solid $blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.rl-alert-light {
|
||||
&.alert-info {
|
||||
background-color: lighten($blue, 50%);
|
||||
border: 2px solid $blue;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background-color: lighten($green, 60%);
|
||||
border: 2px solid $green;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background-color: lighten($yellow, 43%);
|
||||
border: 2px solid $yellow;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background-color: lighten($red, 50%);
|
||||
border: 2px solid $red;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-badge.badge {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
|
||||
&.bg-info {
|
||||
background-color: $blue !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
background-color: $yellow !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-treeselect {
|
||||
&.card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.treeselect {
|
||||
margin-bottom: 0;
|
||||
|
||||
.dropdown-toggle::after {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
border-bottom: none;
|
||||
line-height: 1rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.rl-item-checked > .treeselect-item {
|
||||
margin: 0 -.25rem;
|
||||
padding: 0 .25rem;
|
||||
background-color: rl-color(blue, 200);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-btn-group.btn-group {
|
||||
&.radio > .btn-check {
|
||||
+ .btn {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
+ .btn:hover,
|
||||
&:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[disabled] + .btn,
|
||||
&:disabled + .btn {
|
||||
background-color: $gray-300;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-btn-group-separate {
|
||||
display: block;
|
||||
|
||||
> .btn {
|
||||
border-radius: 0.2rem !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&.radio > .btn-check {
|
||||
+ .btn {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
+ .btn:hover,
|
||||
&:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[disabled] + .btn,
|
||||
&:disabled + .btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-btn-group-min-size {
|
||||
> .btn {
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-bg-transparent {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
tr.rl-tr-bg-transparent {
|
||||
.table > * > & > * {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.rl-w-md-25 {
|
||||
width: 25%;
|
||||
}
|
||||
.rl-w-md-30 {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
//tr.rl-tr-title {
|
||||
// .table > * > & > * {
|
||||
// padding: 4rem .5rem .5rem;
|
||||
// }
|
||||
//
|
||||
// .table > *:first-child > &:first-child > * {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
.rl-badge {
|
||||
> small {
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-modal .btn-group > .btn {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.control-group > div > .rl-alert {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-not-inline .form-check-inline,
|
||||
.rl-form-check-not-inline .form-check-inline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-style-disabled .rl-checkbox-checked label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.rl-button-no-text {
|
||||
&.header-item-content {
|
||||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.subhead joomla-toolbar-button &.btn > span {
|
||||
-webkit-margin-end: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card.rl-card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
margin: 1rem 0;
|
||||
|
||||
&,
|
||||
.card-body > *,
|
||||
.alert > * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body:not(:first-child) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.rl-card-button {
|
||||
order: 1;
|
||||
-webkit-margin-start: auto;
|
||||
margin-inline-start: auto;
|
||||
|
||||
> * {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-spinner {
|
||||
position: absolute;
|
||||
animation: rl-spinner 1.2s infinite linear;
|
||||
border: 3px solid $rl-gray;
|
||||
border-top-color: $rl-green;
|
||||
border-right-color: $rl-yellow;
|
||||
border-bottom-color: $rl-red;
|
||||
border-left-color: $rl-blue;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: calc(50% - 9px);
|
||||
|
||||
&.rl-spinner-lg {
|
||||
border-width: 4px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-has-spinner {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
@keyframes rl-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Global extra styles
|
||||
*/
|
||||
|
||||
.btn-md, .btn-group-md > .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
joomla-field-subform.rl-subform {
|
||||
&.rl-hide-main-buttons > .btn-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.rl-move-add-button div.subform-repeatable-group {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
> .btn-toolbar .btn.group-add {
|
||||
right: auto;
|
||||
left: 0;
|
||||
bottom: -3rem;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subform-repeatable-group {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rl-bg-danger-light {
|
||||
background-color: $state-danger-bg;
|
||||
}
|
||||
|
||||
button, [type=button], [type=reset], [type=submit] {
|
||||
&.rl-webkit-no-appearance {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
&.rl-form-select-info {
|
||||
color: var(--info);
|
||||
background-color: var(--info);
|
||||
border-color: var(--info);
|
||||
|
||||
option {
|
||||
color: $gray-900;
|
||||
background-color: var(--white-offset);
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-form-select-ghosted {
|
||||
color: $gray-500;
|
||||
|
||||
option {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Joomla core style overrides
|
||||
*/
|
||||
|
||||
// Makes label be full width when using form-vertical for instance
|
||||
.control-group > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-vertical .control-group .control-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.control-group .form-select {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
joomla-field-subform .icon-info-circle {
|
||||
color: var(--template-text-dark) !important;
|
||||
font-size: 0.8571rem !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-left,
|
||||
.btn.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right,
|
||||
.btn.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.js-stools-column-order > .icon-sort:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.display-block:not(.hidden) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-danger code {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
z-index: 1060 !important;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
.btn.disabled,
|
||||
a.disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-ajax-wrapper {
|
||||
> *:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:has(.rl-ajax-field) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .rl-ajax-field {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: 9px 1.25rem !important;
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
> *:first-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .rl-ajax-field {
|
||||
opacity: 0;
|
||||
animation: rl-fade-in .5s 3s 1 forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switcher input ~ input:checked.rl-radio-warning ~ .toggle-outside {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
@keyframes rl-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
95
media/regularlabs/scss/mini-colors.scss
Normal file
95
media/regularlabs/scss/mini-colors.scss
Normal file
@ -0,0 +1,95 @@
|
||||
/**
|
||||
* [Copyright Regular Labs]
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.rl-mini-colors-button {
|
||||
background-image: repeating-linear-gradient(45deg, #dddddd 25%, transparent 25%, transparent 75%, #dddddd 75%, #dddddd),
|
||||
repeating-linear-gradient(45deg, #dddddd 25%, #ffffff 25%, #ffffff 75%, #dddddd 75%, #dddddd);
|
||||
background-position: 0 0, 4px 4px;
|
||||
background-size: 8px 8px;
|
||||
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-indent: -1000px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
box-shadow: inset 0 0 2px $gray-500;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:focus:after {
|
||||
box-shadow: inset 0 0 0 2px var(--focus);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
input {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.rl-mini-colors-button {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-picker {
|
||||
box-sizing: border-box;
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, .15);
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
width: 178px;
|
||||
z-index: 1100;
|
||||
justify-content: space-between;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 12px;
|
||||
|
||||
&.rl-mini-colors-open {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-swatches {
|
||||
margin: 0;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rl-mini-colors-button {
|
||||
position: relative;
|
||||
margin: 6px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user