Added basic exercise addition and deletion
This commit is contained in:
@@ -8,14 +8,16 @@
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--spacing: 0.25rem;
|
||||
--container-md: 28rem;
|
||||
--container-xl: 36rem;
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
@@ -449,6 +451,59 @@
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
:where(.list-row) {
|
||||
--list-grid-cols: minmax(0, auto) 1fr;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: calc(0.25rem * 4);
|
||||
border-radius: var(--radius-box);
|
||||
padding: calc(0.25rem * 4);
|
||||
word-break: break-word;
|
||||
grid-template-columns: var(--list-grid-cols);
|
||||
&:has(.list-col-grow:nth-child(1)) {
|
||||
--list-grid-cols: 1fr;
|
||||
}
|
||||
&:has(.list-col-grow:nth-child(2)) {
|
||||
--list-grid-cols: minmax(0, auto) 1fr;
|
||||
}
|
||||
&:has(.list-col-grow:nth-child(3)) {
|
||||
--list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;
|
||||
}
|
||||
&:has(.list-col-grow:nth-child(4)) {
|
||||
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
|
||||
}
|
||||
&:has(.list-col-grow:nth-child(5)) {
|
||||
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
|
||||
}
|
||||
&:has(.list-col-grow:nth-child(6)) {
|
||||
--list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto)
|
||||
minmax(0, auto) 1fr;
|
||||
}
|
||||
:not(.list-col-wrap) {
|
||||
grid-row-start: 1;
|
||||
}
|
||||
}
|
||||
& > :not(:last-child) {
|
||||
&.list-row, .list-row {
|
||||
&:after {
|
||||
content: "";
|
||||
border-bottom: var(--border) solid;
|
||||
inset-inline: var(--radius-box);
|
||||
position: absolute;
|
||||
bottom: calc(0.25rem * 0);
|
||||
border-color: var(--color-base-content);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input {
|
||||
cursor: text;
|
||||
border: var(--border) solid #0000;
|
||||
@@ -549,98 +604,6 @@
|
||||
inset-inline-end: 0.75em;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
border: var(--border) solid #0000;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 1;
|
||||
appearance: none;
|
||||
align-items: center;
|
||||
gap: calc(0.25rem * 1.5);
|
||||
background-color: var(--color-base-100);
|
||||
padding-inline-start: calc(0.25rem * 4);
|
||||
padding-inline-end: calc(0.25rem * 7);
|
||||
vertical-align: middle;
|
||||
width: clamp(3rem, 20rem, 100%);
|
||||
height: var(--size);
|
||||
font-size: 0.875rem;
|
||||
touch-action: manipulation;
|
||||
border-start-start-radius: var(--join-ss, var(--radius-field));
|
||||
border-start-end-radius: var(--join-se, var(--radius-field));
|
||||
border-end-start-radius: var(--join-es, var(--radius-field));
|
||||
border-end-end-radius: var(--join-ee, var(--radius-field));
|
||||
background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
|
||||
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
|
||||
background-size: 4px 4px, 4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
text-overflow: ellipsis;
|
||||
box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
||||
}
|
||||
border-color: var(--input-color);
|
||||
--input-color: var(--color-base-content);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
|
||||
}
|
||||
--size: calc(var(--size-field, 0.25rem) * 10);
|
||||
[dir="rtl"] & {
|
||||
background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
|
||||
}
|
||||
select {
|
||||
margin-inline-start: calc(0.25rem * -4);
|
||||
margin-inline-end: calc(0.25rem * -7);
|
||||
width: calc(100% + 2.75rem);
|
||||
appearance: none;
|
||||
padding-inline-start: calc(0.25rem * 4);
|
||||
padding-inline-end: calc(0.25rem * 7);
|
||||
height: calc(100% - 2px);
|
||||
background: inherit;
|
||||
border-radius: inherit;
|
||||
border-style: none;
|
||||
&:focus, &:focus-within {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
@media (forced-colors: active) {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: calc(0.25rem * -5.5);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&:focus, &:focus-within {
|
||||
--input-color: var(--color-base-content);
|
||||
box-shadow: 0 1px var(--input-color);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
|
||||
}
|
||||
outline: 2px solid var(--input-color);
|
||||
outline-offset: 2px;
|
||||
isolation: isolate;
|
||||
z-index: 1;
|
||||
}
|
||||
&:has(> select[disabled]), &:is(:disabled, [disabled]) {
|
||||
cursor: not-allowed;
|
||||
border-color: var(--color-base-200);
|
||||
background-color: var(--color-base-200);
|
||||
color: var(--color-base-content);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--color-base-content);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(> select[disabled]) > select[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
border: var(--border) solid var(--input-color, var(--color-base-content));
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -785,6 +748,9 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.list-col-wrap {
|
||||
grid-row-start: 2;
|
||||
}
|
||||
.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -846,6 +812,19 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.btn-square {
|
||||
padding-inline: calc(0.25rem * 0);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
.size-\[1\.2em\] {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
}
|
||||
.size-\[1\.6em\] {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
}
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -858,12 +837,6 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-md {
|
||||
width: var(--container-md);
|
||||
}
|
||||
.w-xl {
|
||||
width: var(--container-xl);
|
||||
}
|
||||
.link {
|
||||
cursor: pointer;
|
||||
text-decoration-line: underline;
|
||||
@@ -887,42 +860,77 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-3 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-5 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.rounded-box {
|
||||
border-radius: var(--radius-box);
|
||||
}
|
||||
.rounded-box {
|
||||
border-radius: var(--radius-box);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-base-300 {
|
||||
border-color: var(--color-base-300);
|
||||
.bg-base-100 {
|
||||
background-color: var(--color-base-100);
|
||||
}
|
||||
.bg-base-200 {
|
||||
background-color: var(--color-base-200);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
.fill-primary-content {
|
||||
fill: var(--color-primary-content);
|
||||
}
|
||||
.p-10 {
|
||||
padding: calc(var(--spacing) * 10);
|
||||
}
|
||||
.py-2 {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
.py-5 {
|
||||
padding-block: calc(var(--spacing) * 5);
|
||||
}
|
||||
.text-xs {
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-semibold {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.text-primary-content {
|
||||
color: var(--color-primary-content);
|
||||
}
|
||||
.opacity-60 {
|
||||
opacity: 60%;
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.btn-ghost {
|
||||
&:not(.btn-active, :hover, :active:focus, :focus-visible) {
|
||||
--btn-shadow: "";
|
||||
--btn-bg: #0000;
|
||||
--btn-border: #0000;
|
||||
--btn-noise: none;
|
||||
&:not(:disabled, [disabled], .btn-disabled) {
|
||||
outline-color: currentColor;
|
||||
--btn-fg: currentColor;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
&:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) {
|
||||
--btn-shadow: "";
|
||||
--btn-bg: #0000;
|
||||
--btn-border: #0000;
|
||||
--btn-noise: none;
|
||||
--btn-fg: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-error {
|
||||
--btn-color: var(--color-error);
|
||||
--btn-fg: var(--color-error-content);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-3xl);
|
||||
@@ -1194,16 +1202,94 @@ h3 {
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-inset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-ring-inset {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-offset-width {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
@property --tw-ring-offset-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: #fff;
|
||||
}
|
||||
@property --tw-ring-offset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@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-space-y-reverse: 0;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-shadow-alpha: 100%;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-inset-shadow-alpha: 100%;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
--tw-inset-ring-shadow: 0 0 #0000;
|
||||
--tw-ring-inset: initial;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user