Browse Source

#2411 Adds horizontal segment groups

pull/2416/head
jlukic 10 years ago
parent
commit
f59c7074bf
2 changed files with 95 additions and 63 deletions
  1. 149
      src/definitions/elements/segment.less
  2. 9
      src/themes/default/elements/segment.variables

149
src/definitions/elements/segment.less

@ -27,7 +27,7 @@
background-color: @background;
box-shadow: @boxShadow;
margin: @margin 0em;
padding: @verticalPadding @horizontalPadding;
padding: @padding;
border-radius: @borderRadius;
border: @border;
}
@ -48,25 +48,30 @@
background-color: transparent;
border-radius: 0px;
box-shadow: none;
border: none;
box-shadow: 0px -1px 0px @borderColor inset;
border-bottom: @borderWidth solid @borderColor;
}
.ui.vertical.segment:last-child {
box-shadow: none;
border-bottom: none;
}
/* Horizontal */
.ui.horizontal.segment {
.ui.horizontal.segment,
.ui.horizontal.segments > .segment {
margin: 0em;
padding-top: 0em;
padding-bottom: 0em;
min-width: 0px;
background-color: transparent;
border-radius: 0px;
border: none;
box-shadow: 1px 0px 0px @borderColor;
box-shadow: none;
border-right: @borderWidth solid @borderColor;
}
/*-------------------
Loose Coupling
--------------------*/
@ -112,7 +117,7 @@
box-shadow: @boxShadow;
}
.ui[class*="very basic"].table.segment {
padding: @verticalPadding @horizontalPadding;
padding: @padding;
}
@ -266,6 +271,78 @@
}
/*******************************
Groups
*******************************/
.ui.segments {
position: relative;
margin: @margin 0em;
box-shadow: @boxShadow;
}
.ui.segments:first-child {
margin-top: 0em;
}
.ui.segments:last-child {
margin-bottom: 0em;
}
.ui.segments > .segment {
top: 0px;
bottom: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
border-radius: 0px;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.segments > .segment:not(:last-child) {
border-bottom: none;
}
/* Horizontal Group */
.ui.horizontal.segments {
display: flex;
flex-direction: row;
padding: @padding;
background-color: @background;
box-shadow: @boxShadow;
margin: @margin 0em;
padding: @padding;
border-radius: @borderRadius;
border: @border;
}
.ui.horizontal.segments > .segment:first-child {
padding-left: 0px;
}
.ui.horizontal.segments > .segment:last-child {
padding-right: 0px;
border-right: none;
}
/* Top */
.ui.segments > .segment:first-child {
margin-top: 0em;
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
}
/* Bottom */
.ui.segments > .segment:last-child {
bottom: 0px;
margin-top: 0em;
margin-bottom: 0em;
top: @attachedBottomOffset;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
/*******************************
States
*******************************/
@ -346,11 +423,10 @@
--------------------*/
.ui.basic.segment {
position: relative;
background-color: transparent;
box-shadow: none;
border-radius: 0px;
background-color: @basicBackground;
box-shadow: @basicBoxShadow;
border: @basicBorder;
border-radius: @basicBorderRadius;
}
/*-------------------
@ -607,55 +683,4 @@
margin-bottom: 0em;
}
/*-------------------
Groups
--------------------*/
.ui.segments {
position: relative;
margin: @margin 0em;
box-shadow: @boxShadow;
}
.ui.segments:first-child {
margin-top: 0em;
}
.ui.segments:last-child {
margin-bottom: 0em;
}
.ui.segments > .segment {
top: 0px;
bottom: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
border-radius: 0px;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.segments > .segment:not(:last-child) {
border-bottom: none;
}
/* Top */
.ui.segments > .segment:first-child {
margin-top: 0em;
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
}
/* Bottom */
.ui.segments > .segment:last-child {
bottom: 0px;
margin-top: 0em;
margin-bottom: 0em;
top: @attachedBottomOffset;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
.loadUIOverrides();

9
src/themes/default/elements/segment.variables

@ -8,11 +8,12 @@
@background: @white;
@borderWidth: 1px;
@border: 1px solid @borderColor;
@border: @borderWidth solid @borderColor;
@boxShadow: @subtleShadow;
@verticalPadding: 1em;
@horizontalPadding: 1em;
@padding: @verticalPadding @horizontalPadding;
@margin: 1rem;
@borderRadius: @defaultBorderRadius;
@ -80,6 +81,12 @@
@subtleShadow
;
/* Basic */
@basicBackground: none transparent;
@basicBorder: none;
@basicBoxShadow: none;
@basicBorderRadius: 0px;
/* Colors */
@coloredBorderSize: 2px;

Loading…
Cancel
Save