admin-project-create: form stylized (part 1)

src/page-admin-circles-create.pug

@@ -1,7 +1,7 @@
 div.content-box__info
   sib-link(class="backlink", next='admin-circle-list') Back
 
-  h1 New circle
+  h1.centered New circle
 
   p.center Here you can create a new circle according to your interests, what you want to share, etc.
 

src/page-admin-circles.pug

@@ -4,8 +4,7 @@
     sib-route(name='admin-circle-create')
 
   div.content-box__header.with-description
-    div
-      p.name Administration
+    h1.title-left.without-margin Administration
 
 
   #admin-circle-list(hidden)

src/page-admin-projects-create.pug

@@ -12,9 +12,7 @@ div.content-box__info
         naked
       )
 
-  h1 New project
-
-  p.center Here you can create a new project according to your interests, what you want to share, etc.
+  h1.centered New project
 
   sib-form.block(
     data-src=`${endpoints.projects}`
@@ -22,34 +20,49 @@ div.content-box__info
     fields='line-1(customer.name, name), line-2(customer.logo), line-3(project.description), line-4(businessProvider.name, businessProvider.fee), line-5(customer.companyRegister), line-6(customer.address), line-7(customer.firstName, customer.lastName), line-8(customer.role), line-9(customer.email, customer.phone), line-10(captain)'
 
 		label-customer.name='Customer\'s name*'
+    class-customer.name='form-label is-light is-half-width'
 
 		label-name='Project\'s name*'
+    class-name='form-label is-light is-half-width'
 
 		label-customer.logo='Customer\'s logo'
+    class-customer.logo='form-label is-light is-half-width'
 
-		label-description='Project description'
-    widget-description='sib-form-textarea'
+		label-project.description='Project description'
+    class-project.description='form-label is-light is-full-width'
+    widget-project.description='sib-form-textarea'
 
 		label-businessProvider.name='Business provider*'
+    class-businessProvider.name='form-label is-light is-half-width'
 
 		label-businessProvider.fee='Amount of the contribution'
+    class-businessProvider.fee='form-label is-light is-half-width'
 
 		label-customer.companyregister='Company register'
+    class-customer.companyregister='form-label is-light is-half-width'
 
 		label-customer.address='Address'
+    class-customer.address='form-label is-light is-full-width'
     widget-customer.address='sib-form-textarea'
 
 		label-customer.firstName='Name of the contact'
+    class-customer.firstName='form-label is-light is-half-width'
 
 		label-customer.lastName='Firstname of the contact'
+    class-customer.lastName='form-label is-light is-half-width'
 
 		label-customer.role='Role within the company'
+    class-customer.role='form-label is-light is-half-width'
 
 		label-customer.email='Email'
+    class-customer.email='form-label is-light is-half-width'
 
 		label-customer.phone='Phone'
+    class-customer.phone='form-label is-light is-half-width'
 
     range-captain=`${endpoints.users}`
+    class-captain='member-select form-label is-light is-half-width'
+    widget-captain='sib-form-auto-completion'
 
     next='admin-project-list'
 

src/page-admin-projects.pug

@@ -4,8 +4,7 @@
     sib-route(name='admin-project-create')
 
   div.content-box__header.with-description
-    div
-      p.name Administration
+    h1.title-left.without-margin Administration
 
   #admin-project-list(hidden)
     include templates/hd-user-avatar.pug

src/styles/base/form.scss

@@ -6,7 +6,10 @@
       color: $color-233-18-29;
       font-weight: bold;
       font-size: 2rem;
-      text-align: center;
+
+      &.centered {
+        text-align: center;
+      }
     }
     
     .fieldset {

src/styles/base/main.scss

@@ -75,6 +75,10 @@ h1, .h1-like {
   color: $color-233-18-29;
   font-size: 2rem;
   text-transform: uppercase;
+
+  &.without-margin {
+    margin: 0;
+  }
 }
 
 h2, .h2-like {
@@ -104,6 +108,21 @@ h5 {
   padding: 3.2rem;
 }
 
+#admin-circle-create,
+#admin-project-create {
+  
+  input[type='submit'] {
+    @extend .button,
+    .text-bold,
+    .text-uppercase,
+    .reversed,
+    .button-dark,
+    .bordered;
+    margin-left: auto;
+    margin-top: 3.2rem;
+  }
+}
+
 .content-box {
   @include window-style-modal();
   display: flex;

src/styles/layout/circle/_index.scss

@@ -2,4 +2,3 @@
 @import 'circle-profile';
 @import 'circle-edit';
 @import 'circle-admin';
-@import 'admin-circle-create';

src/styles/layout/circle/admin-circle-create.scss

@@ -1,13 +0,0 @@
-#admin-circle-create {
-
-  input[type='submit'] {
-    @extend .button,
-    .text-bold,
-    .text-uppercase,
-    .reversed,
-    .button-dark,
-    .bordered;
-    margin-left: auto;
-    margin-top: 3.2rem;
-  }
-}

src/styles/layout/circle/circle.scss

@@ -1,7 +1,8 @@
 #circle-information,
 #circle-edit,
 #admin-circle-list,
-#admin-circle-create {
+#admin-circle-create,
+#admin-project-create {
 
   .content-box__info {
     @extend %padding-block;