first commit
This commit is contained in:
155
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
vendored
Normal file
155
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
vendored
Normal file
@ -0,0 +1,155 @@
|
||||
@import "../../variables";
|
||||
@import "../../variables-dark";
|
||||
@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins/color-mode";
|
||||
|
||||
// The following is a restyle for the system alerts
|
||||
|
||||
#system-message-container joomla-alert {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 16rem;
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--alert-accent-color, var(--template-bg-dark));
|
||||
background-color: var(--alert-bg-color, var(--white));
|
||||
border: 1px solid var(--alert-accent-color, var(--template-bg-dark));
|
||||
border-radius: .25rem;
|
||||
transition: opacity .15s linear;
|
||||
|
||||
.alert-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: .8rem;
|
||||
line-height: normal;
|
||||
color: var(--white);
|
||||
background: var(--alert-accent-color, var(--template-bg-dark));
|
||||
align-content: center;
|
||||
|
||||
.message::before,
|
||||
.success::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.notice::before,
|
||||
.info::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.warning::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.error::before,
|
||||
.danger::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: var(--template-link-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&[type="success"],
|
||||
&[type="message"] {
|
||||
--alert-accent-color: #{$state-success-text};
|
||||
--alert-bg-color: #{$state-success-bg};
|
||||
}
|
||||
|
||||
&[type="info"],
|
||||
&[type="notice"] {
|
||||
--alert-accent-color: #{$state-info-text};
|
||||
--alert-bg-color: #{$state-info-bg};
|
||||
|
||||
@include color-mode(dark) {
|
||||
p {
|
||||
color: var(--body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
&[type="info"],
|
||||
&[type="notice"] {
|
||||
--alert-accent-color: #{$state-info-text-dark};
|
||||
}
|
||||
}
|
||||
|
||||
&[type="warning"] {
|
||||
.joomla-alert--close {
|
||||
color: #{$state-warning-text};
|
||||
}
|
||||
|
||||
color: #{$state-warning-text};
|
||||
--alert-accent-color: #{$warning};
|
||||
--alert-bg-color: #{$state-warning-bg};
|
||||
}
|
||||
|
||||
&[type="error"],
|
||||
&[type="danger"] {
|
||||
--alert-accent-color: #{$state-danger-text};
|
||||
--alert-bg-color: #{$state-danger-bg};
|
||||
}
|
||||
|
||||
.joomla-alert--close,
|
||||
.joomla-alert-button--close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
padding: .75rem .8rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1rem;
|
||||
color: var(--alert-accent-color);
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 1rem;
|
||||
.alert-message {
|
||||
padding: .15rem .3rem;
|
||||
padding-inline-end: 2rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.alert-message:not(:first-of-type) {
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
369
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
vendored
Normal file
369
media/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
vendored
Normal file
@ -0,0 +1,369 @@
|
||||
@import "../../../../../../vendor/bootstrap/scss/functions";
|
||||
|
||||
// Atum Variables
|
||||
@import "../../variables";
|
||||
|
||||
@import "../../../../../../vendor/bootstrap/scss/variables";
|
||||
@import "../../../../../../vendor/bootstrap/scss/mixins";
|
||||
|
||||
// Tabs
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
joomla-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&[orientation=horizontal]:not([view=accordion]) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&[orientation=horizontal]:not([view=accordion]) > div[role=tablist] {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> div[role=tablist] {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
list-style: outside none none;
|
||||
border-bottom: 1px solid var(--template-bg-dark-10);
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: .6rem 1rem;
|
||||
text-decoration: none;
|
||||
background-color: var(--body-bg);
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:first-of-type,
|
||||
&[aria-expanded=true]:first-of-type {
|
||||
border-start-start-radius: .25rem;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[aria-expanded=true],
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--template-bg-dark-60);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background-color: var(--template-link-color);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--template-text-light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded=true] {
|
||||
font-weight: $font-weight-bold;
|
||||
background: var(--template-bg-dark-3);
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
&[aria-expanded=true],
|
||||
&:focus,
|
||||
&:hover {
|
||||
/* stylelint-enable max-nesting-depth */
|
||||
color: var(--template-text-light);
|
||||
}
|
||||
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
&[aria-expanded=true] {
|
||||
/* stylelint-enable max-nesting-depth */
|
||||
background: var(--template-bg-dark-60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--template-text-dark) !important;
|
||||
}
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
.text-muted {
|
||||
/* stylelint-enable max-nesting-depth */
|
||||
color: var(--template-text-light) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> button[role=region] {
|
||||
width: 100%;
|
||||
padding: .7rem;
|
||||
color: var(--template-text-light);
|
||||
text-align: start;
|
||||
background-color: var(--template-link-color);
|
||||
border: 1px solid var(--template-bg-dark-3);
|
||||
border-top: 0;
|
||||
|
||||
&[aria-expanded=true],
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--template-text-light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
> button[role=region] {
|
||||
border-color: var(--template-bg-dark-70);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
--gutter-x: 2rem;
|
||||
display: none;
|
||||
padding: 30px 2vw;
|
||||
background-color: var(--body-bg);
|
||||
border: 0;
|
||||
border-radius: .25rem;
|
||||
box-shadow: none;
|
||||
|
||||
&[active] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-card-columns > * > & {
|
||||
height: 100%;
|
||||
border-left: 1px solid var(--template-bg-dark-10);
|
||||
}
|
||||
}
|
||||
|
||||
joomla-tab[orientation=vertical] {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
|
||||
> div[role=tablist] {
|
||||
flex: 0 0 25%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 25%;
|
||||
max-width: 25%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> button[role=tab] {
|
||||
text-align: start;
|
||||
&[aria-expanded=true] {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-bg-dark-60);
|
||||
}
|
||||
}
|
||||
|
||||
> button[role=tab]:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .75em 1em;
|
||||
margin: -1px 0;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
box-shadow: none;
|
||||
|
||||
&[aria-expanded=true],
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--template-text-light);
|
||||
background-color: var(--template-bg-dark-60);
|
||||
background-image: none;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -1px;
|
||||
width: 5px;
|
||||
height: auto;
|
||||
background-color: var(--template-bg-dark);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--template-text-light) !important;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--template-text-dark) !important;
|
||||
}
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
/* stylelint-disable max-nesting-depth */
|
||||
.text-muted {
|
||||
/* stylelint-enable max-nesting-depth */
|
||||
color: var(--template-text-light) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
width: 100%;
|
||||
padding: $grid-gutter-width-s 0 $grid-gutter-width-s $grid-gutter-width-s;
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
joomla-tab[view=accordion] {
|
||||
flex-direction: column;
|
||||
white-space: normal;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04);
|
||||
|
||||
> div[role=tablist] {
|
||||
background-color: $white;
|
||||
|
||||
> button[role=tab] {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .75em 1em;
|
||||
color: var(--template-text-light);
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
box-shadow: none;
|
||||
|
||||
&[aria-expanded=true]::after,
|
||||
&:hover::after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
display: block;
|
||||
width: calc(100% + 2px);
|
||||
height: 5px;
|
||||
content: "";
|
||||
background-color: var(--template-bg-dark);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> joomla-tab-element {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
|
||||
&[active] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
[active],
|
||||
[aria-expanded=true] {
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
.col-md-6,
|
||||
.col-md-9,
|
||||
.col-md-3 {
|
||||
padding: .5rem 0 0 !important;
|
||||
}
|
||||
|
||||
#permissions-sliders > joomla-tab-element[active] {
|
||||
padding: 0 !important;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
[dir=ltr] & .respTable {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir=rtl] & .respTable {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.respTable, .respTable thead, .respTable tbody, .respTable tr, .respTable th, .respTable td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.respTable thead {
|
||||
position: absolute;
|
||||
top: -1111px;
|
||||
left: -1111px;
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
.respTable td::before {
|
||||
font-weight: $bold-weight;
|
||||
content: attr(data-label) ":";
|
||||
|
||||
[dir=ltr] & {
|
||||
float: left;
|
||||
padding: 0 2em 0 0;
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
float: right;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
.respTable td:nth-child(1) {
|
||||
font-weight: $bold-weight;
|
||||
}
|
||||
|
||||
.respTable td:last-child {
|
||||
border-bottom: 1em var(--template-bg-dark-80) solid;
|
||||
}
|
||||
|
||||
.oddCol {
|
||||
background: var(--template-bg-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user