414 lines
8.3 KiB
Text
414 lines
8.3 KiB
Text
/*!
|
|
* # Fomantic-UI - Message
|
|
* http://github.com/fomantic/Fomantic-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 0;
|
|
background: @background;
|
|
padding: @padding;
|
|
line-height: @lineHeight;
|
|
color: @textColor;
|
|
transition: @transition;
|
|
border-radius: @borderRadius;
|
|
box-shadow: @boxShadow;
|
|
}
|
|
|
|
.ui.message:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ui.message:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
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 0;
|
|
}
|
|
.ui.message p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ui.message p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.ui.message .header + p {
|
|
margin-top: @headerParagraphDistance;
|
|
}
|
|
|
|
/* List */
|
|
.ui.message .list:not(.ui) {
|
|
text-align: left;
|
|
padding: 0;
|
|
opacity: @listOpacity;
|
|
list-style-position: @listStylePosition;
|
|
margin: @listMargin 0 0;
|
|
}
|
|
.ui.message .list:not(.ui):first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ui.message .list:not(.ui):last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.ui.message .list:not(.ui) li {
|
|
position: relative;
|
|
list-style-type: none;
|
|
margin: 0 0 @listItemMargin @listItemIndent;
|
|
padding: 0;
|
|
}
|
|
.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: 0;
|
|
}
|
|
|
|
|
|
/* Icon */
|
|
.ui.message > .icon {
|
|
margin-right: @iconDistance;
|
|
}
|
|
|
|
/* Close Icon */
|
|
.ui.message > .close.icon {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
margin: 0;
|
|
top: @closeTopDistance;
|
|
right: @closeRightDistance;
|
|
opacity: @closeOpacity;
|
|
transition: @closeTransition;
|
|
}
|
|
.ui.message > .close.icon:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* First / Last Element */
|
|
.ui.message > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ui.message > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/*******************************
|
|
Coupling
|
|
*******************************/
|
|
|
|
.ui.dropdown .menu > .message {
|
|
margin: 0 -@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
|
|
*******************************/
|
|
|
|
& when (@variationMessageCompact) {
|
|
/*--------------
|
|
Compact
|
|
---------------*/
|
|
|
|
.ui.compact.message {
|
|
display: inline-block;
|
|
}
|
|
.ui.compact.icon.message {
|
|
display: inline-flex;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
& when (@variationMessageAttached) {
|
|
/*--------------
|
|
Attached
|
|
---------------*/
|
|
|
|
.ui.attached.message {
|
|
margin-bottom: @attachedYOffset;
|
|
border-radius: @borderRadius @borderRadius 0 0;
|
|
box-shadow: @attachedBoxShadow;
|
|
margin-left: @attachedXOffset;
|
|
margin-right: @attachedXOffset;
|
|
}
|
|
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
|
margin-top: @attachedYOffset;
|
|
border-radius: 0;
|
|
}
|
|
.ui.bottom.attached.message {
|
|
margin-top: @attachedYOffset;
|
|
border-radius: 0 0 @borderRadius @borderRadius;
|
|
box-shadow: @attachedBottomBoxShadow;
|
|
}
|
|
.ui.bottom.attached.message:not(:last-child) {
|
|
margin-bottom: @verticalMargin;
|
|
}
|
|
& when (@variationMessageIcon) {
|
|
.ui.attached.icon.message {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
& when (@variationMessageIcon) {
|
|
/*--------------
|
|
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;
|
|
}
|
|
}
|
|
|
|
& when (@variationMessageFloating) {
|
|
/*--------------
|
|
Floating
|
|
---------------*/
|
|
|
|
.ui.floating.message {
|
|
box-shadow: @floatingBoxShadow;
|
|
}
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Colors
|
|
---------------*/
|
|
|
|
/*--------------
|
|
Types
|
|
---------------*/
|
|
& when (@variationMessageConsequences) {
|
|
|
|
@consequences: {
|
|
@positive: {
|
|
background : @positiveBackgroundColor;
|
|
header : @positiveHeaderColor;
|
|
boxShadow : @positiveBoxShadow;
|
|
boxFloatShadow : @positiveBoxFloatingShadow;
|
|
text : @positiveTextColor;
|
|
};
|
|
@negative: {
|
|
background : @negativeBackgroundColor;
|
|
header : @negativeHeaderColor;
|
|
boxShadow : @negativeBoxShadow;
|
|
boxFloatShadow : @negativeBoxFloatingShadow;
|
|
text : @negativeTextColor;
|
|
};
|
|
@info: {
|
|
background : @infoBackgroundColor;
|
|
header : @infoHeaderColor;
|
|
boxShadow : @infoBoxShadow;
|
|
boxFloatShadow : @infoBoxFloatingShadow;
|
|
text : @infoTextColor;
|
|
};
|
|
@warning: {
|
|
background : @warningBackgroundColor;
|
|
header : @warningHeaderColor;
|
|
boxShadow : @warningBoxShadow;
|
|
boxFloatShadow : @warningBoxFloatingShadow;
|
|
text : @warningTextColor;
|
|
};
|
|
@error: {
|
|
background : @errorBackgroundColor;
|
|
header : @errorHeaderColor;
|
|
boxShadow : @errorBoxShadow;
|
|
boxFloatShadow : @errorBoxFloatingShadow;
|
|
text : @errorTextColor;
|
|
};
|
|
@success: {
|
|
background : @successBackgroundColor;
|
|
header : @successHeaderColor;
|
|
boxShadow : @successBoxShadow;
|
|
boxFloatShadow : @successBoxFloatingShadow;
|
|
text : @successTextColor;
|
|
};
|
|
}
|
|
|
|
/* Colors */
|
|
|
|
each(@consequences, {
|
|
@color: replace(@key, '@', '');
|
|
@bg: @consequences[@@color][background];
|
|
@hd: @consequences[@@color][header];
|
|
@bs: @consequences[@@color][boxShadow];
|
|
@bfs: @consequences[@@color][boxFloatShadow];
|
|
@t: @consequences[@@color][text];
|
|
|
|
.ui.@{color}.message {
|
|
background-color: @bg;
|
|
color: @t;
|
|
}
|
|
|
|
.ui.@{color}.message,
|
|
.ui.attached.@{color}.message {
|
|
box-shadow: @bs;
|
|
}
|
|
& when (@variationMessageFloating) {
|
|
.ui.floating.@{color}.message {
|
|
box-shadow: @bfs;
|
|
}
|
|
}
|
|
.ui.@{color}.message .header {
|
|
color: @hd;
|
|
}
|
|
})
|
|
}
|
|
|
|
each(@colors, {
|
|
@color: replace(@key, '@', '');
|
|
@bg: @colors[@@color][background];
|
|
@hd: @colors[@@color][header];
|
|
@bs: @colors[@@color][boxShadow];
|
|
@bfs: @colors[@@color][boxFloatShadow];
|
|
@t: @colors[@@color][text];
|
|
@isVeryDark: @colors[@@color][isVeryDark];
|
|
|
|
.ui.@{color}.message {
|
|
& when not (@isVeryDark) {
|
|
background-color: @bg;
|
|
color: @t;
|
|
}
|
|
& when (@isVeryDark) {
|
|
background-color: @black;
|
|
color: @invertedTextColor;
|
|
}
|
|
}
|
|
|
|
.ui.@{color}.message,
|
|
.ui.attached.@{color}.message {
|
|
& when not (@isVeryDark) {
|
|
box-shadow: @bs;
|
|
}
|
|
}
|
|
& when (@variationMessageFloating) {
|
|
.ui.floating.@{color}.message {
|
|
& when not (@isVeryDark) {
|
|
box-shadow: @bfs;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui.@{color}.message .header {
|
|
& when not (@isVeryDark) {
|
|
color: @hd;
|
|
}
|
|
& when (@isVeryDark) {
|
|
color: @invertedTextColor;
|
|
}
|
|
}
|
|
})
|
|
|
|
& when (@variationMessageInverted) {
|
|
.ui.inverted.message {
|
|
background-color: @black;
|
|
color: @invertedTextColor;
|
|
}
|
|
}
|
|
|
|
/*--------------
|
|
Sizes
|
|
---------------*/
|
|
|
|
.ui.message {
|
|
font-size: @relativeMedium;
|
|
}
|
|
& when not (@variationMessageSizes = false) {
|
|
each(@variationMessageSizes, {
|
|
@s: @{value}MessageSize;
|
|
.ui.@{value}.message {
|
|
font-size: @@s;
|
|
}
|
|
})
|
|
}
|
|
|
|
.loadUIOverrides();
|