From e53e113dcde3e3686095c3661307efccc5c7e64e Mon Sep 17 00:00:00 2001 From: elijah Date: Wed, 18 Feb 2015 23:44:14 -0800 Subject: initial conversation from leap_doc and leap_website --- pages/assets/_bootstrap-3.3.2.scss | 50 + pages/assets/_leap.scss | 240 +++ pages/assets/_mixins.scss | 113 ++ pages/assets/bootstrap/_alerts.scss | 73 + pages/assets/bootstrap/_badges.scss | 67 + pages/assets/bootstrap/_breadcrumbs.scss | 26 + pages/assets/bootstrap/_button-groups.scss | 243 +++ pages/assets/bootstrap/_buttons.scss | 160 ++ pages/assets/bootstrap/_carousel.scss | 269 +++ pages/assets/bootstrap/_close.scss | 36 + pages/assets/bootstrap/_code.scss | 69 + pages/assets/bootstrap/_component-animations.scss | 38 + pages/assets/bootstrap/_dropdowns.scss | 214 +++ pages/assets/bootstrap/_forms.scss | 570 +++++++ pages/assets/bootstrap/_glyphicons.scss | 301 ++++ pages/assets/bootstrap/_grid.scss | 84 + pages/assets/bootstrap/_input-groups.scss | 166 ++ pages/assets/bootstrap/_jumbotron.scss | 50 + pages/assets/bootstrap/_labels.scss | 66 + pages/assets/bootstrap/_list-group.scss | 124 ++ pages/assets/bootstrap/_media.scss | 61 + pages/assets/bootstrap/_mixins.scss | 39 + pages/assets/bootstrap/_modals.scss | 148 ++ pages/assets/bootstrap/_navbar.scss | 663 +++++++ pages/assets/bootstrap/_navs.scss | 244 +++ pages/assets/bootstrap/_normalize.scss | 427 +++++ pages/assets/bootstrap/_pager.scss | 54 + pages/assets/bootstrap/_pagination.scss | 88 + pages/assets/bootstrap/_panels.scss | 265 +++ pages/assets/bootstrap/_popovers.scss | 135 ++ pages/assets/bootstrap/_print.scss | 107 ++ pages/assets/bootstrap/_progress-bars.scss | 87 + pages/assets/bootstrap/_responsive-embed.scss | 35 + pages/assets/bootstrap/_responsive-utilities.scss | 177 ++ pages/assets/bootstrap/_scaffolding.scss | 150 ++ pages/assets/bootstrap/_tables.scss | 234 +++ pages/assets/bootstrap/_theme.scss | 273 +++ pages/assets/bootstrap/_thumbnails.scss | 38 + pages/assets/bootstrap/_tooltip.scss | 103 ++ pages/assets/bootstrap/_type.scss | 298 ++++ pages/assets/bootstrap/_utilities.scss | 56 + pages/assets/bootstrap/_variables.scss | 862 ++++++++++ pages/assets/bootstrap/_wells.scss | 29 + pages/assets/bootstrap/mixins/_alerts.scss | 14 + .../bootstrap/mixins/_background-variant.scss | 11 + pages/assets/bootstrap/mixins/_border-radius.scss | 18 + pages/assets/bootstrap/mixins/_buttons.scss | 52 + pages/assets/bootstrap/mixins/_center-block.scss | 7 + pages/assets/bootstrap/mixins/_clearfix.scss | 22 + pages/assets/bootstrap/mixins/_forms.scss | 88 + pages/assets/bootstrap/mixins/_gradients.scss | 58 + pages/assets/bootstrap/mixins/_grid-framework.scss | 81 + pages/assets/bootstrap/mixins/_grid.scss | 122 ++ pages/assets/bootstrap/mixins/_hide-text.scss | 21 + pages/assets/bootstrap/mixins/_image.scss | 33 + pages/assets/bootstrap/mixins/_labels.scss | 12 + pages/assets/bootstrap/mixins/_list-group.scss | 31 + pages/assets/bootstrap/mixins/_nav-divider.scss | 10 + .../bootstrap/mixins/_nav-vertical-align.scss | 9 + pages/assets/bootstrap/mixins/_opacity.scss | 8 + pages/assets/bootstrap/mixins/_pagination.scss | 23 + pages/assets/bootstrap/mixins/_panels.scss | 24 + pages/assets/bootstrap/mixins/_progress-bar.scss | 10 + pages/assets/bootstrap/mixins/_reset-filter.scss | 8 + pages/assets/bootstrap/mixins/_resize.scss | 6 + .../bootstrap/mixins/_responsive-visibility.scss | 21 + pages/assets/bootstrap/mixins/_size.scss | 10 + pages/assets/bootstrap/mixins/_tab-focus.scss | 9 + pages/assets/bootstrap/mixins/_table-row.scss | 28 + pages/assets/bootstrap/mixins/_text-emphasis.scss | 11 + pages/assets/bootstrap/mixins/_text-overflow.scss | 8 + .../assets/bootstrap/mixins/_vendor-prefixes.scss | 222 +++ pages/assets/font-awesome/css/font-awesome.css | 1801 ++++++++++++++++++++ pages/assets/font-awesome/css/font-awesome.min.css | 4 + pages/assets/font-awesome/fonts/FontAwesome.otf | Bin 0 -> 93888 bytes .../font-awesome/fonts/fontawesome-webfont.eot | Bin 0 -> 60767 bytes .../font-awesome/fonts/fontawesome-webfont.svg | 565 ++++++ .../font-awesome/fonts/fontawesome-webfont.ttf | Bin 0 -> 122092 bytes .../font-awesome/fonts/fontawesome-webfont.woff | Bin 0 -> 71508 bytes .../font-awesome/fonts/fontawesome-webfont.woff2 | Bin 0 -> 56780 bytes pages/assets/style.scss | 58 + 81 files changed, 10937 insertions(+) create mode 100644 pages/assets/_bootstrap-3.3.2.scss create mode 100644 pages/assets/_leap.scss create mode 100644 pages/assets/_mixins.scss create mode 100644 pages/assets/bootstrap/_alerts.scss create mode 100644 pages/assets/bootstrap/_badges.scss create mode 100644 pages/assets/bootstrap/_breadcrumbs.scss create mode 100644 pages/assets/bootstrap/_button-groups.scss create mode 100644 pages/assets/bootstrap/_buttons.scss create mode 100644 pages/assets/bootstrap/_carousel.scss create mode 100644 pages/assets/bootstrap/_close.scss create mode 100644 pages/assets/bootstrap/_code.scss create mode 100644 pages/assets/bootstrap/_component-animations.scss create mode 100644 pages/assets/bootstrap/_dropdowns.scss create mode 100644 pages/assets/bootstrap/_forms.scss create mode 100644 pages/assets/bootstrap/_glyphicons.scss create mode 100644 pages/assets/bootstrap/_grid.scss create mode 100644 pages/assets/bootstrap/_input-groups.scss create mode 100644 pages/assets/bootstrap/_jumbotron.scss create mode 100644 pages/assets/bootstrap/_labels.scss create mode 100644 pages/assets/bootstrap/_list-group.scss create mode 100644 pages/assets/bootstrap/_media.scss create mode 100644 pages/assets/bootstrap/_mixins.scss create mode 100644 pages/assets/bootstrap/_modals.scss create mode 100644 pages/assets/bootstrap/_navbar.scss create mode 100644 pages/assets/bootstrap/_navs.scss create mode 100644 pages/assets/bootstrap/_normalize.scss create mode 100644 pages/assets/bootstrap/_pager.scss create mode 100644 pages/assets/bootstrap/_pagination.scss create mode 100644 pages/assets/bootstrap/_panels.scss create mode 100644 pages/assets/bootstrap/_popovers.scss create mode 100644 pages/assets/bootstrap/_print.scss create mode 100644 pages/assets/bootstrap/_progress-bars.scss create mode 100644 pages/assets/bootstrap/_responsive-embed.scss create mode 100644 pages/assets/bootstrap/_responsive-utilities.scss create mode 100644 pages/assets/bootstrap/_scaffolding.scss create mode 100644 pages/assets/bootstrap/_tables.scss create mode 100644 pages/assets/bootstrap/_theme.scss create mode 100644 pages/assets/bootstrap/_thumbnails.scss create mode 100644 pages/assets/bootstrap/_tooltip.scss create mode 100644 pages/assets/bootstrap/_type.scss create mode 100644 pages/assets/bootstrap/_utilities.scss create mode 100644 pages/assets/bootstrap/_variables.scss create mode 100644 pages/assets/bootstrap/_wells.scss create mode 100644 pages/assets/bootstrap/mixins/_alerts.scss create mode 100644 pages/assets/bootstrap/mixins/_background-variant.scss create mode 100644 pages/assets/bootstrap/mixins/_border-radius.scss create mode 100644 pages/assets/bootstrap/mixins/_buttons.scss create mode 100644 pages/assets/bootstrap/mixins/_center-block.scss create mode 100644 pages/assets/bootstrap/mixins/_clearfix.scss create mode 100644 pages/assets/bootstrap/mixins/_forms.scss create mode 100644 pages/assets/bootstrap/mixins/_gradients.scss create mode 100644 pages/assets/bootstrap/mixins/_grid-framework.scss create mode 100644 pages/assets/bootstrap/mixins/_grid.scss create mode 100644 pages/assets/bootstrap/mixins/_hide-text.scss create mode 100644 pages/assets/bootstrap/mixins/_image.scss create mode 100644 pages/assets/bootstrap/mixins/_labels.scss create mode 100644 pages/assets/bootstrap/mixins/_list-group.scss create mode 100644 pages/assets/bootstrap/mixins/_nav-divider.scss create mode 100644 pages/assets/bootstrap/mixins/_nav-vertical-align.scss create mode 100644 pages/assets/bootstrap/mixins/_opacity.scss create mode 100644 pages/assets/bootstrap/mixins/_pagination.scss create mode 100644 pages/assets/bootstrap/mixins/_panels.scss create mode 100644 pages/assets/bootstrap/mixins/_progress-bar.scss create mode 100644 pages/assets/bootstrap/mixins/_reset-filter.scss create mode 100644 pages/assets/bootstrap/mixins/_resize.scss create mode 100644 pages/assets/bootstrap/mixins/_responsive-visibility.scss create mode 100644 pages/assets/bootstrap/mixins/_size.scss create mode 100644 pages/assets/bootstrap/mixins/_tab-focus.scss create mode 100644 pages/assets/bootstrap/mixins/_table-row.scss create mode 100644 pages/assets/bootstrap/mixins/_text-emphasis.scss create mode 100644 pages/assets/bootstrap/mixins/_text-overflow.scss create mode 100644 pages/assets/bootstrap/mixins/_vendor-prefixes.scss create mode 100644 pages/assets/font-awesome/css/font-awesome.css create mode 100644 pages/assets/font-awesome/css/font-awesome.min.css create mode 100644 pages/assets/font-awesome/fonts/FontAwesome.otf create mode 100644 pages/assets/font-awesome/fonts/fontawesome-webfont.eot create mode 100644 pages/assets/font-awesome/fonts/fontawesome-webfont.svg create mode 100644 pages/assets/font-awesome/fonts/fontawesome-webfont.ttf create mode 100644 pages/assets/font-awesome/fonts/fontawesome-webfont.woff create mode 100644 pages/assets/font-awesome/fonts/fontawesome-webfont.woff2 create mode 100644 pages/assets/style.scss (limited to 'pages/assets') diff --git a/pages/assets/_bootstrap-3.3.2.scss b/pages/assets/_bootstrap-3.3.2.scss new file mode 100644 index 0000000..a89db63 --- /dev/null +++ b/pages/assets/_bootstrap-3.3.2.scss @@ -0,0 +1,50 @@ +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset and dependencies +@import "bootstrap/normalize"; +@import "bootstrap/print"; +//@import "bootstrap/glyphicons"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +//@import "bootstrap/component-animations"; +//@import "bootstrap/dropdowns"; +//@import "bootstrap/button-groups"; +//@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +//@import "bootstrap/pagination"; +//@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +//@import "bootstrap/jumbotron"; +//@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +//@import "bootstrap/progress-bars"; +//@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +//@import "bootstrap/responsive-embed"; +@import "bootstrap/wells"; +//@import "bootstrap/close"; + +// Components w/ JavaScript +//@import "bootstrap/modals"; +//@import "bootstrap/tooltip"; +//@import "bootstrap/popovers"; +//@import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; diff --git a/pages/assets/_leap.scss b/pages/assets/_leap.scss new file mode 100644 index 0000000..e6a14f1 --- /dev/null +++ b/pages/assets/_leap.scss @@ -0,0 +1,240 @@ +a:visited { + color: $link-visited-color; +} + +// +// MASTHEAD +// + +#masthead { + width: 100%; + margin: 0; + background-color: $masthead-bg-color; + border-bottom: $masthead-border; + + @include gradient-vertical(lighten($masthead-bg-color,8%),$masthead-bg-color); + box-shadow: inset 0 0 8px 1px darken($masthead-bg-color, 8%); + box-shadow-top: 0; + + .masthead-inner { + height: $masthead-height; + @include cutout-menu( + $ul-id: top-menu, + $active-bg: $cutout-color, + $left-indent: $masthead-text-left-margin, + $small-left-indent: $masthead-small-text-left-margin, + $small-screen: $small-screen); + @media (max-width: $small-screen) { + height: $masthead-small-height; + } + } + + .logo { + background: $masthead-bg; + @media (max-width: $small-screen) { + background: $masthead-small-bg; + } + } + + h1 { + font-weight: bold; + white-space: nowrap; + margin: 0; + color: $masthead-color; + + line-height: $masthead-height; + font-size: $masthead-text-size; + padding-left: $masthead-text-left-margin - 2px; + @media (max-width: $small-screen) { + line-height: $masthead-small-height; + font-size: $masthead-small-text-size; + padding-left: $masthead-small-text-left-margin - 2px; + } + } + + #top-menu a.tab { + font-weight: bold; + color: white; + background: rgba(0,0,0,0.5); + &.active { + color: black; + } + } + +} + +// +// SIDEBAR +// + +#sidebar { + #navigation { + margin-top: 20px; + } +} + +#sidebar .nav.nav-stacked { + li { + background: $side-column-bg-color; + margin: 0px; + &.active { + a { + border: 0; + border-right: 4px solid $side-column-active-bg-color; + background: $side-column-active-bg-color; + color: $side-column-active-color; + &:hover { + //color: $side_column_text_color; + background: lighten($side-column-active-bg-color, 40%); + border-color: lighten($side-column-active-bg-color, 20%); + } + } + } + } + li { + &.level1 a { + padding-left: 1*$side-column-indent; + } + &.level2 a { + padding-left: 2*$side-column-indent; + } + &.level3 a { + padding-left: 3*$side-column-indent; + } + &.level4 a { + padding-left: 4*$side-column-indent; + } + } + a { + cursor: pointer; + border-radius: 0 !important; + border: 0; + border-right: 4px solid $side-column-active-bg-color; + color: $side-column-text-color; + line-height: 1.2em; + &:hover { + background: lighten($side-column-bg-color, 10%); + border-color: lighten($side-column-active-bg-color, 50%); + text-decoration: underline; + } + } +} + +#sidebar ul { + box-shadow: 2px 4px 4px 0px darken($background-color,40%); +} + +// +// BACKGROUND +// + +#background { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 400px; + z-index: -1; + @include gradient-vertical($background-color-start, $background-color); +} + +// +// TYPOGRAPHY +// + +#TOC { + margin-top: 1em; + margin-bottom: 1em; + ol { + list-style-type: none; + margin: 0px; + padding-left: 20px; + } + li ol { + margin-left: 0px; + //padding-left: 20px; + } +} + +.p { + margin-top: 1em; + margin-bottom: 1em; + &:first-child { + margin-top: 0; + } +} + +.ol {@extend ol} +.li {@extend li} + +.h1 {@extend h1} +.h2 {@extend h2} +.h3 {@extend h3} + +.bigger { + font-size: 140%; + line-height: 140%; + margin: 20px 0; +} + +// +// HOME PAGE +// + +.standout { + a {color: black;} + span { + white-space: nowrap; + margin: 0 15px; + font-size: 18px; + @media (max-width: $small-screen) { + font-size: 13px; + } + } + .fa { + vertical-align: middle; + } + line-height: 48px; + margin-bottom: 20px; +} + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 11px; // same as 'p', not sure what variable this is. + background-color: $well-bg-color; + box-shadow: inset 0px 0px 5px 1px darken($well-bg-color,10%); + border: 1px solid lighten($well-border-color,50%); + border-radius: 0px; + .heading { + margin-top: -6px; + margin-bottom: 6px; + font-weight: bold; + font-size: 1.1em; + } +} + +// +// BLOGGY STUFF +// + +.byline { + margin-bottom: 1em; +} + +.page-summary { + @include clearfix(); +} + +article.page-summary { + h2 { + margin-bottom: 0px; + } + p { + margin: 0; + } + .byline { + font-weight: bold; + margin: 0px; + } +} diff --git a/pages/assets/_mixins.scss b/pages/assets/_mixins.scss new file mode 100644 index 0000000..62c10e3 --- /dev/null +++ b/pages/assets/_mixins.scss @@ -0,0 +1,113 @@ +// +// An UL,LI menu that looks like a cutout and is positioned at the bottom +// of the enclosing block. +// +// This mixin is applied to the enclosing block. +// +// the markup should look like this: +// +// enclosing-block +// ul#id +// li.tab +// a.tab +// li.tab +// a.tab +// +// the id for the ul is passed in as the first argument. +// +// it is difficult to create cutout tabs with a border that look good +// in all browsers and at different client font-sizes. +// +// the problem is that the tab element needs to line up exactly with the +// bottom of the enclosing block in order to make the cutout illusion work. +// most methods of doing this create weird jitters in webkit +// and gecko when resizing the screen or changing the font size. it does not +// look so good to have a dark line under your tab, breaking the illusion of +// a cutout. +// +// the method which makes this jitter-free is to use a height and a line-height +// for the tag instead of vertical padding. This requires that is a block +// which requires that the
  • is block & floated, instead of inline. +// +// This method seems to produce by far the most consistant results of letting +// the active tab sit snugly on the bottom of the enclosing div. +// +// Change with caution: I spent way too much time getting this to work. +// + +@mixin cutout-menu( + $ul-id, + $active-bg: white, + $left-indent: 10px, + $padding: 7px 14px, + $text-size: 14px, + $small-left-indent: 10px, + $small-padding: 5px 10px, + $small-text-size: 12px, + $small-screen: $small-sm-max) { + + $border: false; + + // allows us to put the menu at the bottom + position: relative; + + ul##{$ul-id} { + margin: 0; + padding: 0; + + // allows us to put the menu at the bottom + position: absolute; + + // puts the menu at the bottom of the enclosing block, + // minus the overhand needed to cover the border: + // bottom: -(border_width($border)); + bottom: -1px; + + // padding-left: don't do it. + // ^^ In some cases, we need width of 100% to actually be the screen width, + // but adding padding makes 100% width be wider than the screen. + // So, instead, we add margin to the first and last li. + + white-space: nowrap; + + li.tab { + display: block; + float: left; + &.first { + margin-left: $left-indent; + @media (max-width: $small-screen) { + margin-left: $small-left-indent; + } + } + a.tab { + display: block; + padding: $padding; + @media (max-width: $small-screen) { + padding: $small-padding; + } + + // line-height makes for much more consistant rendering than using vertical + // padding. essential to prevent tabs from looking horrible at different fonts sizes. + font-size: $text-size; + line-height: $text-size; + @media (max-width: $small-screen) { + font-size: $small-text-size; + line-height: $small-text-size; + } + + // the transparent border is needed to prevent the menu from jittering + // when the active border is applied. + border: 1px solid transparent; + border-bottom: 0; + + &.active { + background-color: $active-bg; + @if $border { + border: $border; + border-bottom: 0; + } + } + } + } + } +} diff --git a/pages/assets/bootstrap/_alerts.scss b/pages/assets/bootstrap/_alerts.scss new file mode 100644 index 0000000..372eec9 --- /dev/null +++ b/pages/assets/bootstrap/_alerts.scss @@ -0,0 +1,73 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + 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; + } +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + 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 { + @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); +} + +.alert-info { + @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); +} + +.alert-warning { + @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); +} + +.alert-danger { + @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); +} diff --git a/pages/assets/bootstrap/_badges.scss b/pages/assets/bootstrap/_badges.scss new file mode 100644 index 0000000..a647592 --- /dev/null +++ b/pages/assets/bootstrap/_badges.scss @@ -0,0 +1,67 @@ +// +// Badges +// -------------------------------------------------- + + +// Base class +.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; + } + + .btn-xs & { + top: 0; + padding: 1px 5px; + } + + // [converter] extracted a& to a.badge + + // Account for badges in navs + .list-group-item.active > &, + .nav-pills > .active > a > & { + color: $badge-active-color; + background-color: $badge-active-bg; + } + + .list-group-item > & { + float: right; + } + + .list-group-item > & + & { + margin-right: 5px; + } + + .nav-pills > li > a > & { + margin-left: 3px; + } +} + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: $badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} diff --git a/pages/assets/bootstrap/_breadcrumbs.scss b/pages/assets/bootstrap/_breadcrumbs.scss new file mode 100644 index 0000000..51b676c --- /dev/null +++ b/pages/assets/bootstrap/_breadcrumbs.scss @@ -0,0 +1,26 @@ +// +// Breadcrumbs +// -------------------------------------------------- + + +.breadcrumb { + padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + margin-bottom: $line-height-computed; + list-style: none; + background-color: $breadcrumb-bg; + border-radius: $border-radius-base; + + > li { + display: inline-block; + + + li:before { + content: #{$breadcrumb-separator}\00a0; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: $breadcrumb-color; + } + } + + > .active { + color: $breadcrumb-active-color; + } +} diff --git a/pages/assets/bootstrap/_button-groups.scss b/pages/assets/bootstrap/_button-groups.scss new file mode 100644 index 0000000..a73bc54 --- /dev/null +++ b/pages/assets/bootstrap/_button-groups.scss @@ -0,0 +1,243 @@ +// +// Button groups +// -------------------------------------------------- + +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + } +} + +// 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 { + margin-left: -5px; // Offset the first child's margin + @include clearfix; + + .btn-group, + .input-group { + float: left; + } + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; + } +} + +.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; + &: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:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + @include border-left-radius(0); +} + +// 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:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-right-radius(0); + } +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + +// 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 +// ---------------------- + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +// 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)); + + // 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-left: 0; +} +// Carets in other button sizes +.btn-lg .caret { + border-width: $caret-width-large $caret-width-large 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 $caret-width-large $caret-width-large; +} + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + > .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 { + &: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-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(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 .dropdown-menu { + left: auto; + } +} + + +// Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } +} diff --git a/pages/assets/bootstrap/_buttons.scss b/pages/assets/bootstrap/_buttons.scss new file mode 100644 index 0000000..7f0db45 --- /dev/null +++ b/pages/assets/bootstrap/_buttons.scss @@ -0,0 +1,160 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +.btn { + display: inline-block; + margin-bottom: 0; // For input.btn + font-weight: $btn-font-weight; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + 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); + + &, + &:active, + &.active { + &:focus, + &.focus { + @include tab-focus; + } + } + + &:hover, + &:focus, + &.focus { + color: $btn-default-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: $cursor-disabled; + 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); +} +// 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); +} +// 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); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: $link-color; + font-weight: normal; + border-radius: 0; + + &, + &:active, + &.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: $link-hover-decoration; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.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-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); +} +.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%; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/pages/assets/bootstrap/_carousel.scss b/pages/assets/bootstrap/_carousel.scss new file mode 100644 index 0000000..f91d7ee --- /dev/null +++ b/pages/assets/bootstrap/_carousel.scss @@ -0,0 +1,269 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; + + > .item { + display: none; + position: relative; + @include transition(.6s ease-in-out left); + + // Account for jankitude on images + > img, + > a > img { + @include img-responsive; + line-height: 1; + } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + @include transition-transform(0.6s ease-in-out); + @include backface-visibility(hidden); + @include perspective(1000); + + &.next, + &.active.right { + @include translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + @include translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + @include translate3d(0, 0, 0); + left: 0; + } + } + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + 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; + 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. + + // 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: 0; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); + } + + // Hover/focus state + &:hover, + &:focus { + outline: 0; + color: $carousel-control-color; + text-decoration: none; + @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%; + margin-left: -10px; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; + } + .icon-prev, + .icon-next { + width: 20px; + height: 20px; + margin-top: -10px; + line-height: 1; + 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) + } + } +} + +// 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; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; + + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + 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. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer + // + // 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 { + margin: 0; + width: 12px; + height: 12px; + background-color: $carousel-indicator-active-bg; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { + position: absolute; + 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 + } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: $screen-sm-min) { + + // Scale up the controls a smidge + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } +} diff --git a/pages/assets/bootstrap/_close.scss b/pages/assets/bootstrap/_close.scss new file mode 100644 index 0000000..3b74d8a --- /dev/null +++ b/pages/assets/bootstrap/_close.scss @@ -0,0 +1,36 @@ +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + 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: $close-color; + text-decoration: none; + cursor: pointer; + @include opacity(.5); + } + + // [converter] extracted button& to button.close +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/pages/assets/bootstrap/_code.scss b/pages/assets/bootstrap/_code.scss new file mode 100644 index 0000000..caa5f06 --- /dev/null +++ b/pages/assets/bootstrap/_code.scss @@ -0,0 +1,69 @@ +// +// Code (inline and block) +// -------------------------------------------------- + + +// Inline and block code styles +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: $code-color; + background-color: $code-bg; + border-radius: $border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: $kbd-color; + background-color: $kbd-bg; + border-radius: $border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } +} + +// Blocks of code +pre { + display: block; + 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; + 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-wrap; + background-color: transparent; + border-radius: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: $pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/pages/assets/bootstrap/_component-animations.scss b/pages/assets/bootstrap/_component-animations.scss new file mode 100644 index 0000000..1f76b8c --- /dev/null +++ b/pages/assets/bootstrap/_component-animations.scss @@ -0,0 +1,38 @@ +// +// 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/twbs/bootstrap/pull/3552. + +.fade { + opacity: 0; + @include transition(opacity .15s linear); + &.in { + opacity: 1; + } +} + +.collapse { + display: none; + visibility: hidden; + + &.in { display: block; visibility: visible; } + // [converter] extracted tr&.in to tr.collapse.in + // [converter] extracted tbody&.in to tbody.collapse.in +} + +tr.collapse.in { display: table-row; } + +tbody.collapse.in { display: table-row-group; } + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + @include transition-property(height, visibility); + @include transition-duration(.35s); + @include transition-timing-function(ease); +} diff --git a/pages/assets/bootstrap/_dropdowns.scss b/pages/assets/bootstrap/_dropdowns.scss new file mode 100644 index 0000000..b8120b8 --- /dev/null +++ b/pages/assets/bootstrap/_dropdowns.scss @@ -0,0 +1,214 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + 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; +} + +// The dropdown wrapper (div) +.dropup, +.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: $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; + font-size: $font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + 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 + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + @include nav-divider($dropdown-divider-bg); + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + 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, + &: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 + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter; + cursor: $cursor-disabled; + } +} + +// Open state for the dropdown +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: $font-size-small; + line-height: $line-height-base; + color: $dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// 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: $caret-width-base solid; + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } +} + + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: $grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + right: 0; left: auto; + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + left: 0; right: auto; + } + } +} diff --git a/pages/assets/bootstrap/_forms.scss b/pages/assets/bootstrap/_forms.scss new file mode 100644 index 0000000..72d130b --- /dev/null +++ b/pages/assets/bootstrap/_forms.scss @@ -0,0 +1,570 @@ +// +// Forms +// -------------------------------------------------- + + +// Normalize non-controls +// +// Restyle and baseline non-control form elements. + +fieldset { + padding: 0; + margin: 0; + border: 0; + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: $line-height-computed; + font-size: ($font-size-base * 1.5); + line-height: inherit; + color: $legend-color; + border: 0; + border-bottom: 1px solid $legend-border-color; +} + +label { + display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) + margin-bottom: 5px; + font-weight: bold; +} + + +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. + +// 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: 1px \9; // IE8-9 + line-height: normal; +} + +// Set the height of file controls to match text inputs +input[type="file"] { + display: block; +} + +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + @include tab-focus; +} + +// 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; +} + + +// 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; + 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; // Note: This has no effect on s in CSS. + @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 + @include placeholder; + + // Disabled and read-only inputs + // + // 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: $cursor-disabled; + background-color: $input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 + } + + // [converter] extracted textarea& to textarea.form-control +} + +// Reset height for `textarea`s +textarea.form-control { + height: auto; +} + + +// Search inputs in iOS +// +// This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +input[type="search"] { + -webkit-appearance: none; +} + + +// Special styles for iOS temporal inputs +// +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. As a workaround, we +// set a pixel line-height that matches the given height of the input, but only +// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + line-height: $input-height-base; + + &.input-sm, + .input-group-sm & { + line-height: $input-height-small; + } + + &.input-lg, + .input-group-lg & { + line-height: $input-height-large; + } + } +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: 15px; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; + + label { + min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} + +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + +// Apply same disabled cursor tweak as for inputs +// Some special care is needed because Star + +// 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}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'), + 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##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) 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; +} + +// Individual icons +.glyphicon-asterisk { &:before { content: "\2a"; } } +.glyphicon-plus { &:before { content: "\2b"; } } +.glyphicon-euro, +.glyphicon-eur { &: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; } } +.glyphicon-cd { &:before { content: \e201; } } +.glyphicon-save-file { &:before { content: \e202; } } +.glyphicon-open-file { &:before { content: \e203; } } +.glyphicon-level-up { &:before { content: \e204; } } +.glyphicon-copy { &:before { content: \e205; } } +.glyphicon-paste { &:before { content: \e206; } } +// The following 2 Glyphicons are omitted for the time being because +// they currently use Unicode codepoints that are outside the +// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle +// non-BMP codepoints in CSS string escapes, and thus can't display these two icons. +// Notably, the bug affects some older versions of the Android Browser. +// More info: https://github.com/twbs/bootstrap/issues/10106 +// .glyphicon-door { &:before { content: \1f6aa; } } +// .glyphicon-key { &:before { content: \1f511; } } +.glyphicon-alert { &:before { content: \e209; } } +.glyphicon-equalizer { &:before { content: \e210; } } +.glyphicon-king { &:before { content: \e211; } } +.glyphicon-queen { &:before { content: \e212; } } +.glyphicon-pawn { &:before { content: \e213; } } +.glyphicon-bishop { &:before { content: \e214; } } +.glyphicon-knight { &:before { content: \e215; } } +.glyphicon-baby-formula { &:before { content: \e216; } } +.glyphicon-tent { &:before { content: \26fa; } } +.glyphicon-blackboard { &:before { content: \e218; } } +.glyphicon-bed { &:before { content: \e219; } } +.glyphicon-apple { &:before { content: \f8ff; } } +.glyphicon-erase { &:before { content: \e221; } } +.glyphicon-hourglass { &:before { content: \231b; } } +.glyphicon-lamp { &:before { content: \e223; } } +.glyphicon-duplicate { &:before { content: \e224; } } +.glyphicon-piggy-bank { &:before { content: \e225; } } +.glyphicon-scissors { &:before { content: \e226; } } +.glyphicon-bitcoin { &:before { content: \e227; } } +.glyphicon-yen { &:before { content: \00a5; } } +.glyphicon-ruble { &:before { content: \20bd; } } +.glyphicon-scale { &:before { content: \e230; } } +.glyphicon-ice-lolly { &:before { content: \e231; } } +.glyphicon-ice-lolly-tasted { &:before { content: \e232; } } +.glyphicon-education { &:before { content: \e233; } } +.glyphicon-option-horizontal { &:before { content: \e234; } } +.glyphicon-option-vertical { &:before { content: \e235; } } +.glyphicon-menu-hamburger { &:before { content: \e236; } } +.glyphicon-modal-window { &:before { content: \e237; } } +.glyphicon-oil { &:before { content: \e238; } } +.glyphicon-grain { &:before { content: \e239; } } +.glyphicon-sunglasses { &:before { content: \e240; } } +.glyphicon-text-size { &:before { content: \e241; } } +.glyphicon-text-color { &:before { content: \e242; } } +.glyphicon-text-background { &:before { content: \e243; } } +.glyphicon-object-align-top { &:before { content: \e244; } } +.glyphicon-object-align-bottom { &:before { content: \e245; } } +.glyphicon-object-align-horizontal{ &:before { content: \e246; } } +.glyphicon-object-align-left { &:before { content: \e247; } } +.glyphicon-object-align-vertical { &:before { content: \e248; } } +.glyphicon-object-align-right { &:before { content: \e249; } } +.glyphicon-triangle-right { &:before { content: \e250; } } +.glyphicon-triangle-left { &:before { content: \e251; } } +.glyphicon-triangle-bottom { &:before { content: \e252; } } +.glyphicon-triangle-top { &:before { content: \e253; } } +.glyphicon-console { &:before { content: \e254; } } +.glyphicon-superscript { &:before { content: \e255; } } +.glyphicon-subscript { &:before { content: \e256; } } +.glyphicon-menu-left { &:before { content: \e257; } } +.glyphicon-menu-right { &:before { content: \e258; } } +.glyphicon-menu-down { &:before { content: \e259; } } +.glyphicon-menu-up { &:before { content: \e260; } } diff --git a/pages/assets/bootstrap/_grid.scss b/pages/assets/bootstrap/_grid.scss new file mode 100644 index 0000000..b15ca27 --- /dev/null +++ b/pages/assets/bootstrap/_grid.scss @@ -0,0 +1,84 @@ +// +// Grid system +// -------------------------------------------------- + + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include container-fixed; + + @media (min-width: $screen-sm-min) { + width: $container-sm; + } + @media (min-width: $screen-md-min) { + width: $container-md; + } + @media (min-width: $screen-lg-min) { + width: $container-lg; + } +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include container-fixed; +} + + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + @include make-row; +} + + +// Columns +// +// 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(xs); + + +// 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(sm); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: $screen-md-min) { + @include make-grid(md); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: $screen-lg-min) { + @include make-grid(lg); +} diff --git a/pages/assets/bootstrap/_input-groups.scss b/pages/assets/bootstrap/_input-groups.scss new file mode 100644 index 0000000..ae0e921 --- /dev/null +++ b/pages/assets/bootstrap/_input-groups.scss @@ -0,0 +1,166 @@ +// +// 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 { + // Ensure that the input is always above the *appended* addon button for + // proper border colors. + position: relative; + z-index: 2; + + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + + 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 > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + @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 > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + // Jankily prevent input button groups from wrapping with `white-space` and + // `font-size` in combination with `inline-block` on buttons. + font-size: 0; + white-space: nowrap; + + // Negative margin for spacing, position for bringing hovered/focused/actived + // element above the siblings. + > .btn { + position: relative; + + .btn { + margin-left: -1px; + } + // Bring the "active" button to the front + &:hover, + &:focus, + &:active { + z-index: 2; + } + } + + // Negative margin to only have a 1px border between the two + &:first-child { + > .btn, + > .btn-group { + margin-right: -1px; + } + } + &:last-child { + > .btn, + > .btn-group { + margin-left: -1px; + } + } +} diff --git a/pages/assets/bootstrap/_jumbotron.scss b/pages/assets/bootstrap/_jumbotron.scss new file mode 100644 index 0000000..e326b32 --- /dev/null +++ b/pages/assets/bootstrap/_jumbotron.scss @@ -0,0 +1,50 @@ +// +// Jumbotron +// -------------------------------------------------- + + +.jumbotron { + padding: $jumbotron-padding ($jumbotron-padding / 2); + margin-bottom: $jumbotron-padding; + color: $jumbotron-color; + background-color: $jumbotron-bg; + + h1, + .h1 { + color: $jumbotron-heading-color; + } + + p { + margin-bottom: ($jumbotron-padding / 2); + font-size: $jumbotron-font-size; + font-weight: 200; + } + + > hr { + border-top-color: darken($jumbotron-bg, 10%); + } + + .container &, + .container-fluid & { + 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: ($jumbotron-padding * 1.6) 0; + + .container &, + .container-fluid & { + padding-left: ($jumbotron-padding * 2); + padding-right: ($jumbotron-padding * 2); + } + + h1, + .h1 { + font-size: ($font-size-base * 4.5); + } + } +} diff --git a/pages/assets/bootstrap/_labels.scss b/pages/assets/bootstrap/_labels.scss new file mode 100644 index 0000000..42ed6ea --- /dev/null +++ b/pages/assets/bootstrap/_labels.scss @@ -0,0 +1,66 @@ +// +// 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; + + // [converter] extracted a& to a.label + + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } +} + +// Add hover effects, but only for links +a.label { + &:hover, + &:focus { + color: $label-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} + +// 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); +} diff --git a/pages/assets/bootstrap/_list-group.scss b/pages/assets/bootstrap/_list-group.scss new file mode 100644 index 0000000..26b23ff --- /dev/null +++ b/pages/assets/bootstrap/_list-group.scss @@ -0,0 +1,124 @@ +// +// List groups +// -------------------------------------------------- + + +// Base class +// +// Easily usable on