feat: Use fomantic-ui directly instead of fomantic-ui-less
This commit is contained in:
Robert Prehn
parent
25227d1c1c
commit
739fa1d5d5
483 changed files with 102194 additions and 94471 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import 'fomantic-ui-less/semantic.less';
|
||||
import '../semantic/src/semantic.less';
|
||||
// We need to import the CSS so that webpack will load it.
|
||||
// The MiniCssExtractPlugin is used to separate it out into
|
||||
// its own CSS file.
|
||||
|
|
@ -13,6 +13,4 @@ import "../css/app.scss"
|
|||
// import {Socket} from "phoenix"
|
||||
// import socket from "./socket"
|
||||
//
|
||||
import "phoenix_html"
|
||||
|
||||
alert("boo")
|
||||
import "phoenix_html"
|
||||
2787
assets/package-lock.json
generated
2787
assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -21,7 +21,7 @@
|
|||
"css-loader": "^3.4.2",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^6.0.0",
|
||||
"fomantic-ui-less": "^2.8.6",
|
||||
"fomantic-ui": "^2.8.6",
|
||||
"image-webpack-loader": "^6.0.0",
|
||||
"less": "^3.11.3",
|
||||
"less-loader": "^6.2.0",
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
# LESS Distribution
|
||||
|
||||
This repository is a distribution of [Fomantic-UI](https://fomantic-ui.com) as LESS only to provide a lightweight themeable version of Fomantic UI.
|
||||
|
||||
You can view more on Fomantic UI at [fomantic-ui.com](https://fomantic-ui.com).
|
||||
|
||||
If you have any issues please use the main [Fomantic-UI repositroy](https://github.com/fomantic/Fomantic-UI).
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install --save fomantic-ui-less
|
||||
```
|
||||
or
|
||||
```bash
|
||||
$ git clone https://github.com/fomantic/Fomantic-UI-LESS
|
||||
```
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"name": "fomantic-ui-less",
|
||||
"version": "2.8.6",
|
||||
"title": "Fomantic UI",
|
||||
"description": "LESS only distribution of Fomantic UI",
|
||||
"homepage": "https://fomantic-ui.com",
|
||||
"author": "hammy2899",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/fomantic/Fomantic-UI-LESS.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/fomantic/Fomantic-UI/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.4.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*******************************
|
||||
User Global Variables
|
||||
*******************************/
|
||||
|
||||
@primaryColor: #002f4e;
|
||||
@pageBackground: cyan;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
/*******************************
|
||||
Overrides
|
||||
*******************************/
|
||||
22
assets/semantic.json
Normal file
22
assets/semantic.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"base": "semantic/",
|
||||
"paths": {
|
||||
"source": {
|
||||
"config": "src/theme.config",
|
||||
"definitions": "src/definitions/",
|
||||
"site": "src/site/",
|
||||
"themes": "src/themes/"
|
||||
},
|
||||
"output": {
|
||||
"packaged": "dist/",
|
||||
"uncompressed": "dist/components/",
|
||||
"compressed": "dist/components/",
|
||||
"themes": "dist/themes/"
|
||||
},
|
||||
"clean": "dist/"
|
||||
},
|
||||
"permission": false,
|
||||
"autoInstall": false,
|
||||
"rtl": false,
|
||||
"version": "2.8.6"
|
||||
}
|
||||
35
assets/semantic/gulpfile.js
Normal file
35
assets/semantic/gulpfile.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*******************************
|
||||
* Set-up
|
||||
*******************************/
|
||||
|
||||
var
|
||||
gulp = require('gulp'),
|
||||
|
||||
// read user config to know what task to load
|
||||
config = require('./tasks/config/user')
|
||||
;
|
||||
|
||||
|
||||
/*******************************
|
||||
* Tasks
|
||||
*******************************/
|
||||
|
||||
require('./tasks/collections/build')(gulp);
|
||||
require('./tasks/collections/various')(gulp);
|
||||
require('./tasks/collections/install')(gulp);
|
||||
|
||||
gulp.task('default', gulp.series('watch'));
|
||||
|
||||
/*--------------
|
||||
Docs
|
||||
---------------*/
|
||||
|
||||
require('./tasks/collections/docs')(gulp);
|
||||
|
||||
/*--------------
|
||||
RTL
|
||||
---------------*/
|
||||
|
||||
if (config.rtl) {
|
||||
require('./tasks/collections/rtl')(gulp);
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,122 +1,122 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Breadcrumb
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'collection';
|
||||
@element : 'breadcrumb';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Breadcrumb
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
line-height: @lineHeight;
|
||||
display: @display;
|
||||
margin: @verticalMargin 0;
|
||||
vertical-align: @verticalAlign;
|
||||
}
|
||||
.ui.breadcrumb:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.breadcrumb:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Divider */
|
||||
.ui.breadcrumb .divider {
|
||||
display: inline-block;
|
||||
opacity: @dividerOpacity;
|
||||
margin: 0 @dividerSpacing 0;
|
||||
|
||||
font-size: @dividerSize;
|
||||
color: @dividerColor;
|
||||
vertical-align: @dividerVerticalAlign;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.breadcrumb a {
|
||||
color: @linkColor;
|
||||
}
|
||||
.ui.breadcrumb a:hover {
|
||||
color: @linkHoverColor;
|
||||
}
|
||||
|
||||
|
||||
/* Icon Divider */
|
||||
.ui.breadcrumb .icon.divider {
|
||||
font-size: @iconDividerSize;
|
||||
vertical-align: @iconDividerVerticalAlign;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.ui.breadcrumb a.section {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.breadcrumb .section {
|
||||
display: inline-block;
|
||||
margin: @sectionMargin;
|
||||
padding: @sectionPadding;
|
||||
}
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.breadcrumb.segment {
|
||||
display: inline-block;
|
||||
padding: @segmentPadding;
|
||||
}
|
||||
|
||||
& when (@variationBreadcrumbInverted) {
|
||||
/* Inverted */
|
||||
.ui.inverted.breadcrumb {
|
||||
color: @invertedColor;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .active.section {
|
||||
color: @invertedActiveColor;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .divider {
|
||||
color: @invertedDividerColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb .active.section {
|
||||
font-weight: @activeFontWeight;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationBreadcrumbSizes = false) {
|
||||
each(@variationBreadcrumbSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.breadcrumb {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Breadcrumb
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'collection';
|
||||
@element : 'breadcrumb';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Breadcrumb
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
line-height: @lineHeight;
|
||||
display: @display;
|
||||
margin: @verticalMargin 0;
|
||||
vertical-align: @verticalAlign;
|
||||
}
|
||||
.ui.breadcrumb:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.breadcrumb:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Divider */
|
||||
.ui.breadcrumb .divider {
|
||||
display: inline-block;
|
||||
opacity: @dividerOpacity;
|
||||
margin: 0 @dividerSpacing 0;
|
||||
|
||||
font-size: @dividerSize;
|
||||
color: @dividerColor;
|
||||
vertical-align: @dividerVerticalAlign;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.breadcrumb a {
|
||||
color: @linkColor;
|
||||
}
|
||||
.ui.breadcrumb a:hover {
|
||||
color: @linkHoverColor;
|
||||
}
|
||||
|
||||
|
||||
/* Icon Divider */
|
||||
.ui.breadcrumb .icon.divider {
|
||||
font-size: @iconDividerSize;
|
||||
vertical-align: @iconDividerVerticalAlign;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.ui.breadcrumb a.section {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.breadcrumb .section {
|
||||
display: inline-block;
|
||||
margin: @sectionMargin;
|
||||
padding: @sectionPadding;
|
||||
}
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.breadcrumb.segment {
|
||||
display: inline-block;
|
||||
padding: @segmentPadding;
|
||||
}
|
||||
|
||||
& when (@variationBreadcrumbInverted) {
|
||||
/* Inverted */
|
||||
.ui.inverted.breadcrumb {
|
||||
color: @invertedColor;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .active.section {
|
||||
color: @invertedActiveColor;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .divider {
|
||||
color: @invertedDividerColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb .active.section {
|
||||
font-weight: @activeFontWeight;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationBreadcrumbSizes = false) {
|
||||
each(@variationBreadcrumbSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.breadcrumb {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,414 +1,414 @@
|
|||
/*!
|
||||
* # 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();
|
||||
/*!
|
||||
* # 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();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,160 +1,160 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Container
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'container';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Container
|
||||
*******************************/
|
||||
|
||||
/* All Sizes */
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @mobileWidth;
|
||||
margin-left: @mobileGutter;
|
||||
margin-right: @mobileGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @mobileGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @mobileRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @mobileVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @tabletWidth;
|
||||
margin-left: @tabletGutter;
|
||||
margin-right: @tabletGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @tabletGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @tabletRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @tabletVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Monitor */
|
||||
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @computerWidth;
|
||||
margin-left: @computerGutter;
|
||||
margin-right: @computerGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @computerGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @computerRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @computerVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Monitor */
|
||||
@media only screen and (min-width: @largeMonitorBreakpoint) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @largeMonitorWidth;
|
||||
margin-left: @largeMonitorGutter;
|
||||
margin-right: @largeMonitorGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @largeMonitorGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @largeMonitorRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @largeMonitorVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationContainerText) {
|
||||
/* Text Container */
|
||||
.ui.text.container {
|
||||
font-family: @textFontFamily;
|
||||
max-width: @textWidth;
|
||||
line-height: @textLineHeight;
|
||||
font-size: @textSize;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationContainerFluid) {
|
||||
/* Fluid */
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationContainerAligned) {
|
||||
.ui[class*="left aligned"].container {
|
||||
text-align: left;
|
||||
}
|
||||
.ui[class*="center aligned"].container {
|
||||
text-align: center;
|
||||
}
|
||||
.ui[class*="right aligned"].container {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
& when (@variationContainerJustified) {
|
||||
.ui.justified.container {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Container
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'container';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Container
|
||||
*******************************/
|
||||
|
||||
/* All Sizes */
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @mobileWidth;
|
||||
margin-left: @mobileGutter;
|
||||
margin-right: @mobileGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @mobileGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @mobileRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @mobileVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @tabletWidth;
|
||||
margin-left: @tabletGutter;
|
||||
margin-right: @tabletGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @tabletGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @tabletRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @tabletVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Monitor */
|
||||
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @computerWidth;
|
||||
margin-left: @computerGutter;
|
||||
margin-right: @computerGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @computerGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @computerRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @computerVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Monitor */
|
||||
@media only screen and (min-width: @largeMonitorBreakpoint) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: @largeMonitorWidth;
|
||||
margin-left: @largeMonitorGutter;
|
||||
margin-right: @largeMonitorGutter;
|
||||
}
|
||||
& when (@variationContainerGrid) or (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.grid.container {
|
||||
width: @largeMonitorGridWidth;
|
||||
}
|
||||
& when (@variationContainerRelaxed) {
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: @largeMonitorRelaxedGridWidth;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: @largeMonitorVeryRelaxedGridWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationContainerText) {
|
||||
/* Text Container */
|
||||
.ui.text.container {
|
||||
font-family: @textFontFamily;
|
||||
max-width: @textWidth;
|
||||
line-height: @textLineHeight;
|
||||
font-size: @textSize;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationContainerFluid) {
|
||||
/* Fluid */
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationContainerAligned) {
|
||||
.ui[class*="left aligned"].container {
|
||||
text-align: left;
|
||||
}
|
||||
.ui[class*="center aligned"].container {
|
||||
text-align: center;
|
||||
}
|
||||
.ui[class*="right aligned"].container {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
& when (@variationContainerJustified) {
|
||||
.ui.justified.container {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,298 +1,298 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Divider
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'divider';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Divider
|
||||
*******************************/
|
||||
|
||||
.ui.divider {
|
||||
margin: @margin;
|
||||
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
|
||||
font-weight: @fontWeight;
|
||||
text-transform: @textTransform;
|
||||
letter-spacing: @letterSpacing;
|
||||
color: @color;
|
||||
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
.ui.divider:not(.vertical):not(.horizontal) {
|
||||
border-top: @shadowWidth @borderStyle @shadowColor;
|
||||
border-bottom: @highlightWidth @borderStyle @highlightColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
/* Allow divider between each column row */
|
||||
.ui.grid > .column + .divider,
|
||||
.ui.grid > .row > .column + .divider {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
& when (@variationDividerHorizontal) {
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before,
|
||||
.ui.horizontal.divider:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.horizontal.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerVertical) {
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.divider {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before,
|
||||
.ui.vertical.divider:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
content: '';
|
||||
z-index: 3;
|
||||
|
||||
border-left: @shadowWidth @borderStyle @shadowColor;
|
||||
border-right: @highlightWidth @borderStyle @highlightColor;
|
||||
|
||||
width: 0;
|
||||
height: @verticalDividerHeight;
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before {
|
||||
top: -100%;
|
||||
}
|
||||
.ui.vertical.divider:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Inside grid */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider,
|
||||
.ui.grid .stackable.row .ui.vertical.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before,
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
left: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerIcon) {
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.divider > .icon {
|
||||
margin: @dividerIconMargin;
|
||||
font-size: @dividerIconSize;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerHorizontal) {
|
||||
/*--------------
|
||||
Header
|
||||
---------------*/
|
||||
.ui.horizontal.divider[class*="left aligned"] {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ui.horizontal.divider[class*="right aligned"] {
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationDividerHidden) {
|
||||
/*--------------
|
||||
Hidden
|
||||
---------------*/
|
||||
|
||||
.ui.hidden.divider {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ui.hidden.divider:before,
|
||||
.ui.hidden.divider:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
& when (@variationDividerInverted) {
|
||||
.ui.divider.inverted,
|
||||
.ui.vertical.inverted.divider,
|
||||
.ui.horizontal.inverted.divider {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
.ui.divider.inverted,
|
||||
.ui.divider.inverted:after,
|
||||
.ui.divider.inverted:before {
|
||||
border-top-color: @invertedShadowColor !important;
|
||||
border-left-color: @invertedShadowColor !important;
|
||||
border-bottom-color: @invertedHighlightColor !important;
|
||||
border-right-color: @invertedHighlightColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fitted
|
||||
---------------*/
|
||||
& when (@variationDividerFitted) {
|
||||
.ui.fitted.divider {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerClearing) {
|
||||
/*--------------
|
||||
Clearing
|
||||
---------------*/
|
||||
|
||||
.ui.clearing.divider {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerSection) {
|
||||
/*--------------
|
||||
Section
|
||||
---------------*/
|
||||
|
||||
.ui.section.divider {
|
||||
margin-top: @sectionMargin;
|
||||
margin-bottom: @sectionMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.divider {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationDividerSizes = false) {
|
||||
each(@variationDividerSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.divider {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Divider
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'divider';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Divider
|
||||
*******************************/
|
||||
|
||||
.ui.divider {
|
||||
margin: @margin;
|
||||
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
|
||||
font-weight: @fontWeight;
|
||||
text-transform: @textTransform;
|
||||
letter-spacing: @letterSpacing;
|
||||
color: @color;
|
||||
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
.ui.divider:not(.vertical):not(.horizontal) {
|
||||
border-top: @shadowWidth @borderStyle @shadowColor;
|
||||
border-bottom: @highlightWidth @borderStyle @highlightColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
/* Allow divider between each column row */
|
||||
.ui.grid > .column + .divider,
|
||||
.ui.grid > .row > .column + .divider {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
& when (@variationDividerHorizontal) {
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before,
|
||||
.ui.horizontal.divider:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.horizontal.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerVertical) {
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.divider {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before,
|
||||
.ui.vertical.divider:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
content: '';
|
||||
z-index: 3;
|
||||
|
||||
border-left: @shadowWidth @borderStyle @shadowColor;
|
||||
border-right: @highlightWidth @borderStyle @highlightColor;
|
||||
|
||||
width: 0;
|
||||
height: @verticalDividerHeight;
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before {
|
||||
top: -100%;
|
||||
}
|
||||
.ui.vertical.divider:after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Inside grid */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider,
|
||||
.ui.grid .stackable.row .ui.vertical.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before,
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
left: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerIcon) {
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.divider > .icon {
|
||||
margin: @dividerIconMargin;
|
||||
font-size: @dividerIconSize;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerHorizontal) {
|
||||
/*--------------
|
||||
Header
|
||||
---------------*/
|
||||
.ui.horizontal.divider[class*="left aligned"] {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ui.horizontal.divider[class*="right aligned"] {
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationDividerHidden) {
|
||||
/*--------------
|
||||
Hidden
|
||||
---------------*/
|
||||
|
||||
.ui.hidden.divider {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.ui.hidden.divider:before,
|
||||
.ui.hidden.divider:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
& when (@variationDividerInverted) {
|
||||
.ui.divider.inverted,
|
||||
.ui.vertical.inverted.divider,
|
||||
.ui.horizontal.inverted.divider {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
.ui.divider.inverted,
|
||||
.ui.divider.inverted:after,
|
||||
.ui.divider.inverted:before {
|
||||
border-top-color: @invertedShadowColor !important;
|
||||
border-left-color: @invertedShadowColor !important;
|
||||
border-bottom-color: @invertedHighlightColor !important;
|
||||
border-right-color: @invertedHighlightColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fitted
|
||||
---------------*/
|
||||
& when (@variationDividerFitted) {
|
||||
.ui.fitted.divider {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerClearing) {
|
||||
/*--------------
|
||||
Clearing
|
||||
---------------*/
|
||||
|
||||
.ui.clearing.divider {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDividerSection) {
|
||||
/*--------------
|
||||
Section
|
||||
---------------*/
|
||||
|
||||
.ui.section.divider {
|
||||
margin-top: @sectionMargin;
|
||||
margin-bottom: @sectionMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.divider {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationDividerSizes = false) {
|
||||
each(@variationDividerSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.divider {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,72 +1,72 @@
|
|||
/*!
|
||||
* # Fomantic UI - Emoji
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'emoji';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Emoji
|
||||
*******************************/
|
||||
|
||||
|
||||
em[data-emoji] {
|
||||
opacity: @opacity;
|
||||
|
||||
speak: none;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
em[data-emoji]:before {
|
||||
content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
|
||||
display: inline-block;
|
||||
line-height: @emojiLineHeight;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
& when not (@emojiFileType = 'svg') {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
em[data-emoji].disabled {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
em[data-emoji].loading:before {
|
||||
animation: loader @loadingDuration linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
em[data-emoji].link:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic UI - Emoji
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'emoji';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Emoji
|
||||
*******************************/
|
||||
|
||||
|
||||
em[data-emoji] {
|
||||
opacity: @opacity;
|
||||
|
||||
speak: none;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
em[data-emoji]:before {
|
||||
content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
|
||||
display: inline-block;
|
||||
line-height: @emojiLineHeight;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
& when not (@emojiFileType = 'svg') {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
em[data-emoji].disabled {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
em[data-emoji].loading:before {
|
||||
animation: loader @loadingDuration linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
em[data-emoji].link:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,52 +1,52 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Flag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'flag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Flag
|
||||
*******************************/
|
||||
|
||||
i.flag:not(.icon) {
|
||||
display: inline-block;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
line-height: @height;
|
||||
vertical-align: @verticalAlign;
|
||||
margin: 0 @margin 0 0;
|
||||
|
||||
text-decoration: inherit;
|
||||
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Sprite */
|
||||
i.flag:not(.icon):before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
background: url(@spritePath) no-repeat -108px -1976px;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Flag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'flag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Flag
|
||||
*******************************/
|
||||
|
||||
i.flag:not(.icon) {
|
||||
display: inline-block;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
line-height: @height;
|
||||
vertical-align: @verticalAlign;
|
||||
margin: 0 @margin 0 0;
|
||||
|
||||
text-decoration: inherit;
|
||||
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Sprite */
|
||||
i.flag:not(.icon):before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
background: url(@spritePath) no-repeat -108px -1976px;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,487 +1,487 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Header
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'header';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Header
|
||||
*******************************/
|
||||
|
||||
/* Standard */
|
||||
.ui.header {
|
||||
border: none;
|
||||
margin: @margin;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
font-family: @fontFamily;
|
||||
font-weight: @fontWeight;
|
||||
line-height: @lineHeight;
|
||||
text-transform: @textTransform;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: @firstMargin;
|
||||
}
|
||||
.ui.header:last-child {
|
||||
margin-bottom: @lastMargin;
|
||||
}
|
||||
|
||||
& when (@variationHeaderSub) {
|
||||
/*--------------
|
||||
Sub Header
|
||||
---------------*/
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: @normal;
|
||||
padding: 0;
|
||||
margin: @subHeaderMargin;
|
||||
font-size: @subHeaderFontSize;
|
||||
line-height: @subHeaderLineHeight;
|
||||
color: @subHeaderColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.header > .icon {
|
||||
display: table-cell;
|
||||
opacity: @iconOpacity;
|
||||
font-size: @iconSize;
|
||||
padding-top: @iconOffset;
|
||||
vertical-align: @iconAlignment;
|
||||
}
|
||||
|
||||
/* With Text Node */
|
||||
.ui.header .icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: @iconMargin;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Image
|
||||
--------------------*/
|
||||
|
||||
.ui.header > .image:not(.icon),
|
||||
.ui.header > img {
|
||||
display: inline-block;
|
||||
margin-top: @imageOffset;
|
||||
width: @imageWidth;
|
||||
height: @imageHeight;
|
||||
vertical-align: @imageAlignment;
|
||||
}
|
||||
.ui.header > .image:not(.icon):only-child,
|
||||
.ui.header > img:only-child {
|
||||
margin-right: @imageMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.header .content {
|
||||
display: inline-block;
|
||||
vertical-align: @contentAlignment;
|
||||
}
|
||||
|
||||
/* After Image */
|
||||
.ui.header > img + .content,
|
||||
.ui.header > .image + .content {
|
||||
padding-left: @imageMargin;
|
||||
vertical-align: @contentImageAlignment;
|
||||
}
|
||||
|
||||
/* After Icon */
|
||||
.ui.header > .icon + .content {
|
||||
padding-left: @iconMargin;
|
||||
display: table-cell;
|
||||
vertical-align: @contentIconAlignment;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Loose Coupling
|
||||
---------------*/
|
||||
|
||||
.ui.header .ui.label {
|
||||
font-size: @labelSize;
|
||||
margin-left: @labelDistance;
|
||||
vertical-align: @labelVerticalAlign;
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
.ui.header + p {
|
||||
margin-top: @nextParagraphDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
& when not (@variationHeaderTags = false) {
|
||||
each(@variationHeaderTags, {
|
||||
@sf: @{value}SubHeaderFontSize;
|
||||
@s: @@value;
|
||||
@{value}.ui.header {
|
||||
font-size: @s;
|
||||
}
|
||||
& when (@variationHeaderSub) {
|
||||
@{value}.ui.header .sub.header {
|
||||
font-size: @@sf;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content Heading
|
||||
---------------*/
|
||||
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@sf: @{value}SubHeaderFontSize;
|
||||
@shf: @{value}SubHeadingSize;
|
||||
@s: @{value}FontSize;;
|
||||
.ui.@{value}.header {
|
||||
font-size: @@s;
|
||||
& when (@@s >= 2) {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderSub) {
|
||||
.ui.@{value}.header .sub.header {
|
||||
font-size: @@sf;
|
||||
}
|
||||
.ui.@{value}.sub.header {
|
||||
font-size: @@shf;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationHeaderSub) {
|
||||
/*--------------
|
||||
Sub Heading
|
||||
---------------*/
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: @subHeadingDistance;
|
||||
font-weight: @subHeadingFontWeight;
|
||||
font-size: @subHeadingFontSize;
|
||||
text-transform: @subHeadingTextTransform;
|
||||
color: @subHeadingColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderIcon) {
|
||||
/*-------------------
|
||||
Icon
|
||||
--------------------*/
|
||||
|
||||
.ui.icon.header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
|
||||
}
|
||||
.ui.icon.header:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.icon.header:first-child {
|
||||
margin-top: @iconHeaderFirstMargin;
|
||||
}
|
||||
.ui.icon.header .icon {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
font-size: @iconHeaderSize;
|
||||
margin: 0 auto @iconHeaderMargin;
|
||||
opacity: @iconHeaderOpacity;
|
||||
}
|
||||
.ui.icon.header .corner.icon {
|
||||
font-size: @cornerIconHeaderSize;
|
||||
}
|
||||
.ui.icon.header .content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.icon.header .circular.icon {
|
||||
font-size: @circularHeaderIconSize;
|
||||
}
|
||||
.ui.icon.header .square.icon {
|
||||
font-size: @squareHeaderIconSize;
|
||||
}
|
||||
& when (@variationHeaderBlock) {
|
||||
.ui.block.icon.header .icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ui.icon.header.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
& when (@variationHeaderDisabled) {
|
||||
.ui.disabled.header {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationHeaderInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.header {
|
||||
color: @invertedColor;
|
||||
}
|
||||
.ui.inverted.header .sub.header {
|
||||
color: @invertedSubHeaderColor;
|
||||
}
|
||||
& when (@variationHeaderAttached) {
|
||||
.ui.inverted.attached.header {
|
||||
background: @invertedAttachedBackground;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderBlock) {
|
||||
.ui.inverted.block.header {
|
||||
background: @invertedBlockBackground;
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
.ui.@{color}.header {
|
||||
color: @c;
|
||||
}
|
||||
a.ui.@{color}.header:hover {
|
||||
color: @h;
|
||||
}
|
||||
& when (@variationHeaderDividing) {
|
||||
.ui.@{color}.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @c;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderInverted) {
|
||||
.ui.inverted.@{color}.header.header.header {
|
||||
color: @l;
|
||||
}
|
||||
a.ui.inverted.@{color}.header.header.header:hover {
|
||||
color: @lh;
|
||||
}
|
||||
.ui.inverted.@{color}.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationHeaderAligned) {
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.left.aligned.header {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.right.aligned.header {
|
||||
text-align: right;
|
||||
}
|
||||
.ui.centered.header,
|
||||
.ui.center.aligned.header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderJustified) {
|
||||
.ui.justified.header {
|
||||
text-align: justify;
|
||||
}
|
||||
.ui.justified.header:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderFloated) {
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.header,
|
||||
.ui[class*="left floated"].header {
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
margin-right: @floatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].header {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: @floatedMargin;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderFitted) {
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
.ui.fitted.header {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderDividing) {
|
||||
/*-------------------
|
||||
Dividing
|
||||
--------------------*/
|
||||
|
||||
.ui.dividing.header {
|
||||
padding-bottom: @dividedBorderPadding;
|
||||
border-bottom: @dividedBorder;
|
||||
}
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: @dividedSubHeaderPadding;
|
||||
}
|
||||
.ui.dividing.header .icon {
|
||||
margin-bottom: @dividedIconPadding;
|
||||
}
|
||||
& when (@variationHeaderInverted) {
|
||||
.ui.inverted.dividing.header {
|
||||
border-bottom-color: @invertedDividedBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderBlock) {
|
||||
/*-------------------
|
||||
Block
|
||||
--------------------*/
|
||||
|
||||
.ui.block.header {
|
||||
background: @blockBackground;
|
||||
padding: @blockVerticalPadding @blockHorizontalPadding;
|
||||
box-shadow: @blockBoxShadow;
|
||||
border: @blockBorder;
|
||||
border-radius: @blockBorderRadius;
|
||||
}
|
||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumBlock;
|
||||
}
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@s: @{value}Block;
|
||||
.ui.@{value}.block.header {
|
||||
font-size: @@s;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderAttached) {
|
||||
/*-------------------
|
||||
Attached
|
||||
--------------------*/
|
||||
|
||||
.ui.attached.header {
|
||||
background: @attachedBackground;
|
||||
padding: @attachedVerticalPadding @attachedHorizontalPadding;
|
||||
margin: 0 @attachedOffset 0 @attachedOffset;
|
||||
box-shadow: @attachedBoxShadow;
|
||||
border: @attachedBorder;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.attached.block.header {
|
||||
background: @blockBackground;
|
||||
}
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.top.attached.header {
|
||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
|
||||
}
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
|
||||
}
|
||||
|
||||
/* Attached Sizes */
|
||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumAttachedSize;
|
||||
}
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@s: @{value}AttachedSize;
|
||||
.ui.@{value}.attached.header {
|
||||
font-size: @@s;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizing
|
||||
--------------------*/
|
||||
|
||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Header
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'header';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Header
|
||||
*******************************/
|
||||
|
||||
/* Standard */
|
||||
.ui.header {
|
||||
border: none;
|
||||
margin: @margin;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
font-family: @fontFamily;
|
||||
font-weight: @fontWeight;
|
||||
line-height: @lineHeight;
|
||||
text-transform: @textTransform;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: @firstMargin;
|
||||
}
|
||||
.ui.header:last-child {
|
||||
margin-bottom: @lastMargin;
|
||||
}
|
||||
|
||||
& when (@variationHeaderSub) {
|
||||
/*--------------
|
||||
Sub Header
|
||||
---------------*/
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: @normal;
|
||||
padding: 0;
|
||||
margin: @subHeaderMargin;
|
||||
font-size: @subHeaderFontSize;
|
||||
line-height: @subHeaderLineHeight;
|
||||
color: @subHeaderColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.header > .icon {
|
||||
display: table-cell;
|
||||
opacity: @iconOpacity;
|
||||
font-size: @iconSize;
|
||||
padding-top: @iconOffset;
|
||||
vertical-align: @iconAlignment;
|
||||
}
|
||||
|
||||
/* With Text Node */
|
||||
.ui.header .icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: @iconMargin;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Image
|
||||
--------------------*/
|
||||
|
||||
.ui.header > .image:not(.icon),
|
||||
.ui.header > img {
|
||||
display: inline-block;
|
||||
margin-top: @imageOffset;
|
||||
width: @imageWidth;
|
||||
height: @imageHeight;
|
||||
vertical-align: @imageAlignment;
|
||||
}
|
||||
.ui.header > .image:not(.icon):only-child,
|
||||
.ui.header > img:only-child {
|
||||
margin-right: @imageMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.header .content {
|
||||
display: inline-block;
|
||||
vertical-align: @contentAlignment;
|
||||
}
|
||||
|
||||
/* After Image */
|
||||
.ui.header > img + .content,
|
||||
.ui.header > .image + .content {
|
||||
padding-left: @imageMargin;
|
||||
vertical-align: @contentImageAlignment;
|
||||
}
|
||||
|
||||
/* After Icon */
|
||||
.ui.header > .icon + .content {
|
||||
padding-left: @iconMargin;
|
||||
display: table-cell;
|
||||
vertical-align: @contentIconAlignment;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Loose Coupling
|
||||
---------------*/
|
||||
|
||||
.ui.header .ui.label {
|
||||
font-size: @labelSize;
|
||||
margin-left: @labelDistance;
|
||||
vertical-align: @labelVerticalAlign;
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
.ui.header + p {
|
||||
margin-top: @nextParagraphDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
& when not (@variationHeaderTags = false) {
|
||||
each(@variationHeaderTags, {
|
||||
@sf: @{value}SubHeaderFontSize;
|
||||
@s: @@value;
|
||||
@{value}.ui.header {
|
||||
font-size: @s;
|
||||
}
|
||||
& when (@variationHeaderSub) {
|
||||
@{value}.ui.header .sub.header {
|
||||
font-size: @@sf;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content Heading
|
||||
---------------*/
|
||||
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@sf: @{value}SubHeaderFontSize;
|
||||
@shf: @{value}SubHeadingSize;
|
||||
@s: @{value}FontSize;;
|
||||
.ui.@{value}.header {
|
||||
font-size: @@s;
|
||||
& when (@@s >= 2) {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderSub) {
|
||||
.ui.@{value}.header .sub.header {
|
||||
font-size: @@sf;
|
||||
}
|
||||
.ui.@{value}.sub.header {
|
||||
font-size: @@shf;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationHeaderSub) {
|
||||
/*--------------
|
||||
Sub Heading
|
||||
---------------*/
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: @subHeadingDistance;
|
||||
font-weight: @subHeadingFontWeight;
|
||||
font-size: @subHeadingFontSize;
|
||||
text-transform: @subHeadingTextTransform;
|
||||
color: @subHeadingColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderIcon) {
|
||||
/*-------------------
|
||||
Icon
|
||||
--------------------*/
|
||||
|
||||
.ui.icon.header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
|
||||
}
|
||||
.ui.icon.header:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.icon.header:first-child {
|
||||
margin-top: @iconHeaderFirstMargin;
|
||||
}
|
||||
.ui.icon.header .icon {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
font-size: @iconHeaderSize;
|
||||
margin: 0 auto @iconHeaderMargin;
|
||||
opacity: @iconHeaderOpacity;
|
||||
}
|
||||
.ui.icon.header .corner.icon {
|
||||
font-size: @cornerIconHeaderSize;
|
||||
}
|
||||
.ui.icon.header .content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.icon.header .circular.icon {
|
||||
font-size: @circularHeaderIconSize;
|
||||
}
|
||||
.ui.icon.header .square.icon {
|
||||
font-size: @squareHeaderIconSize;
|
||||
}
|
||||
& when (@variationHeaderBlock) {
|
||||
.ui.block.icon.header .icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ui.icon.header.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
& when (@variationHeaderDisabled) {
|
||||
.ui.disabled.header {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationHeaderInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.header {
|
||||
color: @invertedColor;
|
||||
}
|
||||
.ui.inverted.header .sub.header {
|
||||
color: @invertedSubHeaderColor;
|
||||
}
|
||||
& when (@variationHeaderAttached) {
|
||||
.ui.inverted.attached.header {
|
||||
background: @invertedAttachedBackground;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderBlock) {
|
||||
.ui.inverted.block.header {
|
||||
background: @invertedBlockBackground;
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
.ui.@{color}.header {
|
||||
color: @c;
|
||||
}
|
||||
a.ui.@{color}.header:hover {
|
||||
color: @h;
|
||||
}
|
||||
& when (@variationHeaderDividing) {
|
||||
.ui.@{color}.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @c;
|
||||
}
|
||||
}
|
||||
& when (@variationHeaderInverted) {
|
||||
.ui.inverted.@{color}.header.header.header {
|
||||
color: @l;
|
||||
}
|
||||
a.ui.inverted.@{color}.header.header.header:hover {
|
||||
color: @lh;
|
||||
}
|
||||
.ui.inverted.@{color}.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationHeaderAligned) {
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.left.aligned.header {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.right.aligned.header {
|
||||
text-align: right;
|
||||
}
|
||||
.ui.centered.header,
|
||||
.ui.center.aligned.header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderJustified) {
|
||||
.ui.justified.header {
|
||||
text-align: justify;
|
||||
}
|
||||
.ui.justified.header:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderFloated) {
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.header,
|
||||
.ui[class*="left floated"].header {
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
margin-right: @floatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].header {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: @floatedMargin;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderFitted) {
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
.ui.fitted.header {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderDividing) {
|
||||
/*-------------------
|
||||
Dividing
|
||||
--------------------*/
|
||||
|
||||
.ui.dividing.header {
|
||||
padding-bottom: @dividedBorderPadding;
|
||||
border-bottom: @dividedBorder;
|
||||
}
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: @dividedSubHeaderPadding;
|
||||
}
|
||||
.ui.dividing.header .icon {
|
||||
margin-bottom: @dividedIconPadding;
|
||||
}
|
||||
& when (@variationHeaderInverted) {
|
||||
.ui.inverted.dividing.header {
|
||||
border-bottom-color: @invertedDividedBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderBlock) {
|
||||
/*-------------------
|
||||
Block
|
||||
--------------------*/
|
||||
|
||||
.ui.block.header {
|
||||
background: @blockBackground;
|
||||
padding: @blockVerticalPadding @blockHorizontalPadding;
|
||||
box-shadow: @blockBoxShadow;
|
||||
border: @blockBorder;
|
||||
border-radius: @blockBorderRadius;
|
||||
}
|
||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumBlock;
|
||||
}
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@s: @{value}Block;
|
||||
.ui.@{value}.block.header {
|
||||
font-size: @@s;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationHeaderAttached) {
|
||||
/*-------------------
|
||||
Attached
|
||||
--------------------*/
|
||||
|
||||
.ui.attached.header {
|
||||
background: @attachedBackground;
|
||||
padding: @attachedVerticalPadding @attachedHorizontalPadding;
|
||||
margin: 0 @attachedOffset 0 @attachedOffset;
|
||||
box-shadow: @attachedBoxShadow;
|
||||
border: @attachedBorder;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.attached.block.header {
|
||||
background: @blockBackground;
|
||||
}
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.top.attached.header {
|
||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
|
||||
}
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
|
||||
}
|
||||
|
||||
/* Attached Sizes */
|
||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumAttachedSize;
|
||||
}
|
||||
& when not (@variationHeaderSizes = false) {
|
||||
each(@variationHeaderSizes, {
|
||||
@s: @{value}AttachedSize;
|
||||
.ui.@{value}.attached.header {
|
||||
font-size: @@s;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizing
|
||||
--------------------*/
|
||||
|
||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,374 +1,374 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Icon
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'icon';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Icon
|
||||
*******************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
src: @fallbackSRC;
|
||||
src: @src;
|
||||
font-style: normal;
|
||||
font-weight: @normal;
|
||||
font-variant: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
display: inline-block;
|
||||
opacity: @opacity;
|
||||
|
||||
margin: 0 @distanceFromText 0 0;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: @normal;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
|
||||
speak: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
i.icon:before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationIconLoading) {
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
i.icon.loading {
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
animation: loader @loadingDuration linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
i.icon:hover, i.icons:hover,
|
||||
i.icon:active, i.icons:active,
|
||||
i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& when (@variationIconDisabled) {
|
||||
i.disabled.icon, i.disabled.icons {
|
||||
opacity: @disabledOpacity;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationIconFitted) {
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
i.fitted.icon {
|
||||
width: auto;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconLink) {
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
|
||||
cursor: pointer;
|
||||
opacity: @linkOpacity;
|
||||
transition: opacity @defaultDuration @defaultEasing;
|
||||
}
|
||||
i.link.icon:hover, i.link.icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconCircular) {
|
||||
/*-------------------
|
||||
Circular
|
||||
--------------------*/
|
||||
|
||||
i.circular.icon {
|
||||
border-radius: 500em !important;
|
||||
line-height: 1 !important;
|
||||
|
||||
padding: @circularPadding !important;
|
||||
box-shadow: @circularShadow;
|
||||
|
||||
width: @circularSize !important;
|
||||
height: @circularSize !important;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.circular.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconFlipped) {
|
||||
/*-------------------
|
||||
Flipped
|
||||
--------------------*/
|
||||
|
||||
i.flipped.icon,
|
||||
i.horizontally.flipped.icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
i.vertically.flipped.icon {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconRotated) {
|
||||
/*-------------------
|
||||
Rotated
|
||||
--------------------*/
|
||||
|
||||
i.rotated.icon,
|
||||
i.right.rotated.icon,
|
||||
i.clockwise.rotated.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.icon,
|
||||
i.counterclockwise.rotated.icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconFlipped) and (@variationIconRotated) {
|
||||
/*--------------------------
|
||||
Flipped & Rotated
|
||||
---------------------------*/
|
||||
|
||||
i.rotated.flipped.icon,
|
||||
i.right.rotated.flipped.icon,
|
||||
i.clockwise.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.flipped.icon,
|
||||
i.counterclockwise.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(180deg);
|
||||
}
|
||||
|
||||
i.rotated.vertically.flipped.icon,
|
||||
i.right.rotated.vertically.flipped.icon,
|
||||
i.clockwise.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.vertically.flipped.icon,
|
||||
i.counterclockwise.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconBordered) {
|
||||
/*-------------------
|
||||
Bordered
|
||||
--------------------*/
|
||||
|
||||
i.bordered.icon {
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
|
||||
width: @borderedSize;
|
||||
height: @borderedSize;
|
||||
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
|
||||
box-shadow: @borderedShadow;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.bordered.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
/* Inverted Shapes */
|
||||
i.inverted.bordered.icon,
|
||||
i.inverted.circular.icon {
|
||||
background-color: @black;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
i.inverted.icon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
i.@{color}.icon.icon.icon.icon {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.inverted.@{color}.icon.icon.icon.icon {
|
||||
color: @l;
|
||||
}
|
||||
i.inverted.bordered.@{color}.icon.icon.icon.icon,
|
||||
i.inverted.circular.@{color}.icon.icon.icon.icon {
|
||||
background-color: @c;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
i.icon,
|
||||
i.icons {
|
||||
font-size: @medium;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
& when not (@variationIconSizes = false) {
|
||||
each(@variationIconSizes, {
|
||||
@s: @@value;
|
||||
i.@{value}.@{value}.@{value}.icon,
|
||||
i.@{value}.@{value}.@{value}.icons {
|
||||
font-size: @s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationIconGroups) or (@variationIconCorner) {
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
i.icons {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
i.icons .icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icons .icon:first-child {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
& when (@variationIconCorner) {
|
||||
/* Corner Icon */
|
||||
i.icons .corner.icon {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: none;
|
||||
font-size: @cornerIconSize;
|
||||
text-shadow: @cornerIconShadow;
|
||||
}
|
||||
i.icons .icon.corner[class*="top right"] {
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
i.icons .icon.corner[class*="top left"] {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
i.icons .icon.corner[class*="bottom left"] {
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
i.icons .icon.corner[class*="bottom right"] {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.icons .inverted.corner.icon {
|
||||
text-shadow: @cornerIconInvertedShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Icon
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'icon';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Icon
|
||||
*******************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
src: @fallbackSRC;
|
||||
src: @src;
|
||||
font-style: normal;
|
||||
font-weight: @normal;
|
||||
font-variant: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
display: inline-block;
|
||||
opacity: @opacity;
|
||||
|
||||
margin: 0 @distanceFromText 0 0;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: @normal;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
|
||||
speak: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
i.icon:before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationIconLoading) {
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
i.icon.loading {
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
animation: loader @loadingDuration linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
i.icon:hover, i.icons:hover,
|
||||
i.icon:active, i.icons:active,
|
||||
i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& when (@variationIconDisabled) {
|
||||
i.disabled.icon, i.disabled.icons {
|
||||
opacity: @disabledOpacity;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationIconFitted) {
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
i.fitted.icon {
|
||||
width: auto;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconLink) {
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
|
||||
cursor: pointer;
|
||||
opacity: @linkOpacity;
|
||||
transition: opacity @defaultDuration @defaultEasing;
|
||||
}
|
||||
i.link.icon:hover, i.link.icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconCircular) {
|
||||
/*-------------------
|
||||
Circular
|
||||
--------------------*/
|
||||
|
||||
i.circular.icon {
|
||||
border-radius: 500em !important;
|
||||
line-height: 1 !important;
|
||||
|
||||
padding: @circularPadding !important;
|
||||
box-shadow: @circularShadow;
|
||||
|
||||
width: @circularSize !important;
|
||||
height: @circularSize !important;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.circular.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconFlipped) {
|
||||
/*-------------------
|
||||
Flipped
|
||||
--------------------*/
|
||||
|
||||
i.flipped.icon,
|
||||
i.horizontally.flipped.icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
i.vertically.flipped.icon {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconRotated) {
|
||||
/*-------------------
|
||||
Rotated
|
||||
--------------------*/
|
||||
|
||||
i.rotated.icon,
|
||||
i.right.rotated.icon,
|
||||
i.clockwise.rotated.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.icon,
|
||||
i.counterclockwise.rotated.icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconFlipped) and (@variationIconRotated) {
|
||||
/*--------------------------
|
||||
Flipped & Rotated
|
||||
---------------------------*/
|
||||
|
||||
i.rotated.flipped.icon,
|
||||
i.right.rotated.flipped.icon,
|
||||
i.clockwise.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.flipped.icon,
|
||||
i.counterclockwise.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.flipped.icon {
|
||||
transform: scale(-1, 1) rotate(180deg);
|
||||
}
|
||||
|
||||
i.rotated.vertically.flipped.icon,
|
||||
i.right.rotated.vertically.flipped.icon,
|
||||
i.clockwise.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.vertically.flipped.icon,
|
||||
i.counterclockwise.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(-90deg);
|
||||
}
|
||||
|
||||
i.halfway.rotated.vertically.flipped.icon {
|
||||
transform: scale(1, -1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconBordered) {
|
||||
/*-------------------
|
||||
Bordered
|
||||
--------------------*/
|
||||
|
||||
i.bordered.icon {
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
|
||||
width: @borderedSize;
|
||||
height: @borderedSize;
|
||||
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
|
||||
box-shadow: @borderedShadow;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.bordered.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationIconInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
/* Inverted Shapes */
|
||||
i.inverted.bordered.icon,
|
||||
i.inverted.circular.icon {
|
||||
background-color: @black;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
i.inverted.icon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
i.@{color}.icon.icon.icon.icon {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.inverted.@{color}.icon.icon.icon.icon {
|
||||
color: @l;
|
||||
}
|
||||
i.inverted.bordered.@{color}.icon.icon.icon.icon,
|
||||
i.inverted.circular.@{color}.icon.icon.icon.icon {
|
||||
background-color: @c;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
i.icon,
|
||||
i.icons {
|
||||
font-size: @medium;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
& when not (@variationIconSizes = false) {
|
||||
each(@variationIconSizes, {
|
||||
@s: @@value;
|
||||
i.@{value}.@{value}.@{value}.icon,
|
||||
i.@{value}.@{value}.@{value}.icons {
|
||||
font-size: @s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationIconGroups) or (@variationIconCorner) {
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
i.icons {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
i.icons .icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icons .icon:first-child {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
& when (@variationIconCorner) {
|
||||
/* Corner Icon */
|
||||
i.icons .corner.icon {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: none;
|
||||
font-size: @cornerIconSize;
|
||||
text-shadow: @cornerIconShadow;
|
||||
}
|
||||
i.icons .icon.corner[class*="top right"] {
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
i.icons .icon.corner[class*="top left"] {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
i.icons .icon.corner[class*="bottom left"] {
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
i.icons .icon.corner[class*="bottom right"] {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
& when (@variationIconInverted) {
|
||||
i.icons .inverted.corner.icon {
|
||||
text-shadow: @cornerIconInvertedShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,305 +1,305 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Image
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'image';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Image
|
||||
*******************************/
|
||||
|
||||
.ui.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
background-color: @placeholderColor;
|
||||
}
|
||||
|
||||
img.ui.image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.image svg,
|
||||
.ui.image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.hidden.images,
|
||||
.ui.ui.hidden.image {
|
||||
display: none;
|
||||
}
|
||||
.ui.hidden.transition.images,
|
||||
.ui.hidden.transition.image {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.images > .hidden.transition {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
& when (@variationImageDisabled) {
|
||||
.ui.disabled.images,
|
||||
.ui.disabled.image {
|
||||
cursor: default;
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationImageInline) {
|
||||
/*--------------
|
||||
Inline
|
||||
---------------*/
|
||||
|
||||
.ui.inline.image,
|
||||
.ui.inline.image svg,
|
||||
.ui.inline.image img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageAligned) {
|
||||
/*------------------
|
||||
Vertical Aligned
|
||||
-------------------*/
|
||||
|
||||
.ui.top.aligned.images .image,
|
||||
.ui.top.aligned.image,
|
||||
.ui.top.aligned.image svg,
|
||||
.ui.top.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.middle.aligned.images .image,
|
||||
.ui.middle.aligned.image,
|
||||
.ui.middle.aligned.image svg,
|
||||
.ui.middle.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.bottom.aligned.images .image,
|
||||
.ui.bottom.aligned.image,
|
||||
.ui.bottom.aligned.image svg,
|
||||
.ui.bottom.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageRounded) {
|
||||
/*--------------
|
||||
Rounded
|
||||
---------------*/
|
||||
|
||||
.ui.rounded.images .image,
|
||||
.ui.rounded.image,
|
||||
.ui.rounded.images .image > *,
|
||||
.ui.rounded.image > * {
|
||||
border-radius: @roundedBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageBordered) {
|
||||
/*--------------
|
||||
Bordered
|
||||
---------------*/
|
||||
|
||||
.ui.bordered.images .image,
|
||||
.ui.bordered.images img,
|
||||
.ui.bordered.images svg,
|
||||
.ui.bordered.image img,
|
||||
.ui.bordered.image svg,
|
||||
img.ui.bordered.image {
|
||||
border: @imageBorder;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageCircular) {
|
||||
/*--------------
|
||||
Circular
|
||||
---------------*/
|
||||
|
||||
.ui.circular.images,
|
||||
.ui.circular.image {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ui.circular.images .image,
|
||||
.ui.circular.image,
|
||||
.ui.circular.images .image > *,
|
||||
.ui.circular.image > * {
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageFluid) {
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.images,
|
||||
.ui.fluid.image,
|
||||
.ui.fluid.images img,
|
||||
.ui.fluid.images svg,
|
||||
.ui.fluid.image svg,
|
||||
.ui.fluid.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageAvatar) {
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.avatar.images .image,
|
||||
.ui.avatar.images img,
|
||||
.ui.avatar.images svg,
|
||||
.ui.avatar.image img,
|
||||
.ui.avatar.image svg,
|
||||
.ui.avatar.image {
|
||||
margin-right: @avatarMargin;
|
||||
|
||||
display: inline-block;
|
||||
width: @avatarSize;
|
||||
height: @avatarSize;
|
||||
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageSpaced) {
|
||||
/*-------------------
|
||||
Spaced
|
||||
--------------------*/
|
||||
|
||||
.ui.spaced.image {
|
||||
display: inline-block !important;
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
|
||||
.ui[class*="left spaced"].image {
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui[class*="right spaced"].image {
|
||||
margin-left: 0;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageFloated) {
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.image,
|
||||
.ui.floated.images {
|
||||
float: left;
|
||||
margin-right: @floatedHorizontalMargin;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
}
|
||||
.ui.right.floated.images,
|
||||
.ui.right.floated.image {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
margin-left: @floatedHorizontalMargin;
|
||||
}
|
||||
|
||||
.ui.floated.images:last-child,
|
||||
.ui.floated.image:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageCentered) {
|
||||
.ui.centered.images,
|
||||
.ui.centered.image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.medium.images .image,
|
||||
.ui.medium.images img,
|
||||
.ui.medium.images svg,
|
||||
.ui.medium.image {
|
||||
width: @mediumWidth;
|
||||
height: auto;
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationImageSizes = false) {
|
||||
each(@variationImageSizes, {
|
||||
@w: @{value}Width;
|
||||
@s: @@value;
|
||||
.ui.@{value}.images .image,
|
||||
.ui.@{value}.images img,
|
||||
.ui.@{value}.images svg,
|
||||
.ui.@{value}.image {
|
||||
width: @@w;
|
||||
height: auto;
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationImageGroups) {
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.images {
|
||||
font-size: 0;
|
||||
margin: 0 -@imageHorizontalMargin 0;
|
||||
}
|
||||
|
||||
.ui.images .image,
|
||||
.ui.images > img,
|
||||
.ui.images > svg {
|
||||
display: inline-block;
|
||||
margin: 0 @imageHorizontalMargin @imageVerticalMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Image
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'image';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Image
|
||||
*******************************/
|
||||
|
||||
.ui.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
background-color: @placeholderColor;
|
||||
}
|
||||
|
||||
img.ui.image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.image svg,
|
||||
.ui.image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.hidden.images,
|
||||
.ui.ui.hidden.image {
|
||||
display: none;
|
||||
}
|
||||
.ui.hidden.transition.images,
|
||||
.ui.hidden.transition.image {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.images > .hidden.transition {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
& when (@variationImageDisabled) {
|
||||
.ui.disabled.images,
|
||||
.ui.disabled.image {
|
||||
cursor: default;
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationImageInline) {
|
||||
/*--------------
|
||||
Inline
|
||||
---------------*/
|
||||
|
||||
.ui.inline.image,
|
||||
.ui.inline.image svg,
|
||||
.ui.inline.image img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageAligned) {
|
||||
/*------------------
|
||||
Vertical Aligned
|
||||
-------------------*/
|
||||
|
||||
.ui.top.aligned.images .image,
|
||||
.ui.top.aligned.image,
|
||||
.ui.top.aligned.image svg,
|
||||
.ui.top.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.middle.aligned.images .image,
|
||||
.ui.middle.aligned.image,
|
||||
.ui.middle.aligned.image svg,
|
||||
.ui.middle.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.bottom.aligned.images .image,
|
||||
.ui.bottom.aligned.image,
|
||||
.ui.bottom.aligned.image svg,
|
||||
.ui.bottom.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageRounded) {
|
||||
/*--------------
|
||||
Rounded
|
||||
---------------*/
|
||||
|
||||
.ui.rounded.images .image,
|
||||
.ui.rounded.image,
|
||||
.ui.rounded.images .image > *,
|
||||
.ui.rounded.image > * {
|
||||
border-radius: @roundedBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageBordered) {
|
||||
/*--------------
|
||||
Bordered
|
||||
---------------*/
|
||||
|
||||
.ui.bordered.images .image,
|
||||
.ui.bordered.images img,
|
||||
.ui.bordered.images svg,
|
||||
.ui.bordered.image img,
|
||||
.ui.bordered.image svg,
|
||||
img.ui.bordered.image {
|
||||
border: @imageBorder;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageCircular) {
|
||||
/*--------------
|
||||
Circular
|
||||
---------------*/
|
||||
|
||||
.ui.circular.images,
|
||||
.ui.circular.image {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ui.circular.images .image,
|
||||
.ui.circular.image,
|
||||
.ui.circular.images .image > *,
|
||||
.ui.circular.image > * {
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageFluid) {
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.images,
|
||||
.ui.fluid.image,
|
||||
.ui.fluid.images img,
|
||||
.ui.fluid.images svg,
|
||||
.ui.fluid.image svg,
|
||||
.ui.fluid.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageAvatar) {
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.avatar.images .image,
|
||||
.ui.avatar.images img,
|
||||
.ui.avatar.images svg,
|
||||
.ui.avatar.image img,
|
||||
.ui.avatar.image svg,
|
||||
.ui.avatar.image {
|
||||
margin-right: @avatarMargin;
|
||||
|
||||
display: inline-block;
|
||||
width: @avatarSize;
|
||||
height: @avatarSize;
|
||||
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageSpaced) {
|
||||
/*-------------------
|
||||
Spaced
|
||||
--------------------*/
|
||||
|
||||
.ui.spaced.image {
|
||||
display: inline-block !important;
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
|
||||
.ui[class*="left spaced"].image {
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui[class*="right spaced"].image {
|
||||
margin-left: 0;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageFloated) {
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.image,
|
||||
.ui.floated.images {
|
||||
float: left;
|
||||
margin-right: @floatedHorizontalMargin;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
}
|
||||
.ui.right.floated.images,
|
||||
.ui.right.floated.image {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
margin-left: @floatedHorizontalMargin;
|
||||
}
|
||||
|
||||
.ui.floated.images:last-child,
|
||||
.ui.floated.image:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationImageCentered) {
|
||||
.ui.centered.images,
|
||||
.ui.centered.image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.medium.images .image,
|
||||
.ui.medium.images img,
|
||||
.ui.medium.images svg,
|
||||
.ui.medium.image {
|
||||
width: @mediumWidth;
|
||||
height: auto;
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationImageSizes = false) {
|
||||
each(@variationImageSizes, {
|
||||
@w: @{value}Width;
|
||||
@s: @@value;
|
||||
.ui.@{value}.images .image,
|
||||
.ui.@{value}.images img,
|
||||
.ui.@{value}.images svg,
|
||||
.ui.@{value}.image {
|
||||
width: @@w;
|
||||
height: auto;
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationImageGroups) {
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.images {
|
||||
font-size: 0;
|
||||
margin: 0 -@imageHorizontalMargin 0;
|
||||
}
|
||||
|
||||
.ui.images .image,
|
||||
.ui.images > img,
|
||||
.ui.images > svg {
|
||||
display: inline-block;
|
||||
margin: 0 @imageHorizontalMargin @imageVerticalMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,416 +1,416 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Loader
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'loader';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Loader
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Standard Size */
|
||||
.ui.loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: @loaderTopOffset;
|
||||
left: @loaderLeftOffset;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
.ui.loader:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
.ui.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
animation: loader @loaderSpeed infinite linear;
|
||||
border: @loaderLineWidth solid @shapeBorderColor;
|
||||
border-radius: @circularRadius;
|
||||
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
& when (@variationLoaderSpeeds) {
|
||||
/* Speeds */
|
||||
|
||||
.ui.fast.loading.loading:after,
|
||||
.ui.fast.loading.loading .input > i.icon:after,
|
||||
.ui.fast.loading.loading > i.icon:after,
|
||||
.ui.fast.loader:after {
|
||||
animation-duration: @loaderSpeedFast;
|
||||
}
|
||||
|
||||
.ui.slow.loading.loading:after,
|
||||
.ui.slow.loading.loading .input > i.icon:after,
|
||||
.ui.slow.loading.loading > i.icon:after,
|
||||
.ui.slow.loader:after {
|
||||
animation-duration: @loaderSpeedSlow;
|
||||
}
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
@keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Coupling
|
||||
--------------------*/
|
||||
|
||||
/* Show inside active dimmer */
|
||||
.ui.dimmer > .loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Black Dimmer */
|
||||
.ui.dimmer > .ui.loader {
|
||||
color: @invertedLoaderTextColor;
|
||||
}
|
||||
.ui.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: @invertedLoaderFillColor;
|
||||
}
|
||||
|
||||
/* White Dimmer (Inverted) */
|
||||
.ui.inverted.dimmer > .ui.loader {
|
||||
color: @loaderTextColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: @loaderFillColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationLoaderText) {
|
||||
/*-------------------
|
||||
Text
|
||||
--------------------*/
|
||||
|
||||
.ui.ui.ui.ui.text.loader {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
& when (@variationLoaderIndeterminate) {
|
||||
.ui.indeterminate.loader:after {
|
||||
animation-direction: @indeterminateDirection;
|
||||
animation-duration: @indeterminateSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.loader.active,
|
||||
.ui.loader.visible {
|
||||
display: block;
|
||||
}
|
||||
.ui.loader.disabled,
|
||||
.ui.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.loader {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
.ui.loader:before,
|
||||
.ui.loader:after {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
margin: @mediumOffset;
|
||||
}
|
||||
& when (@variationLoaderText) {
|
||||
.ui.text.loader {
|
||||
min-width: @medium;
|
||||
padding-top: (@medium + @textDistance);
|
||||
}
|
||||
}
|
||||
& when not (@variationLoaderSizes = false) {
|
||||
each(@variationLoaderSizes, {
|
||||
@o: @{value}Offset;
|
||||
@f: @{value}FontSize;
|
||||
@s: @@value;
|
||||
.ui.@{value}.loader {
|
||||
width: @s;
|
||||
height: @s;
|
||||
font-size: @@f;
|
||||
}
|
||||
.ui.@{value}.loader:before,
|
||||
.ui.@{value}.loader:after {
|
||||
width: @s;
|
||||
height: @s;
|
||||
margin: @@o;
|
||||
}
|
||||
& when (@variationLoaderText) {
|
||||
.ui.@{value}.text.loader {
|
||||
min-width: @s;
|
||||
padding-top: (@s + @textDistance);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
.ui.@{color}.elastic.loader.loader:before,
|
||||
.ui.@{color}.basic.elastic.loading.button:before,
|
||||
.ui.@{color}.basic.elastic.loading.button:after,
|
||||
.ui.@{color}.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.@{color}.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.@{color}.loader.loader.loader:after {
|
||||
color: @c;
|
||||
}
|
||||
.ui.inverted.@{color}.elastic.loader:before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.@{color}.loader.loader.loader:after {
|
||||
color: @l;
|
||||
}
|
||||
})
|
||||
|
||||
.ui.elastic.loader.loader:before,
|
||||
.ui.elastic.loading.loading.loading:before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader:after {
|
||||
border-color: currentColor;
|
||||
}
|
||||
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
|
||||
color: @invertedLoaderLineColor;
|
||||
}
|
||||
.ui.elastic.basic.loading.button:before,
|
||||
.ui.elastic.basic.loading.button:after {
|
||||
color: @loaderLineColor;
|
||||
}
|
||||
.ui.double.loading.loading.loading.loading.button:after {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
& when (@variationLoaderInline) {
|
||||
/*-------------------
|
||||
Inline
|
||||
--------------------*/
|
||||
|
||||
.ui.inline.loader {
|
||||
position: relative;
|
||||
vertical-align: @inlineVerticalAlign;
|
||||
margin: @inlineMargin;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.inline.loader.active,
|
||||
.ui.inline.loader.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Centered Inline */
|
||||
.ui.centered.inline.loader.active,
|
||||
.ui.centered.inline.loader.visible {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader:after {
|
||||
border-left-color:transparent;
|
||||
border-right-color:transparent;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:after {
|
||||
border-left-color:@loaderFillColor;
|
||||
border-right-color:@loaderFillColor;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
|
||||
border-bottom-color: @loaderFillColor;
|
||||
}
|
||||
|
||||
& when (@variationLoaderElastic) {
|
||||
/*-------------------
|
||||
Elastic
|
||||
--------------------*/
|
||||
|
||||
.ui.dimmer > .ui.elastic.loader {
|
||||
color: @invertedLoaderLineColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.elastic.loader {
|
||||
color: @loaderLineColor;
|
||||
}
|
||||
.ui.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.elastic.loading.loading > i.icon:after,
|
||||
.ui.elastic.loader.loader:after {
|
||||
animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.elastic.loader.loader:before {
|
||||
animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
& when (@variationLoaderInline) {
|
||||
.ui.elastic.inline.loader:empty {
|
||||
animation: loader 8s infinite linear;
|
||||
}
|
||||
}
|
||||
& when (@variationLoaderSpeeds) {
|
||||
.ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.slow.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.slow.elastic.loading.loading > i.icon:after,
|
||||
.ui.slow.elastic.loader.loader:after {
|
||||
animation-duration: 1.5s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.slow.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.slow.elastic.loader.loader:before {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
.ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.fast.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.fast.elastic.loading.loading > i.icon:after,
|
||||
.ui.fast.elastic.loader.loader:after {
|
||||
animation-duration: 0.66s;
|
||||
animation-delay: 0.20s;
|
||||
}
|
||||
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.fast.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.fast.elastic.loader.loader:before {
|
||||
animation-duration: 0.66s;
|
||||
}
|
||||
}
|
||||
@keyframes elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent
|
||||
}
|
||||
1.1%, 50% {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
10%, 35.1%{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%, 35%{
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
50.1%{
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes currentcolor-elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent
|
||||
}
|
||||
1.1%, 50% {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
10%, 35.1%{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%, 35%{
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
50.1%{
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Loader
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'loader';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Loader
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Standard Size */
|
||||
.ui.loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: @loaderTopOffset;
|
||||
left: @loaderLeftOffset;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
.ui.loader:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
.ui.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
animation: loader @loaderSpeed infinite linear;
|
||||
border: @loaderLineWidth solid @shapeBorderColor;
|
||||
border-radius: @circularRadius;
|
||||
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
& when (@variationLoaderSpeeds) {
|
||||
/* Speeds */
|
||||
|
||||
.ui.fast.loading.loading:after,
|
||||
.ui.fast.loading.loading .input > i.icon:after,
|
||||
.ui.fast.loading.loading > i.icon:after,
|
||||
.ui.fast.loader:after {
|
||||
animation-duration: @loaderSpeedFast;
|
||||
}
|
||||
|
||||
.ui.slow.loading.loading:after,
|
||||
.ui.slow.loading.loading .input > i.icon:after,
|
||||
.ui.slow.loading.loading > i.icon:after,
|
||||
.ui.slow.loader:after {
|
||||
animation-duration: @loaderSpeedSlow;
|
||||
}
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
@keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Coupling
|
||||
--------------------*/
|
||||
|
||||
/* Show inside active dimmer */
|
||||
.ui.dimmer > .loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Black Dimmer */
|
||||
.ui.dimmer > .ui.loader {
|
||||
color: @invertedLoaderTextColor;
|
||||
}
|
||||
.ui.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: @invertedLoaderFillColor;
|
||||
}
|
||||
|
||||
/* White Dimmer (Inverted) */
|
||||
.ui.inverted.dimmer > .ui.loader {
|
||||
color: @loaderTextColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
|
||||
border-color: @loaderFillColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationLoaderText) {
|
||||
/*-------------------
|
||||
Text
|
||||
--------------------*/
|
||||
|
||||
.ui.ui.ui.ui.text.loader {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
& when (@variationLoaderIndeterminate) {
|
||||
.ui.indeterminate.loader:after {
|
||||
animation-direction: @indeterminateDirection;
|
||||
animation-duration: @indeterminateSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.loader.active,
|
||||
.ui.loader.visible {
|
||||
display: block;
|
||||
}
|
||||
.ui.loader.disabled,
|
||||
.ui.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.loader {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
.ui.loader:before,
|
||||
.ui.loader:after {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
margin: @mediumOffset;
|
||||
}
|
||||
& when (@variationLoaderText) {
|
||||
.ui.text.loader {
|
||||
min-width: @medium;
|
||||
padding-top: (@medium + @textDistance);
|
||||
}
|
||||
}
|
||||
& when not (@variationLoaderSizes = false) {
|
||||
each(@variationLoaderSizes, {
|
||||
@o: @{value}Offset;
|
||||
@f: @{value}FontSize;
|
||||
@s: @@value;
|
||||
.ui.@{value}.loader {
|
||||
width: @s;
|
||||
height: @s;
|
||||
font-size: @@f;
|
||||
}
|
||||
.ui.@{value}.loader:before,
|
||||
.ui.@{value}.loader:after {
|
||||
width: @s;
|
||||
height: @s;
|
||||
margin: @@o;
|
||||
}
|
||||
& when (@variationLoaderText) {
|
||||
.ui.@{value}.text.loader {
|
||||
min-width: @s;
|
||||
padding-top: (@s + @textDistance);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
.ui.@{color}.elastic.loader.loader:before,
|
||||
.ui.@{color}.basic.elastic.loading.button:before,
|
||||
.ui.@{color}.basic.elastic.loading.button:after,
|
||||
.ui.@{color}.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
|
||||
.ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
|
||||
.ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.@{color}.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.@{color}.loader.loader.loader:after {
|
||||
color: @c;
|
||||
}
|
||||
.ui.inverted.@{color}.elastic.loader:before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.inverted.@{color}.loader.loader.loader:after {
|
||||
color: @l;
|
||||
}
|
||||
})
|
||||
|
||||
.ui.elastic.loader.loader:before,
|
||||
.ui.elastic.loading.loading.loading:before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.loading.loading.loading.loading:not(.usual):after,
|
||||
.ui.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader:after {
|
||||
border-color: currentColor;
|
||||
}
|
||||
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
|
||||
color: @invertedLoaderLineColor;
|
||||
}
|
||||
.ui.elastic.basic.loading.button:before,
|
||||
.ui.elastic.basic.loading.button:after {
|
||||
color: @loaderLineColor;
|
||||
}
|
||||
.ui.double.loading.loading.loading.loading.button:after {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
& when (@variationLoaderInline) {
|
||||
/*-------------------
|
||||
Inline
|
||||
--------------------*/
|
||||
|
||||
.ui.inline.loader {
|
||||
position: relative;
|
||||
vertical-align: @inlineVerticalAlign;
|
||||
margin: @inlineMargin;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.inline.loader.active,
|
||||
.ui.inline.loader.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Centered Inline */
|
||||
.ui.centered.inline.loader.active,
|
||||
.ui.centered.inline.loader.visible {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.loading.loading.loading.loading.loading.loading:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader:after {
|
||||
border-left-color:transparent;
|
||||
border-right-color:transparent;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
|
||||
.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:after {
|
||||
border-left-color:@loaderFillColor;
|
||||
border-right-color:@loaderFillColor;
|
||||
}
|
||||
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
|
||||
.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
|
||||
border-bottom-color: @loaderFillColor;
|
||||
}
|
||||
|
||||
& when (@variationLoaderElastic) {
|
||||
/*-------------------
|
||||
Elastic
|
||||
--------------------*/
|
||||
|
||||
.ui.dimmer > .ui.elastic.loader {
|
||||
color: @invertedLoaderLineColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.elastic.loader {
|
||||
color: @loaderLineColor;
|
||||
}
|
||||
.ui.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.elastic.loading.loading > i.icon:after,
|
||||
.ui.elastic.loader.loader:after {
|
||||
animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.elastic.loader.loader:before {
|
||||
animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
& when (@variationLoaderInline) {
|
||||
.ui.elastic.inline.loader:empty {
|
||||
animation: loader 8s infinite linear;
|
||||
}
|
||||
}
|
||||
& when (@variationLoaderSpeeds) {
|
||||
.ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.slow.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.slow.elastic.loading.loading > i.icon:after,
|
||||
.ui.slow.elastic.loader.loader:after {
|
||||
animation-duration: 1.5s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.slow.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.slow.elastic.loader.loader:before {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
.ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
|
||||
.ui.fast.elastic.loading.loading .input > i.icon:after,
|
||||
.ui.fast.elastic.loading.loading > i.icon:after,
|
||||
.ui.fast.elastic.loader.loader:after {
|
||||
animation-duration: 0.66s;
|
||||
animation-delay: 0.20s;
|
||||
}
|
||||
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
|
||||
.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
|
||||
.ui.fast.elastic.loading.loading.loading > i.icon:before,
|
||||
.ui.fast.elastic.loader.loader:before {
|
||||
animation-duration: 0.66s;
|
||||
}
|
||||
}
|
||||
@keyframes elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent
|
||||
}
|
||||
1.1%, 50% {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
10%, 35.1%{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%, 35%{
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
50.1%{
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes currentcolor-elastic-loader {
|
||||
0%, 1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent
|
||||
}
|
||||
1.1%, 50% {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
10%, 35.1%{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%, 35%{
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
50.1%{
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,248 +1,248 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Loader
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'placeholder';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*-------------------
|
||||
Content
|
||||
--------------------*/
|
||||
|
||||
.ui.placeholder {
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
|
||||
animation-iteration-count: infinite;
|
||||
background-color: @white;
|
||||
background-image: @placeholderLoadingGradient;
|
||||
background-size: @placeholderLoadingGradientWidth 100%;
|
||||
max-width: @placeholderMaxWidth;
|
||||
}
|
||||
|
||||
@keyframes placeholderShimmer{
|
||||
0% {
|
||||
background-position: -@placeholderLoadingGradientWidth 0
|
||||
}
|
||||
100% {
|
||||
background-position: @placeholderLoadingGradientWidth 0
|
||||
}
|
||||
}
|
||||
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
margin-top: @consecutivePlaceholderSpacing;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
animation-delay: @placeholderAnimationInterval;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 2);
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 3);
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 4);
|
||||
}
|
||||
|
||||
.ui.placeholder,
|
||||
.ui.placeholder > :before,
|
||||
.ui.placeholder .image.header:after,
|
||||
.ui.placeholder .line,
|
||||
.ui.placeholder .line:after {
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.ui.placeholder.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderImage) {
|
||||
/* Image */
|
||||
.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
|
||||
height: @placeholderImageHeight;
|
||||
}
|
||||
.ui.placeholder .square.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
/* 1/1 aspect ratio */
|
||||
padding-top: 100%;
|
||||
}
|
||||
.ui.placeholder .rectangular.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
/* 4/3 aspect ratio */
|
||||
padding-top: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) {
|
||||
/* Lines */
|
||||
.ui.placeholder .line {
|
||||
position: relative;
|
||||
height: @placeholderLineMargin;
|
||||
}
|
||||
.ui.placeholder .line:before,
|
||||
.ui.placeholder .line:after {
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: inherit;
|
||||
}
|
||||
.ui.placeholder .line:before {
|
||||
left: 0;
|
||||
}
|
||||
.ui.placeholder .line:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Any Lines */
|
||||
.ui.placeholder .line {
|
||||
margin-bottom: @placeholderLineHeight;
|
||||
}
|
||||
.ui.placeholder .line:before,
|
||||
.ui.placeholder .line:after {
|
||||
height: @placeholderLineHeight;
|
||||
}
|
||||
.ui.placeholder .line:not(:first-child) {
|
||||
margin-top: @placeholderLineHeight;
|
||||
}
|
||||
|
||||
/* Line Outdent */
|
||||
.ui.placeholder .line:nth-child(1):after {
|
||||
width: @placeholderLineOneOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(2):after {
|
||||
width: @placeholderLineTwoOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(3):after {
|
||||
width: @placeholderLineThreeOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(4):after {
|
||||
width: @placeholderLineFourOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(5):after {
|
||||
width: @placeholderLineFiveOutdent;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderHeader) {
|
||||
/* Header Image + 2 Lines */
|
||||
.ui.placeholder .header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Header Line 1 & 2*/
|
||||
.ui.placeholder .header .line {
|
||||
margin-bottom: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:before,
|
||||
.ui.placeholder .header .line:after {
|
||||
height: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:not(:first-child) {
|
||||
margin-top: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:after {
|
||||
width: @placeholderHeaderLineOneOutdent;
|
||||
}
|
||||
.ui.placeholder .header .line:nth-child(2):after {
|
||||
width: @placeholderHeaderLineTwoOutdent;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderImage) {
|
||||
/* Image Header */
|
||||
.ui.placeholder .image.header .line {
|
||||
margin-left: @placeholderImageWidth;
|
||||
}
|
||||
.ui.placeholder .image.header .line:before {
|
||||
width: @placeholderImageTextIndent;
|
||||
}
|
||||
.ui.placeholder .image.header:after {
|
||||
display: block;
|
||||
height: @placeholderLineMargin;
|
||||
content: '';
|
||||
margin-left: @placeholderImageWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
.ui.placeholder .image .line:first-child,
|
||||
.ui.placeholder .paragraph .line:first-child,
|
||||
.ui.placeholder .header .line:first-child {
|
||||
height: 0.01px;
|
||||
}
|
||||
.ui.placeholder .image:not(:first-child):before,
|
||||
.ui.placeholder .paragraph:not(:first-child):before,
|
||||
.ui.placeholder .header:not(:first-child):before {
|
||||
height: @placeholderSpacing;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderInverted) {
|
||||
/* Inverted Content Loader */
|
||||
.ui.inverted.placeholder {
|
||||
background-image: @placeholderInvertedLoadingGradient;
|
||||
}
|
||||
.ui.inverted.placeholder,
|
||||
.ui.inverted.placeholder > :before,
|
||||
.ui.inverted.placeholder .image.header:after,
|
||||
.ui.inverted.placeholder .line,
|
||||
.ui.inverted.placeholder .line:after {
|
||||
background-color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
& when (@variationPlaceholderLengths) {
|
||||
.ui.placeholder .full.line.line.line:after {
|
||||
width: @placeholderFullLineOutdent;
|
||||
}
|
||||
.ui.placeholder .very.long.line.line.line:after {
|
||||
width: @placeholderVeryLongLineOutdent;
|
||||
}
|
||||
.ui.placeholder .long.line.line.line:after {
|
||||
width: @placeholderLongLineOutdent;
|
||||
}
|
||||
.ui.placeholder .medium.line.line.line:after {
|
||||
width: @placeholderMediumLineOutdent;
|
||||
}
|
||||
.ui.placeholder .short.line.line.line:after {
|
||||
width: @placeholderShortLineOutdent;
|
||||
}
|
||||
.ui.placeholder .very.short.line.line.line:after {
|
||||
width: @placeholderVeryShortLineOutdent;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderFluid) {
|
||||
/*-------------------
|
||||
Fluid
|
||||
--------------------*/
|
||||
|
||||
.ui.fluid.placeholder {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Loader
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'placeholder';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*-------------------
|
||||
Content
|
||||
--------------------*/
|
||||
|
||||
.ui.placeholder {
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
|
||||
animation-iteration-count: infinite;
|
||||
background-color: @white;
|
||||
background-image: @placeholderLoadingGradient;
|
||||
background-size: @placeholderLoadingGradientWidth 100%;
|
||||
max-width: @placeholderMaxWidth;
|
||||
}
|
||||
|
||||
@keyframes placeholderShimmer{
|
||||
0% {
|
||||
background-position: -@placeholderLoadingGradientWidth 0
|
||||
}
|
||||
100% {
|
||||
background-position: @placeholderLoadingGradientWidth 0
|
||||
}
|
||||
}
|
||||
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
margin-top: @consecutivePlaceholderSpacing;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
animation-delay: @placeholderAnimationInterval;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 2);
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 3);
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: (@placeholderAnimationInterval * 4);
|
||||
}
|
||||
|
||||
.ui.placeholder,
|
||||
.ui.placeholder > :before,
|
||||
.ui.placeholder .image.header:after,
|
||||
.ui.placeholder .line,
|
||||
.ui.placeholder .line:after {
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.ui.placeholder.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderImage) {
|
||||
/* Image */
|
||||
.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
|
||||
height: @placeholderImageHeight;
|
||||
}
|
||||
.ui.placeholder .square.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
/* 1/1 aspect ratio */
|
||||
padding-top: 100%;
|
||||
}
|
||||
.ui.placeholder .rectangular.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
/* 4/3 aspect ratio */
|
||||
padding-top: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) {
|
||||
/* Lines */
|
||||
.ui.placeholder .line {
|
||||
position: relative;
|
||||
height: @placeholderLineMargin;
|
||||
}
|
||||
.ui.placeholder .line:before,
|
||||
.ui.placeholder .line:after {
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: inherit;
|
||||
}
|
||||
.ui.placeholder .line:before {
|
||||
left: 0;
|
||||
}
|
||||
.ui.placeholder .line:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Any Lines */
|
||||
.ui.placeholder .line {
|
||||
margin-bottom: @placeholderLineHeight;
|
||||
}
|
||||
.ui.placeholder .line:before,
|
||||
.ui.placeholder .line:after {
|
||||
height: @placeholderLineHeight;
|
||||
}
|
||||
.ui.placeholder .line:not(:first-child) {
|
||||
margin-top: @placeholderLineHeight;
|
||||
}
|
||||
|
||||
/* Line Outdent */
|
||||
.ui.placeholder .line:nth-child(1):after {
|
||||
width: @placeholderLineOneOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(2):after {
|
||||
width: @placeholderLineTwoOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(3):after {
|
||||
width: @placeholderLineThreeOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(4):after {
|
||||
width: @placeholderLineFourOutdent;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(5):after {
|
||||
width: @placeholderLineFiveOutdent;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderHeader) {
|
||||
/* Header Image + 2 Lines */
|
||||
.ui.placeholder .header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Header Line 1 & 2*/
|
||||
.ui.placeholder .header .line {
|
||||
margin-bottom: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:before,
|
||||
.ui.placeholder .header .line:after {
|
||||
height: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:not(:first-child) {
|
||||
margin-top: @placeholderHeaderLineHeight;
|
||||
}
|
||||
.ui.placeholder .header .line:after {
|
||||
width: @placeholderHeaderLineOneOutdent;
|
||||
}
|
||||
.ui.placeholder .header .line:nth-child(2):after {
|
||||
width: @placeholderHeaderLineTwoOutdent;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderImage) {
|
||||
/* Image Header */
|
||||
.ui.placeholder .image.header .line {
|
||||
margin-left: @placeholderImageWidth;
|
||||
}
|
||||
.ui.placeholder .image.header .line:before {
|
||||
width: @placeholderImageTextIndent;
|
||||
}
|
||||
.ui.placeholder .image.header:after {
|
||||
display: block;
|
||||
height: @placeholderLineMargin;
|
||||
content: '';
|
||||
margin-left: @placeholderImageWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
.ui.placeholder .image .line:first-child,
|
||||
.ui.placeholder .paragraph .line:first-child,
|
||||
.ui.placeholder .header .line:first-child {
|
||||
height: 0.01px;
|
||||
}
|
||||
.ui.placeholder .image:not(:first-child):before,
|
||||
.ui.placeholder .paragraph:not(:first-child):before,
|
||||
.ui.placeholder .header:not(:first-child):before {
|
||||
height: @placeholderSpacing;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderInverted) {
|
||||
/* Inverted Content Loader */
|
||||
.ui.inverted.placeholder {
|
||||
background-image: @placeholderInvertedLoadingGradient;
|
||||
}
|
||||
.ui.inverted.placeholder,
|
||||
.ui.inverted.placeholder > :before,
|
||||
.ui.inverted.placeholder .image.header:after,
|
||||
.ui.inverted.placeholder .line,
|
||||
.ui.inverted.placeholder .line:after {
|
||||
background-color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
& when (@variationPlaceholderLengths) {
|
||||
.ui.placeholder .full.line.line.line:after {
|
||||
width: @placeholderFullLineOutdent;
|
||||
}
|
||||
.ui.placeholder .very.long.line.line.line:after {
|
||||
width: @placeholderVeryLongLineOutdent;
|
||||
}
|
||||
.ui.placeholder .long.line.line.line:after {
|
||||
width: @placeholderLongLineOutdent;
|
||||
}
|
||||
.ui.placeholder .medium.line.line.line:after {
|
||||
width: @placeholderMediumLineOutdent;
|
||||
}
|
||||
.ui.placeholder .short.line.line.line:after {
|
||||
width: @placeholderShortLineOutdent;
|
||||
}
|
||||
.ui.placeholder .very.short.line.line.line:after {
|
||||
width: @placeholderVeryShortLineOutdent;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationPlaceholderFluid) {
|
||||
/*-------------------
|
||||
Fluid
|
||||
--------------------*/
|
||||
|
||||
.ui.fluid.placeholder {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,147 +1,147 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Rail
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'rail';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rails
|
||||
*******************************/
|
||||
|
||||
.ui.rail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.ui.left.rail {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
padding: 0 @splitDistance 0 0;
|
||||
margin: 0 @splitDistance 0 0;
|
||||
}
|
||||
|
||||
.ui.right.rail {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
padding: 0 0 0 @splitDistance;
|
||||
margin: 0 0 0 @splitDistance;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationRailInternal) {
|
||||
/*--------------
|
||||
Internal
|
||||
---------------*/
|
||||
|
||||
.ui.left.internal.rail {
|
||||
left: 0;
|
||||
right: auto;
|
||||
padding: 0 0 0 @splitDistance;
|
||||
margin: 0 0 0 @splitDistance;
|
||||
}
|
||||
|
||||
.ui.right.internal.rail {
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding: 0 @splitDistance 0 0;
|
||||
margin: 0 @splitDistance 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailDividing) {
|
||||
/*--------------
|
||||
Dividing
|
||||
---------------*/
|
||||
|
||||
.ui.dividing.rail {
|
||||
width: @dividingWidth;
|
||||
}
|
||||
.ui.left.dividing.rail {
|
||||
padding: 0 @splitDividingDistance 0 0;
|
||||
margin: 0 @splitDividingDistance 0 0;
|
||||
border-right: @dividingBorder;
|
||||
}
|
||||
.ui.right.dividing.rail {
|
||||
border-left: @dividingBorder;
|
||||
padding: 0 0 0 @splitDividingDistance;
|
||||
margin: 0 0 0 @splitDividingDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailDistance) {
|
||||
/*--------------
|
||||
Distance
|
||||
---------------*/
|
||||
|
||||
.ui.close.rail {
|
||||
width: @closeWidth;
|
||||
}
|
||||
.ui.close.left.rail {
|
||||
padding: 0 @splitCloseDistance 0 0;
|
||||
margin: 0 @splitCloseDistance 0 0;
|
||||
}
|
||||
.ui.close.right.rail {
|
||||
padding: 0 0 0 @splitCloseDistance;
|
||||
margin: 0 0 0 @splitCloseDistance;
|
||||
}
|
||||
|
||||
.ui.very.close.rail {
|
||||
width: @veryCloseWidth;
|
||||
}
|
||||
.ui.very.close.left.rail {
|
||||
padding: 0 @splitVeryCloseDistance 0 0;
|
||||
margin: 0 @splitVeryCloseDistance 0 0;
|
||||
}
|
||||
.ui.very.close.right.rail {
|
||||
padding: 0 0 0 @splitVeryCloseDistance;
|
||||
margin: 0 0 0 @splitVeryCloseDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailAttached) {
|
||||
/*--------------
|
||||
Attached
|
||||
---------------*/
|
||||
|
||||
.ui.attached.left.rail,
|
||||
.ui.attached.right.rail {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.rail {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRailSizes = false) {
|
||||
each(@variationRailSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.rail {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Rail
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'rail';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rails
|
||||
*******************************/
|
||||
|
||||
.ui.rail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.ui.left.rail {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
padding: 0 @splitDistance 0 0;
|
||||
margin: 0 @splitDistance 0 0;
|
||||
}
|
||||
|
||||
.ui.right.rail {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
padding: 0 0 0 @splitDistance;
|
||||
margin: 0 0 0 @splitDistance;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationRailInternal) {
|
||||
/*--------------
|
||||
Internal
|
||||
---------------*/
|
||||
|
||||
.ui.left.internal.rail {
|
||||
left: 0;
|
||||
right: auto;
|
||||
padding: 0 0 0 @splitDistance;
|
||||
margin: 0 0 0 @splitDistance;
|
||||
}
|
||||
|
||||
.ui.right.internal.rail {
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding: 0 @splitDistance 0 0;
|
||||
margin: 0 @splitDistance 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailDividing) {
|
||||
/*--------------
|
||||
Dividing
|
||||
---------------*/
|
||||
|
||||
.ui.dividing.rail {
|
||||
width: @dividingWidth;
|
||||
}
|
||||
.ui.left.dividing.rail {
|
||||
padding: 0 @splitDividingDistance 0 0;
|
||||
margin: 0 @splitDividingDistance 0 0;
|
||||
border-right: @dividingBorder;
|
||||
}
|
||||
.ui.right.dividing.rail {
|
||||
border-left: @dividingBorder;
|
||||
padding: 0 0 0 @splitDividingDistance;
|
||||
margin: 0 0 0 @splitDividingDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailDistance) {
|
||||
/*--------------
|
||||
Distance
|
||||
---------------*/
|
||||
|
||||
.ui.close.rail {
|
||||
width: @closeWidth;
|
||||
}
|
||||
.ui.close.left.rail {
|
||||
padding: 0 @splitCloseDistance 0 0;
|
||||
margin: 0 @splitCloseDistance 0 0;
|
||||
}
|
||||
.ui.close.right.rail {
|
||||
padding: 0 0 0 @splitCloseDistance;
|
||||
margin: 0 0 0 @splitCloseDistance;
|
||||
}
|
||||
|
||||
.ui.very.close.rail {
|
||||
width: @veryCloseWidth;
|
||||
}
|
||||
.ui.very.close.left.rail {
|
||||
padding: 0 @splitVeryCloseDistance 0 0;
|
||||
margin: 0 @splitVeryCloseDistance 0 0;
|
||||
}
|
||||
.ui.very.close.right.rail {
|
||||
padding: 0 0 0 @splitVeryCloseDistance;
|
||||
margin: 0 0 0 @splitVeryCloseDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRailAttached) {
|
||||
/*--------------
|
||||
Attached
|
||||
---------------*/
|
||||
|
||||
.ui.attached.left.rail,
|
||||
.ui.attached.right.rail {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.rail {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRailSizes = false) {
|
||||
each(@variationRailSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.rail {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,289 +1,289 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Reveal
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'reveal';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Reveal
|
||||
*******************************/
|
||||
|
||||
.ui.reveal {
|
||||
display: inherit;
|
||||
position: relative !important;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.ui.reveal > .visible.content {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
z-index: @topZIndex !important;
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.reveal > .hidden.content {
|
||||
position: relative !important;
|
||||
z-index: @bottomZIndex !important;
|
||||
}
|
||||
|
||||
/* Make sure hovered element is on top of other reveal */
|
||||
.ui.active.reveal .visible.content,
|
||||
.ui.reveal:hover .visible.content {
|
||||
z-index: @activeZIndex !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationRevealSlide) {
|
||||
/*--------------
|
||||
Slide
|
||||
---------------*/
|
||||
|
||||
.ui.slide.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
transition: @slideTransition;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.slide.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .visible.content,
|
||||
.ui.slide.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .hidden.content,
|
||||
.ui.slide.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.right.reveal > .visible.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
.ui.slide.right.reveal > .hidden.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .visible.content,
|
||||
.ui.slide.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .hidden.content,
|
||||
.ui.slide.right.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.up.reveal > .hidden.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .visible.content,
|
||||
.ui.slide.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .hidden.content,
|
||||
.ui.slide.up.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.down.reveal > .hidden.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .visible.content,
|
||||
.ui.slide.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .hidden.content,
|
||||
.ui.slide.down.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRevealFade) {
|
||||
/*--------------
|
||||
Fade
|
||||
---------------*/
|
||||
|
||||
.ui.fade.reveal > .visible.content {
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.fade.active.reveal > .visible.content,
|
||||
.ui.fade.reveal:hover > .visible.content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRevealMove) {
|
||||
/*--------------
|
||||
Move
|
||||
---------------*/
|
||||
|
||||
.ui.move.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .content {
|
||||
display: block;
|
||||
float: left;
|
||||
white-space: normal;
|
||||
|
||||
margin: 0;
|
||||
transition: @moveTransition;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.move.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.move.active.reveal > .visible.content,
|
||||
.ui.move.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.move.right.active.reveal > .visible.content,
|
||||
.ui.move.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.move.up.active.reveal > .visible.content,
|
||||
.ui.move.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.move.down.active.reveal > .visible.content,
|
||||
.ui.move.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& when (@variationRevealRotate) {
|
||||
/*--------------
|
||||
Rotate
|
||||
---------------*/
|
||||
|
||||
.ui.rotate.reveal > .visible.content {
|
||||
transition-duration: @transitionDuration;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.ui.rotate.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal > .visible.content {
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
.ui.rotate.active.reveal > .visible.content,
|
||||
.ui.rotate.reveal:hover > .visible.content,
|
||||
.ui.rotate.right.active.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal:hover > .visible.content {
|
||||
transform: rotate(@rotateDegrees);
|
||||
}
|
||||
|
||||
.ui.rotate.left.reveal > .visible.content {
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.ui.rotate.left.active.reveal > .visible.content,
|
||||
.ui.rotate.left.reveal:hover > .visible.content {
|
||||
transform: rotate(-@rotateDegrees);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationRevealDisabled) {
|
||||
.ui.disabled.reveal:hover > .visible.visible.content {
|
||||
position: static !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.ui.disabled.reveal:hover > .hidden.hidden.content {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
.ui.reveal > .ui.ribbon.label {
|
||||
z-index: @overlayZIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Visible
|
||||
---------------*/
|
||||
|
||||
.ui.visible.reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Instant
|
||||
---------------*/
|
||||
|
||||
.ui.instant.reveal > .content {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.reveal > .content {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRevealSizes = false) {
|
||||
each(@variationRevealSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.reveal > .content {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Reveal
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'reveal';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Reveal
|
||||
*******************************/
|
||||
|
||||
.ui.reveal {
|
||||
display: inherit;
|
||||
position: relative !important;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.ui.reveal > .visible.content {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
z-index: @topZIndex !important;
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.reveal > .hidden.content {
|
||||
position: relative !important;
|
||||
z-index: @bottomZIndex !important;
|
||||
}
|
||||
|
||||
/* Make sure hovered element is on top of other reveal */
|
||||
.ui.active.reveal .visible.content,
|
||||
.ui.reveal:hover .visible.content {
|
||||
z-index: @activeZIndex !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationRevealSlide) {
|
||||
/*--------------
|
||||
Slide
|
||||
---------------*/
|
||||
|
||||
.ui.slide.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
float: left;
|
||||
|
||||
margin: 0;
|
||||
transition: @slideTransition;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.slide.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .visible.content,
|
||||
.ui.slide.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .hidden.content,
|
||||
.ui.slide.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.right.reveal > .visible.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
.ui.slide.right.reveal > .hidden.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .visible.content,
|
||||
.ui.slide.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .hidden.content,
|
||||
.ui.slide.right.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.up.reveal > .hidden.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .visible.content,
|
||||
.ui.slide.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .hidden.content,
|
||||
.ui.slide.up.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.down.reveal > .hidden.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .visible.content,
|
||||
.ui.slide.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .hidden.content,
|
||||
.ui.slide.down.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRevealFade) {
|
||||
/*--------------
|
||||
Fade
|
||||
---------------*/
|
||||
|
||||
.ui.fade.reveal > .visible.content {
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.fade.active.reveal > .visible.content,
|
||||
.ui.fade.reveal:hover > .visible.content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationRevealMove) {
|
||||
/*--------------
|
||||
Move
|
||||
---------------*/
|
||||
|
||||
.ui.move.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .content {
|
||||
display: block;
|
||||
float: left;
|
||||
white-space: normal;
|
||||
|
||||
margin: 0;
|
||||
transition: @moveTransition;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.move.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.move.active.reveal > .visible.content,
|
||||
.ui.move.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.move.right.active.reveal > .visible.content,
|
||||
.ui.move.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.move.up.active.reveal > .visible.content,
|
||||
.ui.move.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.move.down.active.reveal > .visible.content,
|
||||
.ui.move.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& when (@variationRevealRotate) {
|
||||
/*--------------
|
||||
Rotate
|
||||
---------------*/
|
||||
|
||||
.ui.rotate.reveal > .visible.content {
|
||||
transition-duration: @transitionDuration;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.ui.rotate.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal > .visible.content {
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
.ui.rotate.active.reveal > .visible.content,
|
||||
.ui.rotate.reveal:hover > .visible.content,
|
||||
.ui.rotate.right.active.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal:hover > .visible.content {
|
||||
transform: rotate(@rotateDegrees);
|
||||
}
|
||||
|
||||
.ui.rotate.left.reveal > .visible.content {
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.ui.rotate.left.active.reveal > .visible.content,
|
||||
.ui.rotate.left.reveal:hover > .visible.content {
|
||||
transform: rotate(-@rotateDegrees);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationRevealDisabled) {
|
||||
.ui.disabled.reveal:hover > .visible.visible.content {
|
||||
position: static !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.ui.disabled.reveal:hover > .hidden.hidden.content {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
.ui.reveal > .ui.ribbon.label {
|
||||
z-index: @overlayZIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Visible
|
||||
---------------*/
|
||||
|
||||
.ui.visible.reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Instant
|
||||
---------------*/
|
||||
|
||||
.ui.instant.reveal > .content {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.reveal > .content {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRevealSizes = false) {
|
||||
each(@variationRevealSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.reveal > .content {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,63 +1,63 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Text
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'text';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Text
|
||||
*******************************/
|
||||
span.ui.text {
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
span.ui.@{color}.text {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationTextInverted) {
|
||||
span.ui.inverted.@{color}.text {
|
||||
color: @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationTextDisabled) {
|
||||
span.ui.disabled.text {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
span.ui.medium.text {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationTextSizes = false) {
|
||||
each(@variationTextSizes, {
|
||||
@s: @@value;
|
||||
span.ui.@{value}.text {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Text
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'text';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Text
|
||||
*******************************/
|
||||
span.ui.text {
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
span.ui.@{color}.text {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationTextInverted) {
|
||||
span.ui.inverted.@{color}.text {
|
||||
color: @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationTextDisabled) {
|
||||
span.ui.disabled.text {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
span.ui.medium.text {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationTextSizes = false) {
|
||||
each(@variationTextSizes, {
|
||||
@s: @@value;
|
||||
span.ui.@{value}.text {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,40 +1,40 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Reset
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'global';
|
||||
@element : 'reset';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Reset
|
||||
*******************************/
|
||||
|
||||
/* Border-Box */
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* iPad Input Shadows */
|
||||
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none; /* mobile firefox too! */
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Reset
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'global';
|
||||
@element : 'reset';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Reset
|
||||
*******************************/
|
||||
|
||||
/* Border-Box */
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* iPad Input Shadows */
|
||||
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none; /* mobile firefox too! */
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,493 +1,493 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Site
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
$.isFunction = $.isFunction || function(obj) {
|
||||
return typeof obj === "function" && typeof obj.nodeType !== "number";
|
||||
};
|
||||
|
||||
$.site = $.fn.site = function(parameters) {
|
||||
var
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.site.settings, parameters)
|
||||
: $.extend({}, $.site.settings),
|
||||
|
||||
namespace = settings.namespace,
|
||||
error = settings.error,
|
||||
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$document = $(document),
|
||||
$module = $document,
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
module,
|
||||
returnedValue
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of site', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
normalize: function() {
|
||||
module.fix.console();
|
||||
module.fix.requestAnimationFrame();
|
||||
},
|
||||
|
||||
fix: {
|
||||
console: function() {
|
||||
module.debug('Normalizing window.console');
|
||||
if (console === undefined || console.log === undefined) {
|
||||
module.verbose('Console not available, normalizing events');
|
||||
module.disable.console();
|
||||
}
|
||||
if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {
|
||||
module.verbose('Console group not available, normalizing events');
|
||||
window.console.group = function() {};
|
||||
window.console.groupEnd = function() {};
|
||||
window.console.groupCollapsed = function() {};
|
||||
}
|
||||
if (typeof console.markTimeline == 'undefined') {
|
||||
module.verbose('Mark timeline not available, normalizing events');
|
||||
window.console.markTimeline = function() {};
|
||||
}
|
||||
},
|
||||
consoleClear: function() {
|
||||
module.debug('Disabling programmatic console clearing');
|
||||
window.console.clear = function() {};
|
||||
},
|
||||
requestAnimationFrame: function() {
|
||||
module.debug('Normalizing requestAnimationFrame');
|
||||
if(window.requestAnimationFrame === undefined) {
|
||||
module.debug('RequestAnimationFrame not available, normalizing event');
|
||||
window.requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); }
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
moduleExists: function(name) {
|
||||
return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);
|
||||
},
|
||||
|
||||
enabled: {
|
||||
modules: function(modules) {
|
||||
var
|
||||
enabledModules = []
|
||||
;
|
||||
modules = modules || settings.modules;
|
||||
$.each(modules, function(index, name) {
|
||||
if(module.moduleExists(name)) {
|
||||
enabledModules.push(name);
|
||||
}
|
||||
});
|
||||
return enabledModules;
|
||||
}
|
||||
},
|
||||
|
||||
disabled: {
|
||||
modules: function(modules) {
|
||||
var
|
||||
disabledModules = []
|
||||
;
|
||||
modules = modules || settings.modules;
|
||||
$.each(modules, function(index, name) {
|
||||
if(!module.moduleExists(name)) {
|
||||
disabledModules.push(name);
|
||||
}
|
||||
});
|
||||
return disabledModules;
|
||||
}
|
||||
},
|
||||
|
||||
change: {
|
||||
setting: function(setting, value, modules, modifyExisting) {
|
||||
modules = (typeof modules === 'string')
|
||||
? (modules === 'all')
|
||||
? settings.modules
|
||||
: [modules]
|
||||
: modules || settings.modules
|
||||
;
|
||||
modifyExisting = (modifyExisting !== undefined)
|
||||
? modifyExisting
|
||||
: true
|
||||
;
|
||||
$.each(modules, function(index, name) {
|
||||
var
|
||||
namespace = (module.moduleExists(name))
|
||||
? $.fn[name].settings.namespace || false
|
||||
: true,
|
||||
$existingModules
|
||||
;
|
||||
if(module.moduleExists(name)) {
|
||||
module.verbose('Changing default setting', setting, value, name);
|
||||
$.fn[name].settings[setting] = value;
|
||||
if(modifyExisting && namespace) {
|
||||
$existingModules = $(':data(module-' + namespace + ')');
|
||||
if($existingModules.length > 0) {
|
||||
module.verbose('Modifying existing settings', $existingModules);
|
||||
$existingModules[name]('setting', setting, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
settings: function(newSettings, modules, modifyExisting) {
|
||||
modules = (typeof modules === 'string')
|
||||
? [modules]
|
||||
: modules || settings.modules
|
||||
;
|
||||
modifyExisting = (modifyExisting !== undefined)
|
||||
? modifyExisting
|
||||
: true
|
||||
;
|
||||
$.each(modules, function(index, name) {
|
||||
var
|
||||
$existingModules
|
||||
;
|
||||
if(module.moduleExists(name)) {
|
||||
module.verbose('Changing default setting', newSettings, name);
|
||||
$.extend(true, $.fn[name].settings, newSettings);
|
||||
if(modifyExisting && namespace) {
|
||||
$existingModules = $(':data(module-' + namespace + ')');
|
||||
if($existingModules.length > 0) {
|
||||
module.verbose('Modifying existing settings', $existingModules);
|
||||
$existingModules[name]('setting', newSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
enable: {
|
||||
console: function() {
|
||||
module.console(true);
|
||||
},
|
||||
debug: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Enabling debug for modules', modules);
|
||||
module.change.setting('debug', true, modules, modifyExisting);
|
||||
},
|
||||
verbose: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Enabling verbose debug for modules', modules);
|
||||
module.change.setting('verbose', true, modules, modifyExisting);
|
||||
}
|
||||
},
|
||||
disable: {
|
||||
console: function() {
|
||||
module.console(false);
|
||||
},
|
||||
debug: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Disabling debug for modules', modules);
|
||||
module.change.setting('debug', false, modules, modifyExisting);
|
||||
},
|
||||
verbose: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Disabling verbose debug for modules', modules);
|
||||
module.change.setting('verbose', false, modules, modifyExisting);
|
||||
}
|
||||
},
|
||||
|
||||
console: function(enable) {
|
||||
if(enable) {
|
||||
if(instance.cache.console === undefined) {
|
||||
module.error(error.console);
|
||||
return;
|
||||
}
|
||||
module.debug('Restoring console function');
|
||||
window.console = instance.cache.console;
|
||||
}
|
||||
else {
|
||||
module.debug('Disabling console function');
|
||||
instance.cache.console = window.console;
|
||||
window.console = {
|
||||
clear : function(){},
|
||||
error : function(){},
|
||||
group : function(){},
|
||||
groupCollapsed : function(){},
|
||||
groupEnd : function(){},
|
||||
info : function(){},
|
||||
log : function(){},
|
||||
markTimeline : function(){},
|
||||
warn : function(){}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous site for', $module);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
cache: {},
|
||||
|
||||
setting: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, settings, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
settings[name] = value;
|
||||
}
|
||||
else {
|
||||
return settings[name];
|
||||
}
|
||||
},
|
||||
internal: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, module, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
module[name] = value;
|
||||
}
|
||||
else {
|
||||
return module[name];
|
||||
}
|
||||
},
|
||||
debug: function() {
|
||||
if(settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.debug.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
verbose: function() {
|
||||
if(settings.verbose && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.verbose.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||||
module.error.apply(console, arguments);
|
||||
},
|
||||
performance: {
|
||||
log: function(message) {
|
||||
var
|
||||
currentTime,
|
||||
executionTime,
|
||||
previousTime
|
||||
;
|
||||
if(settings.performance) {
|
||||
currentTime = new Date().getTime();
|
||||
previousTime = time || currentTime;
|
||||
executionTime = currentTime - previousTime;
|
||||
time = currentTime;
|
||||
performance.push({
|
||||
'Element' : element,
|
||||
'Name' : message[0],
|
||||
'Arguments' : [].slice.call(message, 1) || '',
|
||||
'Execution Time' : executionTime
|
||||
});
|
||||
}
|
||||
clearTimeout(module.performance.timer);
|
||||
module.performance.timer = setTimeout(module.performance.display, 500);
|
||||
},
|
||||
display: function() {
|
||||
var
|
||||
title = settings.name + ':',
|
||||
totalTime = 0
|
||||
;
|
||||
time = false;
|
||||
clearTimeout(module.performance.timer);
|
||||
$.each(performance, function(index, data) {
|
||||
totalTime += data['Execution Time'];
|
||||
});
|
||||
title += ' ' + totalTime + 'ms';
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||||
console.groupCollapsed(title);
|
||||
if(console.table) {
|
||||
console.table(performance);
|
||||
}
|
||||
else {
|
||||
$.each(performance, function(index, data) {
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||||
});
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
performance = [];
|
||||
}
|
||||
},
|
||||
invoke: function(query, passedArguments, context) {
|
||||
var
|
||||
object = instance,
|
||||
maxDepth,
|
||||
found,
|
||||
response
|
||||
;
|
||||
passedArguments = passedArguments || queryArguments;
|
||||
context = element || context;
|
||||
if(typeof query == 'string' && object !== undefined) {
|
||||
query = query.split(/[\. ]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function(depth, value) {
|
||||
var camelCaseValue = (depth != maxDepth)
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||||
object = object[camelCaseValue];
|
||||
}
|
||||
else if( object[camelCaseValue] !== undefined ) {
|
||||
found = object[camelCaseValue];
|
||||
return false;
|
||||
}
|
||||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||||
object = object[value];
|
||||
}
|
||||
else if( object[value] !== undefined ) {
|
||||
found = object[value];
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.error(error.method, query);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if ( $.isFunction( found ) ) {
|
||||
response = found.apply(context, passedArguments);
|
||||
}
|
||||
else if(found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if(Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
}
|
||||
else if(returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
}
|
||||
else if(response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
return found;
|
||||
}
|
||||
};
|
||||
|
||||
if(methodInvoked) {
|
||||
if(instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
}
|
||||
else {
|
||||
if(instance !== undefined) {
|
||||
module.destroy();
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.site.settings = {
|
||||
|
||||
name : 'Site',
|
||||
namespace : 'site',
|
||||
|
||||
error : {
|
||||
console : 'Console cannot be restored, most likely it was overwritten outside of module',
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : true,
|
||||
|
||||
modules: [
|
||||
'accordion',
|
||||
'api',
|
||||
'calendar',
|
||||
'checkbox',
|
||||
'dimmer',
|
||||
'dropdown',
|
||||
'embed',
|
||||
'form',
|
||||
'modal',
|
||||
'nag',
|
||||
'popup',
|
||||
'slider',
|
||||
'rating',
|
||||
'shape',
|
||||
'sidebar',
|
||||
'state',
|
||||
'sticky',
|
||||
'tab',
|
||||
'toast',
|
||||
'transition',
|
||||
'visibility',
|
||||
'visit'
|
||||
],
|
||||
|
||||
siteNamespace : 'site',
|
||||
namespaceStub : {
|
||||
cache : {},
|
||||
config : {},
|
||||
sections : {},
|
||||
section : {},
|
||||
utilities : {}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// allows for selection of elements with data attributes
|
||||
$.extend($.expr[ ":" ], {
|
||||
data: ($.expr.createPseudo)
|
||||
? $.expr.createPseudo(function(dataName) {
|
||||
return function(elem) {
|
||||
return !!$.data(elem, dataName);
|
||||
};
|
||||
})
|
||||
: function(elem, i, match) {
|
||||
// support: jQuery < 1.8
|
||||
return !!$.data(elem, match[ 3 ]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})( jQuery, window, document );
|
||||
/*!
|
||||
* # Fomantic-UI - Site
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
$.isFunction = $.isFunction || function(obj) {
|
||||
return typeof obj === "function" && typeof obj.nodeType !== "number";
|
||||
};
|
||||
|
||||
$.site = $.fn.site = function(parameters) {
|
||||
var
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.site.settings, parameters)
|
||||
: $.extend({}, $.site.settings),
|
||||
|
||||
namespace = settings.namespace,
|
||||
error = settings.error,
|
||||
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$document = $(document),
|
||||
$module = $document,
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
module,
|
||||
returnedValue
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of site', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
normalize: function() {
|
||||
module.fix.console();
|
||||
module.fix.requestAnimationFrame();
|
||||
},
|
||||
|
||||
fix: {
|
||||
console: function() {
|
||||
module.debug('Normalizing window.console');
|
||||
if (console === undefined || console.log === undefined) {
|
||||
module.verbose('Console not available, normalizing events');
|
||||
module.disable.console();
|
||||
}
|
||||
if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {
|
||||
module.verbose('Console group not available, normalizing events');
|
||||
window.console.group = function() {};
|
||||
window.console.groupEnd = function() {};
|
||||
window.console.groupCollapsed = function() {};
|
||||
}
|
||||
if (typeof console.markTimeline == 'undefined') {
|
||||
module.verbose('Mark timeline not available, normalizing events');
|
||||
window.console.markTimeline = function() {};
|
||||
}
|
||||
},
|
||||
consoleClear: function() {
|
||||
module.debug('Disabling programmatic console clearing');
|
||||
window.console.clear = function() {};
|
||||
},
|
||||
requestAnimationFrame: function() {
|
||||
module.debug('Normalizing requestAnimationFrame');
|
||||
if(window.requestAnimationFrame === undefined) {
|
||||
module.debug('RequestAnimationFrame not available, normalizing event');
|
||||
window.requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); }
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
moduleExists: function(name) {
|
||||
return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);
|
||||
},
|
||||
|
||||
enabled: {
|
||||
modules: function(modules) {
|
||||
var
|
||||
enabledModules = []
|
||||
;
|
||||
modules = modules || settings.modules;
|
||||
$.each(modules, function(index, name) {
|
||||
if(module.moduleExists(name)) {
|
||||
enabledModules.push(name);
|
||||
}
|
||||
});
|
||||
return enabledModules;
|
||||
}
|
||||
},
|
||||
|
||||
disabled: {
|
||||
modules: function(modules) {
|
||||
var
|
||||
disabledModules = []
|
||||
;
|
||||
modules = modules || settings.modules;
|
||||
$.each(modules, function(index, name) {
|
||||
if(!module.moduleExists(name)) {
|
||||
disabledModules.push(name);
|
||||
}
|
||||
});
|
||||
return disabledModules;
|
||||
}
|
||||
},
|
||||
|
||||
change: {
|
||||
setting: function(setting, value, modules, modifyExisting) {
|
||||
modules = (typeof modules === 'string')
|
||||
? (modules === 'all')
|
||||
? settings.modules
|
||||
: [modules]
|
||||
: modules || settings.modules
|
||||
;
|
||||
modifyExisting = (modifyExisting !== undefined)
|
||||
? modifyExisting
|
||||
: true
|
||||
;
|
||||
$.each(modules, function(index, name) {
|
||||
var
|
||||
namespace = (module.moduleExists(name))
|
||||
? $.fn[name].settings.namespace || false
|
||||
: true,
|
||||
$existingModules
|
||||
;
|
||||
if(module.moduleExists(name)) {
|
||||
module.verbose('Changing default setting', setting, value, name);
|
||||
$.fn[name].settings[setting] = value;
|
||||
if(modifyExisting && namespace) {
|
||||
$existingModules = $(':data(module-' + namespace + ')');
|
||||
if($existingModules.length > 0) {
|
||||
module.verbose('Modifying existing settings', $existingModules);
|
||||
$existingModules[name]('setting', setting, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
settings: function(newSettings, modules, modifyExisting) {
|
||||
modules = (typeof modules === 'string')
|
||||
? [modules]
|
||||
: modules || settings.modules
|
||||
;
|
||||
modifyExisting = (modifyExisting !== undefined)
|
||||
? modifyExisting
|
||||
: true
|
||||
;
|
||||
$.each(modules, function(index, name) {
|
||||
var
|
||||
$existingModules
|
||||
;
|
||||
if(module.moduleExists(name)) {
|
||||
module.verbose('Changing default setting', newSettings, name);
|
||||
$.extend(true, $.fn[name].settings, newSettings);
|
||||
if(modifyExisting && namespace) {
|
||||
$existingModules = $(':data(module-' + namespace + ')');
|
||||
if($existingModules.length > 0) {
|
||||
module.verbose('Modifying existing settings', $existingModules);
|
||||
$existingModules[name]('setting', newSettings);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
enable: {
|
||||
console: function() {
|
||||
module.console(true);
|
||||
},
|
||||
debug: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Enabling debug for modules', modules);
|
||||
module.change.setting('debug', true, modules, modifyExisting);
|
||||
},
|
||||
verbose: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Enabling verbose debug for modules', modules);
|
||||
module.change.setting('verbose', true, modules, modifyExisting);
|
||||
}
|
||||
},
|
||||
disable: {
|
||||
console: function() {
|
||||
module.console(false);
|
||||
},
|
||||
debug: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Disabling debug for modules', modules);
|
||||
module.change.setting('debug', false, modules, modifyExisting);
|
||||
},
|
||||
verbose: function(modules, modifyExisting) {
|
||||
modules = modules || settings.modules;
|
||||
module.debug('Disabling verbose debug for modules', modules);
|
||||
module.change.setting('verbose', false, modules, modifyExisting);
|
||||
}
|
||||
},
|
||||
|
||||
console: function(enable) {
|
||||
if(enable) {
|
||||
if(instance.cache.console === undefined) {
|
||||
module.error(error.console);
|
||||
return;
|
||||
}
|
||||
module.debug('Restoring console function');
|
||||
window.console = instance.cache.console;
|
||||
}
|
||||
else {
|
||||
module.debug('Disabling console function');
|
||||
instance.cache.console = window.console;
|
||||
window.console = {
|
||||
clear : function(){},
|
||||
error : function(){},
|
||||
group : function(){},
|
||||
groupCollapsed : function(){},
|
||||
groupEnd : function(){},
|
||||
info : function(){},
|
||||
log : function(){},
|
||||
markTimeline : function(){},
|
||||
warn : function(){}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous site for', $module);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
cache: {},
|
||||
|
||||
setting: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, settings, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
settings[name] = value;
|
||||
}
|
||||
else {
|
||||
return settings[name];
|
||||
}
|
||||
},
|
||||
internal: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, module, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
module[name] = value;
|
||||
}
|
||||
else {
|
||||
return module[name];
|
||||
}
|
||||
},
|
||||
debug: function() {
|
||||
if(settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.debug.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
verbose: function() {
|
||||
if(settings.verbose && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.verbose.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||||
module.error.apply(console, arguments);
|
||||
},
|
||||
performance: {
|
||||
log: function(message) {
|
||||
var
|
||||
currentTime,
|
||||
executionTime,
|
||||
previousTime
|
||||
;
|
||||
if(settings.performance) {
|
||||
currentTime = new Date().getTime();
|
||||
previousTime = time || currentTime;
|
||||
executionTime = currentTime - previousTime;
|
||||
time = currentTime;
|
||||
performance.push({
|
||||
'Element' : element,
|
||||
'Name' : message[0],
|
||||
'Arguments' : [].slice.call(message, 1) || '',
|
||||
'Execution Time' : executionTime
|
||||
});
|
||||
}
|
||||
clearTimeout(module.performance.timer);
|
||||
module.performance.timer = setTimeout(module.performance.display, 500);
|
||||
},
|
||||
display: function() {
|
||||
var
|
||||
title = settings.name + ':',
|
||||
totalTime = 0
|
||||
;
|
||||
time = false;
|
||||
clearTimeout(module.performance.timer);
|
||||
$.each(performance, function(index, data) {
|
||||
totalTime += data['Execution Time'];
|
||||
});
|
||||
title += ' ' + totalTime + 'ms';
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||||
console.groupCollapsed(title);
|
||||
if(console.table) {
|
||||
console.table(performance);
|
||||
}
|
||||
else {
|
||||
$.each(performance, function(index, data) {
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||||
});
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
performance = [];
|
||||
}
|
||||
},
|
||||
invoke: function(query, passedArguments, context) {
|
||||
var
|
||||
object = instance,
|
||||
maxDepth,
|
||||
found,
|
||||
response
|
||||
;
|
||||
passedArguments = passedArguments || queryArguments;
|
||||
context = element || context;
|
||||
if(typeof query == 'string' && object !== undefined) {
|
||||
query = query.split(/[\. ]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function(depth, value) {
|
||||
var camelCaseValue = (depth != maxDepth)
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||||
object = object[camelCaseValue];
|
||||
}
|
||||
else if( object[camelCaseValue] !== undefined ) {
|
||||
found = object[camelCaseValue];
|
||||
return false;
|
||||
}
|
||||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||||
object = object[value];
|
||||
}
|
||||
else if( object[value] !== undefined ) {
|
||||
found = object[value];
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.error(error.method, query);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if ( $.isFunction( found ) ) {
|
||||
response = found.apply(context, passedArguments);
|
||||
}
|
||||
else if(found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if(Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
}
|
||||
else if(returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
}
|
||||
else if(response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
return found;
|
||||
}
|
||||
};
|
||||
|
||||
if(methodInvoked) {
|
||||
if(instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
}
|
||||
else {
|
||||
if(instance !== undefined) {
|
||||
module.destroy();
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.site.settings = {
|
||||
|
||||
name : 'Site',
|
||||
namespace : 'site',
|
||||
|
||||
error : {
|
||||
console : 'Console cannot be restored, most likely it was overwritten outside of module',
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : true,
|
||||
|
||||
modules: [
|
||||
'accordion',
|
||||
'api',
|
||||
'calendar',
|
||||
'checkbox',
|
||||
'dimmer',
|
||||
'dropdown',
|
||||
'embed',
|
||||
'form',
|
||||
'modal',
|
||||
'nag',
|
||||
'popup',
|
||||
'slider',
|
||||
'rating',
|
||||
'shape',
|
||||
'sidebar',
|
||||
'state',
|
||||
'sticky',
|
||||
'tab',
|
||||
'toast',
|
||||
'transition',
|
||||
'visibility',
|
||||
'visit'
|
||||
],
|
||||
|
||||
siteNamespace : 'site',
|
||||
namespaceStub : {
|
||||
cache : {},
|
||||
config : {},
|
||||
sections : {},
|
||||
section : {},
|
||||
utilities : {}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// allows for selection of elements with data attributes
|
||||
$.extend($.expr[ ":" ], {
|
||||
data: ($.expr.createPseudo)
|
||||
? $.expr.createPseudo(function(dataName) {
|
||||
return function(elem) {
|
||||
return !!$.data(elem, dataName);
|
||||
};
|
||||
})
|
||||
: function(elem, i, match) {
|
||||
// support: jQuery < 1.8
|
||||
return !!$.data(elem, match[ 3 ]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
|
@ -1,207 +1,207 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Site
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'global';
|
||||
@element : 'site';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Page
|
||||
*******************************/
|
||||
|
||||
.loadFonts();
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: @emSize;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: @pageOverflowX;
|
||||
min-width: @pageMinWidth;
|
||||
background: @pageBackground;
|
||||
font-family: @pageFont;
|
||||
font-size: @fontSize;
|
||||
line-height: @lineHeight;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Headers
|
||||
*******************************/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: @headerFont;
|
||||
line-height: @headerLineHeight;
|
||||
margin: @headerMargin;
|
||||
font-weight: @headerFontWeight;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
min-height: 1rem;
|
||||
font-size: @h1;
|
||||
}
|
||||
h2 {
|
||||
font-size: @h2;
|
||||
}
|
||||
h3 {
|
||||
font-size: @h3;
|
||||
}
|
||||
h4 {
|
||||
font-size: @h4;
|
||||
}
|
||||
h5 {
|
||||
font-size: @h5;
|
||||
}
|
||||
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Text
|
||||
*******************************/
|
||||
|
||||
p {
|
||||
margin: @paragraphMargin;
|
||||
line-height: @paragraphLineHeight;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Links
|
||||
--------------------*/
|
||||
|
||||
a {
|
||||
color: @linkColor;
|
||||
text-decoration: @linkUnderline;
|
||||
}
|
||||
a:hover {
|
||||
color: @linkHoverColor;
|
||||
text-decoration: @linkHoverUnderline;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Scrollbars
|
||||
*******************************/
|
||||
|
||||
.addScrollbars() when (@useCustomScrollbars) {
|
||||
|
||||
/* Force Simple Scrollbars */
|
||||
body ::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: @customScrollbarWidth;
|
||||
height: @customScrollbarHeight;
|
||||
}
|
||||
body ::-webkit-scrollbar-track {
|
||||
background: @trackBackground;
|
||||
border-radius: @trackBorderRadius;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
border-radius: @thumbBorderRadius;
|
||||
background: @thumbBackground;
|
||||
transition: @thumbTransition;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInactiveBackground;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
/* Inverted UI */
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
|
||||
background: @trackInvertedBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb {
|
||||
background: @thumbInvertedBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInvertedInactiveBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbInvertedHoverBackground;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Highlighting
|
||||
*******************************/
|
||||
|
||||
/* Site */
|
||||
::-webkit-selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
::-moz-selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
::selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
textarea::-webkit-selection,
|
||||
input::-webkit-selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
textarea::-moz-selection,
|
||||
input::-moz-selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
textarea::selection,
|
||||
input::selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
|
||||
.addScrollbars();
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Site
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'global';
|
||||
@element : 'site';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Page
|
||||
*******************************/
|
||||
|
||||
.loadFonts();
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: @emSize;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: @pageOverflowX;
|
||||
min-width: @pageMinWidth;
|
||||
background: @pageBackground;
|
||||
font-family: @pageFont;
|
||||
font-size: @fontSize;
|
||||
line-height: @lineHeight;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Headers
|
||||
*******************************/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: @headerFont;
|
||||
line-height: @headerLineHeight;
|
||||
margin: @headerMargin;
|
||||
font-weight: @headerFontWeight;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
min-height: 1rem;
|
||||
font-size: @h1;
|
||||
}
|
||||
h2 {
|
||||
font-size: @h2;
|
||||
}
|
||||
h3 {
|
||||
font-size: @h3;
|
||||
}
|
||||
h4 {
|
||||
font-size: @h4;
|
||||
}
|
||||
h5 {
|
||||
font-size: @h5;
|
||||
}
|
||||
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Text
|
||||
*******************************/
|
||||
|
||||
p {
|
||||
margin: @paragraphMargin;
|
||||
line-height: @paragraphLineHeight;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Links
|
||||
--------------------*/
|
||||
|
||||
a {
|
||||
color: @linkColor;
|
||||
text-decoration: @linkUnderline;
|
||||
}
|
||||
a:hover {
|
||||
color: @linkHoverColor;
|
||||
text-decoration: @linkHoverUnderline;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Scrollbars
|
||||
*******************************/
|
||||
|
||||
.addScrollbars() when (@useCustomScrollbars) {
|
||||
|
||||
/* Force Simple Scrollbars */
|
||||
body ::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: @customScrollbarWidth;
|
||||
height: @customScrollbarHeight;
|
||||
}
|
||||
body ::-webkit-scrollbar-track {
|
||||
background: @trackBackground;
|
||||
border-radius: @trackBorderRadius;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb {
|
||||
cursor: pointer;
|
||||
border-radius: @thumbBorderRadius;
|
||||
background: @thumbBackground;
|
||||
transition: @thumbTransition;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInactiveBackground;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
/* Inverted UI */
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
|
||||
background: @trackInvertedBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb {
|
||||
background: @thumbInvertedBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInvertedInactiveBackground;
|
||||
}
|
||||
body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbInvertedHoverBackground;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Highlighting
|
||||
*******************************/
|
||||
|
||||
/* Site */
|
||||
::-webkit-selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
::-moz-selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
::selection {
|
||||
background-color: @highlightBackground;
|
||||
color: @highlightColor;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
textarea::-webkit-selection,
|
||||
input::-webkit-selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
textarea::-moz-selection,
|
||||
input::-moz-selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
textarea::selection,
|
||||
input::selection {
|
||||
background-color: @inputHighlightBackground;
|
||||
color: @inputHighlightColor;
|
||||
}
|
||||
|
||||
.addScrollbars();
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,186 +1,186 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Calendar
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'calendar';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Popup
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.popup {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Calendar
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .calendar:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Grid
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.popup .ui.grid {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.popup .ui.grid > .column {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Table
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.table.year,
|
||||
.ui.calendar .ui.table.month,
|
||||
.ui.calendar .ui.table.minute {
|
||||
min-width: 15em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day {
|
||||
min-width: 18em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day.andweek {
|
||||
min-width: 22em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.hour {
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th,
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th .icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr:first-child th {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day tr:first-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day tr:nth-child(2) th {
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .prev.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .next.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .disabled {
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
color: @disabledTextColor;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .adjacent:not(.disabled) {
|
||||
color: @adjacentTextColor;
|
||||
background: @adjacentBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
States
|
||||
---------------*/
|
||||
|
||||
.ui.calendar .ui.table tr td.today {
|
||||
font-weight: @todayFontWeight;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr td.range {
|
||||
background: @rangeBackground;
|
||||
color: @rangeTextColor;
|
||||
box-shadow: @rangeBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.inverted tr td.range {
|
||||
background: @rangeInvertedBackground;
|
||||
color: @rangeInvertedTextColor;
|
||||
box-shadow: @rangeInvertedBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
|
||||
.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
|
||||
box-shadow: @focusBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
|
||||
.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
|
||||
box-shadow: @focusInvertedBoxShadow;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationCalendarDisabled) {
|
||||
/*--------------------
|
||||
Disabled
|
||||
---------------------*/
|
||||
|
||||
.ui.disabled.calendar {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
.ui.disabled.calendar > .input,
|
||||
.ui.disabled.calendar .ui.table tr .link {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Calendar
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'calendar';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Popup
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.popup {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Calendar
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .calendar:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Grid
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.popup .ui.grid {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.popup .ui.grid > .column {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Table
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.table.year,
|
||||
.ui.calendar .ui.table.month,
|
||||
.ui.calendar .ui.table.minute {
|
||||
min-width: 15em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day {
|
||||
min-width: 18em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day.andweek {
|
||||
min-width: 22em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.hour {
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th,
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr th .icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr:first-child th {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day tr:first-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.day tr:nth-child(2) th {
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .prev.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .next.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .disabled {
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
color: @disabledTextColor;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr .adjacent:not(.disabled) {
|
||||
color: @adjacentTextColor;
|
||||
background: @adjacentBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
States
|
||||
---------------*/
|
||||
|
||||
.ui.calendar .ui.table tr td.today {
|
||||
font-weight: @todayFontWeight;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table tr td.range {
|
||||
background: @rangeBackground;
|
||||
color: @rangeTextColor;
|
||||
box-shadow: @rangeBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar .ui.table.inverted tr td.range {
|
||||
background: @rangeInvertedBackground;
|
||||
color: @rangeInvertedTextColor;
|
||||
box-shadow: @rangeInvertedBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
|
||||
.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
|
||||
box-shadow: @focusBoxShadow;
|
||||
}
|
||||
|
||||
.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
|
||||
.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
|
||||
box-shadow: @focusInvertedBoxShadow;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationCalendarDisabled) {
|
||||
/*--------------------
|
||||
Disabled
|
||||
---------------------*/
|
||||
|
||||
.ui.disabled.calendar {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
.ui.disabled.calendar > .input,
|
||||
.ui.disabled.calendar .ui.table tr .link {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,390 +1,390 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Dimmer
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'dimmer';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Dimmer
|
||||
*******************************/
|
||||
|
||||
.dimmable:not(body) {
|
||||
position: @dimmablePosition;
|
||||
}
|
||||
|
||||
.ui.dimmer {
|
||||
display: none;
|
||||
position: @dimmerPosition;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-align: @textAlign;
|
||||
vertical-align: @verticalAlign;
|
||||
padding: @padding;
|
||||
|
||||
background-color: @backgroundColor;
|
||||
opacity: @hiddenOpacity;
|
||||
line-height: @lineHeight;
|
||||
|
||||
animation-fill-mode: both;
|
||||
animation-duration: @duration;
|
||||
transition: @transition;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
user-select: none;
|
||||
will-change: opacity;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/* Dimmer Content */
|
||||
.ui.dimmer > .content {
|
||||
user-select: text;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.segment > .ui.dimmer:not(.page) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.addScrollbars() when (@useCustomScrollbars) {
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
|
||||
background: @trackInvertedBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
|
||||
background: @thumbInvertedBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInvertedInactiveBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbInvertedHoverBackground;
|
||||
}
|
||||
}
|
||||
.addScrollbars();
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Animating */
|
||||
.animating.dimmable:not(body),
|
||||
.dimmed.dimmable:not(body) {
|
||||
overflow: @overflow;
|
||||
}
|
||||
|
||||
/* Animating / Active / Visible */
|
||||
.dimmed.dimmable > .ui.animating.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.dimmer,
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: @visibleOpacity;
|
||||
}
|
||||
|
||||
& when (@variationDimmerDisabled) {
|
||||
/* Disabled */
|
||||
.ui.disabled.dimmer {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationDimmerLegacy) {
|
||||
/*--------------
|
||||
Legacy
|
||||
---------------*/
|
||||
|
||||
/* Animating / Active / Visible */
|
||||
.dimmed.dimmable > .ui.animating.legacy.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.legacy.dimmer,
|
||||
.ui.active.legacy.dimmer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerAligned) {
|
||||
/*--------------
|
||||
Alignment
|
||||
---------------*/
|
||||
|
||||
.ui[class*="top aligned"].dimmer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ui[class*="bottom aligned"].dimmer {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerPage) {
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
.ui.page.dimmer {
|
||||
position: @pageDimmerPosition;
|
||||
transform-style: @transformStyle;
|
||||
perspective: @perspective;
|
||||
transform-origin: center center;
|
||||
&.modals {
|
||||
-moz-perspective: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.animating.in.dimmable,
|
||||
body.dimmed.dimmable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dimmable > .dimmer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
& when (@variationDimmerBlurring) {
|
||||
/*--------------
|
||||
Blurring
|
||||
---------------*/
|
||||
|
||||
.blurring.dimmable > :not(.dimmer) {
|
||||
filter: @blurredStartFilter;
|
||||
transition: @blurredTransition;
|
||||
}
|
||||
.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
|
||||
filter: @blurredEndFilter;
|
||||
}
|
||||
|
||||
/* Dimmer Color */
|
||||
.blurring.dimmable > .dimmer {
|
||||
background-color: @blurredBackgroundColor;
|
||||
}
|
||||
.blurring.dimmable > .inverted.dimmer {
|
||||
background-color: @blurredInvertedBackgroundColor;
|
||||
}
|
||||
}
|
||||
& when (@variationDimmerAligned) {
|
||||
/*--------------
|
||||
Aligned
|
||||
---------------*/
|
||||
|
||||
.ui.dimmer > .top.aligned.content > * {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.dimmer > .bottom.aligned.content > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerShades) {
|
||||
/*--------------
|
||||
Shades
|
||||
---------------*/
|
||||
|
||||
.medium.medium.medium.medium.medium.dimmer {
|
||||
background-color: @mediumBackgroundColor;
|
||||
}
|
||||
.light.light.light.light.light.dimmer {
|
||||
background-color: @lightBackgroundColor;
|
||||
}
|
||||
.very.light.light.light.light.dimmer {
|
||||
background-color: @veryLightBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.dimmer {
|
||||
background-color: @invertedBackgroundColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .content,
|
||||
.ui.inverted.dimmer > .content > * {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
& when (@variationDimmerShades) {
|
||||
/*--------------
|
||||
Inverted Shades
|
||||
---------------*/
|
||||
|
||||
.medium.medium.medium.medium.medium.inverted.dimmer {
|
||||
background-color: @mediumInvertedBackgroundColor;
|
||||
}
|
||||
.light.light.light.light.light.inverted.dimmer {
|
||||
background-color: @lightInvertedBackgroundColor;
|
||||
}
|
||||
.very.light.light.light.light.inverted.dimmer {
|
||||
background-color: @veryLightInvertedBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerSimple) {
|
||||
/*--------------
|
||||
Simple
|
||||
---------------*/
|
||||
|
||||
/* Displays without javascript */
|
||||
.ui.simple.dimmer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -100;
|
||||
background-color: @simpleStartBackgroundColor;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.dimmer {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @simpleEndBackgroundColor;
|
||||
z-index: @simpleZIndex;
|
||||
}
|
||||
|
||||
.ui.simple.inverted.dimmer {
|
||||
background-color: @simpleInvertedStartBackgroundColor;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.inverted.dimmer {
|
||||
background-color: @simpleInvertedEndBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerPartially) {
|
||||
/*--------------
|
||||
Partially
|
||||
----------------*/
|
||||
|
||||
.ui[class*="top dimmer"],
|
||||
.ui[class*="center dimmer"],
|
||||
.ui[class*="bottom dimmer"] {
|
||||
height: auto;
|
||||
}
|
||||
.ui[class*="bottom dimmer"] {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui[class*="center dimmer"] {
|
||||
top:50% !important;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
|
||||
.ui.segment > .ui.ui[class*="top dimmer"] {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="center dimmer"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="bottom dimmer"] {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].in {
|
||||
animation-name: fadeInUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].in {
|
||||
animation-name: fadeInDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].out {
|
||||
animation-name: fadeOutUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].out {
|
||||
animation-name: fadeOutDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].bounce.transition {
|
||||
animation-name: bounceCenter;
|
||||
}
|
||||
@keyframes fadeInUpCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40%);
|
||||
-webkit-transform: translateY(calc(-40% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDownCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60%);
|
||||
-webkit-transform: translateY(calc(-60% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutUpCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-45%);
|
||||
-webkit-transform: translateY(calc(-45% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutDownCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-55%);
|
||||
-webkit-transform: translateY(calc(-55% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes bounceCenter {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
40% {
|
||||
transform: translateY(calc(-50% - 30px));
|
||||
}
|
||||
60% {
|
||||
transform: translateY(calc(-50% - 15px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Dimmer
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'dimmer';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Dimmer
|
||||
*******************************/
|
||||
|
||||
.dimmable:not(body) {
|
||||
position: @dimmablePosition;
|
||||
}
|
||||
|
||||
.ui.dimmer {
|
||||
display: none;
|
||||
position: @dimmerPosition;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-align: @textAlign;
|
||||
vertical-align: @verticalAlign;
|
||||
padding: @padding;
|
||||
|
||||
background-color: @backgroundColor;
|
||||
opacity: @hiddenOpacity;
|
||||
line-height: @lineHeight;
|
||||
|
||||
animation-fill-mode: both;
|
||||
animation-duration: @duration;
|
||||
transition: @transition;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
user-select: none;
|
||||
will-change: opacity;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/* Dimmer Content */
|
||||
.ui.dimmer > .content {
|
||||
user-select: text;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.segment > .ui.dimmer:not(.page) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.addScrollbars() when (@useCustomScrollbars) {
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
|
||||
background: @trackInvertedBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
|
||||
background: @thumbInvertedBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: @thumbInvertedInactiveBackground;
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
|
||||
background: @thumbInvertedHoverBackground;
|
||||
}
|
||||
}
|
||||
.addScrollbars();
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Animating */
|
||||
.animating.dimmable:not(body),
|
||||
.dimmed.dimmable:not(body) {
|
||||
overflow: @overflow;
|
||||
}
|
||||
|
||||
/* Animating / Active / Visible */
|
||||
.dimmed.dimmable > .ui.animating.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.dimmer,
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: @visibleOpacity;
|
||||
}
|
||||
|
||||
& when (@variationDimmerDisabled) {
|
||||
/* Disabled */
|
||||
.ui.disabled.dimmer {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationDimmerLegacy) {
|
||||
/*--------------
|
||||
Legacy
|
||||
---------------*/
|
||||
|
||||
/* Animating / Active / Visible */
|
||||
.dimmed.dimmable > .ui.animating.legacy.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.legacy.dimmer,
|
||||
.ui.active.legacy.dimmer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerAligned) {
|
||||
/*--------------
|
||||
Alignment
|
||||
---------------*/
|
||||
|
||||
.ui[class*="top aligned"].dimmer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ui[class*="bottom aligned"].dimmer {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerPage) {
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
.ui.page.dimmer {
|
||||
position: @pageDimmerPosition;
|
||||
transform-style: @transformStyle;
|
||||
perspective: @perspective;
|
||||
transform-origin: center center;
|
||||
&.modals {
|
||||
-moz-perspective: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.animating.in.dimmable,
|
||||
body.dimmed.dimmable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dimmable > .dimmer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
& when (@variationDimmerBlurring) {
|
||||
/*--------------
|
||||
Blurring
|
||||
---------------*/
|
||||
|
||||
.blurring.dimmable > :not(.dimmer) {
|
||||
filter: @blurredStartFilter;
|
||||
transition: @blurredTransition;
|
||||
}
|
||||
.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
|
||||
filter: @blurredEndFilter;
|
||||
}
|
||||
|
||||
/* Dimmer Color */
|
||||
.blurring.dimmable > .dimmer {
|
||||
background-color: @blurredBackgroundColor;
|
||||
}
|
||||
.blurring.dimmable > .inverted.dimmer {
|
||||
background-color: @blurredInvertedBackgroundColor;
|
||||
}
|
||||
}
|
||||
& when (@variationDimmerAligned) {
|
||||
/*--------------
|
||||
Aligned
|
||||
---------------*/
|
||||
|
||||
.ui.dimmer > .top.aligned.content > * {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.dimmer > .bottom.aligned.content > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerShades) {
|
||||
/*--------------
|
||||
Shades
|
||||
---------------*/
|
||||
|
||||
.medium.medium.medium.medium.medium.dimmer {
|
||||
background-color: @mediumBackgroundColor;
|
||||
}
|
||||
.light.light.light.light.light.dimmer {
|
||||
background-color: @lightBackgroundColor;
|
||||
}
|
||||
.very.light.light.light.light.dimmer {
|
||||
background-color: @veryLightBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.dimmer {
|
||||
background-color: @invertedBackgroundColor;
|
||||
}
|
||||
.ui.inverted.dimmer > .content,
|
||||
.ui.inverted.dimmer > .content > * {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
& when (@variationDimmerShades) {
|
||||
/*--------------
|
||||
Inverted Shades
|
||||
---------------*/
|
||||
|
||||
.medium.medium.medium.medium.medium.inverted.dimmer {
|
||||
background-color: @mediumInvertedBackgroundColor;
|
||||
}
|
||||
.light.light.light.light.light.inverted.dimmer {
|
||||
background-color: @lightInvertedBackgroundColor;
|
||||
}
|
||||
.very.light.light.light.light.inverted.dimmer {
|
||||
background-color: @veryLightInvertedBackgroundColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerSimple) {
|
||||
/*--------------
|
||||
Simple
|
||||
---------------*/
|
||||
|
||||
/* Displays without javascript */
|
||||
.ui.simple.dimmer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -100;
|
||||
background-color: @simpleStartBackgroundColor;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.dimmer {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @simpleEndBackgroundColor;
|
||||
z-index: @simpleZIndex;
|
||||
}
|
||||
|
||||
.ui.simple.inverted.dimmer {
|
||||
background-color: @simpleInvertedStartBackgroundColor;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.inverted.dimmer {
|
||||
background-color: @simpleInvertedEndBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationDimmerPartially) {
|
||||
/*--------------
|
||||
Partially
|
||||
----------------*/
|
||||
|
||||
.ui[class*="top dimmer"],
|
||||
.ui[class*="center dimmer"],
|
||||
.ui[class*="bottom dimmer"] {
|
||||
height: auto;
|
||||
}
|
||||
.ui[class*="bottom dimmer"] {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui[class*="center dimmer"] {
|
||||
top:50% !important;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
|
||||
.ui.segment > .ui.ui[class*="top dimmer"] {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="center dimmer"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="bottom dimmer"] {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].in {
|
||||
animation-name: fadeInUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].in {
|
||||
animation-name: fadeInDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].out {
|
||||
animation-name: fadeOutUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].out {
|
||||
animation-name: fadeOutDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].bounce.transition {
|
||||
animation-name: bounceCenter;
|
||||
}
|
||||
@keyframes fadeInUpCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40%);
|
||||
-webkit-transform: translateY(calc(-40% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDownCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60%);
|
||||
-webkit-transform: translateY(calc(-60% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutUpCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-45%);
|
||||
-webkit-transform: translateY(calc(-45% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutDownCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-55%);
|
||||
-webkit-transform: translateY(calc(-55% - .5px));
|
||||
}
|
||||
}
|
||||
@keyframes bounceCenter {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(calc(-50% - .5px));
|
||||
}
|
||||
40% {
|
||||
transform: translateY(calc(-50% - 30px));
|
||||
}
|
||||
60% {
|
||||
transform: translateY(calc(-50% - 15px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,160 +1,160 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Video
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'embed';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.embed {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: @background;
|
||||
padding-bottom: @widescreenRatio;
|
||||
}
|
||||
|
||||
/*-----------------
|
||||
Embedded Content
|
||||
------------------*/
|
||||
|
||||
.ui.embed iframe,
|
||||
.ui.embed embed,
|
||||
.ui.embed object {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*-----------------
|
||||
Embed
|
||||
------------------*/
|
||||
|
||||
.ui.embed > .embed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Placeholder
|
||||
---------------*/
|
||||
|
||||
.ui.embed > .placeholder {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @placeholderBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.embed > .icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
.ui.embed > .icon:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
content: '';
|
||||
background: @placeholderBackground;
|
||||
opacity: @placeholderBackgroundOpacity;
|
||||
transition: @placeholderBackgroundTransition;
|
||||
}
|
||||
.ui.embed > .icon:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
color: @iconColor;
|
||||
font-size: @iconSize;
|
||||
text-shadow: @iconShadow;
|
||||
transition: @iconTransition;
|
||||
z-index: @iconZIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.embed .icon:hover:after {
|
||||
background: @hoverPlaceholderBackground;
|
||||
opacity: @hoverPlaceholderBackgroundOpacity;
|
||||
}
|
||||
.ui.embed .icon:hover:before {
|
||||
color: @hoverIconColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.active.embed > .icon,
|
||||
.ui.active.embed > .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ui.active.embed > .embed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationEmbedRatio) {
|
||||
.ui.square.embed {
|
||||
padding-bottom: @squareRatio;
|
||||
}
|
||||
.ui[class*="4:3"].embed {
|
||||
padding-bottom: @standardRatio;
|
||||
}
|
||||
.ui[class*="16:9"].embed {
|
||||
padding-bottom: @widescreenRatio;
|
||||
}
|
||||
.ui[class*="21:9"].embed {
|
||||
padding-bottom: @ultraWidescreenRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Video
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'embed';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.embed {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: @background;
|
||||
padding-bottom: @widescreenRatio;
|
||||
}
|
||||
|
||||
/*-----------------
|
||||
Embedded Content
|
||||
------------------*/
|
||||
|
||||
.ui.embed iframe,
|
||||
.ui.embed embed,
|
||||
.ui.embed object {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*-----------------
|
||||
Embed
|
||||
------------------*/
|
||||
|
||||
.ui.embed > .embed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Placeholder
|
||||
---------------*/
|
||||
|
||||
.ui.embed > .placeholder {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @placeholderBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.embed > .icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
.ui.embed > .icon:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
content: '';
|
||||
background: @placeholderBackground;
|
||||
opacity: @placeholderBackgroundOpacity;
|
||||
transition: @placeholderBackgroundTransition;
|
||||
}
|
||||
.ui.embed > .icon:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
color: @iconColor;
|
||||
font-size: @iconSize;
|
||||
text-shadow: @iconShadow;
|
||||
transition: @iconTransition;
|
||||
z-index: @iconZIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.embed .icon:hover:after {
|
||||
background: @hoverPlaceholderBackground;
|
||||
opacity: @hoverPlaceholderBackgroundOpacity;
|
||||
}
|
||||
.ui.embed .icon:hover:before {
|
||||
color: @hoverIconColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.active.embed > .icon,
|
||||
.ui.active.embed > .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ui.active.embed > .embed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationEmbedRatio) {
|
||||
.ui.square.embed {
|
||||
padding-bottom: @squareRatio;
|
||||
}
|
||||
.ui[class*="4:3"].embed {
|
||||
padding-bottom: @standardRatio;
|
||||
}
|
||||
.ui[class*="16:9"].embed {
|
||||
padding-bottom: @widescreenRatio;
|
||||
}
|
||||
.ui[class*="21:9"].embed {
|
||||
padding-bottom: @ultraWidescreenRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,492 +1,492 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Nag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
'use strict';
|
||||
|
||||
$.isFunction = $.isFunction || function(obj) {
|
||||
return typeof obj === "function" && typeof obj.nodeType !== "number";
|
||||
};
|
||||
|
||||
window = (typeof window != 'undefined' && window.Math == Math)
|
||||
? window
|
||||
: (typeof self != 'undefined' && self.Math == Math)
|
||||
? self
|
||||
: Function('return this')()
|
||||
;
|
||||
|
||||
$.fn.nag = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
returnedValue
|
||||
;
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.nag.settings, parameters)
|
||||
: $.extend({}, $.fn.nag.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
namespace = settings.namespace,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = namespace + '-module',
|
||||
|
||||
$module = $(this),
|
||||
|
||||
$context = (settings.context)
|
||||
? $(settings.context)
|
||||
: $('body'),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
module
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing element');
|
||||
|
||||
$module
|
||||
.on('click' + eventNamespace, selector.close, module.dismiss)
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
|
||||
if(settings.detachable && $module.parent()[0] !== $context[0]) {
|
||||
$module
|
||||
.detach()
|
||||
.prependTo($context)
|
||||
;
|
||||
}
|
||||
|
||||
if(settings.displayTime > 0) {
|
||||
setTimeout(module.hide, settings.displayTime);
|
||||
}
|
||||
module.show();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying instance');
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if( module.should.show() && !$module.is(':visible') ) {
|
||||
module.debug('Showing nag', settings.animation.show);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideDown(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
module.debug('Showing nag', settings.animation.hide);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideUp(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
module.debug('Removing nag', settings.animation.hide);
|
||||
$module.remove();
|
||||
if (settings.onHide) {
|
||||
settings.onHide();
|
||||
}
|
||||
},
|
||||
|
||||
dismiss: function(event) {
|
||||
if(settings.storageMethod) {
|
||||
module.storage.set(settings.key, settings.value);
|
||||
}
|
||||
module.hide();
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
should: {
|
||||
show: function() {
|
||||
if(settings.persist) {
|
||||
module.debug('Persistent nag is set, can show nag');
|
||||
return true;
|
||||
}
|
||||
if( module.storage.get(settings.key) != settings.value.toString() ) {
|
||||
module.debug('Stored value is not set, can show nag', module.storage.get(settings.key));
|
||||
return true;
|
||||
}
|
||||
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key));
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
storageOptions: function() {
|
||||
var
|
||||
options = {}
|
||||
;
|
||||
if(settings.expires) {
|
||||
options.expires = settings.expires;
|
||||
}
|
||||
if(settings.domain) {
|
||||
options.domain = settings.domain;
|
||||
}
|
||||
if(settings.path) {
|
||||
options.path = settings.path;
|
||||
}
|
||||
return options;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
module.storage.remove(settings.key);
|
||||
},
|
||||
|
||||
storage: {
|
||||
set: function(key, value) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
window.localStorage.setItem(key, value);
|
||||
module.debug('Value stored using local storage', key, value);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
window.sessionStorage.setItem(key, value);
|
||||
module.debug('Value stored using session storage', key, value);
|
||||
}
|
||||
else if($.cookie !== undefined) {
|
||||
$.cookie(key, value, options);
|
||||
module.debug('Value stored using cookie', key, value, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
return;
|
||||
}
|
||||
},
|
||||
get: function(key, value) {
|
||||
var
|
||||
storedValue
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
storedValue = window.localStorage.getItem(key);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
storedValue = window.sessionStorage.getItem(key);
|
||||
}
|
||||
// get by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
storedValue = $.cookie(key);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
}
|
||||
if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
|
||||
storedValue = undefined;
|
||||
}
|
||||
return storedValue;
|
||||
},
|
||||
remove: function(key) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
window.sessionStorage.removeItem(key);
|
||||
}
|
||||
// store by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
$.removeCookie(key, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noStorage);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setting: function(name, value) {
|
||||
module.debug('Changing setting', name, value);
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, settings, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
if($.isPlainObject(settings[name])) {
|
||||
$.extend(true, settings[name], value);
|
||||
}
|
||||
else {
|
||||
settings[name] = value;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return settings[name];
|
||||
}
|
||||
},
|
||||
internal: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, module, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
module[name] = value;
|
||||
}
|
||||
else {
|
||||
return module[name];
|
||||
}
|
||||
},
|
||||
debug: function() {
|
||||
if(!settings.silent && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.debug.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
verbose: function() {
|
||||
if(!settings.silent && settings.verbose && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.verbose.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
if(!settings.silent) {
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||||
module.error.apply(console, arguments);
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
log: function(message) {
|
||||
var
|
||||
currentTime,
|
||||
executionTime,
|
||||
previousTime
|
||||
;
|
||||
if(settings.performance) {
|
||||
currentTime = new Date().getTime();
|
||||
previousTime = time || currentTime;
|
||||
executionTime = currentTime - previousTime;
|
||||
time = currentTime;
|
||||
performance.push({
|
||||
'Name' : message[0],
|
||||
'Arguments' : [].slice.call(message, 1) || '',
|
||||
'Element' : element,
|
||||
'Execution Time' : executionTime
|
||||
});
|
||||
}
|
||||
clearTimeout(module.performance.timer);
|
||||
module.performance.timer = setTimeout(module.performance.display, 500);
|
||||
},
|
||||
display: function() {
|
||||
var
|
||||
title = settings.name + ':',
|
||||
totalTime = 0
|
||||
;
|
||||
time = false;
|
||||
clearTimeout(module.performance.timer);
|
||||
$.each(performance, function(index, data) {
|
||||
totalTime += data['Execution Time'];
|
||||
});
|
||||
title += ' ' + totalTime + 'ms';
|
||||
if(moduleSelector) {
|
||||
title += ' \'' + moduleSelector + '\'';
|
||||
}
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||||
console.groupCollapsed(title);
|
||||
if(console.table) {
|
||||
console.table(performance);
|
||||
}
|
||||
else {
|
||||
$.each(performance, function(index, data) {
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||||
});
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
performance = [];
|
||||
}
|
||||
},
|
||||
invoke: function(query, passedArguments, context) {
|
||||
var
|
||||
object = instance,
|
||||
maxDepth,
|
||||
found,
|
||||
response
|
||||
;
|
||||
passedArguments = passedArguments || queryArguments;
|
||||
context = element || context;
|
||||
if(typeof query == 'string' && object !== undefined) {
|
||||
query = query.split(/[\. ]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function(depth, value) {
|
||||
var camelCaseValue = (depth != maxDepth)
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||||
object = object[camelCaseValue];
|
||||
}
|
||||
else if( object[camelCaseValue] !== undefined ) {
|
||||
found = object[camelCaseValue];
|
||||
return false;
|
||||
}
|
||||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||||
object = object[value];
|
||||
}
|
||||
else if( object[value] !== undefined ) {
|
||||
found = object[value];
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.error(error.method, query);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if ( $.isFunction( found ) ) {
|
||||
response = found.apply(context, passedArguments);
|
||||
}
|
||||
else if(found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if(Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
}
|
||||
else if(returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
}
|
||||
else if(response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
return found;
|
||||
}
|
||||
};
|
||||
|
||||
if(methodInvoked) {
|
||||
if(instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
}
|
||||
else {
|
||||
if(instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.nag.settings = {
|
||||
|
||||
name : 'Nag',
|
||||
|
||||
silent : false,
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : true,
|
||||
|
||||
namespace : 'Nag',
|
||||
|
||||
// allows cookie to be overridden
|
||||
persist : false,
|
||||
|
||||
// set to zero to require manually dismissal, otherwise hides on its own
|
||||
displayTime : 0,
|
||||
|
||||
animation : {
|
||||
show : 'slide',
|
||||
hide : 'slide'
|
||||
},
|
||||
|
||||
context : false,
|
||||
detachable : false,
|
||||
|
||||
expires : 30,
|
||||
domain : false,
|
||||
path : '/',
|
||||
|
||||
// type of storage to use
|
||||
storageMethod : 'cookie',
|
||||
|
||||
// value to store in dismissed localstorage/cookie
|
||||
key : 'nag',
|
||||
value : 'dismiss',
|
||||
|
||||
error: {
|
||||
noCookieStorage : '$.cookie is not included. A storage solution is required.',
|
||||
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
className : {
|
||||
bottom : 'bottom',
|
||||
fixed : 'fixed'
|
||||
},
|
||||
|
||||
selector : {
|
||||
close : '.close.icon'
|
||||
},
|
||||
|
||||
speed : 500,
|
||||
easing : 'easeOutQuad',
|
||||
|
||||
onHide: function() {}
|
||||
|
||||
};
|
||||
|
||||
// Adds easing
|
||||
$.extend( $.easing, {
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery, window, document );
|
||||
/*!
|
||||
* # Fomantic-UI - Nag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
'use strict';
|
||||
|
||||
$.isFunction = $.isFunction || function(obj) {
|
||||
return typeof obj === "function" && typeof obj.nodeType !== "number";
|
||||
};
|
||||
|
||||
window = (typeof window != 'undefined' && window.Math == Math)
|
||||
? window
|
||||
: (typeof self != 'undefined' && self.Math == Math)
|
||||
? self
|
||||
: Function('return this')()
|
||||
;
|
||||
|
||||
$.fn.nag = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
returnedValue
|
||||
;
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.nag.settings, parameters)
|
||||
: $.extend({}, $.fn.nag.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
namespace = settings.namespace,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = namespace + '-module',
|
||||
|
||||
$module = $(this),
|
||||
|
||||
$context = (settings.context)
|
||||
? $(settings.context)
|
||||
: $('body'),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
module
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing element');
|
||||
|
||||
$module
|
||||
.on('click' + eventNamespace, selector.close, module.dismiss)
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
|
||||
if(settings.detachable && $module.parent()[0] !== $context[0]) {
|
||||
$module
|
||||
.detach()
|
||||
.prependTo($context)
|
||||
;
|
||||
}
|
||||
|
||||
if(settings.displayTime > 0) {
|
||||
setTimeout(module.hide, settings.displayTime);
|
||||
}
|
||||
module.show();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying instance');
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if( module.should.show() && !$module.is(':visible') ) {
|
||||
module.debug('Showing nag', settings.animation.show);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideDown(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
module.debug('Showing nag', settings.animation.hide);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideUp(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
module.debug('Removing nag', settings.animation.hide);
|
||||
$module.remove();
|
||||
if (settings.onHide) {
|
||||
settings.onHide();
|
||||
}
|
||||
},
|
||||
|
||||
dismiss: function(event) {
|
||||
if(settings.storageMethod) {
|
||||
module.storage.set(settings.key, settings.value);
|
||||
}
|
||||
module.hide();
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
should: {
|
||||
show: function() {
|
||||
if(settings.persist) {
|
||||
module.debug('Persistent nag is set, can show nag');
|
||||
return true;
|
||||
}
|
||||
if( module.storage.get(settings.key) != settings.value.toString() ) {
|
||||
module.debug('Stored value is not set, can show nag', module.storage.get(settings.key));
|
||||
return true;
|
||||
}
|
||||
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key));
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
storageOptions: function() {
|
||||
var
|
||||
options = {}
|
||||
;
|
||||
if(settings.expires) {
|
||||
options.expires = settings.expires;
|
||||
}
|
||||
if(settings.domain) {
|
||||
options.domain = settings.domain;
|
||||
}
|
||||
if(settings.path) {
|
||||
options.path = settings.path;
|
||||
}
|
||||
return options;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
module.storage.remove(settings.key);
|
||||
},
|
||||
|
||||
storage: {
|
||||
set: function(key, value) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
window.localStorage.setItem(key, value);
|
||||
module.debug('Value stored using local storage', key, value);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
window.sessionStorage.setItem(key, value);
|
||||
module.debug('Value stored using session storage', key, value);
|
||||
}
|
||||
else if($.cookie !== undefined) {
|
||||
$.cookie(key, value, options);
|
||||
module.debug('Value stored using cookie', key, value, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
return;
|
||||
}
|
||||
},
|
||||
get: function(key, value) {
|
||||
var
|
||||
storedValue
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
storedValue = window.localStorage.getItem(key);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
storedValue = window.sessionStorage.getItem(key);
|
||||
}
|
||||
// get by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
storedValue = $.cookie(key);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
}
|
||||
if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
|
||||
storedValue = undefined;
|
||||
}
|
||||
return storedValue;
|
||||
},
|
||||
remove: function(key) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
window.sessionStorage.removeItem(key);
|
||||
}
|
||||
// store by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
$.removeCookie(key, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noStorage);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setting: function(name, value) {
|
||||
module.debug('Changing setting', name, value);
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, settings, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
if($.isPlainObject(settings[name])) {
|
||||
$.extend(true, settings[name], value);
|
||||
}
|
||||
else {
|
||||
settings[name] = value;
|
||||
}
|
||||
}
|
||||
else {
|
||||
return settings[name];
|
||||
}
|
||||
},
|
||||
internal: function(name, value) {
|
||||
if( $.isPlainObject(name) ) {
|
||||
$.extend(true, module, name);
|
||||
}
|
||||
else if(value !== undefined) {
|
||||
module[name] = value;
|
||||
}
|
||||
else {
|
||||
return module[name];
|
||||
}
|
||||
},
|
||||
debug: function() {
|
||||
if(!settings.silent && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.debug.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
verbose: function() {
|
||||
if(!settings.silent && settings.verbose && settings.debug) {
|
||||
if(settings.performance) {
|
||||
module.performance.log(arguments);
|
||||
}
|
||||
else {
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
|
||||
module.verbose.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
if(!settings.silent) {
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
|
||||
module.error.apply(console, arguments);
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
log: function(message) {
|
||||
var
|
||||
currentTime,
|
||||
executionTime,
|
||||
previousTime
|
||||
;
|
||||
if(settings.performance) {
|
||||
currentTime = new Date().getTime();
|
||||
previousTime = time || currentTime;
|
||||
executionTime = currentTime - previousTime;
|
||||
time = currentTime;
|
||||
performance.push({
|
||||
'Name' : message[0],
|
||||
'Arguments' : [].slice.call(message, 1) || '',
|
||||
'Element' : element,
|
||||
'Execution Time' : executionTime
|
||||
});
|
||||
}
|
||||
clearTimeout(module.performance.timer);
|
||||
module.performance.timer = setTimeout(module.performance.display, 500);
|
||||
},
|
||||
display: function() {
|
||||
var
|
||||
title = settings.name + ':',
|
||||
totalTime = 0
|
||||
;
|
||||
time = false;
|
||||
clearTimeout(module.performance.timer);
|
||||
$.each(performance, function(index, data) {
|
||||
totalTime += data['Execution Time'];
|
||||
});
|
||||
title += ' ' + totalTime + 'ms';
|
||||
if(moduleSelector) {
|
||||
title += ' \'' + moduleSelector + '\'';
|
||||
}
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
|
||||
console.groupCollapsed(title);
|
||||
if(console.table) {
|
||||
console.table(performance);
|
||||
}
|
||||
else {
|
||||
$.each(performance, function(index, data) {
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
|
||||
});
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
performance = [];
|
||||
}
|
||||
},
|
||||
invoke: function(query, passedArguments, context) {
|
||||
var
|
||||
object = instance,
|
||||
maxDepth,
|
||||
found,
|
||||
response
|
||||
;
|
||||
passedArguments = passedArguments || queryArguments;
|
||||
context = element || context;
|
||||
if(typeof query == 'string' && object !== undefined) {
|
||||
query = query.split(/[\. ]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function(depth, value) {
|
||||
var camelCaseValue = (depth != maxDepth)
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
|
||||
object = object[camelCaseValue];
|
||||
}
|
||||
else if( object[camelCaseValue] !== undefined ) {
|
||||
found = object[camelCaseValue];
|
||||
return false;
|
||||
}
|
||||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
|
||||
object = object[value];
|
||||
}
|
||||
else if( object[value] !== undefined ) {
|
||||
found = object[value];
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.error(error.method, query);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if ( $.isFunction( found ) ) {
|
||||
response = found.apply(context, passedArguments);
|
||||
}
|
||||
else if(found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if(Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
}
|
||||
else if(returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
}
|
||||
else if(response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
return found;
|
||||
}
|
||||
};
|
||||
|
||||
if(methodInvoked) {
|
||||
if(instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
}
|
||||
else {
|
||||
if(instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.nag.settings = {
|
||||
|
||||
name : 'Nag',
|
||||
|
||||
silent : false,
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : true,
|
||||
|
||||
namespace : 'Nag',
|
||||
|
||||
// allows cookie to be overridden
|
||||
persist : false,
|
||||
|
||||
// set to zero to require manually dismissal, otherwise hides on its own
|
||||
displayTime : 0,
|
||||
|
||||
animation : {
|
||||
show : 'slide',
|
||||
hide : 'slide'
|
||||
},
|
||||
|
||||
context : false,
|
||||
detachable : false,
|
||||
|
||||
expires : 30,
|
||||
domain : false,
|
||||
path : '/',
|
||||
|
||||
// type of storage to use
|
||||
storageMethod : 'cookie',
|
||||
|
||||
// value to store in dismissed localstorage/cookie
|
||||
key : 'nag',
|
||||
value : 'dismiss',
|
||||
|
||||
error: {
|
||||
noCookieStorage : '$.cookie is not included. A storage solution is required.',
|
||||
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
className : {
|
||||
bottom : 'bottom',
|
||||
fixed : 'fixed'
|
||||
},
|
||||
|
||||
selector : {
|
||||
close : '.close.icon'
|
||||
},
|
||||
|
||||
speed : 500,
|
||||
easing : 'easeOutQuad',
|
||||
|
||||
onHide: function() {}
|
||||
|
||||
};
|
||||
|
||||
// Adds easing
|
||||
$.extend( $.easing, {
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
|
@ -1,158 +1,158 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Nag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'nag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Nag
|
||||
*******************************/
|
||||
|
||||
.ui.nag {
|
||||
display: none;
|
||||
opacity: @opacity;
|
||||
position: @position;
|
||||
|
||||
top: @top;
|
||||
left: 0;
|
||||
z-index: @zIndex;
|
||||
|
||||
min-height: @minHeight;
|
||||
width: @width;
|
||||
|
||||
margin: @margin;
|
||||
padding: @padding;
|
||||
|
||||
background: @background;
|
||||
box-shadow: @boxShadow;
|
||||
|
||||
font-size: @fontSize;
|
||||
text-align: @textAlign;
|
||||
color: @color;
|
||||
|
||||
border-radius: @topBorderRadius;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
a.ui.nag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.nag > .title {
|
||||
display: inline-block;
|
||||
margin: @titleMargin;
|
||||
color: @titleColor;
|
||||
}
|
||||
|
||||
|
||||
.ui.nag > .close.icon {
|
||||
cursor: pointer;
|
||||
opacity: @closeOpacity;
|
||||
|
||||
position: absolute;
|
||||
top: @closeTop;
|
||||
right: @closeRight;
|
||||
|
||||
font-size: @closeSize;
|
||||
|
||||
margin: @closeMargin;
|
||||
color: @closeColor;
|
||||
transition: @closeTransition;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Hover */
|
||||
.ui.nag:hover {
|
||||
background: @nagHoverBackground;
|
||||
opacity: @nagHoverOpacity;
|
||||
}
|
||||
|
||||
.ui.nag .close:hover {
|
||||
opacity: @closeHoverOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Static
|
||||
---------------*/
|
||||
|
||||
.ui.overlay.nag {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fixed
|
||||
---------------*/
|
||||
|
||||
.ui.fixed.nag {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Bottom
|
||||
---------------*/
|
||||
|
||||
.ui.bottom.nags,
|
||||
.ui.bottom.nag {
|
||||
border-radius: @bottomBorderRadius;
|
||||
top: auto;
|
||||
bottom: @bottom;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
White
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.nags .nag,
|
||||
.ui.inverted.nag {
|
||||
background-color: @invertedBackground;
|
||||
color: @darkTextColor;
|
||||
}
|
||||
.ui.inverted.nags .nag .close,
|
||||
.ui.inverted.nags .nag .title,
|
||||
.ui.inverted.nag .close,
|
||||
.ui.inverted.nag .title {
|
||||
color: @lightTextColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.nags .nag {
|
||||
border-radius: @groupedBorderRadius !important;
|
||||
}
|
||||
.ui.nags .nag:last-child {
|
||||
border-radius: @topBorderRadius;
|
||||
}
|
||||
.ui.bottom.nags .nag:last-child {
|
||||
border-radius: @bottomBorderRadius;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Nag
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'nag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Nag
|
||||
*******************************/
|
||||
|
||||
.ui.nag {
|
||||
display: none;
|
||||
opacity: @opacity;
|
||||
position: @position;
|
||||
|
||||
top: @top;
|
||||
left: 0;
|
||||
z-index: @zIndex;
|
||||
|
||||
min-height: @minHeight;
|
||||
width: @width;
|
||||
|
||||
margin: @margin;
|
||||
padding: @padding;
|
||||
|
||||
background: @background;
|
||||
box-shadow: @boxShadow;
|
||||
|
||||
font-size: @fontSize;
|
||||
text-align: @textAlign;
|
||||
color: @color;
|
||||
|
||||
border-radius: @topBorderRadius;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
a.ui.nag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.nag > .title {
|
||||
display: inline-block;
|
||||
margin: @titleMargin;
|
||||
color: @titleColor;
|
||||
}
|
||||
|
||||
|
||||
.ui.nag > .close.icon {
|
||||
cursor: pointer;
|
||||
opacity: @closeOpacity;
|
||||
|
||||
position: absolute;
|
||||
top: @closeTop;
|
||||
right: @closeRight;
|
||||
|
||||
font-size: @closeSize;
|
||||
|
||||
margin: @closeMargin;
|
||||
color: @closeColor;
|
||||
transition: @closeTransition;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Hover */
|
||||
.ui.nag:hover {
|
||||
background: @nagHoverBackground;
|
||||
opacity: @nagHoverOpacity;
|
||||
}
|
||||
|
||||
.ui.nag .close:hover {
|
||||
opacity: @closeHoverOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Static
|
||||
---------------*/
|
||||
|
||||
.ui.overlay.nag {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fixed
|
||||
---------------*/
|
||||
|
||||
.ui.fixed.nag {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Bottom
|
||||
---------------*/
|
||||
|
||||
.ui.bottom.nags,
|
||||
.ui.bottom.nag {
|
||||
border-radius: @bottomBorderRadius;
|
||||
top: auto;
|
||||
bottom: @bottom;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
White
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.nags .nag,
|
||||
.ui.inverted.nag {
|
||||
background-color: @invertedBackground;
|
||||
color: @darkTextColor;
|
||||
}
|
||||
.ui.inverted.nags .nag .close,
|
||||
.ui.inverted.nags .nag .title,
|
||||
.ui.inverted.nag .close,
|
||||
.ui.inverted.nag .title {
|
||||
color: @lightTextColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.nags .nag {
|
||||
border-radius: @groupedBorderRadius !important;
|
||||
}
|
||||
.ui.nags .nag:last-child {
|
||||
border-radius: @topBorderRadius;
|
||||
}
|
||||
.ui.bottom.nags .nag:last-child {
|
||||
border-radius: @bottomBorderRadius;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,177 +1,177 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Rating
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'rating';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rating
|
||||
*******************************/
|
||||
|
||||
.ui.rating {
|
||||
display: inline-flex;
|
||||
white-space: @whiteSpace;
|
||||
vertical-align: @verticalAlign;
|
||||
}
|
||||
.ui.rating:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.rating .icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-weight: @normal;
|
||||
font-style: normal;
|
||||
flex: 1 0 auto;
|
||||
cursor: @iconCursor;
|
||||
width: @iconWidth;
|
||||
height: @iconHeight;
|
||||
transition: @iconTransition;
|
||||
line-height: 1;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Standard
|
||||
--------------------*/
|
||||
|
||||
/* Inactive Icon */
|
||||
.ui.rating .icon {
|
||||
background: @inactiveBackground;
|
||||
color: @inactiveColor;
|
||||
}
|
||||
|
||||
/* Active Icon */
|
||||
.ui.rating .active.icon {
|
||||
background: @activeBackground;
|
||||
color: @activeColor;
|
||||
}
|
||||
|
||||
/* Partially Active Icon */
|
||||
.ui.rating .icon.partial.active {
|
||||
background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Selected Icon */
|
||||
.ui.rating .icon.selected,
|
||||
.ui.rating .icon.selected.active,
|
||||
.ui.rating .icon.selected.partial.active {
|
||||
background: @selectedBackground;
|
||||
color: @selectedColor;
|
||||
background-clip: unset;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
-------------- */
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
.ui.@{color}.rating .active.icon {
|
||||
color: @l;
|
||||
text-shadow: 0px -@shadowWidth 0px @c,
|
||||
-@shadowWidth 0px 0px @c,
|
||||
0px @shadowWidth 0px @c,
|
||||
@shadowWidth 0px 0px @c;
|
||||
}
|
||||
.ui.@{color}.rating .icon.selected,
|
||||
.ui.@{color}.rating .icon.selected.active,
|
||||
.ui.@{color}.rating .icon.selected.partial.active {
|
||||
background: inherit;
|
||||
color: @lh;
|
||||
text-shadow: 0px -@shadowWidth 0px @h,
|
||||
-@shadowWidth 0px 0px @h,
|
||||
0px @shadowWidth 0px @h,
|
||||
@shadowWidth 0px 0px @h;
|
||||
|
||||
-webkit-text-stroke: unset;
|
||||
background-clip: unset;
|
||||
}
|
||||
.ui.@{color}.rating .icon.partial.active {
|
||||
background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
|
||||
text-shadow: none;
|
||||
-webkit-text-stroke: @c 0.78px;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationRatingDisabled) {
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
/* disabled rating */
|
||||
.ui.disabled.rating .icon {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
User Interactive
|
||||
--------------------*/
|
||||
|
||||
/* Selected Rating */
|
||||
.ui.rating.selected .active.icon {
|
||||
opacity: @interactiveActiveIconOpacity;
|
||||
}
|
||||
.ui.rating.selected .icon.selected,
|
||||
.ui.rating .icon.selected {
|
||||
opacity: @interactiveSelectedIconOpacity;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.rating {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRatingSizes = false) {
|
||||
each(@variationRatingSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.rating {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Rating
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'rating';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rating
|
||||
*******************************/
|
||||
|
||||
.ui.rating {
|
||||
display: inline-flex;
|
||||
white-space: @whiteSpace;
|
||||
vertical-align: @verticalAlign;
|
||||
}
|
||||
.ui.rating:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.rating .icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-weight: @normal;
|
||||
font-style: normal;
|
||||
flex: 1 0 auto;
|
||||
cursor: @iconCursor;
|
||||
width: @iconWidth;
|
||||
height: @iconHeight;
|
||||
transition: @iconTransition;
|
||||
line-height: 1;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Standard
|
||||
--------------------*/
|
||||
|
||||
/* Inactive Icon */
|
||||
.ui.rating .icon {
|
||||
background: @inactiveBackground;
|
||||
color: @inactiveColor;
|
||||
}
|
||||
|
||||
/* Active Icon */
|
||||
.ui.rating .active.icon {
|
||||
background: @activeBackground;
|
||||
color: @activeColor;
|
||||
}
|
||||
|
||||
/* Partially Active Icon */
|
||||
.ui.rating .icon.partial.active {
|
||||
background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Selected Icon */
|
||||
.ui.rating .icon.selected,
|
||||
.ui.rating .icon.selected.active,
|
||||
.ui.rating .icon.selected.partial.active {
|
||||
background: @selectedBackground;
|
||||
color: @selectedColor;
|
||||
background-clip: unset;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
-------------- */
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
.ui.@{color}.rating .active.icon {
|
||||
color: @l;
|
||||
text-shadow: 0px -@shadowWidth 0px @c,
|
||||
-@shadowWidth 0px 0px @c,
|
||||
0px @shadowWidth 0px @c,
|
||||
@shadowWidth 0px 0px @c;
|
||||
}
|
||||
.ui.@{color}.rating .icon.selected,
|
||||
.ui.@{color}.rating .icon.selected.active,
|
||||
.ui.@{color}.rating .icon.selected.partial.active {
|
||||
background: inherit;
|
||||
color: @lh;
|
||||
text-shadow: 0px -@shadowWidth 0px @h,
|
||||
-@shadowWidth 0px 0px @h,
|
||||
0px @shadowWidth 0px @h,
|
||||
@shadowWidth 0px 0px @h;
|
||||
|
||||
-webkit-text-stroke: unset;
|
||||
background-clip: unset;
|
||||
}
|
||||
.ui.@{color}.rating .icon.partial.active {
|
||||
background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
|
||||
text-shadow: none;
|
||||
-webkit-text-stroke: @c 0.78px;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationRatingDisabled) {
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
/* disabled rating */
|
||||
.ui.disabled.rating .icon {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
User Interactive
|
||||
--------------------*/
|
||||
|
||||
/* Selected Rating */
|
||||
.ui.rating.selected .active.icon {
|
||||
opacity: @interactiveActiveIconOpacity;
|
||||
}
|
||||
.ui.rating.selected .icon.selected,
|
||||
.ui.rating .icon.selected {
|
||||
opacity: @interactiveSelectedIconOpacity;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.rating {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationRatingSizes = false) {
|
||||
each(@variationRatingSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.rating {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,155 +1,155 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Shape
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'shape';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Shape
|
||||
*******************************/
|
||||
|
||||
.ui.shape {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: @display;
|
||||
perspective: @perspective;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
.ui.shape .side,
|
||||
.ui.shape .sides {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.ui.shape .side {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
|
||||
margin: @sideMargin !important;
|
||||
backface-visibility: @backfaceVisibility;
|
||||
}
|
||||
|
||||
.ui.shape .side * {
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationShapeCube) {
|
||||
.ui.cube.shape .side {
|
||||
min-width: @cubeSize;
|
||||
height: @cubeSize;
|
||||
|
||||
padding: @cubePadding;
|
||||
|
||||
background-color: @cubeBackground;
|
||||
color: @cubeTextColor;
|
||||
box-shadow: @cubeBoxShadow;
|
||||
}
|
||||
.ui.cube.shape .side > .content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
|
||||
text-align: @cubeTextAlign;
|
||||
user-select: text;
|
||||
}
|
||||
.ui.cube.shape .side > .content > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: @cubeFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationShapeText) {
|
||||
.ui.text.shape.animating .sides {
|
||||
position: static;
|
||||
}
|
||||
.ui.text.shape .side {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui.text.shape .side > * {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationShapeLoading) {
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
.ui.loading.shape {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Animating
|
||||
---------------*/
|
||||
|
||||
.ui.shape .animating.side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: @animatingZIndex;
|
||||
}
|
||||
.ui.shape .hidden.side {
|
||||
opacity: @hiddenSideOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
CSS
|
||||
---------------*/
|
||||
|
||||
.ui.shape.animating .sides {
|
||||
position: absolute;
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.shape.animating .side {
|
||||
transition: @sideTransition;
|
||||
}
|
||||
.ui.shape .animating.side *,
|
||||
.ui.shape.animating .side * {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.shape .active.side {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Shape
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'shape';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Shape
|
||||
*******************************/
|
||||
|
||||
.ui.shape {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
display: @display;
|
||||
perspective: @perspective;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
.ui.shape .side,
|
||||
.ui.shape .sides {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.ui.shape .side {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
|
||||
margin: @sideMargin !important;
|
||||
backface-visibility: @backfaceVisibility;
|
||||
}
|
||||
|
||||
.ui.shape .side * {
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
& when (@variationShapeCube) {
|
||||
.ui.cube.shape .side {
|
||||
min-width: @cubeSize;
|
||||
height: @cubeSize;
|
||||
|
||||
padding: @cubePadding;
|
||||
|
||||
background-color: @cubeBackground;
|
||||
color: @cubeTextColor;
|
||||
box-shadow: @cubeBoxShadow;
|
||||
}
|
||||
.ui.cube.shape .side > .content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
|
||||
text-align: @cubeTextAlign;
|
||||
user-select: text;
|
||||
}
|
||||
.ui.cube.shape .side > .content > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: @cubeFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationShapeText) {
|
||||
.ui.text.shape.animating .sides {
|
||||
position: static;
|
||||
}
|
||||
.ui.text.shape .side {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui.text.shape .side > * {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationShapeLoading) {
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
.ui.loading.shape {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Animating
|
||||
---------------*/
|
||||
|
||||
.ui.shape .animating.side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: @animatingZIndex;
|
||||
}
|
||||
.ui.shape .hidden.side {
|
||||
opacity: @hiddenSideOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
CSS
|
||||
---------------*/
|
||||
|
||||
.ui.shape.animating .sides {
|
||||
position: absolute;
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.shape.animating .side {
|
||||
transition: @sideTransition;
|
||||
}
|
||||
.ui.shape .animating.side *,
|
||||
.ui.shape.animating .side * {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.shape .active.side {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,408 +1,408 @@
|
|||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'slider';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
.ui.slider:not(.vertical):not(.checkbox) {
|
||||
width: 100%;
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
.ui.slider:not(.checkbox) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui.slider:not(.checkbox):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner {
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.ui.slider .inner:hover {
|
||||
cursor: @hoverPointer;
|
||||
}
|
||||
|
||||
.ui.slider .inner .track {
|
||||
position: absolute;
|
||||
border-radius: @trackBorderRadius;
|
||||
background-color: @trackColor;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner .track {
|
||||
width: 100%;
|
||||
height: @trackHeight;
|
||||
top: @trackPositionTop;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner .track-fill {
|
||||
position: absolute;
|
||||
border-radius: @trackFillBorderRadius;
|
||||
background-color: @trackFillColor;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner .track-fill {
|
||||
height: @trackFillHeight;
|
||||
top: @trackPositionTop;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner .thumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: @thumbHeight;
|
||||
width: @thumbHeight;
|
||||
background: @thumbBackground;
|
||||
border-radius: @thumbBorderRadius;
|
||||
box-shadow: @thumbShadow;
|
||||
transition: @thumbTransition;
|
||||
}
|
||||
|
||||
.ui.slider:not(.disabled) .inner .thumb:hover {
|
||||
cursor: @thumbHoverPointer;
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
.ui.slider:not(.disabled):focus .inner .thumb {
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationSliderDisabled) {
|
||||
/*--------------
|
||||
Disabled
|
||||
---------------*/
|
||||
|
||||
.ui.disabled.slider:not(.checkbox) {
|
||||
opacity: @disabledOpactiy;
|
||||
}
|
||||
|
||||
.ui.disabled.slider .inner:hover {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.disabled.slider .inner .track-fill {
|
||||
background: @disabledTrackFillColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderReversed) {
|
||||
/*--------------
|
||||
Reversed
|
||||
---------------*/
|
||||
|
||||
.ui.reversed.slider .inner .track-fill {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.reversed.slider:not(.vertical) .inner .thumb {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.reversed.vertical.slider .inner .thumb {
|
||||
left: @thumbVerticalSliderOffset;
|
||||
}
|
||||
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.labeled.reversed.slider > .labels .label {
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationSliderVertical) {
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.slider {
|
||||
height: 100%;
|
||||
width: @height;
|
||||
padding: @verticalPadding;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner .track {
|
||||
height: 100%;
|
||||
width: @trackHeight;
|
||||
left: @trackPositionTop;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner .track-fill {
|
||||
width: @trackFillHeight;
|
||||
left: @trackPositionTop;
|
||||
top: 0;
|
||||
}
|
||||
& when (@variationSliderReversed) {
|
||||
/* Vertical Reversed */
|
||||
.ui.vertical.reversed.slider .inner .thumb {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.reversed.slider .inner .track-fill {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderLabeled) {
|
||||
/*--------------
|
||||
Labeled
|
||||
---------------*/
|
||||
|
||||
.ui.labeled.slider > .labels {
|
||||
height: @labelHeight;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.labeled.slider:not(.vertical) > .labels {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.labeled.slider > .labels .label {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
& when (@variationSliderTicked) {
|
||||
.ui.labeled.ticked.slider > .labels .label:after {
|
||||
content: ' ';
|
||||
height: @labelHeight;
|
||||
width: @labelWidth;
|
||||
background: @labelColor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
.ui.labeled.ticked.slider > .labels .halftick.label:after {
|
||||
height: @labelHeight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderVertical) {
|
||||
/* Vertical Labels */
|
||||
|
||||
.ui.labeled.vertical.slider > .labels {
|
||||
width: @labelHeight;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.labeled.vertical.slider > .labels .label {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
.ui.labeled.vertical.slider > .labels .label:after {
|
||||
width: @labelHeight;
|
||||
height: @labelWidth;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
}
|
||||
.ui.labeled.vertical.slider > .labels .halftick.label:after {
|
||||
width: @labelHeight / 2;
|
||||
height: @labelWidth;
|
||||
}
|
||||
|
||||
& when (@variationSliderReversed) {
|
||||
/* Vertical Reversed Labels */
|
||||
.ui.labeled.vertical.reversed.slider > .labels .label {
|
||||
transform: translate(-100%, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.hover.slider .inner .thumb {
|
||||
opacity: @hoverVarOpacity;
|
||||
transition: @hoverOpacityTransition;
|
||||
}
|
||||
|
||||
.ui.hover.slider:not(.disabled):hover .inner .thumb, .ui.hover.slider:not(.disabled):focus .inner .thumb {
|
||||
opacity: @hoverVarHoverOpacity;
|
||||
}
|
||||
|
||||
|
||||
& when (@variationSliderInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.slider .inner .track-fill {
|
||||
background-color: @invertedTrackFillColor;
|
||||
}
|
||||
|
||||
.ui.inverted.slider .inner .track {
|
||||
background-color: @transparentWhite;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
/* Standard */
|
||||
.ui.@{color}.slider .inner .track-fill {
|
||||
background-color: @c;
|
||||
}
|
||||
& when (@variationSliderInverted) {
|
||||
.ui.@{color}.inverted.slider .inner .track-fill {
|
||||
background-color: @l;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderBasic) {
|
||||
/* Basic */
|
||||
.ui.@{color}.slider.basic .inner .thumb {
|
||||
background-color: @c;
|
||||
}
|
||||
.ui.@{color}.slider.basic .inner .thumb:hover,
|
||||
.ui.@{color}.slider.basic:focus .inner .thumb {
|
||||
background-color: @h;
|
||||
}
|
||||
& when (@variationSliderInverted) {
|
||||
/* Basic Inverted */
|
||||
.ui.@{color}.inverted.slider.basic .inner .thumb {
|
||||
background-color: @l;
|
||||
}
|
||||
.ui.@{color}.inverted.slider.basic .inner .thumb:hover,
|
||||
.ui.@{color}.inverted.slider.basic:focus .inner .thumb {
|
||||
background-color: @lh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
& when (@variationSliderBasic) {
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
/* Standard */
|
||||
.ui.slider.basic .inner .thumb {
|
||||
background-color: @trackFillColor;
|
||||
}
|
||||
.ui.slider.basic .inner .thumb:hover, .ui.slider.basic:focus .inner .thumb {
|
||||
background-color: @trackFillColorFocus;
|
||||
}
|
||||
|
||||
& when (@variationSliderInverted) {
|
||||
/*--------------
|
||||
Basic Inverted
|
||||
---------------*/
|
||||
|
||||
/* Standard */
|
||||
.ui.inverted.slider.basic .inner .thumb {
|
||||
background-color: @invertedTrackFillColor;
|
||||
}
|
||||
.ui.inverted.slider.basic .inner .thumb:hover, .ui.inverted.slider.basic:focus .inner .thumb {
|
||||
background-color: @invertedTrackFillColorFocus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
& when not (@variationSliderSizes = false) {
|
||||
each(@variationSliderSizes, {
|
||||
@h: @{value}Height;
|
||||
@th: @{value}TrackHeight;
|
||||
@tp: @{value}TrackPositionTop;
|
||||
@lh: @{value}LabelHeight;
|
||||
.ui.slider.@{value} .inner .thumb {
|
||||
height: @@h;
|
||||
width: @@h;
|
||||
}
|
||||
.ui.slider.@{value}:not(.vertical) .inner {
|
||||
height: @@h;
|
||||
}
|
||||
.ui.slider.@{value}:not(.vertical) .inner .track,
|
||||
.ui.slider.@{value}:not(.vertical) .inner .track-fill {
|
||||
height: @@th;
|
||||
top: @@tp;
|
||||
}
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels,
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
|
||||
height: @@lh;
|
||||
}
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
|
||||
height: @@lh / 2;
|
||||
}
|
||||
}
|
||||
& when (@variationSliderVertical) {
|
||||
/* Small Vertical */
|
||||
.ui.slider.@{value}.vertical .inner {
|
||||
width: @@h;
|
||||
}
|
||||
.ui.slider.@{value}.vertical .inner .track,
|
||||
.ui.slider.@{value}.vertical .inner .track-fill {
|
||||
width: @@th;
|
||||
left: @@tp;
|
||||
}
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.@{value}.labeled.vertical.slider> .labels,
|
||||
.ui.@{value}.labeled.vertical.slider> .labels .label:after {
|
||||
width: @@lh;
|
||||
}
|
||||
.ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
|
||||
width: @@lh / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'slider';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
.ui.slider:not(.vertical):not(.checkbox) {
|
||||
width: 100%;
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
.ui.slider:not(.checkbox) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui.slider:not(.checkbox):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner {
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.ui.slider .inner:hover {
|
||||
cursor: @hoverPointer;
|
||||
}
|
||||
|
||||
.ui.slider .inner .track {
|
||||
position: absolute;
|
||||
border-radius: @trackBorderRadius;
|
||||
background-color: @trackColor;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner .track {
|
||||
width: 100%;
|
||||
height: @trackHeight;
|
||||
top: @trackPositionTop;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner .track-fill {
|
||||
position: absolute;
|
||||
border-radius: @trackFillBorderRadius;
|
||||
background-color: @trackFillColor;
|
||||
}
|
||||
|
||||
.ui.slider:not(.vertical) .inner .track-fill {
|
||||
height: @trackFillHeight;
|
||||
top: @trackPositionTop;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.slider .inner .thumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: @thumbHeight;
|
||||
width: @thumbHeight;
|
||||
background: @thumbBackground;
|
||||
border-radius: @thumbBorderRadius;
|
||||
box-shadow: @thumbShadow;
|
||||
transition: @thumbTransition;
|
||||
}
|
||||
|
||||
.ui.slider:not(.disabled) .inner .thumb:hover {
|
||||
cursor: @thumbHoverPointer;
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
.ui.slider:not(.disabled):focus .inner .thumb {
|
||||
background: @thumbHoverBackground;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
& when (@variationSliderDisabled) {
|
||||
/*--------------
|
||||
Disabled
|
||||
---------------*/
|
||||
|
||||
.ui.disabled.slider:not(.checkbox) {
|
||||
opacity: @disabledOpactiy;
|
||||
}
|
||||
|
||||
.ui.disabled.slider .inner:hover {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.disabled.slider .inner .track-fill {
|
||||
background: @disabledTrackFillColor;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderReversed) {
|
||||
/*--------------
|
||||
Reversed
|
||||
---------------*/
|
||||
|
||||
.ui.reversed.slider .inner .track-fill {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.reversed.slider:not(.vertical) .inner .thumb {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.reversed.vertical.slider .inner .thumb {
|
||||
left: @thumbVerticalSliderOffset;
|
||||
}
|
||||
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.labeled.reversed.slider > .labels .label {
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationSliderVertical) {
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.slider {
|
||||
height: 100%;
|
||||
width: @height;
|
||||
padding: @verticalPadding;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner .track {
|
||||
height: 100%;
|
||||
width: @trackHeight;
|
||||
left: @trackPositionTop;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.slider .inner .track-fill {
|
||||
width: @trackFillHeight;
|
||||
left: @trackPositionTop;
|
||||
top: 0;
|
||||
}
|
||||
& when (@variationSliderReversed) {
|
||||
/* Vertical Reversed */
|
||||
.ui.vertical.reversed.slider .inner .thumb {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.reversed.slider .inner .track-fill {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderLabeled) {
|
||||
/*--------------
|
||||
Labeled
|
||||
---------------*/
|
||||
|
||||
.ui.labeled.slider > .labels {
|
||||
height: @labelHeight;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.labeled.slider:not(.vertical) > .labels {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.labeled.slider > .labels .label {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
& when (@variationSliderTicked) {
|
||||
.ui.labeled.ticked.slider > .labels .label:after {
|
||||
content: ' ';
|
||||
height: @labelHeight;
|
||||
width: @labelWidth;
|
||||
background: @labelColor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
.ui.labeled.ticked.slider > .labels .halftick.label:after {
|
||||
height: @labelHeight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderVertical) {
|
||||
/* Vertical Labels */
|
||||
|
||||
.ui.labeled.vertical.slider > .labels {
|
||||
width: @labelHeight;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.labeled.vertical.slider > .labels .label {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
.ui.labeled.vertical.slider > .labels .label:after {
|
||||
width: @labelHeight;
|
||||
height: @labelWidth;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
}
|
||||
.ui.labeled.vertical.slider > .labels .halftick.label:after {
|
||||
width: @labelHeight / 2;
|
||||
height: @labelWidth;
|
||||
}
|
||||
|
||||
& when (@variationSliderReversed) {
|
||||
/* Vertical Reversed Labels */
|
||||
.ui.labeled.vertical.reversed.slider > .labels .label {
|
||||
transform: translate(-100%, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.hover.slider .inner .thumb {
|
||||
opacity: @hoverVarOpacity;
|
||||
transition: @hoverOpacityTransition;
|
||||
}
|
||||
|
||||
.ui.hover.slider:not(.disabled):hover .inner .thumb, .ui.hover.slider:not(.disabled):focus .inner .thumb {
|
||||
opacity: @hoverVarHoverOpacity;
|
||||
}
|
||||
|
||||
|
||||
& when (@variationSliderInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.slider .inner .track-fill {
|
||||
background-color: @invertedTrackFillColor;
|
||||
}
|
||||
|
||||
.ui.inverted.slider .inner .track {
|
||||
background-color: @transparentWhite;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
each(@colors, {
|
||||
@color: replace(@key, '@', '');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
@h: @colors[@@color][hover];
|
||||
@lh: @colors[@@color][lightHover];
|
||||
|
||||
/* Standard */
|
||||
.ui.@{color}.slider .inner .track-fill {
|
||||
background-color: @c;
|
||||
}
|
||||
& when (@variationSliderInverted) {
|
||||
.ui.@{color}.inverted.slider .inner .track-fill {
|
||||
background-color: @l;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationSliderBasic) {
|
||||
/* Basic */
|
||||
.ui.@{color}.slider.basic .inner .thumb {
|
||||
background-color: @c;
|
||||
}
|
||||
.ui.@{color}.slider.basic .inner .thumb:hover,
|
||||
.ui.@{color}.slider.basic:focus .inner .thumb {
|
||||
background-color: @h;
|
||||
}
|
||||
& when (@variationSliderInverted) {
|
||||
/* Basic Inverted */
|
||||
.ui.@{color}.inverted.slider.basic .inner .thumb {
|
||||
background-color: @l;
|
||||
}
|
||||
.ui.@{color}.inverted.slider.basic .inner .thumb:hover,
|
||||
.ui.@{color}.inverted.slider.basic:focus .inner .thumb {
|
||||
background-color: @lh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
& when (@variationSliderBasic) {
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
/* Standard */
|
||||
.ui.slider.basic .inner .thumb {
|
||||
background-color: @trackFillColor;
|
||||
}
|
||||
.ui.slider.basic .inner .thumb:hover, .ui.slider.basic:focus .inner .thumb {
|
||||
background-color: @trackFillColorFocus;
|
||||
}
|
||||
|
||||
& when (@variationSliderInverted) {
|
||||
/*--------------
|
||||
Basic Inverted
|
||||
---------------*/
|
||||
|
||||
/* Standard */
|
||||
.ui.inverted.slider.basic .inner .thumb {
|
||||
background-color: @invertedTrackFillColor;
|
||||
}
|
||||
.ui.inverted.slider.basic .inner .thumb:hover, .ui.inverted.slider.basic:focus .inner .thumb {
|
||||
background-color: @invertedTrackFillColorFocus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
& when not (@variationSliderSizes = false) {
|
||||
each(@variationSliderSizes, {
|
||||
@h: @{value}Height;
|
||||
@th: @{value}TrackHeight;
|
||||
@tp: @{value}TrackPositionTop;
|
||||
@lh: @{value}LabelHeight;
|
||||
.ui.slider.@{value} .inner .thumb {
|
||||
height: @@h;
|
||||
width: @@h;
|
||||
}
|
||||
.ui.slider.@{value}:not(.vertical) .inner {
|
||||
height: @@h;
|
||||
}
|
||||
.ui.slider.@{value}:not(.vertical) .inner .track,
|
||||
.ui.slider.@{value}:not(.vertical) .inner .track-fill {
|
||||
height: @@th;
|
||||
top: @@tp;
|
||||
}
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels,
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
|
||||
height: @@lh;
|
||||
}
|
||||
.ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
|
||||
height: @@lh / 2;
|
||||
}
|
||||
}
|
||||
& when (@variationSliderVertical) {
|
||||
/* Small Vertical */
|
||||
.ui.slider.@{value}.vertical .inner {
|
||||
width: @@h;
|
||||
}
|
||||
.ui.slider.@{value}.vertical .inner .track,
|
||||
.ui.slider.@{value}.vertical .inner .track-fill {
|
||||
width: @@th;
|
||||
left: @@tp;
|
||||
}
|
||||
& when (@variationSliderLabeled) {
|
||||
.ui.@{value}.labeled.vertical.slider> .labels,
|
||||
.ui.@{value}.labeled.vertical.slider> .labels .label:after {
|
||||
width: @@lh;
|
||||
}
|
||||
.ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
|
||||
width: @@lh / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,74 +1,74 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Sticky
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'sticky';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Sticky
|
||||
*******************************/
|
||||
|
||||
.ui.sticky {
|
||||
position: static;
|
||||
transition: @transition;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Bound */
|
||||
.ui.sticky.bound {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Fixed */
|
||||
.ui.sticky.fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Bound/Fixed Position */
|
||||
.ui.sticky.bound.top,
|
||||
.ui.sticky.fixed.top {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
.ui.sticky.bound.bottom,
|
||||
.ui.sticky.fixed.bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.native.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Sticky
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'sticky';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Sticky
|
||||
*******************************/
|
||||
|
||||
.ui.sticky {
|
||||
position: static;
|
||||
transition: @transition;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Bound */
|
||||
.ui.sticky.bound {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Fixed */
|
||||
.ui.sticky.fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Bound/Fixed Position */
|
||||
.ui.sticky.bound.top,
|
||||
.ui.sticky.fixed.top {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
.ui.sticky.bound.bottom,
|
||||
.ui.sticky.fixed.bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.native.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,91 +1,91 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Tab
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'tab';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
UI Tabs
|
||||
*******************************/
|
||||
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.active,
|
||||
.ui.tab.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& when (@variationTabLoading) {
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
min-height: @loadingMinHeight;
|
||||
}
|
||||
.ui.tab.loading * {
|
||||
position: @loadingContentPosition !important;
|
||||
left: @loadingContentOffset !important;
|
||||
}
|
||||
|
||||
.ui.tab.loading:before,
|
||||
.ui.tab.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
.ui.tab.loading:after,
|
||||
.ui.tab.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: loader @loaderSpeed infinite linear;
|
||||
border: @loaderLineWidth solid @loaderLineColor;
|
||||
border-radius: @circularRadius;
|
||||
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Tab
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'tab';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
UI Tabs
|
||||
*******************************/
|
||||
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.active,
|
||||
.ui.tab.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& when (@variationTabLoading) {
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
min-height: @loadingMinHeight;
|
||||
}
|
||||
.ui.tab.loading * {
|
||||
position: @loadingContentPosition !important;
|
||||
left: @loadingContentOffset !important;
|
||||
}
|
||||
|
||||
.ui.tab.loading:before,
|
||||
.ui.tab.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
.ui.tab.loading:after,
|
||||
.ui.tab.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: loader @loaderSpeed infinite linear;
|
||||
border: @loaderLineWidth solid @loaderLineColor;
|
||||
border-radius: @circularRadius;
|
||||
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,82 +1,82 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Transition
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'transition';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Transitions
|
||||
*******************************/
|
||||
|
||||
.transition {
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: @transitionDefaultDuration;
|
||||
animation-timing-function: @transitionDefaultEasing;
|
||||
animation-fill-mode: @transitionDefaultFill;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Animating */
|
||||
.animating.transition {
|
||||
backface-visibility: @backfaceVisibility;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
& when (@variationTransitionLoading) {
|
||||
/* Loading */
|
||||
.loading.transition {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
left: -99999px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden */
|
||||
.hidden.transition {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Visible */
|
||||
.visible.transition {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
/* backface-visibility: @backfaceVisibility;
|
||||
transform: @use3DAcceleration;*/
|
||||
}
|
||||
|
||||
& when (@variationTransitionDisabled) {
|
||||
/* Disabled */
|
||||
.disabled.transition {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationTransitionLoading) {
|
||||
.looping.transition {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Transition
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'transition';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Transitions
|
||||
*******************************/
|
||||
|
||||
.transition {
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: @transitionDefaultDuration;
|
||||
animation-timing-function: @transitionDefaultEasing;
|
||||
animation-fill-mode: @transitionDefaultFill;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Animating */
|
||||
.animating.transition {
|
||||
backface-visibility: @backfaceVisibility;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
& when (@variationTransitionLoading) {
|
||||
/* Loading */
|
||||
.loading.transition {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
left: -99999px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden */
|
||||
.hidden.transition {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Visible */
|
||||
.visible.transition {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
/* backface-visibility: @backfaceVisibility;
|
||||
transform: @use3DAcceleration;*/
|
||||
}
|
||||
|
||||
& when (@variationTransitionDisabled) {
|
||||
/* Disabled */
|
||||
.disabled.transition {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
& when (@variationTransitionLoading) {
|
||||
.looping.transition {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,297 +1,297 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Ad
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Copyright 2013 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'ad';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Advertisement
|
||||
*******************************/
|
||||
|
||||
.ui.ad {
|
||||
display: block;
|
||||
overflow: @overflow;
|
||||
margin: @margin;
|
||||
}
|
||||
|
||||
.ui.ad:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.ad:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.ad iframe {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Common
|
||||
---------------*/
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Leaderboard */
|
||||
.ui.leaderboard.ad {
|
||||
width: 728px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdRectangle) {
|
||||
/* Medium Rectangle */
|
||||
.ui[class*="medium rectangle"].ad {
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Large Rectangle */
|
||||
.ui[class*="large rectangle"].ad {
|
||||
width: 336px;
|
||||
height: 280px;
|
||||
}
|
||||
/* Half Page */
|
||||
.ui[class*="half page"].ad {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdSquare) {
|
||||
/*--------------
|
||||
Square
|
||||
---------------*/
|
||||
|
||||
/* Square */
|
||||
.ui.square.ad {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Small Square */
|
||||
.ui[class*="small square"].ad {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdRectangle) {
|
||||
/*--------------
|
||||
Rectangle
|
||||
---------------*/
|
||||
|
||||
/* Small Rectangle */
|
||||
.ui[class*="small rectangle"].ad {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Vertical Rectangle */
|
||||
.ui[class*="vertical rectangle"].ad {
|
||||
width: 240px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdButton) {
|
||||
/*--------------
|
||||
Button
|
||||
---------------*/
|
||||
|
||||
.ui.button.ad {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
}
|
||||
& when (@variationAdSquare) {
|
||||
.ui[class*="square button"].ad {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
.ui[class*="small button"].ad {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdSkyscraper) {
|
||||
/*--------------
|
||||
Skyscrapers
|
||||
---------------*/
|
||||
|
||||
/* Skyscraper */
|
||||
.ui.skyscraper.ad {
|
||||
width: 120px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* Wide Skyscraper */
|
||||
.ui[class*="wide skyscraper"].ad {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdBanner) {
|
||||
/*--------------
|
||||
Banners
|
||||
---------------*/
|
||||
|
||||
/* Banner */
|
||||
.ui.banner.ad {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* Vertical Banner */
|
||||
.ui[class*="vertical banner"].ad {
|
||||
width: 120px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* Top Banner */
|
||||
.ui[class*="top banner"].ad {
|
||||
width: 930px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* Half Banner */
|
||||
.ui[class*="half banner"].ad {
|
||||
width: 234px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Boards
|
||||
---------------*/
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Leaderboard */
|
||||
.ui[class*="large leaderboard"].ad {
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdBillboard) {
|
||||
/* Billboard */
|
||||
.ui.billboard.ad {
|
||||
width: 970px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdPanorama) {
|
||||
/*--------------
|
||||
Panorama
|
||||
---------------*/
|
||||
|
||||
/* Panorama */
|
||||
.ui.panorama.ad {
|
||||
width: 980px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdNetboard) {
|
||||
/*--------------
|
||||
Netboard
|
||||
---------------*/
|
||||
|
||||
/* Netboard */
|
||||
.ui.netboard.ad {
|
||||
width: 580px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdMobile) {
|
||||
/*--------------
|
||||
Mobile
|
||||
---------------*/
|
||||
& when (@variationAdBanner) {
|
||||
/* Large Mobile Banner */
|
||||
.ui[class*="large mobile banner"].ad {
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Mobile Leaderboard */
|
||||
.ui[class*="mobile leaderboard"].ad {
|
||||
width: 320px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/* Mobile Sizes */
|
||||
.ui.mobile.ad {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.mobile.ad {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationAdCentered) {
|
||||
.ui.centered.ad {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
& when (@variationAdTest) {
|
||||
.ui.test.ad {
|
||||
position: relative;
|
||||
background: @testBackground;
|
||||
}
|
||||
.ui.test.ad:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
content: @testText;
|
||||
color: @testColor;
|
||||
font-size: @testFontSize;
|
||||
font-weight: @testFontWeight;
|
||||
}
|
||||
& when (@variationAdMobile) {
|
||||
.ui.mobile.test.ad:after {
|
||||
font-size: @testMobileFontSize;
|
||||
}
|
||||
}
|
||||
.ui.test.ad[data-text]:after {
|
||||
content: attr(data-text);
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Ad
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Copyright 2013 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'ad';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Advertisement
|
||||
*******************************/
|
||||
|
||||
.ui.ad {
|
||||
display: block;
|
||||
overflow: @overflow;
|
||||
margin: @margin;
|
||||
}
|
||||
|
||||
.ui.ad:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.ad:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.ad iframe {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Common
|
||||
---------------*/
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Leaderboard */
|
||||
.ui.leaderboard.ad {
|
||||
width: 728px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdRectangle) {
|
||||
/* Medium Rectangle */
|
||||
.ui[class*="medium rectangle"].ad {
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Large Rectangle */
|
||||
.ui[class*="large rectangle"].ad {
|
||||
width: 336px;
|
||||
height: 280px;
|
||||
}
|
||||
/* Half Page */
|
||||
.ui[class*="half page"].ad {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdSquare) {
|
||||
/*--------------
|
||||
Square
|
||||
---------------*/
|
||||
|
||||
/* Square */
|
||||
.ui.square.ad {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Small Square */
|
||||
.ui[class*="small square"].ad {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdRectangle) {
|
||||
/*--------------
|
||||
Rectangle
|
||||
---------------*/
|
||||
|
||||
/* Small Rectangle */
|
||||
.ui[class*="small rectangle"].ad {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Vertical Rectangle */
|
||||
.ui[class*="vertical rectangle"].ad {
|
||||
width: 240px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdButton) {
|
||||
/*--------------
|
||||
Button
|
||||
---------------*/
|
||||
|
||||
.ui.button.ad {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
}
|
||||
& when (@variationAdSquare) {
|
||||
.ui[class*="square button"].ad {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
.ui[class*="small button"].ad {
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdSkyscraper) {
|
||||
/*--------------
|
||||
Skyscrapers
|
||||
---------------*/
|
||||
|
||||
/* Skyscraper */
|
||||
.ui.skyscraper.ad {
|
||||
width: 120px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* Wide Skyscraper */
|
||||
.ui[class*="wide skyscraper"].ad {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdBanner) {
|
||||
/*--------------
|
||||
Banners
|
||||
---------------*/
|
||||
|
||||
/* Banner */
|
||||
.ui.banner.ad {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* Vertical Banner */
|
||||
.ui[class*="vertical banner"].ad {
|
||||
width: 120px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* Top Banner */
|
||||
.ui[class*="top banner"].ad {
|
||||
width: 930px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
/* Half Banner */
|
||||
.ui[class*="half banner"].ad {
|
||||
width: 234px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Boards
|
||||
---------------*/
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Leaderboard */
|
||||
.ui[class*="large leaderboard"].ad {
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdBillboard) {
|
||||
/* Billboard */
|
||||
.ui.billboard.ad {
|
||||
width: 970px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdPanorama) {
|
||||
/*--------------
|
||||
Panorama
|
||||
---------------*/
|
||||
|
||||
/* Panorama */
|
||||
.ui.panorama.ad {
|
||||
width: 980px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdNetboard) {
|
||||
/*--------------
|
||||
Netboard
|
||||
---------------*/
|
||||
|
||||
/* Netboard */
|
||||
.ui.netboard.ad {
|
||||
width: 580px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationAdMobile) {
|
||||
/*--------------
|
||||
Mobile
|
||||
---------------*/
|
||||
& when (@variationAdBanner) {
|
||||
/* Large Mobile Banner */
|
||||
.ui[class*="large mobile banner"].ad {
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
& when (@variationAdLeaderboard) {
|
||||
/* Mobile Leaderboard */
|
||||
.ui[class*="mobile leaderboard"].ad {
|
||||
width: 320px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/* Mobile Sizes */
|
||||
.ui.mobile.ad {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.mobile.ad {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationAdCentered) {
|
||||
.ui.centered.ad {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
& when (@variationAdTest) {
|
||||
.ui.test.ad {
|
||||
position: relative;
|
||||
background: @testBackground;
|
||||
}
|
||||
.ui.test.ad:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
content: @testText;
|
||||
color: @testColor;
|
||||
font-size: @testFontSize;
|
||||
font-weight: @testFontWeight;
|
||||
}
|
||||
& when (@variationAdMobile) {
|
||||
.ui.mobile.test.ad:after {
|
||||
font-size: @testMobileFontSize;
|
||||
}
|
||||
}
|
||||
.ui.test.ad[data-text]:after {
|
||||
content: attr(data-text);
|
||||
}
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,291 +1,291 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Comment
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'comment';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Comments
|
||||
---------------*/
|
||||
|
||||
.ui.comments {
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Comment
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment {
|
||||
position: relative;
|
||||
background: @commentBackground;
|
||||
margin: @commentMargin;
|
||||
padding: @commentPadding;
|
||||
border: @commentBorder;
|
||||
border-top: @commentDivider;
|
||||
line-height: @commentLineHeight;
|
||||
}
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: @firstCommentMargin;
|
||||
padding-top: @firstCommentPadding;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Nested Comments
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment > .comments {
|
||||
margin: @nestedCommentsMargin;
|
||||
padding: @nestedCommentsPadding;
|
||||
}
|
||||
.ui.comments .comment > .comments:before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ui.comments .comment > .comments .comment {
|
||||
border: @nestedCommentBorder;
|
||||
border-top: @nestedCommentDivider;
|
||||
background: @nestedCommentBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .avatar {
|
||||
display: @avatarDisplay;
|
||||
width: @avatarWidth;
|
||||
height: @avatarHeight;
|
||||
float: @avatarFloat;
|
||||
margin: @avatarMargin;
|
||||
}
|
||||
.ui.comments .comment img.avatar,
|
||||
.ui.comments .comment .avatar img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @avatarBorderRadius;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: block;
|
||||
}
|
||||
/* If there is an avatar move content over */
|
||||
.ui.comments .comment > .avatar ~ .content {
|
||||
margin-left: @contentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Author
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .author {
|
||||
font-size: @authorFontSize;
|
||||
color: @authorColor;
|
||||
font-weight: @authorFontWeight;
|
||||
}
|
||||
.ui.comments .comment a.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.comments .comment a.author:hover {
|
||||
color: @authorHoverColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Metadata
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .metadata {
|
||||
display: @metadataDisplay;
|
||||
margin-left: @metadataSpacing;
|
||||
color: @metadataColor;
|
||||
font-size: @metadataFontSize;
|
||||
}
|
||||
.ui.comments .comment .metadata > * {
|
||||
display: inline-block;
|
||||
margin: 0 @metadataContentSpacing 0 0;
|
||||
}
|
||||
.ui.comments .comment .metadata > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Comment Text
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: @textMargin;
|
||||
font-size: @textFontSize;
|
||||
word-wrap: @textWordWrap;
|
||||
color: @textColor;
|
||||
line-height: @textLineHeight;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
User Actions
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .actions {
|
||||
font-size: @actionFontSize;
|
||||
}
|
||||
.ui.comments .comment .actions a {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 @actionContentDistance 0 0;
|
||||
color: @actionLinkColor;
|
||||
}
|
||||
.ui.comments .comment .actions a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.comments .comment .actions a.active,
|
||||
.ui.comments .comment .actions a:hover {
|
||||
color: @actionLinkHoverColor;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Reply Form
|
||||
---------------------*/
|
||||
|
||||
.ui.comments > .reply.form {
|
||||
margin-top: @replyDistance;
|
||||
}
|
||||
.ui.comments .comment .reply.form {
|
||||
width: 100%;
|
||||
margin-top: @commentReplyDistance;
|
||||
}
|
||||
.ui.comments .reply.form textarea {
|
||||
font-size: @replyFontSize;
|
||||
height: @replyHeight;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
State
|
||||
*******************************/
|
||||
|
||||
.ui.collapsed.comments,
|
||||
.ui.comments .collapsed.comments,
|
||||
.ui.comments .collapsed.comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationCommentThreaded) {
|
||||
/*--------------------
|
||||
Threaded
|
||||
---------------------*/
|
||||
|
||||
.ui.threaded.comments .comment > .comments {
|
||||
margin: @threadedCommentMargin;
|
||||
padding: @threadedCommentPadding;
|
||||
box-shadow: @threadedCommentBoxShadow;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationCommentMinimal) {
|
||||
/*--------------------
|
||||
Minimal
|
||||
---------------------*/
|
||||
|
||||
.ui.minimal.comments .comment .actions {
|
||||
opacity: 0;
|
||||
position: @minimalActionPosition;
|
||||
top: @minimalActionTop;
|
||||
right: @minimalActionRight;
|
||||
left: @minimalActionLeft;
|
||||
transition: @minimalTransition;
|
||||
transition-delay: @minimalTransitionDelay;
|
||||
}
|
||||
.ui.minimal.comments .comment > .content:hover > .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.comments {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationCommentSizes = false) {
|
||||
each(@variationCommentSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.comments {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
& when (@variationCommentInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
.ui.inverted.comments .comment {
|
||||
background-color: @black;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment .author,
|
||||
.ui.inverted.comments .comment .text {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment .metadata,
|
||||
.ui.inverted.comments .comment .actions a {
|
||||
color: @invertedLightTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment a.author:hover,
|
||||
.ui.inverted.comments .comment .actions a.active,
|
||||
.ui.inverted.comments .comment .actions a:hover {
|
||||
color: @invertedHoveredTextColor;
|
||||
}
|
||||
& when (@variationCommentThreaded) {
|
||||
.ui.inverted.threaded.comments .comment > .comments {
|
||||
box-shadow: -1px 0 0 @solidWhiteBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Comment
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'comment';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Comments
|
||||
---------------*/
|
||||
|
||||
.ui.comments {
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Comment
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment {
|
||||
position: relative;
|
||||
background: @commentBackground;
|
||||
margin: @commentMargin;
|
||||
padding: @commentPadding;
|
||||
border: @commentBorder;
|
||||
border-top: @commentDivider;
|
||||
line-height: @commentLineHeight;
|
||||
}
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: @firstCommentMargin;
|
||||
padding-top: @firstCommentPadding;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Nested Comments
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment > .comments {
|
||||
margin: @nestedCommentsMargin;
|
||||
padding: @nestedCommentsPadding;
|
||||
}
|
||||
.ui.comments .comment > .comments:before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ui.comments .comment > .comments .comment {
|
||||
border: @nestedCommentBorder;
|
||||
border-top: @nestedCommentDivider;
|
||||
background: @nestedCommentBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .avatar {
|
||||
display: @avatarDisplay;
|
||||
width: @avatarWidth;
|
||||
height: @avatarHeight;
|
||||
float: @avatarFloat;
|
||||
margin: @avatarMargin;
|
||||
}
|
||||
.ui.comments .comment img.avatar,
|
||||
.ui.comments .comment .avatar img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @avatarBorderRadius;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: block;
|
||||
}
|
||||
/* If there is an avatar move content over */
|
||||
.ui.comments .comment > .avatar ~ .content {
|
||||
margin-left: @contentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Author
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .author {
|
||||
font-size: @authorFontSize;
|
||||
color: @authorColor;
|
||||
font-weight: @authorFontWeight;
|
||||
}
|
||||
.ui.comments .comment a.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.comments .comment a.author:hover {
|
||||
color: @authorHoverColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Metadata
|
||||
---------------*/
|
||||
|
||||
.ui.comments .comment .metadata {
|
||||
display: @metadataDisplay;
|
||||
margin-left: @metadataSpacing;
|
||||
color: @metadataColor;
|
||||
font-size: @metadataFontSize;
|
||||
}
|
||||
.ui.comments .comment .metadata > * {
|
||||
display: inline-block;
|
||||
margin: 0 @metadataContentSpacing 0 0;
|
||||
}
|
||||
.ui.comments .comment .metadata > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Comment Text
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: @textMargin;
|
||||
font-size: @textFontSize;
|
||||
word-wrap: @textWordWrap;
|
||||
color: @textColor;
|
||||
line-height: @textLineHeight;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
User Actions
|
||||
---------------------*/
|
||||
|
||||
.ui.comments .comment .actions {
|
||||
font-size: @actionFontSize;
|
||||
}
|
||||
.ui.comments .comment .actions a {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 @actionContentDistance 0 0;
|
||||
color: @actionLinkColor;
|
||||
}
|
||||
.ui.comments .comment .actions a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.comments .comment .actions a.active,
|
||||
.ui.comments .comment .actions a:hover {
|
||||
color: @actionLinkHoverColor;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Reply Form
|
||||
---------------------*/
|
||||
|
||||
.ui.comments > .reply.form {
|
||||
margin-top: @replyDistance;
|
||||
}
|
||||
.ui.comments .comment .reply.form {
|
||||
width: 100%;
|
||||
margin-top: @commentReplyDistance;
|
||||
}
|
||||
.ui.comments .reply.form textarea {
|
||||
font-size: @replyFontSize;
|
||||
height: @replyHeight;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
State
|
||||
*******************************/
|
||||
|
||||
.ui.collapsed.comments,
|
||||
.ui.comments .collapsed.comments,
|
||||
.ui.comments .collapsed.comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
& when (@variationCommentThreaded) {
|
||||
/*--------------------
|
||||
Threaded
|
||||
---------------------*/
|
||||
|
||||
.ui.threaded.comments .comment > .comments {
|
||||
margin: @threadedCommentMargin;
|
||||
padding: @threadedCommentPadding;
|
||||
box-shadow: @threadedCommentBoxShadow;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationCommentMinimal) {
|
||||
/*--------------------
|
||||
Minimal
|
||||
---------------------*/
|
||||
|
||||
.ui.minimal.comments .comment .actions {
|
||||
opacity: 0;
|
||||
position: @minimalActionPosition;
|
||||
top: @minimalActionTop;
|
||||
right: @minimalActionRight;
|
||||
left: @minimalActionLeft;
|
||||
transition: @minimalTransition;
|
||||
transition-delay: @minimalTransitionDelay;
|
||||
}
|
||||
.ui.minimal.comments .comment > .content:hover > .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.comments {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationCommentSizes = false) {
|
||||
each(@variationCommentSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.comments {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
& when (@variationCommentInverted) {
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
.ui.inverted.comments .comment {
|
||||
background-color: @black;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment .author,
|
||||
.ui.inverted.comments .comment .text {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment .metadata,
|
||||
.ui.inverted.comments .comment .actions a {
|
||||
color: @invertedLightTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.comments .comment a.author:hover,
|
||||
.ui.inverted.comments .comment .actions a.active,
|
||||
.ui.inverted.comments .comment .actions a:hover {
|
||||
color: @invertedHoveredTextColor;
|
||||
}
|
||||
& when (@variationCommentThreaded) {
|
||||
.ui.inverted.threaded.comments .comment > .comments {
|
||||
box-shadow: -1px 0 0 @solidWhiteBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,304 +1,304 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Feed
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'feed';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Activity Feed
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
margin: @margin;
|
||||
}
|
||||
.ui.feed:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.feed:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Event */
|
||||
.ui.feed > .event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: @eventWidth;
|
||||
padding: @eventPadding;
|
||||
margin: @eventMargin;
|
||||
background: @eventBackground;
|
||||
border-top: @eventDivider;
|
||||
}
|
||||
.ui.feed > .event:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.feed > .event:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Event Label */
|
||||
.ui.feed > .event > .label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: @labelWidth;
|
||||
height: @labelHeight;
|
||||
align-self: @labelAlignSelf;
|
||||
text-align: @labelTextAlign;
|
||||
}
|
||||
.ui.feed > .event > .label .icon {
|
||||
opacity: @iconLabelOpacity;
|
||||
font-size: @iconLabelSize;
|
||||
width: @iconLabelWidth;
|
||||
padding: @iconLabelPadding;
|
||||
background: @iconLabelBackground;
|
||||
border: @iconLabelBorder;
|
||||
border-radius: @iconLabelBorderRadius;
|
||||
color: @iconLabelColor;
|
||||
}
|
||||
.ui.feed > .event > .label img {
|
||||
width: @imageLabelWidth;
|
||||
height: @imageLabelHeight;
|
||||
border-radius: @imageLabelBorderRadius;
|
||||
}
|
||||
.ui.feed > .event > .label + .content {
|
||||
margin: @labeledContentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
/* Content */
|
||||
.ui.feed > .event > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
align-self: @contentAlignSelf;
|
||||
text-align: @contentTextAlign;
|
||||
word-wrap: @contentWordWrap;
|
||||
}
|
||||
.ui.feed > .event:last-child > .content {
|
||||
padding-bottom: @lastLabeledContentPadding;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.feed > .event > .content a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Date
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .date {
|
||||
margin: @dateMargin;
|
||||
padding: @datePadding;
|
||||
color: @dateColor;
|
||||
font-weight: @dateFontWeight;
|
||||
font-size: @dateFontSize;
|
||||
font-style: @dateFontStyle;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .summary {
|
||||
margin: @summaryMargin;
|
||||
font-size: @summaryFontSize;
|
||||
font-weight: @summaryFontWeight;
|
||||
color: @summaryColor;
|
||||
}
|
||||
|
||||
/* Summary Image */
|
||||
.ui.feed > .event > .content .summary img {
|
||||
display: inline-block;
|
||||
width: @summaryImageWidth;
|
||||
height: @summaryImageHeight;
|
||||
margin: @summaryImageMargin;
|
||||
border-radius: @summaryImageBorderRadius;
|
||||
vertical-align: @summaryImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
User
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .user {
|
||||
display: inline-block;
|
||||
font-weight: @userFontWeight;
|
||||
margin-right: @userDistance;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.feed > .event > .content .user img {
|
||||
margin: @userImageMargin;
|
||||
width: @userImageWidth;
|
||||
height: @userImageHeight;
|
||||
vertical-align: @userImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
Inline Date
|
||||
---------------*/
|
||||
|
||||
/* Date inside Summary */
|
||||
.ui.feed > .event > .content .summary > .date {
|
||||
display: @summaryDateDisplay;
|
||||
float: @summaryDateFloat;
|
||||
font-weight: @summaryDateFontWeight;
|
||||
font-size: @summaryDateFontSize;
|
||||
font-style: @summaryDateFontStyle;
|
||||
margin: @summaryDateMargin;
|
||||
padding: @summaryDatePadding;
|
||||
color: @summaryDateColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Extra Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .extra {
|
||||
margin: @extraMargin;
|
||||
background: @extraBackground;
|
||||
padding: @extraPadding;
|
||||
color: @extraColor;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.ui.feed > .event > .content .extra.images img {
|
||||
display: inline-block;
|
||||
margin: @extraImageMargin;
|
||||
width: @extraImageWidth;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.feed > .event > .content .extra.text {
|
||||
padding: @extraTextPadding;
|
||||
border-left: @extraTextPointer;
|
||||
font-size: @extraTextFontSize;
|
||||
max-width: @extraTextMaxWidth;
|
||||
line-height: @extraTextLineHeight;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Meta
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .meta {
|
||||
display: @metadataDisplay;
|
||||
font-size: @metadataFontSize;
|
||||
margin: @metadataMargin;
|
||||
background: @metadataBackground;
|
||||
border: @metadataBorder;
|
||||
border-radius: @metadataBorderRadius;
|
||||
box-shadow: @metadataBoxShadow;
|
||||
padding: @metadataPadding;
|
||||
color: @metadataColor;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta > * {
|
||||
position: relative;
|
||||
margin-left: @metadataElementSpacing;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > *:after {
|
||||
content: @metadataDivider;
|
||||
color: @metadataDividerColor;
|
||||
top: 0;
|
||||
left: @metadataDividerOffset;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta .like {
|
||||
color: @likeColor;
|
||||
transition: @likeTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .like:hover .icon {
|
||||
color: @likeHoverColor;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .active.like .icon {
|
||||
color: @likeActiveColor;
|
||||
}
|
||||
|
||||
/* First element */
|
||||
.ui.feed > .event > .content .meta > :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > :first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Action */
|
||||
.ui.feed > .event > .content .meta a,
|
||||
.ui.feed > .event > .content .meta > .icon {
|
||||
cursor: @metadataActionCursor;
|
||||
opacity: @metadataActionOpacity;
|
||||
color: @metadataActionColor;
|
||||
transition: @metadataActionTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta a:hover,
|
||||
.ui.feed > .event > .content .meta a:hover .icon,
|
||||
.ui.feed > .event > .content .meta > .icon:hover {
|
||||
color: @metadataActionHoverColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationFeedSizes = false) {
|
||||
each(@variationFeedSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.feed {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationFeedInverted) {
|
||||
/*------------------
|
||||
Inverted
|
||||
-------------------*/
|
||||
|
||||
.ui.inverted.feed > .event {
|
||||
background: @black;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .date,
|
||||
.ui.inverted.feed > .event > .content .meta .like {
|
||||
color: @invertedLightTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .summary,
|
||||
.ui.inverted.feed > .event > .content .extra.text {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .meta .like:hover {
|
||||
color: @invertedSelectedTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Feed
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'feed';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Activity Feed
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
margin: @margin;
|
||||
}
|
||||
.ui.feed:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.feed:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Event */
|
||||
.ui.feed > .event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: @eventWidth;
|
||||
padding: @eventPadding;
|
||||
margin: @eventMargin;
|
||||
background: @eventBackground;
|
||||
border-top: @eventDivider;
|
||||
}
|
||||
.ui.feed > .event:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.feed > .event:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Event Label */
|
||||
.ui.feed > .event > .label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: @labelWidth;
|
||||
height: @labelHeight;
|
||||
align-self: @labelAlignSelf;
|
||||
text-align: @labelTextAlign;
|
||||
}
|
||||
.ui.feed > .event > .label .icon {
|
||||
opacity: @iconLabelOpacity;
|
||||
font-size: @iconLabelSize;
|
||||
width: @iconLabelWidth;
|
||||
padding: @iconLabelPadding;
|
||||
background: @iconLabelBackground;
|
||||
border: @iconLabelBorder;
|
||||
border-radius: @iconLabelBorderRadius;
|
||||
color: @iconLabelColor;
|
||||
}
|
||||
.ui.feed > .event > .label img {
|
||||
width: @imageLabelWidth;
|
||||
height: @imageLabelHeight;
|
||||
border-radius: @imageLabelBorderRadius;
|
||||
}
|
||||
.ui.feed > .event > .label + .content {
|
||||
margin: @labeledContentMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
/* Content */
|
||||
.ui.feed > .event > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
align-self: @contentAlignSelf;
|
||||
text-align: @contentTextAlign;
|
||||
word-wrap: @contentWordWrap;
|
||||
}
|
||||
.ui.feed > .event:last-child > .content {
|
||||
padding-bottom: @lastLabeledContentPadding;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.feed > .event > .content a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Date
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .date {
|
||||
margin: @dateMargin;
|
||||
padding: @datePadding;
|
||||
color: @dateColor;
|
||||
font-weight: @dateFontWeight;
|
||||
font-size: @dateFontSize;
|
||||
font-style: @dateFontStyle;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .summary {
|
||||
margin: @summaryMargin;
|
||||
font-size: @summaryFontSize;
|
||||
font-weight: @summaryFontWeight;
|
||||
color: @summaryColor;
|
||||
}
|
||||
|
||||
/* Summary Image */
|
||||
.ui.feed > .event > .content .summary img {
|
||||
display: inline-block;
|
||||
width: @summaryImageWidth;
|
||||
height: @summaryImageHeight;
|
||||
margin: @summaryImageMargin;
|
||||
border-radius: @summaryImageBorderRadius;
|
||||
vertical-align: @summaryImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
User
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .user {
|
||||
display: inline-block;
|
||||
font-weight: @userFontWeight;
|
||||
margin-right: @userDistance;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.feed > .event > .content .user img {
|
||||
margin: @userImageMargin;
|
||||
width: @userImageWidth;
|
||||
height: @userImageHeight;
|
||||
vertical-align: @userImageVerticalAlign;
|
||||
}
|
||||
/*--------------
|
||||
Inline Date
|
||||
---------------*/
|
||||
|
||||
/* Date inside Summary */
|
||||
.ui.feed > .event > .content .summary > .date {
|
||||
display: @summaryDateDisplay;
|
||||
float: @summaryDateFloat;
|
||||
font-weight: @summaryDateFontWeight;
|
||||
font-size: @summaryDateFontSize;
|
||||
font-style: @summaryDateFontStyle;
|
||||
margin: @summaryDateMargin;
|
||||
padding: @summaryDatePadding;
|
||||
color: @summaryDateColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Extra Summary
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .extra {
|
||||
margin: @extraMargin;
|
||||
background: @extraBackground;
|
||||
padding: @extraPadding;
|
||||
color: @extraColor;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.ui.feed > .event > .content .extra.images img {
|
||||
display: inline-block;
|
||||
margin: @extraImageMargin;
|
||||
width: @extraImageWidth;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.feed > .event > .content .extra.text {
|
||||
padding: @extraTextPadding;
|
||||
border-left: @extraTextPointer;
|
||||
font-size: @extraTextFontSize;
|
||||
max-width: @extraTextMaxWidth;
|
||||
line-height: @extraTextLineHeight;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Meta
|
||||
---------------*/
|
||||
|
||||
.ui.feed > .event > .content .meta {
|
||||
display: @metadataDisplay;
|
||||
font-size: @metadataFontSize;
|
||||
margin: @metadataMargin;
|
||||
background: @metadataBackground;
|
||||
border: @metadataBorder;
|
||||
border-radius: @metadataBorderRadius;
|
||||
box-shadow: @metadataBoxShadow;
|
||||
padding: @metadataPadding;
|
||||
color: @metadataColor;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta > * {
|
||||
position: relative;
|
||||
margin-left: @metadataElementSpacing;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > *:after {
|
||||
content: @metadataDivider;
|
||||
color: @metadataDividerColor;
|
||||
top: 0;
|
||||
left: @metadataDividerOffset;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.feed > .event > .content .meta .like {
|
||||
color: @likeColor;
|
||||
transition: @likeTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .like:hover .icon {
|
||||
color: @likeHoverColor;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .active.like .icon {
|
||||
color: @likeActiveColor;
|
||||
}
|
||||
|
||||
/* First element */
|
||||
.ui.feed > .event > .content .meta > :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > :first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Action */
|
||||
.ui.feed > .event > .content .meta a,
|
||||
.ui.feed > .event > .content .meta > .icon {
|
||||
cursor: @metadataActionCursor;
|
||||
opacity: @metadataActionOpacity;
|
||||
color: @metadataActionColor;
|
||||
transition: @metadataActionTransition;
|
||||
}
|
||||
.ui.feed > .event > .content .meta a:hover,
|
||||
.ui.feed > .event > .content .meta a:hover .icon,
|
||||
.ui.feed > .event > .content .meta > .icon:hover {
|
||||
color: @metadataActionHoverColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
font-size: @medium;
|
||||
}
|
||||
& when not (@variationFeedSizes = false) {
|
||||
each(@variationFeedSizes, {
|
||||
@s: @@value;
|
||||
.ui.@{value}.feed {
|
||||
font-size: @s;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
& when (@variationFeedInverted) {
|
||||
/*------------------
|
||||
Inverted
|
||||
-------------------*/
|
||||
|
||||
.ui.inverted.feed > .event {
|
||||
background: @black;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .date,
|
||||
.ui.inverted.feed > .event > .content .meta .like {
|
||||
color: @invertedLightTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .summary,
|
||||
.ui.inverted.feed > .event > .content .extra.text {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
.ui.inverted.feed > .event > .content .meta .like:hover {
|
||||
color: @invertedSelectedTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,421 +1,421 @@
|
|||
/*!
|
||||
* # Fomantic-UI - Statistic
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'statistic';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Statistic
|
||||
*******************************/
|
||||
|
||||
/* Standalone */
|
||||
.ui.statistic {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.statistic + .ui.statistic {
|
||||
margin: 0 0 0 @horizontalSpacing;
|
||||
}
|
||||
|
||||
.ui.statistic:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.statistic:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Group
|
||||
*******************************/
|
||||
|
||||
/* Grouped */
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ui.statistics > .statistic {
|
||||
display: inline-flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: column;
|
||||
margin: @elementMargin;
|
||||
max-width: @elementMaxWidth;
|
||||
}
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
margin: @groupMargin;
|
||||
}
|
||||
|
||||
/* Clearing */
|
||||
.ui.statistics:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.statistics:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-family: @valueFont;
|
||||
font-size: @valueSize;
|
||||
font-weight: @valueFontWeight;
|
||||
line-height: @valueLineHeight;
|
||||
color: @valueColor;
|
||||
text-transform: @valueTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Label
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .label,
|
||||
.ui.statistic > .label {
|
||||
font-family: @labelFont;
|
||||
font-size: @labelSize;
|
||||
font-weight: @labelFontWeight;
|
||||
color: @labelColor;
|
||||
text-transform: @labelTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/* Top Label */
|
||||
.ui.statistics .statistic > .label ~ .value,
|
||||
.ui.statistic > .label ~ .value {
|
||||
margin-top: @topLabelDistance;
|
||||
}
|
||||
|
||||
/* Bottom Label */
|
||||
.ui.statistics .statistic > .value ~ .label,
|
||||
.ui.statistic > .value ~ .label {
|
||||
margin-top: @bottomLabelDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Icon Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value .icon,
|
||||
.ui.statistic > .value .icon {
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Text Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
line-height: @textValueLineHeight;
|
||||
min-height: @textValueMinHeight;
|
||||
font-weight: @textValueFontWeight;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value + .label,
|
||||
.ui.statistic > .text.value + .label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Image Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value img,
|
||||
.ui.statistic > .value img {
|
||||
max-height: @imageHeight;
|
||||
vertical-align: @imageVerticalAlign;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Count
|
||||
---------------*/
|
||||
|
||||
|
||||
.ui.ten.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.ten.statistics .statistic {
|
||||
min-width: @tenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.nine.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.nine.statistics .statistic {
|
||||
min-width: @nineColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.eight.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.eight.statistics .statistic {
|
||||
min-width: @eightColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.seven.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.seven.statistics .statistic {
|
||||
min-width: @sevenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.six.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.six.statistics .statistic {
|
||||
min-width: @sixColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.five.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.five.statistics .statistic {
|
||||
min-width: @fiveColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.four.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.four.statistics .statistic {
|
||||
min-width: @fourColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.three.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.three.statistics .statistic {
|
||||
min-width: @threeColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.two.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.two.statistics .statistic {
|
||||
min-width: @twoColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.one.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.one.statistics .statistic {
|
||||
min-width: @oneColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
& when (@variationStatisticHorizontal) {
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.horizontal.statistics {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: none;
|
||||
margin: @horizontalGroupElementMargin;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistic > .text.value,
|
||||
.ui.horizontal.statistics > .statistic > .text.value {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value .icon,
|
||||
.ui.horizontal.statistic > .value .icon {
|
||||
width: @iconWidth;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .label,
|
||||
.ui.horizontal.statistic > .label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 @horizontalLabelDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationStatisticInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.statistics .statistic > .value,
|
||||
.ui.inverted.statistic .value {
|
||||
color: @invertedValueColor;
|
||||
}
|
||||
.ui.inverted.statistics .statistic > .label,
|
||||
.ui.inverted.statistic .label {
|
||||
color: @invertedLabelColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
each(@colors,{
|
||||
@color: replace(@key,'@','');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
.ui.@{color}.statistics .statistic > .value,
|
||||
.ui.statistics .@{color}.statistic > .value,
|
||||
.ui.@{color}.statistic > .value {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationStatisticInverted) {
|
||||
.ui.inverted.@{color}.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.@{color}.statistic > .value,
|
||||
.ui.inverted.@{color}.statistic > .value {
|
||||
color: @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationStatisticFloated) {
|
||||
/*--------------
|
||||
Floated
|
||||
---------------*/
|
||||
|
||||
.ui[class*="left floated"].statistic {
|
||||
float: left;
|
||||
margin: @leftFloatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].statistic {
|
||||
float: right;
|
||||
margin: @rightFloatedMargin;
|
||||
}
|
||||
.ui.floated.statistic:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationStatisticStackable) {
|
||||
/*--------------
|
||||
Stackable
|
||||
---------------*/
|
||||
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.stackable.statistics {
|
||||
width: auto;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.statistics > .statistic {
|
||||
width: 100% !important;
|
||||
margin: 0 0 !important;
|
||||
padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
|
||||
/* Medium */
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-size: @valueSize;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
font-size: @horizontalValueSize;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
font-size: @textValueSize;
|
||||
}
|
||||
& when not (@variationStatisticSizes = false) {
|
||||
each(@variationStatisticSizes, {
|
||||
@s: @{value}ValueSize;
|
||||
@hs: @{value}HorizontalValueSize;
|
||||
@ts: @{value}TextValueSize;
|
||||
.ui.@{value}.statistics .statistic > .value,
|
||||
.ui.@{value}.statistic > .value {
|
||||
font-size: @@s;
|
||||
}
|
||||
.ui.@{value}.horizontal.statistics .statistic > .value,
|
||||
.ui.@{value}.horizontal.statistic > .value {
|
||||
font-size: @@hs;
|
||||
}
|
||||
.ui.@{value}.statistics .statistic > .text.value,
|
||||
.ui.@{value}.statistic > .text.value {
|
||||
font-size: @@ts;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
/*!
|
||||
* # Fomantic-UI - Statistic
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'view';
|
||||
@element : 'statistic';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Statistic
|
||||
*******************************/
|
||||
|
||||
/* Standalone */
|
||||
.ui.statistic {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: @margin;
|
||||
max-width: @maxWidth;
|
||||
}
|
||||
|
||||
.ui.statistic + .ui.statistic {
|
||||
margin: 0 0 0 @horizontalSpacing;
|
||||
}
|
||||
|
||||
.ui.statistic:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.statistic:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Group
|
||||
*******************************/
|
||||
|
||||
/* Grouped */
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ui.statistics > .statistic {
|
||||
display: inline-flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: column;
|
||||
margin: @elementMargin;
|
||||
max-width: @elementMaxWidth;
|
||||
}
|
||||
.ui.statistics {
|
||||
display: flex;
|
||||
margin: @groupMargin;
|
||||
}
|
||||
|
||||
/* Clearing */
|
||||
.ui.statistics:after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.statistics:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-family: @valueFont;
|
||||
font-size: @valueSize;
|
||||
font-weight: @valueFontWeight;
|
||||
line-height: @valueLineHeight;
|
||||
color: @valueColor;
|
||||
text-transform: @valueTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Label
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .label,
|
||||
.ui.statistic > .label {
|
||||
font-family: @labelFont;
|
||||
font-size: @labelSize;
|
||||
font-weight: @labelFontWeight;
|
||||
color: @labelColor;
|
||||
text-transform: @labelTextTransform;
|
||||
text-align: @textAlign;
|
||||
}
|
||||
|
||||
/* Top Label */
|
||||
.ui.statistics .statistic > .label ~ .value,
|
||||
.ui.statistic > .label ~ .value {
|
||||
margin-top: @topLabelDistance;
|
||||
}
|
||||
|
||||
/* Bottom Label */
|
||||
.ui.statistics .statistic > .value ~ .label,
|
||||
.ui.statistic > .value ~ .label {
|
||||
margin-top: @bottomLabelDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Icon Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value .icon,
|
||||
.ui.statistic > .value .icon {
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Text Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
line-height: @textValueLineHeight;
|
||||
min-height: @textValueMinHeight;
|
||||
font-weight: @textValueFontWeight;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value + .label,
|
||||
.ui.statistic > .text.value + .label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Image Value
|
||||
---------------*/
|
||||
|
||||
.ui.statistics .statistic > .value img,
|
||||
.ui.statistic > .value img {
|
||||
max-height: @imageHeight;
|
||||
vertical-align: @imageVerticalAlign;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Count
|
||||
---------------*/
|
||||
|
||||
|
||||
.ui.ten.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.ten.statistics .statistic {
|
||||
min-width: @tenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.nine.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.nine.statistics .statistic {
|
||||
min-width: @nineColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.eight.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.eight.statistics .statistic {
|
||||
min-width: @eightColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.seven.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.seven.statistics .statistic {
|
||||
min-width: @sevenColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.six.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.six.statistics .statistic {
|
||||
min-width: @sixColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.five.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.five.statistics .statistic {
|
||||
min-width: @fiveColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.four.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.four.statistics .statistic {
|
||||
min-width: @fourColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.three.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.three.statistics .statistic {
|
||||
min-width: @threeColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.two.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.two.statistics .statistic {
|
||||
min-width: @twoColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
.ui.one.statistics {
|
||||
margin: @itemGroupMargin;
|
||||
}
|
||||
.ui.one.statistics .statistic {
|
||||
min-width: @oneColumn;
|
||||
margin: @itemMargin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
& when (@variationStatisticHorizontal) {
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.horizontal.statistics {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: none;
|
||||
margin: @horizontalGroupElementMargin;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistic > .text.value,
|
||||
.ui.horizontal.statistics > .statistic > .text.value {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value .icon,
|
||||
.ui.horizontal.statistic > .value .icon {
|
||||
width: @iconWidth;
|
||||
}
|
||||
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .label,
|
||||
.ui.horizontal.statistic > .label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 @horizontalLabelDistance;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationStatisticInverted) {
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.statistics .statistic > .value,
|
||||
.ui.inverted.statistic .value {
|
||||
color: @invertedValueColor;
|
||||
}
|
||||
.ui.inverted.statistics .statistic > .label,
|
||||
.ui.inverted.statistic .label {
|
||||
color: @invertedLabelColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
each(@colors,{
|
||||
@color: replace(@key,'@','');
|
||||
@c: @colors[@@color][color];
|
||||
@l: @colors[@@color][light];
|
||||
|
||||
.ui.@{color}.statistics .statistic > .value,
|
||||
.ui.statistics .@{color}.statistic > .value,
|
||||
.ui.@{color}.statistic > .value {
|
||||
color: @c;
|
||||
}
|
||||
& when (@variationStatisticInverted) {
|
||||
.ui.inverted.@{color}.statistics .statistic > .value,
|
||||
.ui.statistics .inverted.@{color}.statistic > .value,
|
||||
.ui.inverted.@{color}.statistic > .value {
|
||||
color: @l;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
& when (@variationStatisticFloated) {
|
||||
/*--------------
|
||||
Floated
|
||||
---------------*/
|
||||
|
||||
.ui[class*="left floated"].statistic {
|
||||
float: left;
|
||||
margin: @leftFloatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].statistic {
|
||||
float: right;
|
||||
margin: @rightFloatedMargin;
|
||||
}
|
||||
.ui.floated.statistic:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@variationStatisticStackable) {
|
||||
/*--------------
|
||||
Stackable
|
||||
---------------*/
|
||||
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.stackable.statistics {
|
||||
width: auto;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.statistics > .statistic {
|
||||
width: 100% !important;
|
||||
margin: 0 0 !important;
|
||||
padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
|
||||
/* Medium */
|
||||
.ui.statistics .statistic > .value,
|
||||
.ui.statistic > .value {
|
||||
font-size: @valueSize;
|
||||
}
|
||||
.ui.horizontal.statistics .statistic > .value,
|
||||
.ui.horizontal.statistic > .value {
|
||||
font-size: @horizontalValueSize;
|
||||
}
|
||||
.ui.statistics .statistic > .text.value,
|
||||
.ui.statistic > .text.value {
|
||||
font-size: @textValueSize;
|
||||
}
|
||||
& when not (@variationStatisticSizes = false) {
|
||||
each(@variationStatisticSizes, {
|
||||
@s: @{value}ValueSize;
|
||||
@hs: @{value}HorizontalValueSize;
|
||||
@ts: @{value}TextValueSize;
|
||||
.ui.@{value}.statistics .statistic > .value,
|
||||
.ui.@{value}.statistic > .value {
|
||||
font-size: @@s;
|
||||
}
|
||||
.ui.@{value}.horizontal.statistics .statistic > .value,
|
||||
.ui.@{value}.horizontal.statistic > .value {
|
||||
font-size: @@hs;
|
||||
}
|
||||
.ui.@{value}.statistics .statistic > .text.value,
|
||||
.ui.@{value}.statistic > .text.value {
|
||||
font-size: @@ts;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
|
@ -1,72 +1,72 @@
|
|||
/*
|
||||
|
||||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
|
||||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
|
||||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
|
||||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
|
||||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
|
||||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
|
||||
|
||||
Import this file into your LESS project to use Fomantic-UI without build tools
|
||||
*/
|
||||
|
||||
/* Global */
|
||||
& { @import "definitions/globals/reset"; }
|
||||
& { @import "definitions/globals/site"; }
|
||||
|
||||
/* Elements */
|
||||
& { @import "definitions/elements/button"; }
|
||||
& { @import "definitions/elements/container"; }
|
||||
& { @import "definitions/elements/divider"; }
|
||||
& { @import "definitions/elements/emoji"; }
|
||||
& { @import "definitions/elements/flag"; }
|
||||
& { @import "definitions/elements/header"; }
|
||||
& { @import "definitions/elements/icon"; }
|
||||
& { @import "definitions/elements/image"; }
|
||||
& { @import "definitions/elements/input"; }
|
||||
& { @import "definitions/elements/label"; }
|
||||
& { @import "definitions/elements/list"; }
|
||||
& { @import "definitions/elements/loader"; }
|
||||
& { @import "definitions/elements/placeholder"; }
|
||||
& { @import "definitions/elements/rail"; }
|
||||
& { @import "definitions/elements/reveal"; }
|
||||
& { @import "definitions/elements/segment"; }
|
||||
& { @import "definitions/elements/step"; }
|
||||
& { @import "definitions/elements/text"; }
|
||||
|
||||
/* Collections */
|
||||
& { @import "definitions/collections/breadcrumb"; }
|
||||
& { @import "definitions/collections/form"; }
|
||||
& { @import "definitions/collections/grid"; }
|
||||
& { @import "definitions/collections/menu"; }
|
||||
& { @import "definitions/collections/message"; }
|
||||
& { @import "definitions/collections/table"; }
|
||||
|
||||
/* Views */
|
||||
& { @import "definitions/views/ad"; }
|
||||
& { @import "definitions/views/card"; }
|
||||
& { @import "definitions/views/comment"; }
|
||||
& { @import "definitions/views/feed"; }
|
||||
& { @import "definitions/views/item"; }
|
||||
& { @import "definitions/views/statistic"; }
|
||||
|
||||
/* Modules */
|
||||
& { @import "definitions/modules/accordion"; }
|
||||
& { @import "definitions/modules/calendar"; }
|
||||
& { @import "definitions/modules/checkbox"; }
|
||||
& { @import "definitions/modules/dimmer"; }
|
||||
& { @import "definitions/modules/dropdown"; }
|
||||
& { @import "definitions/modules/embed"; }
|
||||
& { @import "definitions/modules/modal"; }
|
||||
& { @import "definitions/modules/nag"; }
|
||||
& { @import "definitions/modules/popup"; }
|
||||
& { @import "definitions/modules/progress"; }
|
||||
& { @import "definitions/modules/slider"; }
|
||||
& { @import "definitions/modules/rating"; }
|
||||
& { @import "definitions/modules/search"; }
|
||||
& { @import "definitions/modules/shape"; }
|
||||
& { @import "definitions/modules/sidebar"; }
|
||||
& { @import "definitions/modules/sticky"; }
|
||||
& { @import "definitions/modules/tab"; }
|
||||
& { @import "definitions/modules/toast"; }
|
||||
& { @import "definitions/modules/transition"; }
|
||||
/*
|
||||
|
||||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
|
||||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
|
||||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
|
||||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
|
||||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
|
||||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
|
||||
|
||||
Import this file into your LESS project to use Fomantic-UI without build tools
|
||||
*/
|
||||
|
||||
/* Global */
|
||||
& { @import "definitions/globals/reset"; }
|
||||
& { @import "definitions/globals/site"; }
|
||||
|
||||
/* Elements */
|
||||
& { @import "definitions/elements/button"; }
|
||||
& { @import "definitions/elements/container"; }
|
||||
& { @import "definitions/elements/divider"; }
|
||||
& { @import "definitions/elements/emoji"; }
|
||||
& { @import "definitions/elements/flag"; }
|
||||
& { @import "definitions/elements/header"; }
|
||||
& { @import "definitions/elements/icon"; }
|
||||
& { @import "definitions/elements/image"; }
|
||||
& { @import "definitions/elements/input"; }
|
||||
& { @import "definitions/elements/label"; }
|
||||
& { @import "definitions/elements/list"; }
|
||||
& { @import "definitions/elements/loader"; }
|
||||
& { @import "definitions/elements/placeholder"; }
|
||||
& { @import "definitions/elements/rail"; }
|
||||
& { @import "definitions/elements/reveal"; }
|
||||
& { @import "definitions/elements/segment"; }
|
||||
& { @import "definitions/elements/step"; }
|
||||
& { @import "definitions/elements/text"; }
|
||||
|
||||
/* Collections */
|
||||
& { @import "definitions/collections/breadcrumb"; }
|
||||
& { @import "definitions/collections/form"; }
|
||||
& { @import "definitions/collections/grid"; }
|
||||
& { @import "definitions/collections/menu"; }
|
||||
& { @import "definitions/collections/message"; }
|
||||
& { @import "definitions/collections/table"; }
|
||||
|
||||
/* Views */
|
||||
& { @import "definitions/views/ad"; }
|
||||
& { @import "definitions/views/card"; }
|
||||
& { @import "definitions/views/comment"; }
|
||||
& { @import "definitions/views/feed"; }
|
||||
& { @import "definitions/views/item"; }
|
||||
& { @import "definitions/views/statistic"; }
|
||||
|
||||
/* Modules */
|
||||
& { @import "definitions/modules/accordion"; }
|
||||
& { @import "definitions/modules/calendar"; }
|
||||
& { @import "definitions/modules/checkbox"; }
|
||||
& { @import "definitions/modules/dimmer"; }
|
||||
& { @import "definitions/modules/dropdown"; }
|
||||
& { @import "definitions/modules/embed"; }
|
||||
& { @import "definitions/modules/modal"; }
|
||||
& { @import "definitions/modules/nag"; }
|
||||
& { @import "definitions/modules/popup"; }
|
||||
& { @import "definitions/modules/progress"; }
|
||||
& { @import "definitions/modules/slider"; }
|
||||
& { @import "definitions/modules/rating"; }
|
||||
& { @import "definitions/modules/search"; }
|
||||
& { @import "definitions/modules/shape"; }
|
||||
& { @import "definitions/modules/sidebar"; }
|
||||
& { @import "definitions/modules/sticky"; }
|
||||
& { @import "definitions/modules/tab"; }
|
||||
& { @import "definitions/modules/toast"; }
|
||||
& { @import "definitions/modules/transition"; }
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/form.overrides
Normal file
3
assets/semantic/src/site/collections/form.overrides
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/grid.overrides
Normal file
3
assets/semantic/src/site/collections/grid.overrides
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/grid.variables
Normal file
3
assets/semantic/src/site/collections/grid.variables
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/menu.variables
Normal file
3
assets/semantic/src/site/collections/menu.variables
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/message.variables
Normal file
3
assets/semantic/src/site/collections/message.variables
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
/*******************************
|
||||
Overrides
|
||||
*******************************/
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/collections/table.variables
Normal file
3
assets/semantic/src/site/collections/table.variables
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/elements/button.overrides
Normal file
3
assets/semantic/src/site/elements/button.overrides
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/elements/button.variables
Normal file
3
assets/semantic/src/site/elements/button.variables
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
3
assets/semantic/src/site/elements/container.overrides
Normal file
3
assets/semantic/src/site/elements/container.overrides
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue