This repository has been archived by the owner on Jun 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
1,533 additions
and
967 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| // ALERT STYLES | ||
| // ------------ | ||
|
|
||
| // Base alert styles | ||
| .alert-message { | ||
| position: relative; | ||
| padding: 7px 15px; | ||
| margin-bottom: $baseLineHeight; | ||
| color: $grayDark; | ||
| text-shadow: 0 1px 0 rgba(255,255,255,.5); | ||
| @include gradientBar(#fceec1, #eedc94); // warning by default | ||
| border-width: 1px; | ||
| border-style: solid; | ||
| @include border-radius(4px); | ||
| @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); | ||
|
|
||
| // Adjust close icon | ||
| .close { | ||
| *margin-top: 3px; /* IE7 spacing */ | ||
| } | ||
|
|
||
| // Remove extra margin from content | ||
| h5 { | ||
| line-height: $baseLineHeight; | ||
| } | ||
| p { | ||
| margin-bottom: 0; | ||
| } | ||
| div { | ||
| margin-top: 5px; | ||
| margin-bottom: 2px; | ||
| line-height: 28px; | ||
| } | ||
| .btn { | ||
| // Provide actions with buttons | ||
| @include box-shadow(0 1px 0 rgba(255,255,255,.25)); | ||
| } | ||
|
|
||
| &.error, | ||
| &.success, | ||
| &.info { | ||
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| } | ||
|
|
||
| &.block-message { | ||
| padding: 14px; | ||
| background-image: none; | ||
| background-color: lighten(#fceec1, 5%); | ||
| @include reset-filter; // undo gradient for IE9 | ||
| border-color: #fceec1; | ||
| @include box-shadow(none); | ||
| ul, p { | ||
| margin-right: 30px; | ||
| } | ||
| ul { | ||
| margin-bottom: 0; | ||
| } | ||
| li { | ||
| color: $grayDark; | ||
| } | ||
| .alert-actions { | ||
| margin-top: 5px; | ||
| } | ||
| &.error, | ||
| &.success, | ||
| &.info { | ||
| color: $grayDark; | ||
| text-shadow: 0 1px 0 rgba(255,255,255,.5); | ||
| } | ||
| &.error { | ||
| background-color: lighten(#f56a66, 25%); | ||
| border-color: lighten(#f56a66, 20%); | ||
| } | ||
| &.success { | ||
| background-color: lighten(#62c462, 30%); | ||
| border-color: lighten(#62c462, 25%); | ||
| } | ||
| &.info { | ||
| background-color: lighten(#6bd0ee, 25%); | ||
| border-color: lighten(#6bd0ee, 20%); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| // BUTTON GROUPS | ||
| // ------------- | ||
|
|
||
|
|
||
| // Make the div behave like a button | ||
| .btn-group { | ||
| position: relative; | ||
| @include clearfix; // clears the floated buttons | ||
| } | ||
|
|
||
| // Space out series of button groups | ||
| .btn-group + .btn-group { | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| // Optional: Group multiple button groups together for a toolbar | ||
| .btn-toolbar { | ||
| .btn-group { | ||
| display: inline-block; | ||
| } | ||
| } | ||
|
|
||
| // Float them, remove border radius, then re-add to first and last elements | ||
| .btn-group .btn { | ||
| position: relative; | ||
| float: left; | ||
| margin-left: -1px; | ||
| @include 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; | ||
| -webkit-border-top-left-radius: 4px; | ||
| -moz-border-radius-topleft: 4px; | ||
| border-top-left-radius: 4px; | ||
| -webkit-border-bottom-left-radius: 4px; | ||
| -moz-border-radius-bottomleft: 4px; | ||
| border-bottom-left-radius: 4px; | ||
| } | ||
| .btn-group .btn:last-child, | ||
| .btn-group .dropdown-toggle { | ||
| -webkit-border-top-right-radius: 4px; | ||
| -moz-border-radius-topright: 4px; | ||
| border-top-right-radius: 4px; | ||
| -webkit-border-bottom-right-radius: 4px; | ||
| -moz-border-radius-bottomright: 4px; | ||
| border-bottom-right-radius: 4px; | ||
| } | ||
| // Reset corners for large buttons | ||
| .btn-group .btn.large:first-child { | ||
| margin-left: 0; | ||
| -webkit-border-top-left-radius: 6px; | ||
| -moz-border-radius-topleft: 6px; | ||
| border-top-left-radius: 6px; | ||
| -webkit-border-bottom-left-radius: 6px; | ||
| -moz-border-radius-bottomleft: 6px; | ||
| border-bottom-left-radius: 6px; | ||
| } | ||
| .btn-group .btn.large:last-child, | ||
| .btn-group .large.dropdown-toggle { | ||
| -webkit-border-top-right-radius: 6px; | ||
| -moz-border-radius-topright: 6px; | ||
| border-top-right-radius: 6px; | ||
| -webkit-border-bottom-right-radius: 6px; | ||
| -moz-border-radius-bottomright: 6px; | ||
| border-bottom-right-radius: 6px; | ||
| } | ||
|
|
||
| // On hover/focus/active, bring the proper btn to front | ||
| .btn-group .btn:hover, | ||
| .btn-group .btn:focus, | ||
| .btn-group .btn:active { | ||
| z-index: 2; | ||
| } | ||
|
|
||
|
|
||
| // Split button dropdowns | ||
| // ---------------------- | ||
|
|
||
| // Give the line between buttons some depth | ||
| .btn-group .dropdown-toggle { | ||
| padding-left: 8px; | ||
| padding-right: 8px; | ||
| $shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05); | ||
| @include box-shadow($shadow); | ||
| } | ||
|
|
||
| // Reposition menu on open and round all corners | ||
| .btn-group.open .dropdown-menu { | ||
| display: block; | ||
| top: 30px; | ||
| @include border-radius(5px); | ||
| } | ||
| .btn-group.open .dropdown-toggle { | ||
| background-image: none; | ||
| $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); | ||
| @include box-shadow($shadow); | ||
| } | ||
|
|
||
| // Reposition the caret | ||
| .btn .caret { | ||
| margin-top: 6px; | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| // Account for other colors | ||
| .primary, | ||
| .danger, | ||
| .info, | ||
| .success { | ||
| .caret { | ||
| border-top-color: #fff; | ||
| @include opacity(75); | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| // BUTTON STYLES | ||
| // ------------- | ||
|
|
||
| // Shared colors for buttons and alerts | ||
| .btn, | ||
| .alert-message { | ||
| // Set text color | ||
| &.danger, | ||
| &.danger:hover, | ||
| &.error, | ||
| &.error:hover, | ||
| &.success, | ||
| &.success:hover, | ||
| &.info, | ||
| &.info:hover { | ||
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| color: $white; | ||
| } | ||
| // Danger and error appear as red | ||
| &.danger, | ||
| &.error { | ||
| @include gradientBar(#ee5f5b, #c43c35); | ||
| } | ||
| // Success appears as green | ||
| &.success { | ||
| @include gradientBar(#62c462, #57a957); | ||
| } | ||
| // Info appears as a neutral blue | ||
| &.info { | ||
| @include gradientBar(#5bc0de, #339bb9); | ||
| } | ||
| } | ||
|
|
||
| // Base .btn styles | ||
| .btn { | ||
| // Button Base | ||
| display: inline-block; | ||
| padding: 5px 10px 6px; | ||
| font-size: $baseFontSize; | ||
| line-height: normal; | ||
| color: #333; | ||
| text-shadow: 0 1px 1px rgba(255,255,255,.75); | ||
| @include gradient_vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient | ||
| border: 1px solid #ccc; | ||
| border-bottom-color: #bbb; | ||
| @include border-radius(4px); | ||
| $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); | ||
| @include box-shadow($shadow); | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| color: $grayDark; | ||
| text-decoration: none; | ||
| background-position: 0 -15px; | ||
| } | ||
|
|
||
| // Focus state for keyboard and accessibility | ||
| &:focus { | ||
| outline: 1px dotted #666; | ||
| } | ||
|
|
||
| // Primary Button Type | ||
| &.primary { | ||
| color: $white; | ||
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); | ||
| @include gradientBar($blue, $blueDark) | ||
| } | ||
|
|
||
| // Transitions | ||
| @include transition(.1s linear all); | ||
|
|
||
| // Active and Disabled states | ||
| &.active, | ||
| &:active { | ||
| $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); | ||
| @include box-shadow($shadow); | ||
| } | ||
| &.disabled { | ||
| cursor: default; | ||
| background-image: none; | ||
| @include reset-filter; | ||
| @include opacity(65); | ||
| @include box-shadow(none); | ||
| } | ||
| &[disabled] { | ||
| // disabled pseudo can't be included with .disabled | ||
| // def because IE8 and below will drop it ;_; | ||
| cursor: default; | ||
| background-image: none; | ||
| @include reset-filter; | ||
| @include opacity(65); | ||
| @include box-shadow(none); | ||
| } | ||
|
|
||
| // Button Sizes | ||
| &.large { | ||
| padding: 9px 14px 9px; | ||
| font-size: $baseFontSize + 2px; | ||
| line-height: normal; | ||
| @include border-radius(6px); | ||
| } | ||
| &.small { | ||
| padding: 7px 9px 7px; | ||
| font-size: $baseFontSize - 2px; | ||
| } | ||
| } | ||
| // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons | ||
| :root .alert-message, | ||
| :root .btn { | ||
| border-radius: 0 \0; | ||
| } | ||
|
|
||
| // Help Firefox not be a jerk about adding extra padding to buttons | ||
| button.btn, | ||
| input[type=submit].btn { | ||
| &::-moz-focus-inner { | ||
| padding: 0; | ||
| border: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| // CLOSE ICONS | ||
| // ----------- | ||
|
|
||
| .close { | ||
| float: right; | ||
| font-size: 20px; | ||
| font-weight: bold; | ||
| line-height: $baseLineHeight * .75; | ||
| color: $black; | ||
| text-shadow: 0 1px 0 rgba(255,255,255,1); | ||
| @include opacity(20); | ||
| &:hover { | ||
| color: $black; | ||
| text-decoration: none; | ||
| @include opacity(40); | ||
| } | ||
| } |
Oops, something went wrong.