richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

#2599 Fixes double borders in some attached cases, consolidates attached logic, adds attached examples

pull/2668/head
jlukic 9 years ago
parent
5f701c1fbe
commit
62110fc51f
7 changed files with 415 additions and 47 deletions
Unified View
  1. 326
      examples/attached.html
  2. 50
      src/definitions/collections/menu.less
  3. 33
      src/definitions/collections/table.less
  4. 13
      src/definitions/elements/segment.less
  5. 23
      src/themes/default/collections/menu.variables
  6. 13
      src/themes/default/collections/table.variables
  7. 4
      src/themes/default/elements/segment.variables

326
examples/attached.html
View File

@ -0,0 +1,326 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Attached - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/table.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<style type="text/css">
.ui.container {
padding-top: 5em;
padding-bottom: 5em;
}
</style>
</head>
<body>
<div class="ui container">
<h2 class="ui header">Attached Content</h2>
<div class="ui three column grid">
<div class="column">
<div class="top attached ui segment">
Segment 1
</div>
<div class="attached ui segment">
Segment 2
</div>
<div class="attached ui segment">
Segment 2
</div>
<div class="bottom attached ui segment">
Segment 3
</div>
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segments">
<div class="ui segment">
<p>Nested Top</p>
</div>
<div class="ui segment">
<p>Nested Middle</p>
</div>
<div class="ui segment">
<p>Nested Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui horizontal segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="column">
<table class="top attached ui basic table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="attached ui table">
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="attached ui celled selectable table">
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="bottom attached ui celled table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<div class="top attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="bottom attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui top attached tabular menu">
<a class="active item">Active Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui bottom attached segment">
Segment
</div>
<div class="ui top attached menu">
<a class="active item">Active Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui bottom attached segment">
Segment
</div>
</div>
</div>
<div class="ui section divider"></div>
<div class="ui section divider"></div>
<div class="ui top attached segment">Segment</div>
<div class="ui attached three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui attached segment">
1
</div>
<table class="ui bottom attached table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui section divider"></div>
<div class="ui top attached three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<table class="ui attached table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui bottom attached three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui section divider"></div>
<div class="ui top attached three item inverted menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<table class="ui attached inverted table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui bottom attached inverted segment">
Segment
</div>
</div>
</body>
</html>

50
src/definitions/collections/menu.less
View File

@ -1754,39 +1754,59 @@ Floated Menu / Item
Attached Attached
---------------*/ ---------------*/
/* Middle */
.ui.attached.menu { .ui.attached.menu {
top: 0px;
bottom: 0px;
border-radius: 0px; border-radius: 0px;
margin-left: -@borderWidth; margin: 0em @attachedHorizontalOffset;
margin-right: -@borderWidth;
width: @attachedWidth; width: @attachedWidth;
box-shadow: @attachedBoxShadow; /* avoid rgba multiplying */ max-width: @attachedWidth;
box-shadow: @attachedBoxShadow;
} }
.ui.attached + .ui.attached.menu:not(.top) {
/* Direction */ border-top: none;
.ui.attached.menu:not(.top):not(.bottom) {
margin-top: 0em;
margin-bottom: 0em;
} }
.ui.top.attached.menu { /* Top */
.ui[class*="top attached"].menu {
bottom: 0px;
margin-bottom: 0em; margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em; border-radius: @borderRadius @borderRadius 0em 0em;
} }
.ui.top.attached.menu > .item:first-child { .ui.menu[class*="top attached"]:first-child {
border-radius: @borderRadius 0em 0em 0em; margin-top: 0em;
} }
.ui.bottom.attached.menu { /* Bottom */
.ui[class*="bottom attached"].menu {
bottom: 0px;
margin-top: 0em; margin-top: 0em;
border-top: none; top: @attachedBottomOffset;
margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius; border-radius: 0em 0em @borderRadius @borderRadius;
} }
.ui[class*="bottom attached"].menu:last-child {
margin-bottom: 0em;
}
/* Attached Menu Item */
.ui.top.attached.menu > .item:first-child {
border-radius: @borderRadius 0em 0em 0em;
}
.ui.bottom.attached.menu > .item:first-child { .ui.bottom.attached.menu > .item:first-child {
border-radius: 0em 0em 0em @borderRadius; border-radius: 0em 0em 0em @borderRadius;
} }
/* Tabular Attached */ /* Tabular Attached */
.ui.top.attached.menu:not(.fixed):not(.tabular) { .ui.attached.menu:not(.tabular) {
border-bottom: none; border: @attachedBorder;
}
.ui.attached.inverted.menu {
border: none;
} }
.ui.attached.tabular.menu { .ui.attached.tabular.menu {
margin-left: 0; margin-left: 0;

33
src/definitions/collections/table.less
View File

@ -506,22 +506,30 @@
} }
/*-------------------
Attached
--------------------*/
/*-------------- /* Middle */
Attached
---------------*/
/* All */
.ui.attached.table { .ui.attached.table {
width: @attachedTableWidth; top: 0px;
margin: 0em @attachedHorizontalOffset; bottom: 0px;
border-radius: 0px; border-radius: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
box-shadow: @attachedBoxShadow; box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.attached + .ui.attached.table:not(.top) {
border-top: none;
} }
/* Top */ /* Top */
.ui[class*="top attached"].table { .ui[class*="top attached"].table {
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin; margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em; border-radius: @borderRadius @borderRadius 0em 0em;
} }
@ -530,12 +538,15 @@
} }
/* Bottom */ /* Bottom */
.ui.table[class*="bottom attached"] { .ui[class*="bottom attached"].table {
bottom: 0px;
margin-top: 0em; margin-top: 0em;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin; margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius; border-radius: 0em 0em @borderRadius @borderRadius;
} }
.ui.table[class*="bottom attached"]:last-child { .ui[class*="bottom attached"].table:last-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
@ -895,7 +906,7 @@
} }
.ui.inverted.table th { .ui.inverted.table th {
background-color: @invertedHeaderBackground; background-color: @invertedHeaderBackground;
border-color: @invertedCellBorderColor !important; border-color: @invertedHeaderBorderColor !important;
color: @invertedHeaderColor; color: @invertedHeaderColor;
} }
.ui.inverted.table tr td { .ui.inverted.table tr td {

13
src/definitions/elements/segment.less
View File

@ -678,26 +678,27 @@
Attached Attached
--------------------*/ --------------------*/
.ui.segment.attached { /* Middle */
.ui.attached.segment {
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
border-radius: 0px;
margin: 0em @attachedHorizontalOffset; margin: 0em @attachedHorizontalOffset;
width: @attachedWidth; width: @attachedWidth;
max-width: @attachedWidth; max-width: @attachedWidth;
border-radius: 0px;
box-shadow: @attachedBoxShadow; box-shadow: @attachedBoxShadow;
border: @attachedBorder; border: @attachedBorder;
} }
.ui.segment.attached + .ui.segment.attached:not(.top) { .ui.attached + .ui.attached.segment:not(.top) {
border-top: none; border-top: none;
} }
/* Top */ /* Top */
.ui[class*="top attached"].segment { .ui[class*="top attached"].segment {
top: @attachedTopOffset;
bottom: 0px; bottom: 0px;
margin-top: @verticalMargin;
margin-bottom: 0em; margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em; border-radius: @borderRadius @borderRadius 0em 0em;
} }
.ui.segment[class*="top attached"]:first-child { .ui.segment[class*="top attached"]:first-child {
@ -706,9 +707,9 @@
/* Bottom */ /* Bottom */
.ui.segment[class*="bottom attached"] { .ui.segment[class*="bottom attached"] {
top: @attachedBottomOffset;
bottom: 0px; bottom: 0px;
margin-top: 0em; margin-top: 0em;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin; margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow; box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius; border-radius: 0em 0em @borderRadius @borderRadius;

23
src/themes/default/collections/menu.variables
View File

@ -2,21 +2,14 @@
Menu Menu
*******************************/ *******************************/
/*-------------------
Globals Used
--------------------*/
// @textColor
// @borderColor
// @invertedUnselectedTextColor
/*------------------- /*-------------------
Collection Collection
--------------------*/ --------------------*/
/* Menu */ /* Menu */
@margin: 1em 0rem; @verticalMargin: @medium;
@horizontalMargin: 0em;
@margin: @verticalMargin @horizontalMargin;
@background: #FFFFFF; @background: #FFFFFF;
@fontFamily: @pageFont; @fontFamily: @pageFont;
@itemBackground: none; @itemBackground: none;
@ -419,8 +412,16 @@
@floatedDistance: 0.5rem; @floatedDistance: 0.5rem;
/* Attached */ /* Attached */
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none; @attachedBoxShadow: none;
@attachedWidth: ~"calc(100% + "@borderWidth * 2~")"; @attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
@boxShadow,
@attachedBoxShadow
;
/* Sizes */ /* Sizes */
@smallWidth: 13rem; @smallWidth: 13rem;

13
src/themes/default/collections/table.variables
View File

@ -143,9 +143,16 @@
---------------*/ ---------------*/
/* Attached */ /* Attached */
@attachedHorizontalOffset: -1px; @attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none; @attachedBoxShadow: none;
@attachedTableWidth: ~"calc(100% + "@attachedHorizontalOffset * -2~")"; @attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
@boxShadow,
@attachedBoxShadow
;
/* Striped */ /* Striped */
@stripedBackground: rgba(0, 0, 50, 0.02); @stripedBackground: rgba(0, 0, 50, 0.02);
@ -194,8 +201,10 @@
@invertedBorder: none; @invertedBorder: none;
@invertedCellBorderColor: @whiteBorderColor; @invertedCellBorderColor: @whiteBorderColor;
@invertedCellColor: @invertedTextColor; @invertedCellColor: @invertedTextColor;
@invertedHeaderBackground: @veryStrongTransparentBlack; @invertedHeaderBackground: @veryStrongTransparentBlack;
@invertedHeaderColor: @invertedTextColor; @invertedHeaderColor: @invertedTextColor;
@invertedHeaderBorderColor: @invertedCellBorderColor;
@invertedDefinitionColumnBackground: @subtleTransparentWhite; @invertedDefinitionColumnBackground: @subtleTransparentWhite;
@invertedDefinitionColumnColor: @invertedSelectedTextColor; @invertedDefinitionColumnColor: @invertedSelectedTextColor;

4
src/themes/default/elements/segment.variables
View File

@ -92,8 +92,8 @@
@attachedBoxShadow: none; @attachedBoxShadow: none;
@attachedBorder: @borderWidth solid @solidBorderColor; @attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow: @attachedBottomBoxShadow:
@attachedBoxShadow, @boxShadow,
@subtleShadow @attachedBoxShadow
; ;
/* Inverted */ /* Inverted */

Write Preview
|||||||
100:0
Loading…
Cancel
Save