Skip to content

Commit

Permalink
#6: Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinpoort
robinpoort committed Apr 25, 2018
1 parent be1f1c1 commit f49d319
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 249 deletions.
68 changes: 44 additions & 24 deletions demo/site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,11 @@ <h3 class="k-subtitle k-inline-list k-inline-list--separated">
<h1 class="example-title">Buttons</h1>
<p>
<a class="k-button" href="#">Default button</a>
<a class="k-button k-button--primary" href="#">Primary button</a>
<a class="k-button k-button--error" href="#">Error button</a>
<a class="k-button k-button--warning" href="#">Warning button</a>
<a class="k-button k-button--neutral" href="#">Neutral button</a>
<a class="k-button k-button--primary" href="#">Primary button (template color)</a>
<a class="k-button k-button--success" href="#">Success button</a>
<a class="k-button k-button--warning" href="#">Warning button</a>
<a class="k-button k-button--error" href="#">Error button</a>
</p>
<hr />

Expand Down Expand Up @@ -319,11 +320,12 @@ <h1 class="example-title">Tree</h1>


<h1 class="example-title">Alert</h1>
<div class="k-alert">Alert</div>
<div class="k-alert k-alert--primary">Alert</div>
<div class="k-alert k-alert--success">Alert</div>
<div class="k-alert k-alert--warning">Alert</div>
<div class="k-alert k-alert--error">Alert</div>
<div class="k-alert">Default alert</div>
<div class="k-alert k-alert--neutral">Neutral alert</div>
<div class="k-alert k-alert--primary">Primary alert</div>
<div class="k-alert k-alert--success">Success alert</div>
<div class="k-alert k-alert--warning">Warning alert</div>
<div class="k-alert k-alert--error">Error alert</div>
<hr />


Expand Down Expand Up @@ -380,25 +382,28 @@ <h1 class="example-title">Select2</h1>

<h1 class="example-title">Labels</h1>
<p>
<span class="k-label">Label</span>
<span class="k-label k-label--primary">Label</span>
<span class="k-label k-label--success">Label</span>
<span class="k-label k-label--warning">Label</span>
<span class="k-label k-label--error">Label</span>
<span class="k-label">Default label</span>
<span class="k-label k-label--neutral">Neutral label</span>
<span class="k-label k-label--primary">Primary label</span>
<span class="k-label k-label--success">Success label</span>
<span class="k-label k-label--warning">Warning label</span>
<span class="k-label k-label--error">Error label</span>
</p>
<p>
<a href="#" class="k-label">Label link</a>
<a href="#" class="k-label k-label--primary">Label link</a>
<a href="#" class="k-label k-label--success">Label link</a>
<a href="#" class="k-label k-label--warning">Label link</a>
<a href="#" class="k-label k-label--error">Label link</a>
<a href="#" class="k-label">Default label link</a>
<a href="#" class="k-label k-label--neutral">Neutral label link</a>
<a href="#" class="k-label k-label--primary">Primary label link</a>
<a href="#" class="k-label k-label--success">Success label link</a>
<a href="#" class="k-label k-label--warning">Warning label link</a>
<a href="#" class="k-label k-label--error">Error label link</a>
</p>
<p>
<button type="button" class="k-label">Label button</button>
<button type="button" class="k-label k-label--primary">Label button</button>
<button type="button" class="k-label k-label--success">Label button</button>
<button type="button" class="k-label k-label--warning">Label button</button>
<button type="button" class="k-label k-label--error">Label button</button>
<button type="button" class="k-label">Default label button</button>
<button type="button" class="k-label k-label--neutral">Neutral label button</button>
<button type="button" class="k-label k-label--primary">Primary label button</button>
<button type="button" class="k-label k-label--success">Success label button</button>
<button type="button" class="k-label k-label--warning">Warning label button</button>
<button type="button" class="k-label k-label--error">Error label button</button>
</p>
<hr />

Expand Down Expand Up @@ -785,7 +790,22 @@ <h2>Tree example</h2>
<div class="k-query-grid k-query-grid--1-3">
<div class="k-query-grid__item">
<div class="k-query-grid__body">
Tree
<div class="k-tree" id="k-jqtree2"></div>
<script type="text/javascript">
(function($) {
$(document).ready(function () {
new Koowa.Tree('#k-jqtree2', {
"data": [
{"label":"Main category","id":4},
{"label":"Sub category 1","id":5,"parent":4},
{"label":"Sub category 2","id":6,"parent":4},
{"label":"Deeper category","id":7,"parent":6},
{"label":"Sub category 3","id":8,"parent":4}
]
});
});
})(kQuery);
</script>
</div>
</div>
<div class="k-query-grid__item">
Expand Down
41 changes: 24 additions & 17 deletions dist/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1532,11 +1532,11 @@
*/
/* Pagination */
/* Site molecules */
/* Alert
========================================================================== */
/* Alerts
========================================================================== */
/**
* Alternate styles
*/
* Alternate styles
*/
/* Button
========================================================================== */
/**
Expand Down Expand Up @@ -3099,7 +3099,7 @@

.k-ui-namespace .k-alert {
padding: 1em;
background: #3498db;
background: #718093;
color: white;
margin-bottom: 1em;
}
Expand Down Expand Up @@ -3139,11 +3139,9 @@
color: var(--primary-text-color);
}

@supports (--a: 0) {
.k-ui-namespace .k-alert--primary {
background-color: var(--primary-color);
color: var(--primary-text-color);
}
.k-ui-namespace .k-alert--neutral {
background: #3498db;
color: white;
}

.k-ui-namespace .k-alert--success {
Expand Down Expand Up @@ -3171,7 +3169,7 @@
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #7f8c8d;
background: #718093;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 160px transparent, inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
border-radius: 3px;
Expand Down Expand Up @@ -3202,8 +3200,13 @@
color: var(--primary-text-color);
}

.k-ui-namespace .k-button--error {
background: #c0392b;
.k-ui-namespace .k-button--neutral {
background: #3498db;
color: white;
}

.k-ui-namespace .k-button--success {
background: #27ae60;
color: white;
}

Expand All @@ -3212,8 +3215,8 @@
color: white;
}

.k-ui-namespace .k-button--success {
background: #27ae60;
.k-ui-namespace .k-button--error {
background: #c0392b;
color: white;
}

Expand Down Expand Up @@ -3351,6 +3354,7 @@
font-size: small;
font-weight: bold;
line-height: 1.2;
background-color: #718093;
color: white;
text-align: center;
white-space: nowrap;
Expand All @@ -3361,7 +3365,6 @@
margin-left: 0.25em;
border-radius: 3px;
text-decoration: none;
background-color: #3498db;
/* Empty tags collapse automatically */
/* Focus and hover */
}
Expand All @@ -3381,20 +3384,24 @@
color: var(--primary-text-color);
}

.k-ui-namespace .k-label--default {
.k-ui-namespace .k-label--neutral {
background-color: #3498db;
color: white;
}

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

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

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

.k-ui-namespace .k-list {
Expand Down
2 changes: 1 addition & 1 deletion dist/css/site.min.css
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/scss/site/core/_tools.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,3 @@
// Site tools

@import "../tools/variables";
@import "../tools/mixins";
90 changes: 46 additions & 44 deletions src/scss/site/molecules/_alert.scss
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
/* Alert
========================================================================== */

.k-alert {
padding: $k-site-alert-padding;
background: $k-site-alert-background;
color: $k-site-alert-color;
@include content-block($k-site-alert-spacing);

h1, h2, h3, h4, h5, h6 {
@include reset;
color: inherit;
}
@if ($k-site-molecules == true and $k-site-molecule-alert != false) or $k-site-molecule-alert == true {

.k-alert__heading, address, h1, h2, h3, h4, h5, h6, p {
@include content-block(0.5em);
}
/* Alerts
========================================================================== */

a {
color: inherit;
text-decoration: underline;
.k-alert {
padding: $k-site-alert-padding;
background: $k-site-alert-background;
color: $k-site-alert-color;
@include content-block($k-site-alert-margin-bottom);

&:focus,
&:hover {
text-decoration: none;
h1, h2, h3, h4, h5, h6 {
@include reset();
color: inherit;
}
}
}

.k-alert__heading, address, h1, h2, h3, h4, h5, h6, p {
@include content-block($k-site-alert-element-margin-bottom);
}

a {
color: inherit;
text-decoration: $k-site-alert-link-text-decoration;

&:focus,
&:hover {
text-decoration: $k-site-alert-link-hover-text-decoration;
}
}
}

/**
* Alternate styles
*/

.k-alert--primary {
// @TODO: add default color as variable?
background-color: var(--primary-color);
color: var(--primary-text-color);
/**
* Alternate styles
*/

@supports ((--a: 0)) {
.k-alert--primary {
background-color: var(--primary-color);
color: var(--primary-text-color);
}
}

.k-alert--success {
background: $k-site-alert-success-background;
color: $k-site-alert-success-color;
}
.k-alert--neutral {
background: $k-site-alert-neutral-background;
color: $k-site-alert-neutral-color;
}

.k-alert--warning {
background: $k-site-alert-warning-background;
color: $k-site-alert-success-color;
}
.k-alert--success {
background: $k-site-alert-success-background;
color: $k-site-alert-success-color;
}

.k-alert--warning {
background: $k-site-alert-warning-background;
color: $k-site-alert-success-color;
}

.k-alert--error {
background: $k-site-alert-error-background;
color: $k-site-alert-success-color;
.k-alert--error {
background: $k-site-alert-error-background;
color: $k-site-alert-success-color;
}
}
21 changes: 13 additions & 8 deletions src/scss/site/molecules/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
display: inline-flex;
justify-content: center;
align-items: center;
background: #7f8c8d;
background: $k-site-button-default-background;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 160px rgba(0, 0, 0, 0), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
border-radius: 3px;
line-height: 1.2;
padding: 0.35em 0.6em;
transition: all 200ms ease-in-out;
text-align: center;
color: white;
color: $k-site-button-default-color;


/* Focus / hover / active */
Expand Down Expand Up @@ -48,19 +48,24 @@
color: var(--primary-text-color);
}

.k-button--error {
background: $k-site-button-error-background;
color: $k-site-button-error-color;
.k-button--neutral {
background: $k-site-button-neutral-background;
color: $k-site-button-neutral-color;
}

.k-button--success {
background: $k-site-button-success-background;
color: $k-site-button-success-color;
}

.k-button--warning {
background: $k-site-button-warning-background;
color: $k-site-button-warning-color;
}

.k-button--success {
background: $k-site-button-success-background;
color: $k-site-button-success-color;
.k-button--error {
background: $k-site-button-error-background;
color: $k-site-button-error-color;
}

.k-button--block {
Expand Down
Loading

0 comments on commit f49d319

Please sign in to comment.