Skip to content

Commit

Permalink
#2050 - Fix doubling row in doubling grid. fix doubling grid column row
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Apr 7, 2015
1 parent 7be4d85 commit 6ccdc83
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 76 deletions.
3 changes: 3 additions & 0 deletions RELEASE-NOTES.md
View file
Expand Up @@ -27,6 +27,7 @@
- **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less`
- **Divider** - `vertical divider` inside `ui grid` now accounts for column padding
- **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions
- **Dropdown** - Added `showOnFocus` option
- **Form** - Added placeholder color rules for IE, `ms-input-placeholder`
- **Form Validation** - Form validation now has `minCount`, `maxCount`, and `exactCount` for validating multiple selections
- **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation
Expand Down Expand Up @@ -94,6 +95,8 @@
- **Dropdown** - Dropdown `menu` now use same font size as dropdown
- **Form** - Form sizes and input sizes now inherit from `site.variables`
- **Form Validation** - Form validation now validates correctly on `<select>` change
- **Grid** - Fix `doubling row` not working correctly inside a different `doubling grid` (css spec issue)
- **Grid** - Fix `doubling grid` incorrectly applying width to `(x) column row`
- **Grid** - First column on `stackable grid` no longer receives top margin
- **Grid** - `x column wide` inside `equal width/height` now cannot grow beyond column size
- **Grid** - Fixes colored grid columns not appearing when not nested in rows
Expand Down
152 changes: 76 additions & 76 deletions src/definitions/collections/grid.less
View file
Expand Up @@ -222,67 +222,67 @@ body > .ui.grid {

/* Grid Based */
.ui[class*="one column"].grid > .row > .column,
.ui[class*="one column"].grid > .column {
.ui[class*="one column"].grid > .column:not(.row) {
width: @oneColumn;
}
.ui[class*="two column"].grid > .row > .column,
.ui[class*="two column"].grid > .column {
.ui[class*="two column"].grid > .column:not(.row) {
width: @twoColumn;
}
.ui[class*="three column"].grid > .row > .column,
.ui[class*="three column"].grid > .column {
.ui[class*="three column"].grid > .column:not(.row) {
width: @threeColumn;
}
.ui[class*="four column"].grid > .row > .column,
.ui[class*="four column"].grid > .column {
.ui[class*="four column"].grid > .column:not(.row) {
width: @fourColumn;
}
.ui[class*="five column"].grid > .row > .column,
.ui[class*="five column"].grid > .column {
.ui[class*="five column"].grid > .column:not(.row) {
width: @fiveColumn;
}
.ui[class*="six column"].grid > .row > .column,
.ui[class*="six column"].grid > .column {
.ui[class*="six column"].grid > .column:not(.row) {
width: @sixColumn;
}
.ui[class*="seven column"].grid > .row > .column,
.ui[class*="seven column"].grid > .column {
.ui[class*="seven column"].grid > .column:not(.row) {
width: @sevenColumn;
}
.ui[class*="eight column"].grid > .row > .column,
.ui[class*="eight column"].grid > .column {
.ui[class*="eight column"].grid > .column:not(.row) {
width: @eightColumn;
}
.ui[class*="nine column"].grid > .row > .column,
.ui[class*="nine column"].grid > .column {
.ui[class*="nine column"].grid > .column:not(.row) {
width: @nineColumn;
}
.ui[class*="ten column"].grid > .row > .column,
.ui[class*="ten column"].grid > .column {
.ui[class*="ten column"].grid > .column:not(.row) {
width: @tenColumn;
}
.ui[class*="eleven column"].grid > .row > .column,
.ui[class*="eleven column"].grid > .column {
.ui[class*="eleven column"].grid > .column:not(.row) {
width: @elevenColumn;
}
.ui[class*="twelve column"].grid > .row > .column,
.ui[class*="twelve column"].grid > .column {
.ui[class*="twelve column"].grid > .column:not(.row) {
width: @twelveColumn;
}
.ui[class*="thirteen column"].grid > .row > .column,
.ui[class*="thirteen column"].grid > .column {
.ui[class*="thirteen column"].grid > .column:not(.row) {
width: @thirteenColumn;
}
.ui[class*="fourteen column"].grid > .row > .column,
.ui[class*="fourteen column"].grid > .column {
.ui[class*="fourteen column"].grid > .column:not(.row) {
width: @fourteenColumn;
}
.ui[class*="fifteen column"].grid > .row > .column,
.ui[class*="fifteen column"].grid > .column {
.ui[class*="fifteen column"].grid > .column:not(.row) {
width: @fifteenColumn;
}
.ui[class*="sixteen column"].grid > .row > .column,
.ui[class*="sixteen column"].grid > .column {
.ui[class*="sixteen column"].grid > .column:not(.row) {
width: @sixteenColumn;
}

Expand Down Expand Up @@ -1449,78 +1449,78 @@ body > .ui.grid {
margin: 0em;
}
.ui[class*="two column"].doubling.grid > .row > .column,
.ui[class*="two column"].doubling.grid > .column,
.ui.grid > [class*="two column"].doubling.row > .column {
.ui[class*="two column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="two column"].doubling.row.row > .column {
width: @oneColumn !important;
}
.ui[class*="three column"].doubling.grid > .row > .column,
.ui[class*="three column"].doubling.grid > .column,
.ui.grid > [class*="three column"].doubling.row > .column {
.ui[class*="three column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="three column"].doubling.row.row > .column {
width: @twoColumn !important;
}
.ui[class*="four column"].doubling.grid > .row > .column,
.ui[class*="four column"].doubling.grid > .column,
.ui.grid > [class*="four column"].doubling.row > .column {
.ui[class*="four column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="four column"].doubling.row.row > .column {
width: @twoColumn !important;
}
.ui[class*="five column"].doubling.grid > .row > .column,
.ui[class*="five column"].doubling.grid > .column,
.ui.grid > [class*="five column"].doubling.row > .column {
.ui[class*="five column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="five column"].doubling.row.row > .column {
width: @threeColumn !important;
}
.ui[class*="six column"].doubling.grid > .row > .column,
.ui[class*="six column"].doubling.grid > .column,
.ui.grid > [class*="six column"].doubling.row > .column {
.ui[class*="six column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="six column"].doubling.row.row > .column {
width: @threeColumn !important;
}
.ui[class*="seven column"].doubling.grid > .row > .column,
.ui[class*="seven column"].doubling.grid > .column,
.ui.grid > [class*="seven column"].doubling.row > .column {
.ui[class*="seven column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="seven column"].doubling.row.row > .column {
width: @threeColumn !important;
}
.ui[class*="eight column"].doubling.grid > .row > .column,
.ui[class*="eight column"].doubling.grid > .column,
.ui.grid > [class*="eight column"].doubling.row > .column {
.ui[class*="eight column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="eight column"].doubling.row.row > .column {
width: @fourColumn !important;
}
.ui[class*="nine column"].doubling.grid > .row > .column,
.ui[class*="nine column"].doubling.grid > .column,
.ui.grid > [class*="nine column"].doubling.row > .column {
.ui[class*="nine column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="nine column"].doubling.row.row > .column {
width: @fourColumn !important;
}
.ui[class*="ten column"].doubling.grid > .row > .column,
.ui[class*="ten column"].doubling.grid > .column,
.ui.grid > [class*="ten column"].doubling.row > .column {
.ui[class*="ten column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="ten column"].doubling.row.row > .column {
width: @fiveColumn !important;
}
.ui[class*="eleven column"].doubling.grid > .row > .column,
.ui[class*="eleven column"].doubling.grid > .column,
.ui.grid > [class*="eleven column"].doubling.row > .column {
.ui[class*="eleven column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="eleven column"].doubling.row.row > .column {
width: @fiveColumn !important;
}
.ui[class*="twelve column"].doubling.grid > .row > .column,
.ui[class*="twelve column"].doubling.grid > .column,
.ui.grid > [class*="twelve column"].doubling.row > .column {
.ui[class*="twelve column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="twelve column"].doubling.row.row > .column {
width: @sixColumn !important;
}
.ui[class*="thirteen column"].doubling.grid > .row > .column,
.ui[class*="thirteen column"].doubling.grid > .column,
.ui.grid > [class*="thirteen column"].doubling.row > .column {
.ui[class*="thirteen column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="thirteen column"].doubling.row.row > .column {
width: @sixColumn !important;
}
.ui[class*="fourteen column"].doubling.grid > .row > .column,
.ui[class*="fourteen column"].doubling.grid > .column,
.ui.grid > [class*="fourteen column"].doubling.row > .column {
.ui[class*="fourteen column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="fourteen column"].doubling.row.row > .column {
width: @sevenColumn !important;
}
.ui[class*="fifteen column"].doubling.grid > .row > .column,
.ui[class*="fifteen column"].doubling.grid > .column,
.ui.grid > [class*="fifteen column"].doubling.row > .column {
.ui[class*="fifteen column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="fifteen column"].doubling.row.row > .column {
width: @sevenColumn !important;
}
.ui[class*="sixteen column"].doubling.grid > .row > .column,
.ui[class*="sixteen column"].doubling.grid > .column,
.ui.grid > [class*="sixteen column"].doubling.row > .column {
.ui[class*="sixteen column"].doubling.grid > .column:not(.row),
.ui.grid > [class*="sixteen column"].doubling.row.row > .column {
width: @eightColumn !important;
}
}
Expand All @@ -1542,78 +1542,78 @@ body > .ui.grid {
box-shadow: none !important;
}
.ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="two column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
.ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
width: @oneColumn !important;
}
.ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="three column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
.ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="four column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
.ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="five column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
.ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="six column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
.ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="seven column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
.ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="eight column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
.ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
width: @twoColumn !important;
}
.ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="nine column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
.ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
width: @threeColumn !important;
}
.ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="ten column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
.ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
width: @threeColumn !important;
}
.ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="eleven column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column {
.ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
width: @threeColumn !important;
}
.ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="twelve column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
.ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
width: @threeColumn !important;
}
.ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="thirteen column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column {
.ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
width: @threeColumn !important;
}
.ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="fourteen column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
.ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
width: @fourColumn !important;
}
.ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="fifteen column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column {
.ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
width: @fourColumn !important;
}
.ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
.ui[class*="sixteen column"].doubling:not(.stackable).grid > .column,
.ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
.ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
.ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
width: @fourColumn !important;
}
}
Expand Down

0 comments on commit 6ccdc83

Please sign in to comment.