diff --git a/Components.md b/Components.md deleted file mode 100644 index c9bd6bb..0000000 --- a/Components.md +++ /dev/null @@ -1,89 +0,0 @@ - -* [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) \ No newline at end of file