feature: admin-create-circle

src/styles/hubl-framework/_index.scss

@@ -7,12 +7,12 @@
   display: block;
 }
 @import 'commons/_index';
+@import 'icons/_index';
 @import 'avatars/_index';
 @import 'badges/_index';
 @import 'buttons/_index';
 @import 'links/_index';
-@import 'forms/_index';
-@import 'icons/_index';
 @import 'segments/_index';
+@import 'forms/_index';
 @import 'tables/_index';
 @import 'tags/_index';

src/styles/hubl-framework/buttons/_index.scss

@@ -30,6 +30,24 @@ a {
       font-size: 15px;
       margin-right: 6px;
     }
+    &-semibold {
+      *,
+      & {
+        font-weight: 600;
+      }
+    }
+    &-bold {
+      *,
+      & {
+        font-weight: 700;
+      }
+    }
+    &-uppercase {
+      *,
+      & {
+        text-transform: uppercase;
+      }
+    }
     &.color-primary {
       background-color: white;
       *,

src/styles/hubl-framework/commons/texts.scss

@@ -19,29 +19,17 @@
     font-size: 18px;
   }
   &-normal {
-    *,
-    & {
     font-weight: 400;
   }
-  }
   &-semibold {
-    *,
-    & {
     font-weight: 600;
   }
-  }
   &-bold {
-    *,
-    & {
     font-weight: 700;
   }
-  }
   &-uppercase {
-    *,
-    & {
     text-transform: uppercase;
   }
-  }
   &-underline {
     text-decoration: underline;
   }

src/styles/hubl-framework/forms/_index.scss

@@ -4,6 +4,10 @@ solid-form {
     display: none !important; // Hide the default core message, english only with a weird message
   }
 
+  form>* {
+    display: block;
+  }
+
   @import 'inputs';
   @import 'buttons';
   @import 'widgets';

src/styles/hubl-framework/forms/buttons.scss

@@ -1,10 +1,11 @@
-.button-register>form>input[type='submit'] {
+input[type='submit'] {
-  /*@extend .button,
+  @extend .button,
-  .text-bolder,
+  .text-xsmall,
+  .text-bold,
   .text-uppercase,
   .reversed,
-  .button-secondary,
+  .color-secondary,
-  .bordered;*/
+  .bordered;
   height: auto;
   position: fixed;
   bottom: 1em;
@@ -13,8 +14,7 @@
   width: 80%;
   z-index: 1;
 
-  /*@include breakpoint(lg) {
+  @media($large) {
-  height: 3rem;
   position: unset;
   bottom: unset;
   white-space: unset;
@@ -23,5 +23,5 @@
   z-index: unset;
   float: right;
   margin-top: 10px;
-  }*/
+  }
 }

src/styles/hubl-framework/forms/inputs.scss

@@ -24,8 +24,3 @@ textarea {
   height: 110px;
   resize: vertical;
 }
-
-input.icon {
-  background-position: right 12px top 50%;
-  background-repeat: no-repeat;
-}

src/styles/hubl-framework/icons/styles.scss

@@ -1,6 +1,12 @@
 .icon {
 
-  &.icon-magnify {
+  input,
+  .ss-single-selected {
+    background-position: right 12px top 50%;
+    background-repeat: no-repeat;
+  }
+  &.icon-magnify input,
+  &.icon-magnify .ss-single-selected {
     background-image: url("/lib/solid-directory/dist/assets/magnify.svg");
   }
   &.icon-arrow-down {

src/styles/hubl-framework/links/_index.scss

@@ -5,7 +5,9 @@ solid-route {
 
 .backlink {
   color: #636363;
+  font-size: 13px;
   text-decoration: underline;
+  @include icon('arrow-left-circle');
 
   &::before {
     display: inline-block;

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

@@ -1,4 +1,4 @@
-div.segment.padding-xlarge.border-bottom.clearfix
+div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading.clearfix
   div.segment.lg-half.float-left
     h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
   div.segment.lg-half.float-left.text-right
@@ -11,7 +11,7 @@ div.segment.padding-xlarge.clearfix
     div
     div
 
-  solid-form.form.button-register(
+  solid-form.button-register(
     data-src=`${endpoints.circles || endpoints.post.circles}`
 
     fields='status, name, description'
@@ -20,9 +20,9 @@ div.segment.padding-xlarge.clearfix
     required-description
     loader-id='loader-circles-create'
 
-    class-status='block segment lg-half margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
+    class-status='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading icon icon-magnify'
-    class-name='segment lg-half float-left margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
+    class-name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading float-left'
-    class-description='segment lg-half float-left margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
+    class-description='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading float-left'
 
     label-status=''
     label-name=''