codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-04 17:19:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/bootstrap3'

Browse source
This commit is contained in:
Scott Erickson 2014-01-29 10:40:34 -08:00
commit f065406cf5
136 changed files with 8037 additions and 6688 deletions

15
app/lib/forms.coffee
View file

@ -23,16 +23,15 @@ module.exports.applyErrorsToForm = (el, errors) ->
prop = error.property
input = $("[name='#{prop}']", el)
if not input[0]
if not input.length
missingErrors.push(error)
continue
controls = input.closest('.controls')
controls.append($("<span class='help-inline error-inline'>#{message}</span>"))
group = controls.closest('.control-group')
group.addClass('error')
formGroup = input.closest('.form-group')
formGroup.addClass 'has-error'
formGroup.append($("<span class='help-block error-help-block'>#{message}</span>"))
return missingErrors
module.exports.clearFormAlerts = (el) ->
$('.error', el).removeClass('error')
$('.error-inline', el).remove()
$('.alert', el).remove()
$('.has-error', el).removeClass('has-error')
$('.alert', el).remove()
el.find('.help-block.error-help-block').remove()

3
app/lib/surface/SpriteBoss.coffee
View file

@ -163,7 +163,8 @@ module.exports = class SpriteBoss extends CocoClass
if sprite = @sprites[thang.id]
sprite.setThang thang # make sure Sprite has latest Thang
else
sprite = @addThangToSprites(thang) or updateOrder
sprite = @addThangToSprites(thang)
Backbone.Mediator.publish 'surface:new-thang-added', thang:thang, sprite:sprite
updateCache = updateCache or sprite.displayObject.parent is @spriteLayers["Obstacle"]
sprite.playSounds()
for thangID, sprite of @sprites

12
app/lib/world/names.coffee
View file

@ -124,16 +124,15 @@ module.exports.thangNames = thangNames =
"Skoggen"
"Treg"
"Goreball"
"Shmeal"
"Gert"
"Thabt"
"Iyert"
"Palt"
"Snortt"
"Kog"
]
"Ogre Munchkin F": [
"Iyert"
"Palt"
"Shmeal"
]
"Ogre M": [
"Krogg"
@ -144,12 +143,11 @@ module.exports.thangNames = thangNames =
"Mak Fod"
"Trung"
"Axe Ox"
]
"Ogre F": [
"Nareng"
"Morthrug"
"Glonc"
]
"Ogre F": [
]
"Ogre Brawler": [
"Grul'thock"

4
app/lib/world/rand.coffee
View file

@ -32,8 +32,4 @@ class Rand
rand2: (min, max) =>
min + @rand max - min
# return an array of numbers from 0 to n-1, shuffled
randArray: (n) =>
_.shuffle [0...n]
module.exports = Rand

49
app/lib/world/thang.coffee
View file

@ -4,44 +4,29 @@ ThangState = require './thang_state'
Rand = require './rand'
module.exports = class Thang
@className: "Thang"
@random = new Rand
@className: 'Thang'
@remainingThangNames: {}
# Random ordering for each sprite name
@ordering: (spriteName) ->
Thang.orders ?= {}
names = thangNames[spriteName]
if names
len = names.length
array = Thang.orders[spriteName]
unless array?
array = @random.randArray len
Thang.orders[spriteName] = array
else
array = []
array
@nextID: (spriteName) ->
@nextID: (spriteName, world) ->
Thang.lastIDNums ?= {}
names = thangNames[spriteName]
order = @ordering spriteName
if names and names.length
lastIDNum = Thang.lastIDNums[spriteName]
idNum = (if lastIDNum? then lastIDNum + 1 else 0)
Thang.lastIDNums[spriteName] = idNum
id = names[order[idNum % names.length]]
if idNum >= names.length
id += Math.floor(idNum / names.length) + 1
else
Thang.lastIDNums[spriteName] = if Thang.lastIDNums[spriteName]? then Thang.lastIDNums[spriteName] + 1 else 0
id = spriteName + (Thang.lastIDNums[spriteName] or '')
id
originals = thangNames[spriteName] or [spriteName]
remaining = Thang.remainingThangNames[spriteName]
remaining = Thang.remainingThangNames[spriteName] = originals.slice() unless remaining?.length
@resetThangIDs: -> Thang.lastIDNums = {}
baseName = remaining.splice(world.rand.rand(remaining.length), 1)[0]
i = 0
while true
name = if i then "#{baseName} #{i}" else baseName
extantThang = world.thangMap[name]
break unless extantThang
i++
name
@resetThangIDs: -> Thang.remainingThangNames = {}
constructor: (@world, @spriteName, @id) ->
@spriteName ?= @constructor.className
@id ?= @constructor.nextID @spriteName
@id ?= @constructor.nextID @spriteName, @world
@addTrackedProperties ['exists', 'boolean'] # TODO: move into Systems/Components, too?
#console.log "Generated #{@toString()}."

12
app/styles/about.sass
View file

@ -3,9 +3,19 @@
@import "bootstrap/variables"
.team-column
margin-left: 50px
padding-left: 0
ul.thumbnails
margin-left: 40px
padding: 0
li
list-style-type: none
padding-bottom: 20px
img
float: left
width: 150px
height: 150px

3
app/styles/account/profile.sass
View file

@ -4,7 +4,7 @@
i
margin-right: 5px
img.img-polaroid
img.img-thumbnail
margin: 20px 0
li
@ -12,3 +12,4 @@
ul
margin: 0
padding: 0

13
app/styles/account/settings.sass
View file

@ -1,20 +1,22 @@
#account-settings-view
.nav-tabs
margin-bottom: 0
.nav
margin-bottom: 10px
.tab-content
border: 1px solid #aaa
border-top-width: 0
padding: 20px
background: #eee
border-radius: 5px
#save-button
float: right
.thumbnails
text-align: center
div
.thumbnail
margin-bottom: 30px
margin-right: 20px
float: left
input.range
position: relative
@ -34,6 +36,9 @@
left: 10px
font-size: 12px
.form
max-width: 600px
#wizard-settings-tab-view
#color-settings
float: left

81
app/styles/base.sass
View file

@ -4,11 +4,39 @@
h1 h2 h3 h4
letter-spacing: 2px
#widget-bounds
display: none
#top-nav
a.navbar-brand
padding: 4px 20px 0px 20px
margin-left: -20px
.navbar a.brand
padding: 4px 20px 0px 20px
.navbuttontext, .fancy-select .trigger
font-family: 'Bangers', cursive
font-size: 20px
font-weight: 400
letter-spacing: 1px
.navbuttontext-user-name
max-width: 125px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
display: inline-block
padding: 0 5px 0 0
margin: 0
height: 18px
.nav.navbar-link-text, .nav.navbar-link-text > li > a
font-family: 'Bangers', cursive
font-weight: normal
font-size: 25px
letter-spacing: 2px
color: $white
&:hover
color: #f8e413
.navbar-link-text a:hover
background: darken($body-bg, 3%)
.main-content-area
position: relative
@ -18,28 +46,6 @@ h1 h2 h3 h4
padding: 14px 12px 5px 12px
@include box-sizing(border-box)
.navbuttontext, .fancy-select .trigger
font-family: 'Bangers', cursive
font-size: 20px
font-weight: normal
letter-spacing: 1px
.navbuttontext-user-name
max-width: 125px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
display: inline-block
padding: 0
margin: 0
height: 18px
.navbar .nav.navbar-link-text, .navbar .nav.navbar-link-text > li > a
font-family: 'Bangers', cursive
font-weight: normal
font-size: 25px
letter-spacing: 2px
.navbar .btn, .navbar .btn-group, .navbar .fancy-select
margin-top: 13px
@ -48,6 +54,9 @@ h1 h2 h3 h4
.nav-tabs > li
cursor: pointer
#top-nav .nav
margin-bottom: 0
#outer-content-wrapper
background: #8cc63f url(/images/pages/base/repeat-tile.png) top center
@ -55,14 +64,19 @@ h1 h2 h3 h4
#inner-content-wrapper
background: url(/images/pages/base/background_texture.png) top center no-repeat
.navbar-inner
.navbar
font-size: 25px
a:not(.btn)
line-height: 25px
.btn
font-size: 20px
padding: 4px 12px
.btn, .fancy-select
float: right
margin-left: 10px
line-height: 20px
select
opacity: 0
@ -110,6 +124,8 @@ h1 h2 h3 h4
color: #ffffff
cursor: pointer
margin: 0px 10px
&:hover
color: $white
a[data-toggle="modal"]
cursor: pointer
@ -135,13 +151,16 @@ a[data-toggle="modal"]
.selectable
cursor: pointer
.modal
.modal-dialog
padding: 5px
background: transparent url(/images/pages/base/modal_background.png)
background-size: 100% 100%
border: 0
@include box-shadow(0 0 0 #000)
.modal-content
@include box-shadow(none)
.modal-header
margin: 0 14px
padding: 8px 0
@ -197,7 +216,7 @@ a[data-toggle="modal"]
.progress
width: 50%
margin: 0 25%
.bar
.progress-bar
width: 100%
.modal
@ -214,7 +233,7 @@ table.table
background-color: white
.ui-autocomplete
z-index: $zindexAutocomplete
//z-index: $zindexAutocomplete
div.fancy-select
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
@ -248,4 +267,4 @@ div.fancy-select
.ui-slider
border: 1px solid black
.ui-slider-handle
border: 1px solid black !important
border: 1px solid black !important

48
app/styles/bootstrap-responsive.scss vendored
View file

@ -1,48 +0,0 @@
/*!
* Bootstrap Responsive v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
// Responsive
// For phone and tablet devices
// -------------------------------------------------------------
// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
// RESPONSIVE CLASSES
// ------------------
@import "bootstrap/responsive-utilities";
// MEDIA QUERIES
// ------------------
// Large desktops
@import "bootstrap/responsive-1200px-min";
// Tablets to regular desktops
@import "bootstrap/responsive-768px-979px";
// Phones to portrait tablets and narrow desktops
@import "bootstrap/responsive-767px-max";
// RESPONSIVE NAVBAR
// ------------------
// From 979px and below, show a button to toggle navbar contents
@import "bootstrap/responsive-navbar";

67
app/styles/bootstrap.scss vendored
View file

@ -1,66 +1 @@
/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
// CSS Reset
@import "bootstrap/reset";
// Grid system and page structure
@import "bootstrap/scaffolding";
@import "bootstrap/grid";
@import "bootstrap/layouts";
// Base CSS
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/forms";
@import "bootstrap/tables";
// Components: common
@import "bootstrap/sprites";
@import "bootstrap/dropdowns";
@import "bootstrap/wells";
@import "bootstrap/component-animations";
@import "bootstrap/close";
// Components: Buttons & Alerts
@import "bootstrap/buttons";
@import "bootstrap/button-groups";
@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in _buttons.scss
// Components: Nav
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
// Components: Popovers
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
// Components: Misc
@import "bootstrap/thumbnails";
@import "bootstrap/media";
@import "bootstrap/labels-badges";
@import "bootstrap/progress-bars";
@import "bootstrap/accordion";
@import "bootstrap/carousel";
@import "bootstrap/hero-unit";
// Addition: Bootswatch structural changes
@import "bootstrap/bootswatch";
// Utility classes
@import "bootstrap/utilities"; // Has to be last to override when necessary
@import "bootstrap/bootstrap";

104
app/styles/bootstrap/_alerts.scss
View file

@ -7,73 +7,61 @@
// -------------------------
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: $baseLineHeight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: $warningBackground;
border: 1px solid $warningBorder;
@include border-radius($baseBorderRadius);
}
.alert,
.alert h4 {
// Specified for the h4 to prevent conflicts of changing $headingsColor
color: $warningText;
}
.alert h4 {
margin: 0;
padding: $alert-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
border-radius: $alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: $baseLineHeight;
}
// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: ($alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
// -------------------------
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
background-color: $successBackground;
border-color: $successBorder;
color: $successText;
}
.alert-success h4 {
color: $successText;
}
.alert-danger,
.alert-error {
background-color: $errorBackground;
border-color: $errorBorder;
color: $errorText;
}
.alert-danger h4,
.alert-error h4 {
color: $errorText;
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
background-color: $infoBackground;
border-color: $infoBorder;
color: $infoText;
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-info h4 {
color: $infoText;
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

51
app/styles/bootstrap/_badges.scss Normal file
View file

@ -0,0 +1,51 @@
//
// Badges
// --------------------------------------------------
// Base classes
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: $font-size-small;
font-weight: $badge-font-weight;
color: $badge-color;
line-height: $badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: $badge-bg;
border-radius: $badge-border-radius;
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for badges in buttons
.btn & {
position: relative;
top: -1px;
}
}
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Account for counters in navs
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: $badge-active-color;
background-color: $badge-active-bg;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}

37
app/styles/bootstrap/_bootswatch.scss
View file

@ -14,11 +14,11 @@
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar {
.brand {
padding: 14px 20px 16px;
font-family: $headingsFontFamily;
font-family: $headings-font-family;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
@ -28,12 +28,12 @@
.nav > li > a {
padding: 16px 10px 14px;
font-family: $headingsFontFamily;
font-family: $headings-font-family;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.search-query {
border: 1px solid darken($linkColor, 10%);
border: 1px solid darken($link-color, 10%);
line-height: normal;
}
@ -49,23 +49,22 @@
.navbar-inverse {
.navbar-search .search-query {
color: $textColor;
color: $text-color;
}
}
@media (max-width: $navbarCollapseWidth) {
@media (max-width: $grid-float-breakpoint) {
.navbar .nav-collapse {
.nav li > a {
.navbar-nav li > a {
font-family: $headingsFontFamily;
font-family: $headings-font-family;
font-weight: normal;
color: $white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
&:hover {
background-color: #2B7CAC;
}
}
@ -93,7 +92,7 @@
.navbar-inverse .nav-collapse {
.nav li > a {
color: $navbarInverseLinkColor;
color: $navbar-inverse-color;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
@ -110,13 +109,13 @@
div.subnav {
font-family: $headingsFontFamily;
font-family: $headings-font-family;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}
div.subnav-fixed {
top: $navbarHeight + 1;
top: $navbar-height + 1;
}
@ -136,28 +135,30 @@ div.subnav-fixed {
}
}
//The following were oring buttonBackground
.btn-primary {
@include buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground);
@include button-background(lighten($btn-primary-bg, 5%), $btn-primary-bg);
}
.btn-info {
@include buttonBackground(lighten($btnInfoBackground, 5%), $btnInfoBackground);
@include button-background(lighten($btn-info-bg, 5%), $btn-info-bg);
}
.btn-success {
@include buttonBackground(lighten($btnSuccessBackground, 5%), $btnSuccessBackground);
@include button-background(lighten($btn-success-bg, 5%), $btn-success-bg);
}
.btn-warning {
@include buttonBackground(lighten($btnWarningBackground, 5%), $btnWarningBackground);
@include button-background(lighten($btn-warning-bg, 5%), $btn-warning-bg);
}
.btn-danger {
@include buttonBackground(lighten($btnDangerBackground, 5%), $btnDangerBackground);
@include button-background(lighten($btn-danger-bg, 5%), $btn-danger-bg);
}
.btn-inverse {
@include buttonBackground(lighten($btnInverseBackground, 5%), $btnInverseBackground);
@include button-background(lighten($btn-default-color, 5%), $btn-default-color);//this should be btn-inverse but I can't find it at the moment
}
// TABLES

17
app/styles/bootstrap/_breadcrumbs.scss
View file

@ -5,20 +5,19 @@
.breadcrumb {
padding: 8px 15px;
margin: 0 0 $baseLineHeight;
margin-bottom: $line-height-computed;
list-style: none;
background-color: #f5f5f5;
@include border-radius($baseBorderRadius);
background-color: $breadcrumb-bg;
border-radius: $border-radius-base;
> li {
display: inline-block;
@include ie7-inline-block();
text-shadow: 0 1px 0 $white;
> .divider {
+ li:before {
content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: #ccc;
color: $breadcrumb-color;
}
}
.active {
color: $grayLight;
> .active {
color: $breadcrumb-active-color;
}
}

306
app/styles/bootstrap/_button-groups.scss
View file

@ -2,90 +2,88 @@
// Button groups
// --------------------------------------------------
// Make the div behave like a button
.btn-group {
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
@include ie7-inline-block();
font-size: 0; // remove as part 1 of font-size inline-block hack
vertical-align: middle; // match .btn alignment given font-size hack above
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
@include ie7-restore-left-whitespace();
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
// Space out series of button groups
.btn-group + .btn-group {
margin-left: 5px;
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: $baseLineHeight / 2;
margin-bottom: $baseLineHeight / 2;
> .btn + .btn,
> .btn-group + .btn,
> .btn + .btn-group {
margin-left: 5px;
@include clearfix();
.btn-group {
float: left;
}
// Space out series of button groups
> .btn,
> .btn-group {
+ .btn,
+ .btn-group {
margin-left: 5px;
}
}
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
@include border-radius(0);
}
.btn-group > .btn + .btn {
margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack
}
// Reset fonts for other sizes
.btn-group > .btn-mini {
font-size: $fontSizeMini;
}
.btn-group > .btn-small {
font-size: $fontSizeSmall;
}
.btn-group > .btn-large {
font-size: $fontSizeLarge;
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
@include border-top-left-radius($baseBorderRadius);
@include border-bottom-left-radius($baseBorderRadius);
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
@include border-top-right-radius($baseBorderRadius);
@include border-bottom-right-radius($baseBorderRadius);
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {
margin-left: 0;
@include border-top-left-radius($borderRadiusLarge);
@include border-bottom-left-radius($borderRadiusLarge);
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
@include border-top-right-radius($borderRadiusLarge);
@include border-bottom-right-radius($borderRadiusLarge);
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}
// On hover/focus/active, bring the proper btn to front
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
@include border-left-radius(0);
}
// On active and open, don't show outline
@ -95,6 +93,14 @@
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
// Split button dropdowns
// ----------------------
@ -103,127 +109,119 @@
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
@include box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group.open {
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
@include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Keep the hover's background when dropdown is open
.btn.dropdown-toggle {
background-color: $btnBackgroundHighlight;
}
.btn-primary.dropdown-toggle {
background-color: $btnPrimaryBackgroundHighlight;
}
.btn-warning.dropdown-toggle {
background-color: $btnWarningBackgroundHighlight;
}
.btn-danger.dropdown-toggle {
background-color: $btnDangerBackgroundHighlight;
}
.btn-success.dropdown-toggle {
background-color: $btnSuccessBackgroundHighlight;
}
.btn-info.dropdown-toggle {
background-color: $btnInfoBackgroundHighlight;
}
.btn-inverse.dropdown-toggle {
background-color: $btnInverseBackgroundHighlight;
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
// Reposition the caret
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
// Carets in other button sizes
.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
.btn-lg .caret {
border-width: $caret-width-large $caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;
.dropup .btn-lg .caret {
border-width: 0 $caret-width-large $caret-width-large;
}
// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
.caret {
border-top-color: $white;
border-bottom-color: $white;
}
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
display: inline-block; // makes buttons only take up the width they need
@include ie7-inline-block();
> .btn,
> .btn-group,
> .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
@include clearfix();
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
display: block;
float: none;
max-width: 100%;
@include border-radius(0);
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: $border-radius-base;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: $border-radius-base;
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child {
@include border-radius($baseBorderRadius $baseBorderRadius 0 0);
.btn-group-vertical > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn:last-child {
@include border-radius(0 0 $baseBorderRadius $baseBorderRadius);
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
@include border-top-radius(0);
}
.btn-group-vertical > .btn-large:first-child {
@include border-radius($borderRadiusLarge $borderRadiusLarge 0 0);
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
}
.btn-group-vertical > .btn-large:last-child {
@include border-radius(0 0 $borderRadiusLarge $borderRadiusLarge);
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}

267
app/styles/bootstrap/_buttons.scss
View file

@ -6,109 +6,138 @@
// Base styles
// --------------------------------------------------
// Core
.btn {
display: inline-block;
@include ie7-inline-block();
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
line-height: $baseLineHeight;
font-weight: $btn-font-weight;
text-align: center;
vertical-align: middle;
cursor: pointer;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid $btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken($btnBorder, 10%);
@include border-radius($baseBorderRadius);
@include ie7-restore-left-whitespace(); // Give IE7 some love
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
white-space: nowrap;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
@include user-select(none);
// Hover/focus state
&:hover,
&:focus {
color: $grayDark;
text-decoration: none;
background-position: 0 -15px;
// transition is only when going to hover/focus, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
@include transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
@include tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
@include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
&:hover,
&:focus {
color: $btn-default-color;
text-decoration: none;
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
&:active,
&.active {
outline: 0;
background-image: none;
@include opacity(65);
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
@include opacity(.65);
@include box-shadow(none);
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Warning appears as orange
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
// Success appears as green
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: $link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
@include box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: underline;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $btn-link-disabled-color;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
padding: $paddingLarge;
font-size: $fontSizeLarge;
@include border-radius($borderRadiusLarge);
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
margin-top: 4px;
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
}
// Small
.btn-small {
padding: $paddingSmall;
font-size: $fontSizeSmall;
@include border-radius($borderRadiusSmall);
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
padding: $paddingMini;
font-size: $fontSizeMini;
@include border-radius($borderRadiusSmall);
.btn-xs {
@include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small);
}
// Block button
// -------------------------
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
@include box-sizing(border-box);
}
// Vertically space out multiple block buttons
@ -124,105 +153,3 @@ input[type="button"] {
width: 100%;
}
}
// Alternate buttons
// --------------------------------------------------
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn-primary {
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
}
// Inverse appears as dark gray
.btn-inverse {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
}
// Cross-browser Jank
// --------------------------------------------------
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
@include box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: $linkColor;
@include border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
color: $linkColorHover;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: $grayDark;
text-decoration: none;
}

202
app/styles/bootstrap/_carousel.scss
View file

@ -3,29 +3,25 @@
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
margin-bottom: $baseLineHeight;
line-height: 1;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
position: relative;
}
.carousel-inner {
> .item {
display: none;
position: relative;
@include transition(.6s ease-in-out left);
// Account for jankitude on images
// Account for jankitude on images
> img,
> a > img {
display: block;
@include img-responsive();
line-height: 1;
}
}
@ -70,89 +66,167 @@
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: $white;
top: 0;
left: 0;
bottom: 0;
width: $carousel-control-width;
@include opacity($carousel-control-opacity);
font-size: $carousel-control-font-size;
color: $carousel-control-color;
text-align: center;
background: $grayDarker;
border: 3px solid $white;
@include border-radius(23px);
@include opacity(50);
text-shadow: $carousel-text-shadow;
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// we can't have this transition here
// because webkit cancels the carousel
// animation if you trip this while
// in the middle of another animation
// ;_;
// .transition(opacity .2s linear);
// Reposition the right one
// Set gradients for backgrounds
&.left {
@include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 15px;
right: 0;
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
color: $white;
outline: none;
color: $carousel-control-color;
text-decoration: none;
@include opacity(90);
@include opacity(.9);
}
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Carousel indicator pips
// -----------------------------
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: block;
float: left;
width: 10px;
display: inline-block;
width: 10px;
height: 10px;
margin-left: 5px;
margin: 1px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255,255,255,.25);
border-radius: 5px;
border: 1px solid $carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
}
.active {
background-color: #fff;
margin: 0;
width: 12px;
height: 12px;
background-color: $carousel-indicator-active-bg;
}
}
// Caption for text below images
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
background: $grayDark;
background: rgba(0,0,0,.75);
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
text-shadow: $carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
.carousel-caption h4,
.carousel-caption p {
color: $white;
line-height: $baseLineHeight;
}
.carousel-caption h4 {
margin: 0 0 5px;
}
.carousel-caption p {
margin-bottom: 0;
// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicons-chevron-left,
.glyphicons-chevron-right,
.icon-prev,
.icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}

19
app/styles/bootstrap/_close.scss
View file

@ -5,19 +5,22 @@
.close {
float: right;
font-size: 20px;
font-weight: bold;
line-height: $baseLineHeight;
color: $black;
text-shadow: 0 1px 0 rgba(255,255,255,1);
@include opacity(20);
font-size: ($font-size-base * 1.5);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
@include opacity(.2);
&:hover,
&:focus {
color: $black;
color: $close-color;
text-decoration: none;
cursor: pointer;
@include opacity(40);
@include opacity(.5);
}
// [converter] extracted button& to button.close
}
// Additional properties for button version

48
app/styles/bootstrap/_code.scss
View file

@ -1,61 +1,53 @@
//
// Code (inline and blocK)
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
pre {
padding: 0 3px 2px;
@include font-family-monospace;
font-size: $baseFontSize - 2;
color: $grayDark;
@include border-radius(3px);
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
font-size: 90%;
color: $code-color;
background-color: $code-bg;
white-space: nowrap;
border-radius: $border-radius-base;
}
// Blocks of code
pre {
display: block;
padding: ($baseLineHeight - 1) / 2;
margin: 0 0 $baseLineHeight / 2;
font-size: $baseFontSize - 1; // 14px to 13px
line-height: $baseLineHeight;
padding: (($line-height-computed - 1) / 2);
margin: 0 0 ($line-height-computed / 2);
font-size: ($font-size-base - 1); // 14px to 13px
line-height: $line-height-base;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
@include border-radius($baseBorderRadius);
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: $baseLineHeight;
}
color: $pre-color;
background-color: $pre-bg;
border: 1px solid $pre-border-color;
border-radius: $border-radius-base;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

13
app/styles/bootstrap/_component-animations.scss
View file

@ -2,6 +2,10 @@
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
.fade {
opacity: 0;
@ -12,11 +16,14 @@
}
.collapse {
display: none;
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition(height .35s ease);
&.in {
height: auto;
}
}

269
app/styles/bootstrap/_dropdowns.scss
View file

@ -3,62 +3,47 @@
// --------------------------------------------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle {
// The caret makes the toggle a bit too tall in IE7
*margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid $black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-left: 2px;
vertical-align: middle;
border-top: $caret-width-base solid;
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
}
// Place the caret
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
// The dropdown wrapper (div)
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindexDropdown;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: $dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid $dropdownBorder;
*border-right-width: 2px;
*border-bottom-width: 2px;
@include border-radius(6px);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
font-size: $font-size-base;
background-color: $dropdown-bg;
border: 1px solid $dropdown-fallback-border; // IE8 fallback
border: 1px solid $dropdown-border;
border-radius: $border-radius-base;
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
&.pull-right {
@ -68,7 +53,7 @@
// Dividers (basically an hr) within the dropdown
.divider {
@include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
@ -77,81 +62,106 @@
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $baseLineHeight;
color: $dropdownLinkColor;
white-space: nowrap;
line-height: $line-height-base;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: $dropdownLinkColorHover;
@include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
}
// Active state
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: $dropdownLinkColorActive;
text-decoration: none;
outline: 0;
@include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
}
// Disabled state
// --------------
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: $grayLight;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
cursor: default;
}
// Open state for the dropdown
// ---------------------------
.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: $zindexDropdown;
& > .dropdown-menu {
display: block;
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: $dropdown-link-hover-color;
background-color: $dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: $dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: $dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
cursor: not-allowed;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: $font-size-small;
line-height: $line-height-base;
color: $dropdown-header-color;
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: $zindex-dropdown - 10;
}
// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid $black;
border-bottom: $caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
@ -162,76 +172,17 @@
}
}
// Sub menus
// ---------------------------
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
@include border-radius(0 6px 6px 6px);
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
@include border-radius(5px 5px 5px 0);
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken($dropdownBackground, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: $dropdownLinkColorHover;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
@include border-radius(6px 0 6px 6px);
@media (min-width: $grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
right: 0;
left: auto;
}
}
}
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Typeahead
// ---------
.typeahead {
z-index: 1051;
margin-top: 2px; // give it some space to breathe
@include border-radius($baseBorderRadius);
}

833
app/styles/bootstrap/_forms.scss
View file

@ -3,13 +3,9 @@
// --------------------------------------------------
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin: 0 0 $baseLineHeight;
}
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
@ -17,153 +13,43 @@ fieldset {
border: 0;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: $baseLineHeight;
font-size: $baseFontSize * 1.5;
line-height: $baseLineHeight * 2;
color: $grayDark;
margin-bottom: $line-height-computed;
font-size: ($font-size-base * 1.5);
line-height: inherit;
color: $legend-color;
border: 0;
border-bottom: 1px solid #e5e5e5;
// Small
small {
font-size: $baseLineHeight * .75;
color: $grayLight;
}
border-bottom: 1px solid $legend-border-color;
}
// Set font for forms
label,
input,
button,
select,
textarea {
@include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
label {
display: block;
margin-bottom: 5px;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: $baseLineHeight;
padding: 4px 6px;
margin-bottom: $baseLineHeight / 2;;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $gray;
@include border-radius($inputBorderRadius);
vertical-align: middle;
margin-bottom: 5px;
font-weight: bold;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: $inputBackground;
border: 1px solid $inputBorder;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition(border linear .2s, box-shadow linear .2s);
// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
}
// Normalize form controls
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
@include box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
*margin-top: 0; /* IE7 */
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: $inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid $inputBorder;
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
display: block;
}
// Make multiple select elements height not fixed
@ -172,518 +58,317 @@ select[size] {
height: auto;
}
// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
select optgroup {
font-size: inherit;
font-style: inherit;
font-family: inherit;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@include tab-focus();
}
// Uneditable inputs
// -------------------------
// Make uneditable inputs look inactive
.uneditable-input,
.uneditable-textarea {
color: $grayLight;
background-color: darken($inputBackground, 1%);
border-color: $inputBorder;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
// Fix for Chrome number input
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
// See https://github.com/twbs/bootstrap/issues/8350 for more.
input[type="number"] {
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
height: auto;
}
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
white-space: nowrap;
// Adjust output element
output {
display: block;
padding-top: ($padding-base-vertical + 1);
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
vertical-align: middle;
}
// Make uneditable textareas behave like a textarea
.uneditable-textarea {
width: auto;
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
.form-control {
display: block;
width: 100%;
height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
vertical-align: middle;
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid $input-border;
border-radius: $input-border-radius;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
//
// Placeholder text gets special styles because when browsers invalidate entire
// lines if it doesn't understand a selector/
@include placeholder();
// Disabled and read-only inputs
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: $input-bg-disabled;
}
// [converter] extracted textarea& to textarea.form-control
}
// Reset height for `textarea`s
textarea.form-control {
height: auto;
}
// Placeholder
// -------------------------
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
@include placeholder();
.form-group {
margin-bottom: 15px;
}
// CHECKBOXES & RADIOS
// -------------------
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
min-height: $baseLineHeight; // clear the floating input if there is no label text
display: block;
min-height: $line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
label {
display: inline;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-top: 5px;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// INPUT SIZES
// -----------
// General classes for quick sizes
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
// Redeclare since the fluid row class is more specific
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
float: none;
margin-left: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
display: inline-block;
}
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
@include grid-input($gridColumnWidth, $gridGutterWidth);
// Control row for multiple inputs per line
.controls-row {
@include clearfix(); // Clear the float from controls
}
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"],
// Redeclare the fluid grid collapse since we undo the float for inputs
.row-fluid .controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: $inputDisabledBackground;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
// FORM FIELD FEEDBACK STATES
// --------------------------
// Warning
.control-group.warning {
@include formFieldState($warningText, $warningText, $warningBackground);
}
// Error
.control-group.error {
@include formFieldState($errorText, $errorText, $errorBackground);
}
// Success
.control-group.success {
@include formFieldState($successText, $successText, $successBackground);
}
// Info
.control-group.info {
@include formFieldState($infoText, $infoText, $infoBackground);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
}
}
// Form control sizing
@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
// FORM ACTIONS
// ------------
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.form-actions {
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
margin-top: $baseLineHeight;
margin-bottom: $baseLineHeight;
background-color: $formActionsBackground;
border-top: 1px solid #e5e5e5;
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
// Warning
.has-warning {
@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}
// Error
.has-error {
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
// Success
.has-success {
@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
// HELP TEXT
// ---------
.help-block,
.help-inline {
color: lighten($textColor, 15%); // lighten the text some for contrast
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-bottom: $baseLineHeight / 2;
}
.help-inline {
display: inline-block;
@include ie7-inline-block();
vertical-align: middle;
padding-left: 5px;
margin-top: 5px;
margin-bottom: 10px;
color: lighten($text-color, 25%); // lighten the text some for contrast
}
// INPUT GROUPS
// ------------
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: $baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.form-inline {
// Reset the white space collapse hack
input,
select,
.uneditable-input,
.dropdown-menu,
.popover {
font-size: $baseFontSize;
}
// Kick in the inline
@media (min-width: $screen-sm) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
input,
select,
.uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
vertical-align: top;
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
}
// Override `width: 100%;` when not within a `.form-group`
select.form-control {
width: auto;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
.add-on {
display: inline-block;
width: auto;
height: $baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: $baseFontSize;
font-weight: normal;
line-height: $baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 $white;
background-color: $grayLighter;
border: 1px solid #ccc;
}
.add-on,
.btn,
.btn-group > .dropdown-toggle {
vertical-align: top;
@include border-radius(0);
}
.active {
background-color: lighten($green, 30);
border-color: $green;
}
}
.input-prepend {
.add-on,
.btn {
margin-right: -1px;
}
.add-on:first-child,
.btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
}
}
.input-append {
input,
select,
.uneditable-input {
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+ .btn-group .btn:last-child {
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
}
.add-on,
.btn,
.btn-group {
margin-left: -1px;
}
.add-on:last-child,
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
@include border-radius(0);
+ .btn-group .btn {
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
}
.btn-group:first-child {
margin-left: 0;
}
}
// SEARCH FORM
// -----------
input.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs
@include border-radius(15px);
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
@include border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
@include border-radius(14px 0 0 14px);
}
.form-search .input-append .btn {
@include border-radius(0 14px 14px 0);
}
.form-search .input-prepend .search-query {
@include border-radius(0 14px 14px 0);
}
.form-search .input-prepend .btn {
@include border-radius(14px 0 0 14px);
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-search,
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
@include ie7-inline-block();
margin-bottom: 0;
vertical-align: middle;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 3px;
margin-left: 0;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: $baseLineHeight / 2;
}
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: $baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles
// --------------------------
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: $baseLineHeight;
@include clearfix();
}
// Float the labels left
.control-label {
float: left;
width: $horizontalComponentOffset - 20;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
*padding-left: 20px;
margin-left: $horizontalComponentOffset;
*margin-left: 0;
&:first-child {
*padding-left: $horizontalComponentOffset;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: ($padding-base-vertical + 1); // Default padding plus a border
}
// And apply it only to .help-block instances that follow a form control
input,
select,
textarea,
.uneditable-input,
.input-prepend,
.input-append {
+ .help-block {
margin-top: $baseLineHeight / 2;
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: $line-height-computed + ($padding-base-vertical + 1);
}
// Make form groups behave like rows
.form-group {
@include make-row();
}
.form-control-static {
padding-top: ($padding-base-vertical + 1);
}
// Only right align form labels here when the columns stop stacking
@media (min-width: $screen-sm-min) {
.control-label {
text-align: right;
}
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: $horizontalComponentOffset;
}
}

237
app/styles/bootstrap/_glyphicons.scss Normal file
View file

@ -0,0 +1,237 @@
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular'), '#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular')) format('svg');
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:empty {
width: 1em;
}
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }

84
app/styles/bootstrap/_grid.scss
View file

@ -2,20 +2,78 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
@include container-fixed();
// Fixed (940px)
@include grid-core($gridColumnWidth, $gridGutterWidth);
// Fluid (940px)
@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
// Reset utility classes due to specificity
[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
@media (min-width: $screen-sm) {
width: $container-sm;
}
@media (min-width: $screen-md) {
width: $container-md;
}
@media (min-width: $screen-lg-min) {
width: $container-lg;
}
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
// mobile first defaults
.row {
@include make-row();
}
// Common styles for small and large grid columns
@include make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid-columns-float(xs);
@include make-grid($grid-columns, xs, width);
@include make-grid($grid-columns, xs, pull);
@include make-grid($grid-columns, xs, push);
@include make-grid($grid-columns, xs, offset);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-grid-columns-float(sm);
@include make-grid($grid-columns, sm, width);
@include make-grid($grid-columns, sm, pull);
@include make-grid($grid-columns, sm, push);
@include make-grid($grid-columns, sm, offset);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
@include make-grid-columns-float(md);
@include make-grid($grid-columns, md, width);
@include make-grid($grid-columns, md, pull);
@include make-grid($grid-columns, md, push);
@include make-grid($grid-columns, md, offset);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
@include make-grid-columns-float(lg);
@include make-grid($grid-columns, lg, width);
@include make-grid($grid-columns, lg, pull);
@include make-grid($grid-columns, lg, push);
@include make-grid($grid-columns, lg, offset);
}

136
app/styles/bootstrap/_input-groups.scss Normal file
View file

@ -0,0 +1,136 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
width: 100%;
margin-bottom: 0;
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { @extend .input-lg; }
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { @extend .input-sm; }
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
font-weight: normal;
line-height: 1;
color: $input-color;
text-align: center;
background-color: $input-group-addon-bg;
border: 1px solid $input-group-addon-border-color;
border-radius: $border-radius-base;
// Sizing
&.input-sm {
padding: $padding-small-vertical $padding-small-horizontal;
font-size: $font-size-small;
border-radius: $border-radius-small;
}
&.input-lg {
padding: $padding-large-vertical $padding-large-horizontal;
font-size: $font-size-large;
border-radius: $border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
@include border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
white-space: nowrap;
// Negative margin to only have a 1px border between the two
&:first-child > .btn {
margin-right: -1px;
}
&:last-child > .btn {
margin-left: -1px;
}
}
.input-group-btn > .btn {
position: relative;
// Jankily prevent input button groups from wrapping
+ .btn {
margin-left: -4px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}

46
app/styles/bootstrap/_jumbotron.scss Normal file
View file

@ -0,0 +1,46 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: $jumbotron-padding;
margin-bottom: $jumbotron-padding;
font-size: $jumbotron-font-size;
font-weight: 200;
line-height: ($line-height-base * 1.5);
color: $jumbotron-color;
background-color: $jumbotron-bg;
h1,
.h1 {
line-height: 1;
color: $jumbotron-heading-color;
}
p {
line-height: 1.4;
}
.container & {
border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
}
.container {
max-width: 100%;
}
@media screen and (min-width: $screen-sm-min) {
padding-top: ($jumbotron-padding * 1.6);
padding-bottom: ($jumbotron-padding * 1.6);
.container & {
padding-left: ($jumbotron-padding * 2);
padding-right: ($jumbotron-padding * 2);
}
h1,
.h1 {
font-size: ($font-size-base * 4.5);
}
}
}

64
app/styles/bootstrap/_labels.scss Normal file
View file

@ -0,0 +1,64 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: $label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: $label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
// Quick fix for labels in buttons
.btn & {
position: relative;
top: -1px;
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
@include label-variant($label-default-bg);
}
.label-primary {
@include label-variant($label-primary-bg);
}
.label-success {
@include label-variant($label-success-bg);
}
.label-info {
@include label-variant($label-info-bg);
}
.label-warning {
@include label-variant($label-warning-bg);
}
.label-danger {
@include label-variant($label-danger-bg);
}

88
app/styles/bootstrap/_list-group.scss Normal file
View file

@ -0,0 +1,88 @@
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
// -------------------------
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: $list-group-bg;
border: 1px solid $list-group-border;
// Round the first and last items
&:first-child {
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
}
// Linked list items
a.list-group-item {
color: $list-group-link-color;
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
background-color: $list-group-hover-bg;
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: lighten($list-group-active-bg, 40%);
}
}
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

15
app/styles/bootstrap/_media.scss
View file

@ -10,7 +10,6 @@
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
@ -37,11 +36,13 @@
// Media image alignment
// -------------------------
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
.media {
> .pull-left {
margin-right: 10px;
}
> .pull-right {
margin-left: 10px;
}
}
@ -50,6 +51,6 @@
// Undo default ul/ol styles
.media-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}

1064
app/styles/bootstrap/_mixins.scss
View file

File diff suppressed because it is too large Load diff

146
app/styles/bootstrap/_modals.scss
View file

@ -2,81 +2,102 @@
// Modals
// --------------------------------------------------
// Background
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-background;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
@include translate(0, -25%);
@include transition-transform(0.3s ease-out);
}
&.in .modal-dialog { @include translate(0, 0)}
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
z-index: ($zindex-modal-background + 10);
}
// Actual modal
.modal-content {
position: relative;
background-color: $modal-content-bg;
border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid $modal-content-border-color;
border-radius: $border-radius-large;
@include box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindexModalBackdrop;
background-color: $black;
z-index: ($zindex-modal-background - 10);
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.fade { @include opacity(0); }
&.in { @include opacity(.5); }
}
.modal-backdrop,
.modal-backdrop.fade.in {
@include opacity(80);
}
// Base modal
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: $zindexModal;
width: 560px;
margin-left: -280px;
background-color: $white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
@include border-radius(6px);
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
&.fade {
@include transition(opacity .3s linear, top .3s ease-out);
top: -25%;
}
&.fade.in { top: 10%; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
// Close icon
.close { margin-top: 2px; }
// Heading
h3 {
margin: 0;
line-height: 30px;
}
padding: $modal-title-padding;
border-bottom: 1px solid $modal-header-border-color;
min-height: ($modal-title-padding + $modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
// Body (where all modal content resides)
// Title text within header
.modal-title {
margin: 0;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
// Remove bottom margin if need be
.modal-form {
margin-bottom: 0;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
margin-top: 15px;
padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
@include border-radius(0 0 6px 6px);
@include box-shadow(inset 0 1px 0 $white);
border-top: 1px solid $modal-footer-border-color;
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
@ -93,3 +114,16 @@
margin-left: 0;
}
}
// Scale up the modal
@media screen and (min-width: $screen-sm-min) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
@include box-shadow(0 5px 15px rgba(0,0,0,.5));
}
}

967
app/styles/bootstrap/_navbar.scss
View file

File diff suppressed because it is too large Load diff

598
app/styles/bootstrap/_navs.scss
View file

@ -3,407 +3,253 @@
// --------------------------------------------------
// BASE CLASS
// ----------
// Base class
// --------------------------------------------------
.nav {
margin-left: 0;
margin-bottom: $baseLineHeight;
list-style: none;
}
// Make links block level
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: $grayLighter;
}
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
max-width: none;
}
// Redeclare pull classes because of specifity
.nav > .pull-right {
float: right;
}
// Nav headers (for dropdowns and lists)
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: $baseLineHeight;
color: $grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: $white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: $linkColor;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
@include nav-divider();
}
// TABS AND PILLS
// -------------
// Common styles
.nav-tabs,
.nav-pills {
padding-left: 0; // Override default ul/ol
list-style: none;
@include clearfix();
}
.nav-tabs > li,
.nav-pills > li {
float: left;
}
.nav-tabs > li > a,
.nav-pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: $nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
background-color: $nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: $nav-disabled-link-color;
&:hover,
&:focus {
color: $nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: $nav-link-hover-bg;
border-color: $link-color;
}
}
// Nav dividers (deprecated with v3.0.1)
//
// This should have been removed in v3 with the dropping of `.nav-list`, but
// we missed it. We don't currently support this anywhere, but in the interest
// of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider {
@include nav-divider();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// TABS
// ----
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: $baseLineHeight;
border: 1px solid transparent;
@include border-radius(4px 4px 0 0);
&:hover,
&:focus {
border-color: $grayLighter $grayLighter #ddd;
border-bottom: 1px solid $nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
// Actual tabs (as links)
> a {
margin-right: 2px;
line-height: $line-height-base;
border: 1px solid transparent;
border-radius: $border-radius-base $border-radius-base 0 0;
&:hover {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
}
// Active state, and it's :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border: 1px solid $nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
@extend .nav-justified;
@extend .nav-tabs-justified;
}
}
// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: $gray;
background-color: $bodyBackground;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
// PILLS
// -----
// Links rendered as pills
.nav-pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
@include border-radius(5px);
}
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: $white;
background-color: $linkColor;
}
// STACKED NAV
// -----------
// Stacked tabs and pills
.nav-stacked > li {
float: none;
}
.nav-stacked > li > a {
margin-right: 0; // no need for the gap between nav items
}
// Tabs
.nav-tabs.nav-stacked {
border-bottom: 0;
}
.nav-tabs.nav-stacked > li > a {
border: 1px solid #ddd;
@include border-radius(0);
}
.nav-tabs.nav-stacked > li:first-child > a {
@include border-top-radius(4px);
}
.nav-tabs.nav-stacked > li:last-child > a {
@include border-bottom-radius(4px);
}
.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd;
z-index: 2;
}
// Pills
.nav-pills.nav-stacked > li > a {
margin-bottom: 3px;
}
.nav-pills.nav-stacked > li:last-child > a {
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
}
// DROPDOWNS
// ---------
.nav-tabs .dropdown-menu {
@include border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
}
.nav-pills .dropdown-menu {
@include border-radius(6px); // make rounded corners match the pills
}
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav .dropdown-toggle .caret {
border-top-color: $linkColor;
border-bottom-color: $linkColor;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: $linkColorHover;
border-bottom-color: $linkColorHover;
}
/* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret {
margin-top: 8px;
}
.nav-pills {
> li {
float: left;
// Active dropdown links
// -------------------------
.nav .active .dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.nav-tabs .active .dropdown-toggle .caret {
border-top-color: $gray;
border-bottom-color: $gray;
}
// Links rendered as pills
> a {
border-radius: $nav-pills-border-radius;
}
+ li {
margin-left: 2px;
}
// Active:hover/:focus dropdown links
// -------------------------
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: $white;
background-color: $grayLight;
border-color: $grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
border-color: $grayLight;
}
// TABBABLE
// --------
// COMMON STYLES
// -------------
// Clear any floats
.tabbable {
@include clearfix();
}
.tab-content {
overflow: auto; // prevent content from running below tabs
}
// Remove border on bottom, left, right
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// BOTTOM
// ------
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
@include border-radius(0 0 4px 4px);
&:hover,
&:focus {
border-bottom-color: transparent;
border-top-color: #ddd;
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: $nav-pills-active-link-hover-color;
background-color: $nav-pills-active-link-hover-bg;
}
}
}
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
// LEFT & RIGHT
// ------------
// Common styles
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
// Tabs on the left
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
@include border-radius(4px 0 0 4px);
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: $grayLighter #ddd $grayLighter $grayLighter;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: $white;
}
// Tabs on the right
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
@include border-radius(0 4px 4px 0);
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: $grayLighter $grayLighter $grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: $white;
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
// Nav variations
// --------------------------------------------------
// DISABLED STATES
// ---------------
#contribute-nav {
padding-left: 35;
>li {
>a {
padding: 5px 0;
&:hover {
background: none;
}
}
}
}
// Gray out text
.nav > .disabled > a {
color: $grayLight;
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
> a {
text-align: center;
margin-bottom: 5px;
}
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: $screen-sm-min) {
> li {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
// Nuke hover/focus effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
cursor: default;
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
border-bottom: 0;
> li > a {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: $border-radius-base;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid $nav-tabs-justified-link-border-color;
}
@media (min-width: $screen-sm-min) {
> li > a {
border-bottom: 1px solid $nav-tabs-justified-link-border-color;
border-radius: $border-radius-base $border-radius-base 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: $nav-tabs-justified-active-link-border-color;
}
}
}
// Tabbable tabs
// -------------------------
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
// Dropdowns
// -------------------------
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}

406
app/styles/bootstrap/_normalize.scss Normal file
View file

@ -0,0 +1,406 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// Correct `inline-block` display not defined in IE 8/9.
//
audio,
canvas,
video {
display: inline-block;
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address `[hidden]` styling not present in IE 8/9.
// Hide the `template` element in IE, Safari, and Firefox < 22.
//
[hidden],
template {
display: none;
}
// ==========================================================================
// Base
// ==========================================================================
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// ==========================================================================
// Links
// ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background: transparent;
}
//
// Address `outline` inconsistency between Chrome and other browsers.
//
a:focus {
outline: thin dotted;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// ==========================================================================
// Typography
// ==========================================================================
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Correct font family set oddly in Safari 5 and Chrome.
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
//
// Improve readability of pre-formatted text in all browsers.
//
pre {
white-space: pre-wrap;
}
//
// Set consistent quote types.
//
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// ==========================================================================
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// ==========================================================================
// Figures
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 0;
}
// ==========================================================================
// Forms
// ==========================================================================
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 2
margin: 0; // 3
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
button,
input {
line-height: normal;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//
textarea {
overflow: auto; // 1
vertical-align: top; // 2
}
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}

78
app/styles/bootstrap/_pager.scss
View file

@ -4,40 +4,52 @@
.pager {
margin: $baseLineHeight 0;
padding-left: 0;
margin: $line-height-computed 0;
list-style: none;
text-align: center;
@include clearfix();
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
@include border-radius(15px);
}
.pager li > a:hover,
.pager li > a:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
color: $grayLight;
background-color: #fff;
cursor: default;
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
border-radius: $pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: $pagination-hover-bg;
}
}
.next {
> a,
> span {
float: right;
}
}
.previous {
> a,
> span {
float: left;
}
}
.disabled {
> a,
> a:hover,
> a:focus,
> span {
color: $pager-disabled-color;
background-color: $pagination-bg;
cursor: not-allowed;
}
}
}

172
app/styles/bootstrap/_pagination.scss
View file

@ -1,123 +1,85 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
margin: $baseLineHeight 0;
}
.pagination ul {
// Allow for text-based alignment
display: inline-block;
@include ie7-inline-block();
// Reset default ul styles
margin-left: 0;
margin-bottom: 0;
// Visuals
@include border-radius($baseBorderRadius);
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: $baseLineHeight;
text-decoration: none;
background-color: $paginationBackground;
border: 1px solid $paginationBorder;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: $paginationActiveBackground;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: $grayLight;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: $grayLight;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
@include border-left-radius($baseBorderRadius);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
@include border-right-radius($baseBorderRadius);
}
padding-left: 0;
margin: $line-height-computed 0;
border-radius: $border-radius-base;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-base;
text-decoration: none;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
@include border-left-radius($border-radius-base);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius-base);
}
}
}
// Alignment
// --------------------------------------------------
> li > a,
> li > span {
&:hover,
&:focus {
background-color: $pagination-hover-bg;
}
}
.pagination-centered {
text-align: center;
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-bg;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: $pagination-disabled-color;
background-color: $pagination-bg;
border-color: $pagination-border;
cursor: not-allowed;
}
}
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
padding: $paddingLarge;
font-size: $fontSizeLarge;
}
ul > li:first-child > a,
ul > li:first-child > span {
@include border-left-radius($borderRadiusLarge);
}
ul > li:last-child > a,
ul > li:last-child > span {
@include border-right-radius($borderRadiusLarge);
}
}
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
@include border-left-radius($borderRadiusSmall);
}
ul > li:last-child > a,
ul > li:last-child > span {
@include border-right-radius($borderRadiusSmall);
}
.pagination-lg {
@include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
padding: $paddingSmall;
font-size: $fontSizeSmall;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
padding: $paddingMini;
font-size: $fontSizeMini;
}
.pagination-sm {
@include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
}

182
app/styles/bootstrap/_panels.scss Normal file
View file

@ -0,0 +1,182 @@
//
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: $line-height-computed;
background-color: $panel-bg;
border: 1px solid transparent;
border-radius: $panel-border-radius;
@include box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Panel contents
.panel-body {
padding: 15px;
@include clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
@include border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table,
> .table-responsive > .table {
margin-bottom: 0;
}
> .panel-body + .table,
> .panel-body + .table-responsive {
border-top: 1px solid $table-border-color;
}
> .table > tbody:first-child th,
> .table > tbody:first-child td {
border-top: 0;
}
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
&:last-child > th,
&:last-child > td {
border-bottom: 0;
}
}
}
}
> .table-responsive {
border: 0;
margin-bottom: 0;
}
}
// Optional heading
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
@include border-top-radius($panel-border-radius - 1);
> .dropdown .dropdown-toggle {
color: inherit;
}
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil(($font-size-base * 1.125));
color: inherit;
> a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: 10px 15px;
background-color: $panel-footer-bg;
border-top: 1px solid $panel-inner-border;
@include border-bottom-radius($panel-border-radius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: $panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid $panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid $panel-inner-border;
}
}
}
// Contextual variations
.panel-default {
@include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
}
.panel-primary {
@include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}
.panel-success {
@include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
}
.panel-warning {
@include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
}
.panel-danger {
@include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
}
.panel-info {
@include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
}

102
app/styles/bootstrap/_popovers.scss
View file

@ -7,18 +7,16 @@
position: absolute;
top: 0;
left: 0;
z-index: $zindexPopover;
z-index: $zindex-popover;
display: none;
max-width: 276px;
max-width: $popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: $popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
@include border-radius(6px);
background-color: $popover-bg;
background-clip: padding-box;
border: 1px solid $popover-fallback-border-color;
border: 1px solid $popover-border-color;
border-radius: $border-radius-large;
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
@ -34,16 +32,12 @@
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-size: $font-size-base;
font-weight: normal;
line-height: 18px;
background-color: $popoverTitleBackground;
border-bottom: 1px solid darken($popoverTitleBackground, 5%);
@include border-radius(5px 5px 0 0);
&:empty {
display: none;
}
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
@ -54,79 +48,85 @@
//
// .arrow is outer, .arrow:after is inner
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
.popover .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover .arrow {
border-width: $popoverArrowOuterWidth;
border-width: $popover-arrow-outer-width;
}
.popover .arrow:after {
border-width: $popoverArrowWidth;
border-width: $popover-arrow-width;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -$popoverArrowOuterWidth;
margin-left: -$popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: $popoverArrowOuterColor;
bottom: -$popoverArrowOuterWidth;
border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: $popover-arrow-outer-color;
bottom: -$popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -$popoverArrowWidth;
margin-left: -$popover-arrow-width;
border-bottom-width: 0;
border-top-color: $popoverArrowColor;
border-top-color: $popover-arrow-color;
}
}
&.right .arrow {
top: 50%;
left: -$popoverArrowOuterWidth;
margin-top: -$popoverArrowOuterWidth;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: $popoverArrowOuterColor;
border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: $popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -$popoverArrowWidth;
bottom: -$popover-arrow-width;
border-left-width: 0;
border-right-color: $popoverArrowColor;
border-right-color: $popover-arrow-color;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -$popoverArrowOuterWidth;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: $popoverArrowOuterColor;
top: -$popoverArrowOuterWidth;
border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: $popover-arrow-outer-color;
top: -$popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -$popoverArrowWidth;
margin-left: -$popover-arrow-width;
border-top-width: 0;
border-bottom-color: $popoverArrowColor;
border-bottom-color: $popover-arrow-color;
}
}
&.left .arrow {
top: 50%;
right: -$popoverArrowOuterWidth;
margin-top: -$popoverArrowOuterWidth;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: $popoverArrowOuterColor;
border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: $popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: $popoverArrowColor;
bottom: -$popoverArrowWidth;
border-left-color: $popover-arrow-color;
bottom: -$popover-arrow-width;
}
}

105
app/styles/bootstrap/_print.scss Normal file
View file

@ -0,0 +1,105 @@
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2cm .5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
// Once fixed, we can just straight up remove this.
select {
background: #fff !important;
}
// Bootstrap components
.navbar {
display: none;
}
.table {
td,
th {
background-color: #fff !important;
}
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
}

104
app/styles/bootstrap/_progress-bars.scss
View file

@ -3,34 +3,16 @@
// --------------------------------------------------
// ANIMATIONS
// ----------
// Bar animations
// -------------------------
// Webkit
// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Firefox
@-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// IE9
@-ms-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
@ -38,85 +20,61 @@
// THE BARS
// --------
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: $baseLineHeight;
margin-bottom: $baseLineHeight;
@include gradient-vertical(#f5f5f5, #f9f9f9);
height: $line-height-computed;
margin-bottom: $line-height-computed;
background-color: $progress-bg;
border-radius: $border-radius-base;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
@include border-radius($baseBorderRadius);
}
// Bar of progress
.progress .bar {
.progress-bar {
float: left;
width: 0%;
height: 100%;
color: $white;
float: left;
font-size: 12px;
font-size: $font-size-small;
line-height: $line-height-computed;
color: $progress-bar-color;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@include gradient-vertical(#149bdf, #0480be);
background-color: $progress-bar-bg;
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
@include box-sizing(border-box);
@include transition(width .6s ease);
}
.progress .bar + .bar {
@include box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
}
// Striped bars
.progress-striped .bar {
@include gradient-striped(#149bdf);
@include background-size(40px 40px);
.progress-striped .progress-bar {
@include gradient-striped();
background-size: 40px 40px;
}
// Call animation for the active one
.progress.active .bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
.progress.active .progress-bar {
@include animation(progress-bar-stripes 2s linear infinite);
}
// COLORS
// ------
// Variations
// -------------------------
// Danger (red)
.progress-danger .bar, .progress .bar-danger {
@include gradient-vertical(#ee5f5b, #c43c35);
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
@include gradient-striped(#ee5f5b);
.progress-bar-success {
@include progress-bar-variant($progress-bar-success-bg);
}
// Success (green)
.progress-success .bar, .progress .bar-success {
@include gradient-vertical(#62c462, #57a957);
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
@include gradient-striped(#62c462);
.progress-bar-info {
@include progress-bar-variant($progress-bar-info-bg);
}
// Info (teal)
.progress-info .bar, .progress .bar-info {
@include gradient-vertical(#5bc0de, #339bb9);
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
@include gradient-striped(#5bc0de);
.progress-bar-warning {
@include progress-bar-variant($progress-bar-warning-bg);
}
// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
@include gradient-vertical(lighten($orange, 15%), $orange);
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
@include gradient-striped(lighten($orange, 15%));
.progress-bar-danger {
@include progress-bar-variant($progress-bar-danger-bg);
}

216
app/styles/bootstrap/_reset.scss
View file

@ -1,216 +0,0 @@
//
// Reset CSS
// Adapted from http://github.com/necolas/normalize.css
// --------------------------------------------------
// Display in IE6-9 and FF3
// -------------------------
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
// -------------------------
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
audio:not([controls]) {
display: none;
}
// Base settings
// -------------------------
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
@include tab-focus();
}
// Hover & Active
a:hover,
a:active {
outline: 0;
}
// Prevents sub and sup affecting line-height in all browsers
// -------------------------
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Img border in a's and image quality
// -------------------------
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
// Prevent max-width from affecting Google Maps
#map_canvas img,
.google-maps img {
max-width: none;
}
// Forms
// -------------------------
// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
button,
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
input[type="search"] { // Appearance in Safari/Chrome
@include box-sizing(content-box);
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}
// Printing
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}

226
app/styles/bootstrap/_responsive-utilities.scss
View file

@ -3,72 +3,196 @@
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#browsers
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
@-ms-viewport {
width: device-width;
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none;
visibility: hidden;
}
// Visibility utilities
// For desktops
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-tablet { display: inherit !important; }
// Hide
.hidden-tablet { display: none !important; }
@include responsive-invisibility('.visible-xs');
@media (max-width: $screen-xs-max) {
@include responsive-visibility('.visible-xs');
}
// Phones only
@media (max-width: 767px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide
.hidden-phone { display: none !important; }
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-visibility('.visible-xs.visible-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-visibility('.visible-xs.visible-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-visibility('.visible-xs.visible-lg');
}
@include responsive-invisibility('.visible-sm');
@media (max-width: $screen-xs-max) {
@include responsive-visibility('.visible-sm.visible-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-visibility('.visible-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-visibility('.visible-sm.visible-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-visibility('.visible-sm.visible-lg');
}
@include responsive-invisibility('.visible-md');
@media (max-width: $screen-xs-max) {
@include responsive-visibility('.visible-md.visible-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-visibility('.visible-md.visible-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-visibility('.visible-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-visibility('.visible-md.visible-lg');
}
@include responsive-invisibility('.visible-lg');
@media (max-width: $screen-xs-max) {
@include responsive-visibility('.visible-lg.visible-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-visibility('.visible-lg.visible-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-visibility('.visible-lg.visible-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-visibility('.visible-lg');
}
@include responsive-visibility('.hidden-xs');
@media (max-width: $screen-xs-max) {
@include responsive-invisibility('.hidden-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-invisibility('.hidden-xs.hidden-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-invisibility('.hidden-xs.hidden-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-invisibility('.hidden-xs.hidden-lg');
}
@include responsive-visibility('.hidden-sm');
@media (max-width: $screen-xs-max) {
@include responsive-invisibility('.hidden-sm.hidden-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-invisibility('.hidden-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-invisibility('.hidden-sm.hidden-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-invisibility('.hidden-sm.hidden-lg');
}
@include responsive-visibility('.hidden-md');
@media (max-width: $screen-xs-max) {
@include responsive-invisibility('.hidden-md.hidden-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-invisibility('.hidden-md.hidden-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-invisibility('.hidden-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-invisibility('.hidden-md.hidden-lg');
}
@include responsive-visibility('.hidden-lg');
@media (max-width: $screen-xs-max) {
@include responsive-invisibility('.hidden-lg.hidden-xs');
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@include responsive-invisibility('.hidden-lg.hidden-sm');
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@include responsive-invisibility('.hidden-lg.hidden-md');
}
@media (min-width: $screen-lg-min) {
@include responsive-invisibility('.hidden-lg');
}
// Print utilities
.visible-print { display: none !important; }
.hidden-print { }
@include responsive-invisibility('.visible-print');
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
// Clearing floats
.clearfix {
@include clearfix();
}
@include responsive-visibility('.visible-print');
// Accessible yet invisible text
.hide-text {
@include hide-text();
}
// Uses box-sizing mixin, so must be defined here
.input-block-level {
@include input-block-level();
@include responsive-invisibility('.hidden-print');
}

114
app/styles/bootstrap/_scaffolding.scss
View file

@ -3,51 +3,117 @@
// --------------------------------------------------
// Reset the box-sizing
*,
*:before,
*:after {
@include box-sizing(border-box);
}
// Body reset
// -------------------------
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
margin: 0;
font-family: $baseFontFamily;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $textColor;
background-color: $bodyBackground;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
// -------------------------
a {
color: $linkColor;
color: $link-color;
text-decoration: none;
}
a:hover,
a:focus {
color: $linkColorHover;
text-decoration: underline;
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: underline;
}
&:focus {
@include tab-focus();
}
}
// Images
// -------------------------
img {
vertical-align: middle;
}
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
@include img-responsive();
}
// Rounded corners
.img-rounded {
@include border-radius(6px);
border-radius: $border-radius-large;
}
// Add polaroid-esque trim
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
@include box-shadow(0 1px 3px rgba(0,0,0,.1));
// Image thumbnails
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: $thumbnail-padding;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
border-radius: $thumbnail-border-radius;
@include transition(all .2s ease-in-out);
// Keep them at most 100% wide
@include img-responsive(inline-block);
}
// Perfect circle
.img-circle {
@include border-radius(500px); // crank the border-radius so it works with most reasonably sized images
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
border: 0;
border-top: 1px solid $hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

6
app/styles/bootstrap/_sprites.scss
View file

@ -19,10 +19,10 @@
display: inline-block;
width: 14px;
height: 14px;
@include ie7-restore-right-whitespace();
//@include ie7-restore-right-whitespace();
line-height: 14px;
vertical-align: text-top;
background-image: url($iconSpritePath);
background-image: url($icon-sprite-path);
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;
@ -46,7 +46,7 @@
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url($iconWhiteSpritePath);
background-image: url($icon-white-sprite-path);
}
.icon-glass { background-position: 0 0; }

336
app/styles/bootstrap/_tables.scss
View file

@ -3,233 +3,229 @@
// --------------------------------------------------
// BASE TABLES
// -----------------
table {
max-width: 100%;
background-color: $tableBackground;
border-collapse: collapse;
border-spacing: 0;
background-color: $table-bg;
}
th {
text-align: left;
}
// BASELINE STYLES
// ---------------
// Baseline styles
.table {
width: 100%;
margin-bottom: $baseLineHeight;
margin-bottom: $line-height-computed;
// Cells
th,
td {
padding: 8px;
line-height: $baseLineHeight;
text-align: left;
vertical-align: top;
border-top: 1px solid $tableBorder;
}
th {
font-weight: bold;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: $table-cell-padding;
line-height: $line-height-base;
vertical-align: top;
border-top: 1px solid $table-border-color;
}
}
}
// Bottom align for column headings
thead th {
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid $table-border-color;
}
// Remove top border from thead by default
caption + thead tr:first-child th,
caption + thead tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
border-top: 0;
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid $tableBorder;
> tbody + tbody {
border-top: 2px solid $table-border-color;
}
// Nesting
.table {
background-color: $bodyBackground;
background-color: $body-bg;
}
}
// CONDENSED TABLE W/ HALF PADDING
// -------------------------------
// Condensed table w/ half padding
.table-condensed {
th,
td {
padding: 4px 5px;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: $table-condensed-cell-padding;
}
}
}
}
// BORDERED VERSION
// ----------------
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid $tableBorder;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; // IE7 can't round corners anyway
border-left: 0;
@include border-radius($baseBorderRadius);
th,
td {
border-left: 1px solid $tableBorder;
border: 1px solid $table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid $table-border-color;
}
}
}
// Prevent a double border
caption + thead tr:first-child th,
caption + tbody tr:first-child th,
caption + tbody tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + tbody tr:first-child th,
colgroup + tbody tr:first-child td,
thead:first-child tr:first-child th,
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top: 0;
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
// For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child,
tbody:first-child tr:first-child > th:first-child {
@include border-top-left-radius($baseBorderRadius);
}
// For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child,
tbody:first-child tr:first-child > td:last-child,
tbody:first-child tr:first-child > th:last-child {
@include border-top-right-radius($baseBorderRadius);
}
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child,
tbody:last-child tr:last-child > th:first-child,
tfoot:last-child tr:last-child > td:first-child,
tfoot:last-child tr:last-child > th:first-child {
@include border-bottom-left-radius($baseBorderRadius);
}
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child,
tbody:last-child tr:last-child > th:last-child,
tfoot:last-child tr:last-child > td:last-child,
tfoot:last-child tr:last-child > th:last-child {
@include border-bottom-right-radius($baseBorderRadius);
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
tfoot + tbody:last-child tr:last-child td:first-child {
@include border-bottom-left-radius(0);
}
tfoot + tbody:last-child tr:last-child td:last-child {
@include border-bottom-right-radius(0);
}
// Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child,
caption + tbody tr:first-child td:first-child,
colgroup + thead tr:first-child th:first-child,
colgroup + tbody tr:first-child td:first-child {
@include border-top-left-radius($baseBorderRadius);
}
caption + thead tr:first-child th:last-child,
caption + tbody tr:first-child td:last-child,
colgroup + thead tr:first-child th:last-child,
colgroup + tbody tr:first-child td:last-child {
@include border-top-right-radius($baseBorderRadius);
}
}
// ZEBRA-STRIPING
// --------------
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody {
> tr:nth-child(odd) > td,
> tr:nth-child(odd) > th {
background-color: $tableBackgroundAccent;
> tbody > tr:nth-child(odd) {
> td,
> th {
background-color: $table-bg-accent;
}
}
}
// HOVER EFFECT
// ------------
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody {
tr:hover > td,
tr:hover > th {
background-color: $tableBackgroundHover;
> tbody > tr:hover {
> td,
> th {
background-color: $table-bg-hover;
}
}
}
// TABLE CELL SIZING
// -----------------
// Table cell sizing
//
// Reset default table behavior
// Reset default grid behavior
table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
display: table-cell;
float: none; // undo default grid column styles
margin-left: 0; // undo default grid column styles
table col[class*="col-"] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
// Change the column widths to account for td/th padding
.table td,
.table th {
@for $i from 1 through 12 {
&.span#{$i} { @include tableColumns($i); }
table {
td,
th {
&[class*="col-"] {
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
// Generate the contextual variants
@include table-row-variant('active', $table-bg-active);
@include table-row-variant('success', $state-success-bg);
@include table-row-variant('danger', $state-danger-bg);
@include table-row-variant('warning', $state-warning-bg);
.table tbody tr {
&.success > td {
background-color: $successBackground;
}
&.error > td {
background-color: $errorBackground;
}
&.warning > td {
background-color: $warningBackground;
}
&.info > td {
background-color: $infoBackground;
}
}
// Hover states for .table-hover
.table-hover tbody tr {
&.success:hover > td {
background-color: darken($successBackground, 5%);
}
&.error:hover > td {
background-color: darken($errorBackground, 5%);
}
&.warning:hover > td {
background-color: darken($warningBackground, 5%);
}
&.info:hover > td {
background-color: darken($infoBackground, 5%);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: $screen-xs-max) {
.table-responsive {
width: 100%;
margin-bottom: ($line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid $table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing
> .table {
margin-bottom: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot {
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}

247
app/styles/bootstrap/_theme.scss Normal file
View file

@ -0,0 +1,247 @@
//
// Load core variables and mixins
// --------------------------------------------------
@import "bootstrap/variables";
@import "bootstrap/mixins";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
$shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
@include box-shadow($shadow);
// Reset the shadow
&:active,
&.active {
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
// Mixin for generating new styles
@mixin btn-styles($btn-color: #555) {
@include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%));
@include reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
background-repeat: repeat-x;
border-color: darken($btn-color, 14%);
&:hover,
&:focus {
background-color: darken($btn-color, 12%);
background-position: 0 -15px;
}
&:active,
&.active {
background-color: darken($btn-color, 12%);
border-color: darken($btn-color, 14%);
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { @include btn-styles($btn-primary-bg); }
.btn-success { @include btn-styles($btn-success-bg); }
.btn-warning { @include btn-styles($btn-warning-bg); }
.btn-danger { @include btn-styles($btn-danger-bg); }
.btn-info { @include btn-styles($btn-info-bg); }
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
@include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
background-color: darken($dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
@include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
background-color: darken($dropdown-link-active-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Default navbar
.navbar-default {
@include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
@include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
border-radius: $navbar-border-radius;
$shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
@include box-shadow($shadow);
.navbar-nav > .active > a {
@include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%));
@include box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
// Inverted navbar
.navbar-inverse {
@include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg);
@include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.navbar-nav > .active > a {
@include gradient-vertical($start-color: $navbar-inverse-bg, $end-color: lighten($navbar-inverse-bg, 2.5%));
@include box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
$shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
}
// Mixin for generating new styles
@mixin alert-styles($color) {
@include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%));
border-color: darken($color, 15%);
}
// Apply the mixin to the alerts
.alert-success { @include alert-styles($alert-success-bg); }
.alert-info { @include alert-styles($alert-info-bg); }
.alert-warning { @include alert-styles($alert-warning-bg); }
.alert-danger { @include alert-styles($alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
@include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg)
}
// Mixin for generating new styles
@mixin progress-bar-styles($color) {
@include gradient-vertical($start-color: $color, $end-color: darken($color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar { @include progress-bar-styles($progress-bar-bg); }
.progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); }
.progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); }
.progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); }
.progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); }
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: $border-radius-base;
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%);
@include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%));
border-color: darken($list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
}
// Mixin for generating new styles
@mixin panel-heading-styles($color) {
@include gradient-vertical($start-color: $color, $end-color: darken($color, 5%));
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); }
.panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); }
.panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); }
.panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); }
.panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); }
.panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------
.well {
@include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg);
border-color: darken($well-bg, 10%);
$shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
@include box-shadow($shadow);
}

69
app/styles/bootstrap/_thumbnails.scss
View file

@ -3,51 +3,36 @@
// --------------------------------------------------
// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
// Make wrapper ul behave like the grid
.thumbnails {
margin-left: -$gridGutterWidth;
list-style: none;
@include clearfix();
}
// Fluid rows have no left margin
.row-fluid .thumbnails {
margin-left: 0;
}
// Float li to make thumbnails appear in a row
.thumbnails > li {
float: left; // Explicity set the float since we don't require .span* classes
margin-bottom: $baseLineHeight;
margin-left: $gridGutterWidth;
}
// The actual thumbnail (can be `a` or `div`)
// Mixin and adjust the regular image class
.thumbnail {
display: block;
padding: 4px;
line-height: $baseLineHeight;
border: 1px solid #ddd;
@include border-radius($baseBorderRadius);
@include box-shadow(0 1px 3px rgba(0,0,0,.055));
padding: $thumbnail-padding;
margin-bottom: $line-height-computed;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
border-radius: $thumbnail-border-radius;
@include transition(all .2s ease-in-out);
}
// Add a hover/focus state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
border-color: $linkColor;
@include box-shadow(0 1px 4px rgba(0,105,214,.25));
> img,
a > img {
@include img-responsive();
margin-left: auto;
margin-right: auto;
}
// [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active
// Image captions
.caption {
padding: $thumbnail-caption-padding;
color: $thumbnail-caption-color;
}
}
// Images and captions
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
color: $gray;
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: $link-color;
}

73
app/styles/bootstrap/_tooltip.scss
View file

@ -6,28 +6,29 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindexTooltip;
z-index: $zindex-tooltip;
display: block;
visibility: visible;
font-size: 11px;
font-size: $font-size-small;
line-height: 1.4;
@include opacity(0);
&.in { @include opacity(80); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
&.in { @include opacity(.9); }
&.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: $tooltipColor;
max-width: $tooltip-max-width;
padding: 3px 8px;
color: $tooltip-color;
text-align: center;
text-decoration: none;
background-color: $tooltipBackground;
@include border-radius($baseBorderRadius);
background-color: $tooltip-bg;
border-radius: $border-radius-base;
}
// Arrows
@ -42,29 +43,53 @@
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -$tooltipArrowWidth;
border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
border-top-color: $tooltipArrowColor;
margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
left: $tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
right: $tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -$tooltipArrowWidth;
border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
border-right-color: $tooltipArrowColor;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -$tooltipArrowWidth;
border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
border-left-color: $tooltipArrowColor;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -$tooltipArrowWidth;
border-width: 0 $tooltipArrowWidth $tooltipArrowWidth;
border-bottom-color: $tooltipArrowColor;
margin-left: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
left: $tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
right: $tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
}

300
app/styles/bootstrap/_type.scss
View file

@ -3,17 +3,71 @@
// --------------------------------------------------
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
small,
.small {
font-weight: normal;
line-height: 1;
color: $headings-small-color;
}
}
h1,
h2,
h3 {
margin-top: $line-height-computed;
margin-bottom: ($line-height-computed / 2);
small,
.small {
font-size: 65%;
}
}
h4,
h5,
h6 {
margin-top: ($line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
small,
.small {
font-size: 75%;
}
}
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
// Body text
// -------------------------
p {
margin: 0 0 $baseLineHeight / 2;
margin: 0 0 ($line-height-computed / 2);
}
.lead {
margin-bottom: $baseLineHeight;
font-size: $baseFontSize * 1.5;
margin-bottom: $line-height-computed;
font-size: floor($font-size-base * 1.15);
font-weight: 200;
line-height: $baseLineHeight * 1.5;
line-height: 1.4;
@media (min-width: $screen-sm-min) {
font-size: ($font-size-base * 1.5);
}
}
@ -21,218 +75,199 @@ p {
// -------------------------
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
small,
.small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
// Undo browser default styling
cite { font-style: normal; }
// Utility classes
.muted { color: $grayLight; }
a.muted:hover,
a.muted:focus { color: darken($grayLight, 10%); }
.text-warning { color: $warningText; }
a.text-warning:hover,
a.text-warning:focus { color: darken($warningText, 10%); }
.text-error { color: $errorText; }
a.text-error:hover,
a.text-error:focus { color: darken($errorText, 10%); }
.text-info { color: $infoText; }
a.text-info:hover,
a.text-info:focus { color: darken($infoText, 10%); }
.text-success { color: $successText; }
a.text-success:hover,
a.text-success:focus { color: darken($successText, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6 {
margin: ($baseLineHeight / 2) 0;
font-family: $headingsFontFamily;
font-weight: $headingsFontWeight;
line-height: $baseLineHeight;
color: $headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
line-height: 1;
color: $grayLight;
// Contextual emphasis
.text-muted {
color: $text-muted;
}
.text-primary {
color: $brand-primary;
&:hover {
color: darken($brand-primary, 10%);
}
}
.text-warning {
color: $state-warning-text;
&:hover {
color: darken($state-warning-text, 10%);
}
}
.text-danger {
color: $state-danger-text;
&:hover {
color: darken($state-danger-text, 10%);
}
}
.text-success {
color: $state-success-text;
&:hover {
color: darken($state-success-text, 10%);
}
}
.text-info {
color: $state-info-text;
&:hover {
color: darken($state-info-text, 10%);
}
}
h1,
h2,
h3 { line-height: $baseLineHeight * 2; }
h1 { font-size: $baseFontSize * 2.75; } // ~38px
h2 { font-size: $baseFontSize * 2.25; } // ~32px
h3 { font-size: $baseFontSize * 1.75; } // ~24px
h4 { font-size: $baseFontSize * 1.25; } // ~18px
h5 { font-size: $baseFontSize; }
h6 { font-size: $baseFontSize * 0.85; } // ~12px
h1 small { font-size: $baseFontSize * 1.75; } // ~24px
h2 small { font-size: $baseFontSize * 1.25; } // ~18px
h3 small { font-size: $baseFontSize; }
h4 small { font-size: $baseFontSize; }
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Page header
// -------------------------
.page-header {
padding-bottom: ($baseLineHeight / 2) - 1;
margin: $baseLineHeight 0 ($baseLineHeight * 1.5);
border-bottom: 1px solid $grayLighter;
padding-bottom: (($line-height-computed / 2) - 1);
margin: ($line-height-computed * 2) 0 $line-height-computed;
border-bottom: 1px solid $page-header-border-color;
}
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
padding: 0;
margin: 0 0 $baseLineHeight / 2 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
li {
line-height: $baseLineHeight;
ul,
ol {
margin-top: 0;
margin-bottom: ($line-height-computed / 2);
ul,
ol {
margin-bottom: 0;
}
}
// Remove default list styles
ul.unstyled,
ol.unstyled {
margin-left: 0;
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
padding-left: 0;
list-style: none;
}
// Single-line list items
ul.inline,
ol.inline {
margin-left: 0;
list-style: none;
// Inline turns list items into inline-block
.list-inline {
@extend .list-unstyled;
> li {
display: inline-block;
@include ie7-inline-block();
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 0;
}
}
}
// Description Lists
dl {
margin-bottom: $baseLineHeight;
margin-top: 0; // Remove browser default
margin-bottom: $line-height-computed;
}
dt,
dd {
line-height: $baseLineHeight;
line-height: $line-height-base;
}
dt {
font-weight: bold;
}
dd {
margin-left: $baseLineHeight / 2;
margin-left: 0; // Undo browser default
}
// Horizontal layout (like forms)
.dl-horizontal {
@include clearfix(); // Ensure dl clears floats if empty dd elements present
dt {
float: left;
width: $horizontalComponentOffset - 20;
clear: left;
text-align: right;
@include text-overflow();
}
dd {
margin-left: $horizontalComponentOffset;
// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).
@media (min-width: $grid-float-breakpoint) {
.dl-horizontal {
dt {
float: left;
width: ($component-offset-horizontal - 20);
clear: left;
text-align: right;
@include text-overflow();
}
dd {
margin-left: $component-offset-horizontal;
@include clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
}
}
// MISC
// ----
// Horizontal rules
hr {
margin: $baseLineHeight 0;
border: 0;
border-top: 1px solid $hrBorder;
border-bottom: 1px solid $white;
}
// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted $grayLight;
border-bottom: 1px dotted $abbr-border-color;
}
abbr.initialism {
.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
padding: 0 0 0 15px;
margin: 0 0 $baseLineHeight;
border-left: 5px solid $grayLighter;
padding: ($line-height-computed / 2) $line-height-computed;
margin: 0 0 $line-height-computed;
border-left: 5px solid $blockquote-border-color;
p {
margin-bottom: 0;
font-size: $baseFontSize * 1.25;
font-size: ($font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
small {
p:last-child {
margin-bottom: 0;
}
small,
.small {
display: block;
line-height: $baseLineHeight;
color: $grayLight;
line-height: $line-height-base;
color: $blockquote-small-color;
&:before {
content: '\2014 \00A0';
content: '\2014 \00A0'; // EM DASH, NBSP
}
}
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid $grayLighter;
border-right: 5px solid $blockquote-border-color;
border-left: 0;
p,
small {
small,
.small {
text-align: right;
}
small {
small,
.small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014';
content: '\00A0 \2014'; // NBSP, EM DASH
}
}
}
}
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
@ -240,8 +275,7 @@ blockquote:after {
// Addresses
address {
display: block;
margin-bottom: $baseLineHeight;
margin-bottom: $line-height-computed;
font-style: normal;
line-height: $baseLineHeight;
line-height: $line-height-base;
}

77
app/styles/bootstrap/_utilities.scss
View file

@ -3,43 +3,54 @@
// --------------------------------------------------
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Floats
// -------------------------
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// Visibility
.invisible {
visibility: hidden;
}
// For Affix plugin
.affix {
position: fixed;
}
// Clearing floats
.clearfix {
@include clearfix();
}
// Accessible yet invisible text
.hide-text {
@include hide-text();
.center-block {
@include center-block();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
// Uses box-sizing mixin, so must be defined here
.input-block-level {
@include input-block-level();
// Toggling content
// -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
@include text-hide();
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// For Affix plugin
// -------------------------
.affix {
position: fixed;
}

736
app/styles/bootstrap/_variables.scss
View file

@ -1,22 +1,25 @@
// Cerulean 2.3.0
// a flag to toggle asset pipeline / compass integration
// defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
// in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
$bootstrap-sass-asset-helper: (twbs-font-path('') != unquote("twbs-font-path('')")) !default;
//
// Variables
// --------------------------------------------------
// GLOBAL VALUES
// Global values
// --------------------------------------------------
// Grays
// -------------------------
$black: #000;
$grayDarker: #222;
$grayDark: #333;
$gray: #555;
$grayLight: #999;
$grayLighter: #F5F5F5;
$white: #fff;
$black: #000;
$gray-darker: #222;
$gray-dark: #333;
$gray: #555;
$gray-light: #999;
$gray-lighter: #F5F5F5;
$white: #fff;
// Accent colors
// -------------------------
@ -29,109 +32,183 @@ $orange: #DD5600;
$pink: #F49AC1;
$purple: #9760B3;
// Brand colors
// -------------------------
$brand-primary: #948754 !default;
$brand-success: $green !default;
$brand-warning: $orange !default;
$brand-danger: $red !default;
$brand-info: #f9e811 !default;
// Scaffolding
// -------------------------
$bodyBackground: #2f261d;
$textColor: $gray;
$body-bg: #2f261d;
$text-color: $gray !default;
// Links
// -------------------------
$linkColor: $blue;
$linkColorHover: darken($linkColor, 15%);
$link-color: $blue;
$link-hover-color: darken($link-color, 15%) !default;
// Typography
// -------------------------
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
$serifFontFamily: Georgia, "Times New Roman", Times, serif;
$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
$baseFontSize: 14px;
$baseFontFamily: $sansFontFamily;
$baseLineHeight: 20px;
$altFontFamily: $monoFontFamily;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
$headingsFontFamily: 'Bangers', cursive; // empty to use BS default, $baseFontFamily
$headingsFontWeight: normal; // Bangers shouldn't be bolded, it's practically unreadable in FF
$headingsColor: #317EAC; // empty to use BS default, $textColor
$headingsLetterSpacing: 1px; //making Bangers more legible
$font-size-base: 14px !default;
$font-size-large: ceil($font-size-base * 1.25) !default; // ~18px
$font-size-small: ceil($font-size-base * 0.85) !default; // ~12px
$font-size-h1: 38.5px;
$font-size-h2: 31.5px;
$font-size-h3: 24.5px;
$font-size-h4: 17.5px;
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil($font-size-base * 0.85) !default; // ~12px
$line-height-base: 1.428571429 !default; // 20/14
$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
$headings-font-family: 'Bangers', cursive; // empty to use BS default, $baseFontFamily;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: #317EAC;
// Component sizing
// Iconography
// -------------------------
// Based on 14px font-size and 20px line-height
$fontSizeLarge: $baseFontSize * 1.25; // ~18px
$fontSizeSmall: $baseFontSize * 0.85; // ~12px
$fontSizeMini: $baseFontSize * 0.75; // ~11px
$icon-font-path: "bootstrap/" !default;
$icon-font-name: "glyphicons-halflings-regular" !default;
$paddingLarge: 11px 19px; // 44px
$paddingSmall: 2px 10px; // 26px
$paddingMini: 0px 6px; // 22px
// Sprite icons path
// -------------------------
$icon-sprite-path: "/images/pages/base/glyphicons-halflings.png";
$icon-white-sprite-path: "/images/pages/base/glyphicons-halflings-white.png";
$baseBorderRadius: 4px;
$borderRadiusLarge: 6px;
$borderRadiusSmall: 3px;
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
$padding-base-vertical: 6px !default;
$padding-base-horizontal: 12px !default;
$padding-large-vertical: 11px !default;
$padding-large-horizontal: 19px !default;
$padding-small-vertical: 2px !default;
$padding-small-horizontal: 10px !default;
$padding-xs-vertical: 0px !default;
$padding-xs-horizontal: 6px !default;
$line-height-large: 1.33 !default;
$line-height-small: 1.5 !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
$caret-width-base: 4px !default;
$caret-width-large: 5px !default;
// Tables
// -------------------------
$tableBackground: transparent; // overall background-color
$tableBackgroundAccent: #f9f9f9; // for striping
$tableBackgroundHover: #f5f5f5; // for hover
$tableBorder: #ddd; // table and cell border
$table-cell-padding: 8px !default;
$table-condensed-cell-padding: 5px !default;
$table-bg: transparent !default; // overall background-color
$table-bg-accent: #f9f9f9 !default; // for striping
$table-bg-hover: #f5f5f5 !default;
$table-bg-active: $table-bg-hover !default;
$table-border-color: #ddd !default; // table and cell border
// Buttons
// -------------------------
$btnBackground: $white;
$btnBackgroundHighlight: darken($white, 10%);
$btnBorder: darken($white, 20%);
$btnPrimaryBackground: #948754;
$btnPrimaryBackgroundHighlight: adjust-hue(#948754, 15%);
$btn-font-weight: normal !default;
$btnInfoBackground: #f9e811;
$btnInfoBackgroundHighlight: #ae671b;
$btn-default-color: #333 !default;
$btn-default-bg: #fff !default;
$btn-default-border: #ccc !default;
$btnSuccessBackground: $green;
$btnSuccessBackgroundHighlight: #51a351;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
$btnWarningBackground: $orange;
$btnWarningBackgroundHighlight: $orange;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: darken($btn-success-bg, 5%) !default;
$btnDangerBackground: $red;
$btnDangerBackgroundHighlight: #bd362f;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
$btnInverseBackground: $blueDark;
$btnInverseBackgroundHighlight: $grayDarker;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: darken($btn-info-bg, 5%) !default;
$btn-link-disabled-color: $gray-light !default;
// Forms
// -------------------------
$inputBackground: $white;
$inputBorder: #ccc;
$inputBorderRadius: $baseBorderRadius;
$inputDisabledBackground: $grayLighter;
$formActionsBackground: #f5f5f5;
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border: #ccc !default;
$input-border-radius: $border-radius-base !default;
$input-border-focus: #66afe9 !default;
$input-color-placeholder: $gray-light !default;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
$legend-color: $gray-dark !default;
$legend-border-color: #e5e5e5 !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border !default;
// Dropdowns
// -------------------------
$dropdownBackground: $white;
$dropdownBorder: rgba(0,0,0,.2);
$dropdownDividerTop: #e5e5e5;
$dropdownDividerBottom: $white;
$dropdownLinkColor: $grayDark;
$dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white;
$dropdown-bg: #fff !default;
$dropdown-border: rgba(0,0,0,.15) !default;
$dropdown-fallback-border: #ccc !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdownLinkBackgroundActive: $linkColor;
$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: #f5f5f5 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
$dropdown-header-color: $gray-light !default;
// COMPONENT VARIABLES
@ -142,162 +219,447 @@ $dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive;
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown: 1000;
$zindexPopover: 1010;
$zindexTooltip: 1020;
$zindexFixedNavbar: 1030;
$zindexModalBackdrop: 1040;
$zindexModal: 1050;
$zindexAutocomplete: 1060;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1010 !default;
$zindex-tooltip: 1030 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;
$screen-phone: $screen-xs-min !default;
// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
$screen-lg-desktop: $screen-lg-min !default;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
// Sprite icons path
// -------------------------
$iconSpritePath: "/images/pages/base/glyphicons-halflings.png";
$iconWhiteSpritePath: "/images/pages/base/glyphicons-halflings-white.png";
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
$grid-columns: 12 !default;
// Padding, to be divided by two and applied to the left and right of all columns
$grid-gutter-width: 30px !default;
// Input placeholder text color
// -------------------------
$placeholderText: $grayLight;
// Navbar collapse
// Hr border color
// -------------------------
$hrBorder: $grayLighter;
// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset: 180px;
// Wells
// -------------------------
$wellBackground: #f5f5f5;
// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: $screen-sm-min !default;
// Point at which the navbar begins collapsing
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
// Navbar
// -------------------------
$navbarCollapseWidth: 979px;
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
$navbarHeight: 50px;
$navbarBackground: #2f261d;
$navbarBackgroundHighlight: lighten($navbarBackground, 8%);
$navbarBorder: darken($navbarBackground, 8%);
// Basics of a navbar
$navbar-height: 50px !default;
$navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor($grid-gutter-width / 2) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbarText: $grayLighter;
$navbarLinkColor: $white;
$navbarLinkColorHover: #f8e413;
$navbarLinkColorActive: $navbarLinkColorHover;
$navbarLinkBackgroundHover: $navbarBackground;
$navbarLinkBackgroundActive: $navbarBackground;
$navbar-default-color: #777 !default;
$navbar-default-bg: #2f261d;
$navbar-highlight-bg: lighten($navbar-default-bg, 8%);
$navbar-default-border: darken($navbar-default-bg, 8%) !default;
// Navbar links
$navbar-default-link-color: $white;
$navbar-default-link-hover-color: #f8e413;
$navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: #555 !default;
$navbar-default-link-active-bg: transparent;
$navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default;
// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg: transparent !default;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd !default;
$navbar-default-toggle-icon-bar-bg: #ccc !default;
$navbar-default-toggle-border-color: #ddd !default;
$navbarBrandColor: $navbarLinkColor;
// Inverted navbar
$navbarInverseBackground: $blueDark;
$navbarInverseBackgroundHighlight: lighten($navbarInverseBackground, 5%);
$navbarInverseBorder: darken($navbarInverseBackground, 3%);
//
// Reset inverted navbar basics
$navbar-inverse-color: $gray-light !default;
$navbar-inverse-bg: $blueDark;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
$navbarInverseText: $white;
$navbarInverseLinkColor: $white;
$navbarInverseLinkColorHover: $white;
$navbarInverseLinkColorActive: $white;
$navbarInverseLinkBackgroundHover: darken($navbarInverseBackground, 6%);
$navbarInverseLinkBackgroundActive: darken($navbarInverseBackground, 6%);
// Inverted navbar links
$navbar-inverse-link-color: $white;
$navbar-inverse-link-hover-color: $white;
$navbar-inverse-link-hover-bg: transparent;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-disabled-color: #444 !default;
$navbar-inverse-link-disabled-bg: transparent !default;
$navbarInverseSearchBackground: $white;
$navbarInverseSearchBackgroundFocus: $white;
$navbarInverseSearchBorder: $navbarInverseBackground;
$navbarInverseSearchPlaceholderColor: $grayLight;
// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color: #fff !default;
$navbar-inverse-brand-hover-bg: transparent !default;
$navbarInverseBrandColor: $navbarInverseLinkColor;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333 !default;
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
$navbar-inverse-toggle-border-color: #333 !default;
// Navs
// -------------------------
$nav-link-padding: 10px 15px !default;
$nav-link-hover-bg: lighten($brand-primary, 8%);
$nav-link-hover-color: #f8e413;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-open-link-hover-color: #fff !default;
// Tabs
$nav-tabs-border-color: #ddd !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-bg: $brand-primary !default;
$nav-tabs-active-link-hover-color: $gray-darker !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $brand-primary !default;
// Pills
$nav-pills-border-radius: $border-radius-base !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
// Pagination
// -------------------------
$paginationBackground: #fff;
$paginationBorder: #ddd;
$paginationActiveBackground: #f5f5f5;
$pagination-bg: #fff !default;
$pagination-border: #ddd !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-color: #fff !default;
$pagination-disabled-color: $gray-light !default;
// Hero unit
// Pager
// -------------------------
$heroUnitBackground: $grayLighter;
$heroUnitHeadingColor: inherit;
$heroUnitLeadColor: inherit;
$pager-border-radius: 15px !default;
$pager-disabled-color: $gray-light !default;
// Jumbotron
// -------------------------
$jumbotron-padding: 30px !default;
$jumbotron-color: inherit !default;
$jumbotron-bg: $gray-lighter !default;
$jumbotron-heading-color: inherit !default;
$jumbotron-font-size: ceil($font-size-base * 1.5) !default;
// Form states and alerts
// -------------------------
$warningText: $orange;
$warningBackground: #F1CEAB;
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
$errorText: darken(#C45559, 5%);
$errorBackground: #F2BDB1;
$errorBorder: darken(adjust-hue($errorBackground, -10), 3%);
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
$successText: darken($green, 5%);
$successBackground: #D5ECBF;
$successBorder: darken(adjust-hue($successBackground, -10), 5%);
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
$infoText: darken($blue, 10%);
$infoBackground: #A7DFF1;
$infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
// Tooltips and popovers
// Tooltips
// -------------------------
$tooltipColor: #fff;
$tooltipBackground: #000;
$tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltip-max-width: 200px !default;
$tooltip-color: #fff !default;
$tooltip-bg: #000 !default;
$popoverBackground: #fff;
$popoverArrowWidth: 10px;
$popoverArrowColor: #fff;
$popoverTitleBackground: darken($popoverBackground, 3%);
// Special enhancement for popovers
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Popovers
// -------------------------
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-color: rgba(0,0,0,.2) !default;
$popover-fallback-border-color: #ccc !default;
// GRID
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-arrow-width: 10px !default;
$popover-arrow-color: #fff !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
$popover-arrow-outer-color: rgba(0,0,0,.25) !default;
$popover-arrow-outer-fallback-color: #999 !default;
// Labels
// -------------------------
$label-default-bg: $gray-light !default;
$label-primary-bg: $brand-primary !default;
$label-success-bg: $brand-success !default;
$label-info-bg: $brand-info !default;
$label-warning-bg: $brand-warning !default;
$label-danger-bg: $brand-danger !default;
$label-color: #fff !default;
$label-link-hover-color: #fff !default;
// Modals
// -------------------------
$modal-inner-padding: 20px !default;
$modal-title-padding: 15px !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: none !default;
$modal-content-border-color: transparent !default;
$modal-content-fallback-border-color: transparent !default;
$modal-backdrop-bg: transparent !default;
$modal-header-border-color: transparent !default;
$modal-footer-border-color: $modal-header-border-color !default;
// Alerts
// -------------------------
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
// Progress bars
// -------------------------
$progress-bg: #f5f5f5 !default;
$progress-bar-color: #fff !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default;
$progress-bar-warning-bg: $brand-warning !default;
$progress-bar-danger-bg: $brand-danger !default;
$progress-bar-info-bg: $brand-info !default;
// List group
// -------------------------
$list-group-bg: #fff !default;
$list-group-border: #ddd !default;
$list-group-border-radius: $border-radius-base !default;
$list-group-hover-bg: #f5f5f5 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-link-color: #555 !default;
$list-group-link-heading-color: #333 !default;
// Panels
// -------------------------
$panel-bg: #fff !default;
$panel-inner-border: #ddd !default;
$panel-border-radius: $border-radius-base !default;
$panel-footer-bg: #f5f5f5 !default;
$panel-default-text: $gray-dark !default;
$panel-default-border: #ddd !default;
$panel-default-heading-bg: #f5f5f5 !default;
$panel-primary-text: #fff !default;
$panel-primary-border: $brand-primary !default;
$panel-primary-heading-bg: $brand-primary !default;
$panel-success-text: $state-success-text !default;
$panel-success-border: $state-success-border !default;
$panel-success-heading-bg: $state-success-bg !default;
$panel-warning-text: $state-warning-text !default;
$panel-warning-border: $state-warning-border !default;
$panel-warning-heading-bg: $state-warning-bg !default;
$panel-danger-text: $state-danger-text !default;
$panel-danger-border: $state-danger-border !default;
$panel-danger-heading-bg: $state-danger-bg !default;
$panel-info-text: $state-info-text !default;
$panel-info-border: $state-info-border !default;
$panel-info-heading-bg: $state-info-bg !default;
// Thumbnails
// -------------------------
$thumbnail-padding: 4px !default;
$thumbnail-bg: #bbb !default;
$thumbnail-border: #999 !default;
$thumbnail-border-radius: $border-radius-base !default;
$thumbnail-caption-color: $text-color !default;
$thumbnail-caption-padding: 9px !default;
// Wells
// -------------------------
$well-bg: #f5f5f5 !default;
// Badges
// -------------------------
$badge-color: #fff !default;
$badge-link-hover-color: #fff !default;
$badge-bg: $gray-light !default;
$badge-active-color: $link-color !default;
$badge-active-bg: #fff !default;
$badge-font-weight: bold !default;
$badge-line-height: 1 !default;
$badge-border-radius: 10px !default;
// Breadcrumbs
// -------------------------
$breadcrumb-bg: #f5f5f5 !default;
$breadcrumb-color: #ccc !default;
$breadcrumb-active-color: $gray-light !default;
$breadcrumb-separator: "/" !default;
// Carousel
// ------------------------
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
$carousel-control-color: #fff !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-color: #fff !default;
// Close
// ------------------------
$close-font-weight: bold !default;
$close-color: #000 !default;
$close-text-shadow: 0 1px 0 #fff !default;
// Code
// ------------------------
$code-color: #c7254e !default;
$code-bg: #f9f2f4 !default;
$pre-bg: #f5f5f5 !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;
// Type
// ------------------------
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$headings-small-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-border-color: $gray-lighter !default;
$page-header-border-color: $gray-lighter !default;
// Miscellaneous
// -------------------------
// Hr border color
$hr-border: $gray-lighter !default;
// Horizontal forms & lists
$component-offset-horizontal: 180px !default;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
$container-tablet: ((720px + $grid-gutter-width)) !default;
$container-sm: $container-tablet !default;
// Default 940px grid
// -------------------------
$gridColumns: 12;
$gridColumnWidth: 60px;
$gridGutterWidth: 20px;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
// Medium screen / desktop
$container-desktop: ((940px + $grid-gutter-width)) !default;
$container-md: $container-desktop !default;
// 1200px min
$gridColumnWidth1200: 70px;
$gridGutterWidth1200: 30px;
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
// 768px-979px
$gridColumnWidth768: 42px;
$gridGutterWidth768: 20px;
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
// Fluid grid
// -------------------------
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
// 1200px min
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
// 768px-979px
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
// Large screen / wide desktop
$container-large-desktop: ((1140px + $grid-gutter-width)) !default;
$container-lg: $container-large-desktop !default;

14
app/styles/bootstrap/_wells.scss
View file

@ -8,9 +8,9 @@
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: $wellBackground;
border: 1px solid darken($wellBackground, 7%);
@include border-radius($baseBorderRadius);
background-color: $well-bg;
border: 1px solid darken($well-bg, 7%);
border-radius: $border-radius-base;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
@ -19,11 +19,11 @@
}
// Sizes
.well-large {
.well-lg {
padding: 24px;
@include border-radius($borderRadiusLarge);
border-radius: $border-radius-large;
}
.well-small {
.well-sm {
padding: 9px;
@include border-radius($borderRadiusSmall);
border-radius: $border-radius-small;
}

55
app/styles/bootstrap/bootstrap.scss vendored Normal file
View file

@ -0,0 +1,55 @@
// Core variables and mixins
@import "variables";
@import "mixins";
// Reset
@import "normalize";
@import "print";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "component-animations";
@import "glyphicons";
@import "dropdowns";
@import "button-groups";
@import "input-groups";
@import "navs";
@import "navbar";
@import "breadcrumbs";
@import "pagination";
@import "pager";
@import "labels";
@import "badges";
@import "jumbotron";
@import "thumbnails";
@import "alerts";
@import "progress-bars";
@import "media";
@import "list-group";
@import "panels";
@import "wells";
@import "close";
// Components w/ JavaScript
@import "modals";
@import "tooltip";
@import "popovers";
@import "carousel";
//Addition: sprite, this was part of TB2, but removed in TB3
@import "sprites";
//Addition: Bootswatch structural changes
@import "bootswatch";
// Utility classes
@import "utilities";
@import "responsive-utilities";

24
app/styles/editor/level/edit.sass
View file

@ -1,15 +1,16 @@
#editor-level-view
#top-nav
display: none
position: absolute
top: 56px
left: 0
right: 0
bottom: 0
top: 0px
left: 0px
right: 0px
bottom: 0px
$BG: rgba(228, 207, 140, 1.0)
.outer-content
margin: 0px 20px 20px 20px
padding: 10px 20px
background-color: $BG
position: absolute
top: 0
@ -21,24 +22,25 @@
position: fixed
background-color: $BG
z-index: 100
left: 40px
right: 40px
left: 20px
right: 20px
margin-top: -10px
padding-top: 10px
.level-title-header
float: left
width: 500px
text-overflow: ellipsis
white-space: nowrap
.level-control-buttons
float: right
margin: 5px
& > *
margin: 10px 10px
.nav-tabs
margin-bottom: 10px
margin: 15px 30px
float: left
// keeps the editor tabs a certain height
@ -46,7 +48,7 @@
position: absolute
left: 20px
right: 20px
top: 118px
top: 80px
bottom: 20px
.treema-root

2
app/styles/editor/level/thangs_tab.sass
View file

@ -1,8 +1,6 @@
@import "../../bootstrap/mixins"
#editor-level-thangs-tab-view
position: relative
$addPaletteIconColumns: 3
$extantThangsWidth: 300px
$addPaletteIconWidth: 40px

8
app/styles/home.sass
View file

@ -19,12 +19,12 @@
letter-spacing: 1px
position: relative
a
padding-top: 25px
height: 30px
button
font-size: 40px
width: 300px
@include transition(color .10s linear)
height: 80px
//@include transition(color .10s linear) // buggy in chrome, coloring doesn't get the right edge of the word
&:hover a, &:active a
color: #8090AA

2
app/styles/play/level/goals.sass
View file

@ -22,7 +22,7 @@
margin-right: 5px
ul
margin-left: 5px
padding-left: 0
margin-bottom: 0
color: black

7
app/styles/play/level/modal/multiplayer.sass
View file

@ -1,13 +1,8 @@
#level-multiplayer-modal
.control-label
width: 80px
.controls
margin-left: 100px
textarea
width: 100%
box-sizing: border-box
padding: 5px
text-align: center
height: 30px
font-size: 11px
font-size: 11px

32
app/templates/about.jade
View file

@ -4,7 +4,7 @@ block content
.row
.span5
.col-sm-6
h2(data-i18n="about.who_is_codecombat")
| Who is CodeCombat?
@ -76,15 +76,15 @@ block content
| Start wizarding now!
ul.span5.team-column
ul.col-sm-6.team-column
ul.thumbnails
li.row
img(src="/images/pages/about/george.jpg").img-polaroid
img(src="/images/pages/about/george.jpg").img-thumbnail
.span3
.col-sm-8
h3
a(href="http://georgesaines.com") George Saines
@ -93,11 +93,11 @@ block content
| CEO, business guy, web designer, game designer,
| and champion of beginning programmers everywhere.
li
li.row
img(src="/images/pages/about/scott.jpg").img-polaroid
img(src="/images/pages/about/scott.jpg").img-thumbnail
.span3
.col-sm-8
h3
a(href="http://scotterickson.info") Scott Erickson
@ -107,11 +107,11 @@ block content
| kitchen wizard, and master of finances.
| Scott is the reasonable one.
li
li.row
img(src="/images/pages/about/nick.jpg").img-polaroid
img(src="/images/pages/about/nick.jpg").img-thumbnail
.span3
.col-sm-8
h3
a(href="http://www.nickwinter.net") Nick Winter
@ -121,11 +121,11 @@ block content
| and upside-down experimenter.
| Nick can do anything and chooses to build CodeCombat.
li
li.row
img(src="/images/pages/about/jeremy.jpg").img-polaroid
img(src="/images/pages/about/jeremy.jpg").img-thumbnail
.span3
.col-sm-8
h3
Jeremy Arns
@ -135,11 +135,11 @@ block content
| and community organizer; you've probably
| already spoken with Jeremy.
li
li.row
img(src="/images/pages/about/michael.jpg").img-polaroid
img(src="/images/pages/about/michael.jpg").img-thumbnail
.span3
.col-sm-8
h3
a(href="http://michaelschmatz.com/") Michael Schmatz

57
app/templates/account/profile.jade
View file

@ -37,34 +37,35 @@ block content
| Alas, there's no profile associated with this person's email address.
else
div.row
div.span2
img(src=photoURL).img-polaroid
p.about-me #{grav.aboutMe}
if grav.emails
div.span2
h3(data-i18n="account_profile.gravatar_contact") Contact
ul
each email in grav.emails
li #{email.value}
if grav.urls && grav.urls.length
div.span2
h3(data-i18n="account_profile.gravatar_websites") Websites
ul
each url in grav.urls
li
a(href="#{url.value}") #{url.title}
if grav.accounts
div.span2
h3(data-i18n="account_profile.gravatar_accounts") As Seen On
ul
each account in grav.accounts
li
a(href="#{account.url}") #{account.domain}
.container
div.row
div.col-xs-3
img(src=photoURL).img-thumbnail
p.about-me #{grav.aboutMe}
if grav.emails
div.col-xs-3
h3(data-i18n="account_profile.gravatar_contact") Contact
ul
each email in grav.emails
li #{email.value}
if grav.urls && grav.urls.length
div.col-xs-3
h3(data-i18n="account_profile.gravatar_websites") Websites
ul
each url in grav.urls
li
a(href="#{url.value}") #{url.title}
if grav.accounts
div.col-xs-3
h3(data-i18n="account_profile.gravatar_accounts") As Seen On
ul
each account in grav.accounts
li
a(href="#{account.url}") #{account.domain}
hr
p

124
app/templates/account/settings.jade
View file

@ -10,7 +10,7 @@ block content
else
button.btn#save-button.disabled.hide(data-i18n="account_settings.saveBackups") Changes Save Automatically
ul.nav.nav-tabs#settings-tabs
ul.nav.nav-pills#settings-tabs
li
a(href="#general-pane", data-toggle="tab", data-i18n="account_settings.me_tab") Me
li
@ -25,20 +25,17 @@ block content
.tab-content#settings-panes
#general-pane.tab-pane
p
.form-horizontal
.control-group
.form
.form-group
label.control-label(for="name", data-i18n="general.name") Name
.controls
input#name.input-large(name="name", type="text", value="#{me.get('name')||''}", placeholder="#{gravatarName}")
.control-group
input#name.form-control(name="name", type="text", value="#{me.get('name')||''}", placeholder="#{gravatarName}")
.form-group
label.control-label(for="email", data-i18n="general.email") Email
.controls
input#email.input-large(name="email", type="text", value="#{me.get('email')}")
input#email.form-control(name="email", type="text", value="#{me.get('email')}")
if !isProduction
.control-group
label.control-label(for="email", data-i18n="forms.admin") Admin
.controls
input#admin.input-large(name="admin", type="checkbox", checked=me.get('permissions').indexOf('admin')>-1))
.form-group.checkbox
label(for="email", data-i18n="forms.admin") Admin
input#admin(name="admin", type="checkbox", checked=me.get('permissions').indexOf('admin')>-1))
#picture-pane.tab-pane
@ -50,10 +47,12 @@ block content
else
.thumbnails
each photo, i in photos
.span2
.thumbnail
label(for="photo-#{i}")
img(src=photo).img-polaroid
img(src=photo)
br
input(type="radio", name="photoURL", value="#{photo}", id="photo-#{i}", checked=photo==chosenPhoto)
.clearfix
p
a(href="http://en.gravatar.com/profiles/edit/?noclose#your-images", target="_blank", data-i18n="account_settings.gravatar_add_more_photos") Add more photos to your Gravatar account to access them here.
@ -62,108 +61,95 @@ block content
#password-pane.tab-pane
p
.form-horizontal
.control-group
.form
.form-group
label.control-label(for="password", data-i18n="account_settings.new_password") New Password
.controls
input#password.input-large(name="password", type="password")
.control-group
input#password.form-control(name="password", type="password")
.form-group
label.control-label(for="password2", data-i18n="account_settings.new_password_verify") Verify
.controls
input#password2.input-large(name="password2", type="password")
input#password2.form-control(name="password2", type="password")
#email-pane.tab-pane
h3(data-i18n="account_settings.email_subscriptions") Email Subscriptions
p
.form-horizontal
.control-group
.form
.form-group.checkbox
label.control-label(for="email_announcement", data-i18n="account_settings.email_announcements") Announcements
.controls
input#email_announcement(name="email_announcement", type="checkbox", checked=subs.announcement)
span.help-inline(data-i18n="account_settings.email_announcements_description") Get emails on the latest news and developments at CodeCombat.
input#email_announcement(name="email_announcement", type="checkbox", checked=subs.announcement)
span.help-block(data-i18n="account_settings.email_announcements_description") Get emails on the latest news and developments at CodeCombat.
.form-horizontal
.control-group
.form
.form-group.checkbox
label.control-label(for="email_notification", data-i18n="account_settings.email_notifications") Notifications
.controls
input#email_notification(name="email_notification", type="checkbox", checked=subs.notification)
span.help-inline(data-i18n="account_settings.email_notifications_description") Get periodic notifications for your account.
input#email_notification(name="email_notification", type="checkbox", checked=subs.notification)
span.help-block(data-i18n="account_settings.email_notifications_description") Get periodic notifications for your account.
hr
.form-horizontal
h4(data-i18n="account_settings.contributor_emails") Contributor Class Emails
h4(data-i18n="account_settings.contributor_emails") Contributor Class Emails
span(data-i18n="account_settings.contribute_prefix") We're looking for people to join our party! Check out the
a(href="/contribute", data-i18n="account_settings.contribute_page") contribute page
span(data-i18n="account_settings.contribute_suffix") to find out more.
span(data-i18n="account_settings.contribute_prefix") We're looking for people to join our party! Check out the
a(href="/contribute", data-i18n="account_settings.contribute_page") contribute page
span(data-i18n="account_settings.contribute_suffix") to find out more.
br
br
.control-group
.form
.form-group.checkbox
label.control-label(for="email_developer")
span(data-i18n="classes.archmage_title")
| Archmage
br
|
span(data-i18n="classes.archmage_title_description")
| (Coder)
.controls
input#email_developer(name="email_developer", type="checkbox", checked=subs.developer)
span(data-i18n="contribute.archmage_subscribe_desc").help-inline Get emails about general news and announcements about CodeCombat.
input#email_developer(name="email_developer", type="checkbox", checked=subs.developer)
span(data-i18n="contribute.archmage_subscribe_desc").help-block Get emails about general news and announcements about CodeCombat.
.control-group
.form-group.checkbox
label.control-label(for="email_level_creator")
span(data-i18n="classes.artisan_title")
| Artisan
br
|
span(data-i18n="classes.artisan_title_description")
| (Level Builder)
.controls
input#email_level_creator(name="email_level_creator", type="checkbox", checked=subs.level_creator)
span(data-i18n="contribute.artisan_subscribe_desc").help-inline Get emails on level editor updates and announcements.
input#email_level_creator(name="email_level_creator", type="checkbox", checked=subs.level_creator)
span(data-i18n="contribute.artisan_subscribe_desc").help-block Get emails on level editor updates and announcements.
.control-group
.form-group.checkbox
label.control-label(for="email_tester")
span(data-i18n="classes.adventurer_title")
| Adventurer
br
|
span(data-i18n="classes.adventurer_title_description")
| (Level Playtester)
.controls
input#email_tester(name="email_tester", type="checkbox", checked=subs.tester)
span(data-i18n="contribute.adventurer_subscribe_desc").help-inline Get emails when there are new levels to test.
input#email_tester(name="email_tester", type="checkbox", checked=subs.tester)
span(data-i18n="contribute.adventurer_subscribe_desc").help-block Get emails when there are new levels to test.
.control-group
.form-group.checkbox
label.control-label(for="email_article_editor")
span(data-i18n="classes.scribe_title")
| Scribe
br
|
span(data-i18n="classes.scribe_title_description")
| (Article Editor)
.controls
input#email_article_editor(name="email_article_editor", type="checkbox", checked=subs.article_editor)
span(data-i18n="contribute.scribe_subscribe_desc").help-inline Get emails about article writing announcements.
input#email_article_editor(name="email_article_editor", type="checkbox", checked=subs.article_editor)
span(data-i18n="contribute.scribe_subscribe_desc").help-block Get emails about article writing announcements.
.control-group
.form-group.checkbox
label.control-label(for="email_translator")
span(data-i18n="classes.diplomat_title")
| Diplomat
br
|
span(data-i18n="classes.diplomat_title_description")
| (Translator)
.controls
input#email_translator(name="email_translator", type="checkbox", checked=subs.translator)
span(data-i18n="contribute.diplomat_subscribe_desc").help-inline Get emails about i18n developments and, eventually, levels to translate.
input#email_translator(name="email_translator", type="checkbox", checked=subs.translator)
span(data-i18n="contribute.diplomat_subscribe_desc").help-block Get emails about i18n developments and, eventually, levels to translate.
.control-group
.form-group.checkbox
label.control-label(for="email_support")
span(data-i18n="classes.ambassador_title")
| Ambassador
br
|
span(data-i18n="classes.ambassador_title_description")
| (Support)
.controls
input#email_support(name="email_support", type="checkbox", checked=subs.support)
span(data-i18n="contribute.ambassador_subscribe_desc").help-inline Get emails on support updates and multiplayer developments.
input#email_support(name="email_support", type="checkbox", checked=subs.support)
span(data-i18n="contribute.ambassador_subscribe_desc").help-block Get emails on support updates and multiplayer developments.
button.btn#toggle-all-button(data-i18n="account_settings.email_toggle") Toggle All

12
app/templates/account/wizard_settings_tab.jade
View file

@ -9,14 +9,12 @@ canvas#tinting-display(width=200, height=200).img-rounded
div.sliders
div.slider-cell
label(for=group.humanized+"_hue", data-i18n="hue") Hue
.controls
.selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue')
.selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue')
div.slider-cell
label(for=group.humanized+"_saturation", data-i18n="saturation") Saturation
.controls
.selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation')
.selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation')
div.slider-cell
label(for=group.humanized+"_lightness", data-i18n="lightness") Lightness
.controls
.selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness')
div.clearfix
.selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness')
div.clearfix
div.clearfix

52
app/templates/base.jade
View file

@ -1,37 +1,37 @@
body
#fb-root
block header
.navbar.navbar-fixed-top
.navbar-inner
.content.clearfix
a.brand(href='/')
.nav.navbar.navbar-fixed-top#top-nav
.content.clearfix
.navbar-header
a.navbar-brand(href='/')
img(src="/images/pages/base/logo.png", title="CodeCombat", alt="CodeCombat")
select.language-dropdown
select.language-dropdown
if me.get('anonymous') === false
button.btn.btn-primary.navbuttontext#logout-button(data-i18n="login.log_out") Log Out
a.btn.btn-primary.navbuttontext(href="/account/profile/#{me.id}")
div.navbuttontext-user-name
| #{me.displayName()}
i.icon-cog.icon-white.big
if me.get('anonymous') === false
button.btn.btn-primary.navbuttontext#logout-button(data-i18n="login.log_out") Log Out
a.btn.btn-primary.navbuttontext(href="/account/profile/#{me.id}")
div.navbuttontext-user-name
| #{me.displayName()}
i.icon-cog.icon-white.big
else
button.btn.btn-primary.navbuttontext(data-toggle="coco-modal", data-target="modal/signup", data-i18n="login.sign_up") Create Account
button.btn.btn-primary.navbuttontext(data-toggle="coco-modal", data-target="modal/login", data-i18n="login.log_in") Log In
else
button.btn.btn-primary.navbuttontext(data-toggle="coco-modal", data-target="modal/signup", data-i18n="login.sign_up") Create Account
button.btn.btn-primary.navbuttontext(data-toggle="coco-modal", data-target="modal/login", data-i18n="login.log_in") Log In
ul(class='navbar-link-text').nav.pull-right
li.play
a(href='/play', data-i18n="nav.play") Levels
li.editor
a(href='/editor', data-i18n="nav.editor") Editor
li.blog
a(href='http://blog.codecombat.com/', data-i18n="nav.blog") Blog
li.forum
a(href='http://discourse.codecombat.com/', data-i18n="nav.forum") Forum
if me.isAdmin()
li.admin
a(href='/admin', data-i18n="nav.admin") Admin
ul(class='navbar-link-text').nav.navbar-nav.pull-right
li.play
a(href='/play', data-i18n="nav.navbar-nav.play") Levels
li.editor
a(href='/editor', data-i18n="nav.navbar-nav.editor") Editor
li.blog
a(href='http://blog.codecombat.com/', data-i18n="nav.navbar-nav.blog") Blog
li.forum
a(href='http://discourse.codecombat.com/', data-i18n="nav.navbar-nav.forum") Forum
if me.isAdmin()
li.admin
a(href='/admin', data-i18n="nav.navbar-nav.admin") Admin
block outer_content
#outer-content-wrapper

15
app/templates/cla.jade
View file

@ -89,14 +89,13 @@
else
h3 SIGN HERE
.form-horizontal
.control-group
label.control-label Github Username
.controls
input(name="github-username", type="text")#github-username
span.help-block Please include if contributing to the
a(href="github.com/codecombat/codecombat") Github repository
| .
.form
.form-group
label(for="github-username") Github Username
input(name="github-username", type="text")#github-username.form-control
span.help-block Please include if contributing to the
p(href="github.com/codecombat/codecombat") Github repository
| .
p
| Please press I AGREE below to indicate your agreement.
button.btn#agreement-button I AGREE

2
app/templates/contribute/adventurer.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#adventurer-main
.class_image
img(src="/images/pages/contribute/adventurer.png", alt="")
img.img-responsive(src="/images/pages/contribute/adventurer.png", alt="")
h2
span(data-i18n="classes.adventurer_title") Adventurer

4
app/templates/contribute/ambassador.jade
View file

@ -1,4 +1,4 @@
extends /templates/base
.img-responsiveextends /templates/base
block content
@ -9,7 +9,7 @@ block content
div.class-main#ambassador-main
.class_image
img(src="/images/pages/contribute/ambassador.png", alt="")
img.img-responsive(src="/images/pages/contribute/ambassador.png", alt="")
h2
span(data-i18n="classes.ambassador_title") Ambassador

2
app/templates/contribute/archmage.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#archmage-main
.class_image
img(src="/images/pages/contribute/archmage.png", alt="")
img.img-responsive(src="/images/pages/contribute/archmage.png", alt="")
h2
span(data-i18n="classes.archmage_title") Archmage

2
app/templates/contribute/artisan.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#artisan-main
.class_image
img(src="/images/pages/contribute/artisan.png", alt="")
img.img-responsive(src="/images/pages/contribute/artisan.png", alt="")
h2
span(data-i18n="classes.artisan_title") Artisan

16
app/templates/contribute/contribute.jade
View file

@ -12,7 +12,7 @@ block content
h2(data-i18n="contribute.page_title") Contributing
#homepage_screenshot
img(src="/images/pages/contribute/contribute_header.png", alt="")
img.img-responsive(src="/images/pages/contribute/contribute_header.png", alt="")
p
strong(data-i18n="contribute.introduction_desc_intro")
@ -52,7 +52,7 @@ block content
#archmage
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/archmage.png", alt="")
img.img-responsive(src="/images/pages/contribute/archmage.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.archmage_title") Archmage
@ -115,7 +115,7 @@ block content
#artisan
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/artisan.png", alt="")
img.img-responsive(src="/images/pages/contribute/artisan.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.artisan_title") Artisan
@ -177,7 +177,7 @@ block content
#adventurer
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/adventurer.png", alt="")
img.img-responsive(src="/images/pages/contribute/adventurer.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.adventurer_title") Adventurer
@ -238,7 +238,7 @@ block content
#scribe
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/scribe.png", alt="")
img.img-responsive(src="/images/pages/contribute/scribe.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.scribe_title") Scribe
@ -287,7 +287,7 @@ block content
#diplomat
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/diplomat.png", alt="")
img.img-responsive(src="/images/pages/contribute/diplomat.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.diplomat_title") Diplomat
@ -339,7 +339,7 @@ block content
#ambassador
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/ambassador.png", alt="")
img.img-responsive(src="/images/pages/contribute/ambassador.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.ambassador_title") Ambassador
@ -392,7 +392,7 @@ block content
#counselor
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/counselor.png", alt="")
img.img-responsive(src="/images/pages/contribute/counselor.png", alt="")
h3.header-scrolling-fix
span(data-i18n="classes.counselor_title") Counselor

2
app/templates/contribute/counselor.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#sounselor-main
.class_image
img(src="/images/pages/contribute/counselor.png", alt="")
img.img-responsive(src="/images/pages/contribute/counselor.png", alt="")
h2
span(data-i18n="classes.counselor_title") Counselor

2
app/templates/contribute/diplomat.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#diplomat-main
.class_image
img(src="/images/pages/contribute/diplomat.png", alt="")
img.img-responsive(src="/images/pages/contribute/diplomat.png", alt="")
h2
span(data-i18n="classes.diplomat_title") Diplomat

2
app/templates/contribute/scribe.jade
View file

@ -9,7 +9,7 @@ block content
div.class-main#scribe-main
.class_image
img(src="/images/pages/contribute/scribe.png", alt="")
img.img-responsive(src="/images/pages/contribute/scribe.png", alt="")
h2
span(data-i18n="classes.scribe_title") Scribe

12
app/templates/editor/level/component/new.jade
View file

@ -4,15 +4,13 @@ block modal-header-content
h3(data-i18n="editor.new_component_title") Create New Component
block modal-body-content
form.form-horizontal
.control-group
form.form
.form-group
label(for="level-component-system", data-i18n="editor.new_component_field_system").control-label System
.controls
input#level-component-system.input-large(name="system", type="text")
.control-group
input.form-control#level-component-system(name="system", type="text")
.form-group
label(for="level-component-name", data-i18n="general.name").control-label Name
.controls
input#level-component-name.input-large(name="name", type="text")
input.form-control#level-component-name(name="name", type="text")
block modal-footer-content
button(data-dismiss="modal", data-i18n="common.cancel").btn Cancel

4
app/templates/editor/level/edit.jade
View file

@ -2,7 +2,7 @@ extends /templates/base
block outer_content
.outer-content
.top-controls-area
h2.level-title-header
span(data-i18n="editor.level_title") Level Editor
@ -17,6 +17,7 @@ block outer_content
button(title="⌃↩ or ⌘↩: Play preview of current level", data-i18n="common.play")#play-button.btn.btn-inverse.banner Play!
button.btn.btn-inverse.banner.dropdown-toggle(data-toggle="dropdown")
i.icon-cog.icon-white
ul.dropdown-menu
li
@ -27,7 +28,6 @@ block outer_content
a(data-delay="3000", href="#", data-i18n="common.delay_3_sec") 3 seconds
a(data-delay="5000", href="#", data-i18n="common.delay_5_sec") 5 seconds
a(data-delay="90019001", href="#", data-i18n="common.manual") Manual
.clearfix
ul.nav.nav-tabs
li.active

9
app/templates/editor/level/fork.jade
View file

@ -4,11 +4,10 @@ block modal-header-content
h3(data-i18n="editor.fork_title") Fork New Version
block modal-body-content
form#save-level-form.form-horizontal
.control-group
label.control-label(for="level-name") Name
.controls
textarea#level-name.input-large(name="name", type="text")
form#save-level-form.form
.form-group
label(for="level-name") Name
input#level-name(name="name", type="text").form-control
block modal-footer-content
button.btn(data-dismiss="modal") Cancel

47
app/templates/editor/level/save.jade
View file

@ -3,22 +3,19 @@ extends /templates/modal/save_version
block modal-body-content
h3= "Level: " + level.get('name') + " - " + (levelNeedsSave ? "Modified" : "Not Modified")
if levelNeedsSave
form#save-level-form.form-horizontal
.control-group
form#save-level-form.form
.form-group
label.control-label(for="level-commit-message") Commit Message
.controls
textarea#level-commit-message.input-large(name="commit-message", type="text")
textarea.form-control#level-commit-message(name="commit-message", type="text")
if level.isPublished()
.control-group
.form-group.checkbox
label.control-label(for="level-version-is-major") Major Changes?
.controls
input#level-version-is-major.input-large(name="version-is-major", type="checkbox")
span.help-block (Could this update break old solutions of the level?)
input#level-version-is-major(name="version-is-major", type="checkbox")
span.help-block (Could this update break old solutions of the level?)
if !level.isPublished()
.control-group
.form-group.checkbox
label.control-label(for="level-publish") Publish This Level (irreversible)?
.controls
input#level-publish.input-large(name="publish", type="checkbox")
input#level-publish(name="publish", type="checkbox")
if modifiedComponents.length
hr
@ -26,19 +23,17 @@ block modal-body-content
each component in modifiedComponents
- var id = component.get('_id')
h4= "Component: " + component.get('system') + '.' + component.get('name')
form.component-form.form-horizontal(id="save-component-" + id + "-form")
form.component-form(id="save-component-" + id + "-form")
input(name="component-original", type="hidden", value=component.get('original'))
input(name="component-parent-major-version", type="hidden", value=component.get('version').major)
.control-group
.form-group
label.control-label(for=id + "-commit-message") Commit Message
.controls
textarea.input-large(id=id + "-commit-message", name="commit-message", type="text")
textarea.form-control(id=id + "-commit-message", name="commit-message", type="text")
if component.isPublished()
.control-group
.form-group.checkbox
label.control-label(for=id + "-version-is-major") Major Changes?
.controls
input.input-large(id=id + "-version-is-major", name="version-is-major", type="checkbox")
span.help-block (Could this update break anything depending on this Component?)
input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
span.help-block (Could this update break anything depending on this Component?)
if modifiedSystems.length
hr
@ -46,16 +41,14 @@ block modal-body-content
each system in modifiedSystems
- var id = system.get('_id')
h4= "System: " + system.get('name')
form.system-form.form-horizontal(id="save-system-" + id + "-form")
form.system-form(id="save-system-" + id + "-form")
input(name="system-original", type="hidden", value=system.get('original'))
input(name="system-parent-major-version", type="hidden", value=system.get('version').major)
.control-group
.form-group
label.control-label(for=id + "-commit-message") Commit Message
.controls
textarea.input-large(id=id + "-commit-message", name="commit-message", type="text")
textarea.form-control(id=id + "-commit-message", name="commit-message", type="text")
if system.isPublished()
.control-group
.form-group.checkbox
label.control-label(for=id + "-version-is-major") Major Changes?
.controls
input.input-large(id=id + "-version-is-major", name="version-is-major", type="checkbox")
span.help-block (Could this update break anything depending on this System?)
input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
span.help-block (Could this update break anything depending on this System?)

1
app/templates/editor/level/settings_tab.jade
View file

@ -1,2 +1 @@
h3(data-i18n="editor.level_settings_title") Settings
#settings-treema

7
app/templates/editor/level/system/new.jade
View file

@ -4,11 +4,10 @@ block modal-header-content
h3(data-i18n="editor.create_system_title") Create New System
block modal-body-content
form.form-horizontal
.control-group
form.form
.form-group
label(for="level-system-name", data-i18n="general.name").control-label Name
.controls
input#level-system-name.input-large(name="name", type="text")
input.form-control#level-system-name(name="name", type="text")
block modal-footer-content
button(data-dismiss="modal", data-i18n="common.cancel").btn Cancel

2
app/templates/editor/thang/edit.jade
View file

@ -2,7 +2,7 @@ extends /templates/base
block content
img#portrait.img-polaroid
img#portrait.img-thumbnail
button.btn.btn-primary#save-button(data-toggle="coco-modal", data-target="modal/save_version")
| Save

2
app/templates/employers.jade
View file

@ -4,7 +4,7 @@ block content
.row
.span5
.col-md-6
h2 CodeCombat for Employers

4
app/templates/home.jade
View file

@ -23,6 +23,6 @@ block content
div#homepage_button_container
div.homepage_button
a#beginner-campaign.btn.btn-warning.btn-large.highlight(href="/play/level/rescue-mission")
a#beginner-campaign(href="/play/level/rescue-mission")
canvas(width="125", height="150")
span(data-i18n="home.play") Play
button(data-i18n="home.play").btn.btn-warning.btn-lg.highlight Play

33
app/templates/kinds/search.jade
View file

@ -8,19 +8,20 @@ block content
hr
div.results
table
div.modal.hide.fade#new-model-modal
.modal-header
h3 Create New #{modelLabel}
.modal-body
form.form-horizontal
.control-group
label.control-label(for="name") Name
.controls
input#name.input-large(name="name", type="text")
.modal-footer
button.btn(data-dismiss="modal") Cancel
button.btn.btn-primary.new-model-submit Create
.modal-body.wait.hide
h3 Reticulating Splines...
.progress.progress-striped.active
.bar
div.modal.fade#new-model-modal
.modal-dialog
.modal-content
.modal-header
h3 Create New #{modelLabel}
.modal-body
form.form
.form-group
label.control-label(for="name") Name
input#name.form-control(name="name", type="text")
.modal-footer
button.btn(data-dismiss="modal") Cancel
button.btn.btn-primary.new-model-submit Create
.modal-body.wait.hide
h3 Reticulating Splines...
.progress.progress-striped.active
.progress-bar

2
app/templates/loading.jade
View file

@ -5,4 +5,4 @@ block content
.loading-screen
h1(data-i18n="common.loading") Loading...
.progress.progress-striped.active
.bar
.progress-bar

16
app/templates/modal/contact.jade
View file

@ -13,15 +13,13 @@ block modal-body-content
span(data-i18n="contact.forum_prefix") For anything public, please try
a(href="http://discourse.codecombat.com/", data-i18n="contact.forum_page") our forum
span(data-i18n="contact.forum_suffix") instead.
.form-inline
.control-group
label.control-label(for="contact-email", data-i18n="general.email") Email
.controls
input#contact-email.input-block-level(name="email", type="email", value="#{me.get('anonymous') ? '' : me.get('email')}", placeholder="Where should we reply?")
.control-group
label.control-label(for="contact-message", data-i18n="general.message") Message
.controls
textarea#contact-message.input-block-level(name="message", rows=8)
.form
.form-group
label.control-label(for="contact-email", data-i18n="general.email") Email
input#contact-email.form-control(name="email", type="email", value="#{me.get('anonymous') ? '' : me.get('email')}", placeholder="Where should we reply?")
.form-group
label.control-label(for="contact-message", data-i18n="general.message") Message
textarea#contact-message.form-control(name="message", rows=8)
block modal-footer-content
span.sending-indicator.pull-left.hide(data-i18n="common.sending") Sending...

13
app/templates/modal/error.jade
View file

@ -1,6 +1,7 @@
.modal.hide.fade#modal-error
.modal-header
.button.close(type="button", data-dismiss="modal", aria-hidden="true") &times;
h3 Error #{status}: #{statusText}
.modal-body
p #{message}
.modal.fade#modal-error
.modal-dialog
.modal-header
.button.close(type="button", data-dismiss="modal", aria-hidden="true") &times;
h3 Error #{status}: #{statusText}
.modal-body
p #{message}

16
app/templates/modal/login.jade
View file

@ -4,15 +4,13 @@ block modal-header-content
h3(data-i18n="login.log_in") Log In
block modal-body-content
.form-inline
.control-group
label.control-label(for="login-email", data-i18n="general.email") Email
.controls
input#login-email.input-large(name="email", type="email")
.control-group
label.control-label(for="login-password", data-i18n="forms.password") Password
.controls
input#login-password.input-large(name="password", type="password")
.form
.form-group
label.control-label(for="login-email", data-i18n="general.email") Email
input#login-email.input-large.form-control(name="email", type="email")
.form-group
label.control-label(for="login-password", data-i18n="forms.password") Password
input#login-password.input-large.form-control(name="password", type="password")
block modal-body-wait-content
h3(data-i18n="login.logging_in") Logging In

49
app/templates/modal/modal_base.jade
View file

@ -1,27 +1,26 @@
block modal-header
.modal-header
if closeButton
.button.close(type="button", data-dismiss="modal", aria-hidden="true") &times;
block modal-header-content
h3 man bites God
block modal-body
.modal-body
block modal-body-content
p Man Bites God are the bad boys of the Melbourne live music and comedy scene. It is like being drowned in a bathtub of harmony.
img(src="http://www.manbitesgod.com/images/picturecoupleb.jpg")
img(src="http://www.manbitesgod.com/images/manrantb.jpg")
.modal-body.wait.hide
block modal-body-wait-content
h3 Reticulating Splines...
.progress.progress-striped.active
.bar
block modal-footer
.modal-footer
block modal-footer-content
button.btn.btn-primary(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.okay") Okay
.modal-dialog
.modal-content
block modal-header
.modal-header
if closeButton
.button.close(type="button", data-dismiss="modal", aria-hidden="true") &times;
block modal-header-content
h3 man bites God
block modal-body
.modal-body
block modal-body-content
p Man Bites God are the bad boys of the Melbourne live music and comedy scene. It is like being drowned in a bathtub of harmony.
img(src="http://www.manbitesgod.com/images/picturecoupleb.jpg")
img(src="http://www.manbitesgod.com/images/manrantb.jpg")
.modal-body.wait.hide
block modal-body-wait-content
h3 Reticulating Splines...
.progress.progress-striped.active
.bar
block modal-footer
.modal-footer
block modal-footer-content
button.btn.btn-primary(type="button", data-dismiss="modal", aria-hidden="true", data-i18n="modal.okay") Okay

7
app/templates/modal/recover.jade
View file

@ -5,10 +5,9 @@ block modal-header-content
block modal-body-content
.form-inline
.control-group
label.control-label(for="recover-email", data-i18n="general.email") Email
.controls
input#recover-email.input-large(name="email", type="email")
.form-group
label.control-label(for="recover-email", data-i18n="general.email") Email
input#recover-email.input-large.form-control(name="email", type="email")
block modal-body-wait-content
h3(data-i18n="common.sending") Sending...

18
app/templates/modal/save_version.jade
View file

@ -4,16 +4,14 @@ block modal-header-content
h3(data-i18n="versions.save_version_title") Save New Version
block modal-body-content
form.form-horizontal
.control-group
label.control-label(for="commitMessage", data-i18n="general.commit_msg") Commit Message
.controls
textarea#commit-message.input-large(name="commitMessage", type="text")
.control-group
label.control-label(for="level-version-is-major", data-i18n="versions.new_major_version") New Major Version
.controls
input#major-version.input-large(name="version-is-major", type="checkbox")
span.help-block
form.form
.form-group
label.control-label(for="commitMessage", data-i18n="general.commit_msg") Commit Message
textarea#commit-message.input-large.form-control(name="commitMessage", type="text")
.form-group
label.control-label(for="level-version-is-major", data-i18n="versions.new_major_version") New Major Version
input#major-version.input-large.form-control(name="version-is-major", type="checkbox")
span.help-block
block modal-body-wait-content
h3(data-i18n="common.saving") Saving...

54
app/templates/modal/signup.jade
View file

@ -4,42 +4,30 @@ block modal-header-content
h3(data-i18n="signup.create_account_title") Create Account to Save Progress
block modal-body-content
.modal-body
p(data-i18n="signup.description") It's free. Just need a couple things and you'll be good to go:
.form-inline
.control-group
label.control-label(for="signup-email", data-i18n="general.email") Email
.controls
input#signup-email.input-large(name="email", type="email")
.control-group
label.control-label(for="signup-password", data-i18n="forms.password") Password
.controls
input#signup-password.input-large(name="password", type="password")
hr
.control-group
label.checkbox.control-label(for="signup-subscribe")
input#signup-subscribe(name="subscribe", type="checkbox", checked='checked')
span(data-i18n="signup.email_announcements") Receive announcements by email
.control-group
label.checkbox.control-label(for="signup-confirm-age")
input#signup-confirm-age(name="confirm-age", type="checkbox", checked='checked')
span(data-i18n="signup.coppa") 13+ or non-USA
a(href="http://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act", data-i18n="signup.coppa_why", target="_blank") (Why?)
.modal-content
.modal-body
p(data-i18n="signup.description") It's free. Just need a couple things and you'll be good to go:
.form
.form-group
label.control-label(for="signup-email", data-i18n="general.email") Email
input#signup-email.form-control.input-large(name="email", type="email")
.form-group
label.control-label(for="signup-password", data-i18n="forms.password") Password
input#signup-password.input-large.form-control(name="password", type="password")
hr
.form-group.checkbox
label.control-label(for="signup-subscribe")
input#signup-subscribe(name="subscribe", type="checkbox", checked='checked')
span(data-i18n="signup.email_announcements") Receive announcements by email
.form-group.checkbox
label.control-label(for="signup-confirm-age")
input#signup-confirm-age(name="confirm-age", type="checkbox", checked='checked')
span(data-i18n="signup.coppa") 13+ or non-USA
a(href="http://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act", data-i18n="signup.coppa_why", target="_blank") (Why?)
block modal-body-wait-content
h3(data-i18n="signup.creating") Creating Account...
block modal-footer
.modal-footer
button.btn.btn-primary.btn-large#signup-button(data-i18n="signup.sign_up") Sign Up
.modal-footer.network-logins
div
.fb-login-button(data-show-faces="false", data-width="200", data-max-rows="1", data-scope="email")
div
.gplus-login-button#gplus-login-button
// TODO does not work; the events (clicks, submissions) in new modal do not fire
div
span(data-i18n="general.or") or
span
a(data-toggle="coco-modal", data-target="modal/login", data-i18n="signup.log_in")#link-to-login log in with password
button.btn.btn-primary.btn-large#signup-button(data-i18n="signup.sign_up") Sign Up

12
app/templates/modal/wizard_settings.jade
View file

@ -8,16 +8,14 @@ block modal-body-content
canvas(width="120px", height="150px")
.settings
.form-vertical
.control-group
.form-vertical.form
.form-group
label.control-label(for="name")
| Name
button.btn.btn-mini.btn-primary#random-name Random
.controls
input#wizard-settings-name.input-large(name="name", type="text", value="#{me.get('name')||''}")
.control-group
label.control-label(for="wizardColor1") Hat Color
.controls
input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
.form-group
label.control-label(for="wizardColor1") Hat Color
.selector#wizard-settings-color-1
block modal-footer-content

2
app/templates/play.jade
View file

@ -11,7 +11,7 @@ block content
.row
each campaign in campaigns
.campaign-container.span5
.campaign-container.col-sm-6
h1
a(href="/play/level/#{campaign.levels[0].id}", data-i18n="play.campaign_#{campaign.id}")= campaign.name
p.campaign-description(data-i18n="[html]play.campaign_#{campaign.id}_description")!= campaign.description

6
app/templates/play/level/control_bar.jade
View file

@ -6,8 +6,8 @@ h4.home
h4.title #{worldName}
button.btn.btn-mini.btn-inverse.banner#docs-button(title="Show level instructions", data-i18n="play_level.guide") Guide
button.btn.btn-xs.btn-inverse.banner#docs-button(title="Show level instructions", data-i18n="play_level.guide") Guide
button.btn.btn-mini.btn-inverse.banner#multiplayer-button(title="Multiplayer", data-i18n="play_level.multiplayer") Multiplayer
button.btn.btn-xs.btn-inverse.banner#multiplayer-button(title="Multiplayer", data-i18n="play_level.multiplayer") Multiplayer
button.btn.btn-mini.btn-inverse.banner#restart-button(title="Reload all custom code to reset level", data-i18n="play_level.restart") Restart
button.btn.btn-xs.btn-inverse.banner#restart-button(title="Reload all custom code to reset level", data-i18n="play_level.restart") Restart

31
app/templates/play/level/modal/docs.jade
View file

@ -1,16 +1,17 @@
// TODO: refactor to be like other modals
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.guide_title") Guide
.modal-body
ul.nav.nav-tabs
for doc in docs
li
a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
div.tab-content
for doc in docs
div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn.btn-primary Close
.modal-dialog
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.guide_title") Guide
.modal-body
ul.nav.nav-tabs
for doc in docs
li
a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
div.tab-content
for doc in docs
div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn.btn-primary Close

21
app/templates/play/level/modal/infinite_loop.jade
View file

@ -1,10 +1,11 @@
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.infinite_loop_title") Infinite Loop Detected
.modal-body
p(data-i18n="play_level.infinite_loop_explanation") The initial code to build the world never finished running. It's probably either really slow or has an infinite loop. Or there might be a bug. You can either try running this code again or reset the code to the default state. If that doesn't fix it, please let us know.
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.infinite_loop_wait").btn#restart-level-infinite-loop-retry-button Try Again
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.infinite_loop_reload").btn.btn-primary#restart-level-infinite-loop-confirm-button Reset Level
.modal-dialog
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.infinite_loop_title") Infinite Loop Detected
.modal-body
p(data-i18n="play_level.infinite_loop_explanation") The initial code to build the world never finished running. It's probably either really slow or has an infinite loop. Or there might be a bug. You can either try running this code again or reset the code to the default state. If that doesn't fix it, please let us know.
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.infinite_loop_wait").btn#restart-level-infinite-loop-retry-button Try Again
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.infinite_loop_reload").btn.btn-primary#restart-level-infinite-loop-confirm-button Reset Level

63
app/templates/play/level/modal/multiplayer.jade
View file

@ -1,40 +1,29 @@
// TODO: refactor to be like other modals
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.multiplayer_title") Multiplayer Settings
.modal-body
// This section is for later
.modal-dialog
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.multiplayer_title") Multiplayer Settings
.form-horizontal
.control-group
label.control-label(for="multiplayer") Multiplayer
.controls
input#multiplayer.input-large(name="multiplayer", type="checkbox", checked=multiplayer)
span.help-inline Enable others to join your game.
hr
div#link-area
p(data-i18n="play_level.multiplayer_link_description") Give this link to anyone to have them join you.
textarea.well#multiplayer-join-link(readonly=true)= joinLink
p
strong(data-i18n="play_level.multiplayer_hint_label") Hint:
span(data-i18n="play_level.multiplayer_hint") Click the link to select all, then press ⌘-C or Ctrl-C to copy the link.
.modal-body
.form
.form-group.checkbox
label(for="multiplayer")
input#multiplayer(name="multiplayer", type="checkbox", checked=multiplayer)
| Multiplayer
span.help-block Enable others to join your game.
hr
p(data-i18n="play_level.multiplayer_coming_soon") More multiplayer features to come!
//#multiplayer-team-selection.hide
// h4 Multiplayer Team Selection
// form
// label.radio
// input(type="radio", name="team-selection", value="humans")
// span Red Team
// label.radio
// input(type="radio", name="team-selection", value="ogres")
// span Blue Team
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn.btn-primary Close
div#link-area
p(data-i18n="play_level.multiplayer_link_description") Give this link to anyone to have them join you.
textarea.well#multiplayer-join-link(readonly=true)= joinLink
p
strong(data-i18n="play_level.multiplayer_hint_label") Hint:
span(data-i18n="play_level.multiplayer_hint") Click the link to select all, then press ⌘-C or Ctrl-C to copy the link.
p(data-i18n="play_level.multiplayer_coming_soon") More multiplayer features to come!
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn.btn-primary Close

21
app/templates/play/level/modal/reload.jade
View file

@ -1,10 +1,11 @@
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.reload_title") Reload All Code?
.modal-body
p(data-i18n="play_level.reload_really") Are you sure you want to reload this level back to the beginning?
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn Close
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.reload_confirm").btn.btn-primary#restart-level-confirm-button Reload All
.modal-dialog
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3(data-i18n="play_level.reload_title") Reload All Code?
.modal-body
p(data-i18n="play_level.reload_really") Are you sure you want to reload this level back to the beginning?
.modal-footer
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="modal.close").btn Close
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="play_level.reload_confirm").btn.btn-primary#restart-level-confirm-button Reload All

91
app/templates/play/level/modal/victory.jade
View file

@ -1,47 +1,48 @@
// TODO: refactor to be like other modals
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3
span(data-i18n="play_level.victory_title_prefix")
span= levelName
span(data-i18n="play_level.victory_title_suffix") Complete
.modal-body!= body
.modal-footer
if me.get('anonymous')
p.sign-up-poke
button.btn.btn-success.sign-up-button.btn-large(data-toggle="coco-modal", data-target="modal/signup", data-i18n="play_level.victory_sign_up") Sign Up to Save Progress
span(data-i18n="play_level.victory_sign_up_poke") Want to save your code? Create a free account!
else
div.rating.hide
span(data-i18n="play_level.victory_rate_the_level") Rate the level:
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
if hasNextLevel
if nextLevelText
button.btn.btn-primary.next-level-button(data-dismiss="modal")= nextLevelText
else
button.btn.btn-primary.next-level-button(data-dismiss="modal", data-i18n="play_level.victory_play_next_level") Play Next Level
else
a.btn.btn-primary(href="/", data-dismiss="modal", data-i18n="play_level.victory_go_home") Go Home
if !me.get('anonymous')
div.review.hide
span(data-i18n="play_level.victory_review") Tell us more!
br
textarea
div.share-buttons
.g-plusone(data-href="http://codecombat.com", data-size="medium")
.fb-like(data-href="https://www.facebook.com/codecombat", data-send="false", data-layout="button_count", data-width="350", data-show-faces="true", data-ref="coco_victory_#{fbRef}")
a.twitter-follow-button(href="https://twitter.com/CodeCombat", data-show-count="true", data-show-screen-name="false", data-dnt="true", data-align="right", data-i18n="nav.twitter_follow") Follow
iframe.github-star-button(src="http://ghbtns.com/github-btn.html?user=codecombat&repo=codecombat&type=watch&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="110", height="20")
if showHourOfCodeDoneButton
.modal-dialog
.modal-header
button(type='button', data-dismiss="modal", aria-hidden="true").close &times;
h3
span(data-i18n="play_level.victory_title_prefix")
span= levelName
span(data-i18n="play_level.victory_title_suffix") Complete
.modal-body!= body
.modal-footer
h3.pull-left(data-i18n="play_level.victory_hour_of_code_done") Are You Done?
a(href="http://code.org/api/hour/finish")
strong(data-i18n="play_level.victory_hour_of_code_done_yes") Yes, I'm finished with my Hour of Code!
img(src="/images/level/csedweek-logo-final-small.jpg", alt="CS Ed Week Hour of Code", title="I'm finished with my Hour of Code", width=80)
if me.get('anonymous')
p.sign-up-poke
button.btn.btn-success.sign-up-button.btn-large(data-toggle="coco-modal", data-target="modal/signup", data-i18n="play_level.victory_sign_up") Sign Up to Save Progress
span(data-i18n="play_level.victory_sign_up_poke") Want to save your code? Create a free account!
else
div.rating.hide
span(data-i18n="play_level.victory_rate_the_level") Rate the level:
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
i.icon-star-empty
if hasNextLevel
if nextLevelText
button.btn.btn-primary.next-level-button(data-dismiss="modal")= nextLevelText
else
button.btn.btn-primary.next-level-button(data-dismiss="modal", data-i18n="play_level.victory_play_next_level") Play Next Level
else
a.btn.btn-primary(href="/", data-dismiss="modal", data-i18n="play_level.victory_go_home") Go Home
if !me.get('anonymous')
div.review.hide
span(data-i18n="play_level.victory_review") Tell us more!
br
textarea
div.share-buttons
.g-plusone(data-href="http://codecombat.com", data-size="medium")
.fb-like(data-href="https://www.facebook.com/codecombat", data-send="false", data-layout="button_count", data-width="350", data-show-faces="true", data-ref="coco_victory_#{fbRef}")
a.twitter-follow-button(href="https://twitter.com/CodeCombat", data-show-count="true", data-show-screen-name="false", data-dnt="true", data-align="right", data-i18n="nav.twitter_follow") Follow
iframe.github-star-button(src="http://ghbtns.com/github-btn.html?user=codecombat&repo=codecombat&type=watch&count=true", allowtransparency="true", frameborder="0", scrolling="0", width="110", height="20")
if showHourOfCodeDoneButton
.modal-footer
h3.pull-left(data-i18n="play_level.victory_hour_of_code_done") Are You Done?
a(href="http://code.org/api/hour/finish")
strong(data-i18n="play_level.victory_hour_of_code_done_yes") Yes, I'm finished with my Hour of Code!
img(src="/images/level/csedweek-logo-final-small.jpg", alt="CS Ed Week Hour of Code", title="I'm finished with my Hour of Code", width=80)

12
app/templates/play/level/playback.jade
View file

@ -1,13 +1,13 @@
button.btn.btn-mini.btn-inverse#play-button.playing(title="Ctrl/Cmd + P: Toggle level play/pause")
button.btn.btn-xs.btn-inverse#play-button.playing(title="Ctrl/Cmd + P: Toggle level play/pause")
i.icon-play.icon-white.big
i.icon-pause.icon-white.big
i.icon-repeat.icon-white.big
button.btn.btn-mini.btn-inverse#volume-button(title="Adjust volume")
button.btn.btn-xs.btn-inverse#volume-button(title="Adjust volume")
i.icon-volume-off.icon-white.big
i.icon-volume-down.icon-white.big
i.icon-volume-up.icon-white.big
button.btn.btn-mini.btn-inverse#music-button(title="Toggle Music")
button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
| ♫
.scrubber
@ -16,11 +16,11 @@ button.btn.btn-mini.btn-inverse#music-button(title="Toggle Music")
.scrubber-handle
.btn-group.dropup#playback-settings
button.btn.btn-mini.btn-inverse#zoom-in-button(title="Zoom In (or scroll down)")
button.btn.btn-xs.btn-inverse#zoom-in-button(title="Zoom In (or scroll down)")
i.icon-zoom-in.icon-white
button.btn.btn-mini.btn-inverse#zoom-out-button(title="Zoom Out (or scroll up)")
button.btn.btn-xs.btn-inverse#zoom-out-button(title="Zoom Out (or scroll up)")
i.icon-zoom-out.icon-white
button.btn.btn-mini.btn-inverse.dropdown-toggle(data-toggle="dropdown")#settings-button
button.btn.btn-xs.btn-inverse.dropdown-toggle(data-toggle="dropdown")#settings-button
i.icon-cog.icon-white.big
ul.dropdown-menu
if me.get('name') == "Nick"

Some files were not shown because too many files have changed in this diff Show more