-
{{ form.data.name }}
-
+
+
+ 001
+ {{ form.data.name }}
+
+
@@ -89,64 +84,144 @@ async function createForm() {
&-cards {
margin-top: 30px;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 25px;
+ display: flex;
+ flex-direction: column;
}
&-card {
- border: 1px solid var(--color-main-border);
- background: var(--color-secondary-background);
- transition: 0.25s ease;
- padding: 15px;
- border-radius: 0.5rem;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 10px;
+ border: 1px solid transparent;
+ border-bottom: 2px solid var(--color-secondary-border);
+ border-top: 2px solid transparent;
+ transition: 0.4s ease;
+ cursor: pointer;
- &-title {
- font-weight: 400;
+ &:hover {
+ ////border: 1px solid var(--color-main-border);
+ background: var(--color-main-border);
+ ////border-radius: 0.5rem;
+ //transform: scale(1.03);
+ //border-bottom: 2px solid var(--color-third-border) !important;
+ //border-top: 2px solid var(--color-third-border);
+ }
+
+ &:hover &-num {
+ color: var(--color-text);
+ }
+
+ &:last-child {
+ border-bottom: 2px solid transparent;
}
&-buttons {
- margin-top: 25px;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: 15px;
+ display: flex;
+ align-items: center;
+ gap: 0 10px;
}
&-btn {
+ height: 30px;
+ width: 30px;
display: flex;
justify-content: center;
align-items: center;
- height: 45px;
- border-radius: 0.5rem;
- transition: 0.25s ease;
+ transition: 0.25s ease;
- &--view {
- background: #d6e1ff;
- border: 1px solid #a7beff;
- &:hover {
- background: #ccd9ff;
- }
- }
-
- &--update {
- background: #fff7cc;
- border: 1px solid #f6e17a;
-
- &:hover {
- background: #fff4b2;
- }
+ &:hover {
+ opacity: 0.7;
}
&--delete {
- background: #ffd8d8;
- border: 1px solid #ffb1b1;
-
- &:hover {
- background: #ffcece;
- }
+ color: var(--color-red);
}
+
+ }
+
+ &-title {
+ display: flex;
+ font-weight: 400;
+ align-items: center;
+ gap: 0 15px;
+ }
+
+ &-num {
+ font-size: 0.88em;
+ font-weight: 400;
+ padding-right: 15px;
+ transition: 0.4s ease;
+ border-right: 1px solid var(--color-subtext);
+ color: var(--color-subtext);
}
}
}
+//.profile {
+// margin: 40px 0;
+//
+// &-cards {
+// margin-top: 30px;
+// display: grid;
+// grid-template-columns: 1fr 1fr 1fr 1fr;
+// gap: 25px;
+// }
+//
+// &-card {
+// border: 1px solid var(--color-main-border);
+// background: var(--color-secondary-background);
+// transition: 0.25s ease;
+// padding: 15px;
+// border-radius: 0.5rem;
+//
+// &-title {
+// font-weight: 400;
+// }
+//
+// &-buttons {
+// margin-top: 25px;
+// display: grid;
+// grid-template-columns: 1fr 1fr 1fr;
+// gap: 15px;
+// }
+//
+// &-btn {
+// display: flex;
+// justify-content: center;
+// align-items: center;
+// height: 45px;
+// border-radius: 0.5rem;
+// transition: 0.25s ease;
+//
+// &--view {
+// background: #d6e1ff;
+// border: 1px solid #a7beff;
+//
+// &:hover {
+// background: #ccd9ff;
+// }
+// }
+//
+// &--update {
+// background: #fff7cc;
+// border: 1px solid #f6e17a;
+//
+// &:hover {
+// background: #fff4b2;
+// }
+// }
+//
+// &--delete {
+// background: #ffd8d8;
+// border: 1px solid #ffb1b1;
+//
+// &:hover {
+// background: #ffcece;
+// }
+// }
+// }
+// }
+//}