Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
255
web/core/themes/claro/css/base/elements.css
Normal file
255
web/core/themes/claro/css/base/elements.css
Normal file
@ -0,0 +1,255 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
body {
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
.link:hover,
|
||||
.link:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.link:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
a:active,
|
||||
.link:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable heading classes are included to help modules change the styling of
|
||||
* headings on a page without affecting accessibility.
|
||||
*/
|
||||
|
||||
h1,
|
||||
.heading-a {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h2,
|
||||
.heading-b {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h3,
|
||||
.heading-c {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h4,
|
||||
.heading-d {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h5,
|
||||
.heading-e {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h5);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
h6,
|
||||
.heading-f {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h6);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
dl dd,
|
||||
dl dl {
|
||||
margin-block-end: 0.625rem;
|
||||
margin-inline-start: 1.25rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin-block: var(--space-l);
|
||||
margin-inline: 2.5rem var(--space-l);
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
position: absolute;
|
||||
inset-inline-start: -2.5rem;
|
||||
content: open-quote;
|
||||
color: var(--color-absolutezero);
|
||||
font-family: var(--font-family-serif);
|
||||
font-size: var(--space-xl);
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
blockquote::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
u,
|
||||
ins {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
s,
|
||||
strike,
|
||||
del {
|
||||
-webkit-text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
big {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
abbr,
|
||||
acronym {
|
||||
border-bottom: dotted 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 1.5em 0;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details {
|
||||
line-height: var(--details-line-height);
|
||||
}
|
||||
|
||||
details summary {
|
||||
padding: 0.95em 1.45em;
|
||||
}
|
||||
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default focus styles for focused elements.
|
||||
*
|
||||
* This is applied globally to all interactive elements except Toolbar and
|
||||
* Settings Tray since they have their own styles.
|
||||
*/
|
||||
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* These elements should not be displayed until they are processed
|
||||
* by JavaScript, and views-ui-noscript.css exists so browsers
|
||||
* without JavaScript will still display them
|
||||
*/
|
||||
|
||||
.views-tabs,
|
||||
.views-display-top > input.button {
|
||||
display: none;
|
||||
}
|
||||
213
web/core/themes/claro/css/base/elements.pcss.css
Normal file
213
web/core/themes/claro/css/base/elements.pcss.css
Normal file
@ -0,0 +1,213 @@
|
||||
/**
|
||||
* Generic elements.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
body {
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
a,
|
||||
.link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
a:hover,
|
||||
a:focus,
|
||||
.link:hover,
|
||||
.link:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
a:hover,
|
||||
.link:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
a:active,
|
||||
.link:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: var(--space-m) 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable heading classes are included to help modules change the styling of
|
||||
* headings on a page without affecting accessibility.
|
||||
*/
|
||||
h1,
|
||||
.heading-a {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h2,
|
||||
.heading-b {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h2);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h3,
|
||||
.heading-c {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h4,
|
||||
.heading-d {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h5,
|
||||
.heading-e {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h5);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
h6,
|
||||
.heading-f {
|
||||
margin: var(--space-m) 0 var(--space-s);
|
||||
font-size: var(--font-size-h6);
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height-heading);
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
dl {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
dl dd,
|
||||
dl dl {
|
||||
margin-block-end: 10px;
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
blockquote {
|
||||
position: relative;
|
||||
margin-block: var(--space-l);
|
||||
margin-inline: 2.5rem var(--space-l);
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
blockquote::before {
|
||||
position: absolute;
|
||||
inset-inline-start: -2.5rem;
|
||||
content: open-quote;
|
||||
color: var(--color-absolutezero);
|
||||
font-family: var(--font-family-serif);
|
||||
font-size: var(--space-xl);
|
||||
line-height: 1em;
|
||||
}
|
||||
blockquote::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
address {
|
||||
font-style: italic;
|
||||
}
|
||||
u,
|
||||
ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
s,
|
||||
strike,
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
big {
|
||||
font-size: larger;
|
||||
}
|
||||
small {
|
||||
font-size: smaller;
|
||||
}
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
line-height: normal;
|
||||
}
|
||||
abbr,
|
||||
acronym {
|
||||
border-bottom: dotted 1px;
|
||||
}
|
||||
ul {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 1.5em 0;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
ol {
|
||||
margin-block: 0.25em;
|
||||
margin-inline: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
details {
|
||||
line-height: var(--details-line-height);
|
||||
|
||||
& summary {
|
||||
padding: 0.95em 1.45em;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default focus styles for focused elements.
|
||||
*
|
||||
* This is applied globally to all interactive elements except Toolbar and
|
||||
* Settings Tray since they have their own styles.
|
||||
*/
|
||||
.page-wrapper *:focus,
|
||||
.ui-dialog *:focus {
|
||||
outline: var(--focus-outline);
|
||||
box-shadow: var(--focus-box-shadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* These elements should not be displayed until they are processed
|
||||
* by JavaScript, and views-ui-noscript.css exists so browsers
|
||||
* without JavaScript will still display them
|
||||
*/
|
||||
.views-tabs,
|
||||
.views-display-top > input.button {
|
||||
display: none;
|
||||
}
|
||||
90
web/core/themes/claro/css/base/print.css
Normal file
90
web/core/themes/claro/css/base/print.css
Normal file
@ -0,0 +1,90 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
@media print {
|
||||
* {
|
||||
/* Black prints faster */
|
||||
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
|
||||
color: #000 !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a,
|
||||
.link {
|
||||
color: #000;
|
||||
}
|
||||
.button,
|
||||
.button--primary {
|
||||
background: none !important;
|
||||
}
|
||||
.messages {
|
||||
border-width: 1px;
|
||||
border-color: #999;
|
||||
}
|
||||
.is-collapse-enabled .tabs {
|
||||
max-height: 999em;
|
||||
}
|
||||
.is-horizontal .tabs__tab {
|
||||
margin: 0 0.25rem !important;
|
||||
border-radius: 0.25rem 0.25rem 0 0 !important;
|
||||
}
|
||||
.dropbutton-multiple .dropbutton .secondary-action {
|
||||
display: block;
|
||||
}
|
||||
.js .dropbutton-widget,
|
||||
.js td .dropbutton-widget /* Splitbuttons */ {
|
||||
position: relative;
|
||||
}
|
||||
.js .dropbutton .dropbutton-toggle {
|
||||
display: none;
|
||||
}
|
||||
.js .dropbutton-multiple .dropbutton-widget {
|
||||
border-radius: 0.25rem;
|
||||
background: none;
|
||||
}
|
||||
input.form-autocomplete,
|
||||
input.form-text,
|
||||
input.form-tel,
|
||||
input.form-email,
|
||||
input.form-url,
|
||||
input.form-search,
|
||||
input.form-number,
|
||||
input.form-color,
|
||||
input.form-file,
|
||||
textarea.form-textarea,
|
||||
select.form-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
84
web/core/themes/claro/css/base/print.pcss.css
Normal file
84
web/core/themes/claro/css/base/print.pcss.css
Normal file
@ -0,0 +1,84 @@
|
||||
@media print {
|
||||
* {
|
||||
/* Black prints faster */
|
||||
/* https://github.com/h5bp/main.css/blob/main/dist/_print.css#L14 */
|
||||
color: #000 !important;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a,
|
||||
.link {
|
||||
color: #000;
|
||||
}
|
||||
.button,
|
||||
.button--primary {
|
||||
background: none !important;
|
||||
}
|
||||
.messages {
|
||||
border-width: 1px;
|
||||
border-color: #999;
|
||||
}
|
||||
.is-collapse-enabled .tabs {
|
||||
max-height: 999em;
|
||||
}
|
||||
.is-horizontal .tabs__tab {
|
||||
margin: 0 4px !important;
|
||||
border-radius: 4px 4px 0 0 !important;
|
||||
}
|
||||
.dropbutton-multiple .dropbutton .secondary-action {
|
||||
display: block;
|
||||
}
|
||||
.js .dropbutton-widget,
|
||||
.js td .dropbutton-widget /* Splitbuttons */ {
|
||||
position: relative;
|
||||
}
|
||||
.js .dropbutton .dropbutton-toggle {
|
||||
display: none;
|
||||
}
|
||||
.js .dropbutton-multiple .dropbutton-widget {
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
}
|
||||
input.form-autocomplete,
|
||||
input.form-text,
|
||||
input.form-tel,
|
||||
input.form-email,
|
||||
input.form-url,
|
||||
input.form-search,
|
||||
input.form-number,
|
||||
input.form-color,
|
||||
input.form-file,
|
||||
textarea.form-textarea,
|
||||
select.form-select {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
34
web/core/themes/claro/css/base/typography.css
Normal file
34
web/core/themes/claro/css/base/typography.css
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
28
web/core/themes/claro/css/base/typography.pcss.css
Normal file
28
web/core/themes/claro/css/base/typography.pcss.css
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Reusable utility classes that apply vertical spacing consistency and inline
|
||||
* with the base line height of Claro.
|
||||
*/
|
||||
.leader {
|
||||
margin-top: 1.538rem;
|
||||
}
|
||||
.leader-double {
|
||||
margin-top: 3.076rem;
|
||||
}
|
||||
.leader-triple {
|
||||
margin-top: 4.614rem;
|
||||
}
|
||||
.leader-quadruple {
|
||||
margin-top: 6.152rem;
|
||||
}
|
||||
.trailer {
|
||||
margin-bottom: 1.538rem;
|
||||
}
|
||||
.trailer-double {
|
||||
margin-bottom: 3.076rem;
|
||||
}
|
||||
.trailer-triple {
|
||||
margin-bottom: 4.614rem;
|
||||
}
|
||||
.trailer-quadruple {
|
||||
margin-bottom: 6.152rem;
|
||||
}
|
||||
278
web/core/themes/claro/css/base/variables.css
Normal file
278
web/core/themes/claro/css/base/variables.css
Normal file
@ -0,0 +1,278 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
--color-absolutezero: var(--color-blue-600);
|
||||
--color-white: #fff;
|
||||
--color-text: var(--color-gray);
|
||||
--color-text-light: var(--color-gray-500);
|
||||
--color-gray-050-o-40: rgb(243, 244, 249, 0.4);
|
||||
/* Secondary. */
|
||||
--color-gray-200-o-80: rgb(212, 212, 218, 0.8);
|
||||
--color-maximumred: var(--color-red-500);
|
||||
--color-sunglow: #ffd23f;
|
||||
--color-sunglow-shaded: #977405;
|
||||
--color-lightninggreen: #26a769;
|
||||
--color-focus: var(--color-lightninggreen);
|
||||
/* Variations. */
|
||||
--color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
|
||||
--color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
|
||||
--color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
|
||||
--color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
|
||||
--color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
|
||||
--color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
|
||||
--color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
|
||||
--color-bgred-active: var(--color-red-050); /* 10% darker than base. */
|
||||
/* Gray variations. */
|
||||
--color-gray: #232429;
|
||||
--color-gray-900: #393a3f;
|
||||
--color-gray-800: #55565b;
|
||||
--color-gray-700: #75767b;
|
||||
--color-gray-600: #828388;
|
||||
--color-gray-500: #919297;
|
||||
--color-gray-400: #adaeb3;
|
||||
--color-gray-300: #c1c2c7;
|
||||
--color-gray-200: #d3d4d9;
|
||||
--color-gray-100: #dedfe4;
|
||||
--color-gray-050: #f3f4f9;
|
||||
--color-gray-025: #f9faff;
|
||||
/* Blue variations. */
|
||||
--color-blue: var(--color-blue-600);
|
||||
--color-blue-900: #000f33;
|
||||
--color-blue-800: #001f66;
|
||||
--color-blue-700: #002e9a;
|
||||
--color-blue-650: #0036b1;
|
||||
--color-blue-600: #003ecc;
|
||||
--color-blue-500: #004eff;
|
||||
--color-blue-400: #3371ff;
|
||||
--color-blue-300: #6694ff;
|
||||
--color-blue-200: #99b8ff;
|
||||
--color-blue-100: #ccdbff;
|
||||
--color-blue-070: #dbe6ff;
|
||||
--color-blue-050: #e5edff;
|
||||
--color-blue-020: #f5f8ff;
|
||||
/* Red variations. */
|
||||
--color-red: var(--color-red-500);
|
||||
--color-red-900: #2c0707;
|
||||
--color-red-800: #580e0e;
|
||||
--color-red-700: #841515;
|
||||
--color-red-600: #b01c1c;
|
||||
--color-red-550: #c61f1f;
|
||||
--color-red-500: #dc2323;
|
||||
--color-red-400: #e34f4f;
|
||||
--color-red-300: #ea7b7b;
|
||||
--color-red-200: #f1a7a7;
|
||||
--color-red-100: #f8d3d3;
|
||||
--color-red-070: #fae0e0;
|
||||
--color-red-050: #fce9e9;
|
||||
--color-red-020: #fdf5f5;
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
--color-fg: var(--color-text);
|
||||
--color-bg: var(--color-white);
|
||||
--color-link: var(--color-absolutezero);
|
||||
--color-link-hover: var(--color-absolutezero-hover);
|
||||
--color-link-active: var(--color-absolutezero-active);
|
||||
--color-divider: rgb(142, 146, 156, 0.5);
|
||||
/*
|
||||
* Typography.
|
||||
*/
|
||||
--font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--font-family-serif: "Times New Roman", times, serif;
|
||||
--line-height: 1.5;
|
||||
--line-height-heading: 1.3;
|
||||
--line-height-form-label: calc(18rem / 16); /* 18px */
|
||||
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
|
||||
--font-size-xl: 2.25rem; /* ~36px */
|
||||
--font-size-h1: 2.027rem; /* ~32px */
|
||||
--font-size-h2: 1.802rem; /* ~29px */
|
||||
--font-size-h3: 1.602rem; /* ~26px */
|
||||
--font-size-h4: 1.424rem; /* ~23px */
|
||||
--font-size-h5: 1.266rem; /* ~20px */
|
||||
--font-size-h6: 1.125rem; /* 18px */
|
||||
--font-size-s: 0.889rem; /* ~14px */
|
||||
--font-size-xs: 0.79rem; /* ~13px */
|
||||
--font-size-xxs: 0.702rem; /* ~11px */
|
||||
--font-size-label: var(--font-size-s);
|
||||
--font-size-description: var(--font-size-xs);
|
||||
/**
|
||||
* Spaces.
|
||||
*/
|
||||
--space-xl: 3rem; /* 3 * 16px = 48px */
|
||||
--space-l: 1.5rem; /* 1.5 * 16px = 24px */
|
||||
--space-m: 1rem; /* 1 * 16px = 16px */
|
||||
--space-s: 0.75rem; /* 0.75 * 16px = 12px */
|
||||
--space-xs: 0.5rem; /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
--speed-transition: 0.2s;
|
||||
--transition: all var(--speed-transition) ease-out;
|
||||
--base-border-radius: 2px;
|
||||
--focus-border-size: 0.1875rem;
|
||||
--focus-border-offset-size: 2px;
|
||||
--outline-size: 2px;
|
||||
--focus-outline: var(--outline-size) dotted transparent;
|
||||
--focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
|
||||
/**
|
||||
* Shadows.
|
||||
*/
|
||||
--shadow-z3: 0 0.875rem 1.875rem rgb(0, 0, 0, 0.1);
|
||||
/*
|
||||
* Inputs.
|
||||
*/
|
||||
--input-fg-color: var(--color-fg);
|
||||
--input-bg-color: var(--color-bg);
|
||||
--input-fg-color--description: var(--color-gray-800);
|
||||
--input-fg-color--placeholder: var(--color-gray-700);
|
||||
--input-border-color: var(--color-gray-500);
|
||||
--input--hover-border-color: var(--color-text);
|
||||
--input--focus-border-color: var(--color-absolutezero);
|
||||
--input--error-color: var(--color-maximumred);
|
||||
--input--error-border-color: var(--color-maximumred);
|
||||
--input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
|
||||
--input--disabled-fg-color: var(--color-gray-800);
|
||||
--input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
|
||||
--input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
|
||||
--input--disabled-border-opacity: 0.5;
|
||||
--input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
|
||||
--input-border-size: 1px; /* (1/16)em ~ 1px */
|
||||
--input--error-border-size: 2px;
|
||||
--input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
|
||||
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-line-height: var(--space-l);
|
||||
--input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
|
||||
--input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size--small: var(--font-size-xs);
|
||||
--input-line-height--small: 1.3125rem;
|
||||
--input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
|
||||
--input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
|
||||
--input--extrasmall-font-size: var(--font-size-s);
|
||||
--input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
|
||||
--input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
|
||||
--input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
--details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
|
||||
--details-box-shadow: 0 2px 0.25rem rgb(0, 0, 0, 0.1);
|
||||
--details-border-size: 1px;
|
||||
--details-border-size-radius: 2px;
|
||||
--details-accordion-border-size-radius: var(--base-border-radius);
|
||||
--details-spread-box-shadow-radius: 2px;
|
||||
--details-bg-color-transition-duration: 0.12s;
|
||||
--details-box-shadow-transition-duration: 0.2s;
|
||||
--details-transform-transition-duration: 0.12s;
|
||||
--details-line-height: 1.295rem;
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
--button--focus-border-color: var(--color-blue-300);
|
||||
--button-border-radius-size: var(--base-border-radius);
|
||||
--button-fg-color: var(--color-text);
|
||||
--button-bg-color: var(--color-gray-200);
|
||||
--button--hover-bg-color: var(--color-gray-300);
|
||||
--button--active-bg-color: var(--color-gray-400);
|
||||
--button--disabled-bg-color: #ebebed;
|
||||
--button--disabled-fg-color: var(--color-gray-500);
|
||||
--button-fg-color--primary: var(--color-white);
|
||||
--button-bg-color--primary: var(--color-absolutezero);
|
||||
--button--hover-bg-color--primary: var(--color-absolutezero-hover);
|
||||
--button--active-bg-color--primary: var(--color-absolutezero-active);
|
||||
--button--focus-bg-color--primary: var(--button-bg-color--primary);
|
||||
--button--disabled-bg-color--primary: var(--color-gray-200);
|
||||
--button--disabled-fg-color--primary: var(--color-gray-600);
|
||||
--button-fg-color--danger: var(--color-white);
|
||||
--button-bg-color--danger: var(--color-maximumred);
|
||||
--button--hover-bg-color--danger: var(--color-maximumred-hover);
|
||||
--button--active-bg-color--danger: var(--color-maximumred-active);
|
||||
--dropbutton-widget-z-index: 100;
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/
|
||||
--jui-dropdown-fg-color: var(--color-gray-800);
|
||||
--jui-dropdown-bg-color: var(--color-white);
|
||||
--jui-dropdown--active-fg-color: var(--color-white);
|
||||
--jui-dropdown--active-bg-color: var(--color-absolutezero);
|
||||
--jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
|
||||
--jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* jQuery.UI dialog.
|
||||
*/
|
||||
--jui-dialog-title-color: var(--color-white);
|
||||
--jui-dialog-title-bg-color: var(--color-text);
|
||||
--jui-dialog-title-font-size: var(--font-size-h4);
|
||||
--jui-dialog-close-button-size: calc(var(--space-m) * 2);
|
||||
--jui-dialog-close-button-border-radius: 50%;
|
||||
--jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
|
||||
--jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
|
||||
--jui-dialog-border-radius: 0.25rem;
|
||||
--jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
|
||||
--jui-dialog--focus-outline: 2px dotted transparent;
|
||||
--jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
|
||||
--jui-dialog-z-index: 1260;
|
||||
--jui-dialog-off-canvas-z-index: 501;
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
--progress-bar-border-size: 1px;
|
||||
--progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
|
||||
--progress-bar-small-size-radius: var(--space-xs);
|
||||
--progress-bar-spacing-size: var(--space-xs);
|
||||
--progress-bar-transition: width 0.5s ease-out;
|
||||
--progress-bar-label-color: var(--color-text);
|
||||
--progress-bar-description-color: var(--color-gray-800);
|
||||
--progress-bar-description-font-size: var(--font-size-xs);
|
||||
--progress-track-border-color: var(--color-gray-500);
|
||||
--progress-track-bg-color: var(--color-gray-200);
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
--ajax-progress-margin-horizontal: var(--space-s);
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
--breadcrumb-height: 1.25rem;
|
||||
/**
|
||||
* Layout.
|
||||
*/
|
||||
--layout-region-edit-width: min(60rem, 100%);
|
||||
--layout-region-edit-extended-width: min(68rem, 100%);
|
||||
/**
|
||||
* Vertical Tabs.
|
||||
*
|
||||
* These are shared between the vertical tabs and media library.
|
||||
* @see ../components/vertical-tabs.pcss.css
|
||||
* @see ../theme/media-library.pcss.css
|
||||
*/
|
||||
--vertical-tabs-margin-vertical: var(--space-s);
|
||||
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
|
||||
--vertical-tabs-shadow: var(--details-box-shadow);
|
||||
--vertical-tabs-border-color: var(--details-border-color);
|
||||
--vertical-tabs-border-size: 1px;
|
||||
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
|
||||
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
|
||||
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
|
||||
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
|
||||
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-separator-color: var(--color-gray-200);
|
||||
--vertical-tabs-menu-separator-size: 1px;
|
||||
--vertical-tabs-menu-width: 20em;
|
||||
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
|
||||
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
|
||||
--vertical-tabs-menu-link--active-border-size: 0.25rem;
|
||||
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
|
||||
--vertical-tabs-menu--z-index: 0;
|
||||
}
|
||||
272
web/core/themes/claro/css/base/variables.pcss.css
Normal file
272
web/core/themes/claro/css/base/variables.pcss.css
Normal file
@ -0,0 +1,272 @@
|
||||
:root {
|
||||
/*
|
||||
* Color Palette.
|
||||
*/
|
||||
--color-absolutezero: var(--color-blue-600);
|
||||
--color-white: #fff;
|
||||
--color-text: var(--color-gray);
|
||||
--color-text-light: var(--color-gray-500);
|
||||
--color-gray-050-o-40: rgb(243, 244, 249, 0.4);
|
||||
/* Secondary. */
|
||||
--color-gray-200-o-80: rgb(212, 212, 218, 0.8);
|
||||
--color-maximumred: var(--color-red-500);
|
||||
--color-sunglow: #ffd23f;
|
||||
--color-sunglow-shaded: #977405;
|
||||
--color-lightninggreen: #26a769;
|
||||
--color-focus: var(--color-lightninggreen);
|
||||
/* Variations. */
|
||||
--color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
|
||||
--color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
|
||||
--color-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
|
||||
--color-maximumred-active: var(--color-red-600); /* 10% darker than base. */
|
||||
--color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
|
||||
--color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
|
||||
--color-bgred-hover: var(--color-red-020); /* 5% darker than base. */
|
||||
--color-bgred-active: var(--color-red-050); /* 10% darker than base. */
|
||||
/* Gray variations. */
|
||||
--color-gray: #232429;
|
||||
--color-gray-900: #393a3f;
|
||||
--color-gray-800: #55565b;
|
||||
--color-gray-700: #75767b;
|
||||
--color-gray-600: #828388;
|
||||
--color-gray-500: #919297;
|
||||
--color-gray-400: #adaeb3;
|
||||
--color-gray-300: #c1c2c7;
|
||||
--color-gray-200: #d3d4d9;
|
||||
--color-gray-100: #dedfe4;
|
||||
--color-gray-050: #f3f4f9;
|
||||
--color-gray-025: #f9faff;
|
||||
/* Blue variations. */
|
||||
--color-blue: var(--color-blue-600);
|
||||
--color-blue-900: #000f33;
|
||||
--color-blue-800: #001f66;
|
||||
--color-blue-700: #002e9a;
|
||||
--color-blue-650: #0036b1;
|
||||
--color-blue-600: #003ecc;
|
||||
--color-blue-500: #004eff;
|
||||
--color-blue-400: #3371ff;
|
||||
--color-blue-300: #6694ff;
|
||||
--color-blue-200: #99b8ff;
|
||||
--color-blue-100: #ccdbff;
|
||||
--color-blue-070: #dbe6ff;
|
||||
--color-blue-050: #e5edff;
|
||||
--color-blue-020: #f5f8ff;
|
||||
/* Red variations. */
|
||||
--color-red: var(--color-red-500);
|
||||
--color-red-900: #2c0707;
|
||||
--color-red-800: #580e0e;
|
||||
--color-red-700: #841515;
|
||||
--color-red-600: #b01c1c;
|
||||
--color-red-550: #c61f1f;
|
||||
--color-red-500: #dc2323;
|
||||
--color-red-400: #e34f4f;
|
||||
--color-red-300: #ea7b7b;
|
||||
--color-red-200: #f1a7a7;
|
||||
--color-red-100: #f8d3d3;
|
||||
--color-red-070: #fae0e0;
|
||||
--color-red-050: #fce9e9;
|
||||
--color-red-020: #fdf5f5;
|
||||
/*
|
||||
* Base.
|
||||
*/
|
||||
--color-fg: var(--color-text);
|
||||
--color-bg: var(--color-white);
|
||||
--color-link: var(--color-absolutezero);
|
||||
--color-link-hover: var(--color-absolutezero-hover);
|
||||
--color-link-active: var(--color-absolutezero-active);
|
||||
--color-divider: rgb(142, 146, 156, 0.5);
|
||||
/*
|
||||
* Typography.
|
||||
*/
|
||||
--font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
--font-family-serif: "Times New Roman", times, serif;
|
||||
--line-height: 1.5;
|
||||
--line-height-heading: 1.3;
|
||||
--line-height-form-label: calc(18rem / 16); /* 18px */
|
||||
--font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
|
||||
--font-size-xl: 2.25rem; /* ~36px */
|
||||
--font-size-h1: 2.027rem; /* ~32px */
|
||||
--font-size-h2: 1.802rem; /* ~29px */
|
||||
--font-size-h3: 1.602rem; /* ~26px */
|
||||
--font-size-h4: 1.424rem; /* ~23px */
|
||||
--font-size-h5: 1.266rem; /* ~20px */
|
||||
--font-size-h6: 1.125rem; /* 18px */
|
||||
--font-size-s: 0.889rem; /* ~14px */
|
||||
--font-size-xs: 0.79rem; /* ~13px */
|
||||
--font-size-xxs: 0.702rem; /* ~11px */
|
||||
--font-size-label: var(--font-size-s);
|
||||
--font-size-description: var(--font-size-xs);
|
||||
/**
|
||||
* Spaces.
|
||||
*/
|
||||
--space-xl: 3rem; /* 3 * 16px = 48px */
|
||||
--space-l: 1.5rem; /* 1.5 * 16px = 24px */
|
||||
--space-m: 1rem; /* 1 * 16px = 16px */
|
||||
--space-s: 0.75rem; /* 0.75 * 16px = 12px */
|
||||
--space-xs: 0.5rem; /* 0.5 * 16px = 8px */
|
||||
/*
|
||||
* Common.
|
||||
*/
|
||||
--speed-transition: 0.2s;
|
||||
--transition: all var(--speed-transition) ease-out;
|
||||
--base-border-radius: 2px;
|
||||
--focus-border-size: 3px;
|
||||
--focus-border-offset-size: 2px;
|
||||
--outline-size: 2px;
|
||||
--focus-outline: var(--outline-size) dotted transparent;
|
||||
--focus-box-shadow: 0 0 0 var(--focus-border-offset-size) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size)) var(--color-focus);
|
||||
/**
|
||||
* Shadows.
|
||||
*/
|
||||
--shadow-z3: 0 14px 30px rgb(0, 0, 0, 0.1);
|
||||
/*
|
||||
* Inputs.
|
||||
*/
|
||||
--input-fg-color: var(--color-fg);
|
||||
--input-bg-color: var(--color-bg);
|
||||
--input-fg-color--description: var(--color-gray-800);
|
||||
--input-fg-color--placeholder: var(--color-gray-700);
|
||||
--input-border-color: var(--color-gray-500);
|
||||
--input--hover-border-color: var(--color-text);
|
||||
--input--focus-border-color: var(--color-absolutezero);
|
||||
--input--error-color: var(--color-maximumred);
|
||||
--input--error-border-color: var(--color-maximumred);
|
||||
--input--disabled-color: rgb(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
|
||||
--input--disabled-fg-color: var(--color-gray-800);
|
||||
--input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
|
||||
--input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
|
||||
--input--disabled-border-opacity: 0.5;
|
||||
--input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
|
||||
--input-border-size: 1px; /* (1/16)em ~ 1px */
|
||||
--input--error-border-size: 2px;
|
||||
--input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
|
||||
--input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-line-height: var(--space-l);
|
||||
--input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
|
||||
--input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
|
||||
--input-font-size--small: var(--font-size-xs);
|
||||
--input-line-height--small: 1.3125rem;
|
||||
--input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
|
||||
--input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
|
||||
--input--extrasmall-font-size: var(--font-size-s);
|
||||
--input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
|
||||
--input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
|
||||
--input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
|
||||
/*
|
||||
* Details.
|
||||
*/
|
||||
--details-border-color: var(--color-gray-100);
|
||||
--details-summary-shadow-color: var(--color-focus);
|
||||
--details-summary-focus-border-size: var(--focus-border-size);
|
||||
--details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
|
||||
--details-box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
|
||||
--details-border-size: 1px;
|
||||
--details-border-size-radius: 2px;
|
||||
--details-accordion-border-size-radius: var(--base-border-radius);
|
||||
--details-spread-box-shadow-radius: 2px;
|
||||
--details-bg-color-transition-duration: 0.12s;
|
||||
--details-box-shadow-transition-duration: 0.2s;
|
||||
--details-transform-transition-duration: 0.12s;
|
||||
--details-line-height: 1.295rem;
|
||||
/**
|
||||
* Buttons.
|
||||
*/
|
||||
--button--focus-border-color: var(--color-blue-300);
|
||||
--button-border-radius-size: var(--base-border-radius);
|
||||
--button-fg-color: var(--color-text);
|
||||
--button-bg-color: var(--color-gray-200);
|
||||
--button--hover-bg-color: var(--color-gray-300);
|
||||
--button--active-bg-color: var(--color-gray-400);
|
||||
--button--disabled-bg-color: #ebebed;
|
||||
--button--disabled-fg-color: var(--color-gray-500);
|
||||
--button-fg-color--primary: var(--color-white);
|
||||
--button-bg-color--primary: var(--color-absolutezero);
|
||||
--button--hover-bg-color--primary: var(--color-absolutezero-hover);
|
||||
--button--active-bg-color--primary: var(--color-absolutezero-active);
|
||||
--button--focus-bg-color--primary: var(--button-bg-color--primary);
|
||||
--button--disabled-bg-color--primary: var(--color-gray-200);
|
||||
--button--disabled-fg-color--primary: var(--color-gray-600);
|
||||
--button-fg-color--danger: var(--color-white);
|
||||
--button-bg-color--danger: var(--color-maximumred);
|
||||
--button--hover-bg-color--danger: var(--color-maximumred-hover);
|
||||
--button--active-bg-color--danger: var(--color-maximumred-active);
|
||||
--dropbutton-widget-z-index: 100;
|
||||
/**
|
||||
* jQuery.UI dropdown.
|
||||
*/
|
||||
--jui-dropdown-fg-color: var(--color-gray-800);
|
||||
--jui-dropdown-bg-color: var(--color-white);
|
||||
--jui-dropdown--active-fg-color: var(--color-white);
|
||||
--jui-dropdown--active-bg-color: var(--color-absolutezero);
|
||||
--jui-dropdown-border-color: rgb(216, 217, 224, 0.8); /* Light gray with 0.8 opacity. */
|
||||
--jui-dropdown-shadow-color: rgb(34, 35, 48, 0.1); /* Text color with 0.1 opacity. */
|
||||
/**
|
||||
* jQuery.UI dialog.
|
||||
*/
|
||||
--jui-dialog-title-color: var(--color-white);
|
||||
--jui-dialog-title-bg-color: var(--color-text);
|
||||
--jui-dialog-title-font-size: var(--font-size-h4);
|
||||
--jui-dialog-close-button-size: calc(var(--space-m) * 2);
|
||||
--jui-dialog-close-button-border-radius: 50%;
|
||||
--jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
|
||||
--jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
|
||||
--jui-dialog-border-radius: 4px;
|
||||
--jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
|
||||
--jui-dialog--focus-outline: 2px dotted transparent;
|
||||
--jui-dialog--focus-box-shadow: 0 0 0 3px var(--color-focus);
|
||||
--jui-dialog-z-index: 1260;
|
||||
--jui-dialog-off-canvas-z-index: 501;
|
||||
/**
|
||||
* Progress bar.
|
||||
*/
|
||||
--progress-bar-border-size: 1px;
|
||||
--progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
|
||||
--progress-bar-small-size-radius: var(--space-xs);
|
||||
--progress-bar-spacing-size: var(--space-xs);
|
||||
--progress-bar-transition: width 0.5s ease-out;
|
||||
--progress-bar-label-color: var(--color-text);
|
||||
--progress-bar-description-color: var(--color-gray-800);
|
||||
--progress-bar-description-font-size: var(--font-size-xs);
|
||||
--progress-track-border-color: var(--color-gray-500);
|
||||
--progress-track-bg-color: var(--color-gray-200);
|
||||
/**
|
||||
* Ajax progress.
|
||||
*/
|
||||
--ajax-progress-margin-horizontal: var(--space-s);
|
||||
/**
|
||||
* Breadcrumb.
|
||||
*/
|
||||
--breadcrumb-height: 1.25rem;
|
||||
/**
|
||||
* Layout.
|
||||
*/
|
||||
--layout-region-edit-width: min(960px, 100%);
|
||||
--layout-region-edit-extended-width: min(1088px, 100%);
|
||||
/**
|
||||
* Vertical Tabs.
|
||||
*
|
||||
* These are shared between the vertical tabs and media library.
|
||||
* @see ../components/vertical-tabs.pcss.css
|
||||
* @see ../theme/media-library.pcss.css
|
||||
*/
|
||||
--vertical-tabs-margin-vertical: var(--space-s);
|
||||
--vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
|
||||
--vertical-tabs-shadow: var(--details-box-shadow);
|
||||
--vertical-tabs-border-color: var(--details-border-color);
|
||||
--vertical-tabs-border-size: 1px;
|
||||
--vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
|
||||
--vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
|
||||
--vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
|
||||
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
|
||||
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
|
||||
--vertical-tabs-menu-separator-color: var(--color-gray-200);
|
||||
--vertical-tabs-menu-separator-size: 1px;
|
||||
--vertical-tabs-menu-width: 20em;
|
||||
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
|
||||
--vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
|
||||
--vertical-tabs-menu-link--active-border-size: 4px;
|
||||
--vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
|
||||
--vertical-tabs-menu--z-index: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user