0.0.05 form poster

static/v2/css/forms.css

@@ -11,6 +11,8 @@
     --label-font-size: 16px;
     --label-font-weight: 500;
 
+    --checkbox-label-font-size: 16px;
+
     --textarea-min-width: 100%;
     --textarea-max-width: 100%;
     --textarea-width: 100%;
@@ -18,6 +20,13 @@
     --textarea-resize: none;
 
     box-sizing: border-box;
+    
+    &.line{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    
     label{
         display: block;
         color: var(--label-color);
@@ -69,6 +78,23 @@
             color: var(--placeholder-color);
         }
     }
+    .checkbox{
+        background: #FFFFFF;
+        border: 1px solid #E6E6E6;
+        height: 30px;
+        width: 30px;
+        border-radius: 10px;
+        &:hover{
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+        }
+        &.checked{
+            background: #FF613A;
+            box-shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
+        }
+    }
+    .checkbox_label{
+        font-size: var(--checkbox-label-font-size);
+    }
 }
 
 .form_line{
@@ -80,5 +106,33 @@
     }
     display: var(--display);
     justify-content: space-between;
-
 }
+
+button[type="submit"]{
+    --submit-button-bg: #FF613A;
+    --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
+
+    --submit-button-border: none;
+    --submit-button-border-radius: 10px;
+    --submit-button-font-size: 18px;
+    --submit-button-color: #FFFFFF;
+    --submit-button-font-weight: 600;
+
+    --submit-button-width: 100%; /* initial */
+    --submit-button-padding: 17px;
+
+    outline: none;
+
+    background: var(--submit-button-bg);
+    box-shadow: var(--submit-button-box-shadow);
+
+    width: var(--submit-button-width);
+    padding: var(--submit-button-padding);
+
+    border: var(--submit-button-border);
+    border-radius: var(--submit-button-border-radius);
+
+    color: var(--submit-button-color);
+    font-size: var(--submit-button-font-size);
+    font-weight: var(--submit-button-font-weight);
+}

static/v2/css/widgets/w_additional_info.css

@@ -0,0 +1,31 @@
+.additional_info{
+    position: relative;
+    --info-modal-bg: #FFFFFF;
+    --info-modal-drop-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+    --info-modal-padding: 10px;
+    --info-modal-border-radius: 10px;
+    --info-modal-font-size: 10px;
+
+    &.opened{
+        .additional_info_modal{display: block;}
+    }
+    img{
+        width: 20px;
+        height: 20px;
+        display: block;
+    }
+    .additional_info_modal{
+        position: absolute;
+        z-index: 100;
+        left: 15px;
+        top: 0;
+        display: none;
+
+        background: var(--info-modal-bg);
+        box-shadow: var(--info-modal-drop-shadow);
+        padding: var(--info-modal-padding);
+        border-radius: var(--info-modal-border-radius);
+
+        font-size: var(--info-modal-font-size);
+    }
+}