cacert-boardvoting/semantic/src/definitions/collections/message.less

478 lines
8.6 KiB
Text

/*!
* # Semantic UI - Message
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'collection';
@element : 'message';
@import (multiple) '../../theme.config';
/*******************************
Message
*******************************/
.ui.message {
position: relative;
min-height: 1em;
margin: @verticalMargin 0em;
background: @background;
padding: @padding;
line-height: @lineHeight;
color: @textColor;
transition: @transition;
border-radius: @borderRadius;
box-shadow: @boxShadow;
}
.ui.message:first-child {
margin-top: 0em;
}
.ui.message:last-child {
margin-bottom: 0em;
}
/*--------------
Content
---------------*/
/* Header */
.ui.message .header {
display: @headerDisplay;
font-family: @headerFont;
font-weight: @headerFontWeight;
margin: @headerMargin;
}
/* Default font size */
.ui.message .header:not(.ui) {
font-size: @headerFontSize;
}
/* Paragraph */
.ui.message p {
opacity: @messageTextOpacity;
margin: @messageParagraphMargin 0em;
}
.ui.message p:first-child {
margin-top: 0em;
}
.ui.message p:last-child {
margin-bottom: 0em;
}
.ui.message .header + p {
margin-top: @headerParagraphDistance;
}
/* List */
.ui.message .list:not(.ui) {
text-align: left;
padding: 0em;
opacity: @listOpacity;
list-style-position: @listStylePosition;
margin: @listMargin 0em 0em;
}
.ui.message .list:not(.ui):first-child {
margin-top: 0em;
}
.ui.message .list:not(.ui):last-child {
margin-bottom: 0em;
}
.ui.message .list:not(.ui) li {
position: relative;
list-style-type: none;
margin: 0em 0em @listItemMargin @listItemIndent;
padding: 0em;
}
.ui.message .list:not(.ui) li:before {
position: absolute;
content: '•';
left: -1em;
height: 100%;
vertical-align: baseline;
}
.ui.message .list:not(.ui) li:last-child {
margin-bottom: 0em;
}
/* Icon */
.ui.message > .icon {
margin-right: @iconDistance;
}
/* Close Icon */
.ui.message > .close.icon {
cursor: pointer;
position: absolute;
margin: 0em;
top: @closeTopDistance;
right: @closeRightDistance;
opacity: @closeOpacity;
transition: @closeTransition;
}
.ui.message > .close.icon:hover {
opacity: 1;
}
/* First / Last Element */
.ui.message > :first-child {
margin-top: 0em;
}
.ui.message > :last-child {
margin-bottom: 0em;
}
/*******************************
Coupling
*******************************/
.ui.dropdown .menu > .message {
margin: 0px -@borderWidth;
}
/*******************************
States
*******************************/
/*--------------
Visible
---------------*/
.ui.visible.visible.visible.visible.message {
display: block;
}
.ui.icon.visible.visible.visible.visible.message {
display: flex;
}
/*--------------
Hidden
---------------*/
.ui.hidden.hidden.hidden.hidden.message {
display: none;
}
/*******************************
Variations
*******************************/
/*--------------
Compact
---------------*/
.ui.compact.message {
display: inline-block;
}
/*--------------
Attached
---------------*/
.ui.attached.message {
margin-bottom: @attachedYOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
box-shadow: @attachedBoxShadow;
margin-left: @attachedXOffset;
margin-right: @attachedXOffset;
}
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
margin-top: @attachedYOffset;
border-radius: 0em;
}
.ui.bottom.attached.message {
margin-top: @attachedYOffset;
border-radius: 0em 0em @borderRadius @borderRadius;
box-shadow: @attachedBottomBoxShadow;
}
.ui.bottom.attached.message:not(:last-child) {
margin-bottom: @verticalMargin;
}
.ui.attached.icon.message {
width: auto;
}
/*--------------
Icon
---------------*/
.ui.icon.message {
display: flex;
width: 100%;
align-items: center;
}
.ui.icon.message > .icon:not(.close) {
display: block;
flex: 0 0 auto;
width: auto;
line-height: 1;
vertical-align: @iconVerticalAlign;
font-size: @iconSize;
opacity: @iconOpacity;
}
.ui.icon.message > .content {
display: block;
flex: 1 1 auto;
vertical-align: @iconVerticalAlign;
}
.ui.icon.message .icon:not(.close) + .content {
padding-left: @iconContentDistance;
}
.ui.icon.message .circular.icon {
width: 1em;
}
/*--------------
Floating
---------------*/
.ui.floating.message {
box-shadow: @floatingBoxShadow;
}
/*--------------
Colors
---------------*/
.ui.black.message {
background-color: @black;
color: @invertedTextColor;
}
/*--------------
Types
---------------*/
/* Positive */
.ui.positive.message {
background-color: @positiveBackgroundColor;
color: @positiveTextColor;
}
.ui.positive.message,
.ui.attached.positive.message {
box-shadow: @positiveBoxShadow;
}
.ui.positive.message .header {
color: @positiveHeaderColor;
}
/* Negative */
.ui.negative.message {
background-color: @negativeBackgroundColor;
color: @negativeTextColor;
}
.ui.negative.message,
.ui.attached.negative.message {
box-shadow: @negativeBoxShadow;
}
.ui.negative.message .header {
color: @negativeHeaderColor;
}
/* Info */
.ui.info.message {
background-color: @infoBackgroundColor;
color: @infoTextColor;
}
.ui.info.message,
.ui.attached.info.message {
box-shadow: @infoBoxShadow;
}
.ui.info.message .header {
color: @infoHeaderColor;
}
/* Warning */
.ui.warning.message {
background-color: @warningBackgroundColor;
color: @warningTextColor;
}
.ui.warning.message,
.ui.attached.warning.message {
box-shadow: @warningBoxShadow;
}
.ui.warning.message .header {
color: @warningHeaderColor;
}
/* Error */
.ui.error.message {
background-color: @errorBackgroundColor;
color: @errorTextColor;
}
.ui.error.message,
.ui.attached.error.message {
box-shadow: @errorBoxShadow;
}
.ui.error.message .header {
color: @errorHeaderColor;
}
/* Success */
.ui.success.message {
background-color: @successBackgroundColor;
color: @successTextColor;
}
.ui.success.message,
.ui.attached.success.message {
box-shadow: @successBoxShadow;
}
.ui.success.message .header {
color: @successHeaderColor;
}
/* Colors */
.ui.inverted.message,
.ui.black.message {
background-color: @black;
color: @invertedTextColor;
}
.ui.red.message {
background-color: @redBackground;
color: @redTextColor;
box-shadow: @redBoxShadow;
}
.ui.red.message .header {
color: @redHeaderColor;
}
.ui.orange.message {
background-color: @orangeBackground;
color: @orangeTextColor;
box-shadow: @orangeBoxShadow;
}
.ui.orange.message .header {
color: @orangeHeaderColor;
}
.ui.yellow.message {
background-color: @yellowBackground;
color: @yellowTextColor;
box-shadow: @yellowBoxShadow;
}
.ui.yellow.message .header {
color: @yellowHeaderColor;
}
.ui.olive.message {
background-color: @oliveBackground;
color: @oliveTextColor;
box-shadow: @oliveBoxShadow;
}
.ui.olive.message .header {
color: @oliveHeaderColor;
}
.ui.green.message {
background-color: @greenBackground;
color: @greenTextColor;
box-shadow: @greenBoxShadow;
}
.ui.green.message .header {
color: @greenHeaderColor;
}
.ui.teal.message {
background-color: @tealBackground;
color: @tealTextColor;
box-shadow: @tealBoxShadow;
}
.ui.teal.message .header {
color: @tealHeaderColor;
}
.ui.blue.message {
background-color: @blueBackground;
color: @blueTextColor;
box-shadow: @blueBoxShadow;
}
.ui.blue.message .header {
color: @blueHeaderColor;
}
.ui.violet.message {
background-color: @violetBackground;
color: @violetTextColor;
box-shadow: @violetBoxShadow;
}
.ui.violet.message .header {
color: @violetHeaderColor;
}
.ui.purple.message {
background-color: @purpleBackground;
color: @purpleTextColor;
box-shadow: @purpleBoxShadow;
}
.ui.purple.message .header {
color: @purpleHeaderColor;
}
.ui.pink.message {
background-color: @pinkBackground;
color: @pinkTextColor;
box-shadow: @pinkBoxShadow;
}
.ui.pink.message .header {
color: @pinkHeaderColor;
}
.ui.brown.message {
background-color: @brownBackground;
color: @brownTextColor;
box-shadow: @brownBoxShadow;
}
.ui.brown.message .header {
color: @brownHeaderColor;
}
/*--------------
Sizes
---------------*/
.ui.mini.message {
font-size: @relativeMini;
}
.ui.tiny.message {
font-size: @relativeTiny;
}
.ui.small.message {
font-size: @relativeSmall;
}
.ui.message {
font-size: @relativeMedium;
}
.ui.large.message {
font-size: @relativeLarge;
}
.ui.big.message {
font-size: @relativeBig;
}
.ui.huge.message {
font-size: @relativeHuge;
}
.ui.massive.message {
font-size: @relativeMassive;
}
.loadUIOverrides();