account page: popover instructions prototype
This commit is contained in:
+142
-25
@@ -21,6 +21,10 @@
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--radius-lg: var(--radius);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
@@ -232,9 +236,15 @@
|
||||
.mt-\[0\.25em\] {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.mt-\[1\.5em\] {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mt-\[1em\] {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.mt-\[2em\] {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.mt-\[3em\] {
|
||||
margin-top: 3em;
|
||||
}
|
||||
@@ -301,9 +311,21 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-\[30vw\] {
|
||||
max-width: 30vw;
|
||||
}
|
||||
.max-w-\[50\%\] {
|
||||
max-width: 50%;
|
||||
}
|
||||
.max-w-\[80vw\] {
|
||||
max-width: 80vw;
|
||||
}
|
||||
.max-w-\[100px\] {
|
||||
max-width: 100px;
|
||||
}
|
||||
.max-w-\[200px\] {
|
||||
max-width: 200px;
|
||||
}
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -325,6 +347,24 @@
|
||||
.basis-full {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.animate-bounce {
|
||||
animation: var(--animate-bounce);
|
||||
}
|
||||
.animate-ping {
|
||||
animation: var(--animate-ping);
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: var(--animate-pulse);
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
.cursor-none {
|
||||
cursor: none;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -521,6 +561,11 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-opacity {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -549,10 +594,18 @@
|
||||
.delay-\[3000\] {
|
||||
transition-delay: 3000;
|
||||
}
|
||||
.duration-500 {
|
||||
--tw-duration: 500ms;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
.duration-3000 {
|
||||
--tw-duration: 3000ms;
|
||||
transition-duration: 3000ms;
|
||||
}
|
||||
.ease-in {
|
||||
--tw-ease: var(--ease-in);
|
||||
transition-timing-function: var(--ease-in);
|
||||
}
|
||||
.group-open\:border-b-\[0\.5rem\] {
|
||||
&:is(:where(.group):is([open], :popover-open, :open) *) {
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
@@ -855,6 +908,12 @@
|
||||
content: var(--tw-content);
|
||||
}
|
||||
}
|
||||
.after\:content-\[\'\<\'\] {
|
||||
&::after {
|
||||
--tw-content: '<';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
}
|
||||
.after\:content-\[\'\>\'\] {
|
||||
&::after {
|
||||
--tw-content: '>';
|
||||
@@ -889,11 +948,43 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-open\:after\:content-\[\'v\'\] {
|
||||
&:is(:where(.group):is([open], :popover-open, :open) *) {
|
||||
&::after {
|
||||
--tw-content: 'v';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
}
|
||||
}
|
||||
.open\:grid {
|
||||
&:is([open], :popover-open, :open) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
.open\:bg-background {
|
||||
&:is([open], :popover-open, :open) {
|
||||
background-color: var(--background);
|
||||
}
|
||||
}
|
||||
.open\:transition-opacity {
|
||||
&:is([open], :popover-open, :open) {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
}
|
||||
.open\:duration-3000 {
|
||||
&:is([open], :popover-open, :open) {
|
||||
--tw-duration: 3000ms;
|
||||
transition-duration: 3000ms;
|
||||
}
|
||||
}
|
||||
.open\:ease-in {
|
||||
&:is([open], :popover-open, :open) {
|
||||
--tw-ease: var(--ease-in);
|
||||
transition-timing-function: var(--ease-in);
|
||||
}
|
||||
}
|
||||
.open\:details-content\:transform-\[translate\(0px\)\] {
|
||||
&:is([open], :popover-open, :open) {
|
||||
&::details-content {
|
||||
@@ -1451,6 +1542,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -1517,6 +1628,10 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ease {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -1532,26 +1647,6 @@
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-content {
|
||||
syntax: "*";
|
||||
initial-value: "";
|
||||
@@ -1561,9 +1656,35 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-blur: initial;
|
||||
@@ -1580,14 +1701,10 @@
|
||||
--tw-drop-shadow-alpha: 100%;
|
||||
--tw-drop-shadow-size: initial;
|
||||
--tw-duration: initial;
|
||||
--tw-ease: initial;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-content: "";
|
||||
--tw-leading: initial;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user