scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-30 11:41:19 +08:00
Code Issues Projects Releases Packages Wiki Activity

Destroyed Components (markdown)

Luka Murn 2018-06-02 09:16:02 +02:00
parent 0a20843433
commit 8e7a898bb5
1 changed files with 0 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
Components.md

@ -1,89 +0,0 @@
<a name="top"></a>
* [Button](#button)
* [Types](#button-types)
* [Order](#button-order)
* [Placement](#button-placement)
* [Responsiveness](#button-responsiveness)
* [Table](#table)
* [Column width](#column-width)
## Button
### Button types
#### Basic button
Used for secondary actions like _Cancel_ and toolbar actions like _Edit_ and _Export_.
|![Primary button examples](https://i.imgur.com/QJIzYZY.png)|
|-----------------------------------------------------------|
| State | Background | Border | Text |
| ------------------------------------------------------- | ------------ | --------- | --------- |
| ![Basic button normal](https://i.imgur.com/cAzmdss.png) | `#ffffff` | `#cccccc` | `#333333` |
| ![Basic button hover](https://i.imgur.com/Rmbp99Y.png) | `#e6e6e6` | `#adadad` | `#333333` |
| ![Basic button active](https://i.imgur.com/ovwnGi7.png) | `#d4d4d4` | `#8c8c8c` | `#333333` |
[⚡](#top)
#### Primary button
Used for calls to action like _Create_ and _Save_. There is usually only one primary button per component.
| ![Primary button examples](https://i.imgur.com/c2iFRS9.png) |
| ----------------------------------------------------------- |
| State | Background | Border | Text |
| --------------------------------------------------------- | ------------ | --------- | --------- |
| ![Primary button normal](https://i.imgur.com/J1OUO5x.png) | `#8fd13f` | `#83c730` | `#ffffff` |
| ![Primary button hover](https://i.imgur.com/QXRv5Ic.png) | `#83c730` | `#75b22b` | `#ffffff` |
| ![Primary button active](https://i.imgur.com/UhxWFLB.png) | `#5a8921` | `#4d751c` | `#ffffff` |
[⚡](#top)
### Button order
When two buttons are placed next to each other on modal windows or other components, primary buttons are on the left and basic buttons on the right.
| Left | Right |
| --------------------------------- | ----------------------------- |
| [![Primary button](https://i.imgur.com/LCBYQWQ.png)](#primary-button) | [![Basic button](https://i.imgur.com/bey7kaO.png)](#basic-button) |
[⚡](#top)
### Button placement
Buttons are almost always on the **right side**. They are on the left side only when:
* they are on a component wider than 800px and
* scroll together with their content.
![Button placement on modal window](https://i.imgur.com/tVxKwEu.png)
_Right button placement on modal window._
[⚡](#top)
![Button placement on wider scrollable element](https://i.imgur.com/vjPrZqA.png)
_Left button placement on protocol steps._
[⚡](#top)
### Button responsiveness
When screen is too narrow to display buttons properly, buttons lose their text, but **keep their icon**. If a button is without an icon, one gets assigned to it.
| ![Minimized buttons](https://i.imgur.com/9S4VxbR.png) |
| ----------------------------------------------------- |
[⚡](#top)
## Table
### Column width
When screen is wider than the table, there is a lot of extra padding that needs to be distributed among columns. Try to use a **library** for this, one that assigns extra padding to columns proportionally to their content. Also note:
#### Wide screens
* If column contains content, it gets extra padding (in addition to the padding it already has).
* If column contains actions, it gets no extra padding.
#### Narrow screens
* Entire table becomes horizontally scrollable.
* Extra padding is removed.
* Regular padding is reduced.
[⚡](#top)