Semantic-UI-Docs/build/uncompressed/elements/segment.css

/*
 * # Semantic Segment - Flat
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: May 17 2013
 */
/*******************************
            Segment
*******************************/
.ui.segment {
  position: relative;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  margin: 1em 0em;
  padding: 1.3em 1em;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.ui.vertical.segment {
  margin: 0em;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.ui.horizontal.segment {
  margin: 0em;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
}
/*-------------------
    Loose Coupling
--------------------*/
/* No padding on edge content */
.ui.segment > :first-child {
  margin-top: 0em;
}
.ui.segment > :last-child {
  margin-bottom: 0em;
}
.ui.segment > :only-child {
  margin: 0em;
}
/* Padding on next content after a label */
.ui.segment > .attached.label:first-child + * {
  margin-top: 2em;
}
.ui.segment > .bottom.attached.label:first-child + * {
  margin-top: 0em;
}
/*******************************
            States
*******************************/
.ui.disabled.segment {
  opacity: 0.8;
  color: #DDDDDD;
}
/*******************************
           Variations
*******************************/
/*-------------------
       Basic
--------------------*/
.ui.basic.segment {
  position: relative;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.basic.segment:before {
  position: absolute;
  top: 0px;
  width: 100%;
  content: '';
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
}
/*-------------------
       Colors
--------------------*/
.ui.blue.segment {
  border-top: 0.2em solid #6ECFF5;
}
.ui.green.segment {
  border-top: 0.2em solid #A1CF64;
}
.ui.red.segment {
  border-top: 0.2em solid #EF4D6D;
}
.ui.purple.segment {
  border-top: 0.2em solid #564F8A;
}
.ui.teal.segment {
  border-top: 0.2em solid #00B5AD;
}
/*-------------------
   Inverted Colors
--------------------*/
.ui.inverted.black.segment {
  background-color: #5C6166 !important;
  color: #FFFFFF !important;
}
.ui.inverted.blue.segment {
  background-color: #6ECFF5 !important;
  color: #FFFFFF !important;
}
.ui.inverted.green.segment {
  background-color: #A1CF64 !important;
  color: #FFFFFF !important;
}
.ui.inverted.red.segment {
  background-color: #EF4D6D !important;
  color: #FFFFFF !important;
}
.ui.inverted.purple.segment {
  background-color: #564F8A !important;
  color: #FFFFFF !important;
}
.ui.inverted.teal.segment {
  background-color: #00B5AD !important;
  color: #FFFFFF !important;
}
/*-------------------
       Aligned
--------------------*/
.ui.left.aligned.segment {
  text-align: left;
}
.ui.right.aligned.segment {
  text-align: right;
}
.ui.center.aligned.segment {
  text-align: center;
}
/*-------------------
       Floated
--------------------*/
.ui.floated.segment,
.ui.left.floated.segment {
  float: left;
}
.ui.right.floated.segment {
  float: right;
}
/*-------------------
       Stacked
--------------------*/
.ui.stacked.segment {
  padding-bottom: 1.2em;
}
.ui.stacked.segment:after,
.ui.stacked.segment:before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #F8F8F8;
  width: 100%;
  height: 5px;
}
.ui.stacked.segment:before {
  bottom: 0px;
}
/*-------------------
       Raised
--------------------*/
.ui.raised.segment {
  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
}
/*-------------------
      Inverted
--------------------*/
.ui.inverted.segment {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.inverted.segment,
.ui.primary.inverted.segment {
  background-color: #555555;
  color: #FFFFFF;
}
.ui.secondary.inverted.segment {
  background-color: #777777;
  color: #E2E2E2;
}
.ui.tertiary.inverted.segment {
  background-color: #B0B0B0;
  color: #EBEBEB;
}
/*-------------------
     Ordinality
--------------------*/
.ui.primary.segment {
  background-color: #FFFFFF;
  color: #555555;
}
.ui.secondary.segment {
  background-color: #F5F5F5;
  color: #777777;
}
.ui.tertiary.segment {
  background-color: #EBEBEB;
  color: #B0B0B0;
}
/*-------------------
      Attached
--------------------*/
.ui.segment.attached {
  top: -1px;
  bottom: -1px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  margin: 0em;
  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  box-shadow: 0px 0px 0px 1px #DDDDDD;
}
.ui.top.attached.segment {
  top: 0px;
  bottom: -1px;
  margin-top: 0em;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
.ui.segment.bottom.attached {
  top: -1px;
  bottom: 0px;
  margin-bottom: 0em;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
}