diff --git a/examples/attached.html b/examples/attached.html new file mode 100644 index 000000000..a4b95f535 --- /dev/null +++ b/examples/attached.html @@ -0,0 +1,326 @@ + + + + + + + + + + Attached - Semantic + + + + + + + + + + + + + + +
+

Attached Content

+
+
+
+ Segment 1 +
+
+ Segment 2 +
+
+ Segment 2 +
+
+ Segment 3 +
+
+
+

Top

+
+
+
+

Nested Top

+
+
+

Nested Middle

+
+
+

Nested Bottom

+
+
+
+

Middle

+
+
+
+

Top

+
+
+

Middle

+
+
+

Bottom

+
+
+
+

Bottom

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
+ + + + + + + + + + + + + + + + + + +
CellCellCell
CellCellCell
CellCellCell
+ + + + + + + + + + + + + + + + + + +
CellCellCell
CellCellCell
CellCellCell
+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
+
+
+
+ Item + Item + Item +
+
+ Item + Item + Item +
+
+ Item + Item + Item +
+
+ Item + Item + Item +
+ +
+ Active Item + Item + Item +
+
+ Segment +
+ +
+ Active Item + Item + Item +
+
+ Segment +
+ +
+
+ +
+ +
+ +
Segment
+
+ Item + Item + Item +
+
+ 1 +
+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
+ +
+ +
+ Item + Item + Item +
+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
+
+ Item + Item + Item +
+ +
+ +
+ Item + Item + Item +
+ + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
+
+ Segment +
+ + +
+ + + + diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index d0f4589e5..455073d13 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -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; diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 6fe6bd60c..a94b63717 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -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 { diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index ddeda073b..6cf1f9c82 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -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; diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 96893d371..1e01b7dd5 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -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; diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables index e10aa60fa..69d555835 100644 --- a/src/themes/default/collections/table.variables +++ b/src/themes/default/collections/table.variables @@ -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; diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 1bd54948b..16a545e66 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -92,8 +92,8 @@ @attachedBoxShadow: none; @attachedBorder: @borderWidth solid @solidBorderColor; @attachedBottomBoxShadow: - @attachedBoxShadow, - @subtleShadow + @boxShadow, + @attachedBoxShadow ; /* Inverted */