aboutsummaryrefslogtreecommitdiff
path: root/less/patterns.less
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2011-05-03 18:12:43 -0700
committerJacob Thornton <[email protected]>2011-05-03 18:12:43 -0700
commit96c3e709963516a06ad6e723a7bba3fbf5fc1ba2 (patch)
tree4630ca93f148e406dc3c3391e5f790f630e53c97 /less/patterns.less
parentd447898bf251cfa4cc6b1c8f9cb4c238ad12ef52 (diff)
downloadbootstrap-96c3e709963516a06ad6e723a7bba3fbf5fc1ba2.tar.xz
bootstrap-96c3e709963516a06ad6e723a7bba3fbf5fc1ba2.zip
cleanup old stuff
Diffstat (limited to 'less/patterns.less')
-rw-r--r--less/patterns.less526
1 files changed, 0 insertions, 526 deletions
diff --git a/less/patterns.less b/less/patterns.less
deleted file mode 100644
index 7c5a902fa..000000000
--- a/less/patterns.less
+++ /dev/null
@@ -1,526 +0,0 @@
-/*
- Patterns.less
- Repeatable UI elements outside the base styles provided from the scaffolding
-*/
-
-
-/* Top bar
--------------------------------------------------- */
-
-/*
-div.topbar {
- #gradient > .vertical(#333, #222);
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1000;
- height: 40px;
- .box-shadow(0 1px 3px rgba(0,0,0,.5));
- a {
- color: #999;
- &:hover {
- color: @white;
- text-decoration: none;
- background-color: rgba(255,255,255,.05);
- }
- }
- a.logo,
- ul li a {
- float: left;
- padding: 0 10px;
- line-height: 40px;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- }
- // Logo
- a.logo {
- margin-left: -10px;
- margin-right: 10px;
- color: @gray-light;
- font-size: 20px;
- font-weight: 200;
- img {
- float: left;
- margin-top: 9px;
- margin-right: 6px;
- }
- &:hover {
- color: @white;
- }
- }
- // Nav items
- ul {
- float: left;
- margin: 0;
- li {
- display: inline;
- &.active a {
- color: #fff;
- background-color: rgba(0,0,0,.5);
- }
- }
- }
-}
-*/
-
-// Topbar for Branding and Nav
-div.topbar {
- #gradient > .vertical(#333, #222);
- height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 100;
- overflow: visible;
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
- .box-shadow(@shadow);
- // Links get text shadow
- a {
- color: @gray-light;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- .transition(all linear .1s);
- }
- // Hover and active states for links
- ul li a:hover,
- ul li.active a,
- a.logo:hover {
- background-color: #333;
- background-color: rgba(255,255,255,.15);
- color: @white;
- text-decoration: none;
- }
- // Logo
- a.logo {
- float: left;
- display: block;
- padding: 8px 20px 12px;
- margin-left: -20px;
- color: @white;
- font-size: 20px;
- font-weight: 200;
- line-height: 1;
- img {
- display: inline;
- float: left;
- margin-right: 6px;
- }
- }
- // Search Form
- form {
- float: left;
- margin: 4px 0 0 0;
- opacity: 1;
- position: relative;
- input {
- background-color: @gray-light;
- background-color: rgba(255,255,255,.3);
- .sans-serif(13px, normal, 1);
- width: 220px;
- padding: 4px 9px;
- color: #fff;
- color: rgba(255,255,255,.75);
- border: 1px solid #111;
- .border-radius(4px);
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
- .box-shadow(@shadow);
- .transition(none);
- // Placeholder text gets special styles; can't be bundled together though for some reason
- &:-moz-placeholder {
- color: @gray-lighter;
- }
- &::-webkit-input-placeholder {
- color: @gray-lighter;
- }
- &:hover {
- background-color: #444;
- background-color: rgba(255,255,255,.5);
- color: #fff;
- }
- &:focus,
- &.focused {
- outline: none;
- background-color: #fff;
- color: @gray-dark;
- text-shadow: 0 1px 0 #fff;
- border: 0;
- padding: 5px 10px;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- }
- }
- }
- // Navigation
- ul {
- display: block;
- float: left;
- margin: 0 10px 0 0;
- &.secondary-nav {
- float: right;
- margin-left: 10px;
- margin-right: 0;
- }
- li {
- display: block;
- float: left;
- font-size: 13px;
- a {
- display: block;
- float: none;
- padding: 10px 10px 11px;
- line-height: 19px;
- text-decoration: none;
- &:hover {
- color: #fff;
- text-decoration: none;
- }
- }
- &.active a {
- background-color: #222;
- background-color: rgba(0,0,0,.5);
- font-weight: bold;
- }
- // Vertical rule
- &.vr {
- border-left: 1px solid #008db8;
- border-right: 1px solid #00a0d1;
- height: 26px;
- margin: 6px 3px 1px 3px;
- }
- }
- // Dropdowns
- &.primary-nav li ul {
- left: 0;
- }
- &.secondary-nav li ul {
- right: 0;
- }
- li.menu {
- position: relative;
- a.menu {
- &:after {
- width: 7px;
- height: 7px;
- display: inline-block;
- background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
- content: "&darr;";
- text-indent: -99999px;
- vertical-align: top;
- margin-top: 8px;
- margin-left: 4px;
- opacity: .5;
- }
- }
- &.open {
- a.menu,
- a:hover {
- background-color: lighten(#00a0d1,5);
- background-color: rgba(255,255,255,.1);
- color: #fff;
- }
- ul {
- display: block;
- li {
- a {
- background-color: transparent;
- font-weight: normal;
- &:hover {
- background-color: rgba(255,255,255,.1);
- color: #fff;
- }
- }
- &.active a {
- background-color: rgba(255,255,255,.1);
- font-weight: bold;
- }
- }
- }
- }
- }
- li ul {
- background-color: #333;
- float: left;
- display: none;
- position: absolute;
- top: 40px;
- min-width: 160px;
- max-width: 220px;
- _width: 160px;
- margin-left: 0;
- margin-right: 0;
- padding: 0;
- text-align: left;
- border: 0;
- zoom: 1;
- .border-radius(0 0 5px 5px);
- .box-shadow(0 1px 2px rgba(0,0,0,0.6));
- li {
- float: none;
- clear: both;
- display: block;
- background: none;
- font-size: 12px;
- a {
- display: block;
- padding: 6px 15px;
- clear: both;
- font-weight: normal;
- line-height: 19px;
- color: #bbb;
- &:hover {
- background-color: #333;
- background-color: rgba(255,255,255,.25);
- color: #fff;
- }
- }
- // Dividers (basically an hr)
- &.divider {
- height: 1px;
- overflow: hidden;
- background: rgba(0,0,0,.2);
- border-bottom: 1px solid rgba(255,255,255,.1);
- margin: 5px 0;
- }
- // Section separaters
- span {
- clear: both;
- display: block;
- background: rgba(0,0,0,.2);
- padding: 6px 15px;
- cursor: default;
- color: #666;
- border-top: 1px solid rgba(0,0,0,.2);
- }
- }
- }
- }
-}
-
-/* Page Headers
--------------------------------------------------- */
-
-div.page-header {
- margin-bottom: @baseline - 1;
- border-bottom: 1px solid #ddd;
- .border-radius(6px 6px 0 0);
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
- h1 {
- margin-bottom: 0;
- }
-}
-
-
-/* Error Styles
--------------------------------------------------- */
-
-// One-liner alert bars
-div.alert-message {
- #gradient > .vertical(transparent, rgba(0,0,0,0.15));
- background-color: @gray-lighter;
- margin-bottom: @baseline;
- padding: 10px 15px 9px;
- .border-radius(6px);
- color: #fff;
- border-bottom: 1px solid rgba(0,0,0,.25);
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- p {
- color: #fff;
- margin-bottom: 0;
- + p {
- margin-top: 5px;
- }
- }
- &.error {
- background-color: lighten(@red, 25%);
- }
- &.warning {
- background-color: lighten(@yellow, 15%);
- }
- &.success {
- background-color: lighten(@green, 15%);
- }
- &.info {
- background-color: lighten(@blue, 15%);
- }
- a.close {
- float: right;
- margin-top: -2px;
- opacity: .5;
- color: #fff;
- font-size: 20px;
- font-weight: bold;
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
- .border-radius(3px);
- &:hover {
- opacity: 1;
- text-decoration: none;
- }
- }
-}
-
-// Block-level Alerts
-div.block-message {
- margin-bottom: @baseline;
- padding: 14px 19px;
- color: #333;
- color: rgba(0,0,0,.8);
- text-shadow: 0 1px 0 rgba(255,255,255,.25);
- .border-radius(6px);
- p {
- font-size: 13px;
- line-height: 18px;
- color: #333;
- color: rgba(0,0,0,.8);
- margin-right: 30px;
- margin-bottom: 0;
- }
- ul {
- margin-bottom: 0;
- }
- strong {
- display: block;
- }
- a.close {
- display: block;
- color: #333;
- color: rgba(0,0,0,.5);
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
- }
- &.error {
- background: lighten(@red, 55%);
- border: 1px solid lighten(@red, 50%);
- }
- &.warning {
- background: lighten(@yellow, 35%);
- border: 1px solid lighten(@yellow, 25%)
- }
- &.success {
- background: lighten(@green, 45%);
- border: 1px solid lighten(@green, 35%)
- }
- &.info {
- background: lighten(@blue, 45%);
- border: 1px solid lighten(@blue, 40%);
- }
-}
-
-
-/* Navigation
--------------------------------------------------- */
-
-// Common tab and pill styles
-ul.tabs,
-ul.pills {
- margin: 0 0 20px;
- padding: 0;
- .clearfix();
- li {
- display: inline;
- a {
- display: inline;
- float: left;
- width: auto;
- }
- }
-}
-// Basic Tabs
-ul.tabs {
- width: 100%;
- border-bottom: 1px solid #ccc;
- li {
- a {
- margin-bottom: -1px;
- margin-right: 2px;
- padding: 0 15px;
- line-height: (@baseline * 2) - 1;
- .border-radius(3px 3px 0 0);
- &:hover {
- background: #f5f5f5;
- border-bottom: 1px solid #ccc;
- }
- }
- &.active a {
- background: #fff;
- padding: 0 14px;
- border: 1px solid #ccc;
- border-bottom: 0;
- color: @gray;
- }
- }
-}
-// Basic pill nav
-ul.pills {
- li {
- a {
- margin: 5px 3px 5px 0;
- padding: 0 15px;
- text-shadow: 0 1px 1px #fff;
- line-height: 30px;
- .border-radius(15px);
- &:hover {
- background: @link-hover-color;
- color: #fff;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
- }
- &.active a {
- background: @link-color;
- color: #fff;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
- }
-}
-
-
-/* Pagination
--------------------------------------------------- */
-
-div.pagination {
- height: @baseline * 2;
- margin: @baseline 0;
- ul {
- float: left;
- margin: 0;
- border: 1px solid rgba(0,0,0,.15);
- .border-radius(3px);
- .box-shadow(0 1px 2px rgba(0,0,0,.075);
- li {
- display: inline;
- a {
- display: inline;
- float: left;
- padding: 0 14px;
- line-height: (@baseline * 2) - 2;
- border-right: 1px solid rgba(0,0,0,.15);
- text-decoration: none;
- }
- a:hover,
- &.active a {
- background-color: lighten(@blue, 45%);
- }
- &.disabled a,
- &.disabled a:hover {
- background-color: none;
- color: @gray-light;
- }
- &.next a,
- &:last-child a {
- border: 0;
- }
- }
- }
-}
-
-
-/* Wells
--------------------------------------------------- */
-
-div.well {
- background: #f5f5f5;
- margin-bottom: 20px;
- padding: 19px;
- min-height: 20px;
- border: 1px solid #ddd;
- .border-radius(4px);
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075);
-}