#6: styling

src/scss/admin/atoms/_img.scss

@@ -36,6 +36,30 @@ img {
 }
 
 
-.k-image-16 {
-  @include allwidth(16px);
+.k-image--size-tiny {
+  @include allwidth($k-icon-size-tiny);
+}
+
+.k-image--size-small {
+  @include allwidth($k-icon-size-small);
+}
+
+.k-image--size-default {
+  @include allwidth($k-icon-size);
+}
+
+.k-image--size-medium {
+  @include allwidth($k-icon-size-medium);
+}
+
+.k-image--size-large {
+  @include allwidth($k-icon-size-large);
+}
+
+.k-image--size-xlarge {
+  @include allwidth($k-icon-size-xlarge);
+}
+
+.k-image--size-huge {
+  @include allwidth($k-icon-size-huge);
 }

src/scss/admin/molecules/_card.scss

@@ -365,6 +365,11 @@ Styleguide 2.4.9
   margin: 1px; /* 1 */
 }
 
+.k-card__section--no-spacing {
+  padding: 0;
+  margin: 0;
+}
+
 
 /**
  * Card footer

src/scss/site-ui.scss

@@ -58,6 +58,7 @@ $k-icon-path: '../../koowa/com_koowa/fonts' !default;
   @import "site/molecules/dropdown-toggle";
   @import "site/molecules/element-querie";
   @import "site/molecules/flag-object";
+  @import "site/molecules/forms"; // Or should we omit fields entirely? But then select2 looks different..
   @import "site/molecules/gallery";
   @import "site/molecules/inline-list";
   @import "site/molecules/label";

src/scss/site/_shame.scss

@@ -37,3 +37,49 @@
 .k-subtitle + .k-manage {
   margin-top: -($section-spacing / 2);
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.gallery {
+  overflow: hidden;
+}
+
+.gallery__items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: -10px;
+}
+
+.gallery__item {
+  position: relative;
+  flex: 1 1 auto;
+  margin: 10px;
+  min-width: 220px;
+
+  &:before {
+    display: block;
+    content: " ";
+    padding-top: 75%;
+  }
+}
+
+.gallery__content {
+  @include coverall;
+}

src/scss/site/molecules/_dropdown-toggle.scss

@@ -34,16 +34,16 @@
    */
 
   .k-checkbox-dropdown-toggle {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+    position: absolute !important;
+    left: -10000px !important;
+    top: auto !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
 
     @include rtl {
-      left: auto;
-      right: -10000px;
+      left: auto !important;
+      right: -10000px !important;
     }
   }
 

src/scss/site/molecules/_flag-object.scss

@@ -1,13 +1,11 @@
 /**
  * Flag object
- *
- * Use display table for cross browser availability
  */
 
 .k-flag-object {
   position: relative;
-  display: table;
-  width: 100%;
+  display: flex;
+  align-items: center;
   max-width: 100%;
 }
 
@@ -17,18 +15,7 @@
  */
 
 .k-flag-object--inline {
-  width: auto;
-}
-
-
-/**
- * Flag object children
- */
-
-.k-flag-object__body,
-.k-flag-object__aside {
-  display: table-cell;
-  vertical-align: middle;
+  display: inline-flex;
 }
 
 
@@ -37,10 +24,7 @@
  */
 
 .k-flag-object--top {
-  .k-flag-object__body,
-  .k-flag-object__aside {
-    vertical-align: top;
-  }
+  align-items: flex-start;
 }
 
 
@@ -49,20 +33,16 @@
  */
 
 .k-flag-object--bottom {
-  .k-flag-object__body,
-  .k-flag-object__aside {
-    vertical-align: bottom;
-  }
+  align-items: flex-end;
 }
 
 
 /**
- * Aside
+ * Flag object children
  */
 
 .k-flag-object__aside {
-  white-space: nowrap;
-  width: 1%;
+  flex: 0 0 auto;
 
   [class*="k-icon"],
   [class*="k-icon"]:before,
@@ -71,25 +51,29 @@
   }
 }
 
+.k-flag-object__body {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 
 /**
  * Horizontal spacing
  */
 
-.k-flag-object__aside + .k-flag-object__body {
-  padding-left: 0.5em;
-
-  @include rtl {
-    padding-left: 0;
-    padding-right: 0.5em;
-  }
-}
-
+.k-flag-object__aside + .k-flag-object__aside,
+.k-flag-object__aside + .k-flag-object__body,
 .k-flag-object__body + .k-flag-object__aside {
   padding-left: 0.5em;
+}
 
-  @include rtl {
+@include rtl {
+  .k-flag-object__aside + .k-flag-object__aside,
+  .k-flag-object__aside + .k-flag-object__body,
+  .k-flag-object__body + .k-flag-object__aside {
     padding-left: 0;
     padding-right: 0.5em;
   }
 }
+

src/scss/site/molecules/_forms.scss

@@ -0,0 +1,11 @@
+.k-form-control {
+  background: transparent;
+  border-color: rgba(black, 0.25);
+  box-shadow: inset 0 0 100px 100px rgba(white, 0.66);
+
+  &:focus {
+    background: transparent;
+    border-color: rgba(black, 0.5);
+    box-shadow: inset 0 0 100px 100px rgba(white, 0.66);
+  }
+}

src/scss/site/molecules/_title.scss

@@ -6,7 +6,7 @@
  */
 
 .k-title {
-  @include content-block($section-spacing);
+  @include content-block(round($section-spacing / 2));
   margin-top: 0;
   overflow-x: hidden; /* 1 */
 }
@@ -20,11 +20,11 @@
 
 .k-subtitle {
   font-size: smaller; /* 1 */
-  padding-bottom: 0.5em;
+  padding-bottom: round($section-spacing * 0.25);
   border-bottom: 1px solid rgba(0,0,0,0.1);
   @include content-block($section-spacing);
 }
 
 .k-title + .k-subtitle {
-  margin-top: -($section-spacing); /* 2 */
+  margin-top: -(round($section-spacing * 0.25)); /* 2 */
 }

src/scss/site/utilities/_variables.scss

@@ -411,7 +411,7 @@ $close-text-shadow:           0 1px 0 #fff !default;
 
 // KUI
 
-$section-spacing: 20px;
+$section-spacing: 24px;