This repository has been archived by the owner on Jan 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #890 from owncloud/small-design-tweaks
Small design tweaks
- Loading branch information
Showing
69 changed files
with
942 additions
and
371 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
Change: Small design improvements | ||
|
||
We've changed a few color design tokens. | ||
We've rotated the icon 45 degrees to the left. | ||
We've changed the spacing values and united them in one design tokens for both margin and padding. | ||
|
||
https://github.com/owncloud/owncloud-design-system/pull/890 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
Change: Updated checkbox and radiobutton components | ||
|
||
We updated the OcCheckbox and OcRadio components so that it's possible to use them properly with `v-model`. OcRadio had | ||
the radiobutton on the right side of the label. We moved it over to the left side for consistency. | ||
|
||
https://github.com/owncloud/owncloud-design-system/pull/890 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
Enhancement: Add margin and padding utility classes | ||
|
||
We've added utility classes which can assign margin and padding to elements. | ||
In their own subsections of utilities section in our design system documentation can be found how to use them. | ||
|
||
https://github.com/owncloud/owncloud-design-system/pull/890 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
## Usage | ||
Add one or more of the following classes to any element to create the same vertical and/or horizontal margin that a paragraph usually has. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m | Adds margin to all sides of the element. | | ||
| .oc-mt | Adds top margin. | | ||
| .oc-mb | Adds bottom margin. | | ||
| .oc-ml | Adds left margin. | | ||
| .oc-mr | Adds right margin. | | ||
| .oc-mx | Adds left and right margins. | | ||
| .oc-my | Adds top and bottom margins. | | ||
|
||
## X-Small margin | ||
Add one of the following classes to add very small spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-xs | Adds x-small margin to all sides of the element. | | ||
| .oc-mt-xs | Adds x-small top margin. | | ||
| .oc-mb-xs | Adds x-small bottom margin. | | ||
| .oc-ml-xs | Adds x-small left margin. | | ||
| .oc-mr-xs | Adds x-small right margin. | | ||
| .oc-mx-xs | Adds x-small left and right margins. | | ||
| .oc-my-xs | Adds x-small top and bottom margins. | | ||
|
||
## Small margin | ||
Add one of the following classes to add small spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-s | Adds small to all sides of the element. | | ||
| .oc-mt-s | Adds small top margin. | | ||
| .oc-mb-s | Adds small bottom margin. | | ||
| .oc-ml-s | Adds small left margin. | | ||
| .oc-mr-s | Adds small right margin. | | ||
| .oc-mx-s | Adds small left and right margins. | | ||
| .oc-my-s | Adds small top and bottom margins. | | ||
|
||
## Medium margin | ||
Add one of the following classes to add medium spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-m | Adds medium margin to all sides of the element. | | ||
| .oc-mt-m | Adds medium top margin. | ||
| .oc-mb-m | Adds medium bottom margin. | | ||
| .oc-ml-m | Adds medium left margin. | | ||
| .oc-mr-m | Adds medium right margin. | | ||
| .oc-mx-m | Adds medium left and right margins. | | ||
| .oc-my-m | Adds medium top and bottom margins. | | ||
|
||
## Large margin | ||
Add one of the following classes to add large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-l | Adds large margin to all sides of the element. | | ||
| .oc-mt-l | Adds large top margin. | | ||
| .oc-mb-l | Adds large bottom margin. | | ||
| .oc-ml-l | Adds large left margin. | | ||
| .oc-mr-l | Adds large right margin. | | ||
| .oc-mx-l | Adds large left and right margins. | | ||
| .oc-my-l | Adds large top and bottom margins. | | ||
|
||
## X-Large margin | ||
Add one of the following classes to add very large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-xl | Adds larger margin to all sides of the element. | | ||
| .oc-mt-xl | Adds larger top margin. | | ||
| .oc-mb-xl | Adds larger bottom margin. | | ||
| .oc-ml-xl | Adds larger left margin. | | ||
| .oc-mr-xl | Adds larger right margin. | | ||
| .oc-mx-xl | Adds larger left and right margins. | | ||
| .oc-my-xl | Adds larger top and bottom margins. | | ||
|
||
## XX-Large margin | ||
Add one of the following classes to add extra large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-xxl | Adds extra larger margin to all sides of the element. | | ||
| .oc-mt-xxl | Adds extra larger top margin. | | ||
| .oc-mb-xxl | Adds extra larger bottom margin. | | ||
| .oc-ml-xxl | Adds extra larger left margin. | | ||
| .oc-mr-xxl | Adds extra larger right margin. | | ||
| .oc-mx-xxl | Adds extra larger left and right margins. | | ||
| .oc-my-xxl | Adds extra larger top and bottom margins. | | ||
|
||
## Remove margin | ||
Add one of the following classes to remove margin from block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-m-rm | Removes all margins. | | ||
| .oc-mt-rm | Removes top margin. | | ||
| .oc-mb-rm | Removes bottom margin. | | ||
| .oc-ml-rm | Removes left margin. | | ||
| .oc-mr-rm | Removes right margin. | | ||
| .oc-mx-rm | Removes left and right margins. | | ||
| .oc-my-rm | Removes top and bottom margins. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
## Usage | ||
Add one or more of the following classes to any element to create the same vertical and/or horizontal padding that a paragraph usually has. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p | Adds padding to all sides of the element. | | ||
| .oc-pt | Adds top padding. | | ||
| .oc-pb | Adds bottom padding. | | ||
| .oc-pl | Adds left padding. | | ||
| .oc-pr | Adds right padding. | | ||
| .oc-px | Adds left and right paddings. | | ||
| .oc-py | Adds top and bottom paddings. | | ||
|
||
## X-Small padding | ||
Add one of the following classes to add very small spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-xs | Adds x-small padding to all sides of the element. | | ||
| .oc-pt-xs | Adds x-small top padding. | | ||
| .oc-pb-xs | Adds x-small bottom padding. | | ||
| .oc-pl-xs | Adds x-small left padding. | | ||
| .oc-pr-xs | Adds x-small right padding. | | ||
| .oc-px-xs | Adds x-small left and right paddings. | | ||
| .oc-py-xs | Adds x-small top and bottom paddings. | | ||
|
||
## Small padding | ||
Add one of the following classes to add small spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-s | Adds small to all sides of the element. | | ||
| .oc-pt-s | Adds small top padding. | | ||
| .oc-pb-s | Adds small bottom padding. | | ||
| .oc-pl-s | Adds small left padding. | | ||
| .oc-pr-s | Adds small right padding. | | ||
| .oc-px-s | Adds small left and right paddings. | | ||
| .oc-py-s | Adds small top and bottom paddings. | | ||
|
||
## Medium padding | ||
Add one of the following classes to add medium spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-m | Adds medium padding to all sides of the element. | | ||
| .oc-pt-m | Adds medium top padding. | ||
| .oc-pb-m | Adds medium bottom padding. | | ||
| .oc-pl-m | Adds medium left padding. | | ||
| .oc-pr-m | Adds medium right padding. | | ||
| .oc-px-m | Adds medium left and right paddings. | | ||
| .oc-py-m | Adds medium top and bottom paddings. | | ||
|
||
## Large padding | ||
Add one of the following classes to add large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-l | Adds large padding to all sides of the element. | | ||
| .oc-pt-l | Adds large top padding. | | ||
| .oc-pb-l | Adds large bottom padding. | | ||
| .oc-pl-l | Adds large left padding. | | ||
| .oc-pr-l | Adds large right padding. | | ||
| .oc-px-l | Adds large left and right paddings. | | ||
| .oc-py-l | Adds large top and bottom paddings. | | ||
|
||
## X-Large padding | ||
Add one of the following classes to add very large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-xl | Adds larger padding to all sides of the element. | | ||
| .oc-pt-xl | Adds larger top padding. | | ||
| .oc-pb-xl | Adds larger bottom padding. | | ||
| .oc-pl-xl | Adds larger left padding. | | ||
| .oc-pr-xl | Adds larger right padding. | | ||
| .oc-px-xl | Adds larger left and right paddings. | | ||
| .oc-py-xl | Adds larger top and bottom paddings. | | ||
|
||
## XX-Large padding | ||
Add one of the following classes to add extra large spacing to block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-xxl | Adds extra larger padding to all sides of the element. | | ||
| .oc-pt-xxl | Adds extra larger top padding. | | ||
| .oc-pb-xxl | Adds extra larger bottom padding. | | ||
| .oc-pl-xxl | Adds extra larger left padding. | | ||
| .oc-pr-xxl | Adds extra larger right padding. | | ||
| .oc-px-xxl | Adds extra larger left and right paddings. | | ||
| .oc-py-xxl | Adds extra larger top and bottom paddings. | | ||
|
||
## Remove padding | ||
Add one of the following classes to remove padding from block elements. | ||
|
||
| Class | Description | | ||
| ----- | ----------- | | ||
| .oc-p-rm | Removes all paddings. | | ||
| .oc-pt-rm | Removes top padding. | | ||
| .oc-pb-rm | Removes bottom padding. | | ||
| .oc-pl-rm | Removes left padding. | | ||
| .oc-pr-rm | Removes right padding. | | ||
| .oc-px-rm | Removes left and right paddings. | | ||
| .oc-py-rm | Removes top and bottom paddings. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.