#6: Working on site UI

timble · Nov 30, 2016 · 7cd98fd · 7cd98fd
1 parent 31b0b31
commit 7cd98fd
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 5 deletions.
diff --git a/src/scss/admin/molecules/_styled-file-input.scss b/src/scss/admin/molecules/_styled-file-input.scss
@@ -69,6 +69,7 @@ Styleguide 2.9.9
       color: $k-color-accent;
       padding: 0;
       text-align: center;
+      margin: 0;
     }
 
 

diff --git a/src/scss/site-ui.scss b/src/scss/site-ui.scss
@@ -28,6 +28,7 @@ $section-spacing: 20px;
 
 .koowa {
   @import "admin/atoms/img";
+  @import "admin/atoms/legend";
 
 
   @import "admin/utilities/boxsizing";
@@ -152,6 +153,26 @@ $section-spacing: 20px;
       }
     }
   }
+
+
+
+
+
+
+  // Extending Joomla core classes
+  .btn-toolbar {
+    margin-top: 1em;
+    @include content-block(1em);
+  }
+
+  .btn {
+    @extend .k-button;
+    @extend .k-button--default;
+  }
+
+  .pull-right {
+    text-align: right;
+  }
 }
 
 @import "../../node_modules/select2/src/scss/core";

diff --git a/src/scss/site/bootstrap/_forms.scss b/src/scss/site/bootstrap/_forms.scss
@@ -18,6 +18,7 @@
   background-image: none;
   background-clip: padding-box;
   border: $input-btn-border-width solid $input-border-color;
+  height: auto;
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @if $enable-rounded {

diff --git a/src/scss/site/bootstrap/_nav.scss b/src/scss/site/bootstrap/_nav.scss
@@ -4,8 +4,8 @@
 // `<nav>`s or `<ul>`s.
 
 .k-nav {
-  padding-left: 0;
-  margin-bottom: 0;
+  margin: 0;
+  padding: 0;
   list-style: none;
 }
 
@@ -61,7 +61,7 @@
     }
   }
 
-  .nav-link {
+  .k-nav-link {
     display: block;
     padding: $nav-link-padding;
     border: $nav-tabs-border-width solid transparent;

diff --git a/src/scss/site/bootstrap/_tables.scss b/src/scss/site/bootstrap/_tables.scss
@@ -10,7 +10,7 @@
 
   th,
   td {
-    padding: 0.65em;
+    padding: 0.5em 0.65em;
     vertical-align: middle;
     border-top: $table-border-width solid $table-border-color;
     text-align: left;

diff --git a/src/scss/site/bootstrap/_variables.scss b/src/scss/site/bootstrap/_variables.scss
@@ -255,7 +255,7 @@ $table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(0,0,0,.05) !default;
+$table-bg-accent:               rgba(0,0,0,.033) !default;
 $table-bg-hover:                rgba(0,0,0,.075) !default;
 $table-bg-active:               $table-bg-hover !default;
 

diff --git a/src/scss/site/molecules/_element-queries.scss b/src/scss/site/molecules/_element-queries.scss
@@ -336,3 +336,68 @@ a.k-card__section {
     border-top: 1px solid rgba(0, 0, 0, 0.15);
   }
 }
+
+.k-list-item {
+  @include clearfix;
+  background-image: linear-gradient(top,rgba(0,0,0,.05),transparent);
+  padding: 15px;
+  border-top: 1px solid rgba(255,255,255,.1);
+  border-bottom: 1px solid rgba(0,0,0,.05);
+}
+
+
+.k-list {
+  ul {
+    @include reset;
+    @include content-block($section-spacing);
+  }
+
+  li {
+    @include content-block(0.4em);
+  }
+
+  .k-title {
+    margin: 0;
+  }
+}
+
+.k-list--indented {
+  li {
+    ul {
+      margin-top: 0.4em;
+    }
+
+    li {
+      padding-left: 1.5em;
+
+      @include psuedo(after) {
+        width: 0.5em;
+        height: 0.5em;
+        border-left: 1px solid rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        top: 50%;
+        margin-top: -0.33em;
+        left: 0.33em;
+
+        @include rtl {
+          border-left: none;
+          border-right: 1px solid #aaa;
+          left: auto;
+          right: -(($k-tree-size / 2) + 3px);
+        }
+      }
+    }
+  }
+}
+
+legend {
+  margin-bottom: 1em;
+
+  &:first-child {
+    padding-top: 0;
+  }
+}
+
+.editor {
+  @include clearfix;
+}