From 0c2055ef381d55388540496996788861fa04b7d8 Mon Sep 17 00:00:00 2001 From: Aaron Borden Date: Wed, 16 Oct 2013 19:02:04 -0700 Subject: Adding contextual styles to list-items --- less/list-group.less | 5 +++++ less/mixins.less | 15 +++++++++++++++ 2 files changed, 20 insertions(+) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index 2cee52973..cf4ce3eea 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -41,6 +41,11 @@ } } +// Contextual variants +.list-group-item-variant(success; @state-success-bg; @state-success-border); +.list-group-item-variant(danger; @state-danger-bg; @state-danger-border); +.list-group-item-variant(warning; @state-warning-bg; @state-warning-border); + // Linked list items a.list-group-item { color: @list-group-link-color; diff --git a/less/mixins.less b/less/mixins.less index 654215b54..09c656ca2 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -448,6 +448,21 @@ } } +// List Groups +// ------------------------- +.list-group-item-variant(@state; @background; @border) { + .list-group > .list-group-item.@{state} { + background-color: @background; + border-color: @border; + } + + // Hover states + .list-group > .list-group-item.@{state}:hover { + background-color: darken(@background, 5%); + border-color: darken(@border, 5%); + } +} + // Button variants // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, -- cgit v1.2.3 From 693915d1277d465844c6757fc107110342229d76 Mon Sep 17 00:00:00 2001 From: Max Edmands Date: Wed, 16 Oct 2013 22:55:40 -0700 Subject: Active state overrides contextual list-item styles --- less/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 09c656ca2..04bd10ee0 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -451,13 +451,13 @@ // List Groups // ------------------------- .list-group-item-variant(@state; @background; @border) { - .list-group > .list-group-item.@{state} { + .list-group-item.@{state} { background-color: @background; border-color: @border; } // Hover states - .list-group > .list-group-item.@{state}:hover { + .list-group-item.@{state}:hover { background-color: darken(@background, 5%); border-color: darken(@border, 5%); } -- cgit v1.2.3 From 3a65b2c11f43154907923535b56ea84fb84cfb78 Mon Sep 17 00:00:00 2001 From: Haley Date: Mon, 2 Dec 2013 13:29:54 -0600 Subject: Added text-justify class to type.less --- less/type.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/type.less b/less/type.less index ac07ac7ce..0c9600d50 100644 --- a/less/type.less +++ b/less/type.less @@ -120,6 +120,7 @@ cite { font-style: normal; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } +.text-justify { text-align: justify; } // Page header -- cgit v1.2.3 From 9ce7e5620c47b5ec205c42948c42fc468c05686f Mon Sep 17 00:00:00 2001 From: Bohdan Ganicky Date: Fri, 6 Dec 2013 14:09:55 +0100 Subject: Updated .scale() mixin so that it accepts optional vertical scale factor parameter. --- less/mixins.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 5c54c64c7..e0ff3f705 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -150,10 +150,10 @@ -ms-transform: rotate(@degrees); // IE9+ transform: rotate(@degrees); } -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -ms-transform: scale(@ratio); // IE9+ - transform: scale(@ratio); +.scale(@ratio; @ratio-y...) { + -webkit-transform: scale(@ratio, @ratio-y); + -ms-transform: scale(@ratio, @ratio-y); // IE9+ + transform: scale(@ratio, @ratio-y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -- cgit v1.2.3 From b92bee99efd95a4c0ae469e3a5f4004da0164578 Mon Sep 17 00:00:00 2001 From: Luke Noel-Storr Date: Fri, 6 Dec 2013 14:11:58 +0000 Subject: reverted changes in commit 96109d3 which seemed to break conditional classes in striped tables (ignoring the comment above that the previous rules were needed for just this purpose) fixes issue twbs/bootstrap#11728 --- less/mixins.less | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 5c54c64c7..a820ad686 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -414,24 +414,24 @@ .table-row-variant(@state; @background) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. - .table { - > thead, - > tbody, - > tfoot { - > tr > .@{state}, - > .@{state} > td, - > .@{state} > th { - background-color: @background; - } + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; } } // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover > tbody { - > tr > .@{state}:hover, - > .@{state}:hover > td, - > .@{state}:hover > th { + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td, + &.@{state}:hover > th { background-color: darken(@background, 5%); } } -- cgit v1.2.3 From 78b43d4c99c5b091980a977656a378f6c46c7c16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 6 Dec 2013 22:34:29 +0100 Subject: Darken icon bar to meet WCAG --- less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 8b5f2184d..5b2e9044f 100644 --- a/less/variables.less +++ b/less/variables.less @@ -286,7 +286,7 @@ // Navbar toggle @navbar-default-toggle-hover-bg: #ddd; -@navbar-default-toggle-icon-bar-bg: #ccc; +@navbar-default-toggle-icon-bar-bg: #888; @navbar-default-toggle-border-color: #ddd; -- cgit v1.2.3 From 107b334d349be065421967553f57aa186736ffcf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 11:45:11 -0800 Subject: Fixes #11766: Use color var for background on badges in buttons to restore proper background to default button badge --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 5c54c64c7..4d045987e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -475,7 +475,7 @@ .badge { color: @background; - background-color: #fff; + background-color: @color; } } -- cgit v1.2.3 From c07632e4e8398f55d796d00b520ca43df38dbf29 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 11:47:37 -0800 Subject: Reorder button and table variants for consistent order --- less/buttons.less | 8 ++++---- less/tables.less | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 62e693bee..b728f332c 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -56,6 +56,10 @@ .btn-primary { .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); +} // Warning appears as orange .btn-warning { .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); @@ -64,10 +68,6 @@ .btn-danger { .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } -// Success appears as green -.btn-success { - .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); -} // Info appears as blue-green .btn-info { .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); diff --git a/less/tables.less b/less/tables.less index ca565f4b7..5827b6083 100644 --- a/less/tables.less +++ b/less/tables.less @@ -156,8 +156,8 @@ table { // Generate the contextual variants .table-row-variant(active; @table-bg-active); .table-row-variant(success; @state-success-bg); -.table-row-variant(danger; @state-danger-bg); .table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); // Responsive tables -- cgit v1.2.3 From fe58357df182b52f5905f432a3b2629c717656f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 11:56:35 -0800 Subject: Fixes #10884: Adds .info variant to contextual table classes --- less/tables.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 5827b6083..f8c05fecf 100644 --- a/less/tables.less +++ b/less/tables.less @@ -158,6 +158,7 @@ table { .table-row-variant(success; @state-success-bg); .table-row-variant(warning; @state-warning-bg); .table-row-variant(danger; @state-danger-bg); +.table-row-variant(info; @state-info-bg); // Responsive tables -- cgit v1.2.3 From b1215d1b2ecd6cd3898af19ce43cc647e2ec854a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 12:18:13 -0800 Subject: Fixes #11193: Add kbd element styles to indicate user input via keyboard --- less/code.less | 10 ++++++++++ less/variables.less | 3 +++ 2 files changed, 13 insertions(+) (limited to 'less') diff --git a/less/code.less b/less/code.less index 44e9e8937..3eed26c05 100644 --- a/less/code.less +++ b/less/code.less @@ -21,6 +21,16 @@ code { border-radius: @border-radius-base; } +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: @kbd-color; + background-color: @kbd-bg; + border-radius: @border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); +} + // Blocks of code pre { display: block; diff --git a/less/variables.less b/less/variables.less index 5b2e9044f..3681e99b5 100644 --- a/less/variables.less +++ b/less/variables.less @@ -602,6 +602,9 @@ @code-color: #c7254e; @code-bg: #f9f2f4; +@kbd-color: #fff; +@kbd-bg: #333; + @pre-bg: #f5f5f5; @pre-color: @gray-dark; @pre-border-color: #ccc; -- cgit v1.2.3 From 07de53c644b315852c5f315ab91bfd6d65660d50 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 14:09:03 -0800 Subject: Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs --- less/list-group.less | 29 +++++++++++++++++++++++------ less/mixins.less | 26 +++++++++++++++++++------- 2 files changed, 42 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index cf4ce3eea..35fff05d4 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -2,17 +2,21 @@ // List groups // -------------------------------------------------- + // Base class // // Easily usable on
    ,
      , or
      . + .list-group { // No need to set list-style: none; since .list-group-item is block level margin-bottom: 20px; padding-left: 0; // reset padding because ul and ol } + // Individual list items -// ------------------------- +// +// Use on `li`s or `div`s within the `.list-group` parent. .list-group-item { position: relative; @@ -41,12 +45,12 @@ } } -// Contextual variants -.list-group-item-variant(success; @state-success-bg; @state-success-border); -.list-group-item-variant(danger; @state-danger-bg; @state-danger-border); -.list-group-item-variant(warning; @state-warning-bg; @state-warning-border); // Linked list items +// +// Use anchor elements instead of `li`s or `div`s to create linked list items. +// Includes an extra `.active` modifier class for showing selected items. + a.list-group-item { color: @list-group-link-color; @@ -80,8 +84,21 @@ a.list-group-item { } } + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +.list-group-item-variant(success; @state-success-bg; @state-success-text); +.list-group-item-variant(warning; @state-warning-bg; @state-warning-text); +.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); +.list-group-item-variant(info; @state-info-bg; @state-info-text); + + // Custom content options -// ------------------------- +// +// Extra classes for creating well-formatted content within `.list-group-item`s. .list-group-item-heading { margin-top: 0; diff --git a/less/mixins.less b/less/mixins.less index 04bd10ee0..9c84984ba 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -450,16 +450,28 @@ // List Groups // ------------------------- -.list-group-item-variant(@state; @background; @border) { - .list-group-item.@{state} { +.list-group-item-variant(@state; @background; @color) { + .list-group-item-@{state} { + color: @color; background-color: @background; - border-color: @border; } + a.list-group-item-@{state} { + color: @color; - // Hover states - .list-group-item.@{state}:hover { - background-color: darken(@background, 5%); - border-color: darken(@border, 5%); + .list-group-item-heading { color: inherit; } + + &:hover, + &:focus { + color: @color; + background-color: darken(@background, 5%); + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: @color; + border-color: @color; + } } } -- cgit v1.2.3 From 6273604601c58284f49b38ae4e52533b9689437c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 20:52:51 -0800 Subject: Add .container-fluid variation for full-width containers and layouts /cc #10711 #9862 --- less/grid.less | 27 ++++++++++++++++++++++++--- less/navbar.less | 22 +++++++++++++--------- 2 files changed, 37 insertions(+), 12 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index 279d80368..dfae6999b 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,7 +2,11 @@ // Grid system // -------------------------------------------------- -// Set the container width, and override it for fixed navbars in media queries + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + .container { .container-fixed(); @@ -17,12 +21,30 @@ } } -// mobile first defaults + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + .container-fixed(); +} + + +// Row +// +// Rows contain and clear the floats of your columns. + .row { .make-row(); } + +// Columns +// // Common styles for small and large grid columns + .make-grid-columns(); @@ -76,4 +98,3 @@ .make-grid(@grid-columns, lg, push); .make-grid(@grid-columns, lg, offset); } - diff --git a/less/navbar.less b/less/navbar.less index ea284fede..e9633d855 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -93,14 +93,17 @@ // // When a container is present, change the behavior of the header and collapse. -.container > .navbar-header, -.container > .navbar-collapse { - margin-right: -@navbar-padding-horizontal; - margin-left: -@navbar-padding-horizontal; - - @media (min-width: @grid-float-breakpoint) { - margin-right: 0; - margin-left: 0; +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } } } @@ -159,7 +162,8 @@ } @media (min-width: @grid-float-breakpoint) { - .navbar > .container & { + .navbar > .container &, + .navbar > .container-fluid & { margin-left: -@navbar-padding-horizontal; } } -- cgit v1.2.3