feature: admin-circle-create + form and input

src/styles/base/form.scss

@@ -5,7 +5,8 @@ solid-form {
 }
 
 .form form {
-  display: block;
+  margin-left: -25px;
+  /*display: block;
   height: fit-content;
   margin-bottom: 75px;
   transition: all .3s ease;
@@ -15,12 +16,16 @@ solid-form {
     flex-direction: column;
     margin-bottom: 0;
     transition: all .3s ease;
+  }*/
+
+  label {
+    display: block;
   }
 }
 
 .button-register>form>input[type=submit] {
   @extend .button,
-  .text-bold,
+  .text-bolder,
   .text-uppercase,
   .reversed,
   .button-secondary,
@@ -34,13 +39,20 @@ solid-form {
   z-index: 1;
   
   @include breakpoint(lg) {
-    height: 3rem;
+    /*height: 3rem;
     left: 0;
     margin: 0;
     margin-left: auto;
     margin-top: 32px;
     position: relative;
-    width: auto;
+    width: auto;*/
+    position: unset;
+    bottom: unset;
+    white-space: unset;
+    left: unset;
+    width: unset;
+    z-index: unset;
+    float: right;
   }
 }
 
@@ -54,9 +66,9 @@ solid-form {
   margin-top: 1.8rem;
   text-transform: uppercase;
   
-  &.is-light {
+  /*&.is-light {
     color: var(--color-label-light);
-  }
+  }*/
 }
 
 [name^='line-'] {
@@ -77,15 +89,15 @@ solid-form {
   flex: 0 1 calc(50% - 2.5rem);
 }
 
-.input-text-like input:not([type='file']):not([type='search']):not([type='submit']),
+/*.input-text-like input:not([type='file']):not([type='search']):not([type='submit']),
 .input-text-like textarea {
   -webkit-tap-highlight-color: var(--color-grey-7);
   background-color: var(--color-input-background);
   box-sizing: border-box;
   border: 2px solid var(--color-input-background);
-  color: var(--color-input-text);
+  color: var(--color-input-text);*/
   /*flex: 1 1 0;  Problem on Firefox for input type date*/
-  line-height: 1;
+/*  line-height: 1;
   margin-top: 0.8rem;
   min-width: 0;
   padding: 1rem;
@@ -94,18 +106,18 @@ solid-form {
   &:active {
     border-bottom: 2px solid var(--color-input-active);
   }
-}
+}*/
 
-textarea {
+/*textarea {
   height: 100px;
   resize: vertical;
-}
+}*/
     
-.content-box {
+/*.content-box {
   
   &.with-form {
 
-    /*solid-set-default:not([name='user-thumb']) {
+    solid-set-default:not([name='user-thumb']) {
       clear: both;
 	    display: flex!important;
 			flex-wrap: wrap;
@@ -115,9 +127,9 @@ textarea {
 				float: left;
 				width: 50%;
 			}
-    }*/
+    }
   }
-}
+}*/
 
 /*solid-form[set-user-id-select] {
 
@@ -141,29 +153,28 @@ hubl-status {
 
   .ss-main {
     font-weight: normal;
-    margin-top: 0.8rem;
+    margin-top: 6px;
     text-transform: none;
   
-
     .ss-single-selected {
-      background-color: var(--color-input-background);
+      background-color: #F6F6F6;
       border: none;
       border-radius: 0px;
-      color: var(--color-input-text);
+      color: var(--color-grey);
       font-weight: normal;
-      min-height: 4.6rem;
+      min-height: 46px;
-      padding-left: 1.2rem;
+      padding: 12px 14px;
 
       .ss-disabled {
-        color: var(--color-grey-5);
+        color: #7A7F85;
       }
 
       .ss-arrow {
-        font-size: 1.8rem;
+        font-size: 15px;
-        margin: 0 18px 0 0;
+        margin: 0 12px 0 0;
 
         span {
-          border: solid var(--color-input-icon);
+          border: solid var(--color-grey);
           border-width: 0 2px 2px 0;
         }
       }

src/styles/base/main.scss

@@ -10,7 +10,7 @@
   body {
     background-color: var(--color-main-background);
     box-sizing: border-box;
-    color: var(--color-main-text);
+    color: var(--color-grey) !important;
     font-size: 1.6rem;
     /* Fix for viewport height bug in webkit for mobile */
     height: -webkit-fill-available;
@@ -78,6 +78,12 @@
   &.margin-left {
     margin-left: 20px;
   }
+  &.margin-bottom {
+    margin-bottom: 20px;
+  }
+  &.margin-bottom-xlarge {
+    margin-bottom: 30px;
+  }
   &.margin-left-small {
     margin-left: 15px;
   }
@@ -106,6 +112,9 @@
   &.padding-xlarge {
     padding: 25px;
   }
+  &.padding-left-large {
+    padding-left: 25px 
+  }
 }
 
 .avatar {
@@ -256,12 +265,6 @@
   display: inline-block;
 
   >solid-link {
-    cursor: pointer;
-    background: none;
-    display: inline-block;
-    padding: 0;
-    border: none;
-
     >img {
       max-height: 100%;
       max-width: 100%;
@@ -316,6 +319,28 @@
   }
 }
 
+input:not([type='file']):not([type='search']):not([type='submit']),
+textarea {
+  border: none;
+  background: #F6F6F6;
+  color: var(--color-grey);
+  padding: 12px 14px;
+  margin-top: 6px;
+  line-height: 1;
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: var(--color-secondary);
+
+  &:required:invalid {
+    border-color: 1px solid var(--color-primary);
+  }
+}
+
+textarea {
+  height: 100px;
+  resize: vertical;
+}
+
 /* General styles for pagination */
 nav#main__menu solid-display.nosub>nav {
   display: grid;
@@ -838,25 +863,6 @@ h6 {
   }
 }
 
-.backlink {
-  @include icon('arrow-left-circle');
-  color: var(--color-backlink);
-  font-size: 1.5rem;
-  margin: 2rem 0 0 2rem;
-  text-decoration: underline;
-
-  &::before {
-    font-size: 2rem;
-    margin-right: 1rem;
-    text-decoration: none;
-  }
-
-  &.right {
-    display: block;
-    text-align: right;
-  }
-}
-
 .centered {
   text-align: center;
 }
@@ -935,7 +941,20 @@ a,
   form {
     display: contents;
   }
+  &.backlink {
+    @include icon('arrow-left-circle');
+    font-size: 13px;
+    text-decoration: underline;
 
+    &::before {
+      font-size: 20px;
+      margin-right: 15px;
+      text-decoration: none;
+    }
+    &:hover {
+      text-decoration: none;
+    }
+  }
   &.button {
     padding: 5.5px 25px;
     border-radius: 100em;

src/views/admin/page-admin-circles-create.pug

@@ -1,8 +1,10 @@
-div.content-box__info
+div.segment.padding-xlarge.border-bottom.clearfix
-  solid-link(class="backlink right", next='admin-circle-list' data-trans='circle.create.backlink')
+  div.segment.lg-half.float-left
-
+    h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
-  h1.centered(data-trans='circle.create.title')
+  div.segment.lg-half.float-left.text-right
+    solid-link(class="backlink", next='admin-circle-list' data-trans='circle.create.backlink')
 
+div.segment.padding-xlarge
   div#loader-circles-create.loader.loader-top
     div
     div
@@ -18,9 +20,9 @@ div.content-box__info
     required-description
     loader-id='loader-circles-create'
 
-    class-status='form-label is-light is-full-width color'
+    class-status='block segment lg-half margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
-    class-name='form-label is-light is-full-width input-text-like'
+    class-name='segment lg-half float-left margin-bottom-xlarge padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
-    class-description='form-label is-light is-full-width input-text-like'
+    class-description='segment lg-half float-left margin-bottom-xlarge padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
 
     label-status=''
     label-name=''

src/views/admin/page-admin-circles.pug

@@ -1,4 +1,4 @@
-.content-box.full-width.with-form
+.content-box.full-width
   solid-router(default-route='admin-circle-list', hidden)
     solid-route(name='admin-circle-list')
     solid-route(name='admin-circle-create')