@coopdigital/styles 0.16.1 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-green);--bg-color-hover:var(--color-green-hover);--bg-color-active:var(--color-green-active);--shadow:0;--shadow-hover:0;--text-color:var(--color-white);--text-color-hover:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--min-height:var(--spacing-48);cursor:pointer;
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-green);--bg-color-hover:var(--color-green-hover);--bg-color-active:var(--color-green-active);--shadow:0;--shadow-hover:0;--text-color:var(--color-white);--text-color-hover:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--min-height:var(--spacing-48);cursor:pointer;width:max-content;height:var(--min-height);margin-bottom:var(--spacing-8);padding:var(--padding-y)var(--padding-x);border-radius:var(--ui-border-radius-m);font-size:var(--type-size);font-weight:500;line-height:var(--type-line-height-default);color:var(--text-color);text-align:center;background:var(--bg-color);box-shadow:var(--shadow);border:0;outline:none;justify-content:center;align-items:center;gap:.5rem;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:background-color .15s ease-in-out,color .15s ease-in-out,text-decoration-color .15s ease-in-out;display:inline-flex}.coop-button[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-24);--min-height:var(--spacing-40)}.coop-button[data-size=lg]{--type-size:var(--type-size-18);--min-height:var(--spacing-52)}.coop-button[data-size=xl]{--type-size:var(--type-size-20);--min-height:var(--spacing-54)}.coop-button:focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-button:not([data-loading]):active{background:var(--bg-color-active)}.coop-button:not([data-loading],[aria-disabled]):hover{color:var(--text-color-hover);-webkit-text-decoration-color:var(--text-color-hover);text-decoration-color:var(--text-color-hover);background:var(--bg-color-hover);box-shadow:var(--shadow-hover)}.coop-button[data-width=full]{width:100%}.coop-button[data-loading]{cursor:wait;position:relative}.coop-button[data-loading] svg{width:1em;height:1em;animation:1.25s linear infinite spin}.coop-button>*{pointer-events:none}.coop-button[aria-disabled]{--bg-color:var(--color-grey-mid);--bg-color-active:var(--color-grey-mid);--bg-color-hover:var(--color-grey-mid);--text-color:var(--color-white);cursor:auto;outline:0}.coop-button[aria-disabled][data-variant*=ghost]{--bg-color:transparent;--bg-color-active:transparent;--bg-color-hover:transparent;--text-color:var(--color-grey-mid);--shadow:inset 0 0 0 2px var(--color-grey-mid)}@media (width>=48em){.coop-button{--padding-x:var(--spacing-40)}}.coop-button[data-variant=blue]:not([aria-disabled]){--bg-color:var(--color-blue);--bg-color-hover:var(--color-blue-hover);--bg-color-active:var(--color-blue-active);--text-color:var(--color-white);--text-color-hover:var(--color-white)}.coop-button[data-variant=white]:not([aria-disabled]){--bg-color:var(--color-white);--bg-color-hover:var(--color-white-hover);--bg-color-active:var(--color-white-active);--text-color:var(--color-black);--text-color-hover:var(--color-black)}.coop-button[data-variant=grey]:not([aria-disabled]){--bg-color:var(--color-grey);--bg-color-hover:var(--color-grey-hover);--bg-color-active:var(--color-grey-active);--text-color:var(--color-black);--text-color-hover:var(--color-black)}.coop-button[data-variant=green-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-green);--text-color-hover:var(--color-green-hover);--shadow:inset 0 0 0 2px var(--color-green);--shadow-hover:inset 0 0 0 2px var(--color-green-hover)}.coop-button[data-variant=blue-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-blue);--text-color-hover:var(--color-blue-hover);--shadow:inset 0 0 0 2px var(--color-blue);--shadow-hover:inset 0 0 0 2px var(--color-blue-hover)}.coop-button[data-variant=white-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-white);--text-color-hover:var(--color-white-hover);--shadow:inset 0 0 0 2px var(--color-white);--shadow-hover:inset 0 0 0 2px var(--color-white-hover)}.coop-button[data-variant=grey-ghost]:not([aria-disabled]){--bg-color:transparent;--bg-color-hover:transparent;--bg-color-active:transparent;--text-color:var(--color-grey);--text-color-hover:var(--color-grey-hover);--shadow:inset 0 0 0 2px var(--color-grey);--shadow-hover:inset 0 0 0 2px var(--color-grey-hover)}
|
package/dist/components/Card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.coop-card{--card-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;--label-bg:none;--card-bg:var(--color-white);--badge-x:.5rem;--badge-y:.5rem;flex-direction:var(--card-direction);border-radius:var(--ui-border-radius-m);box-shadow:var(--ui-shadow);transition:box-shadow var(--ui-transition-hover);display:flex;position:relative}@media (width>=48em){.coop-card[data-layout=horizontal]{--card-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}.coop-card[data-layout=horizontal][data-image-pos=right]{--card-direction:row-reverse;--image-border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0}}.coop-card[data-badge-pos=popout]{--badge-x:-10px;--badge-y:-10px}.coop-card .coop-card--heading{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-card img{width:100%;height:100%}.coop-card p{margin:0}.coop-card--link{color:inherit;outline:0;text-decoration:none}.coop-card--link:before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-card--link:focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-card--link:hover .coop-card--heading,.coop-card--link:focus .coop-card--heading{text-decoration:underline}.coop-card--content{gap:var(--spacing-6);flex-direction:column;display:flex}.coop-card--inner{gap:var(--spacing-12);width:100%;padding:var(--spacing-24);border-radius:var(--ui-border-radius-m);justify-content:space-between;align-items:flex-start;display:flex}.coop-card--icon{pointer-events:none;justify-content:flex-end;align-self:center;min-width:1rem;transition:transform .2s ease-out;display:flex}.coop-card--icon svg{height:1rem}.coop-card--badge{z-index:10;top:var(--badge-y);right:var(--badge-x);transition:transform .1s ease-out;position:absolute}.coop-card--label{width:fit-content;display:inline-block}.coop-card--label[class*=bg-]{padding:var(--spacing-6)var(--spacing-12);border-radius:var(--ui-border-radius);font-weight:var(--type-weight-demibold)}.coop-card:hover,.coop-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-card:hover .coop-card--icon,.coop-card:focus .coop-card--icon{transform:translate(.25rem)}.coop-card:hover .coop-card--badge,.coop-card:focus .coop-card--badge{transform:scale(1.05)}
|
|
1
|
+
.coop-card{--card-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;--label-bg:none;--card-bg:var(--color-white);--badge-x:.5rem;--badge-y:.5rem;flex-direction:var(--card-direction);border-radius:var(--ui-border-radius-m);box-shadow:var(--ui-shadow);transition:box-shadow var(--ui-transition-hover);display:flex;position:relative}@media (width>=48em){.coop-card[data-layout=horizontal]{--card-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}.coop-card[data-layout=horizontal][data-image-pos=right]{--card-direction:row-reverse;--image-border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0}}.coop-card[data-badge-pos=popout]{--badge-x:-10px;--badge-y:-10px}.coop-card .coop-card--heading{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-card img{width:100%;height:100%}.coop-card p{margin:0}.coop-card--link:is(a){color:inherit;outline:0;text-decoration:none}.coop-card--link:is(a):before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-card--link:is(a):focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-card--link:is(a):hover .coop-card--heading,.coop-card--link:is(a):focus .coop-card--heading{text-decoration:underline}.coop-card--content{gap:var(--spacing-6);flex-direction:column;display:flex}.coop-card--inner{gap:var(--spacing-12);width:100%;padding:var(--spacing-24);border-radius:var(--ui-border-radius-m);justify-content:space-between;align-items:flex-start;display:flex}.coop-card--icon{pointer-events:none;justify-content:flex-end;align-self:center;min-width:1rem;transition:transform .2s ease-out;display:flex}.coop-card--icon svg{height:1rem}.coop-card--badge{z-index:10;top:var(--badge-y);right:var(--badge-x);transition:transform .1s ease-out;position:absolute}.coop-card--label{width:fit-content;display:inline-block}.coop-card--label[class*=bg-]{padding:var(--spacing-6)var(--spacing-12);border-radius:var(--ui-border-radius);font-weight:var(--type-weight-demibold)}.coop-card:hover,.coop-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-card:hover .coop-card--icon,.coop-card:focus .coop-card--icon{transform:translate(.25rem)}.coop-card:hover .coop-card--badge,.coop-card:focus .coop-card--badge{transform:scale(1.05)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.coop-search-box{--padding-x:var(--spacing-16);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--border-color:var(--color-grey-neutral-cool);width:100%;font-size:var(--type-size);flex-direction:column;gap:.5rem;display:flex}.coop-search-box label{width:100%;font-size:var(--type-size-18);font-weight:var(--type-weight-demibold);display:block}.coop-search-box--inner{align-items:stretch;width:100%;display:inline-flex}.coop-search-box--inner:has(input:focus){border-radius:var(--ui-border-radius-m);outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-search-box button{border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0;margin:0;padding-left:1rem;padding-right:1rem}.coop-search-box button .coop-icon{width:1em;height:1em}.coop-search-box[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-12)}.coop-search-box[data-size=lg]{--type-size:var(--type-size-18)}.coop-search-box[data-size=xl]{--type-size:var(--type-size-20);min-height:3.5rem}.coop-search-box input{width:100%;min-width:80px;padding:var(--padding-y)var(--padding-x);border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m);border-right:0;outline:0}.coop-search-box input:focus{border-color:var(--color-grey-mid)}.coop-search-box[data-variant*=ghost] .coop-search-box--inner{border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)}.coop-search-box[data-variant*=ghost] input{border:0}.coop-search-box[data-variant*=ghost] button,.coop-search-box[data-variant*=ghost] button:hover{box-shadow:unset}@media (width>=48em){.coop-search-box button{--padding-x:var(--spacing-12)}}.coop-search-box[data-variant=green-ghost]{--border-color:var(--color-green)}.coop-search-box[data-variant=blue-ghost]{--border-color:var(--color-blue)}.coop-search-box[data-variant=white-ghost]{--border-color:var(--color-white)}.coop-search-box[data-variant=grey-ghost]{--border-color:var(--color-grey)}
|
|
1
|
+
.coop-search-box{--padding-x:var(--spacing-16);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);--border-color:var(--color-grey-neutral-cool);width:100%;font-size:var(--type-size);flex-direction:column;gap:.5rem;display:flex}.coop-search-box label{width:100%;font-size:var(--type-size-18);font-weight:var(--type-weight-demibold);display:block}.coop-search-box--inner{align-items:stretch;width:100%;display:inline-flex}.coop-search-box--inner:has(input:focus){border-radius:var(--ui-border-radius-m);outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-search-box button{border-radius:0 var(--ui-border-radius-m)var(--ui-border-radius-m)0;margin:0;padding-left:1rem;padding-right:1rem}.coop-search-box button .coop-icon{width:1em;height:1em}.coop-search-box[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-12)}.coop-search-box[data-size=lg]{--type-size:var(--type-size-18)}.coop-search-box[data-size=xl]{--type-size:var(--type-size-20);min-height:3.5rem}.coop-search-box input{width:100%;min-width:80px;padding:var(--padding-y)var(--padding-x);border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m);border-right:0;outline:0}.coop-search-box input:focus{border-color:var(--color-grey-mid)}.coop-search-box[data-variant*=ghost] .coop-search-box--inner{border:2px solid var(--border-color);border-radius:var(--ui-border-radius-m)}.coop-search-box[data-variant*=ghost] input{border:0}.coop-search-box[data-variant*=ghost] button,.coop-search-box[data-variant*=ghost] button:hover{box-shadow:unset}.coop-search-box[data-variant=white] input{border:0}@media (width>=48em){.coop-search-box button{--padding-x:var(--spacing-12)}}.coop-search-box[data-variant=green-ghost]{--border-color:var(--color-green)}.coop-search-box[data-variant=blue-ghost]{--border-color:var(--color-blue)}.coop-search-box[data-variant=white-ghost]{--border-color:var(--color-white)}.coop-search-box[data-variant=grey-ghost]{--border-color:var(--color-grey)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coopdigital/styles",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.16.
|
|
4
|
+
"version": "0.16.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"lightningcss": "^1.29.3",
|
|
36
36
|
"sass-embedded": "^1.87.0"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "4b0b52bb134f10067e1c87b0ba9afab3504f5368"
|
|
39
39
|
}
|
|
@@ -79,7 +79,8 @@ $button-variants: (
|
|
|
79
79
|
align-items: center;
|
|
80
80
|
justify-content: center;
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
width: max-content;
|
|
83
|
+
height: var(--min-height);
|
|
83
84
|
margin-bottom: var(--spacing-8);
|
|
84
85
|
padding: var(--padding-y) var(--padding-x);
|
|
85
86
|
border: 0;
|
package/src/components/Card.scss
CHANGED