297 lines
6.3 KiB
Text
297 lines
6.3 KiB
Text
- page_title "UI Development Kit", "Help"
|
|
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
|
|
|
|
.gitlab-ui-dev-kit
|
|
%h1 GitLab UI development kit
|
|
%p.light
|
|
Use page inspector in your browser to check element classes and structure
|
|
of examples below.
|
|
%hr
|
|
%ul
|
|
%li
|
|
= link_to 'Blocks', '#blocks'
|
|
%li
|
|
= link_to 'Lists', '#lists'
|
|
%li
|
|
= link_to 'Tables', '#tables'
|
|
%li
|
|
= link_to 'Nav', '#nav'
|
|
%li
|
|
= link_to 'Buttons', '#buttons'
|
|
%li
|
|
= link_to 'Panels', '#panels'
|
|
%li
|
|
= link_to 'Alerts', '#alerts'
|
|
%li
|
|
= link_to 'Forms', '#forms'
|
|
%li
|
|
= link_to 'Files', '#file'
|
|
%li
|
|
= link_to 'Markdown', '#markdown'
|
|
|
|
%h2#blocks Blocks
|
|
|
|
%h4
|
|
%code .gray-content-block
|
|
|
|
.gray-content-block.middle-block
|
|
%h4 Normal block inside content
|
|
= lorem
|
|
|
|
.gray-content-block.second-block
|
|
%h4 Second block
|
|
= lorem
|
|
|
|
|
|
%h4
|
|
%code .cover-block
|
|
%br
|
|
.cover-block
|
|
.avatar-holder
|
|
= image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
|
|
.cover-title
|
|
John Smith
|
|
|
|
.cover-desc
|
|
= lorem
|
|
|
|
.cover-controls
|
|
= link_to '#', class: 'btn btn-gray' do
|
|
= icon('pencil')
|
|
|
|
= link_to '#', class: 'btn btn-gray' do
|
|
= icon('rss')
|
|
|
|
%h2#lists Lists
|
|
|
|
%h4
|
|
%code .content-list
|
|
%ul.content-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
%h4
|
|
%code .well-list
|
|
%ul.well-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
%h4
|
|
%code .panel .well-list
|
|
|
|
.panel.panel-default
|
|
.panel-heading Your list
|
|
%ul.well-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
%h4
|
|
%code .bordered-list
|
|
%ul.bordered-list
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
%li
|
|
One item
|
|
|
|
|
|
|
|
%h2#tables Tables
|
|
|
|
.example
|
|
%table.table
|
|
%thead
|
|
%tr
|
|
%th #
|
|
%th First Name
|
|
%th Last Name
|
|
%th Username
|
|
%tbody
|
|
%tr
|
|
%td 1
|
|
%td Mark
|
|
%td Otto
|
|
%td @mdo
|
|
%tr
|
|
%td 2
|
|
%td Jacob
|
|
%td Thornton
|
|
%td @fat
|
|
%tr
|
|
%td 3
|
|
%td Larry
|
|
%td the Bird
|
|
%td @twitter
|
|
|
|
%h2#navs Navigation
|
|
|
|
%h4
|
|
%code .top-area
|
|
%p Holder for top page navigation. Includes navigation, search field, sorting and button
|
|
|
|
.example
|
|
.top-area
|
|
%ul.nav-links
|
|
%li.active
|
|
%a Open
|
|
%li
|
|
%a Closed
|
|
.nav-controls
|
|
= text_field_tag 'sample', nil, class: 'form-control'
|
|
.dropdown
|
|
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
|
|
%span Sort by name
|
|
%b.caret
|
|
%ul.dropdown-menu
|
|
%li
|
|
%a Sort by date
|
|
|
|
= link_to 'New issue', '#', class: 'btn btn-new'
|
|
|
|
%h4
|
|
%code .nav-links
|
|
%p Only nav links without button and search
|
|
.example
|
|
%ul.nav-links
|
|
%li.active
|
|
%a Open
|
|
%li
|
|
%a Closed
|
|
|
|
|
|
%h2#buttons Buttons
|
|
|
|
.example
|
|
%button.btn.btn-default{:type => "button"} Default
|
|
%button.btn.btn-gray{:type => "button"} Gray
|
|
%button.btn.btn-primary{:type => "button"} Primary
|
|
%button.btn.btn-success{:type => "button"} Success
|
|
%button.btn.btn-info{:type => "button"} Info
|
|
%button.btn.btn-warning{:type => "button"} Warning
|
|
%button.btn.btn-danger{:type => "button"} Danger
|
|
%button.btn.btn-link{:type => "button"} Link
|
|
|
|
%h2#panels Panels
|
|
|
|
.row
|
|
.col-md-6
|
|
.panel.panel-success
|
|
.panel-heading Success
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-primary
|
|
.panel-heading Primary
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-info
|
|
.panel-heading Info
|
|
.panel-body
|
|
= lorem
|
|
.col-md-6
|
|
.panel.panel-warning
|
|
.panel-heading Warning
|
|
.panel-body
|
|
= lorem
|
|
.panel.panel-danger
|
|
.panel-heading Danger
|
|
.panel-body
|
|
= lorem
|
|
|
|
%h2#alert Alerts
|
|
|
|
.row
|
|
.col-md-6
|
|
.alert.alert-success
|
|
= lorem
|
|
.alert.alert-primary
|
|
= lorem
|
|
.alert.alert-info
|
|
= lorem
|
|
.col-md-6
|
|
.alert.alert-warning
|
|
= lorem
|
|
.alert.alert-danger
|
|
= lorem
|
|
|
|
%h2#forms Forms
|
|
|
|
%h4
|
|
%code form.horizontal-form
|
|
|
|
%form.form-horizontal
|
|
.form-group
|
|
%label.col-sm-2.control-label{:for => "inputEmail3"} Email
|
|
.col-sm-10
|
|
%input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
|
|
.form-group
|
|
%label.col-sm-2.control-label{:for => "inputPassword3"} Password
|
|
.col-sm-10
|
|
%input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
|
|
.form-group
|
|
.col-sm-offset-2.col-sm-10
|
|
.checkbox
|
|
%label
|
|
%input{:type => "checkbox"}/
|
|
Remember me
|
|
.form-group
|
|
.col-sm-offset-2.col-sm-10
|
|
%button.btn.btn-default{:type => "submit"} Sign in
|
|
|
|
%h4
|
|
%code form
|
|
|
|
%form
|
|
.form-group
|
|
%label{:for => "exampleInputEmail1"} Email address
|
|
%input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
|
|
.form-group
|
|
%label{:for => "exampleInputPassword1"} Password
|
|
%input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
|
|
.checkbox
|
|
%label
|
|
%input{:type => "checkbox"}/
|
|
Remember me
|
|
%button.btn.btn-default{:type => "submit"} Sign in
|
|
|
|
%h2#file File
|
|
%h4
|
|
%code .file-holder
|
|
|
|
- blob = Snippet.new(content: "Wow\nSuch\nFile")
|
|
.example
|
|
.file-holder
|
|
.file-title
|
|
Awesome file
|
|
.file-actions
|
|
.btn-group
|
|
%a.btn Edit
|
|
%a.btn.btn-danger Remove
|
|
.file-contenta.code
|
|
= render 'shared/file_highlight', blob: blob
|
|
|
|
%h2#markdown Markdown
|
|
%h4
|
|
%code .md or .wiki and others
|
|
|
|
Markdown rendering has a bit different css and presented in next UI elements:
|
|
|
|
%ul
|
|
%li comment
|
|
%li issue, merge request description
|
|
%li wiki page
|
|
%li help page
|
|
|
|
You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("markdown", "markdown")}.
|