diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css index e0f9df4..7d5b8a8 100644 --- a/src/assets/css/src/2.blocks.button.css +++ b/src/assets/css/src/2.blocks.button.css @@ -39,7 +39,8 @@ } .btn--primary.active, .btn--primary:active, -.btn--primary[aria-pressed="true"] { +.btn--primary[aria-pressed="true"], +input[type="checkbox"]:checked + .btn--primary { --background: var(--color-primary-100); --border-color: var(--color-primary-100); --color: var(--color-white); @@ -54,6 +55,10 @@ --background: var(--color-black); --color: var(--color-white); } +.btn--black-10 { + --background: var(--color-black-10); + --color: var(--color-black); +} .btn--grey, .btn--grey-700 { @@ -74,6 +79,10 @@ padding: .375rem var(--space-12) .5rem; } +.btn[data-icon]::before { + margin-right: var(--space-8); +} + @media (hover: hover) { } diff --git a/src/assets/css/src/3.utilities.flex.css b/src/assets/css/src/3.utilities.flex.css index 9465511..8d448f9 100644 --- a/src/assets/css/src/3.utilities.flex.css +++ b/src/assets/css/src/3.utilities.flex.css @@ -23,6 +23,9 @@ .justify-center { justify-content: center; } +.items-start { + align-items: flex-start; +} .items-center { align-items: center; } diff --git a/src/assets/css/src/3.utilities.overflow.css b/src/assets/css/src/3.utilities.overflow.css index 03f663d..4d2480f 100644 --- a/src/assets/css/src/3.utilities.overflow.css +++ b/src/assets/css/src/3.utilities.overflow.css @@ -1,5 +1,9 @@ /* OVERFLOW UTILITY */ +.overflow-hidden { + overflow: hidden; +} + .overflow-y-hidden { overflow-y: hidden !important; } diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css index 7b54158..058bcfb 100644 --- a/src/assets/css/src/3.utilities.spacing.css +++ b/src/assets/css/src/3.utilities.spacing.css @@ -4,6 +4,7 @@ .m-0 { margin: 0 } +.mb-auto { margin-bottom: auto } .mb-0 { margin-bottom: 0 } .mb-4 { margin-bottom: var(--space-4) } .mb-8 { margin-bottom: var(--space-8) } @@ -27,6 +28,7 @@ .mr-24 { margin-right: var(--space-24) } .-mt-px { margin-top: -1px } +.mt-auto { margin-top: auto } .mt-0 { margin-top: 0 } .mt-4 { margin-top: var(--space-4) } .mt-8 { margin-top: var(--space-8) } @@ -62,6 +64,8 @@ .pt-16 { padding-top: var(--space-16) } .pt-24 { padding-top: var(--space-24) } .pt-32 { padding-top: var(--space-32) } +.pt-40 { padding-top: var(--space-40) } +.pt-48 { padding-top: var(--space-48) } .pb-4 { padding-bottom: var(--space-4) } .pb-8 { padding-bottom: var(--space-8) }