Skip to content

Commit

Permalink
#6: Testing in templates and adding improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
robinpoort committed May 4, 2018
1 parent 7dad020 commit ca2bc08
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 43 deletions.
57 changes: 40 additions & 17 deletions dist/css/site.css
Original file line number Diff line number Diff line change
Expand Up @@ -3231,27 +3231,31 @@
border: 1px solid rgba(0, 0, 0, 0.33);
}

.k-ui-namespace .k-button--primary {
background-color: var(--primary-color);
.k-ui-namespace .k-button:active:not(.k-button--link), .k-ui-namespace .k-button:focus:not(.k-button--link), .k-ui-namespace .k-button:hover:not(.k-button--link) {
color: white;
}

.k-ui-namespace .k-button--primary:not(.k-button--link), .k-ui-namespace .k-button--primary:not(.k-button--link):active, .k-ui-namespace .k-button--primary:not(.k-button--link):focus, .k-ui-namespace .k-button--primary:not(.k-button--link):hover {
background: var(--primary-color);
color: var(--primary-text-color);
}

.k-ui-namespace .k-button--neutral {
.k-ui-namespace .k-button--neutral:not(.k-button--link), .k-ui-namespace .k-button--neutral:not(.k-button--link):active, .k-ui-namespace .k-button--neutral:not(.k-button--link):focus, .k-ui-namespace .k-button--neutral:not(.k-button--link):hover {
background: #3498db;
color: white;
}

.k-ui-namespace .k-button--success {
.k-ui-namespace .k-button--success:not(.k-button--link), .k-ui-namespace .k-button--success:not(.k-button--link):active, .k-ui-namespace .k-button--success:not(.k-button--link):focus, .k-ui-namespace .k-button--success:not(.k-button--link):hover {
background: #27ae60;
color: white;
}

.k-ui-namespace .k-button--warning {
.k-ui-namespace .k-button--warning:not(.k-button--link), .k-ui-namespace .k-button--warning:not(.k-button--link):active, .k-ui-namespace .k-button--warning:not(.k-button--link):focus, .k-ui-namespace .k-button--warning:not(.k-button--link):hover {
background: #e67e22;
color: white;
}

.k-ui-namespace .k-button--error {
.k-ui-namespace .k-button--error:not(.k-button--link), .k-ui-namespace .k-button--error:not(.k-button--link):active, .k-ui-namespace .k-button--error:not(.k-button--link):focus, .k-ui-namespace .k-button--error:not(.k-button--link):hover {
background: #c0392b;
color: white;
}
Expand All @@ -3265,6 +3269,7 @@
color: inherit;
border: none;
text-decoration: underline;
box-shadow: none;
/* Focus / hover / active */
}

Expand All @@ -3285,6 +3290,19 @@
.k-ui-namespace a.k-card__section:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.2);
color: inherit;
}

.k-ui-namespace a.k-card__body:focus .k-card__header, .k-ui-namespace a.k-card__body:hover .k-card__header,
.k-ui-namespace a.k-card__section:focus .k-card__header,
.k-ui-namespace a.k-card__section:hover .k-card__header {
border-color: rgba(0, 0, 0, 0.2);
}

.k-ui-namespace a.k-card__body:focus .k-card__footer, .k-ui-namespace a.k-card__body:hover .k-card__footer,
.k-ui-namespace a.k-card__section:focus .k-card__footer,
.k-ui-namespace a.k-card__section:hover .k-card__footer {
border-color: rgba(0, 0, 0, 0.2);
}

.k-ui-namespace .k-card__header {
Expand Down Expand Up @@ -3417,28 +3435,28 @@
cursor: pointer;
}

.k-ui-namespace .k-label--primary {
background-color: var(--primary-color);
.k-ui-namespace .k-label--primary, .k-ui-namespace .k-label--primary:active, .k-ui-namespace .k-label--primary:focus, .k-ui-namespace .k-label--primary:hover {
background: var(--primary-color);
color: var(--primary-text-color);
}

.k-ui-namespace .k-label--neutral {
background-color: #3498db;
.k-ui-namespace .k-label--neutral, .k-ui-namespace .k-label--neutral:active, .k-ui-namespace .k-label--neutral:focus, .k-ui-namespace .k-label--neutral:hover {
background: #3498db;
color: white;
}

.k-ui-namespace .k-label--success {
background-color: #27ae60;
.k-ui-namespace .k-label--success, .k-ui-namespace .k-label--success:active, .k-ui-namespace .k-label--success:focus, .k-ui-namespace .k-label--success:hover {
background: #27ae60;
color: white;
}

.k-ui-namespace .k-label--warning {
background-color: #e67e22;
.k-ui-namespace .k-label--warning, .k-ui-namespace .k-label--warning:active, .k-ui-namespace .k-label--warning:focus, .k-ui-namespace .k-label--warning:hover {
background: #e67e22;
color: white;
}

.k-ui-namespace .k-label--error {
background-color: #c0392b;
.k-ui-namespace .k-label--error, .k-ui-namespace .k-label--error:active, .k-ui-namespace .k-label--error:focus, .k-ui-namespace .k-label--error:hover {
background: #c0392b;
color: white;
}

Expand All @@ -3457,6 +3475,11 @@
}

.k-ui-namespace .k-list__item {
margin: 0;
padding: 0;
list-style: none;
border: none;
background: transparent;
line-height: 1.5;
padding-top: 0.25em;
padding-bottom: 0.25em;
Expand Down Expand Up @@ -3807,7 +3830,7 @@
}

.k-ui-namespace .k-subtitle {
font-size: smaller;
font-size: small;
/* 1 */
padding-bottom: 0em;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
Expand Down
2 changes: 1 addition & 1 deletion dist/css/site.min.css

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/scss/site/core/_tools.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,8 @@
// Site tools

@import "../tools/variables";


// Site mixins

@import "../tools/mixins/theme";
30 changes: 20 additions & 10 deletions src/scss/site/molecules/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
&:hover {
box-shadow: $k-site-button-hover-box-shadow;
border: $k-site-button-hover-border;

&:not(.k-button--link) {
color: $k-site-button-color;
}
}
}

Expand All @@ -36,28 +40,33 @@
*/

.k-button--primary {
background-color: var(--primary-color);
color: var(--primary-text-color);
&:not(.k-button--link) {
@include theme(var(--primary-color), var(--primary-text-color));
}
}

.k-button--neutral {
background: $k-site-button-neutral-background;
color: $k-site-button-neutral-color;
&:not(.k-button--link) {
@include theme($k-site-button-neutral-background, $k-site-button-neutral-color);
}
}

.k-button--success {
background: $k-site-button-success-background;
color: $k-site-button-success-color;
&:not(.k-button--link) {
@include theme($k-site-button-success-background, $k-site-button-success-color);
}
}

.k-button--warning {
background: $k-site-button-warning-background;
color: $k-site-button-warning-color;
&:not(.k-button--link) {
@include theme($k-site-button-warning-background, $k-site-button-warning-color);
}
}

.k-button--error {
background: $k-site-button-error-background;
color: $k-site-button-error-color;
&:not(.k-button--link) {
@include theme($k-site-button-error-background, $k-site-button-error-color);
}
}

.k-button--block {
Expand All @@ -69,6 +78,7 @@
color: inherit;
border: none;
text-decoration: underline;
box-shadow: none;

/* Focus / hover / active */

Expand Down
9 changes: 9 additions & 0 deletions src/scss/site/molecules/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@
&:hover {
background: $k-site-card-body-hover-background;
border-color: $k-site-card-body-hover-border-color;
color: $k-site-card-body-color;

.k-card__header {
border-color: $k-site-card-body-hover-border-color;
}

.k-card__footer {
border-color: $k-site-card-body-hover-border-color;
}
}
}

Expand Down
15 changes: 5 additions & 10 deletions src/scss/site/molecules/_label.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,27 +51,22 @@
*/

.k-label--primary {
background-color: var(--primary-color);
color: var(--primary-text-color);
@include theme(var(--primary-color), var(--primary-text-color));
}

.k-label--neutral {
background-color: $k-site-label-neutral-background;
color: $k-site-label-neutral-type-background;
@include theme($k-site-label-neutral-background, $k-site-label-neutral-color);
}

.k-label--success {
background-color: $k-site-label-success-background;
color: $k-site-label-success-type-background;
@include theme($k-site-label-success-background, $k-site-label-success-color);
}

.k-label--warning {
background-color: $k-site-label-warning-background;
color: $k-site-label-warning-type-background;
@include theme($k-site-label-warning-background, $k-site-label-warning-color);
}

.k-label--error {
background-color: $k-site-label-error-background;
color: $k-site-label-error-type-background;
@include theme($k-site-label-error-background, $k-site-label-error-color);
}
}
1 change: 1 addition & 0 deletions src/scss/site/molecules/_list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
}

.k-list__item {
@include reset();
line-height: $k-site-list-item-line-height;
padding-top: $k-site-list-item-padding;
padding-bottom: $k-site-list-item-padding;
Expand Down
10 changes: 5 additions & 5 deletions src/scss/site/tools/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,16 @@ $k-site-label-hover-text-decoration: none !default;
$k-site-label-hover-cursor: pointer !default;

$k-site-label-neutral-background: $k-site-neutral-color !default;
$k-site-label-neutral-type-background: $k-site-neutral-type-color !default;
$k-site-label-neutral-color: $k-site-neutral-type-color !default;

$k-site-label-success-background: $k-site-success-color !default;
$k-site-label-success-type-background: $k-site-success-type-color !default;
$k-site-label-success-color: $k-site-success-type-color !default;

$k-site-label-warning-background: $k-site-warning-color !default;
$k-site-label-warning-type-background: $k-site-warning-type-color !default;
$k-site-label-warning-color: $k-site-warning-type-color !default;

$k-site-label-error-background: $k-site-error-color !default;
$k-site-label-error-type-background: $k-site-error-type-color !default;
$k-site-label-error-color: $k-site-error-type-color !default;


// List
Expand Down Expand Up @@ -271,7 +271,7 @@ $k-site-thumbnail-hover-border-color: rgba(0, 0, 0, 0.33) !default

$k-site-title-spacing: round($k-site-section-spacing / 2) !default;

$k-site-subtitle-font-size: smaller !default;
$k-site-subtitle-font-size: small !default;
$k-site-subtitle-padding: round($k-site-section-spacing * 0.25) !default;
$k-site-subtitle-margin: $k-site-section-spacing !default;
$k-site-subtitle-border-bottom: $k-site-border-width $k-site-border-style rgba(0, 0, 0, 0.1) !default;
Expand Down
9 changes: 9 additions & 0 deletions src/scss/site/tools/mixins/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@mixin theme($background, $color) {
&,
&:active,
&:focus,
&:hover {
background: $background;
color: $color;
}
}

0 comments on commit ca2bc08

Please sign in to comment.