Add VirtualSample dialogD, create .dialog class
This commit is contained in:
parent
5e227d9fc3
commit
eed6f69f8f
5 changed files with 283 additions and 81 deletions
|
|
@ -17,6 +17,7 @@
|
|||
@import 'src/2.blocks.badge.css';
|
||||
@import 'src/2.blocks.button.css';
|
||||
@import 'src/2.blocks.card.css';
|
||||
@import 'src/2.blocks.dialog.css';
|
||||
@import 'src/2.blocks.header.css';
|
||||
@import 'src/2.blocks.pill.css';
|
||||
@import 'src/2.blocks.skip-link.css';
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
/* BUTTON BLOCK */
|
||||
|
||||
.btn {
|
||||
--background: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
--border-color: transparent;
|
||||
--btn-background: var(--color-primary-100);
|
||||
--btn-color: var(--color-white);
|
||||
--btn-border-color: transparent;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
padding: .6rem var(--space-16) .75em;
|
||||
padding: .6em var(--space-16) .75em;
|
||||
max-height: 2.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -18,9 +18,13 @@
|
|||
font-weight: 500;
|
||||
border-radius: var(--rounded-lg);
|
||||
cursor: pointer;
|
||||
background-color: var(--background, var(--color-primary-100));
|
||||
color: var(--color, var(--color-white));
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--btn-background, var(--color-primary-100));
|
||||
color: var(--btn-color, var(--color-white));
|
||||
border: 1px solid var(--btn-border-color);
|
||||
}
|
||||
|
||||
.btn.font-serif {
|
||||
padding-bottom: .65em;
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
|
|
@ -33,60 +37,63 @@
|
|||
.btn:active,
|
||||
.btn[aria-pressed="true"],
|
||||
input[type="checkbox"]:checked + .btn--primary {
|
||||
--background: var(--color-primary-100);
|
||||
--border-color: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-primary-100);
|
||||
--btn-border-color: var(--color-primary-100);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
--background: transparent;
|
||||
--border-color: var(--color-primary-10);
|
||||
--color: var(--color-primary);
|
||||
--btn-background: transparent;
|
||||
--btn-border-color: var(--color-primary-10);
|
||||
--btn-color: var(--color-primary);
|
||||
}
|
||||
.btn--primary.active:hover,
|
||||
.btn--primary[aria-pressed="true"]:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--border-color: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
--btn-border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
--background: var(--color-black-10);
|
||||
--border-color: transparent;
|
||||
--color: var(--color-black);
|
||||
--btn-background: var(--color-black-10);
|
||||
--btn-border-color: transparent;
|
||||
--btn-color: var(--color-black);
|
||||
}
|
||||
|
||||
.btn--black {
|
||||
--background: var(--color-black);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-black);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
.btn--black-10 {
|
||||
--background: var(--color-black-10);
|
||||
--color: var(--color-black);
|
||||
--btn-background: var(--color-black-10);
|
||||
--btn-color: var(--color-black);
|
||||
}
|
||||
|
||||
.btn--grey,
|
||||
.btn--grey-700 {
|
||||
--background: var(--color-grey-700);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-grey-700);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--white {
|
||||
--background: var(--color-white);
|
||||
--color: var(--color-grey-700);
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-grey-700);
|
||||
}
|
||||
.btn--white-10 {
|
||||
--background: var(--color-white-10);
|
||||
--color: var(--color-white-80);
|
||||
--btn-background: var(--color-white-10);
|
||||
--btn-color: var(--color-white-80);
|
||||
}
|
||||
.btn--white-20 {
|
||||
--background: var(--color-white-20);
|
||||
--color: var(--color-white-90);
|
||||
--btn-background: var(--color-white-20);
|
||||
--btn-color: var(--color-white-90);
|
||||
}
|
||||
|
||||
.btn--transparent {
|
||||
--background: transparent;
|
||||
--color: var(--color-white);
|
||||
--border-color: var(--color-white-20);
|
||||
--btn-background: transparent;
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
--btn-border-color: var(--color-white-20);
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
|
|
@ -102,34 +109,67 @@ input[type="checkbox"]:checked + .btn--primary {
|
|||
padding: .375rem;
|
||||
}
|
||||
|
||||
.btn--image {
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-grey-800);
|
||||
--btn-border-color: var(--color-black-10);
|
||||
--btn-image-w: 2.5rem;
|
||||
overflow: hidden;
|
||||
padding-left: calc(var(--space-16) + var(--btn-image-w));
|
||||
}
|
||||
.btn--image::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-image: var(--btn-image);
|
||||
background-size: cover;
|
||||
width: var(--btn-image-w);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btn--image[aria-pressed="true"] {
|
||||
--btn-background: var(--color-primary-10);
|
||||
--btn-border-color: var(--color-primary-50);
|
||||
--btn-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.btn:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
}
|
||||
.btn--primary:hover {
|
||||
--background: var(--color-primary-10);
|
||||
--btn-background: var(--color-primary-10);
|
||||
}
|
||||
.btn--white:hover {
|
||||
--background: var(--color-white);
|
||||
--btn-background: var(--color-white);
|
||||
}
|
||||
.btn--white-10:hover {
|
||||
--background: var(--color-white-05);
|
||||
--btn-background: var(--color-white-05);
|
||||
}
|
||||
.btn--white-20:hover {
|
||||
--background: var(--color-white-15);
|
||||
--btn-background: var(--color-white-15);
|
||||
}
|
||||
.btn--grey:hover {
|
||||
--background: var(--color-grey-800);
|
||||
--btn-background: var(--color-grey-800);
|
||||
}
|
||||
.btn--secondary:hover {
|
||||
--background: var(--color-black-20);
|
||||
--btn-background: var(--color-black-20);
|
||||
}
|
||||
.btn--transparent:hover {
|
||||
--background: var(--color-white-05);
|
||||
--btn-background: var(--color-white-05);
|
||||
}
|
||||
.btn[aria-pressed="true"]:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--border-color: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
--btn-border-color: var(--color-primary-hover);
|
||||
}
|
||||
.btn--image:hover {
|
||||
--btn-background: var(--color-primary-10);
|
||||
}
|
||||
.btn--image[aria-pressed="true"]:hover {
|
||||
--btn-background: var(--color-primary-20);
|
||||
--btn-border-color: var(--color-primary-50);
|
||||
--btn-color: var(--color-primary-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
87
src/assets/css/src/2.blocks.dialog.css
Normal file
87
src/assets/css/src/2.blocks.dialog.css
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/* DIALOG BLOCK */
|
||||
|
||||
.dialog {
|
||||
--dialog-max-w: min(100vw - var(--gutter) * 2, 77rem);
|
||||
--dialog-max-h: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
|
||||
--dialog-header-h: 4.5rem;
|
||||
--dialog-footer-h: 4.5rem;
|
||||
--dialog-comments-w: 22.5rem;
|
||||
width: 100%;
|
||||
max-width: var(--dialog-max-w);
|
||||
height: 100%;
|
||||
max-height: var(--dialog-max-h);
|
||||
color: var(--color-grey-800);
|
||||
border-radius: var(--rounded-2xl);
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dialog [data-pc-section="header"] {
|
||||
height: var(--dialog-header-h);
|
||||
padding: 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-white-20);
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
.dialog [data-pc-section="header"] h2 {
|
||||
font-family: var(--font-serif);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: 0 15rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.dialog [data-pc-name="pcclosebutton"] {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.dialog__tabs {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
background: var(--color-black);
|
||||
border-radius: var(--rounded-lg);
|
||||
outline: 4px solid var(--color-black);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.dialog__tabs .btn {
|
||||
align-items: center;
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
.dialog__tabs .btn:hover {
|
||||
--btn-background: var(--color-white-10);
|
||||
}
|
||||
.dialog__tabs .btn[aria-pressed="true"] {
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-text);
|
||||
|
||||
}
|
||||
|
||||
/* Inner */
|
||||
.dialog__inner {
|
||||
background: var(--dialog-inner-background, #F7F7F7);
|
||||
height: 100%;
|
||||
}
|
||||
.dialog__inner > header {
|
||||
background: var(--color-white-50);
|
||||
border-radius: var(--rounded-xl);
|
||||
padding: var(--space-8);
|
||||
border: var(--border-width) solid var(--color-grey-200);
|
||||
}
|
||||
.dialog__inner .options-selector {
|
||||
display: flex;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.dialog [data-pc-section="footer"] {
|
||||
height: var(--footer-h);
|
||||
padding: 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-white-20);
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue