Skip to content

Commit

Permalink
Merge pull request #116 from viljamis/3.3.0
Browse files Browse the repository at this point in the history 
3.3.0
  • Loading branch information
@arielsalminen
arielsalminen committed Sep 28, 2018
2 parents 7008547 + 50cc5b2 commit b6f3f7f
Show file tree
Hide file tree
Showing 39 changed files with 1,261 additions and 650 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http

## Changelog

- `3.2.0` is the latest release.
- `3.5.0` is the latest release.
- See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.

## Need more help?
Expand Down
2 changes: 1 addition & 1 deletion build/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ exports.cssLoaders = function(options) {
outputStyle: "compressed",
}

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
// https://vue-loader.vuejs.org/guide/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
Expand Down
2 changes: 1 addition & 1 deletion config/docs.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ module.exports = {
module: {
rules: [
{
test: /\.(css?|scss)(\?.*)?$/,
test: /\.(css?|scss|sass)(\?.*)?$/,
use: [
"style-loader",
"css-loader",
Expand Down
64 changes: 32 additions & 32 deletions docs/components/status/Components.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<div class="component-status">
<ul class="status-list">
<li>
<svg-icon name="ready" fill="#7cb518" size="16px" />
<Icon name="ready" fill="#7cb518" size="small" />
<p>Ready</p>
</li>
<li>
<svg-icon name="review" :fill="tokens.color_ucla_gold.value" size="16px" />
<Icon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
<p>Under review</p>
</li>
<li>
<svg-icon name="deprecated" :fill="tokens.color_vermilion.value" size="16px" />
<Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
<p>Deprecated</p>
</li>
<li>
<svg-icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="16px" />
<Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
<p>Prototype</p>
</li>
<li>
Expand Down Expand Up @@ -46,29 +46,29 @@
</td>
<td v-else>N/A</td>
<td v-if="component.status">
<svg-icon
<Icon
v-if="component.status === 'ready'"
name="ready"
fill="#7cb518"
size="16px"
size="small"
/>
<svg-icon
<Icon
v-if="component.status === 'under-review' || component.status === 'review'"
name="review"
:fill="tokens.color_ucla_gold.value"
size="16px"
size="small"
/>
<svg-icon
<Icon
v-if="component.status === 'prototype'"
name="prototype"
:fill="tokens.color_bleu_de_france.value"
size="16px"
size="small"
/>
<svg-icon
<Icon
v-if="component.status === 'deprecated'"
name="deprecated"
:fill="tokens.color_vermilion.value"
size="16px"
size="small"
/>
</td>
<td v-else>—</td>
Expand Down Expand Up @@ -139,11 +139,11 @@ export default {
.component-status {
@include reset;
font-family: $font-family-heading;
font-weight: $font-weight-regular;
line-height: $line-height-heading;
font-family: $font-heading;
font-weight: $weight-normal;
line-height: $line-height-xs;
color: $color-rich-black;
margin-bottom: $space-small;
margin-bottom: $space-s;
font-style: normal;
@media (max-width: 1000px) {
overflow-x: auto;
Expand All @@ -154,14 +154,14 @@ export default {
width: 100%;
}
thead th {
padding: $space-small;
padding: $space-s;
background: $color-cloud;
font-size: $font-size-small;
font-weight: $font-weight-bold;
font-size: $size-s;
font-weight: $weight-bold;
color: $color-oxford-blue;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: $font-weight-semi-bold;
font-weight: $weight-semi-bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
Expand All @@ -170,12 +170,12 @@ export default {
position: sticky;
top: -1px;
&:first-child {
border-top-left-radius: $border-radius-default;
border-bottom-left-radius: $border-radius-default;
border-top-left-radius: $radius-default;
border-bottom-left-radius: $radius-default;
}
&:last-child {
border-top-right-radius: $border-radius-default;
border-bottom-right-radius: $border-radius-default;
border-top-right-radius: $radius-default;
border-bottom-right-radius: $radius-default;
}
}
tr {
Expand All @@ -185,15 +185,15 @@ export default {
}
}
td {
font-size: $font-size-small;
padding: $space-small;
font-size: $size-s;
padding: $space-s;
&:first-child {
font-weight: $font-weight-bold;
font-weight: $weight-bold;
white-space: nowrap;
}
}
.status-list {
margin: 0 0 $space-small;
margin: 0 0 $space-m;
overflow: hidden;
padding: 0;
list-style: none;
Expand All @@ -204,9 +204,9 @@ export default {
display: block;
}
li {
margin: 0 $space-base 0 0;
margin: 0 $space-m 0 0;
color: $color-silver;
font-size: $font-size-small;
font-size: $size-s;
align-items: center;
display: flex;
@media (max-width: 1000px) {
Expand All @@ -216,11 +216,11 @@ export default {
}
svg,
span {
margin: -2px calc(#{$space-small} / 2) 0 0;
margin: -2px calc(#{$space-s} / 2) 0 0;
}
p {
@media (max-width: 1000px) {
margin: $space-x-small;
margin: $space-xs;
}
}
}
Expand Down
45 changes: 23 additions & 22 deletions docs/components/tokens/All.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,12 @@ export default {
.all-tokens {
@include reset;
font-family: $font-family-heading;
font-weight: $font-weight-regular;
line-height: $line-height-heading;
margin-top: $space-l;
font-family: $font-heading;
font-weight: $weight-normal;
line-height: $line-height-xs;
color: $color-rich-black;
margin-bottom: $space-small;
margin-bottom: $space-s;
font-style: normal;
@media (max-width: 1000px) {
overflow-x: auto;
Expand All @@ -83,14 +84,14 @@ export default {
width: 100%;
}
thead th {
padding: $space-small $space-large $space-small $space-small;
padding: $space-s $space-l $space-s $space-s;
background: $color-cloud;
font-size: $font-size-small;
font-weight: $font-weight-bold;
font-size: $size-s;
font-weight: $weight-bold;
color: $color-oxford-blue;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: $font-weight-semi-bold;
font-weight: $weight-semi-bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
Expand All @@ -99,12 +100,12 @@ export default {
position: sticky;
top: -1px;
&:first-child {
border-top-left-radius: $border-radius-default;
border-bottom-left-radius: $border-radius-default;
border-top-left-radius: $radius-default;
border-bottom-left-radius: $radius-default;
}
&:last-child {
border-top-right-radius: $border-radius-default;
border-bottom-right-radius: $border-radius-default;
border-top-right-radius: $radius-default;
border-bottom-right-radius: $radius-default;
}
}
tr {
Expand All @@ -114,26 +115,26 @@ export default {
}
}
td {
font-size: $font-size-small;
padding: $space-small $space-large $space-small $space-small;
font-size: $size-s;
padding: $space-s $space-l $space-s $space-s;
&:first-child {
font-weight: $font-weight-bold;
font-weight: $weight-bold;
white-space: nowrap;
}
}
.type {
line-height: $line-height-small;
max-width: calc(100% - #{$space-base});
line-height: $line-height-s;
max-width: calc(100% - #{$space-m});
float: left;
}
.example {
@include inline-space($space-x-small);
border-radius: $border-radius-default;
@include inline-space($space-xs);
border-radius: $radius-default;
background: $color-white;
box-shadow: $box-shadow-small-inset, $box-shadow-small-inset, $box-shadow-small-inset;
box-shadow: $shadow-s-inset, $shadow-s-inset, $shadow-s-inset;
margin-top: $space-xx-small;
width: $space-small;
height: $space-small;
width: $space-s;
height: $space-s;
float: left;
}
}
Expand Down
45 changes: 22 additions & 23 deletions docs/components/tokens/Color.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default {
--------------------------------------------- */
.colors {
margin-top: $space-l;
display: block;
width: 100%;
@supports (display: grid) {
Expand All @@ -58,74 +59,72 @@ export default {
align-content: stretch;
justify-content: left;
grid-template-columns:
calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base})
calc(20% - #{$space-base});
grid-column-gap: $space-base;
calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m})
calc(20% - #{$space-m});
grid-column-gap: $space-m;
@media (max-width: 1300px) {
grid-template-columns: calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(
25% - #{$space-base}
grid-template-columns: calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(
25% - #{$space-m}
);
}
@media (max-width: 1100px) {
grid-template-columns: calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base}) calc(
33.333% - #{$space-base}
);
grid-template-columns: calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m});
}
@media (max-width: 900px) {
grid-template-columns: calc(50% - #{$space-base}) calc(50% - #{$space-base});
grid-template-columns: calc(50% - #{$space-m}) calc(50% - #{$space-m});
}
@media (max-width: 400px) {
grid-template-columns: 100%;
}
}
}
.swatch {
@include stack-space($space-small);
@include stack-space($space-s);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
height: $space-xx-large;
margin-left: -#{$space-small};
margin-top: -#{$space-small};
width: calc(100% + #{$space-large});
height: $space-xxl;
margin-left: -#{$space-s};
margin-top: -#{$space-s};
width: calc(100% + #{$space-l});
float: left;
}
h3 {
@include reset;
@include stack-space($space-x-small);
@include stack-space($space-xs);
text-transform: capitalize;
line-height: 1.2;
width: 100%;
float: left;
}
.color {
@include reset;
@include inset-space($space-small);
@include inset-space($space-s);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: $space-large;
margin-bottom: $space-m;
box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
font-size: $font-size-small;
font-family: $font-family-text;
font-size: $size-s;
font-family: $font-text;
color: $color-rich-black;
border-radius: $border-radius-default;
border-radius: $radius-default;
overflow: hidden;
text-align: left;
@supports (display: grid) {
width: 100%;
float: left;
}
@media (max-width: 400px) {
margin-bottom: $space-base;
margin-bottom: $space-m;
}
&:hover {
span {
color: shade($color-silver, 40%);
}
}
span {
margin-bottom: $space-x-small;
margin-bottom: $space-xs;
line-height: 1.3;
color: $color-silver;
font-size: $font-size-small;
font-size: $size-s;
width: 100%;
float: left;
}
Expand Down
Loading

0 comments on commit b6f3f7f

Please sign in to comment.