| @@ -0,0 +1,139 @@ | ||
| // | ||
| // Modals | ||
| // -------------------------------------------------- | ||
|
|
||
| // .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; | ||
| -webkit-overflow-scrolling: touch; | ||
|
|
||
| // Prevent Chrome on Windows from adding a focus outline. For details, see | ||
| // https://github.com/twbs/bootstrap/pull/10951. | ||
| outline: 0; | ||
|
|
||
| // 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; | ||
| } | ||
|
|
||
| // 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: $zindex-modal-background; | ||
| background-color: $modal-backdrop-bg; | ||
| // Fade for backdrop | ||
| &.fade { @include opacity(0); } | ||
| &.in { @include opacity($modal-backdrop-opacity); } | ||
| } | ||
|
|
||
| // Modal header | ||
| // Top section of the modal w/ title and dismiss | ||
| .modal-header { | ||
| 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; | ||
| } | ||
|
|
||
| // 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; | ||
| padding: $modal-inner-padding; | ||
| } | ||
|
|
||
| // Footer (for actions) | ||
| .modal-footer { | ||
| margin-top: 15px; | ||
| padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; | ||
| text-align: right; // right align buttons | ||
| border-top: 1px solid $modal-footer-border-color; | ||
| @include clearfix(); // clear it in case folks use .pull-* classes on buttons | ||
|
|
||
| // Properly space out buttons | ||
| .btn + .btn { | ||
| margin-left: 5px; | ||
| margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | ||
| } | ||
| // but override that for button groups | ||
| .btn-group .btn + .btn { | ||
| margin-left: -1px; | ||
| } | ||
| // and override it for block buttons as well | ||
| .btn-block + .btn-block { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| // Scale up the modal | ||
| @media (min-width: $screen-sm-min) { | ||
| // Automatically set modal's width for larger viewports | ||
| .modal-dialog { | ||
| width: $modal-md; | ||
| margin: 30px auto; | ||
| } | ||
| .modal-content { | ||
| @include box-shadow(0 5px 15px rgba(0,0,0,.5)); | ||
| } | ||
|
|
||
| // Modal sizes | ||
| .modal-sm { width: $modal-sm; } | ||
| } | ||
|
|
||
| @media (min-width: $screen-md-min) { | ||
| .modal-lg { width: $modal-lg; } | ||
| } |
| @@ -0,0 +1,242 @@ | ||
| // | ||
| // Navs | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| // -------------------------------------------------- | ||
|
|
||
| .nav { | ||
| margin-bottom: 0; | ||
| padding-left: 0; // Override default ul/ol | ||
| list-style: none; | ||
| @include clearfix(); | ||
|
|
||
| > 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 | ||
| // ------------------------- | ||
|
|
||
| // Give the tabs something to sit on | ||
| .nav-tabs { | ||
| 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 its :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; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Pills | ||
| // ------------------------- | ||
| .nav-pills { | ||
| > li { | ||
| float: left; | ||
|
|
||
| // Links rendered as pills | ||
| > a { | ||
| border-radius: $nav-pills-border-radius; | ||
| } | ||
| + li { | ||
| margin-left: 2px; | ||
| } | ||
|
|
||
| // Active state | ||
| &.active > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| color: $nav-pills-active-link-hover-color; | ||
| background-color: $nav-pills-active-link-hover-bg; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Stacked pills | ||
| .nav-stacked { | ||
| > li { | ||
| float: none; | ||
| + li { | ||
| margin-top: 2px; | ||
| margin-left: 0; // no need for this gap between nav items | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Nav variations | ||
| // -------------------------------------------------- | ||
|
|
||
| // 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; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // 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); | ||
| } |
| @@ -0,0 +1,55 @@ | ||
| // | ||
| // Pager pagination | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .pager { | ||
| padding-left: 0; | ||
| margin: $line-height-computed 0; | ||
| list-style: none; | ||
| text-align: center; | ||
| @include clearfix(); | ||
| li { | ||
| display: inline; | ||
| > a, | ||
| > span { | ||
| display: inline-block; | ||
| padding: 5px 14px; | ||
| background-color: $pager-bg; | ||
| border: 1px solid $pager-border; | ||
| border-radius: $pager-border-radius; | ||
| } | ||
|
|
||
| > a:hover, | ||
| > a:focus { | ||
| text-decoration: none; | ||
| background-color: $pager-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: $pager-bg; | ||
| cursor: not-allowed; | ||
| } | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,88 @@ | ||
| // | ||
| // Pagination (multiple pages) | ||
| // -------------------------------------------------- | ||
| .pagination { | ||
| display: inline-block; | ||
| 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; | ||
| color: $pagination-color; | ||
| 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); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > li > a, | ||
| > li > span { | ||
| &:hover, | ||
| &:focus { | ||
| color: $pagination-hover-color; | ||
| background-color: $pagination-hover-bg; | ||
| border-color: $pagination-hover-border; | ||
| } | ||
| } | ||
|
|
||
| > .active > a, | ||
| > .active > span { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| z-index: 2; | ||
| color: $pagination-active-color; | ||
| background-color: $pagination-active-bg; | ||
| border-color: $pagination-active-border; | ||
| cursor: default; | ||
| } | ||
| } | ||
|
|
||
| > .disabled { | ||
| > span, | ||
| > span:hover, | ||
| > span:focus, | ||
| > a, | ||
| > a:hover, | ||
| > a:focus { | ||
| color: $pagination-disabled-color; | ||
| background-color: $pagination-disabled-bg; | ||
| border-color: $pagination-disabled-border; | ||
| cursor: not-allowed; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Sizing | ||
| // -------------------------------------------------- | ||
|
|
||
| // Large | ||
| .pagination-lg { | ||
| @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); | ||
| } | ||
|
|
||
| // Small | ||
| .pagination-sm { | ||
| @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); | ||
| } |
| @@ -0,0 +1,241 @@ | ||
| // | ||
| // 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: $panel-body-padding; | ||
| @include clearfix(); | ||
| } | ||
|
|
||
| // 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 its 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)); | ||
| } | ||
|
|
||
|
|
||
| // 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; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| // Add border top radius for first one | ||
| &:first-child { | ||
| .list-group-item:first-child { | ||
| border-top: 0; | ||
| @include border-top-radius(($panel-border-radius - 1)); | ||
| } | ||
| } | ||
| // Add border bottom radius for last one | ||
| &:last-child { | ||
| .list-group-item:last-child { | ||
| border-bottom: 0; | ||
| @include border-bottom-radius(($panel-border-radius - 1)); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // 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; | ||
| } | ||
| // Add border top radius for first one | ||
| > .table:first-child, | ||
| > .table-responsive:first-child > .table:first-child { | ||
| @include border-top-radius(($panel-border-radius - 1)); | ||
|
|
||
| > thead:first-child, | ||
| > tbody:first-child { | ||
| > tr:first-child { | ||
| td:first-child, | ||
| th:first-child { | ||
| border-top-left-radius: ($panel-border-radius - 1); | ||
| } | ||
| td:last-child, | ||
| th:last-child { | ||
| border-top-right-radius: ($panel-border-radius - 1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // Add border bottom radius for last one | ||
| > .table:last-child, | ||
| > .table-responsive:last-child > .table:last-child { | ||
| @include border-bottom-radius(($panel-border-radius - 1)); | ||
|
|
||
| > tbody:last-child, | ||
| > tfoot:last-child { | ||
| > tr:last-child { | ||
| td:first-child, | ||
| th:first-child { | ||
| border-bottom-left-radius: ($panel-border-radius - 1); | ||
| } | ||
| td:last-child, | ||
| th:last-child { | ||
| border-bottom-right-radius: ($panel-border-radius - 1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .panel-body + .table, | ||
| > .panel-body + .table-responsive { | ||
| border-top: 1px solid $table-border-color; | ||
| } | ||
| > .table > tbody:first-child > tr:first-child th, | ||
| > .table > tbody:first-child > tr: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; | ||
| } | ||
| } | ||
| } | ||
| > thead, | ||
| > tbody { | ||
| > tr:first-child { | ||
| > td, | ||
| > th { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| > tbody, | ||
| > tfoot { | ||
| > tr:last-child { | ||
| > td, | ||
| > th { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .table-responsive { | ||
| border: 0; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // 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 { | ||
| margin-bottom: $line-height-computed; | ||
|
|
||
| // 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-info { | ||
| @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-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); | ||
| } |
| @@ -0,0 +1,133 @@ | ||
| // | ||
| // Popovers | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .popover { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: $zindex-popover; | ||
| display: none; | ||
| max-width: $popover-max-width; | ||
| padding: 1px; | ||
| text-align: left; // Reset given new insertion method | ||
| 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 | ||
| white-space: normal; | ||
|
|
||
| // Offset the popover to account for the popover arrow | ||
| &.top { margin-top: -$popover-arrow-width; } | ||
| &.right { margin-left: $popover-arrow-width; } | ||
| &.bottom { margin-top: $popover-arrow-width; } | ||
| &.left { margin-left: -$popover-arrow-width; } | ||
| } | ||
|
|
||
| .popover-title { | ||
| margin: 0; // reset heading margin | ||
| padding: 8px 14px; | ||
| font-size: $font-size-base; | ||
| font-weight: normal; | ||
| line-height: 18px; | ||
| background-color: $popover-title-bg; | ||
| border-bottom: 1px solid darken($popover-title-bg, 5%); | ||
| border-radius: 5px 5px 0 0; | ||
| } | ||
|
|
||
| .popover-content { | ||
| padding: 9px 14px; | ||
| } | ||
|
|
||
| // Arrows | ||
| // | ||
| // .arrow is outer, .arrow:after is inner | ||
|
|
||
| .popover > .arrow { | ||
| &, | ||
| &:after { | ||
| position: absolute; | ||
| display: block; | ||
| width: 0; | ||
| height: 0; | ||
| border-color: transparent; | ||
| border-style: solid; | ||
| } | ||
| } | ||
| .popover > .arrow { | ||
| border-width: $popover-arrow-outer-width; | ||
| } | ||
| .popover > .arrow:after { | ||
| border-width: $popover-arrow-width; | ||
| content: ""; | ||
| } | ||
|
|
||
| .popover { | ||
| &.top > .arrow { | ||
| left: 50%; | ||
| margin-left: -$popover-arrow-outer-width; | ||
| border-bottom-width: 0; | ||
| 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: -$popover-arrow-width; | ||
| border-bottom-width: 0; | ||
| border-top-color: $popover-arrow-color; | ||
| } | ||
| } | ||
| &.right > .arrow { | ||
| top: 50%; | ||
| left: -$popover-arrow-outer-width; | ||
| margin-top: -$popover-arrow-outer-width; | ||
| border-left-width: 0; | ||
| border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback | ||
| border-right-color: $popover-arrow-outer-color; | ||
| &:after { | ||
| content: " "; | ||
| left: 1px; | ||
| bottom: -$popover-arrow-width; | ||
| border-left-width: 0; | ||
| border-right-color: $popover-arrow-color; | ||
| } | ||
| } | ||
| &.bottom > .arrow { | ||
| left: 50%; | ||
| margin-left: -$popover-arrow-outer-width; | ||
| border-top-width: 0; | ||
| 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: -$popover-arrow-width; | ||
| border-top-width: 0; | ||
| border-bottom-color: $popover-arrow-color; | ||
| } | ||
| } | ||
|
|
||
| &.left > .arrow { | ||
| top: 50%; | ||
| right: -$popover-arrow-outer-width; | ||
| margin-top: -$popover-arrow-outer-width; | ||
| border-right-width: 0; | ||
| 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: $popover-arrow-color; | ||
| bottom: -$popover-arrow-width; | ||
| } | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,101 @@ | ||
| // | ||
| // 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; | ||
| } | ||
|
|
||
| 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; | ||
| } | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,80 @@ | ||
| // | ||
| // Progress bars | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Bar animations | ||
| // ------------------------- | ||
|
|
||
| // WebKit | ||
| @-webkit-keyframes progress-bar-stripes { | ||
| from { background-position: 40px 0; } | ||
| to { background-position: 0 0; } | ||
| } | ||
|
|
||
| // Spec and IE10+ | ||
| @keyframes progress-bar-stripes { | ||
| from { background-position: 40px 0; } | ||
| to { background-position: 0 0; } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| // Bar itself | ||
| // ------------------------- | ||
|
|
||
| // Outer container | ||
| .progress { | ||
| overflow: hidden; | ||
| 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)); | ||
| } | ||
|
|
||
| // Bar of progress | ||
| .progress-bar { | ||
| float: left; | ||
| width: 0%; | ||
| height: 100%; | ||
| font-size: $font-size-small; | ||
| line-height: $line-height-computed; | ||
| color: $progress-bar-color; | ||
| text-align: center; | ||
| background-color: $progress-bar-bg; | ||
| @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); | ||
| @include transition(width .6s ease); | ||
| } | ||
|
|
||
| // Striped bars | ||
| .progress-striped .progress-bar { | ||
| @include gradient-striped(); | ||
| background-size: 40px 40px; | ||
| } | ||
|
|
||
| // Call animation for the active one | ||
| .progress.active .progress-bar { | ||
| @include animation(progress-bar-stripes 2s linear infinite); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| // Variations | ||
| // ------------------------- | ||
|
|
||
| .progress-bar-success { | ||
| @include progress-bar-variant($progress-bar-success-bg); | ||
| } | ||
|
|
||
| .progress-bar-info { | ||
| @include progress-bar-variant($progress-bar-info-bg); | ||
| } | ||
|
|
||
| .progress-bar-warning { | ||
| @include progress-bar-variant($progress-bar-warning-bg); | ||
| } | ||
|
|
||
| .progress-bar-danger { | ||
| @include progress-bar-variant($progress-bar-danger-bg); | ||
| } |
| @@ -0,0 +1,74 @@ | ||
| // | ||
| // Responsive: Utility classes | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // 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 { | ||
| width: device-width; | ||
| } | ||
|
|
||
|
|
||
| // Visibility utilities | ||
|
|
||
| @include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .visible-lg'); | ||
|
|
||
| @media (max-width: $screen-xs-max) { | ||
| @include responsive-visibility('.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-md'); | ||
| } | ||
|
|
||
| @media (min-width: $screen-lg-min) { | ||
| @include responsive-visibility('.visible-lg'); | ||
| } | ||
|
|
||
| @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-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-lg'); | ||
| } | ||
|
|
||
|
|
||
| // Print utilities | ||
| // | ||
| // Media queries are placed on the inside to be mixin-friendly. | ||
|
|
||
| @include responsive-invisibility('.visible-print'); | ||
|
|
||
| @media print { | ||
| @include responsive-visibility('.visible-print'); | ||
| } | ||
|
|
||
| @media print { | ||
| @include responsive-invisibility('.hidden-print'); | ||
| } |
| @@ -0,0 +1,134 @@ | ||
| // | ||
| // Scaffolding | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Reset the box-sizing | ||
| // | ||
| // Heads up! This reset may cause conflicts with some third-party widgets. | ||
| // For recommendations on resolving such conflicts, see | ||
| // http://getbootstrap.com/getting-started/#third-box-sizing | ||
| * { | ||
| @include box-sizing(border-box); | ||
| } | ||
| *:before, | ||
| *:after { | ||
| @include box-sizing(border-box); | ||
| } | ||
|
|
||
|
|
||
| // Body reset | ||
|
|
||
| html { | ||
| font-size: 62.5%; | ||
| -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| } | ||
|
|
||
| body { | ||
| 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: $link-color; | ||
| text-decoration: none; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: $link-hover-color; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| &:focus { | ||
| @include tab-focus(); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Figures | ||
| // | ||
| // We reset this here because previously Normalize had no `figure` margins. This | ||
| // ensures we don't break anyone's use of the element. | ||
|
|
||
| figure { | ||
| margin: 0; | ||
| } | ||
|
|
||
|
|
||
| // Images | ||
|
|
||
| img { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| // Responsive images (ensure images don't scale beyond their parents) | ||
| .img-responsive { | ||
| @include img-responsive(); | ||
| } | ||
|
|
||
| // Rounded corners | ||
| .img-rounded { | ||
| border-radius: $border-radius-large; | ||
| } | ||
|
|
||
| // 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 { | ||
| 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; | ||
| } |
| @@ -0,0 +1,233 @@ | ||
| // | ||
| // Tables | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| table { | ||
| max-width: 100%; | ||
| background-color: $table-bg; | ||
| } | ||
| th { | ||
| text-align: left; | ||
| } | ||
|
|
||
|
|
||
| // Baseline styles | ||
|
|
||
| .table { | ||
| width: 100%; | ||
| margin-bottom: $line-height-computed; | ||
| // Cells | ||
| > 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 > tr > th { | ||
| vertical-align: bottom; | ||
| border-bottom: 2px solid $table-border-color; | ||
| } | ||
| // Remove top border from thead by default | ||
| > 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 $table-border-color; | ||
| } | ||
|
|
||
| // Nesting | ||
| .table { | ||
| background-color: $body-bg; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Condensed table w/ half padding | ||
|
|
||
| .table-condensed { | ||
| > thead, | ||
| > tbody, | ||
| > tfoot { | ||
| > tr { | ||
| > th, | ||
| > td { | ||
| padding: $table-condensed-cell-padding; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Bordered version | ||
| // | ||
| // Add borders all around the table and between all the columns. | ||
|
|
||
| .table-bordered { | ||
| border: 1px solid $table-border-color; | ||
| > thead, | ||
| > tbody, | ||
| > tfoot { | ||
| > tr { | ||
| > th, | ||
| > td { | ||
| border: 1px solid $table-border-color; | ||
| } | ||
| } | ||
| } | ||
| > thead > tr { | ||
| > th, | ||
| > td { | ||
| border-bottom-width: 2px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Zebra-striping | ||
| // | ||
| // Default zebra-stripe styles (alternating gray and transparent backgrounds) | ||
|
|
||
| .table-striped { | ||
| > tbody > tr:nth-child(odd) { | ||
| > td, | ||
| > th { | ||
| background-color: $table-bg-accent; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Hover effect | ||
| // | ||
| // Placed here since it has to come after the potential zebra striping | ||
|
|
||
| .table-hover { | ||
| > tbody > tr:hover { | ||
| > td, | ||
| > th { | ||
| background-color: $table-bg-hover; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Table cell sizing | ||
| // | ||
| // Reset default table behavior | ||
|
|
||
| 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; | ||
| } | ||
| table { | ||
| td, | ||
| th { | ||
| &[class*="col-"] { | ||
| position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) | ||
| float: none; | ||
| display: table-cell; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Table backgrounds | ||
| // | ||
| // Exact selectors below required to override `.table-striped` and prevent | ||
| // inheritance to nested tables. | ||
|
|
||
| // Generate the contextual variants | ||
| @include table-row-variant('active', $table-bg-active); | ||
| @include table-row-variant('success', $state-success-bg); | ||
| @include table-row-variant('info', $state-info-bg); | ||
| @include table-row-variant('warning', $state-warning-bg); | ||
| @include table-row-variant('danger', $state-danger-bg); | ||
|
|
||
|
|
||
| // 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; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,247 @@ | ||
|
|
||
| // | ||
| // Load core variables and mixins | ||
| // -------------------------------------------------- | ||
|
|
||
| @import "variables"; | ||
| @import "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-info { @include btn-styles($btn-info-bg); } | ||
| .btn-warning { @include btn-styles($btn-warning-bg); } | ||
| .btn-danger { @include btn-styles($btn-danger-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); | ||
| } |
| @@ -0,0 +1,38 @@ | ||
| // | ||
| // Thumbnails | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Mixin and adjust the regular image class | ||
| .thumbnail { | ||
| display: block; | ||
| 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); | ||
|
|
||
| > 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; | ||
| } | ||
| } | ||
|
|
||
| // Add a hover state for linked versions only | ||
| a.thumbnail:hover, | ||
| a.thumbnail:focus, | ||
| a.thumbnail.active { | ||
| border-color: $link-color; | ||
| } |
| @@ -0,0 +1,95 @@ | ||
| // | ||
| // Tooltips | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| .tooltip { | ||
| position: absolute; | ||
| z-index: $zindex-tooltip; | ||
| display: block; | ||
| visibility: visible; | ||
| font-size: $font-size-small; | ||
| line-height: 1.4; | ||
| @include opacity(0); | ||
|
|
||
| &.in { @include opacity($tooltip-opacity); } | ||
| &.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: $tooltip-max-width; | ||
| padding: 3px 8px; | ||
| color: $tooltip-color; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background-color: $tooltip-bg; | ||
| border-radius: $border-radius-base; | ||
| } | ||
|
|
||
| // Arrows | ||
| .tooltip-arrow { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-color: transparent; | ||
| border-style: solid; | ||
| } | ||
| .tooltip { | ||
| &.top .tooltip-arrow { | ||
| bottom: 0; | ||
| left: 50%; | ||
| 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: -$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: -$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: -$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; | ||
| } | ||
| } |
| @@ -0,0 +1,284 @@ | ||
| // | ||
| // Typography | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // 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, .h1, | ||
| h2, .h2, | ||
| h3, .h3 { | ||
| margin-top: $line-height-computed; | ||
| margin-bottom: ($line-height-computed / 2); | ||
|
|
||
| small, | ||
| .small { | ||
| font-size: 65%; | ||
| } | ||
| } | ||
| h4, .h4, | ||
| h5, .h5, | ||
| h6, .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 ($line-height-computed / 2); | ||
| } | ||
|
|
||
| .lead { | ||
| margin-bottom: $line-height-computed; | ||
| font-size: floor(($font-size-base * 1.15)); | ||
| font-weight: 200; | ||
| line-height: 1.4; | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| font-size: ($font-size-base * 1.5); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Emphasis & misc | ||
| // ------------------------- | ||
|
|
||
| // Ex: 14px base font * 85% = about 12px | ||
| small, | ||
| .small { font-size: 85%; } | ||
|
|
||
| // Undo browser default styling | ||
| cite { font-style: normal; } | ||
|
|
||
| // Alignment | ||
| .text-left { text-align: left; } | ||
| .text-right { text-align: right; } | ||
| .text-center { text-align: center; } | ||
| .text-justify { text-align: justify; } | ||
|
|
||
| // Contextual colors | ||
| .text-muted { | ||
| color: $text-muted; | ||
| } | ||
|
|
||
| @include text-emphasis-variant('.text-primary', $brand-primary); | ||
|
|
||
| @include text-emphasis-variant('.text-success', $state-success-text); | ||
|
|
||
| @include text-emphasis-variant('.text-info', $state-info-text); | ||
|
|
||
| @include text-emphasis-variant('.text-warning', $state-warning-text); | ||
|
|
||
| @include text-emphasis-variant('.text-danger', $state-danger-text); | ||
|
|
||
| // Contextual backgrounds | ||
| // For now we'll leave these alongside the text classes until v4 when we can | ||
| // safely shift things around (per SemVer rules). | ||
| .bg-primary { | ||
| // Given the contrast here, this is the only class to have its color inverted | ||
| // automatically. | ||
| color: #fff; | ||
| } | ||
| @include bg-variant('.bg-primary', $brand-primary); | ||
|
|
||
| @include bg-variant('.bg-success', $state-success-bg); | ||
|
|
||
| @include bg-variant('.bg-info', $state-info-bg); | ||
|
|
||
| @include bg-variant('.bg-warning', $state-warning-bg); | ||
|
|
||
| @include bg-variant('.bg-danger', $state-danger-bg); | ||
|
|
||
|
|
||
| // Page header | ||
| // ------------------------- | ||
|
|
||
| .page-header { | ||
| 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 { | ||
| margin-top: 0; | ||
| margin-bottom: ($line-height-computed / 2); | ||
| ul, | ||
| ol { | ||
| margin-bottom: 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; | ||
| } | ||
|
|
||
| // Inline turns list items into inline-block | ||
| .list-inline { | ||
| @extend .list-unstyled; | ||
| margin-left: -5px; | ||
|
|
||
| > li { | ||
| display: inline-block; | ||
| padding-left: 5px; | ||
| padding-right: 5px; | ||
| } | ||
| } | ||
|
|
||
| // Description Lists | ||
| dl { | ||
| margin-top: 0; // Remove browser default | ||
| margin-bottom: $line-height-computed; | ||
| } | ||
| dt, | ||
| dd { | ||
| line-height: $line-height-base; | ||
| } | ||
| dt { | ||
| font-weight: bold; | ||
| } | ||
| dd { | ||
| margin-left: 0; // Undo browser default | ||
| } | ||
|
|
||
| // 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 | ||
| // ---- | ||
|
|
||
| // Abbreviations and acronyms | ||
| abbr[title], | ||
| // 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 $abbr-border-color; | ||
| } | ||
| .initialism { | ||
| font-size: 90%; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| // Blockquotes | ||
| blockquote { | ||
| padding: ($line-height-computed / 2) $line-height-computed; | ||
| margin: 0 0 $line-height-computed; | ||
| font-size: $blockquote-font-size; | ||
| border-left: 5px solid $blockquote-border-color; | ||
|
|
||
| p, | ||
| ul, | ||
| ol { | ||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| // Note: Deprecated small and .small as of v3.1.0 | ||
| // Context: https://github.com/twbs/bootstrap/issues/11660 | ||
| footer, | ||
| small, | ||
| .small { | ||
| display: block; | ||
| font-size: 80%; // back to default font-size | ||
| line-height: $line-height-base; | ||
| color: $blockquote-small-color; | ||
|
|
||
| &:before { | ||
| content: '\2014 \00A0'; // em dash, nbsp | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Opposite alignment of blockquote | ||
| // | ||
| // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. | ||
| .blockquote-reverse, | ||
| blockquote.pull-right { | ||
| padding-right: 15px; | ||
| padding-left: 0; | ||
| border-right: 5px solid $blockquote-border-color; | ||
| border-left: 0; | ||
| text-align: right; | ||
|
|
||
| // Account for citation | ||
| footer, | ||
| small, | ||
| .small { | ||
| &:before { content: ''; } | ||
| &:after { | ||
| content: '\00A0 \2014'; // nbsp, em dash | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Quotes | ||
| blockquote:before, | ||
| blockquote:after { | ||
| content: ""; | ||
| } | ||
|
|
||
| // Addresses | ||
| address { | ||
| margin-bottom: $line-height-computed; | ||
| font-style: normal; | ||
| line-height: $line-height-base; | ||
| } |
| @@ -0,0 +1,56 @@ | ||
| // | ||
| // Utility classes | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Floats | ||
| // ------------------------- | ||
|
|
||
| .clearfix { | ||
| @include clearfix(); | ||
| } | ||
| .center-block { | ||
| @include center-block(); | ||
| } | ||
| .pull-right { | ||
| float: right !important; | ||
| } | ||
| .pull-left { | ||
| float: left !important; | ||
| } | ||
|
|
||
|
|
||
| // 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; | ||
| } |
| @@ -0,0 +1,29 @@ | ||
| // | ||
| // Wells | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| .well { | ||
| min-height: 20px; | ||
| padding: 19px; | ||
| margin-bottom: 20px; | ||
| background-color: $well-bg; | ||
| border: 1px solid $well-border; | ||
| border-radius: $border-radius-base; | ||
| @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); | ||
| blockquote { | ||
| border-color: #ddd; | ||
| border-color: rgba(0,0,0,.15); | ||
| } | ||
| } | ||
|
|
||
| // Sizes | ||
| .well-lg { | ||
| padding: 24px; | ||
| border-radius: $border-radius-large; | ||
| } | ||
| .well-sm { | ||
| padding: 9px; | ||
| border-radius: $border-radius-small; | ||
| } |
| @@ -0,0 +1,49 @@ | ||
| // 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"; | ||
|
|
||
| // Utility classes | ||
| @import "utilities"; | ||
| @import "responsive-utilities"; |
| @@ -1,101 +1,6 @@ | ||
| // This File is imported last, and will override other styles in the cascade | ||
| // Add styles here to make changes without digging in too much | ||
|
|
||
| ul { | ||
| list-style: circle inside; | ||
| } |
| @@ -0,0 +1,23 @@ | ||
| // Unstyled | ||
| %unstyled | ||
| margin: 0 | ||
| padding: 0 | ||
| border: 0 | ||
|
|
||
| %unstyled-list | ||
| @extend %unstyled | ||
| list-style: none | ||
|
|
||
| %unstyled-button | ||
| @extend %unstyled | ||
| +appearance(none) | ||
|
|
||
| %unstyled-input | ||
| @extend %unstyled | ||
| display: block | ||
|
|
||
| %reset-link | ||
| color: $base-color | ||
| text-decoration: none | ||
| &:hover | ||
| opacity: .9 |
| @@ -0,0 +1,15 @@ | ||
| // Require imports | ||
| @import ../settings/vars/width | ||
|
|
||
| // Breakpoints | ||
| =breakpoints($device) | ||
| @if $device == "mobile" | ||
| +media(max-width $max-mobile-width) | ||
| @content | ||
| @else if $device == "tablet" | ||
| +media(max-width $max-tablet-width) | ||
| @content | ||
| @else if $device == "desktop" | ||
| +media(max-width $max-desktop-width) | ||
| @content | ||
|
|
| @@ -0,0 +1,5 @@ | ||
| // Mixins | ||
| // ========================================================================== | ||
| @import media_queries | ||
| @import px_to_rem |
| @@ -0,0 +1,3 @@ | ||
| // Pixel to rem | ||
| @function rem($value, $base: 16px) | ||
| @return $value / $base + 0rem |
| @@ -0,0 +1,40 @@ | ||
| %about-widget | ||
| > img | ||
| margin-bottom: 15px | ||
| border-radius: 50% | ||
| border: 4px solid white | ||
| h3 | ||
| color: $site-color | ||
| font-size: rem(35px) | ||
| .social-links | ||
| @extend %unstyled | ||
| > li | ||
| margin: 0 2px | ||
| display: inline-block | ||
|
|
||
| %about-widget-centered | ||
| margin: | ||
| top: -70px | ||
| bottom: 15px | ||
| .social-links | ||
| margin-top: 20px | ||
|
|
||
| %about-widget-left | ||
| width: 100% | ||
| display: table | ||
| margin: | ||
| top: 20px | ||
| bottom: 30px | ||
| h3 | ||
| margin-top: 15px | ||
| > img | ||
| float: left | ||
| margin-right: 10px | ||
| border-color: $light-gray | ||
| .author-description | ||
| margin: 10px 0 | ||
| color: $gray | ||
| .social-links | ||
| text-align: left | ||
| > li:first-child | ||
| margin-left: 0 |
| @@ -0,0 +1,30 @@ | ||
| %lr-links | ||
| position: relative | ||
| padding: 0 20px | ||
| height: 30px | ||
| line-height: 30px | ||
| a | ||
| display: block | ||
| font-size: rem(18px) | ||
| display: block | ||
| white-space: nowrap | ||
| text-overflow: ellipsis | ||
| overflow: hidden | ||
| &::before, | ||
| &::after | ||
| position: absolute | ||
| font-size: rem(30px) | ||
| color: $light-gray | ||
| &.prev-post | ||
| text-align: left | ||
| &::before | ||
| content: "«" | ||
| margin-left: 3px | ||
| left: 0 | ||
| &.next-post | ||
| text-align: right | ||
| float: right | ||
| &::after | ||
| content: "»" | ||
| margin-right: 3px | ||
| right: 0 |
| @@ -0,0 +1,12 @@ | ||
| %pagination | ||
| margin-top: 13px | ||
| text-align: center | ||
| a | ||
| +size(50px) | ||
| border-radius: 50% | ||
| margin: 0 13px | ||
| background: $site-color | ||
| display: inline-block | ||
| line-height: 50px | ||
| color: white | ||
| text-decoration: none |
| @@ -0,0 +1,43 @@ | ||
| %post-feed | ||
| margin: | ||
| top: 70px | ||
| bottom: 40px | ||
| header | ||
| h1 | ||
| margin-bottom: 32px | ||
| font-size: rem(45px) | ||
| line-height: rem(48px) | ||
| +breakpoints("mobile") | ||
| font-size: rem(30px) | ||
| line-height: rem(33px) | ||
| a | ||
| @extend %reset-link | ||
| .meta | ||
| display: table | ||
| +fill-parent | ||
| time | ||
| @extend %post-time | ||
| &, .categories a | ||
| color: $gray | ||
| &::after | ||
| @extend %separator | ||
| +span-columns(2 of 12) | ||
| +shift(5) | ||
| p | ||
| +fill-parent | ||
| display: table | ||
|
|
||
| %page-title | ||
| header | ||
| width: 120% | ||
| margin-left: -10% | ||
| text-align: center | ||
| +breakpoints("mobile") | ||
| width: 100% | ||
| margin-left: 0 | ||
| h1 | ||
| font-size: rem(55px) | ||
| line-height: rem(63px) | ||
| +breakpoints("mobile") | ||
| font-size: rem(40px) | ||
| line-height: rem(43px) |
| @@ -0,0 +1,9 @@ | ||
| %post-time | ||
| color: $gray | ||
| font-size: rem(18px) | ||
| .date | ||
| margin: 0 10px | ||
| &::after | ||
| content: "-" | ||
| margin-left: 10px | ||
| color: $gray |
| @@ -0,0 +1,7 @@ | ||
| @import ../settings/vars/colors | ||
| %separator | ||
| content: "" | ||
| margin: | ||
| top: 22px | ||
| bottom: 34px | ||
| border-bottom: 1px solid $light-gray |
| @@ -0,0 +1,19 @@ | ||
| figure.code | ||
| background: lighten($site-color, 46%) | ||
| box-shadow: inset 1px 1px 1px $site-color, inset -1px -1px 1px lighten($site-color, 35%) | ||
| border-radius: 7px | ||
| margin-bottom: 30px !important | ||
| .highlight | ||
| text-align: left | ||
| font-size: rem(13px) | ||
| line-height: rem(21px) | ||
| table | ||
| width: 100% | ||
| .gutter | ||
| color: $gray | ||
| border-right: 1px solid $light-gray | ||
| width: 40px | ||
| .line-numbers | ||
| padding-left: 10px | ||
| .code | ||
| padding-left: 10px |
| @@ -0,0 +1,24 @@ | ||
| @import ../settings/vars/colors | ||
|
|
||
| #blog-archives | ||
| +fill-parent | ||
| display: table | ||
| h2 | ||
| margin-bottom: 30px | ||
| text-align: center | ||
| color: $gray | ||
| article | ||
| margin-bottom: 80px | ||
| &:last-child | ||
| margin-bottom: 0 | ||
| h1 | ||
| font-size: rem(30px) | ||
| line-height: rem(35px) | ||
| a | ||
| @extend %reset-link | ||
| time | ||
| color: $light-gray | ||
| footer | ||
| margin-top: 15px | ||
| & + footer | ||
| margin-top: 50px |
| @@ -0,0 +1,18 @@ | ||
| #index | ||
| text-align: center | ||
| .about-author | ||
| @extend %about-widget | ||
| @extend %about-widget-centered | ||
| .feed-article, | ||
| .pagination | ||
| +span-columns(8) | ||
| +shift(2) | ||
| +breakpoints("mobile") | ||
| +span-columns(10) | ||
| +shift(1) | ||
| .feed-article | ||
| @extend %post-feed | ||
| &:first-child | ||
| margin-top: 76px | ||
| .pagination | ||
| @extend %pagination |
| @@ -0,0 +1,93 @@ | ||
| @import ../settings/vars/colors | ||
|
|
||
| #post | ||
| .content > article | ||
| +span-columns(8) | ||
| +shift(2) | ||
| @extend %post-feed | ||
| @extend %page-title | ||
| margin-bottom: 0 | ||
| h2, | ||
| h3 | ||
| margin-top: 40px | ||
| h2 | ||
| font-size: rem(36px) | ||
| line-height: rem(40px) | ||
| h3 | ||
| font-size: rem(28px) | ||
| line-height: rem(22px) | ||
| p | ||
| font-size: rem(20px) | ||
| line-height: rem(30px) | ||
| .gist, | ||
| figure, | ||
| blockquote | ||
| +span-columns(10 of 8) | ||
| +shift(-1.5) | ||
| blockquote | ||
| margin-bottom: 30px | ||
| &::before | ||
| @extend %separator | ||
| +span-columns(2 of 10) | ||
| margin-bottom: 20px | ||
| p | ||
| position: relative | ||
| font-style: italic | ||
| color: $gray | ||
| text-indent: 20px | ||
| &::before | ||
| content: "“" | ||
| position: absolute | ||
| top: 12px | ||
| left: -24px | ||
| font-size: rem(40px) | ||
| figure | ||
| @extend %unstyled | ||
| margin: | ||
| top: 10px | ||
| bottom: 10px | ||
| text-align: center | ||
| img | ||
| max-width: 100% | ||
| p code | ||
| background: #EEE | ||
| margin: 0 5px | ||
| padding: 3px 6px | ||
| border-radius: 5px | ||
| font-size: rem(13px) | ||
| border: 1px solid $light-gray | ||
| color: $base-color | ||
| footer | ||
| margin-top: 50px | ||
| .about-author | ||
| @extend %about-widget | ||
| @extend %about-widget-left | ||
| > h4 | ||
| margin-bottom: 10px | ||
| font-size: rem(25px) | ||
| line-height: rem(28px) | ||
| color: $text-color | ||
| .others-posts | ||
| @extend %lr-links | ||
| a | ||
| +span-columns(4 of 8) | ||
|
|
||
| .sharing | ||
| +fill-parent | ||
| display: table | ||
| &::after | ||
| @extend %separator | ||
| +span-columns(2 of 12) | ||
| +shift(5) | ||
| display: table | ||
| margin: | ||
| top: 50px | ||
| bottom: 20px | ||
|
|
||
| .post-comments | ||
| +span-columns(8) | ||
| +shift(2) | ||
| margin-top: 50px | ||
| header | ||
| margin-bottom: 20px | ||
| color: $text-color |
| @@ -1,72 +0,0 @@ | ||