codecombat/app/templates/admin/design-elements-view.jade

477 lines
No EOL
13 KiB
Text

.well.container-fluid
h1 Bootstrap CSS
.row
.col-sm-6
.panel.panel-default
.panel-heading
a#tables.panel-title(href="#tables") Tables
.panel-body
mixin table-content
tr
th #
th First Name
th Last Name
th Username
tr
th 1
td Mark
td Otto
td @mdo
tr
th 2
td Jacob
td Thornton
td @fat
tr
th 3
td Larry
td the Bird
td @twitter
h3 Basic
table.table
+table-content
h3 Bordered
table.table.table-bordered
+table-content
h3 Striped
table.table.table-striped
+table-content
.col-sm-6
.panel.panel-default
.panel-heading
a#tables.panel-title(href="#tables") Tables
.panel-body
h3 Hover
table.table.table-hover
+table-content
h3 Condensed
table.table.table-condensed
+table-content
h3 Context
table.table
tr.active
td Active
tr.success
td Success
tr.info
td Info
tr.warning
td Warning
tr.danger
td Danger
.col-sm-3
.panel.panel-default
.panel-heading
a#headers.panel-title(href="#headers") Headers
.panel-body
h1 Header 1
small.spl secondary text
h2 Header 2
small.spl secondary text
h3 Header 3
small.spl secondary text
h4 Header 4
small.spl secondary text
h5 Header 5
small.spl secondary text
h6 Header 6
small.spl secondary text
.panel.panel-default
.panel-heading
a#user-input.panel-title(href="#user-input") User input
.panel-body
kbd ctrl + ,
.panel.panel-default
.panel-heading
a#horizontal-rule.panel-title(href="#horizontal-rule") Horizontal Rule
.panel-body
div Text above
hr
div Text below
.col-sm-3
.panel.panel-default
.panel-heading
a#forms.panel-title(href="#forms") Forms
.panel-body
h3 Default
.form
.form-group
label.control-label Input
input.form-control
.form-group
label.control-label Textarea
textarea.form-control
.help-block Help block
.form-group
label.control-label Select
select.form-control
option Option 1
option Option 2
.form-group
label Disabled
input.form-control(disabled=true)
.form-group.has-error
label.control-label Validation error
input.form-control
.form-group
label Large input
input.form-control.input-lg
.form-group
label Small input
input.form-control.input-sm
.col-sm-3
.panel.panel-default
.panel-heading
a#buttons.panel-title(href="#buttons") Buttons
.panel-body
div
button.btn.btn-default Default
span.spr
button.btn.btn-primary Primary
span.spr
button.btn.btn-success Success
span.spr
button.btn.btn-info Info
span.spr
button.btn.btn-warning Warning
span.spr
button.btn.btn-danger Danger
span.spr
button.btn.btn-default(disabled=true) Disabled
hr
div
button.btn.btn-default.btn-lg Large
span.spr
button.btn.btn-default Default
span.spr
button.btn.btn-default.btn-sm Small
span.spr
button.btn.btn-default.btn-xs Extra small
hr
div
button.btn.btn-default.btn-illustrated Default illustrated
span.spr
button.btn.btn-primary.btn-illustrated Primary illustrated
span.spr
button.btn.btn-success.btn-illustrated Success illustrated
span.spr
button.btn.btn-info.btn-illustrated Info illustrated
span.spr
button.btn.btn-warning.btn-illustrated Warning illustrated
span.spr
button.btn.btn-danger.btn-illustrated Danger illustrated
.panel.panel-default
.panel-heading
a#contextual-text.panel-title(href="#contextual-text") Contextual text
.panel-body
p.text-muted Muted text
p.text-primary Primary text
p.text-success Success text
p.text-info Info text
p.text-warning Warning text
p.text-danger Danger text
.col-sm-3
.panel.panel-default
.panel-heading
a#images.panel-title(href="#images") Images
.panel-body
div Rounded
img.img-rounded(style="width: 140px" src="/images/pages/contribute/tile_adventurer.png")
div Circle
img.img-circle(style="width: 140px" src="/images/pages/contribute/tile_adventurer.png")
div Thumbnail
img.img-thumbnail(style="width: 140px" src="/images/pages/contribute/tile_adventurer.png")
div Prize
img.img-prize(style="width: 140px" src="/images/pages/contribute/adventurer.png")
h1 Bootstrap Components
.row
.col-sm-3
.panel.panel-default
.panel-heading
a#dropdowns.panel-title(href="#dropdowns") Dropdowns
.panel-body
.btn-group
button.btn.btn-default.dropdown-toggle(data-toggle="dropdown") Dropdown Button
ul.dropdown-menu
li
a Action
li
a Another action
.panel.panel-default
.panel-heading
a#navs.panel-title(href="#navs") Navs
.panel-body
ul.nav.nav-tabs
li.active
a Home
li
a Profile
li
a Message
hr
ul.nav.nav-pills
li.active
a Home
li
a Profile
li
a Message
.panel.panel-default
.panel-heading
a#navbars.panel-title(href="#navbars") Navbars
.panel-body
nav.navbar.navbar-default
.container-fluid
.navbar-header
button.navbar-toggle.collapsed(data-toggle="collapse", data-target="#main-nav")
span.glyphicon.glyphicon-option-horizontal
a.navbar-brand Brand
.collapse.navbar-collapse#main-nav
ul.nav.navbar-nav
li.active
a Link
li
a Link
.panel.panel-default
.panel-heading
a#breadcrumbs.panel-title(href="#breadcrumbs") Breadcrumbs
.panel-body
ol.breadcrumb
li Home
li Library
li.active Data
.panel.panel-default
.panel-heading
a#labels.panel-title(href="#labels") Labels
.panel-body
span.label.label-default default
span.spr
span.label.label-primary primary
span.spr
span.label.label-success success
span.spr
span.label.label-info info
span.spr
span.label.label-warning warning
span.spr
span.label.label-danger danger
span.spr
span.label.label-banner banner
.col-sm-3
.panel.panel-default
.panel-heading
a#alerts.panel-title(href="#alerts") Alerts
.panel-body
.alert.alert-success Success
.alert.alert-info Info
.alert.alert-warning Warning
.alert.alert-danger Danger
.panel.panel-default
.panel-heading
a#progress-bars.panel-title(href="#progress-bars") Progress Bars
.panel-body
strong Default
.progress
.progress-bar(style="width: 50%")
strong Striped Active
.progress.progress-striped.active
.progress-bar(style="width: 50%")
strong Contextual
.progress
.progress-bar.progress-bar-success(style="width: 25%") Success
.progress-bar.progress-bar-info(style="width: 25%") Info
.progress-bar.progress-bar-warning(style="width: 25%") Warning
.progress-bar.progress-bar-danger(style="width: 25%") Danger
.col-sm-3
.panel.panel-default
.panel-heading
a#list-groups.panel-title(href="#list-groups") List Groups
.panel-body
ul.list-group
li.list-group-item List group item 1
li.list-group-item List group item 2
li.list-group-item List group item 3
.panel.panel-info
.panel-heading
.panel-title Info Panel w/Title
.panel-body And body
.panel-footer And footer
.panel.panel-primary
.panel-heading
.panel-title Primary Panel w/Title
.panel-body And body
.panel-footer And footer
.panel.panel-default
.panel-heading
.panel-title Default Panel w/Title
.panel-body And body
.panel-footer And footer
.col-sm-3
.panel.panel-success
.panel-heading
.panel-title Success Panel w/Title
.panel-body And body
.panel-footer And footer
.panel.panel-warning
.panel-heading
.panel-title warning Panel w/Title
.panel-body And body
.panel-footer And footer
.panel.panel-danger
.panel-heading
.panel-title Danger Panel w/Title
.panel-body And body
.panel-footer And footer
.col-sm-3
.panel.panel-default
.panel-heading
a#wells.panel-title(href="#wells") Wells
.panel-body
.well Well!
.well.well-lg Large well!
.well.well-sm Small well!
.well.well-parchment Parchment well
h1 Bootstrap JavaScript
.row
.col-sm-6
.panel.panel-default
.panel-heading
a#modals.panel-title(href="#modals") Default Modal
.panel-body(style="background: lightgrey")#modal-1
include /templates/core/modal-base
.col-sm-6
.panel.panel-default
.panel-heading
a.panel-title Plain Modal
.panel-body(style="background: lightgrey")#modal-2
include /templates/core/modal-base
.row
.col-sm-3
.panel.panel-default
.panel-heading
a#tooltips.panel-title(href="#tooltips") Tooltips
.panel-body
button#tooltip.btn.btn-default(title="tooltip text!", data-placement="right", data-trigger="click") Button w/Tooltip
.col-sm-3
.panel.panel-default
.panel-heading
a#popovers.panel-title(href="#popovers") Popovers
.panel-body
button#popover.btn.btn-default(title="Popover title" data-content="Popover content" data-trigger="click") Button w/Popover
h1 jQuery UI
.row
.col-sm-3
.panel.panel-default
.panel-heading
a#autocomplete.panel-title(href="#autocomplete") Autocomplete
.panel-body
input#tags
.col-sm-3
.panel.panel-default
.panel-heading
a#slider.panel-title(href="#slider") Slider
.panel-body
#slider-example
h1 Other
.row
.col-sm-3
.panel.panel-default
.panel-heading
a#gems.panel-title(href="#gems") Gems
.panel-body
.gem.gem-20
.gem.gem-25
.gem.gem-30
.gem.gem-40
.gem.gem-60
.col-sm-3
.panel.panel-default
.panel-heading
a#no-border-image.panel-title(href="#no-border-image") No Border Image
.panel-body