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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
---------------*/
/* Middle */
.ui.attached.menu {
top: 0px;
bottom: 0px;
border-radius: 0px;
margin-left: -@borderWidth;
margin-right: -@borderWidth;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
box-shadow: @attachedBoxShadow; /* avoid rgba multiplying */
max-width: @attachedWidth;
box-shadow: @attachedBoxShadow;
}
/* Direction */
.ui.attached.menu:not(.top):not(.bottom) {
margin-top: 0em;
margin-bottom: 0em;
.ui.attached + .ui.attached.menu:not(.top) {
border-top: none;
}
.ui.top.attached.menu {
/* Top */
.ui[class*="top attached"].menu {
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em;
}
.ui.top.attached.menu > .item:first-child {
border-radius: @borderRadius 0em 0em 0em;
.ui.menu[class*="top attached"]:first-child {
margin-top: 0em;
}
.ui.bottom.attached.menu {
/* Bottom */
.ui[class*="bottom attached"].menu {
bottom: 0px;
margin-top: 0em;
border-top: none;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
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 {
border-radius: 0em 0em 0em @borderRadius;
}
/* Tabular Attached */
.ui.top.attached.menu:not(.fixed):not(.tabular) {
border-bottom: none;
.ui.attached.menu:not(.tabular) {
border: @attachedBorder;
}
.ui.attached.inverted.menu {
border: none;
}
.ui.attached.tabular.menu {
margin-left: 0;

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save