Просмотр исходного кода

Reduced size of breadcrumbs, additional form styling. Colors still need to be adjusted

Matt 8 лет назад
Родитель
Сommit
588f35ef4f
3 измененных файлов с 21 добавлено и 13 удалено
  1. 4 0
      public/sass/components/_dropdown.scss
  2. 5 4
      public/sass/components/_gf-form.scss
  3. 12 9
      public/sass/layout/_page.scss

+ 4 - 0
public/sass/components/_dropdown.scss

@@ -120,6 +120,10 @@
       }
       }
     }
     }
   }
   }
+  &--navbar {
+    background: $black;
+    font-size: $font-size-sm;
+  }
 }
 }
 
 
 .dropdown-item-text {
 .dropdown-item-text {

+ 5 - 4
public/sass/components/_gf-form.scss

@@ -1,4 +1,4 @@
-$gf-form-margin: 0.25rem;
+$gf-form-margin: 0.1rem;
 
 
 .gf-form {
 .gf-form {
   margin-bottom: $gf-form-margin;
   margin-bottom: $gf-form-margin;
@@ -54,10 +54,10 @@ $gf-form-margin: 0.25rem;
   flex-shrink: 0;
   flex-shrink: 0;
   font-weight: $font-weight-semi-bold;
   font-weight: $font-weight-semi-bold;
 
 
-  background-color: $input-label-bg;
+  background-color: #23252d; //$input-label-bg;
   display: block;
   display: block;
   font-size: $font-size-sm;
   font-size: $font-size-sm;
-  margin-right: 0;
+  margin-right: $gf-form-margin;
 
 
   border: $input-btn-border-width solid transparent;
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
   @include border-radius($label-border-radius-sm);
@@ -112,7 +112,8 @@ $gf-form-margin: 0.25rem;
   background-image: none;
   background-image: none;
   background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid $input-border-color;
   border: 1px solid $input-border-color;
-  border-bottom: 0px;
+  border-bottom: none;
+  border-left: none;
   @include border-radius($input-border-radius-sm);
   @include border-radius($input-border-radius-sm);
   @include box-shadow($input-box-shadow);
   @include box-shadow($input-box-shadow);
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

+ 12 - 9
public/sass/layout/_page.scss

@@ -11,7 +11,7 @@
 .main-view {
 .main-view {
   position: relative;
   position: relative;
   flex-grow: 1;
   flex-grow: 1;
-  background: inear-gradient(180deg, #1b1d25 0, #210d0d);
+  background: linear-gradient(180deg, #251f1f 0, #17181b);
 }
 }
 
 
 .page-container {
 .page-container {
@@ -107,13 +107,15 @@
 $breadcrumb-hover-hl: #111;
 $breadcrumb-hover-hl: #111;
 $page-nav-bg: black;
 $page-nav-bg: black;
 
 
-.page-nav {
-  background: $page-nav-bg;
- }
+$page-breadcrumb__angle-1: 39px;
+$page-breadcrumb__angle-ul: 31px;
+$page-breadcrumb__angle-a: 30px;
+
 
 
 .page-breadcrumb {
 .page-breadcrumb {
   display: flex;
   display: flex;
   padding: 0 $spacer;
   padding: 0 $spacer;
+  line-height: 0.5;
 }
 }
 
 
 .page-breadcrumb__item {
 .page-breadcrumb__item {
@@ -121,6 +123,7 @@ $page-nav-bg: black;
 
 
   > a {
   > a {
     color: $text-color-weak;
     color: $text-color-weak;
+    font-size: $font-size-sm;
     display: block;
     display: block;
     padding: 0.6rem 1rem 0.6rem 3rem;;
     padding: 0.6rem 1rem 0.6rem 3rem;;
     position: relative;
     position: relative;
@@ -133,9 +136,9 @@ $page-nav-bg: black;
       content: '';
       content: '';
       height: 0;
       height: 0;
       width: 0;
       width: 0;
-      border: 46px solid transparent;
+      border: $page-breadcrumb__angle-1 solid transparent;
       border-right-width: 0;
       border-right-width: 0;
-      border-left-width: 41px;
+      border-left-width: $page-breadcrumb__angle-a;
       z-index: 2;
       z-index: 2;
       border-left-color: $page-nav-bg;
       border-left-color: $page-nav-bg;
     }
     }
@@ -155,9 +158,9 @@ $page-nav-bg: black;
     content: '';
     content: '';
     height: 0;
     height: 0;
     width: 0;
     width: 0;
-    border: 46px solid transparent;
+    border: $page-breadcrumb__angle-1 solid transparent;
     border-right-width: 0;
     border-right-width: 0;
-    border-left-width: 41px;
+    border-left-width: $page-breadcrumb__angle-ul;
     z-index: 1;
     z-index: 1;
     transform: translateX(4px);
     transform: translateX(4px);
     border-left-color: #282020;
     border-left-color: #282020;
@@ -189,7 +192,7 @@ $page-nav-bg: black;
   width: 16px;
   width: 16px;
   height: 16px;
   height: 16px;
   right: -9px;
   right: -9px;
-  top: 12px;
+  top: 5px;
   z-index: 3;
   z-index: 3;
 }
 }