Document button secondary states. Update icons and color section
Describe hover, focus and active states for primary and secondary buttons. Organized the icons section in a table. Replaced images for icons so they are all the same size. Organized the color section in a table. Replaced the images with new ones so the table would have a more manageable size. Updated the values for some colors to show the $color-light shade. Remove commented sections Remove `db/schema.rb` Add db/schema.rb from origin/master Fix typos
Chris Peressini
Allison Whilden
|
|
@ -35,26 +35,15 @@ This is the typeface used for code blocks. GitLab uses the OS default font.
|
|||
## Icons
|
||||
GitLab uses Font Awesome icons throughout our interface.
|
||||
|
||||
|
||||
The trash icon is used for destructive actions that deletes information.
|
||||
|
||||
|
||||
The pencil icon is used for editing content such as comments.
|
||||
|
||||
|
||||
The bell icon is for notifications, such as Todos.
|
||||
|
||||
|
||||
The eye icon is for subscribing to updates. For example, you can subscribe to a label and get updated on issues with that label.
|
||||
|
||||
|
||||
The standard RSS icon is used for linking to RSS/atom feeds.
|
||||
|
||||
|
||||
An 'x' is used for closing UI elements such as dropdowns.
|
||||
|
||||
|
||||
A plus is used when creating new objects, such as issues, projects, etc.
|
||||
| | |
|
||||
| :-----------: | :---- |
|
||||
|  | The trash icon is used for destructive actions that deletes information. |
|
||||
|  | The pencil icon is used for editing content such as comments.|
|
||||
|  | The bell icon is for notifications, such as Todos. |
|
||||
|  | The eye icon is for subscribing to updates. For example, you can subscribe to a label and get updated on issues with that label. |
|
||||
|  | The standard RSS icon is used for linking to RSS/atom feeds. |
|
||||
|  | An 'x' is used for closing UI elements such as dropdowns. |
|
||||
|  | A plus is used when creating new objects, such as issues, projects, etc. |
|
||||
|
||||
> TODO: update this section, add more general guidance to icon usage and personality, etc.
|
||||
|
||||
|
|
@ -62,20 +51,13 @@ A plus is used when creating new objects, such as issues, projects, etc.
|
|||
|
||||
## Color
|
||||
|
||||
|
||||
Blue is used to highlight primary active elements (such as current tab), as well as other organization and managing commands.
|
||||
|
||||
|
||||
Green is for actions that create new objects.
|
||||
|
||||
|
||||
Orange is used for warnings
|
||||
|
||||
|
||||
Red is reserved for delete and other destructive commands
|
||||
|
||||
|
||||
Grey, and white (depending on context) is used for netral, secondary elements
|
||||
| | |
|
||||
| :------: | :------- |
|
||||
|  | Blue is used to highlight primary active elements (such as the current tab), as well as other organizational and managing commands.|
|
||||
|  | Green is for actions that create new objects. |
|
||||
|  | Orange is used for warnings |
|
||||
|  | Red is reserved for delete and other destructive commands |
|
||||
|  | Grey is used for neutral secondary elements. Depending on context, white is sometimes used instead. |
|
||||
|
||||
> TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage.
|
||||
|
||||
|
|
|
|||
|
|
@ -75,10 +75,29 @@ Text should be in sentence case, where only the first word is capitalized. "Crea
|
|||
> TODO: Rationalize this. Ensure that we still believe this.
|
||||
|
||||
### Colors
|
||||
Follow the color guidance on the [basics](basics.md#color) page. The default color treatment is the white/grey button.
|
||||
The default color treatment is the white/grey button. Follow the guidance on the [basics](basics.md#color) page to add meaningful color to a button.
|
||||
|
||||
### Secondary states
|
||||
|
||||
Primary buttons darken the color of their background and border for hover, focus and active states. An inner shadow is added to the active state to denote the button being pressed.
|
||||
|
||||
| Values | Info | Success | Warning | Danger |
|
||||
| :------ | :------: | :------: | :------: | :------: |
|
||||
| Background: `$color-light` <br> Border: `$border-color-light` |  |  |  |  |
|
||||
| Background: `$color-normal` <br> Border: `$border-color-normal` |  |  |  |  |
|
||||
| Background: `$color-dark` <br> Border: `$border-color-dark` |  |  |  |  |
|
||||
|
||||
Since secondary buttons only have a border on their resting state, their hover and focus states add a background color, which gets darkened on active.
|
||||
|
||||
| Values | Success Secondary | Close | Spam |
|
||||
| :------ | :------: | :------: | :------: |
|
||||
| Font: `$border-color-light` <br> Border: `$border-color-light` |  |  |  |
|
||||
| Background: `$color-light` <br> Border: `$border-color-light` |  |  |  |
|
||||
| Background: `$color-normal` <br> Border: `$border-color-normal` |  |  |  |
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Dropdowns
|
||||
|
||||
Dropdowns are used to allow users to choose one (or many) options from a list of options. If this list of options is more 20, there should generally be a way to search through and filter the options (see the complex filter dropdowns below.)
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1015 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 155 B After Width: | Height: | Size: 317 B |
|
Before Width: | Height: | Size: 225 B After Width: | Height: | Size: 501 B |
|
Before Width: | Height: | Size: 231 B After Width: | Height: | Size: 546 B |
|
Before Width: | Height: | Size: 259 B After Width: | Height: | Size: 543 B |
|
Before Width: | Height: | Size: 307 B After Width: | Height: | Size: 834 B |
|
Before Width: | Height: | Size: 348 B After Width: | Height: | Size: 760 B |
|
Before Width: | Height: | Size: 380 B After Width: | Height: | Size: 398 B |