studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS: add new icons, colors, utility and modifiers classes

Browse source
This commit is contained in:
Timothée Goguely 2024-09-25 15:25:07 +02:00
parent 338b389477
commit 3b86363637
10 changed files with 96 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/css/src/0.2.variables.css
View file

@ -13,10 +13,11 @@
--color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
--color-white: var(--color-white-100); /* White */
--color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */
--color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */
--color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */
--color-grey-300: hsla(0, 0%, 74%, 1);
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
--color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */
--color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */
--color-black-20: hsla(0, 0%, 10%, .2); /* Black 20 */
--color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */

7
src/assets/css/src/1.2.compositions.grid.css
View file

@ -21,6 +21,13 @@
align-items: var(--align-items, baseline);
}
.grid-center {
display: -ms-grid;
display: grid;
place-items: center;
position: relative;
}
@media (min-width: 35rem) { /* >= 560px */
.grid {

38
src/assets/css/src/2.blocks.button.css
View file

@ -3,6 +3,8 @@
.btn {
--background: var(--color-primary-100);
--color: var(--color-white);
--border-color: transparent;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
@ -17,6 +19,7 @@
cursor: pointer;
background-color: var(--background, var(--color-primary-100));
color: var(--color, var(--color-white));
border: 1px solid var(--border-color);
}
.btn[disabled] {
@ -25,14 +28,39 @@
color: var(--color-black-20);
}
.btn--secondary {
--background: var(--color-primary-10);
--color: var(--color-primary-100);
.btn--primary {
--background: transparent;
--border-color: var(--color-primary-10);
--color: var(--color-primary);
}
.btn--primary:hover {
--background: var(--color-primary-10);
--border-color: var(--color-primary-20);
}
.btn--primary.active,
.btn--primary:active,
.btn--primary[aria-pressed="true"] {
--background: var(--color-primary-100);
--border-color: var(--color-primary-100);
--color: var(--color-white);
}
.btn--primary.active:hover,
.btn--primary[aria-pressed="true"]:hover {
--background: var(--color-primary-hover);
--border-color: var(--color-primary-hover);
}
.btn--black {
--background: var(--color-black);
--color: var(--color-white);
}
.btn--grey,
.btn--grey-700 {
--background: var(--color-grey-700);
--color: var(--color-white);
}
.btn--white {
--background: var(--color-white);
--color: var(--color-grey-700);
@ -42,6 +70,10 @@
--color: var(--color-white);
}
.btn--sm {
padding: .375rem var(--space-12) .5rem;
}
@media (hover: hover) {
}

19
src/assets/css/src/2.blocks.card.css
View file

@ -8,6 +8,7 @@
padding: var(--padding);
background-color: var(--color-background);
border-radius: var(--rounded-2xl);
row-gap: var(--row-gap);
}
.card__title > a {
@ -56,3 +57,21 @@
font-weight: 500;
height: 2.25rem; /* 36px */
}
.card--cta {
border: 2px solid transparent;
cursor: pointer;
align-items: center;
text-align: center;
}
.card--cta svg {
color: var(--color-grey-800);
}
.card--cta:hover {
background-color: var(--color-primary-10);
border-color: var(--color-primary-10);
}
.card--cta:hover svg,
.card--cta:hover h2 {
color: var(--color-primary-100);
}

4
src/assets/css/src/3.utilities.border.css
View file

@ -8,6 +8,10 @@
.border-r { border-right: var(--border) }
.border { border: var(--border) }
/* Border Colors */
.border-grey-200 { border-color: var(--color-grey-200) }
/* Border radius */
.rounded-xs { border-radius: var(--rounded-xs) }

3
src/assets/css/src/3.utilities.colors.css
View file

@ -14,6 +14,9 @@
.text-grey-700 {
color: var(--color-grey-700);
}
.text-grey-800 {
color: var(--color-grey-800);
}
.text-background {
color: var(--color-background);
}

6
src/assets/css/src/3.utilities.flex.css
View file

@ -26,6 +26,12 @@
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.order-first {
order: -9999;

8
src/assets/css/src/3.utilities.icons.css
View file

@ -20,6 +20,8 @@
--icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2.0067 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2.0067 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5001 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18.0009 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-echantillon-virtuel: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 18V8.12502M10 8.12502L2.01294 5M10 8.12502L17.9879 5M17.9875 5C17.9209 5 17.8298 4.8402 17.725 4.8L10.225 1.96249C10.154 1.93151 10 1.91553 10 1.91553C9.92257 1.91553 9.84597 1.93151 9.775 1.96249L2.275 4.84999C2.17591 4.87623 2.08542 4.92794 2 5C1.92519 5.10562 1.87666 5.23795 1.875 5.37499V14.525C1.87662 14.6498 1.91559 14.7713 2 14.8738C2.05817 14.9763 2.15852 15 2.275 15.1L9.775 18H10.225L17.725 15C17.8415 15 18 15 18 15C18.0844 14.7713 18.1234 14.6498 18.125 14.525V5.425C18.1356 5.2709 18 5.11868 18 5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--icon-upload: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.714 15v1.429a2.857 2.857 0 0 0 2.857 2.857H16.43a2.857 2.857 0 0 0 2.857-2.857V15M5.714 5.714l4.286-5m0 0 4.286 5M10 .714v12.857' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
--icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 9.99999H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
[data-icon] {
@ -74,3 +76,9 @@
[data-icon="echantillon-virtuel"] {
--icon: var(--icon-echantillon-virtuel)
}
[data-icon="upload"] {
--icon: var(--icon-upload)
}
[data-icon="description"] {
--icon: var(--icon-description)
}

4
src/assets/css/src/3.utilities.size.css
View file

@ -7,6 +7,10 @@
min-height: 100vh;
min-height: 100dvh;
}
.w-full {
width: 100%;
}
.max-w {
max-width: var(--max-w);
}

1
src/assets/css/src/3.utilities.spacing.css
View file

@ -35,6 +35,7 @@
.mt-24 { margin-top: var(--space-24) }
.mt-32 { margin-top: var(--space-32) }
.mx-auto { margin-left: auto ; margin-right: auto }
.mx-px { margin-left: 1px ; margin-right: 1px }
.mx-4 { margin-left: var(--space-4) ; margin-right: var(--space-4) }
.mx-8 { margin-left: var(--space-8) ; margin-right: var(--space-8) }