diff --git a/src/scss/admin/atoms/_img.scss b/src/scss/admin/atoms/_img.scss index 77ce842..13d068f 100644 --- a/src/scss/admin/atoms/_img.scss +++ b/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); } \ No newline at end of file diff --git a/src/scss/admin/molecules/_card.scss b/src/scss/admin/molecules/_card.scss index 89225c1..dadb0cd 100644 --- a/src/scss/admin/molecules/_card.scss +++ b/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 diff --git a/src/scss/site-ui.scss b/src/scss/site-ui.scss index 5e8744c..30b51f6 100644 --- a/src/scss/site-ui.scss +++ b/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"; diff --git a/src/scss/site/_shame.scss b/src/scss/site/_shame.scss index ef10d64..bb81803 100644 --- a/src/scss/site/_shame.scss +++ b/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; +} \ No newline at end of file diff --git a/src/scss/site/molecules/_dropdown-toggle.scss b/src/scss/site/molecules/_dropdown-toggle.scss index ca66510..4119153 100644 --- a/src/scss/site/molecules/_dropdown-toggle.scss +++ b/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; } } diff --git a/src/scss/site/molecules/_flag-object.scss b/src/scss/site/molecules/_flag-object.scss index bd41b3b..81cbf13 100644 --- a/src/scss/site/molecules/_flag-object.scss +++ b/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; } } + diff --git a/src/scss/site/molecules/_forms.scss b/src/scss/site/molecules/_forms.scss new file mode 100644 index 0000000..edd19fe --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/scss/site/molecules/_title.scss b/src/scss/site/molecules/_title.scss index 72c26c5..347585f 100644 --- a/src/scss/site/molecules/_title.scss +++ b/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 */ } \ No newline at end of file diff --git a/src/scss/site/utilities/_variables.scss b/src/scss/site/utilities/_variables.scss index b4ef4f7..2bcba0d 100644 --- a/src/scss/site/utilities/_variables.scss +++ b/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;