IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated from pr's

Browse Source
This commit is contained in:
Grzegorz Leoniec 2019-01-17 10:38:56 +01:00
parent b589ab0929
commit df9e4ddcf6
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
22 changed files with 101 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
styleguide/src/styleguide/components/Navigation.vue
View File

@ -4,8 +4,7 @@
<ds-input
v-model="searchString"
placeholder="Filter menu ..."
icon="search"
size="base" />
icon="search" />
</div>
<ds-menu
@navigate="$emit('navigate')"

2
styleguide/src/system/components/data-display/CopyField/CopyField.vue
View File

@ -41,7 +41,7 @@ export default {
props: {
/**
* The size used for the text.
* `small, base, large`
* @options small|base|large
*/
size: {
type: String,

2
styleguide/src/system/components/data-display/List/List.vue
View File

@ -36,7 +36,7 @@ export default {
},
/**
* The size used for the list.
* `small, base, large, x-large`
* @options small|base|large|x-large
*/
size: {
type: String,

10
styleguide/src/system/components/data-input/Input/demo.md
View File

@ -1,7 +1,7 @@
## Basic usage
```
<ds-input placeholder="Name ..."/>
<ds-input placeholder="Name ..." />
```
## Usage with label
@ -10,7 +10,13 @@
<ds-input
id="name"
label="Your name"
placeholder="Name ..."/>
placeholder="Name ..." />
```
## Disabled
```
<ds-input placeholder="Name ..." disabled />
```
## Input types

37
styleguide/src/system/components/data-input/shared/input.scss
View File

@ -2,7 +2,7 @@
.#{$class}-wrap {
position: relative;
}
.#{$class} {
appearance: none;
box-sizing: border-box;
@ -12,62 +12,63 @@
width: 100%;
padding: $input-padding-vertical $space-x-small;
height: $input-height;
color: $text-color-base;
background: $background-color-base;
border: $input-border-size solid $border-color-base;
border-radius: $border-radius-base;
outline: none;
transition: all $duration-short $ease-out;
&::placeholder {
color: $text-color-disabled;
}
.ds-input-has-focus &,
&:focus {
border-color: $border-color-active;
background: $background-color-base;
}
.ds-input-is-disabled &,
&:disabled {
color: $text-color-disabled;
opacity: $opacity-disabled;
pointer-events: none;
cursor: not-allowed;
background-color: $background-color-disabled;
}
.ds-input-is-readonly & {
pointer-events: none;
}
.ds-input-has-error & {
border-color: $border-color-danger;
}
}
.ds-input-size-small {
font-size: $font-size-small;
.#{$class} {
font-size: $input-font-size-small;
height: $input-height-small;
padding: $input-padding-vertical-small $space-x-small;
}
}
.ds-input-size-large {
font-size: $font-size-large;
.#{$class} {
font-size: $input-font-size-large;
height: $input-height-large;
padding: $input-padding-vertical-large $space-x-small;
}
}
.#{$class}-icon,
.#{$class}-icon-right {
position: absolute;
@ -81,7 +82,7 @@
color: $text-color-softer;
transition: color $duration-short $ease-out;
pointer-events: none;
.ds-input-has-focus & {
color: $text-color-base;
}
@ -94,15 +95,15 @@
width: $input-height-large;
}
}
.#{$class}-icon-right {
right: 0;
left: auto;
}
.#{$class}-has-icon {
padding-left: $input-height;
.ds-input-size-small & {
padding-left: $input-height-small;
}
@ -111,7 +112,7 @@
padding-left: $input-height-large;
}
}
.#{$class}-has-icon-right {
padding-right: $input-height;
@ -122,5 +123,5 @@
.ds-input-size-large & {
padding-right: $input-height-large;
}
}
}
}

2
styleguide/src/system/components/layout/Card/style.scss
View File

@ -1,4 +1,4 @@
$border-radius: $border-radius-x-large;
$border-radius: $border-radius-large;
.ds-card {
@include reset;

2
styleguide/src/system/components/layout/Container/style.scss
View File

@ -34,4 +34,4 @@
.ds-container-x-large {
max-width: #{$xl}px;
}
}

4
styleguide/src/system/components/layout/Section/Section.vue
View File

@ -27,7 +27,6 @@ export default {
props: {
/**
* Whether this section should be fullheight
* `true, false`
*/
fullheight: {
type: Boolean,
@ -35,7 +34,6 @@ export default {
},
/**
* Highlight with primary color
* `true, false`
*/
primary: {
type: Boolean,
@ -43,7 +41,6 @@ export default {
},
/**
* Highlight with secondary color
* `true, false`
*/
secondary: {
type: Boolean,
@ -51,7 +48,6 @@ export default {
},
/**
* Center the content
* `true, false`
*/
centered: {
type: Boolean,

3
styleguide/src/system/components/layout/Space/style.scss
View File

@ -1,6 +1,7 @@
.ds-space {
@include reset;
}
.ds-space-centered {
text-align: center;
}
}

13
styleguide/src/system/components/layout/Spinner/Spinner.vue
View File

@ -10,7 +10,7 @@
danger && !inverse && `ds-spinner-danger`,
]"
>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
<circle class="ds-spinner-circle" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
</template>
@ -20,7 +20,7 @@ export default {
props: {
/**
* The size used for the spinner.
* `small, base, large`
* @options small|base|large
*/
size: {
type: String,
@ -38,7 +38,6 @@ export default {
},
/**
* Primary style
* `true, false`
*/
primary: {
type: Boolean,
@ -46,7 +45,6 @@ export default {
},
/**
* Secondary style
* `true, false`
*/
secondary: {
type: Boolean,
@ -54,7 +52,6 @@ export default {
},
/**
* Danger style
* `true, false`
*/
danger: {
type: Boolean,
@ -64,7 +61,7 @@ export default {
}
</script>
<docs src="./demo.md"></docs>
<style lang="scss" src="./style.scss">
</style>
</style>
<docs src="./demo.md"></docs>

59
styleguide/src/system/components/layout/Spinner/style.scss
View File

@ -1,41 +1,47 @@
$size-small: $space-base;
$size-base: $space-large;
$size-large: $space-x-large;
.ds-spinner {
$scale: 40px;
animation: rotate 16s linear infinite;
position: relative;
display: inline-block;
width: $scale;
height: $scale;
& .path {
stroke: $text-color-soft;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
&.ds-spinner-inverse .path {
stroke: $color-primary-inverse;
}
&.ds-spinner-primary .path {
stroke: $text-color-primary;
}
&.ds-spinner-secondary .path {
stroke: $text-color-secondary;
}
&.ds-spinner-danger .path {
stroke: $text-color-danger;
}
width: $size-base;
height: $size-base;
&.ds-size-small {
width: $scale * 0.5;
height: $scale * 0.5;
width: $size-small;
height: $size-small;
}
&.ds-size-large {
width: $scale * 1.5;
height: $scale * 1.5;
width: $size-large;
height: $size-large;
}
}
.ds-spinner-circle {
stroke: $text-color-soft;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
.ds-spinner-inverse & {
stroke: $color-primary-inverse;
}
.ds-spinner-primary & {
stroke: $text-color-primary;
}
.ds-spinner-secondary & {
stroke: $text-color-secondary;
}
.ds-spinner-danger & {
stroke: $text-color-danger;
}
}
@keyframes rotate {
100% {
transform: rotate(2160deg);
@ -56,4 +62,3 @@
stroke-dashoffset: -124;
}
}

9
styleguide/src/system/components/navigation/Button/Button.vue
View File

@ -54,7 +54,7 @@ export default {
},
/**
* The size used for the text.
* `small, base, large`
* @options small|base|large
*/
size: {
type: String,
@ -65,7 +65,7 @@ export default {
},
/**
* The component / tag used for this button
* `router-link, a`
* @options router-link|a|button
*/
linkTag: {
type: String,
@ -86,7 +86,6 @@ export default {
},
/**
* Primary style
* `true, false`
*/
primary: {
type: Boolean,
@ -94,7 +93,6 @@ export default {
},
/**
* Secondary style
* `true, false`
*/
secondary: {
type: Boolean,
@ -102,7 +100,6 @@ export default {
},
/**
* Danger style
* `true, false`
*/
danger: {
type: Boolean,
@ -110,7 +107,6 @@ export default {
},
/**
* Toggle the hover state
* `true, false`
*/
hover: {
type: Boolean,
@ -118,7 +114,6 @@ export default {
},
/**
* Make the buttons background transparent
* `true, false`
*/
ghost: {
type: Boolean,

14
styleguide/src/system/components/navigation/Menu/Menu.vue
View File

@ -13,9 +13,10 @@
:route="route"
:parents="[]"
:name="route.name">
<!-- @slot Scoped slot for providing a custom menu item -->
<slot
:route="route"
name="Navigation">
name="menuitem">
<ds-menu-item
:key="route.path ? route.path : index"
:route="route" />
@ -64,7 +65,7 @@ export default {
},
/**
* The default component / tag used for the link of menu items
* `router-link, a`
* @options router-link|a
*/
linkTag: {
type: String,
@ -98,15 +99,6 @@ export default {
return route.name
}
},
/**
* Function that matches items exactly
*/
matcher: {
type: Function,
default: () => {
return false
}
},
/**
* Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly.
*/

2
styleguide/src/system/components/navigation/Menu/MenuItem.vue
View File

@ -75,7 +75,7 @@ export default {
},
/**
* The component / tag used for the link of this route
* `router-link, a`
* @options router-link|a
*/
linkTag: {
type: String,

6
styleguide/src/system/components/typography/Chip/Chip.vue
View File

@ -31,7 +31,7 @@ export default {
props: {
/**
* The background color used for the chip.
* `medium, inverse, primary, success, warning, danger`
* @options medium|inverse|primary|success|warning|danger
*/
color: {
type: String,
@ -42,7 +42,7 @@ export default {
},
/**
* The size used for the text.
* `base, large, small`
* @options base|large|small
*/
size: {
type: String,
@ -53,7 +53,6 @@ export default {
},
/**
* Whether the chip should be removeable
* `true, false`
*/
removable: {
type: Boolean,
@ -61,7 +60,6 @@ export default {
},
/**
* Whether the chip should be rounded
* `true, false`
*/
round: {
type: Boolean,

30
styleguide/src/system/components/typography/Chip/style.scss
View File

@ -1,21 +1,17 @@
.ds-chip {
@include reset;
@include stack-space($space-xx-small);
@include inline-space($font-space-xx-small);
position: relative;
display: inline-block;
font-family: $font-family-text;
line-height: $line-height-base;
padding: $space-xx-small $space-x-small;
margin-right: $font-space-xx-small;
padding: $font-space-xx-small $font-space-large;
border-radius: $border-radius-base;
font-weight: $font-weight-bold;
color: $text-color-base;
background-color: $background-color-softest;
&:last-child {
margin-right: 0;
}
&.ds-chip-removable {
padding-right: $space-x-small + $space-small;
}
@ -50,27 +46,27 @@
border-radius: $border-radius-rounded;
}
.ds-chip-size-base {
font-size: $font-size-small;
padding-left: $space-small * 0.9;
padding-right: $space-small * 0.9;
.ds-chip-size-small {
font-size: $font-size-xx-small;
padding: $font-space-xxx-small ($font-space-large + $font-space-xxx-small);
}
.ds-chip-size-small {
font-size: $font-size-x-small;
padding: $space-xxx-small $space-x-small * 1.2;
.ds-chip-size-base {
font-size: $font-size-small;
padding-left: $font-space-large + $font-space-xx-small;
padding-right: $font-space-large + $font-space-xx-small;
}
.ds-chip-size-large {
font-size: $font-size-base;
padding-left: $space-small;
padding-right: $space-small;
padding-left: $font-space-x-large;
padding-right: $font-space-x-large;
}
.ds-chip-close {
@include reset-button;
position: absolute;
right: $space-xx-small;
right: $font-space-base;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
@ -88,4 +84,4 @@
&:hover {
opacity: 1;
}
}
}

1
styleguide/src/system/components/typography/Code/Code.vue
View File

@ -20,7 +20,6 @@ export default {
props: {
/**
* Display the code inline.
* `true, false`
*/
inline: {
type: Boolean,

6
styleguide/src/system/components/typography/Heading/Heading.vue
View File

@ -26,7 +26,7 @@ export default {
props: {
/**
* The heading type used for the heading.
* `h1, h2, h3, h4, h5, h6`
* @options h1|h2|h3|h4|h5|h6
*/
tag: {
type: String,
@ -37,7 +37,7 @@ export default {
},
/**
* The size used for the heading.
* `h1, h2, h3, h4, h5, h6`
* @options h1|h2|h3|h4|h5|h6
*/
size: {
type: String,
@ -48,7 +48,6 @@ export default {
},
/**
* Primary style
* `true, false`
*/
primary: {
type: Boolean,
@ -56,7 +55,6 @@ export default {
},
/**
* Muted style
* `true, false`
*/
soft: {
type: Boolean,

1
styleguide/src/system/components/typography/Logo/Logo.vue
View File

@ -30,7 +30,6 @@ export default {
props: {
/**
* Inverse the logo
* `true, false`
*/
inverse: {
type: Boolean,

5
styleguide/src/system/components/typography/Tag/Tag.vue
View File

@ -23,7 +23,7 @@ export default {
props: {
/**
* The background color used for the tag.
* `medium, inverse, primary, success, warning, danger`
* @options medium|inverse|primary|success|warning|danger
*/
color: {
type: String,
@ -34,7 +34,7 @@ export default {
},
/**
* The size used for the text.
* `base, large, small`
* @options base|large|small
*/
size: {
type: String,
@ -45,7 +45,6 @@ export default {
},
/**
* Whether the tag should be round
* `true, false`
*/
round: {
type: Boolean,

4
styleguide/src/system/tokens/color.yml
View File

@ -218,6 +218,10 @@ props:
value: *color-neutral-30
category: background-color
- name: background-color-disabled
value: *color-neutral-90
category: background-color
- name: background-color-primary
value: *color-primary
category: background-color

1
styleguide/src/system/tokens/font-spacing.yml
View File

@ -24,6 +24,7 @@ props:
value: "0.2em"
- name: font-space-xxx-small
value: "0.1em"
global:
type: number
category: font-spacing