Compare commits
3 Commits
1b14a8fd31
...
5975ab6d68
| Author | SHA1 | Date | |
|---|---|---|---|
|
5975ab6d68 | ||
|
|
3d6e527e3a | ||
|
|
88a0c7b26a |
13
client/package-lock.json
generated
13
client/package-lock.json
generated
@ -4132,6 +4132,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"fomantic-ui-css": {
|
||||||
|
"version": "2.8.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/fomantic-ui-css/-/fomantic-ui-css-2.8.4.tgz",
|
||||||
|
"integrity": "sha512-4j8BgxDZQnn66v1ia2nMlqBinxtZxdO1DdvWxUNiZ0ZVd6s02bpTTz3I8F7MiYUyGi4NAXfZD8UQgslL6jCzxw==",
|
||||||
|
"requires": {
|
||||||
|
"jquery": "^3.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"for-in": {
|
"for-in": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||||
@ -5638,6 +5646,11 @@
|
|||||||
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
|
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"jquery": {
|
||||||
|
"version": "3.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
|
||||||
|
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
|
||||||
|
},
|
||||||
"js-base64": {
|
"js-base64": {
|
||||||
"version": "2.5.2",
|
"version": "2.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"es6-promise": "^4.2.8",
|
"es6-promise": "^4.2.8",
|
||||||
|
"fomantic-ui-css": "^2.8.4",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vuex": "^3.1.3"
|
"vuex": "^3.1.3"
|
||||||
|
|||||||
@ -1,72 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Set-up
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
var
|
|
||||||
gulp = require('gulp-help')(require('gulp')),
|
|
||||||
|
|
||||||
// read user config to know what task to load
|
|
||||||
config = require('./tasks/config/user'),
|
|
||||||
|
|
||||||
// watch changes
|
|
||||||
watch = require('./tasks/watch'),
|
|
||||||
|
|
||||||
// build all files
|
|
||||||
build = require('./tasks/build'),
|
|
||||||
buildJS = require('./tasks/build/javascript'),
|
|
||||||
buildCSS = require('./tasks/build/css'),
|
|
||||||
buildAssets = require('./tasks/build/assets'),
|
|
||||||
|
|
||||||
// utility
|
|
||||||
clean = require('./tasks/clean'),
|
|
||||||
version = require('./tasks/version'),
|
|
||||||
|
|
||||||
// docs tasks
|
|
||||||
serveDocs = require('./tasks/docs/serve'),
|
|
||||||
buildDocs = require('./tasks/docs/build'),
|
|
||||||
|
|
||||||
// rtl
|
|
||||||
buildRTL = require('./tasks/rtl/build'),
|
|
||||||
watchRTL = require('./tasks/rtl/watch')
|
|
||||||
;
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Tasks
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
gulp.task('default', false, [
|
|
||||||
'watch'
|
|
||||||
]);
|
|
||||||
|
|
||||||
gulp.task('watch', 'Watch for site/theme changes', watch);
|
|
||||||
|
|
||||||
gulp.task('build', 'Builds all files from source', build);
|
|
||||||
gulp.task('build-javascript', 'Builds all javascript from source', buildJS);
|
|
||||||
gulp.task('build-css', 'Builds all css from source', buildCSS);
|
|
||||||
gulp.task('build-assets', 'Copies all assets from source', buildAssets);
|
|
||||||
|
|
||||||
gulp.task('clean', 'Clean dist folder', clean);
|
|
||||||
gulp.task('version', 'Displays current version of Semantic', version);
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Docs
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Lets you serve files to a local documentation instance
|
|
||||||
https://github.com/Semantic-Org/Semantic-UI-Docs/
|
|
||||||
*/
|
|
||||||
|
|
||||||
gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);
|
|
||||||
gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
RTL
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
if(config.rtl) {
|
|
||||||
gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);
|
|
||||||
gulp.task('build-rtl', 'Build all files as RTL', buildRTL);
|
|
||||||
}
|
|
||||||
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 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Breadcrumb
|
|
||||||
* http://github.com/semantic-org/semantic-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: 1;
|
|
||||||
display: @display;
|
|
||||||
margin: @verticalMargin 0em;
|
|
||||||
vertical-align: @verticalAlign;
|
|
||||||
}
|
|
||||||
.ui.breadcrumb:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.breadcrumb:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Content
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Divider */
|
|
||||||
.ui.breadcrumb .divider {
|
|
||||||
display: inline-block;
|
|
||||||
opacity: @dividerOpacity;
|
|
||||||
margin: 0em @dividerSpacing 0em;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.breadcrumb .active.section {
|
|
||||||
font-weight: @activeFontWeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.mini.breadcrumb {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.breadcrumb {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.breadcrumb {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.breadcrumb {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.breadcrumb {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.breadcrumb {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.breadcrumb {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.breadcrumb {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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,481 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Message
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'collection';
|
|
||||||
@element : 'message';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Message
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.message {
|
|
||||||
position: relative;
|
|
||||||
min-height: 1em;
|
|
||||||
margin: @verticalMargin 0em;
|
|
||||||
background: @background;
|
|
||||||
padding: @padding;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
color: @textColor;
|
|
||||||
transition: @transition;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.message:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.message:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.ui.message .header {
|
|
||||||
display: @headerDisplay;
|
|
||||||
font-family: @headerFont;
|
|
||||||
font-weight: @headerFontWeight;
|
|
||||||
margin: @headerMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default font size */
|
|
||||||
.ui.message .header:not(.ui) {
|
|
||||||
font-size: @headerFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Paragraph */
|
|
||||||
.ui.message p {
|
|
||||||
opacity: @messageTextOpacity;
|
|
||||||
margin: @messageParagraphMargin 0em;
|
|
||||||
}
|
|
||||||
.ui.message p:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.message p:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.message .header + p {
|
|
||||||
margin-top: @headerParagraphDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* List */
|
|
||||||
.ui.message .list:not(.ui) {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0em;
|
|
||||||
opacity: @listOpacity;
|
|
||||||
list-style-position: @listStylePosition;
|
|
||||||
margin: @listMargin 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.message .list:not(.ui):first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.message .list:not(.ui):last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.message .list:not(.ui) li {
|
|
||||||
position: relative;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0em 0em @listItemMargin @listItemIndent;
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
.ui.message .list:not(.ui) li:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '•';
|
|
||||||
left: -1em;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
.ui.message .list:not(.ui) li:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.message > .icon {
|
|
||||||
margin-right: @iconDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close Icon */
|
|
||||||
.ui.message > .close.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
margin: 0em;
|
|
||||||
top: @closeTopDistance;
|
|
||||||
right: @closeRightDistance;
|
|
||||||
opacity: @closeOpacity;
|
|
||||||
transition: @closeTransition;
|
|
||||||
}
|
|
||||||
.ui.message > .close.icon:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* First / Last Element */
|
|
||||||
.ui.message > :first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.message > :last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Coupling
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.dropdown .menu > .message {
|
|
||||||
margin: 0px -@borderWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Visible
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.visible.visible.visible.visible.message {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.icon.visible.visible.visible.visible.message {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Hidden
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.hidden.hidden.hidden.hidden.message {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Compact
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.compact.message {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.ui.compact.icon.message {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Attached
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.attached.message {
|
|
||||||
margin-bottom: @attachedYOffset;
|
|
||||||
border-radius: @borderRadius @borderRadius 0em 0em;
|
|
||||||
box-shadow: @attachedBoxShadow;
|
|
||||||
margin-left: @attachedXOffset;
|
|
||||||
margin-right: @attachedXOffset;
|
|
||||||
}
|
|
||||||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
|
||||||
margin-top: @attachedYOffset;
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
.ui.bottom.attached.message {
|
|
||||||
margin-top: @attachedYOffset;
|
|
||||||
border-radius: 0em 0em @borderRadius @borderRadius;
|
|
||||||
box-shadow: @attachedBottomBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.bottom.attached.message:not(:last-child) {
|
|
||||||
margin-bottom: @verticalMargin;
|
|
||||||
}
|
|
||||||
.ui.attached.icon.message {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Icon
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.icon.message {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.ui.icon.message > .icon:not(.close) {
|
|
||||||
display: block;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: auto;
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: @iconVerticalAlign;
|
|
||||||
font-size: @iconSize;
|
|
||||||
opacity: @iconOpacity;
|
|
||||||
}
|
|
||||||
.ui.icon.message > .content {
|
|
||||||
display: block;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
vertical-align: @iconVerticalAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ui.icon.message .icon:not(.close) + .content {
|
|
||||||
padding-left: @iconContentDistance;
|
|
||||||
}
|
|
||||||
.ui.icon.message .circular.icon {
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Floating
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.floating.message {
|
|
||||||
box-shadow: @floatingBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Colors
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.black.message {
|
|
||||||
background-color: @black;
|
|
||||||
color: @invertedTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Types
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Positive */
|
|
||||||
.ui.positive.message {
|
|
||||||
background-color: @positiveBackgroundColor;
|
|
||||||
color: @positiveTextColor;
|
|
||||||
}
|
|
||||||
.ui.positive.message,
|
|
||||||
.ui.attached.positive.message {
|
|
||||||
box-shadow: @positiveBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.positive.message .header {
|
|
||||||
color: @positiveHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Negative */
|
|
||||||
.ui.negative.message {
|
|
||||||
background-color: @negativeBackgroundColor;
|
|
||||||
color: @negativeTextColor;
|
|
||||||
}
|
|
||||||
.ui.negative.message,
|
|
||||||
.ui.attached.negative.message {
|
|
||||||
box-shadow: @negativeBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.negative.message .header {
|
|
||||||
color: @negativeHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Info */
|
|
||||||
.ui.info.message {
|
|
||||||
background-color: @infoBackgroundColor;
|
|
||||||
color: @infoTextColor;
|
|
||||||
}
|
|
||||||
.ui.info.message,
|
|
||||||
.ui.attached.info.message {
|
|
||||||
box-shadow: @infoBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.info.message .header {
|
|
||||||
color: @infoHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Warning */
|
|
||||||
.ui.warning.message {
|
|
||||||
background-color: @warningBackgroundColor;
|
|
||||||
color: @warningTextColor;
|
|
||||||
}
|
|
||||||
.ui.warning.message,
|
|
||||||
.ui.attached.warning.message {
|
|
||||||
box-shadow: @warningBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.warning.message .header {
|
|
||||||
color: @warningHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Error */
|
|
||||||
.ui.error.message {
|
|
||||||
background-color: @errorBackgroundColor;
|
|
||||||
color: @errorTextColor;
|
|
||||||
}
|
|
||||||
.ui.error.message,
|
|
||||||
.ui.attached.error.message {
|
|
||||||
box-shadow: @errorBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.error.message .header {
|
|
||||||
color: @errorHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success */
|
|
||||||
.ui.success.message {
|
|
||||||
background-color: @successBackgroundColor;
|
|
||||||
color: @successTextColor;
|
|
||||||
}
|
|
||||||
.ui.success.message,
|
|
||||||
.ui.attached.success.message {
|
|
||||||
box-shadow: @successBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.success.message .header {
|
|
||||||
color: @successHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
.ui.inverted.message,
|
|
||||||
.ui.black.message {
|
|
||||||
background-color: @black;
|
|
||||||
color: @invertedTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.red.message {
|
|
||||||
background-color: @redBackground;
|
|
||||||
color: @redTextColor;
|
|
||||||
box-shadow: @redBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.red.message .header {
|
|
||||||
color: @redHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.orange.message {
|
|
||||||
background-color: @orangeBackground;
|
|
||||||
color: @orangeTextColor;
|
|
||||||
box-shadow: @orangeBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.orange.message .header {
|
|
||||||
color: @orangeHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.yellow.message {
|
|
||||||
background-color: @yellowBackground;
|
|
||||||
color: @yellowTextColor;
|
|
||||||
box-shadow: @yellowBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.yellow.message .header {
|
|
||||||
color: @yellowHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.olive.message {
|
|
||||||
background-color: @oliveBackground;
|
|
||||||
color: @oliveTextColor;
|
|
||||||
box-shadow: @oliveBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.olive.message .header {
|
|
||||||
color: @oliveHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.green.message {
|
|
||||||
background-color: @greenBackground;
|
|
||||||
color: @greenTextColor;
|
|
||||||
box-shadow: @greenBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.green.message .header {
|
|
||||||
color: @greenHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.teal.message {
|
|
||||||
background-color: @tealBackground;
|
|
||||||
color: @tealTextColor;
|
|
||||||
box-shadow: @tealBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.teal.message .header {
|
|
||||||
color: @tealHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.blue.message {
|
|
||||||
background-color: @blueBackground;
|
|
||||||
color: @blueTextColor;
|
|
||||||
box-shadow: @blueBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.blue.message .header {
|
|
||||||
color: @blueHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.violet.message {
|
|
||||||
background-color: @violetBackground;
|
|
||||||
color: @violetTextColor;
|
|
||||||
box-shadow: @violetBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.violet.message .header {
|
|
||||||
color: @violetHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.purple.message {
|
|
||||||
background-color: @purpleBackground;
|
|
||||||
color: @purpleTextColor;
|
|
||||||
box-shadow: @purpleBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.purple.message .header {
|
|
||||||
color: @purpleHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.pink.message {
|
|
||||||
background-color: @pinkBackground;
|
|
||||||
color: @pinkTextColor;
|
|
||||||
box-shadow: @pinkBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.pink.message .header {
|
|
||||||
color: @pinkHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.brown.message {
|
|
||||||
background-color: @brownBackground;
|
|
||||||
color: @brownTextColor;
|
|
||||||
box-shadow: @brownBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.brown.message .header {
|
|
||||||
color: @brownHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.mini.message {
|
|
||||||
font-size: @relativeMini;
|
|
||||||
}
|
|
||||||
.ui.tiny.message {
|
|
||||||
font-size: @relativeTiny;
|
|
||||||
}
|
|
||||||
.ui.small.message {
|
|
||||||
font-size: @relativeSmall;
|
|
||||||
}
|
|
||||||
.ui.message {
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
.ui.large.message {
|
|
||||||
font-size: @relativeLarge;
|
|
||||||
}
|
|
||||||
.ui.big.message {
|
|
||||||
font-size: @relativeBig;
|
|
||||||
}
|
|
||||||
.ui.huge.message {
|
|
||||||
font-size: @relativeHuge;
|
|
||||||
}
|
|
||||||
.ui.massive.message {
|
|
||||||
font-size: @relativeMassive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,143 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Container
|
|
||||||
* http://github.com/semantic-org/semantic-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 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile */
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
.ui.container {
|
|
||||||
width: @mobileWidth !important;
|
|
||||||
margin-left: @mobileGutter !important;
|
|
||||||
margin-right: @mobileGutter !important;
|
|
||||||
}
|
|
||||||
.ui.grid.container {
|
|
||||||
width: @mobileGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.relaxed.grid.container {
|
|
||||||
width: @mobileRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.very.relaxed.grid.container {
|
|
||||||
width: @mobileVeryRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tablet */
|
|
||||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
|
||||||
.ui.container {
|
|
||||||
width: @tabletWidth;
|
|
||||||
margin-left: @tabletGutter !important;
|
|
||||||
margin-right: @tabletGutter !important;
|
|
||||||
}
|
|
||||||
.ui.grid.container {
|
|
||||||
width: @tabletGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.relaxed.grid.container {
|
|
||||||
width: @tabletRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.very.relaxed.grid.container {
|
|
||||||
width: @tabletVeryRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small Monitor */
|
|
||||||
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
|
|
||||||
.ui.container {
|
|
||||||
width: @computerWidth;
|
|
||||||
margin-left: @computerGutter !important;
|
|
||||||
margin-right: @computerGutter !important;
|
|
||||||
}
|
|
||||||
.ui.grid.container {
|
|
||||||
width: @computerGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.relaxed.grid.container {
|
|
||||||
width: @computerRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.very.relaxed.grid.container {
|
|
||||||
width: @computerVeryRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large Monitor */
|
|
||||||
@media only screen and (min-width: @largeMonitorBreakpoint) {
|
|
||||||
.ui.container {
|
|
||||||
width: @largeMonitorWidth;
|
|
||||||
margin-left: @largeMonitorGutter !important;
|
|
||||||
margin-right: @largeMonitorGutter !important;
|
|
||||||
}
|
|
||||||
.ui.grid.container {
|
|
||||||
width: @largeMonitorGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.relaxed.grid.container {
|
|
||||||
width: @largeMonitorRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
.ui.very.relaxed.grid.container {
|
|
||||||
width: @largeMonitorVeryRelaxedGridWidth !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/* Text Container */
|
|
||||||
.ui.text.container {
|
|
||||||
font-family: @textFontFamily;
|
|
||||||
max-width: @textWidth !important;
|
|
||||||
line-height: @textLineHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.text.container {
|
|
||||||
font-size: @textSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fluid */
|
|
||||||
.ui.fluid.container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui[class*="left aligned"].container {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.ui[class*="center aligned"].container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.ui[class*="right aligned"].container {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.ui.justified.container {
|
|
||||||
text-align: justify;
|
|
||||||
hyphens: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,255 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Divider
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em;
|
|
||||||
|
|
||||||
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 solid @shadowColor;
|
|
||||||
border-bottom: @highlightWidth solid @highlightColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Coupling
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Allow divider between each column row */
|
|
||||||
.ui.grid > .column + .divider,
|
|
||||||
.ui.grid > .row > .column + .divider {
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Vertical
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.vertical.divider {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 2;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: 0rem;
|
|
||||||
padding: 0em;
|
|
||||||
width: auto;
|
|
||||||
height: 50%;
|
|
||||||
|
|
||||||
line-height: 0em;
|
|
||||||
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 solid @shadowColor;
|
|
||||||
border-right: @highlightWidth solid @highlightColor;
|
|
||||||
|
|
||||||
width: 0%;
|
|
||||||
height: @verticalDividerHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.vertical.divider:before {
|
|
||||||
top: -100%;
|
|
||||||
}
|
|
||||||
.ui.vertical.divider:after {
|
|
||||||
top: auto;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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 {
|
|
||||||
position: static;
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Icon
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.divider > .icon {
|
|
||||||
margin: @dividerIconMargin;
|
|
||||||
font-size: @dividerIconSize;
|
|
||||||
height: 1em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Hidden
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.hidden.divider {
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
.ui.hidden.divider:before,
|
|
||||||
.ui.hidden.divider:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.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
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fitted.divider {
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Clearing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.clearing.divider {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Section
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.section.divider {
|
|
||||||
margin-top: @sectionMargin;
|
|
||||||
margin-bottom: @sectionMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.divider {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Flag
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em @margin 0em 0em;
|
|
||||||
|
|
||||||
text-decoration: inherit;
|
|
||||||
|
|
||||||
speak: none;
|
|
||||||
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,708 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Header
|
|
||||||
* http://github.com/semantic-org/semantic-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sub Header
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.header .sub.header {
|
|
||||||
display: block;
|
|
||||||
font-weight: @normal;
|
|
||||||
padding: 0em;
|
|
||||||
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: 0em;
|
|
||||||
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
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
h1.ui.header {
|
|
||||||
font-size: @h1;
|
|
||||||
}
|
|
||||||
h2.ui.header {
|
|
||||||
font-size: @h2;
|
|
||||||
}
|
|
||||||
h3.ui.header {
|
|
||||||
font-size: @h3;
|
|
||||||
}
|
|
||||||
h4.ui.header {
|
|
||||||
font-size: @h4;
|
|
||||||
}
|
|
||||||
h5.ui.header {
|
|
||||||
font-size: @h5;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Sub Header */
|
|
||||||
h1.ui.header .sub.header {
|
|
||||||
font-size: @h1SubHeaderFontSize;
|
|
||||||
}
|
|
||||||
h2.ui.header .sub.header {
|
|
||||||
font-size: @h2SubHeaderFontSize;
|
|
||||||
}
|
|
||||||
h3.ui.header .sub.header {
|
|
||||||
font-size: @h3SubHeaderFontSize;
|
|
||||||
}
|
|
||||||
h4.ui.header .sub.header {
|
|
||||||
font-size: @h4SubHeaderFontSize;
|
|
||||||
}
|
|
||||||
h5.ui.header .sub.header {
|
|
||||||
font-size: @h5SubHeaderFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content Heading
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.huge.header {
|
|
||||||
min-height: 1em;
|
|
||||||
font-size: @hugeFontSize;
|
|
||||||
}
|
|
||||||
.ui.large.header {
|
|
||||||
font-size: @largeFontSize;
|
|
||||||
}
|
|
||||||
.ui.medium.header {
|
|
||||||
font-size: @mediumFontSize;
|
|
||||||
}
|
|
||||||
.ui.small.header {
|
|
||||||
font-size: @smallFontSize;
|
|
||||||
}
|
|
||||||
.ui.tiny.header {
|
|
||||||
font-size: @tinyFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sub Header */
|
|
||||||
.ui.huge.header .sub.header {
|
|
||||||
font-size: @hugeSubHeaderFontSize;
|
|
||||||
}
|
|
||||||
.ui.large.header .sub.header {
|
|
||||||
font-size: @hugeSubHeaderFontSize;
|
|
||||||
}
|
|
||||||
.ui.header .sub.header {
|
|
||||||
font-size: @subHeaderFontSize;
|
|
||||||
}
|
|
||||||
.ui.small.header .sub.header {
|
|
||||||
font-size: @smallSubHeaderFontSize;
|
|
||||||
}
|
|
||||||
.ui.tiny.header .sub.header {
|
|
||||||
font-size: @tinySubHeaderFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sub Heading
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.sub.header {
|
|
||||||
padding: 0em;
|
|
||||||
margin-bottom: @subHeadingDistance;
|
|
||||||
font-weight: @subHeadingFontWeight;
|
|
||||||
font-size: @subHeadingFontSize;
|
|
||||||
text-transform: @subHeadingTextTransform;
|
|
||||||
color: @subHeadingColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.small.sub.header {
|
|
||||||
font-size: @smallSubHeadingSize;
|
|
||||||
}
|
|
||||||
.ui.sub.header {
|
|
||||||
font-size: @subHeadingFontSize;
|
|
||||||
}
|
|
||||||
.ui.large.sub.header {
|
|
||||||
font-size: @largeSubHeadingSize;
|
|
||||||
}
|
|
||||||
.ui.huge.sub.header {
|
|
||||||
font-size: @hugeSubHeadingSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Icon
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.icon.header {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;
|
|
||||||
}
|
|
||||||
.ui.icon.header:after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 0px;
|
|
||||||
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: 0em;
|
|
||||||
font-size: @iconHeaderSize;
|
|
||||||
margin: 0em auto @iconHeaderMargin;
|
|
||||||
opacity: @iconHeaderOpacity;
|
|
||||||
}
|
|
||||||
.ui.icon.header .content {
|
|
||||||
display: block;
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
.ui.icon.header .circular.icon {
|
|
||||||
font-size: @circularHeaderIconSize;
|
|
||||||
}
|
|
||||||
.ui.icon.header .square.icon {
|
|
||||||
font-size: @squareHeaderIconSize;
|
|
||||||
}
|
|
||||||
.ui.block.icon.header .icon {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.icon.header.aligned {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.disabled.header {
|
|
||||||
opacity: @disabledOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inverted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.inverted.header {
|
|
||||||
color: @invertedColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.header .sub.header {
|
|
||||||
color: @invertedSubHeaderColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.attached.header {
|
|
||||||
background: @invertedAttachedBackground;
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
.ui.inverted.block.header {
|
|
||||||
background: @invertedBlockBackground;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.ui.inverted.block.header {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Colors
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/*--- Red ---*/
|
|
||||||
.ui.red.header {
|
|
||||||
color: @red !important;
|
|
||||||
}
|
|
||||||
a.ui.red.header:hover {
|
|
||||||
color: @redHover !important;
|
|
||||||
}
|
|
||||||
.ui.red.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @red;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.red.header {
|
|
||||||
color: @lightRed !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.red.header:hover {
|
|
||||||
color: @lightRedHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Orange ---*/
|
|
||||||
.ui.orange.header {
|
|
||||||
color: @orange !important;
|
|
||||||
}
|
|
||||||
a.ui.orange.header:hover {
|
|
||||||
color: @orangeHover !important;
|
|
||||||
}
|
|
||||||
.ui.orange.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @orange;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.orange.header {
|
|
||||||
color: @lightOrange !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.orange.header:hover {
|
|
||||||
color: @lightOrangeHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Olive ---*/
|
|
||||||
.ui.olive.header {
|
|
||||||
color: @olive !important;
|
|
||||||
}
|
|
||||||
a.ui.olive.header:hover {
|
|
||||||
color: @oliveHover !important;
|
|
||||||
}
|
|
||||||
.ui.olive.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @olive;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.olive.header {
|
|
||||||
color: @lightOlive !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.olive.header:hover {
|
|
||||||
color: @lightOliveHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Yellow ---*/
|
|
||||||
.ui.yellow.header {
|
|
||||||
color: @yellow !important;
|
|
||||||
}
|
|
||||||
a.ui.yellow.header:hover {
|
|
||||||
color: @yellowHover !important;
|
|
||||||
}
|
|
||||||
.ui.yellow.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @yellow;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.yellow.header {
|
|
||||||
color: @lightYellow !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.yellow.header:hover {
|
|
||||||
color: @lightYellowHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Green ---*/
|
|
||||||
.ui.green.header {
|
|
||||||
color: @green !important;
|
|
||||||
}
|
|
||||||
a.ui.green.header:hover {
|
|
||||||
color: @greenHover !important;
|
|
||||||
}
|
|
||||||
.ui.green.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @green;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.green.header {
|
|
||||||
color: @lightGreen !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.green.header:hover {
|
|
||||||
color: @lightGreenHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Teal ---*/
|
|
||||||
.ui.teal.header {
|
|
||||||
color: @teal !important;
|
|
||||||
}
|
|
||||||
a.ui.teal.header:hover {
|
|
||||||
color: @tealHover !important;
|
|
||||||
}
|
|
||||||
.ui.teal.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @teal;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.teal.header {
|
|
||||||
color: @lightTeal !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.teal.header:hover {
|
|
||||||
color: @lightTealHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Blue ---*/
|
|
||||||
.ui.blue.header {
|
|
||||||
color: @blue !important;
|
|
||||||
}
|
|
||||||
a.ui.blue.header:hover {
|
|
||||||
color: @blueHover !important;
|
|
||||||
}
|
|
||||||
.ui.blue.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @blue;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.blue.header {
|
|
||||||
color: @lightBlue !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.blue.header:hover {
|
|
||||||
color: @lightBlueHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Violet ---*/
|
|
||||||
.ui.violet.header {
|
|
||||||
color: @violet !important;
|
|
||||||
}
|
|
||||||
a.ui.violet.header:hover {
|
|
||||||
color: @violetHover !important;
|
|
||||||
}
|
|
||||||
.ui.violet.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @violet;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.violet.header {
|
|
||||||
color: @lightViolet !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.violet.header:hover {
|
|
||||||
color: @lightVioletHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Purple ---*/
|
|
||||||
.ui.purple.header {
|
|
||||||
color: @purple !important;
|
|
||||||
}
|
|
||||||
a.ui.purple.header:hover {
|
|
||||||
color: @purpleHover !important;
|
|
||||||
}
|
|
||||||
.ui.purple.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @purple;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.purple.header {
|
|
||||||
color: @lightPurple !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.purple.header:hover {
|
|
||||||
color: @lightPurpleHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Pink ---*/
|
|
||||||
.ui.pink.header {
|
|
||||||
color: @pink !important;
|
|
||||||
}
|
|
||||||
a.ui.pink.header:hover {
|
|
||||||
color: @pinkHover !important;
|
|
||||||
}
|
|
||||||
.ui.pink.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @pink;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.pink.header {
|
|
||||||
color: @lightPink !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.pink.header:hover {
|
|
||||||
color: @lightPinkHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Brown ---*/
|
|
||||||
.ui.brown.header {
|
|
||||||
color: @brown !important;
|
|
||||||
}
|
|
||||||
a.ui.brown.header:hover {
|
|
||||||
color: @brownHover !important;
|
|
||||||
}
|
|
||||||
.ui.brown.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @brown;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.brown.header {
|
|
||||||
color: @lightBrown !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.brown.header:hover {
|
|
||||||
color: @lightBrownHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Grey ---*/
|
|
||||||
.ui.grey.header {
|
|
||||||
color: @grey !important;
|
|
||||||
}
|
|
||||||
a.ui.grey.header:hover {
|
|
||||||
color: @greyHover !important;
|
|
||||||
}
|
|
||||||
.ui.grey.dividing.header {
|
|
||||||
border-bottom: @dividedColoredBorderWidth solid @grey;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.grey.header {
|
|
||||||
color: @lightGrey !important;
|
|
||||||
}
|
|
||||||
a.ui.inverted.grey.header:hover {
|
|
||||||
color: @lightGreyHover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.ui.justified.header {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
.ui.justified.header:after {
|
|
||||||
display: inline-block;
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Floated
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.floated.header,
|
|
||||||
.ui[class*="left floated"].header {
|
|
||||||
float: left;
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-right: @floatedMargin;
|
|
||||||
}
|
|
||||||
.ui[class*="right floated"].header {
|
|
||||||
float: right;
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-left: @floatedMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Fitted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.fitted.header {
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.dividing.header {
|
|
||||||
border-bottom-color: @invertedDividedBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Block
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.block.header {
|
|
||||||
background: @blockBackground;
|
|
||||||
padding: @blockVerticalPadding @blockHorizontalPadding;
|
|
||||||
box-shadow: @blockBoxShadow;
|
|
||||||
border: @blockBorder;
|
|
||||||
border-radius: @blockBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.tiny.block.header {
|
|
||||||
font-size: @tinyBlock;
|
|
||||||
}
|
|
||||||
.ui.small.block.header {
|
|
||||||
font-size: @smallBlock;
|
|
||||||
}
|
|
||||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
|
||||||
font-size: @mediumBlock;
|
|
||||||
}
|
|
||||||
.ui.large.block.header {
|
|
||||||
font-size: @largeBlock;
|
|
||||||
}
|
|
||||||
.ui.huge.block.header {
|
|
||||||
font-size: @hugeBlock;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Attached
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.attached.header {
|
|
||||||
background: @attachedBackground;
|
|
||||||
padding: @attachedVerticalPadding @attachedHorizontalPadding;
|
|
||||||
margin-left: @attachedOffset;
|
|
||||||
margin-right: @attachedOffset;
|
|
||||||
box-shadow: @attachedBoxShadow;
|
|
||||||
border: @attachedBorder;
|
|
||||||
}
|
|
||||||
.ui.attached.block.header {
|
|
||||||
background: @blockBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.attached:not(.top):not(.bottom).header {
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
.ui.top.attached.header {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.bottom.attached.header {
|
|
||||||
margin-top: 0em;
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Attached Sizes */
|
|
||||||
.ui.tiny.attached.header {
|
|
||||||
font-size: @tinyAttachedSize;
|
|
||||||
}
|
|
||||||
.ui.small.attached.header {
|
|
||||||
font-size: @smallAttachedSize;
|
|
||||||
}
|
|
||||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
|
||||||
font-size: @mediumAttachedSize;
|
|
||||||
}
|
|
||||||
.ui.large.attached.header {
|
|
||||||
font-size: @largeAttachedSize;
|
|
||||||
}
|
|
||||||
.ui.huge.attached.header {
|
|
||||||
font-size: @hugeAttachedSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Sizing
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
|
||||||
font-size: @mediumFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,501 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Icon
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em @distanceFromText 0em 0em;
|
|
||||||
|
|
||||||
width: @width;
|
|
||||||
height: @height;
|
|
||||||
|
|
||||||
font-family: 'Icons';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: @normal;
|
|
||||||
text-decoration: inherit;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
speak: none;
|
|
||||||
font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.icon:before {
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Loading
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
i.icon.loading {
|
|
||||||
height: 1em;
|
|
||||||
line-height: 1;
|
|
||||||
animation: icon-loading @loadingDuration linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes icon-loading {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
i.icon.hover {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.icon.active {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.emphasized.icon {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.disabled.icon {
|
|
||||||
opacity: @disabledOpacity !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Fitted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.fitted.icon {
|
|
||||||
width: auto;
|
|
||||||
margin: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Link
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.link.icon, i.link.icons {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: @linkOpacity;
|
|
||||||
transition: opacity @defaultDuration @defaultEasing;
|
|
||||||
}
|
|
||||||
i.link.icon:hover, i.link.icons:hover {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Circular
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.circular.icon {
|
|
||||||
border-radius: 500em !important;
|
|
||||||
line-height: 1 !important;
|
|
||||||
|
|
||||||
padding: @circularPadding !important;
|
|
||||||
box-shadow: @circularShadow;
|
|
||||||
|
|
||||||
width: @circularSize !important;
|
|
||||||
height: @circularSize !important;
|
|
||||||
}
|
|
||||||
i.circular.inverted.icon {
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Flipped
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.flipped.icon,
|
|
||||||
i.horizontally.flipped.icon {
|
|
||||||
transform: scale(-1, 1);
|
|
||||||
}
|
|
||||||
i.vertically.flipped.icon {
|
|
||||||
transform: scale(1, -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Bordered
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.bordered.icon {
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: baseline;
|
|
||||||
|
|
||||||
width: @borderedSize;
|
|
||||||
height: @borderedSize;
|
|
||||||
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
|
|
||||||
box-shadow: @borderedShadow;
|
|
||||||
}
|
|
||||||
i.bordered.inverted.icon {
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inverted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Inverted Shapes */
|
|
||||||
i.inverted.bordered.icon,
|
|
||||||
i.inverted.circular.icon {
|
|
||||||
background-color: @black !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.inverted.icon {
|
|
||||||
color: @white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Colors
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Red */
|
|
||||||
i.red.icon {
|
|
||||||
color: @red !important;
|
|
||||||
}
|
|
||||||
i.inverted.red.icon {
|
|
||||||
color: @lightRed !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.red.icon,
|
|
||||||
i.inverted.circular.red.icon {
|
|
||||||
background-color: @red !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orange */
|
|
||||||
i.orange.icon {
|
|
||||||
color: @orange !important;
|
|
||||||
}
|
|
||||||
i.inverted.orange.icon {
|
|
||||||
color: @lightOrange !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.orange.icon,
|
|
||||||
i.inverted.circular.orange.icon {
|
|
||||||
background-color: @orange !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Yellow */
|
|
||||||
i.yellow.icon {
|
|
||||||
color: @yellow !important;
|
|
||||||
}
|
|
||||||
i.inverted.yellow.icon {
|
|
||||||
color: @lightYellow !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.yellow.icon,
|
|
||||||
i.inverted.circular.yellow.icon {
|
|
||||||
background-color: @yellow !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Olive */
|
|
||||||
i.olive.icon {
|
|
||||||
color: @olive !important;
|
|
||||||
}
|
|
||||||
i.inverted.olive.icon {
|
|
||||||
color: @lightOlive !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.olive.icon,
|
|
||||||
i.inverted.circular.olive.icon {
|
|
||||||
background-color: @olive !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Green */
|
|
||||||
i.green.icon {
|
|
||||||
color: @green !important;
|
|
||||||
}
|
|
||||||
i.inverted.green.icon {
|
|
||||||
color: @lightGreen !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.green.icon,
|
|
||||||
i.inverted.circular.green.icon {
|
|
||||||
background-color: @green !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Teal */
|
|
||||||
i.teal.icon {
|
|
||||||
color: @teal !important;
|
|
||||||
}
|
|
||||||
i.inverted.teal.icon {
|
|
||||||
color: @lightTeal !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.teal.icon,
|
|
||||||
i.inverted.circular.teal.icon {
|
|
||||||
background-color: @teal !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blue */
|
|
||||||
i.blue.icon {
|
|
||||||
color: @blue !important;
|
|
||||||
}
|
|
||||||
i.inverted.blue.icon {
|
|
||||||
color: @lightBlue !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.blue.icon,
|
|
||||||
i.inverted.circular.blue.icon {
|
|
||||||
background-color: @blue !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Violet */
|
|
||||||
i.violet.icon {
|
|
||||||
color: @violet !important;
|
|
||||||
}
|
|
||||||
i.inverted.violet.icon {
|
|
||||||
color: @lightViolet !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.violet.icon,
|
|
||||||
i.inverted.circular.violet.icon {
|
|
||||||
background-color: @violet !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Purple */
|
|
||||||
i.purple.icon {
|
|
||||||
color: @purple !important;
|
|
||||||
}
|
|
||||||
i.inverted.purple.icon {
|
|
||||||
color: @lightPurple !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.purple.icon,
|
|
||||||
i.inverted.circular.purple.icon {
|
|
||||||
background-color: @purple !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pink */
|
|
||||||
i.pink.icon {
|
|
||||||
color: @pink !important;
|
|
||||||
}
|
|
||||||
i.inverted.pink.icon {
|
|
||||||
color: @lightPink !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.pink.icon,
|
|
||||||
i.inverted.circular.pink.icon {
|
|
||||||
background-color: @pink !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Brown */
|
|
||||||
i.brown.icon {
|
|
||||||
color: @brown !important;
|
|
||||||
}
|
|
||||||
i.inverted.brown.icon {
|
|
||||||
color: @lightBrown !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.brown.icon,
|
|
||||||
i.inverted.circular.brown.icon {
|
|
||||||
background-color: @brown !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grey */
|
|
||||||
i.grey.icon {
|
|
||||||
color: @grey !important;
|
|
||||||
}
|
|
||||||
i.inverted.grey.icon {
|
|
||||||
color: @lightGrey !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.grey.icon,
|
|
||||||
i.inverted.circular.grey.icon {
|
|
||||||
background-color: @grey !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Black */
|
|
||||||
i.black.icon {
|
|
||||||
color: @black !important;
|
|
||||||
}
|
|
||||||
i.inverted.black.icon {
|
|
||||||
color: @lightBlack !important;
|
|
||||||
}
|
|
||||||
i.inverted.bordered.black.icon,
|
|
||||||
i.inverted.circular.black.icon {
|
|
||||||
background-color: @black !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Sizes
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
i.mini.icon,
|
|
||||||
i.mini.icons {
|
|
||||||
line-height: 1;
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
i.tiny.icon,
|
|
||||||
i.tiny.icons {
|
|
||||||
line-height: 1;
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
i.small.icon,
|
|
||||||
i.small.icons {
|
|
||||||
line-height: 1;
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
i.icon,
|
|
||||||
i.icons {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
i.large.icon,
|
|
||||||
i.large.icons {
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
i.big.icon,
|
|
||||||
i.big.icons {
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
i.huge.icon,
|
|
||||||
i.huge.icons {
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
i.massive.icon,
|
|
||||||
i.massive.icons {
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
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: 0em;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.icons .icon:first-child {
|
|
||||||
position: static;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: top;
|
|
||||||
transform: none;
|
|
||||||
margin-right: @distanceFromText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Corner Icon */
|
|
||||||
i.icons .corner.icon {
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
transform: none;
|
|
||||||
font-size: @cornerIconSize;
|
|
||||||
text-shadow: @cornerIconShadow;
|
|
||||||
}
|
|
||||||
i.icons .top.right.corner.icon {
|
|
||||||
top: 0;
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
i.icons .top.left.corner.icon {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
i.icons .bottom.left.corner.icon {
|
|
||||||
top: auto;
|
|
||||||
left: 0;
|
|
||||||
right: auto;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
i.icons .bottom.right.corner.icon {
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.icons .inverted.corner.icon {
|
|
||||||
text-shadow: @cornerIconInvertedShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,328 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Image
|
|
||||||
* http://github.com/semantic-org/semantic-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.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ui.disabled.images,
|
|
||||||
.ui.disabled.image {
|
|
||||||
cursor: default;
|
|
||||||
opacity: @disabledOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inline
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inline.image,
|
|
||||||
.ui.inline.image svg,
|
|
||||||
.ui.inline.image img {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*------------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Rounded
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.rounded.images .image,
|
|
||||||
.ui.rounded.image,
|
|
||||||
.ui.rounded.images .image > *,
|
|
||||||
.ui.rounded.image > * {
|
|
||||||
border-radius: @roundedBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Spaced
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.spaced.image {
|
|
||||||
display: inline-block !important;
|
|
||||||
margin-left: @spacedDistance;
|
|
||||||
margin-right: @spacedDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="left spaced"].image {
|
|
||||||
margin-left: @spacedDistance;
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="right spaced"].image {
|
|
||||||
margin-left: 0em;
|
|
||||||
margin-right: @spacedDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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: 0em;
|
|
||||||
margin-bottom: @floatedVerticalMargin;
|
|
||||||
margin-left: @floatedHorizontalMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.floated.images:last-child,
|
|
||||||
.ui.floated.image:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ui.centered.images,
|
|
||||||
.ui.centered.image {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.mini.images .image,
|
|
||||||
.ui.mini.images img,
|
|
||||||
.ui.mini.images svg,
|
|
||||||
.ui.mini.image {
|
|
||||||
width: @miniWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.images .image,
|
|
||||||
.ui.tiny.images img,
|
|
||||||
.ui.tiny.images svg,
|
|
||||||
.ui.tiny.image {
|
|
||||||
width: @tinyWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.images .image,
|
|
||||||
.ui.small.images img,
|
|
||||||
.ui.small.images svg,
|
|
||||||
.ui.small.image {
|
|
||||||
width: @smallWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.medium.images .image,
|
|
||||||
.ui.medium.images img,
|
|
||||||
.ui.medium.images svg,
|
|
||||||
.ui.medium.image {
|
|
||||||
width: @mediumWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.images .image,
|
|
||||||
.ui.large.images img,
|
|
||||||
.ui.large.images svg,
|
|
||||||
.ui.large.image {
|
|
||||||
width: @largeWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.images .image,
|
|
||||||
.ui.big.images img,
|
|
||||||
.ui.big.images svg,
|
|
||||||
.ui.big.image {
|
|
||||||
width: @bigWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.images .image,
|
|
||||||
.ui.huge.images img,
|
|
||||||
.ui.huge.images svg,
|
|
||||||
.ui.huge.image {
|
|
||||||
width: @hugeWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.images .image,
|
|
||||||
.ui.massive.images img,
|
|
||||||
.ui.massive.images svg,
|
|
||||||
.ui.massive.image {
|
|
||||||
width: @massiveWidth;
|
|
||||||
height: auto;
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Groups
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.images {
|
|
||||||
font-size: 0em;
|
|
||||||
margin: 0em -@imageHorizontalMargin 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.images .image,
|
|
||||||
.ui.images > img,
|
|
||||||
.ui.images > svg {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0em @imageHorizontalMargin @imageVerticalMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,508 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Input
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'element';
|
|
||||||
@element : 'input';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Standard
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Inputs
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.input {
|
|
||||||
position: relative;
|
|
||||||
font-weight: @normal;
|
|
||||||
font-style: normal;
|
|
||||||
display: inline-flex;
|
|
||||||
color: @inputColor;
|
|
||||||
}
|
|
||||||
.ui.input > input {
|
|
||||||
margin: 0em;
|
|
||||||
max-width: 100%;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
outline: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
||||||
text-align: @textAlign;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
|
|
||||||
font-family: @inputFont;
|
|
||||||
padding: @padding;
|
|
||||||
|
|
||||||
background: @background;
|
|
||||||
border: @border;
|
|
||||||
color: @inputColor;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
transition: @transition;
|
|
||||||
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Placeholder
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
/* browsers require these rules separate */
|
|
||||||
|
|
||||||
.ui.input > input::-webkit-input-placeholder {
|
|
||||||
color: @placeholderColor;
|
|
||||||
}
|
|
||||||
.ui.input > input::-moz-placeholder {
|
|
||||||
color: @placeholderColor;
|
|
||||||
}
|
|
||||||
.ui.input > input:-ms-input-placeholder {
|
|
||||||
color: @placeholderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Disabled
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.disabled.input,
|
|
||||||
.ui.input:not(.disabled) input[disabled] {
|
|
||||||
opacity: @disabledOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.disabled.input > input,
|
|
||||||
.ui.input:not(.disabled) input[disabled] {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Active
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.input > input:active,
|
|
||||||
.ui.input.down input {
|
|
||||||
border-color: @downBorderColor;
|
|
||||||
background: @downBackground;
|
|
||||||
color: @downColor;
|
|
||||||
box-shadow: @downBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Loading
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.loading.loading.input > i.icon:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: @loaderMargin;
|
|
||||||
width: @loaderSize;
|
|
||||||
height: @loaderSize;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
border: @loaderLineWidth solid @loaderFillColor;
|
|
||||||
}
|
|
||||||
.ui.loading.loading.input > i.icon:after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: @loaderMargin;
|
|
||||||
width: @loaderSize;
|
|
||||||
height: @loaderSize;
|
|
||||||
|
|
||||||
animation: button-spin @loaderSpeed linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
|
|
||||||
border-color: @loaderLineColor transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: @loaderLineWidth;
|
|
||||||
|
|
||||||
box-shadow: 0px 0px 0px 1px transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Focus
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.input.focus > input,
|
|
||||||
.ui.input > input:focus {
|
|
||||||
border-color: @focusBorderColor;
|
|
||||||
background: @focusBackground;
|
|
||||||
color: @focusColor;
|
|
||||||
box-shadow: @focusBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.input.focus > input::-webkit-input-placeholder,
|
|
||||||
.ui.input > input:focus::-webkit-input-placeholder {
|
|
||||||
color: @placeholderFocusColor;
|
|
||||||
}
|
|
||||||
.ui.input.focus > input::-moz-placeholder,
|
|
||||||
.ui.input > input:focus::-moz-placeholder {
|
|
||||||
color: @placeholderFocusColor;
|
|
||||||
}
|
|
||||||
.ui.input.focus > input:-ms-input-placeholder,
|
|
||||||
.ui.input > input:focus:-ms-input-placeholder {
|
|
||||||
color: @placeholderFocusColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Error
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.input.error > input {
|
|
||||||
background-color: @errorBackground;
|
|
||||||
border-color: @errorBorder;
|
|
||||||
color: @errorColor;
|
|
||||||
box-shadow: @errorBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Error Placeholder */
|
|
||||||
.ui.input.error > input::-webkit-input-placeholder {
|
|
||||||
color: @placeholderErrorColor;
|
|
||||||
}
|
|
||||||
.ui.input.error > input::-moz-placeholder {
|
|
||||||
color: @placeholderErrorColor;
|
|
||||||
}
|
|
||||||
.ui.input.error > input:-ms-input-placeholder {
|
|
||||||
color: @placeholderErrorColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focused Error Placeholder */
|
|
||||||
.ui.input.error > input:focus::-webkit-input-placeholder {
|
|
||||||
color: @placeholderErrorFocusColor;
|
|
||||||
}
|
|
||||||
.ui.input.error > input:focus::-moz-placeholder {
|
|
||||||
color: @placeholderErrorFocusColor;
|
|
||||||
}
|
|
||||||
.ui.input.error > input:focus:-ms-input-placeholder {
|
|
||||||
color: @placeholderErrorFocusColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Transparent
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.ui.transparent.input > input {
|
|
||||||
border-color: transparent !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
padding: 0em !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transparent Icon */
|
|
||||||
.ui.transparent.icon.input > i.icon {
|
|
||||||
width: @transparentIconWidth;
|
|
||||||
}
|
|
||||||
.ui.transparent.icon.input > input {
|
|
||||||
padding-left: 0em !important;
|
|
||||||
padding-right: @transparentIconMargin !important;
|
|
||||||
}
|
|
||||||
.ui.transparent[class*="left icon"].input > input {
|
|
||||||
padding-left: @transparentIconMargin !important;
|
|
||||||
padding-right: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transparent Inverted */
|
|
||||||
.ui.transparent.inverted.input {
|
|
||||||
color: @transparentInvertedColor;
|
|
||||||
}
|
|
||||||
.ui.transparent.inverted.input > input {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.transparent.inverted.input > input::-webkit-input-placeholder {
|
|
||||||
color: @transparentInvertedPlaceholderColor;
|
|
||||||
}
|
|
||||||
.ui.transparent.inverted.input > input::-moz-placeholder {
|
|
||||||
color: @transparentInvertedPlaceholderColor;
|
|
||||||
}
|
|
||||||
.ui.transparent.inverted.input > input:-ms-input-placeholder {
|
|
||||||
color: @transparentInvertedPlaceholderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Icon
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.icon.input > i.icon {
|
|
||||||
cursor: default;
|
|
||||||
position: absolute;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: center;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
margin: 0em;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
width: @iconWidth;
|
|
||||||
opacity: @iconOpacity;
|
|
||||||
border-radius: 0em @borderRadius @borderRadius 0em;
|
|
||||||
transition: @iconTransition;
|
|
||||||
}
|
|
||||||
.ui.icon.input > i.icon:not(.link) {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.ui.icon.input > input {
|
|
||||||
padding-right: @iconMargin !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.icon.input > i.icon:before,
|
|
||||||
.ui.icon.input > i.icon:after {
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
top: 50%;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: @iconOffset;
|
|
||||||
}
|
|
||||||
.ui.icon.input > i.link.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.ui.icon.input > i.circular.icon {
|
|
||||||
top: @circularIconVerticalOffset;
|
|
||||||
right: @circularIconHorizontalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Left Icon Input */
|
|
||||||
.ui[class*="left icon"].input > i.icon {
|
|
||||||
right: auto;
|
|
||||||
left: @borderWidth;
|
|
||||||
border-radius: @borderRadius 0em 0em @borderRadius;
|
|
||||||
}
|
|
||||||
.ui[class*="left icon"].input > i.circular.icon {
|
|
||||||
right: auto;
|
|
||||||
left: @circularIconHorizontalOffset;
|
|
||||||
}
|
|
||||||
.ui[class*="left icon"].input > input {
|
|
||||||
padding-left: @iconMargin !important;
|
|
||||||
padding-right: @horizontalPadding !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
|
||||||
.ui.icon.input > input:focus ~ i.icon {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Labeled
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
/* Adjacent Label */
|
|
||||||
.ui.labeled.input > .label {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
margin: 0;
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
.ui.labeled.input > .label:not(.corner) {
|
|
||||||
padding-top: @verticalPadding;
|
|
||||||
padding-bottom: @verticalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Regular Label on Left */
|
|
||||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
|
|
||||||
border-top-right-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
}
|
|
||||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
|
|
||||||
border-top-left-radius: 0px;
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-left-color: transparent;
|
|
||||||
}
|
|
||||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
|
|
||||||
border-left-color: @focusBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Regular Label on Right */
|
|
||||||
.ui[class*="right labeled"].input > input {
|
|
||||||
border-top-right-radius: 0px !important;
|
|
||||||
border-bottom-right-radius: 0px !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
}
|
|
||||||
.ui[class*="right labeled"].input > input + .label {
|
|
||||||
border-top-left-radius: 0px;
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="right labeled"].input > input:focus {
|
|
||||||
border-right-color: @focusBorderColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Corner Label */
|
|
||||||
.ui.labeled.input .corner.label {
|
|
||||||
top: @labelCornerTop;
|
|
||||||
right: @labelCornerRight;
|
|
||||||
font-size: @labelCornerSize;
|
|
||||||
border-radius: 0em @borderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Spacing with corner label */
|
|
||||||
.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
|
|
||||||
padding-right: @labeledMargin !important;
|
|
||||||
}
|
|
||||||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
|
|
||||||
padding-right: @labeledIconInputMargin !important;
|
|
||||||
}
|
|
||||||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
|
|
||||||
margin-right: @labeledIconMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Left Labeled */
|
|
||||||
.ui[class*="left corner labeled"].labeled.input > input {
|
|
||||||
padding-left: @labeledMargin !important;
|
|
||||||
}
|
|
||||||
.ui[class*="left corner labeled"].icon.input > input {
|
|
||||||
padding-left: @labeledIconInputMargin !important;
|
|
||||||
}
|
|
||||||
.ui[class*="left corner labeled"].icon.input > .icon {
|
|
||||||
margin-left: @labeledIconMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Corner Label Position */
|
|
||||||
.ui.input > .ui.corner.label {
|
|
||||||
top: @borderWidth;
|
|
||||||
right: @borderWidth;
|
|
||||||
}
|
|
||||||
.ui.input > .ui.left.corner.label {
|
|
||||||
right: auto;
|
|
||||||
left: @borderWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Action
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.action.input > .button,
|
|
||||||
.ui.action.input > .buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
.ui.action.input > .button,
|
|
||||||
.ui.action.input > .buttons > .button {
|
|
||||||
padding-top: @verticalPadding;
|
|
||||||
padding-bottom: @verticalPadding;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button on Right */
|
|
||||||
.ui.action.input:not([class*="left action"]) > input {
|
|
||||||
border-top-right-radius: 0px !important;
|
|
||||||
border-bottom-right-radius: 0px !important;
|
|
||||||
border-right-color: transparent !important;
|
|
||||||
}
|
|
||||||
.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child),
|
|
||||||
.ui.action.input:not([class*="left action"]) > .button:not(:first-child),
|
|
||||||
.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button {
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
|
|
||||||
.ui.action.input:not([class*="left action"]) > .button:last-child,
|
|
||||||
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
|
|
||||||
border-radius: 0px @borderRadius @borderRadius 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input Focus */
|
|
||||||
.ui.action.input:not([class*="left action"]) > input:focus {
|
|
||||||
border-right-color: @focusBorderColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button on Left */
|
|
||||||
.ui[class*="left action"].input > input {
|
|
||||||
border-top-left-radius: 0px !important;
|
|
||||||
border-bottom-left-radius: 0px !important;
|
|
||||||
border-left-color: transparent !important;
|
|
||||||
}
|
|
||||||
.ui[class*="left action"].input > .dropdown,
|
|
||||||
.ui[class*="left action"].input > .button,
|
|
||||||
.ui[class*="left action"].input > .buttons > .button {
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
.ui[class*="left action"].input > .dropdown:first-child,
|
|
||||||
.ui[class*="left action"].input > .button:first-child,
|
|
||||||
.ui[class*="left action"].input > .buttons:first-child > .button {
|
|
||||||
border-radius: @borderRadius 0px 0px @borderRadius;
|
|
||||||
}
|
|
||||||
/* Input Focus */
|
|
||||||
.ui[class*="left action"].input > input:focus {
|
|
||||||
border-left-color: @focusBorderColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Inverted
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
/* Standard */
|
|
||||||
.ui.inverted.input > input {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Fluid
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.fluid.input {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.ui.fluid.input > input {
|
|
||||||
width: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Size
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.mini.input {
|
|
||||||
font-size: @relativeMini;
|
|
||||||
}
|
|
||||||
.ui.small.input {
|
|
||||||
font-size: @relativeSmall;
|
|
||||||
}
|
|
||||||
.ui.input {
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
.ui.large.input {
|
|
||||||
font-size: @relativeLarge;
|
|
||||||
}
|
|
||||||
.ui.big.input {
|
|
||||||
font-size: @relativeBig;
|
|
||||||
}
|
|
||||||
.ui.huge.input {
|
|
||||||
font-size: @relativeHuge;
|
|
||||||
}
|
|
||||||
.ui.massive.input {
|
|
||||||
font-size: @relativeMassive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,953 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - List
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'element';
|
|
||||||
@element : 'list';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
List
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
ul.ui.list,
|
|
||||||
ol.ui.list,
|
|
||||||
.ui.list {
|
|
||||||
list-style-type: @listStyleType;
|
|
||||||
margin: @margin;
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list:first-child,
|
|
||||||
ol.ui.list:first-child,
|
|
||||||
.ui.list:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
padding-top: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list:last-child,
|
|
||||||
ol.ui.list:last-child,
|
|
||||||
.ui.list:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Content
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* List Item */
|
|
||||||
ul.ui.list li,
|
|
||||||
ol.ui.list li,
|
|
||||||
.ui.list > .item,
|
|
||||||
.ui.list .list > .item {
|
|
||||||
display: list-item;
|
|
||||||
table-layout: fixed;
|
|
||||||
list-style-type: @listStyleType;
|
|
||||||
list-style-position: @listStylePosition;
|
|
||||||
|
|
||||||
padding: @itemPadding;
|
|
||||||
line-height: @itemLineHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list > li:first-child:after,
|
|
||||||
ol.ui.list > li:first-child:after,
|
|
||||||
.ui.list > .list > .item,
|
|
||||||
.ui.list > .item:after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list li:first-child,
|
|
||||||
ol.ui.list li:first-child,
|
|
||||||
.ui.list .list > .item:first-child,
|
|
||||||
.ui.list > .item:first-child {
|
|
||||||
padding-top: 0em;
|
|
||||||
}
|
|
||||||
ul.ui.list li:last-child,
|
|
||||||
ol.ui.list li:last-child,
|
|
||||||
.ui.list .list > .item:last-child,
|
|
||||||
.ui.list > .item:last-child {
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Child List */
|
|
||||||
ul.ui.list ul,
|
|
||||||
ol.ui.list ol,
|
|
||||||
.ui.list .list {
|
|
||||||
clear: both;
|
|
||||||
margin: 0em;
|
|
||||||
padding: @childListPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Child Item */
|
|
||||||
ul.ui.list ul li,
|
|
||||||
ol.ui.list ol li,
|
|
||||||
.ui.list .list > .item {
|
|
||||||
padding: @childItemPadding;
|
|
||||||
line-height: @childItemLineHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.list .list > .item > i.icon,
|
|
||||||
.ui.list > .item > i.icon {
|
|
||||||
display: table-cell;
|
|
||||||
margin: 0em;
|
|
||||||
padding-top: @iconOffset;
|
|
||||||
padding-right: @iconDistance;
|
|
||||||
vertical-align: @iconContentVerticalAlign;
|
|
||||||
transition: @iconTransition;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > i.icon:only-child,
|
|
||||||
.ui.list > .item > i.icon:only-child {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: @iconVerticalAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.ui.list .list > .item > .image,
|
|
||||||
.ui.list > .item > .image {
|
|
||||||
display: table-cell;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0em;
|
|
||||||
vertical-align: @imageAlign;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > .image:not(:only-child):not(img),
|
|
||||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
|
||||||
padding-right: @imageDistance;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > .image img,
|
|
||||||
.ui.list > .item > .image img {
|
|
||||||
vertical-align: @imageAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.list .list > .item > img.image,
|
|
||||||
.ui.list .list > .item > .image:only-child,
|
|
||||||
.ui.list > .item > img.image,
|
|
||||||
.ui.list > .item > .image:only-child {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.ui.list .list > .item > .content,
|
|
||||||
.ui.list > .item > .content {
|
|
||||||
line-height: @contentLineHeight;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > .image + .content,
|
|
||||||
.ui.list .list > .item > .icon + .content,
|
|
||||||
.ui.list > .item > .image + .content,
|
|
||||||
.ui.list > .item > .icon + .content {
|
|
||||||
display: table-cell;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0em 0em 0em @contentDistance;
|
|
||||||
vertical-align: @contentVerticalAlign;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > img.image + .content,
|
|
||||||
.ui.list > .item > img.image + .content {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item > .content > .list,
|
|
||||||
.ui.list > .item > .content > .list {
|
|
||||||
margin-left: 0em;
|
|
||||||
padding-left: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.ui.list .list > .item .header,
|
|
||||||
.ui.list > .item .header {
|
|
||||||
display: block;
|
|
||||||
margin: 0em;
|
|
||||||
font-family: @itemHeaderFontFamily;
|
|
||||||
font-weight: @itemHeaderFontWeight;
|
|
||||||
color: @itemHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Description */
|
|
||||||
.ui.list .list > .item .description,
|
|
||||||
.ui.list > .item .description {
|
|
||||||
display: block;
|
|
||||||
color: @itemDescriptionColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Child Link */
|
|
||||||
.ui.list > .item a,
|
|
||||||
.ui.list .list > .item a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Linking Item */
|
|
||||||
.ui.list .list > a.item,
|
|
||||||
.ui.list > a.item {
|
|
||||||
cursor: pointer;
|
|
||||||
color: @itemLinkColor;
|
|
||||||
}
|
|
||||||
.ui.list .list > a.item:hover,
|
|
||||||
.ui.list > a.item:hover {
|
|
||||||
color: @itemLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Linked Item Icons */
|
|
||||||
.ui.list .list > a.item i.icon,
|
|
||||||
.ui.list > a.item i.icon {
|
|
||||||
color: @itemLinkIconColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header Link */
|
|
||||||
.ui.list .list > .item a.header,
|
|
||||||
.ui.list > .item a.header {
|
|
||||||
cursor: pointer;
|
|
||||||
color: @itemHeaderLinkColor !important;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item a.header:hover,
|
|
||||||
.ui.list > .item a.header:hover {
|
|
||||||
color: @itemHeaderLinkHoverColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floated Content */
|
|
||||||
.ui[class*="left floated"].list {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.ui[class*="right floated"].list {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.list .list > .item [class*="left floated"],
|
|
||||||
.ui.list > .item [class*="left floated"] {
|
|
||||||
float: left;
|
|
||||||
margin: @leftFloatMargin;
|
|
||||||
}
|
|
||||||
.ui.list .list > .item [class*="right floated"],
|
|
||||||
.ui.list > .item [class*="right floated"] {
|
|
||||||
float: right;
|
|
||||||
margin: @rightFloatMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Coupling
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.menu .ui.list > .item,
|
|
||||||
.ui.menu .ui.list .list > .item {
|
|
||||||
display: list-item;
|
|
||||||
table-layout: fixed;
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
list-style-type: @listStyleType;
|
|
||||||
list-style-position: @listStylePosition;
|
|
||||||
|
|
||||||
padding: @itemVerticalPadding @itemHorizontalPadding;
|
|
||||||
line-height: @itemLineHeight;
|
|
||||||
}
|
|
||||||
.ui.menu .ui.list .list > .item:before,
|
|
||||||
.ui.menu .ui.list > .item:before {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.ui.menu .ui.list .list > .item:first-child,
|
|
||||||
.ui.menu .ui.list > .item:first-child {
|
|
||||||
padding-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.menu .ui.list .list > .item:last-child,
|
|
||||||
.ui.menu .ui.list > .item:last-child {
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Horizontal
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.horizontal.list {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0em;
|
|
||||||
}
|
|
||||||
.ui.horizontal.list > .item {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: @horizontalSpacing;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.ui.horizontal.list:not(.celled) > .item:first-child {
|
|
||||||
margin-left: 0em !important;
|
|
||||||
padding-left: 0em !important;
|
|
||||||
}
|
|
||||||
.ui.horizontal.list .list {
|
|
||||||
padding-left: 0em;
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.horizontal.list > .item > .image,
|
|
||||||
.ui.horizontal.list .list > .item > .image,
|
|
||||||
.ui.horizontal.list > .item > .icon,
|
|
||||||
.ui.horizontal.list .list > .item > .icon,
|
|
||||||
.ui.horizontal.list > .item > .content,
|
|
||||||
.ui.horizontal.list .list > .item > .content {
|
|
||||||
vertical-align: @horizontalVerticalAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Padding on all elements */
|
|
||||||
.ui.horizontal.list > .item:first-child,
|
|
||||||
.ui.horizontal.list > .item:last-child {
|
|
||||||
padding-top: @itemVerticalPadding;
|
|
||||||
padding-bottom: @itemVerticalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal List */
|
|
||||||
.ui.horizontal.list > .item > i.icon {
|
|
||||||
margin: 0em;
|
|
||||||
padding: 0em @horizontalIconDistance 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.horizontal.list > .item > .icon,
|
|
||||||
.ui.horizontal.list > .item > .icon + .content {
|
|
||||||
float: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Disabled
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.list .list > .disabled.item,
|
|
||||||
.ui.list > .disabled.item {
|
|
||||||
pointer-events: none;
|
|
||||||
color: @disabledColor !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.list .list > .disabled.item,
|
|
||||||
.ui.inverted.list > .disabled.item {
|
|
||||||
color: @invertedDisabledColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Hover
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.list .list > a.item:hover .icon,
|
|
||||||
.ui.list > a.item:hover .icon {
|
|
||||||
color: @itemLinkIconHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inverted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.inverted.list .list > a.item > .icon,
|
|
||||||
.ui.inverted.list > a.item > .icon {
|
|
||||||
color: @invertedIconLinkColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.list .list > .item .header,
|
|
||||||
.ui.inverted.list > .item .header {
|
|
||||||
color: @invertedHeaderColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.list .list > .item .description,
|
|
||||||
.ui.inverted.list > .item .description {
|
|
||||||
color: @invertedDescriptionColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Item Link */
|
|
||||||
.ui.inverted.list .list > a.item,
|
|
||||||
.ui.inverted.list > a.item {
|
|
||||||
cursor: pointer;
|
|
||||||
color: @invertedItemLinkColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.list .list > a.item:hover,
|
|
||||||
.ui.inverted.list > a.item:hover {
|
|
||||||
color: @invertedItemLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Linking Content */
|
|
||||||
.ui.inverted.list .item a:not(.ui) {
|
|
||||||
color: @invertedItemLinkColor !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.list .item a:not(.ui):hover {
|
|
||||||
color: @invertedItemLinkHoverColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Aligned
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.list[class*="top aligned"] .image,
|
|
||||||
.ui.list[class*="top aligned"] .content,
|
|
||||||
.ui.list [class*="top aligned"] {
|
|
||||||
vertical-align: top !important;
|
|
||||||
}
|
|
||||||
.ui.list[class*="middle aligned"] .image,
|
|
||||||
.ui.list[class*="middle aligned"] .content,
|
|
||||||
.ui.list [class*="middle aligned"] {
|
|
||||||
vertical-align: middle !important;
|
|
||||||
}
|
|
||||||
.ui.list[class*="bottom aligned"] .image,
|
|
||||||
.ui.list[class*="bottom aligned"] .content,
|
|
||||||
.ui.list [class*="bottom aligned"] {
|
|
||||||
vertical-align: bottom !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Link
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.link.list .item,
|
|
||||||
.ui.link.list a.item,
|
|
||||||
.ui.link.list .item a:not(.ui) {
|
|
||||||
color: @linkListItemColor;
|
|
||||||
transition: @linkListTransition;
|
|
||||||
}
|
|
||||||
.ui.link.list.list a.item:hover,
|
|
||||||
.ui.link.list.list .item a:not(.ui):hover {
|
|
||||||
color: @linkListItemHoverColor;
|
|
||||||
}
|
|
||||||
.ui.link.list.list a.item:active,
|
|
||||||
.ui.link.list.list .item a:not(.ui):active {
|
|
||||||
color: @linkListItemDownColor;
|
|
||||||
}
|
|
||||||
.ui.link.list.list .active.item,
|
|
||||||
.ui.link.list.list .active.item a:not(.ui) {
|
|
||||||
color: @linkListItemActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.link.list .item,
|
|
||||||
.ui.inverted.link.list a.item,
|
|
||||||
.ui.inverted.link.list .item a:not(.ui) {
|
|
||||||
color: @invertedLinkListItemColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.link.list.list a.item:hover,
|
|
||||||
.ui.inverted.link.list.list .item a:not(.ui):hover {
|
|
||||||
color: @invertedLinkListItemHoverColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.link.list.list a.item:active,
|
|
||||||
.ui.inverted.link.list.list .item a:not(.ui):active {
|
|
||||||
color: @invertedLinkListItemDownColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.link.list.list a.active.item,
|
|
||||||
.ui.inverted.link.list.list .active.item a:not(.ui) {
|
|
||||||
color: @invertedLinkListItemActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Selection
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.selection.list .list > .item,
|
|
||||||
.ui.selection.list > .item {
|
|
||||||
cursor: pointer;
|
|
||||||
background: @selectionListBackground;
|
|
||||||
padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
|
|
||||||
margin: @selectionListItemMargin;
|
|
||||||
color: @selectionListColor;
|
|
||||||
border-radius: @selectionListItemBorderRadius;
|
|
||||||
transition: @selectionListTransition;
|
|
||||||
}
|
|
||||||
.ui.selection.list .list > .item:last-child,
|
|
||||||
.ui.selection.list > .item:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.selection.list.list > .item:hover,
|
|
||||||
.ui.selection.list > .item:hover {
|
|
||||||
background: @selectionListHoverBackground;
|
|
||||||
color: @selectionListHoverColor;
|
|
||||||
}
|
|
||||||
.ui.selection.list .list > .item:active,
|
|
||||||
.ui.selection.list > .item:active {
|
|
||||||
background: @selectionListDownBackground;
|
|
||||||
color: @selectionListDownColor;
|
|
||||||
}
|
|
||||||
.ui.selection.list .list > .item.active,
|
|
||||||
.ui.selection.list > .item.active {
|
|
||||||
background: @selectionListActiveBackground;
|
|
||||||
color: @selectionListActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted */
|
|
||||||
.ui.inverted.selection.list > .item,
|
|
||||||
.ui.inverted.selection.list > .item {
|
|
||||||
background: @invertedSelectionListBackground;
|
|
||||||
color: @invertedSelectionListColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.selection.list > .item:hover,
|
|
||||||
.ui.inverted.selection.list > .item:hover {
|
|
||||||
background: @invertedSelectionListHoverBackground;
|
|
||||||
color: @invertedSelectionListHoverColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.selection.list > .item:active,
|
|
||||||
.ui.inverted.selection.list > .item:active {
|
|
||||||
background: @invertedSelectionListDownBackground;
|
|
||||||
color: @invertedSelectionListDownColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.selection.list > .item.active,
|
|
||||||
.ui.inverted.selection.list > .item.active {
|
|
||||||
background: @invertedSelectionListActiveBackground;
|
|
||||||
color: @invertedSelectionListActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Celled / Divided Selection List */
|
|
||||||
.ui.celled.selection.list .list > .item,
|
|
||||||
.ui.divided.selection.list .list > .item,
|
|
||||||
.ui.celled.selection.list > .item,
|
|
||||||
.ui.divided.selection.list > .item {
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Animated
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.animated.list > .item {
|
|
||||||
transition: @animatedListTransition;
|
|
||||||
}
|
|
||||||
.ui.animated.list:not(.horizontal) > .item:hover {
|
|
||||||
padding-left: @animatedListIndent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Fitted
|
|
||||||
--------------------*/
|
|
||||||
.ui.fitted.list:not(.selection) .list > .item,
|
|
||||||
.ui.fitted.list:not(.selection) > .item {
|
|
||||||
padding-left: 0em;
|
|
||||||
padding-right: 0em;
|
|
||||||
}
|
|
||||||
.ui.fitted.selection.list .list > .item,
|
|
||||||
.ui.fitted.selection.list > .item {
|
|
||||||
margin-left: -@selectionListItemHorizontalPadding;
|
|
||||||
margin-right: -@selectionListItemHorizontalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Bulleted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
ul.ui.list,
|
|
||||||
.ui.bulleted.list {
|
|
||||||
margin-left: @bulletDistance;
|
|
||||||
}
|
|
||||||
ul.ui.list li,
|
|
||||||
.ui.bulleted.list .list > .item,
|
|
||||||
.ui.bulleted.list > .item {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
ul.ui.list li:before,
|
|
||||||
.ui.bulleted.list .list > .item:before,
|
|
||||||
.ui.bulleted.list > .item:before {
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
font-weight: @normal;
|
|
||||||
margin-left: @bulletOffset;
|
|
||||||
content: @bulletCharacter;
|
|
||||||
opacity: @bulletOpacity;
|
|
||||||
color: @bulletColor;
|
|
||||||
vertical-align: @bulletVerticalAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list li:before,
|
|
||||||
.ui.bulleted.list .list > a.item:before,
|
|
||||||
.ui.bulleted.list > a.item:before {
|
|
||||||
color: @bulletLinkColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ui.list ul,
|
|
||||||
.ui.bulleted.list .list {
|
|
||||||
padding-left: @bulletChildDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal Bulleted */
|
|
||||||
ul.ui.horizontal.bulleted.list,
|
|
||||||
.ui.horizontal.bulleted.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
ul.ui.horizontal.bulleted.list li,
|
|
||||||
.ui.horizontal.bulleted.list > .item {
|
|
||||||
margin-left: @horizontalBulletSpacing;
|
|
||||||
}
|
|
||||||
ul.ui.horizontal.bulleted.list li:first-child,
|
|
||||||
.ui.horizontal.bulleted.list > .item:first-child {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
ul.ui.horizontal.bulleted.list li::before,
|
|
||||||
.ui.horizontal.bulleted.list > .item::before {
|
|
||||||
color: @horizontalBulletColor;
|
|
||||||
}
|
|
||||||
ul.ui.horizontal.bulleted.list li:first-child::before,
|
|
||||||
.ui.horizontal.bulleted.list > .item:first-child::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Ordered
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
ol.ui.list,
|
|
||||||
.ui.ordered.list,
|
|
||||||
.ui.ordered.list .list,
|
|
||||||
ol.ui.list ol {
|
|
||||||
counter-reset: ordered;
|
|
||||||
margin-left: @orderedCountDistance;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
ol.ui.list li,
|
|
||||||
.ui.ordered.list .list > .item,
|
|
||||||
.ui.ordered.list > .item {
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
ol.ui.list li:before,
|
|
||||||
.ui.ordered.list .list > .item:before,
|
|
||||||
.ui.ordered.list > .item:before {
|
|
||||||
position: absolute;
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
margin-left: -(@orderedCountDistance);
|
|
||||||
counter-increment: @orderedCountName;
|
|
||||||
content: @orderedCountContent;
|
|
||||||
text-align: @orderedCountTextAlign;
|
|
||||||
color: @orderedCountColor;
|
|
||||||
vertical-align: @orderedCountVerticalAlign;
|
|
||||||
opacity: @orderedCountOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.ui.inverted.list li:before,
|
|
||||||
.ui.ordered.inverted.list .list > .item:before,
|
|
||||||
.ui.ordered.inverted.list > .item:before {
|
|
||||||
color: @orderedInvertedCountColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Value */
|
|
||||||
.ui.ordered.list > .list > .item[data-value],
|
|
||||||
.ui.ordered.list > .item[data-value] {
|
|
||||||
content: attr(data-value);
|
|
||||||
}
|
|
||||||
ol.ui.list li[value]:before {
|
|
||||||
content: attr(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Child Lists */
|
|
||||||
ol.ui.list ol,
|
|
||||||
.ui.ordered.list .list {
|
|
||||||
margin-left: @orderedChildCountDistance;
|
|
||||||
}
|
|
||||||
ol.ui.list ol li:before,
|
|
||||||
.ui.ordered.list .list > .item:before {
|
|
||||||
margin-left: @orderedChildCountOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal Ordered */
|
|
||||||
ol.ui.horizontal.list,
|
|
||||||
.ui.ordered.horizontal.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
ol.ui.horizontal.list li:before,
|
|
||||||
.ui.ordered.horizontal.list .list > .item:before,
|
|
||||||
.ui.ordered.horizontal.list > .item:before {
|
|
||||||
position: static;
|
|
||||||
margin: 0em @horizontalOrderedCountDistance 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Divided
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.divided.list > .item {
|
|
||||||
border-top: @dividedBorder;
|
|
||||||
}
|
|
||||||
.ui.divided.list .list > .item {
|
|
||||||
border-top: @dividedChildListBorder;
|
|
||||||
}
|
|
||||||
.ui.divided.list .item .list > .item {
|
|
||||||
border-top: @dividedChildItemBorder;
|
|
||||||
}
|
|
||||||
.ui.divided.list .list > .item:first-child,
|
|
||||||
.ui.divided.list > .item:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sub Menu */
|
|
||||||
.ui.divided.list:not(.horizontal) .list > .item:first-child {
|
|
||||||
border-top-width: @dividedBorderWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Divided bulleted */
|
|
||||||
.ui.divided.bulleted.list:not(.horizontal),
|
|
||||||
.ui.divided.bulleted.list .list {
|
|
||||||
margin-left: 0em;
|
|
||||||
padding-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.divided.bulleted.list > .item:not(.horizontal) {
|
|
||||||
padding-left: @bulletDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Divided Ordered */
|
|
||||||
.ui.divided.ordered.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.divided.ordered.list .list > .item,
|
|
||||||
.ui.divided.ordered.list > .item {
|
|
||||||
padding-left: @orderedCountDistance;
|
|
||||||
}
|
|
||||||
.ui.divided.ordered.list .item .list {
|
|
||||||
margin-left: 0em;
|
|
||||||
margin-right: 0em;
|
|
||||||
padding-bottom: @itemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui.divided.ordered.list .item .list > .item {
|
|
||||||
padding-left: @orderedChildCountDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Divided Selection */
|
|
||||||
.ui.divided.selection.list .list > .item,
|
|
||||||
.ui.divided.selection.list > .item {
|
|
||||||
margin: 0em;
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Divided horizontal */
|
|
||||||
.ui.divided.horizontal.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.divided.horizontal.list > .item:not(:first-child) {
|
|
||||||
padding-left: @horizontalDividedSpacing;
|
|
||||||
}
|
|
||||||
.ui.divided.horizontal.list > .item:not(:last-child) {
|
|
||||||
padding-right: @horizontalDividedSpacing;
|
|
||||||
}
|
|
||||||
.ui.divided.horizontal.list > .item {
|
|
||||||
border-top: none;
|
|
||||||
border-left: @dividedBorder;
|
|
||||||
margin: 0em;
|
|
||||||
line-height: @horizontalDividedLineHeight;
|
|
||||||
}
|
|
||||||
.ui.horizontal.divided.list > .item:first-child {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
/* Inverted */
|
|
||||||
.ui.divided.inverted.list > .item,
|
|
||||||
.ui.divided.inverted.list > .list,
|
|
||||||
.ui.divided.inverted.horizontal.list > .item {
|
|
||||||
border-color: @dividedInvertedBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Celled
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.celled.list > .item,
|
|
||||||
.ui.celled.list > .list {
|
|
||||||
border-top: @celledBorder;
|
|
||||||
padding-left: @celledHorizontalPadding;
|
|
||||||
padding-right: @celledHorizontalPadding;
|
|
||||||
}
|
|
||||||
.ui.celled.list > .item:last-child {
|
|
||||||
border-bottom: @celledBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Padding on all elements */
|
|
||||||
.ui.celled.list > .item:first-child,
|
|
||||||
.ui.celled.list > .item:last-child {
|
|
||||||
padding-top: @itemVerticalPadding;
|
|
||||||
padding-bottom: @itemVerticalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sub Menu */
|
|
||||||
.ui.celled.list .item .list > .item {
|
|
||||||
border-width: 0px;
|
|
||||||
}
|
|
||||||
.ui.celled.list .list > .item:first-child {
|
|
||||||
border-top-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Celled Bulleted */
|
|
||||||
.ui.celled.bulleted.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.celled.bulleted.list .list > .item,
|
|
||||||
.ui.celled.bulleted.list > .item {
|
|
||||||
padding-left: (@bulletDistance);
|
|
||||||
}
|
|
||||||
.ui.celled.bulleted.list .item .list {
|
|
||||||
margin-left: -(@bulletDistance);
|
|
||||||
margin-right: -(@bulletDistance);
|
|
||||||
padding-bottom: @itemVerticalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Celled Ordered */
|
|
||||||
.ui.celled.ordered.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.celled.ordered.list .list > .item,
|
|
||||||
.ui.celled.ordered.list > .item {
|
|
||||||
padding-left: @orderedCountDistance;
|
|
||||||
}
|
|
||||||
.ui.celled.ordered.list .item .list {
|
|
||||||
margin-left: 0em;
|
|
||||||
margin-right: 0em;
|
|
||||||
padding-bottom: @itemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui.celled.ordered.list .list > .item {
|
|
||||||
padding-left: @orderedChildCountDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Celled Horizontal */
|
|
||||||
.ui.horizontal.celled.list {
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.horizontal.celled.list .list > .item,
|
|
||||||
.ui.horizontal.celled.list > .item {
|
|
||||||
border-top: none;
|
|
||||||
border-left: @celledBorder;
|
|
||||||
margin: 0em;
|
|
||||||
padding-left: @horizontalCelledSpacing;
|
|
||||||
padding-right: @horizontalCelledSpacing;
|
|
||||||
|
|
||||||
line-height: @horizontalCelledLineHeight;
|
|
||||||
}
|
|
||||||
.ui.horizontal.celled.list .list > .item:last-child,
|
|
||||||
.ui.horizontal.celled.list > .item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
border-right: @celledBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted */
|
|
||||||
.ui.celled.inverted.list > .item,
|
|
||||||
.ui.celled.inverted.list > .list {
|
|
||||||
border-color: @celledInvertedBorder;
|
|
||||||
}
|
|
||||||
.ui.celled.inverted.horizontal.list .list > .item,
|
|
||||||
.ui.celled.inverted.horizontal.list > .item {
|
|
||||||
border-color: @celledInvertedBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Relaxed
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
|
|
||||||
padding-top: @relaxedItemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
|
|
||||||
padding-bottom: @relaxedItemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui.horizontal.relaxed.list .list > .item:not(:first-child),
|
|
||||||
.ui.horizontal.relaxed.list > .item:not(:first-child) {
|
|
||||||
padding-left: @relaxedHorizontalPadding;
|
|
||||||
}
|
|
||||||
.ui.horizontal.relaxed.list .list > .item:not(:last-child),
|
|
||||||
.ui.horizontal.relaxed.list > .item:not(:last-child) {
|
|
||||||
padding-right: @relaxedHorizontalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Very Relaxed */
|
|
||||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
|
|
||||||
padding-top: @veryRelaxedItemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
|
|
||||||
padding-bottom: @veryRelaxedItemVerticalPadding;
|
|
||||||
}
|
|
||||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
|
|
||||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
|
|
||||||
padding-left: @veryRelaxedHorizontalPadding;
|
|
||||||
}
|
|
||||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
|
|
||||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
|
|
||||||
padding-right: @veryRelaxedHorizontalPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Sizes
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.mini.list {
|
|
||||||
font-size: @relativeMini;
|
|
||||||
}
|
|
||||||
.ui.tiny.list {
|
|
||||||
font-size: @relativeTiny;
|
|
||||||
}
|
|
||||||
.ui.small.list {
|
|
||||||
font-size: @relativeSmall;
|
|
||||||
}
|
|
||||||
.ui.list {
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
.ui.large.list {
|
|
||||||
font-size: @relativeLarge;
|
|
||||||
}
|
|
||||||
.ui.big.list {
|
|
||||||
font-size: @relativeBig;
|
|
||||||
}
|
|
||||||
.ui.huge.list {
|
|
||||||
font-size: @relativeHuge;
|
|
||||||
}
|
|
||||||
.ui.massive.list {
|
|
||||||
font-size: @relativeMassive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.mini.horizontal.list .list > .item,
|
|
||||||
.ui.mini.horizontal.list > .item {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.horizontal.list .list > .item,
|
|
||||||
.ui.tiny.horizontal.list > .item {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.horizontal.list .list > .item,
|
|
||||||
.ui.small.horizontal.list > .item {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.horizontal.list .list > .item,
|
|
||||||
.ui.horizontal.list > .item {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.horizontal.list .list > .item,
|
|
||||||
.ui.large.horizontal.list > .item {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.horizontal.list .list > .item,
|
|
||||||
.ui.big.horizontal.list > .item {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.horizontal.list .list > .item,
|
|
||||||
.ui.huge.horizontal.list > .item {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.horizontal.list .list > .item,
|
|
||||||
.ui.massive.horizontal.list > .item {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
|
|
||||||
@ -1,331 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Loader
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0px;
|
|
||||||
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 linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
|
|
||||||
border-color: @shapeBorderColor;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: @loaderLineWidth;
|
|
||||||
|
|
||||||
box-shadow: 0px 0px 0px 1px transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Animation */
|
|
||||||
@keyframes loader {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sizes */
|
|
||||||
.ui.mini.loader:before,
|
|
||||||
.ui.mini.loader:after {
|
|
||||||
width: @mini;
|
|
||||||
height: @mini;
|
|
||||||
margin: @miniOffset;
|
|
||||||
}
|
|
||||||
.ui.tiny.loader:before,
|
|
||||||
.ui.tiny.loader:after {
|
|
||||||
width: @tiny;
|
|
||||||
height: @tiny;
|
|
||||||
margin: @tinyOffset;
|
|
||||||
}
|
|
||||||
.ui.small.loader:before,
|
|
||||||
.ui.small.loader:after {
|
|
||||||
width: @small;
|
|
||||||
height: @small;
|
|
||||||
margin: @smallOffset;
|
|
||||||
}
|
|
||||||
.ui.loader:before,
|
|
||||||
.ui.loader:after {
|
|
||||||
width: @medium;
|
|
||||||
height: @medium;
|
|
||||||
margin: @mediumOffset;
|
|
||||||
}
|
|
||||||
.ui.large.loader:before,
|
|
||||||
.ui.large.loader:after {
|
|
||||||
width: @large;
|
|
||||||
height: @large;
|
|
||||||
margin: @largeOffset;
|
|
||||||
}
|
|
||||||
.ui.big.loader:before,
|
|
||||||
.ui.big.loader:after {
|
|
||||||
width: @big;
|
|
||||||
height: @big;
|
|
||||||
margin: @bigOffset;
|
|
||||||
}
|
|
||||||
.ui.huge.loader:before,
|
|
||||||
.ui.huge.loader:after {
|
|
||||||
width: @huge;
|
|
||||||
height: @huge;
|
|
||||||
margin: @hugeOffset;
|
|
||||||
}
|
|
||||||
.ui.massive.loader:before,
|
|
||||||
.ui.massive.loader:after {
|
|
||||||
width: @massive;
|
|
||||||
height: @massive;
|
|
||||||
margin: @massiveOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Coupling
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Show inside active dimmer */
|
|
||||||
.ui.dimmer .loader {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Black Dimmer */
|
|
||||||
.ui.dimmer .ui.loader {
|
|
||||||
color: @invertedLoaderTextColor;
|
|
||||||
}
|
|
||||||
.ui.dimmer .ui.loader:before {
|
|
||||||
border-color: @invertedLoaderFillColor;
|
|
||||||
}
|
|
||||||
.ui.dimmer .ui.loader:after {
|
|
||||||
border-color: @invertedShapeBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* White Dimmer (Inverted) */
|
|
||||||
.ui.inverted.dimmer .ui.loader {
|
|
||||||
color: @loaderTextColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.loader:before {
|
|
||||||
border-color: @loaderFillColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.loader:after {
|
|
||||||
border-color: @shapeBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Text
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.text.loader {
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.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
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Loader */
|
|
||||||
.ui.inverted.dimmer .ui.mini.loader,
|
|
||||||
.ui.mini.loader {
|
|
||||||
width: @mini;
|
|
||||||
height: @mini;
|
|
||||||
font-size: @miniFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.tiny.loader,
|
|
||||||
.ui.tiny.loader {
|
|
||||||
width: @tiny;
|
|
||||||
height: @tiny;
|
|
||||||
font-size: @tinyFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.small.loader,
|
|
||||||
.ui.small.loader {
|
|
||||||
width: @small;
|
|
||||||
height: @small;
|
|
||||||
font-size: @smallFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.loader,
|
|
||||||
.ui.loader {
|
|
||||||
width: @medium;
|
|
||||||
height: @medium;
|
|
||||||
font-size: @mediumFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.large.loader,
|
|
||||||
.ui.large.loader {
|
|
||||||
width: @large;
|
|
||||||
height: @large;
|
|
||||||
font-size: @largeFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.big.loader,
|
|
||||||
.ui.big.loader {
|
|
||||||
width: @big;
|
|
||||||
height: @big;
|
|
||||||
font-size: @bigFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.huge.loader,
|
|
||||||
.ui.huge.loader {
|
|
||||||
width: @huge;
|
|
||||||
height: @huge;
|
|
||||||
font-size: @hugeFontSize;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer .ui.massive.loader,
|
|
||||||
.ui.massive.loader {
|
|
||||||
width: @massive;
|
|
||||||
height: @massive;
|
|
||||||
font-size: @massiveFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text Loader */
|
|
||||||
.ui.mini.text.loader {
|
|
||||||
min-width: @mini;
|
|
||||||
padding-top: (@mini + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.tiny.text.loader {
|
|
||||||
min-width: @tiny;
|
|
||||||
padding-top: (@tiny + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.small.text.loader {
|
|
||||||
min-width: @small;
|
|
||||||
padding-top: (@small + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.text.loader {
|
|
||||||
min-width: @medium;
|
|
||||||
padding-top: (@medium + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.large.text.loader {
|
|
||||||
min-width: @large;
|
|
||||||
padding-top: (@large + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.big.text.loader {
|
|
||||||
min-width: @big;
|
|
||||||
padding-top: (@big + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.huge.text.loader {
|
|
||||||
min-width: @huge;
|
|
||||||
padding-top: (@huge + @textDistance);
|
|
||||||
}
|
|
||||||
.ui.massive.text.loader {
|
|
||||||
min-width: @massive;
|
|
||||||
padding-top: (@massive + @textDistance);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inverted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.inverted.loader {
|
|
||||||
color: @invertedLoaderTextColor
|
|
||||||
}
|
|
||||||
.ui.inverted.loader:before {
|
|
||||||
border-color: @invertedLoaderFillColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.loader:after {
|
|
||||||
border-top-color: @invertedLoaderLineColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inline
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.inline.loader {
|
|
||||||
position: relative;
|
|
||||||
vertical-align: @inlineVerticalAlign;
|
|
||||||
margin: @inlineMargin;
|
|
||||||
left: 0em;
|
|
||||||
top: 0em;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,232 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Loader
|
|
||||||
* http://github.com/semantic-org/semantic-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.ui.placeholder .image:not(.header):not(.ui) {
|
|
||||||
height: @placeholderImageHeight;
|
|
||||||
}
|
|
||||||
.ui.placeholder .square.image:not(.header) {
|
|
||||||
height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
/* 1/1 aspect ratio */
|
|
||||||
padding-top: 100%;
|
|
||||||
}
|
|
||||||
.ui.placeholder .rectangular.image:not(.header) {
|
|
||||||
height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
/* 4/3 aspect ratio */
|
|
||||||
padding-top: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 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: 0px;
|
|
||||||
}
|
|
||||||
.ui.placeholder .line:after {
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header Image + 2 Lines */
|
|
||||||
.ui.placeholder .header {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Fluid
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.fluid.placeholder {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Rail
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em @splitDistance 0em 0em;
|
|
||||||
margin: 0em @splitDistance 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.right.rail {
|
|
||||||
left: 100%;
|
|
||||||
right: auto;
|
|
||||||
padding: 0em 0em 0em @splitDistance;
|
|
||||||
margin: 0em 0em 0em @splitDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Internal
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.left.internal.rail {
|
|
||||||
left: 0%;
|
|
||||||
right: auto;
|
|
||||||
padding: 0em 0em 0em @splitDistance;
|
|
||||||
margin: 0em 0em 0em @splitDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.right.internal.rail {
|
|
||||||
left: auto;
|
|
||||||
right: 0%;
|
|
||||||
padding: 0em @splitDistance 0em 0em;
|
|
||||||
margin: 0em @splitDistance 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Dividing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.dividing.rail {
|
|
||||||
width: @dividingWidth;
|
|
||||||
}
|
|
||||||
.ui.left.dividing.rail {
|
|
||||||
padding: 0em @splitDividingDistance 0em 0em;
|
|
||||||
margin: 0em @splitDividingDistance 0em 0em;
|
|
||||||
border-right: @dividingBorder;
|
|
||||||
}
|
|
||||||
.ui.right.dividing.rail {
|
|
||||||
border-left: @dividingBorder;
|
|
||||||
padding: 0em 0em 0em @splitDividingDistance;
|
|
||||||
margin: 0em 0em 0em @splitDividingDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Distance
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.close.rail {
|
|
||||||
width: @closeWidth;
|
|
||||||
}
|
|
||||||
.ui.close.left.rail {
|
|
||||||
padding: 0em @splitCloseDistance 0em 0em;
|
|
||||||
margin: 0em @splitCloseDistance 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.close.right.rail {
|
|
||||||
padding: 0em 0em 0em @splitCloseDistance;
|
|
||||||
margin: 0em 0em 0em @splitCloseDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.very.close.rail {
|
|
||||||
width: @veryCloseWidth;
|
|
||||||
}
|
|
||||||
.ui.very.close.left.rail {
|
|
||||||
padding: 0em @splitVeryCloseDistance 0em 0em;
|
|
||||||
margin: 0em @splitVeryCloseDistance 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.very.close.right.rail {
|
|
||||||
padding: 0em 0em 0em @splitVeryCloseDistance;
|
|
||||||
margin: 0em 0em 0em @splitVeryCloseDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Attached
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.attached.left.rail,
|
|
||||||
.ui.attached.right.rail {
|
|
||||||
padding: 0em;
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.mini.rail {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.rail {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.rail {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.rail {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.rail {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.rail {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.rail {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.rail {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,275 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Reveal
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.reveal > .visible.content {
|
|
||||||
position: absolute !important;
|
|
||||||
top: 0em !important;
|
|
||||||
left: 0em !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
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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: 0em;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fade
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fade.reveal > .visible.content {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.ui.fade.active.reveal > .visible.content,
|
|
||||||
.ui.fade.reveal:hover > .visible.content {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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: 0em;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.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 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,829 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Segment
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'element';
|
|
||||||
@element : 'segment';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Segment
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.segment {
|
|
||||||
position: relative;
|
|
||||||
background: @background;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
margin: @margin;
|
|
||||||
padding: @padding;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
border: @border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.segment:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.segment:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Vertical */
|
|
||||||
.ui.vertical.segment {
|
|
||||||
margin: 0em;
|
|
||||||
padding-left: 0em;
|
|
||||||
padding-right: 0em;
|
|
||||||
|
|
||||||
background: none transparent;
|
|
||||||
border-radius: 0px;
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-bottom: @borderWidth solid @borderColor;
|
|
||||||
}
|
|
||||||
.ui.vertical.segment:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Loose Coupling
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.ui.inverted.segment > .ui.header {
|
|
||||||
color: @white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Label */
|
|
||||||
.ui[class*="bottom attached"].segment > [class*="top attached"].label {
|
|
||||||
border-top-left-radius: 0em;
|
|
||||||
border-top-right-radius: 0em;
|
|
||||||
}
|
|
||||||
.ui[class*="top attached"].segment > [class*="bottom attached"].label {
|
|
||||||
border-bottom-left-radius: 0em;
|
|
||||||
border-bottom-right-radius: 0em;
|
|
||||||
}
|
|
||||||
.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
|
|
||||||
border-top-left-radius: 0em;
|
|
||||||
border-top-right-radius: 0em;
|
|
||||||
}
|
|
||||||
.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
|
|
||||||
border-bottom-left-radius: 0em;
|
|
||||||
border-bottom-right-radius: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid */
|
|
||||||
.ui.page.grid.segment,
|
|
||||||
.ui.grid > .row > .ui.segment.column,
|
|
||||||
.ui.grid > .ui.segment.column {
|
|
||||||
padding-top: @pageGridMargin;
|
|
||||||
padding-bottom: @pageGridMargin;
|
|
||||||
}
|
|
||||||
.ui.grid.segment {
|
|
||||||
margin: @margin;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table */
|
|
||||||
.ui.basic.table.segment {
|
|
||||||
background: @background;
|
|
||||||
border: @border;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
}
|
|
||||||
.ui[class*="very basic"].table.segment {
|
|
||||||
padding: @padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Placeholder
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.placeholder.segment {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: stretch;
|
|
||||||
max-width: initial;
|
|
||||||
animation: none;
|
|
||||||
overflow: visible;
|
|
||||||
padding: @placeholderPadding;
|
|
||||||
min-height: @placeholderMinHeight;
|
|
||||||
background: @placeholderBackground;
|
|
||||||
border-color: @placeholderBorderColor;
|
|
||||||
box-shadow: @placeholderBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.placeholder.segment .button,
|
|
||||||
.ui.placeholder.segment textarea {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.ui.placeholder.segment .field,
|
|
||||||
.ui.placeholder.segment textarea,
|
|
||||||
.ui.placeholder.segment > .ui.input,
|
|
||||||
.ui.placeholder.segment .button {
|
|
||||||
max-width: @placeholderContentMaxWidth;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.ui.placeholder.segment .column .button,
|
|
||||||
.ui.placeholder.segment .column .field,
|
|
||||||
.ui.placeholder.segment .column textarea,
|
|
||||||
.ui.placeholder.segment .column > .ui.input {
|
|
||||||
max-width: @placeholderContentMaxWidth;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.placeholder.segment > .inline {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.ui.placeholder.segment > .inline > .button {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
margin: @placeholderContentInlineButtonMargin;
|
|
||||||
}
|
|
||||||
.ui.placeholder.segment > .inline > .button:last-child {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Piled
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.piled.segments,
|
|
||||||
.ui.piled.segment {
|
|
||||||
margin: @piledMargin 0em;
|
|
||||||
box-shadow: @piledBoxShadow;
|
|
||||||
z-index: @piledZIndex;
|
|
||||||
}
|
|
||||||
.ui.piled.segment:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.piled.segment:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.piled.segments:after,
|
|
||||||
.ui.piled.segments:before,
|
|
||||||
.ui.piled.segment:after,
|
|
||||||
.ui.piled.segment:before {
|
|
||||||
background-color: @white;
|
|
||||||
visibility: visible;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
border: @piledBorder;
|
|
||||||
box-shadow: @piledBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.piled.segments:before,
|
|
||||||
.ui.piled.segment:before {
|
|
||||||
transform: rotate(-@piledDegrees);
|
|
||||||
top: 0;
|
|
||||||
z-index: -2;
|
|
||||||
}
|
|
||||||
.ui.piled.segments:after,
|
|
||||||
.ui.piled.segment:after {
|
|
||||||
transform: rotate(@piledDegrees);
|
|
||||||
top: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Piled Attached */
|
|
||||||
.ui[class*="top attached"].piled.segment {
|
|
||||||
margin-top: @piledMargin;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
.ui.piled.segment[class*="top attached"]:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.piled.segment[class*="bottom attached"] {
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-bottom: @piledMargin;
|
|
||||||
}
|
|
||||||
.ui.piled.segment[class*="bottom attached"]:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Stacked
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.stacked.segment {
|
|
||||||
padding-bottom: @stackedPadding;
|
|
||||||
}
|
|
||||||
.ui.stacked.segments:before,
|
|
||||||
.ui.stacked.segments:after,
|
|
||||||
.ui.stacked.segment:before,
|
|
||||||
.ui.stacked.segment:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -(@stackedHeight / 2);
|
|
||||||
left: 0%;
|
|
||||||
|
|
||||||
border-top: 1px solid @borderColor;
|
|
||||||
background: @stackedPageBackground;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: @stackedHeight;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.ui.stacked.segments:before,
|
|
||||||
.ui.stacked.segment:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add additional page */
|
|
||||||
.ui.tall.stacked.segments:before,
|
|
||||||
.ui.tall.stacked.segment:before {
|
|
||||||
display: block;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted */
|
|
||||||
.ui.stacked.inverted.segments:before,
|
|
||||||
.ui.stacked.inverted.segments:after,
|
|
||||||
.ui.stacked.inverted.segment:before,
|
|
||||||
.ui.stacked.inverted.segment:after {
|
|
||||||
background-color: @subtleTransparentBlack;
|
|
||||||
border-top: 1px solid @selectedBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Padded
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.padded.segment {
|
|
||||||
padding: @paddedSegmentPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="very padded"].segment {
|
|
||||||
padding: @veryPaddedSegmentPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Padded vertical */
|
|
||||||
.ui.padded.segment.vertical.segment,
|
|
||||||
.ui[class*="very padded"].vertical.segment {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Compact
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.compact.segment {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Compact Group */
|
|
||||||
.ui.compact.segments {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
.ui.compact.segments .segment,
|
|
||||||
.ui.segments .compact.segment {
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Circular
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.circular.segment {
|
|
||||||
display: table-cell;
|
|
||||||
padding: @circularPadding;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 500em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Raised
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.raised.segments,
|
|
||||||
.ui.raised.segment {
|
|
||||||
box-shadow: @raisedBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Groups
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Group */
|
|
||||||
.ui.segments {
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
margin: @groupedMargin;
|
|
||||||
border: @groupedBorder;
|
|
||||||
box-shadow: @groupedBoxShadow;
|
|
||||||
border-radius: @groupedBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.segments:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.segments:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Nested Segment */
|
|
||||||
.ui.segments > .segment {
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
margin: @groupedSegmentMargin;
|
|
||||||
width: @groupedSegmentWidth;
|
|
||||||
box-shadow: @groupedSegmentBoxShadow;
|
|
||||||
border: @groupedSegmentBorder;
|
|
||||||
border-top: @groupedSegmentDivider;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.segments:not(.horizontal) > .segment:first-child {
|
|
||||||
top: @attachedTopOffset;
|
|
||||||
bottom: 0px;
|
|
||||||
border-top: none;
|
|
||||||
margin-top: 0em;
|
|
||||||
bottom: 0px;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
top: @attachedTopOffset;
|
|
||||||
border-radius: @borderRadius @borderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom */
|
|
||||||
.ui.segments:not(.horizontal) > .segment:last-child {
|
|
||||||
top: @attachedBottomOffset;
|
|
||||||
bottom: 0px;
|
|
||||||
margin-top: 0em;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
box-shadow: @attachedBottomBoxShadow;
|
|
||||||
border-radius: 0em 0em @borderRadius @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Only */
|
|
||||||
.ui.segments:not(.horizontal) > .segment:only-child {
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Nested Group */
|
|
||||||
.ui.segments > .ui.segments {
|
|
||||||
border-top: @groupedSegmentDivider;
|
|
||||||
margin: @nestedGroupMargin;
|
|
||||||
}
|
|
||||||
.ui.segments > .segments:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
.ui.segments > .segment + .segments:not(.horizontal) {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal Group */
|
|
||||||
.ui.horizontal.segments {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0px;
|
|
||||||
padding: 0em;
|
|
||||||
background-color: @background;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
margin: @margin;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
border: @border;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nested Horizontal Group */
|
|
||||||
.ui.segments > .horizontal.segments {
|
|
||||||
margin: 0em;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0px;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-top: @groupedSegmentDivider;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal Segment */
|
|
||||||
.ui.horizontal.segments > .segment {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
-ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
|
|
||||||
margin: 0em;
|
|
||||||
min-width: 0px;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0px;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-left: @borderWidth solid @borderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Border Fixes */
|
|
||||||
.ui.segments > .horizontal.segments:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
.ui.horizontal.segments > .segment:first-child {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Disabled
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.disabled.segment {
|
|
||||||
opacity: @disabledOpacity;
|
|
||||||
color: @disabledTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Loading
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.loading.segment {
|
|
||||||
position: relative;
|
|
||||||
cursor: default;
|
|
||||||
pointer-events: none;
|
|
||||||
text-shadow: none !important;
|
|
||||||
color: transparent !important;
|
|
||||||
transition: all 0s linear;
|
|
||||||
}
|
|
||||||
.ui.loading.segment:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 0%;
|
|
||||||
left: 0%;
|
|
||||||
background: @loaderDimmerColor;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
z-index: @loaderDimmerZIndex;
|
|
||||||
}
|
|
||||||
.ui.loading.segment:after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: @loaderMargin;
|
|
||||||
width: @loaderSize;
|
|
||||||
height: @loaderSize;
|
|
||||||
|
|
||||||
animation: segment-spin @loaderSpeed linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
|
|
||||||
border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: @loaderLineWidth;
|
|
||||||
|
|
||||||
box-shadow: 0px 0px 0px 1px transparent;
|
|
||||||
visibility: visible;
|
|
||||||
z-index: @loaderLineZIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes segment-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Basic
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.basic.segment {
|
|
||||||
background: @basicBackground;
|
|
||||||
box-shadow: @basicBoxShadow;
|
|
||||||
border: @basicBorder;
|
|
||||||
border-radius: @basicBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Clearing
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.clearing.segment:after {
|
|
||||||
content: ".";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Colors
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Red */
|
|
||||||
.ui.red.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @red !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.red.segment {
|
|
||||||
background-color: @red !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orange */
|
|
||||||
.ui.orange.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @orange !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.orange.segment {
|
|
||||||
background-color: @orange !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Yellow */
|
|
||||||
.ui.yellow.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @yellow !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.yellow.segment {
|
|
||||||
background-color: @yellow !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Olive */
|
|
||||||
.ui.olive.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @olive !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.olive.segment {
|
|
||||||
background-color: @olive !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Green */
|
|
||||||
.ui.green.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @green !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.green.segment {
|
|
||||||
background-color: @green !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Teal */
|
|
||||||
.ui.teal.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @teal !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.teal.segment {
|
|
||||||
background-color: @teal !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blue */
|
|
||||||
.ui.blue.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @blue !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.blue.segment {
|
|
||||||
background-color: @blue !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Violet */
|
|
||||||
.ui.violet.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @violet !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.violet.segment {
|
|
||||||
background-color: @violet !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Purple */
|
|
||||||
.ui.purple.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @purple !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.purple.segment {
|
|
||||||
background-color: @purple !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pink */
|
|
||||||
.ui.pink.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @pink !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.pink.segment {
|
|
||||||
background-color: @pink !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Brown */
|
|
||||||
.ui.brown.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @brown !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.brown.segment {
|
|
||||||
background-color: @brown !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grey */
|
|
||||||
.ui.grey.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @grey !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.grey.segment {
|
|
||||||
background-color: @grey !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Black */
|
|
||||||
.ui.black.segment:not(.inverted) {
|
|
||||||
border-top: @coloredBorderSize solid @black !important;
|
|
||||||
}
|
|
||||||
.ui.inverted.black.segment {
|
|
||||||
background-color: @black !important;
|
|
||||||
color: @white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Aligned
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui[class*="left aligned"].segment {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.ui[class*="right aligned"].segment {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.ui[class*="center aligned"].segment {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Floated
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.floated.segment,
|
|
||||||
.ui[class*="left floated"].segment {
|
|
||||||
float: left;
|
|
||||||
margin-right: @floatedDistance;
|
|
||||||
}
|
|
||||||
.ui[class*="right floated"].segment {
|
|
||||||
float: right;
|
|
||||||
margin-left: @floatedDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Inverted
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.inverted.segment {
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.ui.inverted.segment,
|
|
||||||
.ui.primary.inverted.segment {
|
|
||||||
background: @invertedBackground;
|
|
||||||
color: @invertedTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nested */
|
|
||||||
.ui.inverted.segment .segment {
|
|
||||||
color: @textColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.segment .inverted.segment {
|
|
||||||
color: @invertedTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Attached */
|
|
||||||
.ui.inverted.attached.segment {
|
|
||||||
border-color: @solidWhiteBorderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Emphasis
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Secondary */
|
|
||||||
.ui.secondary.segment {
|
|
||||||
background: @secondaryBackground;
|
|
||||||
color: @secondaryColor;
|
|
||||||
}
|
|
||||||
.ui.secondary.inverted.segment {
|
|
||||||
background: @secondaryInvertedBackground;
|
|
||||||
color: @secondaryInvertedColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tertiary */
|
|
||||||
.ui.tertiary.segment {
|
|
||||||
background: @tertiaryBackground;
|
|
||||||
color: @tertiaryColor;
|
|
||||||
}
|
|
||||||
.ui.tertiary.inverted.segment {
|
|
||||||
background: @tertiaryInvertedBackground;
|
|
||||||
color: @tertiaryInvertedColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Attached
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Middle */
|
|
||||||
.ui.attached.segment {
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
margin: 0em @attachedHorizontalOffset;
|
|
||||||
width: @attachedWidth;
|
|
||||||
max-width: @attachedWidth;
|
|
||||||
box-shadow: @attachedBoxShadow;
|
|
||||||
border: @attachedBorder;
|
|
||||||
}
|
|
||||||
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top */
|
|
||||||
.ui[class*="top attached"].segment {
|
|
||||||
bottom: 0px;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
top: @attachedTopOffset;
|
|
||||||
margin-top: @verticalMargin;
|
|
||||||
border-radius: @borderRadius @borderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.segment[class*="top attached"]:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom */
|
|
||||||
.ui.segment[class*="bottom attached"] {
|
|
||||||
bottom: 0px;
|
|
||||||
margin-top: 0em;
|
|
||||||
top: @attachedBottomOffset;
|
|
||||||
margin-bottom: @verticalMargin;
|
|
||||||
box-shadow: @attachedBottomBoxShadow;
|
|
||||||
border-radius: 0em 0em @borderRadius @borderRadius;
|
|
||||||
}
|
|
||||||
.ui.segment[class*="bottom attached"]:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Size
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.mini.segments .segment,
|
|
||||||
.ui.mini.segment {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.segments .segment,
|
|
||||||
.ui.tiny.segment {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.segments .segment,
|
|
||||||
.ui.small.segment {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.segments .segment,
|
|
||||||
.ui.segment {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.segments .segment,
|
|
||||||
.ui.large.segment {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.segments .segment,
|
|
||||||
.ui.big.segment {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.segments .segment,
|
|
||||||
.ui.huge.segment {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.segments .segment,
|
|
||||||
.ui.massive.segment {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,562 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Step
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Step
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Load Theme
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
@type : 'element';
|
|
||||||
@element : 'step';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Plural
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.steps {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: stretch;
|
|
||||||
margin: @stepMargin;
|
|
||||||
background: @stepsBackground;
|
|
||||||
box-shadow: @stepsBoxShadow;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
border-radius: @stepsBorderRadius;
|
|
||||||
border: @stepsBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* First Steps */
|
|
||||||
.ui.steps:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Last Steps */
|
|
||||||
.ui.steps:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Singular
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.steps .step {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
vertical-align: middle;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: @justifyContent;
|
|
||||||
|
|
||||||
margin: @verticalMargin @horizontalMargin;
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
background: @background;
|
|
||||||
color: @textColor;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
border: @border;
|
|
||||||
border-right: @divider;
|
|
||||||
transition: @transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
.ui.steps .step:after {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 2;
|
|
||||||
content: '';
|
|
||||||
top: @arrowTopOffset;
|
|
||||||
right: @arrowRightOffset;
|
|
||||||
border: medium none;
|
|
||||||
background-color: @arrowBackgroundColor;
|
|
||||||
width: @arrowSize;
|
|
||||||
height: @arrowSize;
|
|
||||||
|
|
||||||
border-style: solid;
|
|
||||||
border-color: @borderColor;
|
|
||||||
border-width: @arrowBorderWidth;
|
|
||||||
|
|
||||||
transition: @transition;
|
|
||||||
transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* First Step */
|
|
||||||
.ui.steps .step:first-child {
|
|
||||||
padding-left: @horizontalPadding;
|
|
||||||
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Last Step */
|
|
||||||
.ui.steps .step:last-child {
|
|
||||||
border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
|
|
||||||
}
|
|
||||||
.ui.steps .step:last-child {
|
|
||||||
border-right: none;
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Only Step */
|
|
||||||
.ui.steps .step:only-child {
|
|
||||||
border-radius: @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Content
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Title */
|
|
||||||
.ui.steps .step .title {
|
|
||||||
font-family: @titleFontFamily;
|
|
||||||
font-size: @titleFontSize;
|
|
||||||
font-weight: @titleFontWeight;
|
|
||||||
}
|
|
||||||
.ui.steps .step > .title {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Description */
|
|
||||||
.ui.steps .step .description {
|
|
||||||
font-weight: @descriptionFontWeight;
|
|
||||||
font-size: @descriptionFontSize;
|
|
||||||
color: @descriptionColor;
|
|
||||||
}
|
|
||||||
.ui.steps .step > .description {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.ui.steps .step .title ~ .description {
|
|
||||||
margin-top: @descriptionDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.steps .step > .icon {
|
|
||||||
line-height: 1;
|
|
||||||
font-size: @iconSize;
|
|
||||||
margin: 0em @iconDistance 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.steps .step > .icon,
|
|
||||||
.ui.steps .step > .icon ~ .content {
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
align-self: @iconAlign;
|
|
||||||
}
|
|
||||||
.ui.steps .step > .icon ~ .content {
|
|
||||||
flex-grow: 1 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal Icon */
|
|
||||||
.ui.steps:not(.vertical) .step > .icon {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Link */
|
|
||||||
.ui.steps .link.step,
|
|
||||||
.ui.steps a.step {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Ordered
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.ordered.steps {
|
|
||||||
counter-reset: ordered;
|
|
||||||
}
|
|
||||||
.ui.ordered.steps .step:before {
|
|
||||||
display: block;
|
|
||||||
position: static;
|
|
||||||
text-align: center;
|
|
||||||
content: counters(ordered, ".");
|
|
||||||
align-self: @iconAlign;
|
|
||||||
margin-right: @iconDistance;
|
|
||||||
font-size: @iconSize;
|
|
||||||
counter-increment: ordered;
|
|
||||||
font-family: @orderedFontFamily;
|
|
||||||
font-weight: @orderedFontWeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.ordered.steps .step > * {
|
|
||||||
display: block;
|
|
||||||
align-self: @iconAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Vertical
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.vertical.steps {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step {
|
|
||||||
justify-content: flex-start;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: @verticalDivider;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step:first-child {
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step:only-child {
|
|
||||||
border-radius: @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
.ui.vertical.steps .step:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step:after {
|
|
||||||
top: @verticalArrowTopOffset;
|
|
||||||
right: @verticalArrowRightOffset;
|
|
||||||
border-width: @verticalArrowBorderWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.vertical.steps .step:after {
|
|
||||||
display: @verticalArrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .active.step:after {
|
|
||||||
display: @verticalActiveArrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .step:last-child:after {
|
|
||||||
display: @verticalLastArrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.vertical.steps .active.step:last-child:after {
|
|
||||||
display: @verticalActiveLastArrowDisplay;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*---------------
|
|
||||||
Responsive
|
|
||||||
----------------*/
|
|
||||||
|
|
||||||
/* Mobile (Default) */
|
|
||||||
@media only screen and (max-width: (@largestMobileScreen)) {
|
|
||||||
|
|
||||||
.ui.steps:not(.unstackable) {
|
|
||||||
display: inline-flex;
|
|
||||||
overflow: visible;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.ui.steps:not(.unstackable) .step {
|
|
||||||
width: 100% !important;
|
|
||||||
flex-direction: column;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
}
|
|
||||||
.ui.steps:not(.unstackable) .step:first-child {
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.steps:not(.unstackable) .step:last-child {
|
|
||||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
.ui.steps:not(.unstackable) .step:after {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.ui.steps:not(.unstackable) .step .content {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.steps:not(.unstackable) .step > .icon,
|
|
||||||
.ui.ordered.steps:not(.unstackable) .step:before {
|
|
||||||
margin: 0em 0em @mobileIconDistance 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Link Hover */
|
|
||||||
.ui.steps .link.step:hover::after,
|
|
||||||
.ui.steps .link.step:hover,
|
|
||||||
.ui.steps a.step:hover::after,
|
|
||||||
.ui.steps a.step:hover {
|
|
||||||
background: @hoverBackground;
|
|
||||||
color: @hoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Link Down */
|
|
||||||
.ui.steps .link.step:active::after,
|
|
||||||
.ui.steps .link.step:active,
|
|
||||||
.ui.steps a.step:active::after,
|
|
||||||
.ui.steps a.step:active {
|
|
||||||
background: @downBackground;
|
|
||||||
color: @downColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active */
|
|
||||||
.ui.steps .step.active {
|
|
||||||
cursor: auto;
|
|
||||||
background: @activeBackground;
|
|
||||||
}
|
|
||||||
.ui.steps .step.active:after {
|
|
||||||
background: @activeBackground;
|
|
||||||
}
|
|
||||||
.ui.steps .step.active .title {
|
|
||||||
color: @activeColor;
|
|
||||||
}
|
|
||||||
.ui.ordered.steps .step.active:before,
|
|
||||||
.ui.steps .active.step .icon {
|
|
||||||
color: @activeIconColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Arrow */
|
|
||||||
.ui.steps .step:after {
|
|
||||||
display: @arrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.steps .active.step:after {
|
|
||||||
display: @activeArrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.steps .step:last-child:after {
|
|
||||||
display: @lastArrowDisplay;
|
|
||||||
}
|
|
||||||
.ui.steps .active.step:last-child:after {
|
|
||||||
display: @activeLastArrowDisplay;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Hover */
|
|
||||||
.ui.steps .link.active.step:hover::after,
|
|
||||||
.ui.steps .link.active.step:hover,
|
|
||||||
.ui.steps a.active.step:hover::after,
|
|
||||||
.ui.steps a.active.step:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background: @activeHoverBackground;
|
|
||||||
color: @activeHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Completed */
|
|
||||||
.ui.steps .step.completed > .icon:before,
|
|
||||||
.ui.ordered.steps .step.completed:before {
|
|
||||||
color: @completedColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Disabled */
|
|
||||||
.ui.steps .disabled.step {
|
|
||||||
cursor: auto;
|
|
||||||
background: @disabledBackground;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.ui.steps .disabled.step,
|
|
||||||
.ui.steps .disabled.step .title,
|
|
||||||
.ui.steps .disabled.step .description {
|
|
||||||
color: @disabledColor;
|
|
||||||
}
|
|
||||||
.ui.steps .disabled.step:after {
|
|
||||||
background: @disabledBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Stackable
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Tablet Or Below */
|
|
||||||
@media only screen and (max-width: @largestTabletScreen) {
|
|
||||||
|
|
||||||
.ui[class*="tablet stackable"].steps {
|
|
||||||
display: inline-flex;
|
|
||||||
overflow: visible;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Steps */
|
|
||||||
.ui[class*="tablet stackable"].steps .step {
|
|
||||||
flex-direction: column;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
}
|
|
||||||
.ui[class*="tablet stackable"].steps .step:first-child {
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui[class*="tablet stackable"].steps .step:last-child {
|
|
||||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
.ui[class*="tablet stackable"].steps .step:after {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.ui[class*="tablet stackable"].steps .step .content {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui[class*="tablet stackable"].steps .step > .icon,
|
|
||||||
.ui[class*="tablet stackable"].ordered.steps .step:before {
|
|
||||||
margin: 0em 0em @mobileIconDistance 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fluid
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Fluid */
|
|
||||||
.ui.fluid.steps {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Attached
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Top */
|
|
||||||
.ui.attached.steps {
|
|
||||||
width: @attachedWidth !important;
|
|
||||||
margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
|
|
||||||
max-width: @attachedWidth;
|
|
||||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.attached.steps .step:first-child {
|
|
||||||
border-radius: @stepsBorderRadius 0em 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.attached.steps .step:last-child {
|
|
||||||
border-radius: 0em @stepsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom */
|
|
||||||
.ui.bottom.attached.steps {
|
|
||||||
margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
|
|
||||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.bottom.attached.steps .step:first-child {
|
|
||||||
border-radius: 0em 0em 0em @stepsBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.bottom.attached.steps .step:last-child {
|
|
||||||
border-radius: 0em 0em @stepsBorderRadius 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Evenly Divided
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.one.steps,
|
|
||||||
.ui.two.steps,
|
|
||||||
.ui.three.steps,
|
|
||||||
.ui.four.steps,
|
|
||||||
.ui.five.steps,
|
|
||||||
.ui.six.steps,
|
|
||||||
.ui.seven.steps,
|
|
||||||
.ui.eight.steps {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.ui.one.steps > .step,
|
|
||||||
.ui.two.steps > .step,
|
|
||||||
.ui.three.steps > .step,
|
|
||||||
.ui.four.steps > .step,
|
|
||||||
.ui.five.steps > .step,
|
|
||||||
.ui.six.steps > .step,
|
|
||||||
.ui.seven.steps > .step,
|
|
||||||
.ui.eight.steps > .step {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
.ui.one.steps > .step {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.ui.two.steps > .step {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.ui.three.steps > .step {
|
|
||||||
width: 33.333%;
|
|
||||||
}
|
|
||||||
.ui.four.steps > .step {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
.ui.five.steps > .step {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
.ui.six.steps > .step {
|
|
||||||
width: 16.666%;
|
|
||||||
}
|
|
||||||
.ui.seven.steps > .step {
|
|
||||||
width: 14.285%;
|
|
||||||
}
|
|
||||||
.ui.eight.steps > .step {
|
|
||||||
width: 12.500%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Sizes
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.ui.mini.steps .step,
|
|
||||||
.ui.mini.step {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.steps .step,
|
|
||||||
.ui.tiny.step {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.steps .step,
|
|
||||||
.ui.small.step {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.steps .step,
|
|
||||||
.ui.step {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.steps .step,
|
|
||||||
.ui.large.step {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.steps .step,
|
|
||||||
.ui.big.step {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.steps .step,
|
|
||||||
.ui.huge.step {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.steps .step,
|
|
||||||
.ui.massive.step {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Reset
|
|
||||||
* http://github.com/semantic-org/semantic-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,487 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Site
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
$.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,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
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($.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',
|
|
||||||
'checkbox',
|
|
||||||
'dimmer',
|
|
||||||
'dropdown',
|
|
||||||
'embed',
|
|
||||||
'form',
|
|
||||||
'modal',
|
|
||||||
'nag',
|
|
||||||
'popup',
|
|
||||||
'rating',
|
|
||||||
'shape',
|
|
||||||
'sidebar',
|
|
||||||
'state',
|
|
||||||
'sticky',
|
|
||||||
'tab',
|
|
||||||
'transition',
|
|
||||||
'visit',
|
|
||||||
'visibility'
|
|
||||||
],
|
|
||||||
|
|
||||||
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,208 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Site
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
overflow-x: @pageOverflowX;
|
|
||||||
min-width: @pageMinWidth;
|
|
||||||
background: @pageBackground;
|
|
||||||
font-family: @pageFont;
|
|
||||||
font-size: @fontSize;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
color: @textColor;
|
|
||||||
font-smoothing: @fontSmoothing;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Headers
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
font-family: @headerFont;
|
|
||||||
line-height: @headerLineHeight;
|
|
||||||
margin: @headerMargin;
|
|
||||||
font-weight: @headerFontWeight;
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
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: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:last-child,
|
|
||||||
h2:last-child,
|
|
||||||
h3:last-child,
|
|
||||||
h4:last-child,
|
|
||||||
h5:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Text
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: @paragraphMargin;
|
|
||||||
line-height: @paragraphLineHeight;
|
|
||||||
}
|
|
||||||
p:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
p:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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::-webkit-scrollbar-track {
|
|
||||||
background: @trackInvertedBackground;
|
|
||||||
}
|
|
||||||
body .ui.inverted::-webkit-scrollbar-thumb {
|
|
||||||
background: @thumbInvertedBackground;
|
|
||||||
}
|
|
||||||
body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
|
|
||||||
background: @thumbInvertedInactiveBackground;
|
|
||||||
}
|
|
||||||
body .ui.inverted::-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();
|
|
||||||
@ -1,613 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Accordion
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.accordion = function(parameters) {
|
|
||||||
var
|
|
||||||
$allModules = $(this),
|
|
||||||
|
|
||||||
time = new Date().getTime(),
|
|
||||||
performance = [],
|
|
||||||
|
|
||||||
query = arguments[0],
|
|
||||||
methodInvoked = (typeof query == 'string'),
|
|
||||||
queryArguments = [].slice.call(arguments, 1),
|
|
||||||
|
|
||||||
requestAnimationFrame = window.requestAnimationFrame
|
|
||||||
|| window.mozRequestAnimationFrame
|
|
||||||
|| window.webkitRequestAnimationFrame
|
|
||||||
|| window.msRequestAnimationFrame
|
|
||||||
|| function(callback) { setTimeout(callback, 0); },
|
|
||||||
|
|
||||||
returnedValue
|
|
||||||
;
|
|
||||||
$allModules
|
|
||||||
.each(function() {
|
|
||||||
var
|
|
||||||
settings = ( $.isPlainObject(parameters) )
|
|
||||||
? $.extend(true, {}, $.fn.accordion.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.accordion.settings),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
moduleSelector = $allModules.selector || '',
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$title = $module.find(selector.title),
|
|
||||||
$content = $module.find(selector.content),
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
observer,
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.debug('Initializing', $module);
|
|
||||||
module.bind.events();
|
|
||||||
if(settings.observeChanges) {
|
|
||||||
module.observeChanges();
|
|
||||||
}
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.debug('Destroying previous instance', $module);
|
|
||||||
$module
|
|
||||||
.off(eventNamespace)
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
$title = $module.find(selector.title);
|
|
||||||
$content = $module.find(selector.content);
|
|
||||||
},
|
|
||||||
|
|
||||||
observeChanges: function() {
|
|
||||||
if('MutationObserver' in window) {
|
|
||||||
observer = new MutationObserver(function(mutations) {
|
|
||||||
module.debug('DOM tree modified, updating selector cache');
|
|
||||||
module.refresh();
|
|
||||||
});
|
|
||||||
observer.observe(element, {
|
|
||||||
childList : true,
|
|
||||||
subtree : true
|
|
||||||
});
|
|
||||||
module.debug('Setting up mutation observer', observer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
module.debug('Binding delegated events');
|
|
||||||
$module
|
|
||||||
.on(settings.on + eventNamespace, selector.trigger, module.event.click)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
click: function() {
|
|
||||||
module.toggle.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle: function(query) {
|
|
||||||
var
|
|
||||||
$activeTitle = (query !== undefined)
|
|
||||||
? (typeof query === 'number')
|
|
||||||
? $title.eq(query)
|
|
||||||
: $(query).closest(selector.title)
|
|
||||||
: $(this).closest(selector.title),
|
|
||||||
$activeContent = $activeTitle.next($content),
|
|
||||||
isAnimating = $activeContent.hasClass(className.animating),
|
|
||||||
isActive = $activeContent.hasClass(className.active),
|
|
||||||
isOpen = (isActive && !isAnimating),
|
|
||||||
isOpening = (!isActive && isAnimating)
|
|
||||||
;
|
|
||||||
module.debug('Toggling visibility of content', $activeTitle);
|
|
||||||
if(isOpen || isOpening) {
|
|
||||||
if(settings.collapsible) {
|
|
||||||
module.close.call($activeTitle);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Cannot close accordion content collapsing is disabled');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.open.call($activeTitle);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
open: function(query) {
|
|
||||||
var
|
|
||||||
$activeTitle = (query !== undefined)
|
|
||||||
? (typeof query === 'number')
|
|
||||||
? $title.eq(query)
|
|
||||||
: $(query).closest(selector.title)
|
|
||||||
: $(this).closest(selector.title),
|
|
||||||
$activeContent = $activeTitle.next($content),
|
|
||||||
isAnimating = $activeContent.hasClass(className.animating),
|
|
||||||
isActive = $activeContent.hasClass(className.active),
|
|
||||||
isOpen = (isActive || isAnimating)
|
|
||||||
;
|
|
||||||
if(isOpen) {
|
|
||||||
module.debug('Accordion already open, skipping', $activeContent);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Opening accordion content', $activeTitle);
|
|
||||||
settings.onOpening.call($activeContent);
|
|
||||||
settings.onChanging.call($activeContent);
|
|
||||||
if(settings.exclusive) {
|
|
||||||
module.closeOthers.call($activeTitle);
|
|
||||||
}
|
|
||||||
$activeTitle
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
$activeContent
|
|
||||||
.stop(true, true)
|
|
||||||
.addClass(className.animating)
|
|
||||||
;
|
|
||||||
if(settings.animateChildren) {
|
|
||||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
|
||||||
$activeContent
|
|
||||||
.children()
|
|
||||||
.transition({
|
|
||||||
animation : 'fade in',
|
|
||||||
queue : false,
|
|
||||||
useFailSafe : true,
|
|
||||||
debug : settings.debug,
|
|
||||||
verbose : settings.verbose,
|
|
||||||
duration : settings.duration
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$activeContent
|
|
||||||
.children()
|
|
||||||
.stop(true, true)
|
|
||||||
.animate({
|
|
||||||
opacity: 1
|
|
||||||
}, settings.duration, module.resetOpacity)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$activeContent
|
|
||||||
.slideDown(settings.duration, settings.easing, function() {
|
|
||||||
$activeContent
|
|
||||||
.removeClass(className.animating)
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
module.reset.display.call(this);
|
|
||||||
settings.onOpen.call(this);
|
|
||||||
settings.onChange.call(this);
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
close: function(query) {
|
|
||||||
var
|
|
||||||
$activeTitle = (query !== undefined)
|
|
||||||
? (typeof query === 'number')
|
|
||||||
? $title.eq(query)
|
|
||||||
: $(query).closest(selector.title)
|
|
||||||
: $(this).closest(selector.title),
|
|
||||||
$activeContent = $activeTitle.next($content),
|
|
||||||
isAnimating = $activeContent.hasClass(className.animating),
|
|
||||||
isActive = $activeContent.hasClass(className.active),
|
|
||||||
isOpening = (!isActive && isAnimating),
|
|
||||||
isClosing = (isActive && isAnimating)
|
|
||||||
;
|
|
||||||
if((isActive || isOpening) && !isClosing) {
|
|
||||||
module.debug('Closing accordion content', $activeContent);
|
|
||||||
settings.onClosing.call($activeContent);
|
|
||||||
settings.onChanging.call($activeContent);
|
|
||||||
$activeTitle
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
$activeContent
|
|
||||||
.stop(true, true)
|
|
||||||
.addClass(className.animating)
|
|
||||||
;
|
|
||||||
if(settings.animateChildren) {
|
|
||||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
|
||||||
$activeContent
|
|
||||||
.children()
|
|
||||||
.transition({
|
|
||||||
animation : 'fade out',
|
|
||||||
queue : false,
|
|
||||||
useFailSafe : true,
|
|
||||||
debug : settings.debug,
|
|
||||||
verbose : settings.verbose,
|
|
||||||
duration : settings.duration
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$activeContent
|
|
||||||
.children()
|
|
||||||
.stop(true, true)
|
|
||||||
.animate({
|
|
||||||
opacity: 0
|
|
||||||
}, settings.duration, module.resetOpacity)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$activeContent
|
|
||||||
.slideUp(settings.duration, settings.easing, function() {
|
|
||||||
$activeContent
|
|
||||||
.removeClass(className.animating)
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
module.reset.display.call(this);
|
|
||||||
settings.onClose.call(this);
|
|
||||||
settings.onChange.call(this);
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
closeOthers: function(index) {
|
|
||||||
var
|
|
||||||
$activeTitle = (index !== undefined)
|
|
||||||
? $title.eq(index)
|
|
||||||
: $(this).closest(selector.title),
|
|
||||||
$parentTitles = $activeTitle.parents(selector.content).prev(selector.title),
|
|
||||||
$activeAccordion = $activeTitle.closest(selector.accordion),
|
|
||||||
activeSelector = selector.title + '.' + className.active + ':visible',
|
|
||||||
activeContent = selector.content + '.' + className.active + ':visible',
|
|
||||||
$openTitles,
|
|
||||||
$nestedTitles,
|
|
||||||
$openContents
|
|
||||||
;
|
|
||||||
if(settings.closeNested) {
|
|
||||||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
|
||||||
$openContents = $openTitles.next($content);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
|
||||||
$nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
|
|
||||||
$openTitles = $openTitles.not($nestedTitles);
|
|
||||||
$openContents = $openTitles.next($content);
|
|
||||||
}
|
|
||||||
if( ($openTitles.length > 0) ) {
|
|
||||||
module.debug('Exclusive enabled, closing other content', $openTitles);
|
|
||||||
$openTitles
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
$openContents
|
|
||||||
.removeClass(className.animating)
|
|
||||||
.stop(true, true)
|
|
||||||
;
|
|
||||||
if(settings.animateChildren) {
|
|
||||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
|
||||||
$openContents
|
|
||||||
.children()
|
|
||||||
.transition({
|
|
||||||
animation : 'fade out',
|
|
||||||
useFailSafe : true,
|
|
||||||
debug : settings.debug,
|
|
||||||
verbose : settings.verbose,
|
|
||||||
duration : settings.duration
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$openContents
|
|
||||||
.children()
|
|
||||||
.stop(true, true)
|
|
||||||
.animate({
|
|
||||||
opacity: 0
|
|
||||||
}, settings.duration, module.resetOpacity)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$openContents
|
|
||||||
.slideUp(settings.duration , settings.easing, function() {
|
|
||||||
$(this).removeClass(className.active);
|
|
||||||
module.reset.display.call(this);
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: {
|
|
||||||
|
|
||||||
display: function() {
|
|
||||||
module.verbose('Removing inline display from element', this);
|
|
||||||
$(this).css('display', '');
|
|
||||||
if( $(this).attr('style') === '') {
|
|
||||||
$(this)
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
opacity: function() {
|
|
||||||
module.verbose('Removing inline opacity from element', this);
|
|
||||||
$(this).css('opacity', '');
|
|
||||||
if( $(this).attr('style') === '') {
|
|
||||||
$(this)
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
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) {
|
|
||||||
module.debug('Changing internal', name, value);
|
|
||||||
if(value !== undefined) {
|
|
||||||
if( $.isPlainObject(name) ) {
|
|
||||||
$.extend(true, module, name);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
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($.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.accordion.settings = {
|
|
||||||
|
|
||||||
name : 'Accordion',
|
|
||||||
namespace : 'accordion',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
on : 'click', // event on title that opens accordion
|
|
||||||
|
|
||||||
observeChanges : true, // whether accordion should automatically refresh on DOM insertion
|
|
||||||
|
|
||||||
exclusive : true, // whether a single accordion content panel should be open at once
|
|
||||||
collapsible : true, // whether accordion content can be closed
|
|
||||||
closeNested : false, // whether nested content should be closed when a panel is closed
|
|
||||||
animateChildren : true, // whether children opacity should be animated
|
|
||||||
|
|
||||||
duration : 350, // duration of animation
|
|
||||||
easing : 'easeOutQuad', // easing equation for animation
|
|
||||||
|
|
||||||
onOpening : function(){}, // callback before open animation
|
|
||||||
onClosing : function(){}, // callback before closing animation
|
|
||||||
onChanging : function(){}, // callback before closing or opening animation
|
|
||||||
|
|
||||||
onOpen : function(){}, // callback after open animation
|
|
||||||
onClose : function(){}, // callback after closing animation
|
|
||||||
onChange : function(){}, // callback after closing or opening animation
|
|
||||||
|
|
||||||
error: {
|
|
||||||
method : 'The method you called is not defined'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
active : 'active',
|
|
||||||
animating : 'animating'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
accordion : '.accordion',
|
|
||||||
title : '.title',
|
|
||||||
trigger : '.title',
|
|
||||||
content : '.content'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Adds easing
|
|
||||||
$.extend( $.easing, {
|
|
||||||
easeOutQuad: function (x, t, b, c, d) {
|
|
||||||
return -c *(t/=d)*(t-2) + b;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
|
|
||||||
@ -1,219 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Accordion
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'accordion';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Accordion
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.accordion,
|
|
||||||
.ui.accordion .accordion {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.ui.accordion .accordion {
|
|
||||||
margin: @childAccordionMargin;
|
|
||||||
padding: @childAccordionPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Title */
|
|
||||||
.ui.accordion .title,
|
|
||||||
.ui.accordion .accordion .title {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default Styling */
|
|
||||||
.ui.accordion .title:not(.ui) {
|
|
||||||
padding: @titlePadding;
|
|
||||||
font-family: @titleFont;
|
|
||||||
font-size: @titleFontSize;
|
|
||||||
color: @titleColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.ui.accordion .title ~ .content,
|
|
||||||
.ui.accordion .accordion .title ~ .content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default Styling */
|
|
||||||
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
|
|
||||||
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
|
|
||||||
margin: @contentMargin;
|
|
||||||
padding: @contentPadding;
|
|
||||||
}
|
|
||||||
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
.ui.accordion .title .dropdown.icon,
|
|
||||||
.ui.accordion .accordion .title .dropdown.icon {
|
|
||||||
display: @iconDisplay;
|
|
||||||
float: @iconFloat;
|
|
||||||
opacity: @iconOpacity;
|
|
||||||
width: @iconWidth;
|
|
||||||
height: @iconHeight;
|
|
||||||
margin: @iconMargin;
|
|
||||||
padding: @iconPadding;
|
|
||||||
font-size: @iconFontSize;
|
|
||||||
transition: @iconTransition;
|
|
||||||
vertical-align: @iconVerticalAlign;
|
|
||||||
transform: @iconTransform;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Coupling
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Menu */
|
|
||||||
.ui.accordion.menu .item .title {
|
|
||||||
display: block;
|
|
||||||
padding: @menuTitlePadding;
|
|
||||||
}
|
|
||||||
.ui.accordion.menu .item .title > .dropdown.icon {
|
|
||||||
float: @menuIconFloat;
|
|
||||||
margin: @menuIconMargin;
|
|
||||||
transform: @menuIconTransform;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.ui.accordion .ui.header .dropdown.icon {
|
|
||||||
font-size: @iconFontSize;
|
|
||||||
margin: @iconMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.accordion .active.title .dropdown.icon,
|
|
||||||
.ui.accordion .accordion .active.title .dropdown.icon {
|
|
||||||
transform: @activeIconTransform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.accordion.menu .item .active.title > .dropdown.icon {
|
|
||||||
transform: @activeIconTransform;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Styled
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.styled.accordion {
|
|
||||||
width: @styledWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.styled.accordion,
|
|
||||||
.ui.styled.accordion .accordion {
|
|
||||||
border-radius: @styledBorderRadius;
|
|
||||||
background: @styledBackground;
|
|
||||||
box-shadow: @styledBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.styled.accordion .title,
|
|
||||||
.ui.styled.accordion .accordion .title {
|
|
||||||
margin: @styledTitleMargin;
|
|
||||||
padding: @styledTitlePadding;
|
|
||||||
color: @styledTitleColor;
|
|
||||||
font-weight: @styledTitleFontWeight;
|
|
||||||
border-top: @styledTitleBorder;
|
|
||||||
transition: @styledTitleTransition;
|
|
||||||
}
|
|
||||||
.ui.styled.accordion > .title:first-child,
|
|
||||||
.ui.styled.accordion .accordion .title:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.ui.styled.accordion .content,
|
|
||||||
.ui.styled.accordion .accordion .content {
|
|
||||||
margin: @styledContentMargin;
|
|
||||||
padding: @styledContentPadding;
|
|
||||||
}
|
|
||||||
.ui.styled.accordion .accordion .content {
|
|
||||||
padding: @styledChildContentMargin;
|
|
||||||
padding: @styledChildContentPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Hover */
|
|
||||||
.ui.styled.accordion .title:hover,
|
|
||||||
.ui.styled.accordion .active.title,
|
|
||||||
.ui.styled.accordion .accordion .title:hover,
|
|
||||||
.ui.styled.accordion .accordion .active.title {
|
|
||||||
background: @styledTitleHoverBackground;
|
|
||||||
color: @styledTitleHoverColor;
|
|
||||||
}
|
|
||||||
.ui.styled.accordion .accordion .title:hover,
|
|
||||||
.ui.styled.accordion .accordion .active.title {
|
|
||||||
background: @styledHoverChildTitleBackground;
|
|
||||||
color: @styledHoverChildTitleColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Active */
|
|
||||||
.ui.styled.accordion .active.title {
|
|
||||||
background: @styledActiveTitleBackground;
|
|
||||||
color: @styledActiveTitleColor;
|
|
||||||
}
|
|
||||||
.ui.styled.accordion .accordion .active.title {
|
|
||||||
background: @styledActiveChildTitleBackground;
|
|
||||||
color: @styledActiveChildTitleColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.accordion .active.content,
|
|
||||||
.ui.accordion .accordion .active.content {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fluid
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fluid.accordion,
|
|
||||||
.ui.fluid.accordion .accordion {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inverted.accordion .title:not(.ui) {
|
|
||||||
color: @invertedTitleColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
|
|
||||||
@ -1,831 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Checkbox
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.checkbox = 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 = $.extend(true, {}, $.fn.checkbox.settings, parameters),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$label = $(this).children(selector.label),
|
|
||||||
$input = $(this).children(selector.input),
|
|
||||||
input = $input[0],
|
|
||||||
|
|
||||||
initialLoad = false,
|
|
||||||
shortcutPressed = false,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
|
|
||||||
observer,
|
|
||||||
element = this,
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.verbose('Initializing checkbox', settings);
|
|
||||||
|
|
||||||
module.create.label();
|
|
||||||
module.bind.events();
|
|
||||||
|
|
||||||
module.set.tabbable();
|
|
||||||
module.hide.input();
|
|
||||||
|
|
||||||
module.observeChanges();
|
|
||||||
module.instantiate();
|
|
||||||
module.setup();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying module');
|
|
||||||
module.unbind.events();
|
|
||||||
module.show.input();
|
|
||||||
$module.removeData(moduleNamespace);
|
|
||||||
},
|
|
||||||
|
|
||||||
fix: {
|
|
||||||
reference: function() {
|
|
||||||
if( $module.is(selector.input) ) {
|
|
||||||
module.debug('Behavior called on <input> adjusting invoked element');
|
|
||||||
$module = $module.closest(selector.checkbox);
|
|
||||||
module.refresh();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setup: function() {
|
|
||||||
module.set.initialLoad();
|
|
||||||
if( module.is.indeterminate() ) {
|
|
||||||
module.debug('Initial value is indeterminate');
|
|
||||||
module.indeterminate();
|
|
||||||
}
|
|
||||||
else if( module.is.checked() ) {
|
|
||||||
module.debug('Initial value is checked');
|
|
||||||
module.check();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Initial value is unchecked');
|
|
||||||
module.uncheck();
|
|
||||||
}
|
|
||||||
module.remove.initialLoad();
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
$label = $module.children(selector.label);
|
|
||||||
$input = $module.children(selector.input);
|
|
||||||
input = $input[0];
|
|
||||||
},
|
|
||||||
|
|
||||||
hide: {
|
|
||||||
input: function() {
|
|
||||||
module.verbose('Modifying <input> z-index to be unselectable');
|
|
||||||
$input.addClass(className.hidden);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
input: function() {
|
|
||||||
module.verbose('Modifying <input> z-index to be selectable');
|
|
||||||
$input.removeClass(className.hidden);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
observeChanges: function() {
|
|
||||||
if('MutationObserver' in window) {
|
|
||||||
observer = new MutationObserver(function(mutations) {
|
|
||||||
module.debug('DOM tree modified, updating selector cache');
|
|
||||||
module.refresh();
|
|
||||||
});
|
|
||||||
observer.observe(element, {
|
|
||||||
childList : true,
|
|
||||||
subtree : true
|
|
||||||
});
|
|
||||||
module.debug('Setting up mutation observer', observer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
attachEvents: function(selector, event) {
|
|
||||||
var
|
|
||||||
$element = $(selector)
|
|
||||||
;
|
|
||||||
event = $.isFunction(module[event])
|
|
||||||
? module[event]
|
|
||||||
: module.toggle
|
|
||||||
;
|
|
||||||
if($element.length > 0) {
|
|
||||||
module.debug('Attaching checkbox events to element', selector, event);
|
|
||||||
$element
|
|
||||||
.on('click' + eventNamespace, event)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.error(error.notFound);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
click: function(event) {
|
|
||||||
var
|
|
||||||
$target = $(event.target)
|
|
||||||
;
|
|
||||||
if( $target.is(selector.input) ) {
|
|
||||||
module.verbose('Using default check action on initialized checkbox');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( $target.is(selector.link) ) {
|
|
||||||
module.debug('Clicking link inside checkbox, skipping toggle');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.toggle();
|
|
||||||
$input.focus();
|
|
||||||
event.preventDefault();
|
|
||||||
},
|
|
||||||
keydown: function(event) {
|
|
||||||
var
|
|
||||||
key = event.which,
|
|
||||||
keyCode = {
|
|
||||||
enter : 13,
|
|
||||||
space : 32,
|
|
||||||
escape : 27
|
|
||||||
}
|
|
||||||
;
|
|
||||||
if(key == keyCode.escape) {
|
|
||||||
module.verbose('Escape key pressed blurring field');
|
|
||||||
$input.blur();
|
|
||||||
shortcutPressed = true;
|
|
||||||
}
|
|
||||||
else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
|
|
||||||
module.verbose('Enter/space key pressed, toggling checkbox');
|
|
||||||
module.toggle();
|
|
||||||
shortcutPressed = true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
shortcutPressed = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
keyup: function(event) {
|
|
||||||
if(shortcutPressed) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
check: function() {
|
|
||||||
if( !module.should.allowCheck() ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Checking checkbox', $input);
|
|
||||||
module.set.checked();
|
|
||||||
if( !module.should.ignoreCallbacks() ) {
|
|
||||||
settings.onChecked.call(input);
|
|
||||||
settings.onChange.call(input);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
uncheck: function() {
|
|
||||||
if( !module.should.allowUncheck() ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Unchecking checkbox');
|
|
||||||
module.set.unchecked();
|
|
||||||
if( !module.should.ignoreCallbacks() ) {
|
|
||||||
settings.onUnchecked.call(input);
|
|
||||||
settings.onChange.call(input);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
indeterminate: function() {
|
|
||||||
if( module.should.allowIndeterminate() ) {
|
|
||||||
module.debug('Checkbox is already indeterminate');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Making checkbox indeterminate');
|
|
||||||
module.set.indeterminate();
|
|
||||||
if( !module.should.ignoreCallbacks() ) {
|
|
||||||
settings.onIndeterminate.call(input);
|
|
||||||
settings.onChange.call(input);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
determinate: function() {
|
|
||||||
if( module.should.allowDeterminate() ) {
|
|
||||||
module.debug('Checkbox is already determinate');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Making checkbox determinate');
|
|
||||||
module.set.determinate();
|
|
||||||
if( !module.should.ignoreCallbacks() ) {
|
|
||||||
settings.onDeterminate.call(input);
|
|
||||||
settings.onChange.call(input);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
enable: function() {
|
|
||||||
if( module.is.enabled() ) {
|
|
||||||
module.debug('Checkbox is already enabled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Enabling checkbox');
|
|
||||||
module.set.enabled();
|
|
||||||
settings.onEnable.call(input);
|
|
||||||
// preserve legacy callbacks
|
|
||||||
settings.onEnabled.call(input);
|
|
||||||
},
|
|
||||||
|
|
||||||
disable: function() {
|
|
||||||
if( module.is.disabled() ) {
|
|
||||||
module.debug('Checkbox is already disabled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Disabling checkbox');
|
|
||||||
module.set.disabled();
|
|
||||||
settings.onDisable.call(input);
|
|
||||||
// preserve legacy callbacks
|
|
||||||
settings.onDisabled.call(input);
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
radios: function() {
|
|
||||||
var
|
|
||||||
name = module.get.name()
|
|
||||||
;
|
|
||||||
return $('input[name="' + name + '"]').closest(selector.checkbox);
|
|
||||||
},
|
|
||||||
otherRadios: function() {
|
|
||||||
return module.get.radios().not($module);
|
|
||||||
},
|
|
||||||
name: function() {
|
|
||||||
return $input.attr('name');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
initialLoad: function() {
|
|
||||||
return initialLoad;
|
|
||||||
},
|
|
||||||
radio: function() {
|
|
||||||
return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');
|
|
||||||
},
|
|
||||||
indeterminate: function() {
|
|
||||||
return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');
|
|
||||||
},
|
|
||||||
checked: function() {
|
|
||||||
return $input.prop('checked') !== undefined && $input.prop('checked');
|
|
||||||
},
|
|
||||||
disabled: function() {
|
|
||||||
return $input.prop('disabled') !== undefined && $input.prop('disabled');
|
|
||||||
},
|
|
||||||
enabled: function() {
|
|
||||||
return !module.is.disabled();
|
|
||||||
},
|
|
||||||
determinate: function() {
|
|
||||||
return !module.is.indeterminate();
|
|
||||||
},
|
|
||||||
unchecked: function() {
|
|
||||||
return !module.is.checked();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
should: {
|
|
||||||
allowCheck: function() {
|
|
||||||
if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
|
|
||||||
module.debug('Should not allow check, checkbox is already checked');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(settings.beforeChecked.apply(input) === false) {
|
|
||||||
module.debug('Should not allow check, beforeChecked cancelled');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
allowUncheck: function() {
|
|
||||||
if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
|
|
||||||
module.debug('Should not allow uncheck, checkbox is already unchecked');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(settings.beforeUnchecked.apply(input) === false) {
|
|
||||||
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
allowIndeterminate: function() {
|
|
||||||
if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
|
|
||||||
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(settings.beforeIndeterminate.apply(input) === false) {
|
|
||||||
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
allowDeterminate: function() {
|
|
||||||
if(module.is.determinate() && !module.should.forceCallbacks() ) {
|
|
||||||
module.debug('Should not allow determinate, checkbox is already determinate');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(settings.beforeDeterminate.apply(input) === false) {
|
|
||||||
module.debug('Should not allow determinate, beforeDeterminate cancelled');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
forceCallbacks: function() {
|
|
||||||
return (module.is.initialLoad() && settings.fireOnInit);
|
|
||||||
},
|
|
||||||
ignoreCallbacks: function() {
|
|
||||||
return (initialLoad && !settings.fireOnInit);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
can: {
|
|
||||||
change: function() {
|
|
||||||
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
|
|
||||||
},
|
|
||||||
uncheck: function() {
|
|
||||||
return (typeof settings.uncheckable === 'boolean')
|
|
||||||
? settings.uncheckable
|
|
||||||
: !module.is.radio()
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
initialLoad: function() {
|
|
||||||
initialLoad = true;
|
|
||||||
},
|
|
||||||
checked: function() {
|
|
||||||
module.verbose('Setting class to checked');
|
|
||||||
$module
|
|
||||||
.removeClass(className.indeterminate)
|
|
||||||
.addClass(className.checked)
|
|
||||||
;
|
|
||||||
if( module.is.radio() ) {
|
|
||||||
module.uncheckOthers();
|
|
||||||
}
|
|
||||||
if(!module.is.indeterminate() && module.is.checked()) {
|
|
||||||
module.debug('Input is already checked, skipping input property change');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.verbose('Setting state to checked', input);
|
|
||||||
$input
|
|
||||||
.prop('indeterminate', false)
|
|
||||||
.prop('checked', true)
|
|
||||||
;
|
|
||||||
module.trigger.change();
|
|
||||||
},
|
|
||||||
unchecked: function() {
|
|
||||||
module.verbose('Removing checked class');
|
|
||||||
$module
|
|
||||||
.removeClass(className.indeterminate)
|
|
||||||
.removeClass(className.checked)
|
|
||||||
;
|
|
||||||
if(!module.is.indeterminate() && module.is.unchecked() ) {
|
|
||||||
module.debug('Input is already unchecked');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Setting state to unchecked');
|
|
||||||
$input
|
|
||||||
.prop('indeterminate', false)
|
|
||||||
.prop('checked', false)
|
|
||||||
;
|
|
||||||
module.trigger.change();
|
|
||||||
},
|
|
||||||
indeterminate: function() {
|
|
||||||
module.verbose('Setting class to indeterminate');
|
|
||||||
$module
|
|
||||||
.addClass(className.indeterminate)
|
|
||||||
;
|
|
||||||
if( module.is.indeterminate() ) {
|
|
||||||
module.debug('Input is already indeterminate, skipping input property change');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Setting state to indeterminate');
|
|
||||||
$input
|
|
||||||
.prop('indeterminate', true)
|
|
||||||
;
|
|
||||||
module.trigger.change();
|
|
||||||
},
|
|
||||||
determinate: function() {
|
|
||||||
module.verbose('Removing indeterminate class');
|
|
||||||
$module
|
|
||||||
.removeClass(className.indeterminate)
|
|
||||||
;
|
|
||||||
if( module.is.determinate() ) {
|
|
||||||
module.debug('Input is already determinate, skipping input property change');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Setting state to determinate');
|
|
||||||
$input
|
|
||||||
.prop('indeterminate', false)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
disabled: function() {
|
|
||||||
module.verbose('Setting class to disabled');
|
|
||||||
$module
|
|
||||||
.addClass(className.disabled)
|
|
||||||
;
|
|
||||||
if( module.is.disabled() ) {
|
|
||||||
module.debug('Input is already disabled, skipping input property change');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Setting state to disabled');
|
|
||||||
$input
|
|
||||||
.prop('disabled', 'disabled')
|
|
||||||
;
|
|
||||||
module.trigger.change();
|
|
||||||
},
|
|
||||||
enabled: function() {
|
|
||||||
module.verbose('Removing disabled class');
|
|
||||||
$module.removeClass(className.disabled);
|
|
||||||
if( module.is.enabled() ) {
|
|
||||||
module.debug('Input is already enabled, skipping input property change');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
module.debug('Setting state to enabled');
|
|
||||||
$input
|
|
||||||
.prop('disabled', false)
|
|
||||||
;
|
|
||||||
module.trigger.change();
|
|
||||||
},
|
|
||||||
tabbable: function() {
|
|
||||||
module.verbose('Adding tabindex to checkbox');
|
|
||||||
if( $input.attr('tabindex') === undefined) {
|
|
||||||
$input.attr('tabindex', 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
initialLoad: function() {
|
|
||||||
initialLoad = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
trigger: {
|
|
||||||
change: function() {
|
|
||||||
var
|
|
||||||
events = document.createEvent('HTMLEvents'),
|
|
||||||
inputElement = $input[0]
|
|
||||||
;
|
|
||||||
if(inputElement) {
|
|
||||||
module.verbose('Triggering native change event');
|
|
||||||
events.initEvent('change', true, false);
|
|
||||||
inputElement.dispatchEvent(events);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
create: {
|
|
||||||
label: function() {
|
|
||||||
if($input.prevAll(selector.label).length > 0) {
|
|
||||||
$input.prev(selector.label).detach().insertAfter($input);
|
|
||||||
module.debug('Moving existing label', $label);
|
|
||||||
}
|
|
||||||
else if( !module.has.label() ) {
|
|
||||||
$label = $('<label>').insertAfter($input);
|
|
||||||
module.debug('Creating label', $label);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
has: {
|
|
||||||
label: function() {
|
|
||||||
return ($label.length > 0);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
module.verbose('Attaching checkbox events');
|
|
||||||
$module
|
|
||||||
.on('click' + eventNamespace, module.event.click)
|
|
||||||
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
|
|
||||||
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
unbind: {
|
|
||||||
events: function() {
|
|
||||||
module.debug('Removing events');
|
|
||||||
$module
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
uncheckOthers: function() {
|
|
||||||
var
|
|
||||||
$radios = module.get.otherRadios()
|
|
||||||
;
|
|
||||||
module.debug('Unchecking other radios', $radios);
|
|
||||||
$radios.removeClass(className.checked);
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle: function() {
|
|
||||||
if( !module.can.change() ) {
|
|
||||||
if(!module.is.radio()) {
|
|
||||||
module.debug('Checkbox is read-only or disabled, ignoring toggle');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( module.is.indeterminate() || module.is.unchecked() ) {
|
|
||||||
module.debug('Currently unchecked');
|
|
||||||
module.check();
|
|
||||||
}
|
|
||||||
else if( module.is.checked() && module.can.uncheck() ) {
|
|
||||||
module.debug('Currently checked');
|
|
||||||
module.uncheck();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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($.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.checkbox.settings = {
|
|
||||||
|
|
||||||
name : 'Checkbox',
|
|
||||||
namespace : 'checkbox',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : true,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
// delegated event context
|
|
||||||
uncheckable : 'auto',
|
|
||||||
fireOnInit : false,
|
|
||||||
|
|
||||||
onChange : function(){},
|
|
||||||
|
|
||||||
beforeChecked : function(){},
|
|
||||||
beforeUnchecked : function(){},
|
|
||||||
beforeDeterminate : function(){},
|
|
||||||
beforeIndeterminate : function(){},
|
|
||||||
|
|
||||||
onChecked : function(){},
|
|
||||||
onUnchecked : function(){},
|
|
||||||
|
|
||||||
onDeterminate : function() {},
|
|
||||||
onIndeterminate : function() {},
|
|
||||||
|
|
||||||
onEnable : function(){},
|
|
||||||
onDisable : function(){},
|
|
||||||
|
|
||||||
// preserve misspelled callbacks (will be removed in 3.0)
|
|
||||||
onEnabled : function(){},
|
|
||||||
onDisabled : function(){},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
checked : 'checked',
|
|
||||||
indeterminate : 'indeterminate',
|
|
||||||
disabled : 'disabled',
|
|
||||||
hidden : 'hidden',
|
|
||||||
radio : 'radio',
|
|
||||||
readOnly : 'read-only'
|
|
||||||
},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
method : 'The method you called is not defined'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
checkbox : '.ui.checkbox',
|
|
||||||
label : 'label, .box',
|
|
||||||
input : 'input[type="checkbox"], input[type="radio"]',
|
|
||||||
link : 'a[href]'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,598 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Checkbox
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'checkbox';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Checkbox
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
outline: none;
|
|
||||||
vertical-align: baseline;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
min-height: @checkboxSize;
|
|
||||||
font-size: @medium;
|
|
||||||
line-height: @checkboxLineHeight;
|
|
||||||
min-width: @checkboxSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HTML Checkbox */
|
|
||||||
.ui.checkbox input[type="checkbox"],
|
|
||||||
.ui.checkbox input[type="radio"] {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
opacity: 0 !important;
|
|
||||||
outline: none;
|
|
||||||
z-index: 3;
|
|
||||||
width: @checkboxSize;
|
|
||||||
height: @checkboxSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Box
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
|
|
||||||
.ui.checkbox .box,
|
|
||||||
.ui.checkbox label {
|
|
||||||
cursor: auto;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
padding-left: @labelDistance;
|
|
||||||
outline: none;
|
|
||||||
font-size: @labelFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.checkbox .box:before,
|
|
||||||
.ui.checkbox label:before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
|
|
||||||
width: @checkboxSize;
|
|
||||||
height: @checkboxSize;
|
|
||||||
content: '';
|
|
||||||
|
|
||||||
background: @checkboxBackground;
|
|
||||||
border-radius: @checkboxBorderRadius;
|
|
||||||
|
|
||||||
transition: @checkboxTransition;
|
|
||||||
border: @checkboxBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Checkmark
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox .box:after,
|
|
||||||
.ui.checkbox label:after {
|
|
||||||
position: absolute;
|
|
||||||
font-size: @checkboxCheckFontSize;
|
|
||||||
top: @checkboxCheckTop;
|
|
||||||
left: @checkboxCheckLeft;
|
|
||||||
width: @checkboxCheckSize;
|
|
||||||
height: @checkboxCheckSize;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
color: @checkboxColor;
|
|
||||||
transition: @checkboxTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Label
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Inside */
|
|
||||||
.ui.checkbox label,
|
|
||||||
.ui.checkbox + label {
|
|
||||||
color: @labelColor;
|
|
||||||
transition: @labelTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Outside */
|
|
||||||
.ui.checkbox + label {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Hover
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox .box:hover::before,
|
|
||||||
.ui.checkbox label:hover::before {
|
|
||||||
background: @checkboxHoverBackground;
|
|
||||||
border-color: @checkboxHoverBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox label:hover,
|
|
||||||
.ui.checkbox + label:hover {
|
|
||||||
color: @labelHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Down
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox .box:active::before,
|
|
||||||
.ui.checkbox label:active::before {
|
|
||||||
background: @checkboxPressedBackground;
|
|
||||||
border-color: @checkboxPressedBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox .box:active::after,
|
|
||||||
.ui.checkbox label:active::after {
|
|
||||||
color: @checkboxPressedColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:active ~ label {
|
|
||||||
color: @labelPressedColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Focus
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox input:focus ~ .box:before,
|
|
||||||
.ui.checkbox input:focus ~ label:before {
|
|
||||||
background: @checkboxFocusBackground;
|
|
||||||
border-color: @checkboxFocusBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:focus ~ .box:after,
|
|
||||||
.ui.checkbox input:focus ~ label:after {
|
|
||||||
color: @checkboxFocusCheckColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:focus ~ label {
|
|
||||||
color: @labelFocusColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox input:checked ~ .box:before,
|
|
||||||
.ui.checkbox input:checked ~ label:before {
|
|
||||||
background: @checkboxActiveBackground;
|
|
||||||
border-color: @checkboxActiveBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:checked ~ .box:after,
|
|
||||||
.ui.checkbox input:checked ~ label:after {
|
|
||||||
opacity: @checkboxActiveCheckOpacity;
|
|
||||||
color: @checkboxActiveCheckColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Indeterminate
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before,
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
|
|
||||||
background: @checkboxIndeterminateBackground;
|
|
||||||
border-color: @checkboxIndeterminateBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after,
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
|
|
||||||
opacity: @checkboxIndeterminateCheckOpacity;
|
|
||||||
color: @checkboxIndeterminateCheckColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active Focus
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before,
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
|
|
||||||
.ui.checkbox input:checked:focus ~ .box:before,
|
|
||||||
.ui.checkbox input:checked:focus ~ label:before {
|
|
||||||
background: @checkboxActiveFocusBackground;
|
|
||||||
border-color: @checkboxActiveFocusBorderColor;
|
|
||||||
}
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after,
|
|
||||||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
|
|
||||||
.ui.checkbox input:checked:focus ~ .box:after,
|
|
||||||
.ui.checkbox input:checked:focus ~ label:after {
|
|
||||||
color: @checkboxActiveFocusCheckColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Read-Only
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.read-only.checkbox,
|
|
||||||
.ui.read-only.checkbox label {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Disabled
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.disabled.checkbox .box:after,
|
|
||||||
.ui.disabled.checkbox label,
|
|
||||||
.ui.checkbox input[disabled] ~ .box:after,
|
|
||||||
.ui.checkbox input[disabled] ~ label {
|
|
||||||
cursor: default !important;
|
|
||||||
opacity: @disabledCheckboxOpacity;
|
|
||||||
color: @disabledCheckboxLabelColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Hidden
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initialized checkbox moves input below element
|
|
||||||
to prevent manually triggering */
|
|
||||||
.ui.checkbox input.hidden {
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selectable Label */
|
|
||||||
.ui.checkbox input.hidden + label {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Radio
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.radio.checkbox {
|
|
||||||
min-height: @radioSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.radio.checkbox .box,
|
|
||||||
.ui.radio.checkbox label {
|
|
||||||
padding-left: @radioLabelDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Box */
|
|
||||||
.ui.radio.checkbox .box:before,
|
|
||||||
.ui.radio.checkbox label:before {
|
|
||||||
content: '';
|
|
||||||
transform: none;
|
|
||||||
|
|
||||||
width: @radioSize;
|
|
||||||
height: @radioSize;
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
top: @radioTop;
|
|
||||||
left: @radioLeft;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bullet */
|
|
||||||
.ui.radio.checkbox .box:after,
|
|
||||||
.ui.radio.checkbox label:after {
|
|
||||||
border: none;
|
|
||||||
content: '' !important;
|
|
||||||
width: @radioSize;
|
|
||||||
height: @radioSize;
|
|
||||||
line-height: @radioSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Radio Checkbox */
|
|
||||||
.ui.radio.checkbox .box:after,
|
|
||||||
.ui.radio.checkbox label:after {
|
|
||||||
top: @bulletTop;
|
|
||||||
left: @bulletLeft;
|
|
||||||
width: @radioSize;
|
|
||||||
height: @radioSize;
|
|
||||||
border-radius: @bulletRadius;
|
|
||||||
transform: scale(@bulletScale);
|
|
||||||
background-color: @bulletColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
|
||||||
.ui.radio.checkbox input:focus ~ .box:before,
|
|
||||||
.ui.radio.checkbox input:focus ~ label:before {
|
|
||||||
background-color: @radioFocusBackground;
|
|
||||||
}
|
|
||||||
.ui.radio.checkbox input:focus ~ .box:after,
|
|
||||||
.ui.radio.checkbox input:focus ~ label:after {
|
|
||||||
background-color: @radioFocusBulletColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Indeterminate */
|
|
||||||
.ui.radio.checkbox input:indeterminate ~ .box:after,
|
|
||||||
.ui.radio.checkbox input:indeterminate ~ label:after {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active */
|
|
||||||
.ui.radio.checkbox input:checked ~ .box:before,
|
|
||||||
.ui.radio.checkbox input:checked ~ label:before {
|
|
||||||
background-color: @radioActiveBackground;
|
|
||||||
}
|
|
||||||
.ui.radio.checkbox input:checked ~ .box:after,
|
|
||||||
.ui.radio.checkbox input:checked ~ label:after {
|
|
||||||
background-color: @radioActiveBulletColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Focus */
|
|
||||||
.ui.radio.checkbox input:focus:checked ~ .box:before,
|
|
||||||
.ui.radio.checkbox input:focus:checked ~ label:before {
|
|
||||||
background-color: @radioActiveFocusBackground;
|
|
||||||
}
|
|
||||||
.ui.radio.checkbox input:focus:checked ~ .box:after,
|
|
||||||
.ui.radio.checkbox input:focus:checked ~ label:after {
|
|
||||||
background-color: @radioActiveFocusBulletColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Slider
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.slider.checkbox {
|
|
||||||
min-height: @sliderHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input */
|
|
||||||
.ui.slider.checkbox input {
|
|
||||||
width: @sliderWidth;
|
|
||||||
height: @sliderHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Label */
|
|
||||||
.ui.slider.checkbox .box,
|
|
||||||
.ui.slider.checkbox label {
|
|
||||||
padding-left: @sliderLabelDistance;
|
|
||||||
line-height: @sliderLabelLineHeight;
|
|
||||||
color: @sliderOffLabelColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Line */
|
|
||||||
.ui.slider.checkbox .box:before,
|
|
||||||
.ui.slider.checkbox label:before {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
transform: none;
|
|
||||||
border: none !important;
|
|
||||||
left: 0em;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
top: @sliderLineVerticalOffset;
|
|
||||||
|
|
||||||
background-color: @sliderLineColor;
|
|
||||||
width: @sliderLineWidth;
|
|
||||||
height: @sliderLineHeight;
|
|
||||||
|
|
||||||
transform: none;
|
|
||||||
border-radius: @sliderLineRadius;
|
|
||||||
transition: @sliderLineTransition;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
.ui.slider.checkbox .box:after,
|
|
||||||
.ui.slider.checkbox label:after {
|
|
||||||
background: @handleBackground;
|
|
||||||
position: absolute;
|
|
||||||
content: '' !important;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
box-shadow: @handleBoxShadow;
|
|
||||||
width: @sliderHandleSize;
|
|
||||||
height: @sliderHandleSize;
|
|
||||||
top: @sliderHandleOffset;
|
|
||||||
left: 0em;
|
|
||||||
transform: none;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
transition: @sliderHandleTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
|
||||||
.ui.slider.checkbox input:focus ~ .box:before,
|
|
||||||
.ui.slider.checkbox input:focus ~ label:before {
|
|
||||||
background-color: @toggleFocusColor;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover */
|
|
||||||
.ui.slider.checkbox .box:hover,
|
|
||||||
.ui.slider.checkbox label:hover {
|
|
||||||
color: @sliderHoverLabelColor;
|
|
||||||
}
|
|
||||||
.ui.slider.checkbox .box:hover::before,
|
|
||||||
.ui.slider.checkbox label:hover::before {
|
|
||||||
background: @sliderHoverLaneBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active */
|
|
||||||
.ui.slider.checkbox input:checked ~ .box,
|
|
||||||
.ui.slider.checkbox input:checked ~ label {
|
|
||||||
color: @sliderOnLabelColor !important;
|
|
||||||
}
|
|
||||||
.ui.slider.checkbox input:checked ~ .box:before,
|
|
||||||
.ui.slider.checkbox input:checked ~ label:before {
|
|
||||||
background-color: @sliderOnLineColor !important;
|
|
||||||
}
|
|
||||||
.ui.slider.checkbox input:checked ~ .box:after,
|
|
||||||
.ui.slider.checkbox input:checked ~ label:after {
|
|
||||||
left: @sliderTravelDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Focus */
|
|
||||||
.ui.slider.checkbox input:focus:checked ~ .box,
|
|
||||||
.ui.slider.checkbox input:focus:checked ~ label {
|
|
||||||
color: @sliderOnFocusLabelColor !important;
|
|
||||||
}
|
|
||||||
.ui.slider.checkbox input:focus:checked ~ .box:before,
|
|
||||||
.ui.slider.checkbox input:focus:checked ~ label:before {
|
|
||||||
background-color: @sliderOnFocusLineColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Toggle
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.toggle.checkbox {
|
|
||||||
min-height: @toggleHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input */
|
|
||||||
.ui.toggle.checkbox input {
|
|
||||||
width: @toggleWidth;
|
|
||||||
height: @toggleHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Label */
|
|
||||||
.ui.toggle.checkbox .box,
|
|
||||||
.ui.toggle.checkbox label {
|
|
||||||
min-height: @toggleHandleSize;
|
|
||||||
padding-left: @toggleLabelDistance;
|
|
||||||
color: @toggleOffLabelColor;
|
|
||||||
}
|
|
||||||
.ui.toggle.checkbox label {
|
|
||||||
padding-top: @toggleLabelOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Switch */
|
|
||||||
.ui.toggle.checkbox .box:before,
|
|
||||||
.ui.toggle.checkbox label:before {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
z-index: 1;
|
|
||||||
transform: none;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
top: @toggleLaneVerticalOffset;
|
|
||||||
|
|
||||||
background: @toggleLaneBackground;
|
|
||||||
box-shadow: @toggleLaneBoxShadow;
|
|
||||||
width: @toggleLaneWidth;
|
|
||||||
height: @toggleLaneHeight;
|
|
||||||
border-radius: @toggleHandleRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
.ui.toggle.checkbox .box:after,
|
|
||||||
.ui.toggle.checkbox label:after {
|
|
||||||
background: @handleBackground;
|
|
||||||
position: absolute;
|
|
||||||
content: '' !important;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
box-shadow: @handleBoxShadow;
|
|
||||||
width: @toggleHandleSize;
|
|
||||||
height: @toggleHandleSize;
|
|
||||||
top: @toggleHandleOffset;
|
|
||||||
left: 0em;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
transition: @toggleHandleTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.toggle.checkbox input ~ .box:after,
|
|
||||||
.ui.toggle.checkbox input ~ label:after {
|
|
||||||
left: @toggleOffOffset;
|
|
||||||
box-shadow: @toggleOffHandleBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus */
|
|
||||||
.ui.toggle.checkbox input:focus ~ .box:before,
|
|
||||||
.ui.toggle.checkbox input:focus ~ label:before {
|
|
||||||
background-color: @toggleFocusColor;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover */
|
|
||||||
.ui.toggle.checkbox .box:hover::before,
|
|
||||||
.ui.toggle.checkbox label:hover::before {
|
|
||||||
background-color: @toggleHoverColor;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active */
|
|
||||||
.ui.toggle.checkbox input:checked ~ .box,
|
|
||||||
.ui.toggle.checkbox input:checked ~ label {
|
|
||||||
color: @toggleOnLabelColor !important;
|
|
||||||
}
|
|
||||||
.ui.toggle.checkbox input:checked ~ .box:before,
|
|
||||||
.ui.toggle.checkbox input:checked ~ label:before {
|
|
||||||
background-color: @toggleOnLaneColor !important;
|
|
||||||
}
|
|
||||||
.ui.toggle.checkbox input:checked ~ .box:after,
|
|
||||||
.ui.toggle.checkbox input:checked ~ label:after {
|
|
||||||
left: @toggleOnOffset;
|
|
||||||
box-shadow: @toggleOnHandleBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Active Focus */
|
|
||||||
.ui.toggle.checkbox input:focus:checked ~ .box,
|
|
||||||
.ui.toggle.checkbox input:focus:checked ~ label {
|
|
||||||
color: @toggleOnFocusLabelColor !important;
|
|
||||||
}
|
|
||||||
.ui.toggle.checkbox input:focus:checked ~ .box:before,
|
|
||||||
.ui.toggle.checkbox input:focus:checked ~ label:before {
|
|
||||||
background-color: @toggleOnFocusLaneColor !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fitted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fitted.checkbox .box,
|
|
||||||
.ui.fitted.checkbox label {
|
|
||||||
padding-left: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.fitted.toggle.checkbox,
|
|
||||||
.ui.fitted.toggle.checkbox {
|
|
||||||
width: @toggleWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.fitted.slider.checkbox,
|
|
||||||
.ui.fitted.slider.checkbox {
|
|
||||||
width: @sliderWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,733 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Dimmer
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.dimmer = function(parameters) {
|
|
||||||
var
|
|
||||||
$allModules = $(this),
|
|
||||||
|
|
||||||
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.dimmer.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.dimmer.settings),
|
|
||||||
|
|
||||||
selector = settings.selector,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
className = settings.className,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
moduleSelector = $allModules.selector || '',
|
|
||||||
|
|
||||||
clickEvent = ('ontouchstart' in document.documentElement)
|
|
||||||
? 'touchstart'
|
|
||||||
: 'click',
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$dimmer,
|
|
||||||
$dimmable,
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
preinitialize: function() {
|
|
||||||
if( module.is.dimmer() ) {
|
|
||||||
|
|
||||||
$dimmable = $module.parent();
|
|
||||||
$dimmer = $module;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$dimmable = $module;
|
|
||||||
if( module.has.dimmer() ) {
|
|
||||||
if(settings.dimmerName) {
|
|
||||||
$dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$dimmer = $dimmable.find(selector.dimmer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$dimmer = module.create();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.debug('Initializing dimmer', settings);
|
|
||||||
|
|
||||||
module.bind.events();
|
|
||||||
module.set.dimmable();
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, instance)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous module', $dimmer);
|
|
||||||
module.unbind.events();
|
|
||||||
module.remove.variation();
|
|
||||||
$dimmable
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
if(settings.on == 'hover') {
|
|
||||||
$dimmable
|
|
||||||
.on('mouseenter' + eventNamespace, module.show)
|
|
||||||
.on('mouseleave' + eventNamespace, module.hide)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else if(settings.on == 'click') {
|
|
||||||
$dimmable
|
|
||||||
.on(clickEvent + eventNamespace, module.toggle)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
if( module.is.page() ) {
|
|
||||||
module.debug('Setting as a page dimmer', $dimmable);
|
|
||||||
module.set.pageDimmer();
|
|
||||||
}
|
|
||||||
|
|
||||||
if( module.is.closable() ) {
|
|
||||||
module.verbose('Adding dimmer close event', $dimmer);
|
|
||||||
$dimmable
|
|
||||||
.on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
unbind: {
|
|
||||||
events: function() {
|
|
||||||
$module
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
;
|
|
||||||
$dimmable
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
click: function(event) {
|
|
||||||
module.verbose('Determining if event occured on dimmer', event);
|
|
||||||
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
|
|
||||||
module.hide();
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
addContent: function(element) {
|
|
||||||
var
|
|
||||||
$content = $(element)
|
|
||||||
;
|
|
||||||
module.debug('Add content to dimmer', $content);
|
|
||||||
if($content.parent()[0] !== $dimmer[0]) {
|
|
||||||
$content.detach().appendTo($dimmer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
create: function() {
|
|
||||||
var
|
|
||||||
$element = $( settings.template.dimmer() )
|
|
||||||
;
|
|
||||||
if(settings.dimmerName) {
|
|
||||||
module.debug('Creating named dimmer', settings.dimmerName);
|
|
||||||
$element.addClass(settings.dimmerName);
|
|
||||||
}
|
|
||||||
$element
|
|
||||||
.appendTo($dimmable)
|
|
||||||
;
|
|
||||||
return $element;
|
|
||||||
},
|
|
||||||
|
|
||||||
show: function(callback) {
|
|
||||||
callback = $.isFunction(callback)
|
|
||||||
? callback
|
|
||||||
: function(){}
|
|
||||||
;
|
|
||||||
module.debug('Showing dimmer', $dimmer, settings);
|
|
||||||
module.set.variation();
|
|
||||||
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
|
|
||||||
module.animate.show(callback);
|
|
||||||
settings.onShow.call(element);
|
|
||||||
settings.onChange.call(element);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Dimmer is already shown or disabled');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
hide: function(callback) {
|
|
||||||
callback = $.isFunction(callback)
|
|
||||||
? callback
|
|
||||||
: function(){}
|
|
||||||
;
|
|
||||||
if( module.is.dimmed() || module.is.animating() ) {
|
|
||||||
module.debug('Hiding dimmer', $dimmer);
|
|
||||||
module.animate.hide(callback);
|
|
||||||
settings.onHide.call(element);
|
|
||||||
settings.onChange.call(element);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Dimmer is not visible');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle: function() {
|
|
||||||
module.verbose('Toggling dimmer visibility', $dimmer);
|
|
||||||
if( !module.is.dimmed() ) {
|
|
||||||
module.show();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.hide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animate: {
|
|
||||||
show: function(callback) {
|
|
||||||
callback = $.isFunction(callback)
|
|
||||||
? callback
|
|
||||||
: function(){}
|
|
||||||
;
|
|
||||||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
|
||||||
if(settings.useFlex) {
|
|
||||||
module.debug('Using flex dimmer');
|
|
||||||
module.remove.legacy();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Using legacy non-flex dimmer');
|
|
||||||
module.set.legacy();
|
|
||||||
}
|
|
||||||
if(settings.opacity !== 'auto') {
|
|
||||||
module.set.opacity();
|
|
||||||
}
|
|
||||||
$dimmer
|
|
||||||
.transition({
|
|
||||||
displayType : settings.useFlex
|
|
||||||
? 'flex'
|
|
||||||
: 'block',
|
|
||||||
animation : settings.transition + ' in',
|
|
||||||
queue : false,
|
|
||||||
duration : module.get.duration(),
|
|
||||||
useFailSafe : true,
|
|
||||||
onStart : function() {
|
|
||||||
module.set.dimmed();
|
|
||||||
},
|
|
||||||
onComplete : function() {
|
|
||||||
module.set.active();
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.verbose('Showing dimmer animation with javascript');
|
|
||||||
module.set.dimmed();
|
|
||||||
if(settings.opacity == 'auto') {
|
|
||||||
settings.opacity = 0.8;
|
|
||||||
}
|
|
||||||
$dimmer
|
|
||||||
.stop()
|
|
||||||
.css({
|
|
||||||
opacity : 0,
|
|
||||||
width : '100%',
|
|
||||||
height : '100%'
|
|
||||||
})
|
|
||||||
.fadeTo(module.get.duration(), settings.opacity, function() {
|
|
||||||
$dimmer.removeAttr('style');
|
|
||||||
module.set.active();
|
|
||||||
callback();
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hide: function(callback) {
|
|
||||||
callback = $.isFunction(callback)
|
|
||||||
? callback
|
|
||||||
: function(){}
|
|
||||||
;
|
|
||||||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
|
||||||
module.verbose('Hiding dimmer with css');
|
|
||||||
$dimmer
|
|
||||||
.transition({
|
|
||||||
displayType : settings.useFlex
|
|
||||||
? 'flex'
|
|
||||||
: 'block',
|
|
||||||
animation : settings.transition + ' out',
|
|
||||||
queue : false,
|
|
||||||
duration : module.get.duration(),
|
|
||||||
useFailSafe : true,
|
|
||||||
onStart : function() {
|
|
||||||
module.remove.dimmed();
|
|
||||||
},
|
|
||||||
onComplete : function() {
|
|
||||||
module.remove.variation();
|
|
||||||
module.remove.active();
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.verbose('Hiding dimmer with javascript');
|
|
||||||
module.remove.dimmed();
|
|
||||||
$dimmer
|
|
||||||
.stop()
|
|
||||||
.fadeOut(module.get.duration(), function() {
|
|
||||||
module.remove.active();
|
|
||||||
$dimmer.removeAttr('style');
|
|
||||||
callback();
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
dimmer: function() {
|
|
||||||
return $dimmer;
|
|
||||||
},
|
|
||||||
duration: function() {
|
|
||||||
if(typeof settings.duration == 'object') {
|
|
||||||
if( module.is.active() ) {
|
|
||||||
return settings.duration.hide;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return settings.duration.show;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return settings.duration;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
has: {
|
|
||||||
dimmer: function() {
|
|
||||||
if(settings.dimmerName) {
|
|
||||||
return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return ( $module.find(selector.dimmer).length > 0 );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
active: function() {
|
|
||||||
return $dimmer.hasClass(className.active);
|
|
||||||
},
|
|
||||||
animating: function() {
|
|
||||||
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
|
|
||||||
},
|
|
||||||
closable: function() {
|
|
||||||
if(settings.closable == 'auto') {
|
|
||||||
if(settings.on == 'hover') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return settings.closable;
|
|
||||||
},
|
|
||||||
dimmer: function() {
|
|
||||||
return $module.hasClass(className.dimmer);
|
|
||||||
},
|
|
||||||
dimmable: function() {
|
|
||||||
return $module.hasClass(className.dimmable);
|
|
||||||
},
|
|
||||||
dimmed: function() {
|
|
||||||
return $dimmable.hasClass(className.dimmed);
|
|
||||||
},
|
|
||||||
disabled: function() {
|
|
||||||
return $dimmable.hasClass(className.disabled);
|
|
||||||
},
|
|
||||||
enabled: function() {
|
|
||||||
return !module.is.disabled();
|
|
||||||
},
|
|
||||||
page: function () {
|
|
||||||
return $dimmable.is('body');
|
|
||||||
},
|
|
||||||
pageDimmer: function() {
|
|
||||||
return $dimmer.hasClass(className.pageDimmer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
can: {
|
|
||||||
show: function() {
|
|
||||||
return !$dimmer.hasClass(className.disabled);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
opacity: function(opacity) {
|
|
||||||
var
|
|
||||||
color = $dimmer.css('background-color'),
|
|
||||||
colorArray = color.split(','),
|
|
||||||
isRGB = (colorArray && colorArray.length == 3),
|
|
||||||
isRGBA = (colorArray && colorArray.length == 4)
|
|
||||||
;
|
|
||||||
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
|
|
||||||
if(isRGB || isRGBA) {
|
|
||||||
colorArray[3] = opacity + ')';
|
|
||||||
color = colorArray.join(',');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
color = 'rgba(0, 0, 0, ' + opacity + ')';
|
|
||||||
}
|
|
||||||
module.debug('Setting opacity to', opacity);
|
|
||||||
$dimmer.css('background-color', color);
|
|
||||||
},
|
|
||||||
legacy: function() {
|
|
||||||
$dimmer.addClass(className.legacy);
|
|
||||||
},
|
|
||||||
active: function() {
|
|
||||||
$dimmer.addClass(className.active);
|
|
||||||
},
|
|
||||||
dimmable: function() {
|
|
||||||
$dimmable.addClass(className.dimmable);
|
|
||||||
},
|
|
||||||
dimmed: function() {
|
|
||||||
$dimmable.addClass(className.dimmed);
|
|
||||||
},
|
|
||||||
pageDimmer: function() {
|
|
||||||
$dimmer.addClass(className.pageDimmer);
|
|
||||||
},
|
|
||||||
disabled: function() {
|
|
||||||
$dimmer.addClass(className.disabled);
|
|
||||||
},
|
|
||||||
variation: function(variation) {
|
|
||||||
variation = variation || settings.variation;
|
|
||||||
if(variation) {
|
|
||||||
$dimmer.addClass(variation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
active: function() {
|
|
||||||
$dimmer
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
legacy: function() {
|
|
||||||
$dimmer.removeClass(className.legacy);
|
|
||||||
},
|
|
||||||
dimmed: function() {
|
|
||||||
$dimmable.removeClass(className.dimmed);
|
|
||||||
},
|
|
||||||
disabled: function() {
|
|
||||||
$dimmer.removeClass(className.disabled);
|
|
||||||
},
|
|
||||||
variation: function(variation) {
|
|
||||||
variation = variation || settings.variation;
|
|
||||||
if(variation) {
|
|
||||||
$dimmer.removeClass(variation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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($allModules.length > 1) {
|
|
||||||
title += ' ' + '(' + $allModules.length + ')';
|
|
||||||
}
|
|
||||||
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($.isArray(returnedValue)) {
|
|
||||||
returnedValue.push(response);
|
|
||||||
}
|
|
||||||
else if(returnedValue !== undefined) {
|
|
||||||
returnedValue = [returnedValue, response];
|
|
||||||
}
|
|
||||||
else if(response !== undefined) {
|
|
||||||
returnedValue = response;
|
|
||||||
}
|
|
||||||
return found;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.preinitialize();
|
|
||||||
|
|
||||||
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.dimmer.settings = {
|
|
||||||
|
|
||||||
name : 'Dimmer',
|
|
||||||
namespace : 'dimmer',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
// whether should use flex layout
|
|
||||||
useFlex : true,
|
|
||||||
|
|
||||||
// name to distinguish between multiple dimmers in context
|
|
||||||
dimmerName : false,
|
|
||||||
|
|
||||||
// whether to add a variation type
|
|
||||||
variation : false,
|
|
||||||
|
|
||||||
// whether to bind close events
|
|
||||||
closable : 'auto',
|
|
||||||
|
|
||||||
// whether to use css animations
|
|
||||||
useCSS : true,
|
|
||||||
|
|
||||||
// css animation to use
|
|
||||||
transition : 'fade',
|
|
||||||
|
|
||||||
// event to bind to
|
|
||||||
on : false,
|
|
||||||
|
|
||||||
// overriding opacity value
|
|
||||||
opacity : 'auto',
|
|
||||||
|
|
||||||
// transition durations
|
|
||||||
duration : {
|
|
||||||
show : 500,
|
|
||||||
hide : 500
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange : function(){},
|
|
||||||
onShow : function(){},
|
|
||||||
onHide : function(){},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
method : 'The method you called is not defined.'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
active : 'active',
|
|
||||||
animating : 'animating',
|
|
||||||
dimmable : 'dimmable',
|
|
||||||
dimmed : 'dimmed',
|
|
||||||
dimmer : 'dimmer',
|
|
||||||
disabled : 'disabled',
|
|
||||||
hide : 'hide',
|
|
||||||
legacy : 'legacy',
|
|
||||||
pageDimmer : 'page',
|
|
||||||
show : 'show'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector: {
|
|
||||||
dimmer : '> .ui.dimmer',
|
|
||||||
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
|
|
||||||
},
|
|
||||||
|
|
||||||
template: {
|
|
||||||
dimmer: function() {
|
|
||||||
return $('<div />').attr('class', 'ui dimmer');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,231 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Dimmer
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em !important;
|
|
||||||
left: 0em !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 {
|
|
||||||
border-radius: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Disabled */
|
|
||||||
.ui.disabled.dimmer {
|
|
||||||
width: 0 !important;
|
|
||||||
height: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Legacy
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Animating / Active / Visible */
|
|
||||||
.dimmed.dimmable > .ui.animating.legacy.dimmer,
|
|
||||||
.dimmed.dimmable > .ui.visible.legacy.dimmer,
|
|
||||||
.ui.active.legacy.dimmer {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Alignment
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui[class*="top aligned"].dimmer {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.ui[class*="bottom aligned"].dimmer {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Page
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.page.dimmer {
|
|
||||||
position: @pageDimmerPosition;
|
|
||||||
transform-style: @transformStyle;
|
|
||||||
perspective: @perspective;
|
|
||||||
transform-origin: center center;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.animating.in.dimmable,
|
|
||||||
body.dimmed.dimmable {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dimmable > .dimmer {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Blurring
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.blurring.dimmable > :not(.dimmer) {
|
|
||||||
filter: @blurredStartFilter;
|
|
||||||
transition: @blurredTransition;
|
|
||||||
}
|
|
||||||
.blurring.dimmed.dimmable > :not(.dimmer) {
|
|
||||||
filter: @blurredEndFilter;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dimmer Color */
|
|
||||||
.blurring.dimmable > .dimmer {
|
|
||||||
background-color: @blurredBackgroundColor;
|
|
||||||
}
|
|
||||||
.blurring.dimmable > .inverted.dimmer {
|
|
||||||
background-color: @blurredInvertedBackgroundColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Aligned
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.dimmer > .top.aligned.content > * {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.ui.dimmer > .bottom.aligned.content > * {
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inverted.dimmer {
|
|
||||||
background-color: @invertedBackgroundColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer > .content > * {
|
|
||||||
color: @invertedTextColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Simple
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Displays without javascript */
|
|
||||||
.ui.simple.dimmer {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 1;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,706 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Embed
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.embed = 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.embed.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.embed.settings),
|
|
||||||
|
|
||||||
selector = settings.selector,
|
|
||||||
className = settings.className,
|
|
||||||
sources = settings.sources,
|
|
||||||
error = settings.error,
|
|
||||||
metadata = settings.metadata,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
templates = settings.templates,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
$window = $(window),
|
|
||||||
$module = $(this),
|
|
||||||
$placeholder = $module.find(selector.placeholder),
|
|
||||||
$icon = $module.find(selector.icon),
|
|
||||||
$embed = $module.find(selector.embed),
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.debug('Initializing embed');
|
|
||||||
module.determine.autoplay();
|
|
||||||
module.create();
|
|
||||||
module.bind.events();
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous instance of embed');
|
|
||||||
module.reset();
|
|
||||||
$module
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
module.verbose('Refreshing selector cache');
|
|
||||||
$placeholder = $module.find(selector.placeholder);
|
|
||||||
$icon = $module.find(selector.icon);
|
|
||||||
$embed = $module.find(selector.embed);
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
if( module.has.placeholder() ) {
|
|
||||||
module.debug('Adding placeholder events');
|
|
||||||
$module
|
|
||||||
.on('click' + eventNamespace, selector.placeholder, module.createAndShow)
|
|
||||||
.on('click' + eventNamespace, selector.icon, module.createAndShow)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
create: function() {
|
|
||||||
var
|
|
||||||
placeholder = module.get.placeholder()
|
|
||||||
;
|
|
||||||
if(placeholder) {
|
|
||||||
module.createPlaceholder();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.createAndShow();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
createPlaceholder: function(placeholder) {
|
|
||||||
var
|
|
||||||
icon = module.get.icon(),
|
|
||||||
url = module.get.url(),
|
|
||||||
embed = module.generate.embed(url)
|
|
||||||
;
|
|
||||||
placeholder = placeholder || module.get.placeholder();
|
|
||||||
$module.html( templates.placeholder(placeholder, icon) );
|
|
||||||
module.debug('Creating placeholder for embed', placeholder, icon);
|
|
||||||
},
|
|
||||||
|
|
||||||
createEmbed: function(url) {
|
|
||||||
module.refresh();
|
|
||||||
url = url || module.get.url();
|
|
||||||
$embed = $('<div/>')
|
|
||||||
.addClass(className.embed)
|
|
||||||
.html( module.generate.embed(url) )
|
|
||||||
.appendTo($module)
|
|
||||||
;
|
|
||||||
settings.onCreate.call(element, url);
|
|
||||||
module.debug('Creating embed object', $embed);
|
|
||||||
},
|
|
||||||
|
|
||||||
changeEmbed: function(url) {
|
|
||||||
$embed
|
|
||||||
.html( module.generate.embed(url) )
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
createAndShow: function() {
|
|
||||||
module.createEmbed();
|
|
||||||
module.show();
|
|
||||||
},
|
|
||||||
|
|
||||||
// sets new embed
|
|
||||||
change: function(source, id, url) {
|
|
||||||
module.debug('Changing video to ', source, id, url);
|
|
||||||
$module
|
|
||||||
.data(metadata.source, source)
|
|
||||||
.data(metadata.id, id)
|
|
||||||
;
|
|
||||||
if(url) {
|
|
||||||
$module.data(metadata.url, url);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$module.removeData(metadata.url);
|
|
||||||
}
|
|
||||||
if(module.has.embed()) {
|
|
||||||
module.changeEmbed();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.create();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// clears embed
|
|
||||||
reset: function() {
|
|
||||||
module.debug('Clearing embed and showing placeholder');
|
|
||||||
module.remove.data();
|
|
||||||
module.remove.active();
|
|
||||||
module.remove.embed();
|
|
||||||
module.showPlaceholder();
|
|
||||||
settings.onReset.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
// shows current embed
|
|
||||||
show: function() {
|
|
||||||
module.debug('Showing embed');
|
|
||||||
module.set.active();
|
|
||||||
settings.onDisplay.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
hide: function() {
|
|
||||||
module.debug('Hiding embed');
|
|
||||||
module.showPlaceholder();
|
|
||||||
},
|
|
||||||
|
|
||||||
showPlaceholder: function() {
|
|
||||||
module.debug('Showing placeholder image');
|
|
||||||
module.remove.active();
|
|
||||||
settings.onPlaceholderDisplay.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
id: function() {
|
|
||||||
return settings.id || $module.data(metadata.id);
|
|
||||||
},
|
|
||||||
placeholder: function() {
|
|
||||||
return settings.placeholder || $module.data(metadata.placeholder);
|
|
||||||
},
|
|
||||||
icon: function() {
|
|
||||||
return (settings.icon)
|
|
||||||
? settings.icon
|
|
||||||
: ($module.data(metadata.icon) !== undefined)
|
|
||||||
? $module.data(metadata.icon)
|
|
||||||
: module.determine.icon()
|
|
||||||
;
|
|
||||||
},
|
|
||||||
source: function(url) {
|
|
||||||
return (settings.source)
|
|
||||||
? settings.source
|
|
||||||
: ($module.data(metadata.source) !== undefined)
|
|
||||||
? $module.data(metadata.source)
|
|
||||||
: module.determine.source()
|
|
||||||
;
|
|
||||||
},
|
|
||||||
type: function() {
|
|
||||||
var source = module.get.source();
|
|
||||||
return (sources[source] !== undefined)
|
|
||||||
? sources[source].type
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
},
|
|
||||||
url: function() {
|
|
||||||
return (settings.url)
|
|
||||||
? settings.url
|
|
||||||
: ($module.data(metadata.url) !== undefined)
|
|
||||||
? $module.data(metadata.url)
|
|
||||||
: module.determine.url()
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
determine: {
|
|
||||||
autoplay: function() {
|
|
||||||
if(module.should.autoplay()) {
|
|
||||||
settings.autoplay = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
source: function(url) {
|
|
||||||
var
|
|
||||||
matchedSource = false
|
|
||||||
;
|
|
||||||
url = url || module.get.url();
|
|
||||||
if(url) {
|
|
||||||
$.each(sources, function(name, source) {
|
|
||||||
if(url.search(source.domain) !== -1) {
|
|
||||||
matchedSource = name;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return matchedSource;
|
|
||||||
},
|
|
||||||
icon: function() {
|
|
||||||
var
|
|
||||||
source = module.get.source()
|
|
||||||
;
|
|
||||||
return (sources[source] !== undefined)
|
|
||||||
? sources[source].icon
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
},
|
|
||||||
url: function() {
|
|
||||||
var
|
|
||||||
id = settings.id || $module.data(metadata.id),
|
|
||||||
source = settings.source || $module.data(metadata.source),
|
|
||||||
url
|
|
||||||
;
|
|
||||||
url = (sources[source] !== undefined)
|
|
||||||
? sources[source].url.replace('{id}', id)
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
if(url) {
|
|
||||||
$module.data(metadata.url, url);
|
|
||||||
}
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
set: {
|
|
||||||
active: function() {
|
|
||||||
$module.addClass(className.active);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
data: function() {
|
|
||||||
$module
|
|
||||||
.removeData(metadata.id)
|
|
||||||
.removeData(metadata.icon)
|
|
||||||
.removeData(metadata.placeholder)
|
|
||||||
.removeData(metadata.source)
|
|
||||||
.removeData(metadata.url)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
active: function() {
|
|
||||||
$module.removeClass(className.active);
|
|
||||||
},
|
|
||||||
embed: function() {
|
|
||||||
$embed.empty();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
encode: {
|
|
||||||
parameters: function(parameters) {
|
|
||||||
var
|
|
||||||
urlString = [],
|
|
||||||
index
|
|
||||||
;
|
|
||||||
for (index in parameters) {
|
|
||||||
urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) );
|
|
||||||
}
|
|
||||||
return urlString.join('&');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
generate: {
|
|
||||||
embed: function(url) {
|
|
||||||
module.debug('Generating embed html');
|
|
||||||
var
|
|
||||||
source = module.get.source(),
|
|
||||||
html,
|
|
||||||
parameters
|
|
||||||
;
|
|
||||||
url = module.get.url(url);
|
|
||||||
if(url) {
|
|
||||||
parameters = module.generate.parameters(source);
|
|
||||||
html = templates.iframe(url, parameters);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.error(error.noURL, $module);
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
},
|
|
||||||
parameters: function(source, extraParameters) {
|
|
||||||
var
|
|
||||||
parameters = (sources[source] && sources[source].parameters !== undefined)
|
|
||||||
? sources[source].parameters(settings)
|
|
||||||
: {}
|
|
||||||
;
|
|
||||||
extraParameters = extraParameters || settings.parameters;
|
|
||||||
if(extraParameters) {
|
|
||||||
parameters = $.extend({}, parameters, extraParameters);
|
|
||||||
}
|
|
||||||
parameters = settings.onEmbed(parameters);
|
|
||||||
return module.encode.parameters(parameters);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
has: {
|
|
||||||
embed: function() {
|
|
||||||
return ($embed.length > 0);
|
|
||||||
},
|
|
||||||
placeholder: function() {
|
|
||||||
return settings.placeholder || $module.data(metadata.placeholder);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
should: {
|
|
||||||
autoplay: function() {
|
|
||||||
return (settings.autoplay === 'auto')
|
|
||||||
? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
|
|
||||||
: settings.autoplay
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
video: function() {
|
|
||||||
return module.get.type() == 'video';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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($allModules.length > 1) {
|
|
||||||
title += ' ' + '(' + $allModules.length + ')';
|
|
||||||
}
|
|
||||||
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($.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.embed.settings = {
|
|
||||||
|
|
||||||
name : 'Embed',
|
|
||||||
namespace : 'embed',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
icon : false,
|
|
||||||
source : false,
|
|
||||||
url : false,
|
|
||||||
id : false,
|
|
||||||
|
|
||||||
// standard video settings
|
|
||||||
autoplay : 'auto',
|
|
||||||
color : '#444444',
|
|
||||||
hd : true,
|
|
||||||
brandedUI : false,
|
|
||||||
|
|
||||||
// additional parameters to include with the embed
|
|
||||||
parameters: false,
|
|
||||||
|
|
||||||
onDisplay : function() {},
|
|
||||||
onPlaceholderDisplay : function() {},
|
|
||||||
onReset : function() {},
|
|
||||||
onCreate : function(url) {},
|
|
||||||
onEmbed : function(parameters) {
|
|
||||||
return parameters;
|
|
||||||
},
|
|
||||||
|
|
||||||
metadata : {
|
|
||||||
id : 'id',
|
|
||||||
icon : 'icon',
|
|
||||||
placeholder : 'placeholder',
|
|
||||||
source : 'source',
|
|
||||||
url : 'url'
|
|
||||||
},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
noURL : 'No URL specified',
|
|
||||||
method : 'The method you called is not defined'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
active : 'active',
|
|
||||||
embed : 'embed'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
embed : '.embed',
|
|
||||||
placeholder : '.placeholder',
|
|
||||||
icon : '.icon'
|
|
||||||
},
|
|
||||||
|
|
||||||
sources: {
|
|
||||||
youtube: {
|
|
||||||
name : 'youtube',
|
|
||||||
type : 'video',
|
|
||||||
icon : 'video play',
|
|
||||||
domain : 'youtube.com',
|
|
||||||
url : '//www.youtube.com/embed/{id}',
|
|
||||||
parameters: function(settings) {
|
|
||||||
return {
|
|
||||||
autohide : !settings.brandedUI,
|
|
||||||
autoplay : settings.autoplay,
|
|
||||||
color : settings.color || undefined,
|
|
||||||
hq : settings.hd,
|
|
||||||
jsapi : settings.api,
|
|
||||||
modestbranding : !settings.brandedUI
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
vimeo: {
|
|
||||||
name : 'vimeo',
|
|
||||||
type : 'video',
|
|
||||||
icon : 'video play',
|
|
||||||
domain : 'vimeo.com',
|
|
||||||
url : '//player.vimeo.com/video/{id}',
|
|
||||||
parameters: function(settings) {
|
|
||||||
return {
|
|
||||||
api : settings.api,
|
|
||||||
autoplay : settings.autoplay,
|
|
||||||
byline : settings.brandedUI,
|
|
||||||
color : settings.color || undefined,
|
|
||||||
portrait : settings.brandedUI,
|
|
||||||
title : settings.brandedUI
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
templates: {
|
|
||||||
iframe : function(url, parameters) {
|
|
||||||
var src = url;
|
|
||||||
if (parameters) {
|
|
||||||
src += '?' + parameters;
|
|
||||||
}
|
|
||||||
return ''
|
|
||||||
+ '<iframe src="' + src + '"'
|
|
||||||
+ ' width="100%" height="100%"'
|
|
||||||
+ ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
|
||||||
;
|
|
||||||
},
|
|
||||||
placeholder : function(image, icon) {
|
|
||||||
var
|
|
||||||
html = ''
|
|
||||||
;
|
|
||||||
if(icon) {
|
|
||||||
html += '<i class="' + icon + ' icon"></i>';
|
|
||||||
}
|
|
||||||
if(image) {
|
|
||||||
html += '<img class="placeholder" src="' + image + '">';
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// NOT YET IMPLEMENTED
|
|
||||||
api : false,
|
|
||||||
onPause : function() {},
|
|
||||||
onPlay : function() {},
|
|
||||||
onStop : function() {}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Video
|
|
||||||
* http://github.com/semantic-org/semantic-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;
|
|
||||||
position: relative;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 0px;
|
|
||||||
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: 0px;
|
|
||||||
left: 0px;
|
|
||||||
margin: 0em;
|
|
||||||
padding: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-----------------
|
|
||||||
Embed
|
|
||||||
------------------*/
|
|
||||||
|
|
||||||
.ui.embed > .embed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Placeholder
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.embed > .placeholder {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: @placeholderBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Icon
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.embed > .icon {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
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%;
|
|
||||||
z-index: 4;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,591 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Modal
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'modal';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Modal
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.modal {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
z-index: @zIndex;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
background: @background;
|
|
||||||
border: @border;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
transform-origin: @transformOrigin;
|
|
||||||
|
|
||||||
flex: 0 0 auto;
|
|
||||||
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
user-select: text;
|
|
||||||
will-change: top, left, margin, transform, opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.modal > :first-child:not(.icon),
|
|
||||||
.ui.modal > .icon:first-child + * {
|
|
||||||
border-top-left-radius: @borderRadius;
|
|
||||||
border-top-right-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.modal > :last-child {
|
|
||||||
border-bottom-left-radius: @borderRadius;
|
|
||||||
border-bottom-right-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Content
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Close
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.modal > .close {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: @closeTop;
|
|
||||||
right: @closeRight;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
opacity: @closeOpacity;
|
|
||||||
font-size: @closeSize;
|
|
||||||
color: @closeColor;
|
|
||||||
|
|
||||||
width: @closeHitbox;
|
|
||||||
height: @closeHitbox;
|
|
||||||
padding: @closePadding;
|
|
||||||
}
|
|
||||||
.ui.modal > .close:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Header
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.modal > .header {
|
|
||||||
display: block;
|
|
||||||
font-family: @headerFontFamily;
|
|
||||||
background: @headerBackground;
|
|
||||||
margin: @headerMargin;
|
|
||||||
padding: @headerPadding;
|
|
||||||
box-shadow: @headerBoxShadow;
|
|
||||||
|
|
||||||
color: @headerColor;
|
|
||||||
border-bottom: @headerBorder;
|
|
||||||
}
|
|
||||||
.ui.modal > .header:not(.ui) {
|
|
||||||
font-size: @headerFontSize;
|
|
||||||
line-height: @headerLineHeight;
|
|
||||||
font-weight: @headerFontWeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.modal > .content {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
font-size: @contentFontSize;
|
|
||||||
line-height: @contentLineHeight;
|
|
||||||
padding: @contentPadding;
|
|
||||||
background: @contentBackground;
|
|
||||||
}
|
|
||||||
.ui.modal > .image.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.ui.modal > .content > .image {
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
width: @imageWidth;
|
|
||||||
align-self: @imageVerticalAlign;
|
|
||||||
}
|
|
||||||
.ui.modal > [class*="top aligned"] {
|
|
||||||
align-self: top;
|
|
||||||
}
|
|
||||||
.ui.modal > [class*="middle aligned"] {
|
|
||||||
align-self: middle;
|
|
||||||
}
|
|
||||||
.ui.modal > [class*="stretched"] {
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Description */
|
|
||||||
.ui.modal > .content > .description {
|
|
||||||
display: block;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
min-width: 0px;
|
|
||||||
align-self: @descriptionVerticalAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.modal > .content > .icon + .description,
|
|
||||||
.ui.modal > .content > .image + .description {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
min-width: @descriptionMinWidth;
|
|
||||||
width: @descriptionWidth;
|
|
||||||
padding-left: @descriptionDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:ignore*/
|
|
||||||
.ui.modal > .content > .image > i.icon {
|
|
||||||
margin: 0em;
|
|
||||||
opacity: 1;
|
|
||||||
width: auto;
|
|
||||||
line-height: 1;
|
|
||||||
font-size: @imageIconSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Actions
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.modal > .actions {
|
|
||||||
background: @actionBackground;
|
|
||||||
padding: @actionPadding;
|
|
||||||
border-top: @actionBorder;
|
|
||||||
text-align: @actionAlign;
|
|
||||||
}
|
|
||||||
.ui.modal .actions > .button {
|
|
||||||
margin-left: @buttonDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Responsive
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Modal Width */
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.ui.modal {
|
|
||||||
width: @mobileWidth;
|
|
||||||
margin: @mobileMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @tabletBreakpoint) {
|
|
||||||
.ui.modal {
|
|
||||||
width: @tabletWidth;
|
|
||||||
margin: @tabletMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @computerBreakpoint) {
|
|
||||||
.ui.modal {
|
|
||||||
width: @computerWidth;
|
|
||||||
margin: @computerMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
||||||
.ui.modal {
|
|
||||||
width: @largeMonitorWidth;
|
|
||||||
margin: @largeMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
||||||
.ui.modal {
|
|
||||||
width: @widescreenMonitorWidth;
|
|
||||||
margin: @widescreenMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tablet and Mobile */
|
|
||||||
@media only screen and (max-width : @largestTabletScreen) {
|
|
||||||
.ui.modal > .header {
|
|
||||||
padding-right: @closeHitbox;
|
|
||||||
}
|
|
||||||
.ui.modal > .close {
|
|
||||||
top: @innerCloseTop;
|
|
||||||
right: @innerCloseRight;
|
|
||||||
color: @innerCloseColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile */
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
|
|
||||||
.ui.modal > .header {
|
|
||||||
padding: @mobileHeaderPadding !important;
|
|
||||||
padding-right: @closeHitbox !important;
|
|
||||||
}
|
|
||||||
.ui.modal > .content {
|
|
||||||
display: block;
|
|
||||||
padding: @mobileContentPadding !important;
|
|
||||||
}
|
|
||||||
.ui.modal > .close {
|
|
||||||
top: @mobileCloseTop !important;
|
|
||||||
right: @mobileCloseRight !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:ignore*/
|
|
||||||
.ui.modal .image.content {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.ui.modal .content > .image {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0em auto !important;
|
|
||||||
text-align: center;
|
|
||||||
padding: @mobileImagePadding !important;
|
|
||||||
}
|
|
||||||
.ui.modal > .content > .image > i.icon {
|
|
||||||
font-size: @mobileImageIconSize;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:ignore*/
|
|
||||||
.ui.modal .content > .description {
|
|
||||||
display: block;
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0em !important;
|
|
||||||
padding: @mobileDescriptionPadding !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Let Buttons Stack */
|
|
||||||
.ui.modal > .actions {
|
|
||||||
padding: @mobileActionPadding !important;
|
|
||||||
}
|
|
||||||
.ui.modal .actions > .buttons,
|
|
||||||
.ui.modal .actions > .button {
|
|
||||||
margin-bottom: @mobileButtonDistance;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Coupling
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inverted.dimmer > .ui.modal {
|
|
||||||
box-shadow: @invertedBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.basic.modal {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0em;
|
|
||||||
box-shadow: none !important;
|
|
||||||
color: @basicModalColor;
|
|
||||||
}
|
|
||||||
.ui.basic.modal > .header,
|
|
||||||
.ui.basic.modal > .content,
|
|
||||||
.ui.basic.modal > .actions {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.ui.basic.modal > .header {
|
|
||||||
color: @basicModalHeaderColor;
|
|
||||||
}
|
|
||||||
.ui.basic.modal > .close {
|
|
||||||
top: @basicModalCloseTop;
|
|
||||||
right: @basicModalCloseRight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.dimmer > .basic.modal {
|
|
||||||
color: @basicInvertedModalColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.dimmer > .ui.basic.modal > .header {
|
|
||||||
color: @basicInvertedModalHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Resort to margin positioning if legacy */
|
|
||||||
.ui.legacy.modal,
|
|
||||||
.ui.legacy.page.dimmer > .ui.modal {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.legacy.page.dimmer > .ui.scrolling.modal,
|
|
||||||
.ui.page.dimmer > .ui.scrolling.legacy.modal,
|
|
||||||
.ui.top.aligned.legacy.page.dimmer > .ui.modal,
|
|
||||||
.ui.top.aligned.dimmer > .ui.legacy.modal {
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tablet and Mobile */
|
|
||||||
@media only screen and (max-width : @largestTabletScreen) {
|
|
||||||
.ui.basic.modal > .close {
|
|
||||||
color: @basicInnerCloseColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.loading.modal {
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: @loadingZIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.active.modal {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Top Aligned
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Top Aligned Modal */
|
|
||||||
.modals.dimmer[class*="top aligned"] .modal {
|
|
||||||
margin: @topAlignedMargin auto;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.modals.dimmer[class*="top aligned"] .modal {
|
|
||||||
margin: @mobileTopAlignedMargin auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Legacy Top Aligned */
|
|
||||||
.legacy.modals.dimmer[class*="top aligned"] {
|
|
||||||
padding-top: @topAlignedMargin;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.legacy.modals.dimmer[class*="top aligned"] {
|
|
||||||
padding-top: @mobileTopAlignedMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Scrolling
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Scrolling Dimmer */
|
|
||||||
.scrolling.dimmable.dimmed {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.scrolling.dimmable > .dimmer {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.scrolling.dimmable.dimmed > .dimmer {
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
.scrolling.dimmable > .dimmer {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
.modals.dimmer .ui.scrolling.modal {
|
|
||||||
margin: @scrollingMargin auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Undetached Scrolling */
|
|
||||||
.scrolling.undetached.dimmable.dimmed {
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
.scrolling.undetached.dimmable.dimmed > .dimmer {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.scrolling.undetached.dimmable .ui.scrolling.modal {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
margin-top: @scrollingMargin !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrolling Content */
|
|
||||||
.ui.modal .scrolling.content {
|
|
||||||
max-height: @scrollingContentMaxHeight;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Full Screen
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fullscreen.modal {
|
|
||||||
width: @fullScreenWidth !important;
|
|
||||||
margin: @fullScreenMargin;
|
|
||||||
}
|
|
||||||
.ui.fullscreen.modal > .header {
|
|
||||||
padding-right: @closeHitbox;
|
|
||||||
}
|
|
||||||
.ui.fullscreen.modal > .close {
|
|
||||||
top: @innerCloseTop;
|
|
||||||
right: @innerCloseRight;
|
|
||||||
color: @innerCloseColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Size
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.modal {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mini */
|
|
||||||
.ui.mini.modal > .header:not(.ui) {
|
|
||||||
font-size: @miniHeaderSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mini Modal Width */
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.ui.mini.modal {
|
|
||||||
width: @miniMobileWidth;
|
|
||||||
margin: @miniMobileMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @tabletBreakpoint) {
|
|
||||||
.ui.mini.modal {
|
|
||||||
width: @miniTabletWidth;
|
|
||||||
margin: @miniTabletMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @computerBreakpoint) {
|
|
||||||
.ui.mini.modal {
|
|
||||||
width: @miniComputerWidth;
|
|
||||||
margin: @miniComputerMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
||||||
.ui.mini.modal {
|
|
||||||
width: @miniLargeMonitorWidth;
|
|
||||||
margin: @miniLargeMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
||||||
.ui.mini.modal {
|
|
||||||
width: @miniWidescreenMonitorWidth;
|
|
||||||
margin: @miniWidescreenMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* mini */
|
|
||||||
.ui.small.modal > .header:not(.ui) {
|
|
||||||
font-size: @miniHeaderSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tiny Modal Width */
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.ui.tiny.modal {
|
|
||||||
width: @tinyMobileWidth;
|
|
||||||
margin: @tinyMobileMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @tabletBreakpoint) {
|
|
||||||
.ui.tiny.modal {
|
|
||||||
width: @tinyTabletWidth;
|
|
||||||
margin: @tinyTabletMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @computerBreakpoint) {
|
|
||||||
.ui.tiny.modal {
|
|
||||||
width: @tinyComputerWidth;
|
|
||||||
margin: @tinyComputerMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
||||||
.ui.tiny.modal {
|
|
||||||
width: @tinyLargeMonitorWidth;
|
|
||||||
margin: @tinyLargeMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
||||||
.ui.tiny.modal {
|
|
||||||
width: @tinyWidescreenMonitorWidth;
|
|
||||||
margin: @tinyWidescreenMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small */
|
|
||||||
.ui.small.modal > .header:not(.ui) {
|
|
||||||
font-size: @smallHeaderSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small Modal Width */
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.ui.small.modal {
|
|
||||||
width: @smallMobileWidth;
|
|
||||||
margin: @smallMobileMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @tabletBreakpoint) {
|
|
||||||
.ui.small.modal {
|
|
||||||
width: @smallTabletWidth;
|
|
||||||
margin: @smallTabletMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @computerBreakpoint) {
|
|
||||||
.ui.small.modal {
|
|
||||||
width: @smallComputerWidth;
|
|
||||||
margin: @smallComputerMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
||||||
.ui.small.modal {
|
|
||||||
width: @smallLargeMonitorWidth;
|
|
||||||
margin: @smallLargeMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
||||||
.ui.small.modal {
|
|
||||||
width: @smallWidescreenMonitorWidth;
|
|
||||||
margin: @smallWidescreenMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large Modal Width */
|
|
||||||
.ui.large.modal > .header {
|
|
||||||
font-size: @largeHeaderSize;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width : @largestMobileScreen) {
|
|
||||||
.ui.large.modal {
|
|
||||||
width: @largeMobileWidth;
|
|
||||||
margin: @largeMobileMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @tabletBreakpoint) {
|
|
||||||
.ui.large.modal {
|
|
||||||
width: @largeTabletWidth;
|
|
||||||
margin: @largeTabletMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @computerBreakpoint) {
|
|
||||||
.ui.large.modal {
|
|
||||||
width: @largeComputerWidth;
|
|
||||||
margin: @largeComputerMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
|
||||||
.ui.large.modal {
|
|
||||||
width: @largeLargeMonitorWidth;
|
|
||||||
margin: @largeLargeMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
|
||||||
.ui.large.modal {
|
|
||||||
width: @largeWidescreenMonitorWidth;
|
|
||||||
margin: @largeWidescreenMonitorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,507 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Nag
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
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),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = namespace + '-module',
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
|
|
||||||
$close = $module.find(selector.close),
|
|
||||||
$context = (settings.context)
|
|
||||||
? $(settings.context)
|
|
||||||
: $('body'),
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
|
|
||||||
moduleOffset,
|
|
||||||
moduleHeight,
|
|
||||||
|
|
||||||
contextWidth,
|
|
||||||
contextHeight,
|
|
||||||
contextOffset,
|
|
||||||
|
|
||||||
yOffset,
|
|
||||||
yPosition,
|
|
||||||
|
|
||||||
timer,
|
|
||||||
module,
|
|
||||||
|
|
||||||
requestAnimationFrame = window.requestAnimationFrame
|
|
||||||
|| window.mozRequestAnimationFrame
|
|
||||||
|| window.webkitRequestAnimationFrame
|
|
||||||
|| window.msRequestAnimationFrame
|
|
||||||
|| function(callback) { setTimeout(callback, 0); }
|
|
||||||
;
|
|
||||||
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($.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 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Nag
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0px;
|
|
||||||
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
@ -1,712 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Popup
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'popup';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Popup
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
|
|
||||||
/* Fixes content being squished when inline (moz only) */
|
|
||||||
min-width: min-content;
|
|
||||||
z-index: @zIndex;
|
|
||||||
|
|
||||||
border: @border;
|
|
||||||
line-height: @lineHeight;
|
|
||||||
max-width: @maxWidth;
|
|
||||||
background: @background;
|
|
||||||
|
|
||||||
padding: @verticalPadding @horizontalPadding;
|
|
||||||
font-weight: @fontWeight;
|
|
||||||
font-style: @fontStyle;
|
|
||||||
color: @color;
|
|
||||||
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
}
|
|
||||||
.ui.popup > .header {
|
|
||||||
padding: 0em;
|
|
||||||
|
|
||||||
font-family: @headerFont;
|
|
||||||
font-size: @headerFontSize;
|
|
||||||
line-height: @headerLineHeight;
|
|
||||||
font-weight: @headerFontWeight;
|
|
||||||
}
|
|
||||||
.ui.popup > .header + .content {
|
|
||||||
padding-top: @headerDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: @arrowSize;
|
|
||||||
height: @arrowSize;
|
|
||||||
|
|
||||||
background: @arrowBackground;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
|
|
||||||
z-index: @arrowZIndex;
|
|
||||||
box-shadow: @arrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Tooltip
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
[data-tooltip] {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
[data-tooltip]:before {
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
font-size: @medium;
|
|
||||||
width: @arrowSize;
|
|
||||||
height: @arrowSize;
|
|
||||||
|
|
||||||
background: @tooltipArrowBackground;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
|
|
||||||
z-index: @arrowZIndex;
|
|
||||||
box-shadow: @tooltipArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Popup */
|
|
||||||
[data-tooltip]:after {
|
|
||||||
pointer-events: none;
|
|
||||||
content: attr(data-tooltip);
|
|
||||||
position: absolute;
|
|
||||||
text-transform: none;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
font-size: @tooltipFontSize;
|
|
||||||
|
|
||||||
border: @tooltipBorder;
|
|
||||||
line-height: @tooltipLineHeight;
|
|
||||||
max-width: @tooltipMaxWidth;
|
|
||||||
background: @tooltipBackground;
|
|
||||||
|
|
||||||
padding: @tooltipPadding;
|
|
||||||
font-weight: @tooltipFontWeight;
|
|
||||||
font-style: @tooltipFontStyle;
|
|
||||||
color: @tooltipColor;
|
|
||||||
|
|
||||||
border-radius: @tooltipBorderRadius;
|
|
||||||
box-shadow: @tooltipBoxShadow;
|
|
||||||
z-index: @tooltipZIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Default Position (Top Center) */
|
|
||||||
[data-tooltip]:not([data-position]):before {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
background: @tooltipArrowBottomBackground;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-bottom: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
[data-tooltip]:not([data-position]):after {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: 100%;
|
|
||||||
margin-bottom: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
[data-tooltip]:before,
|
|
||||||
[data-tooltip]:after {
|
|
||||||
pointer-events: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
[data-tooltip]:before {
|
|
||||||
opacity: 0;
|
|
||||||
transform: rotate(45deg) scale(0) !important;
|
|
||||||
transform-origin: center top;
|
|
||||||
transition:
|
|
||||||
all @tooltipDuration @tooltipEasing
|
|
||||||
;
|
|
||||||
}
|
|
||||||
[data-tooltip]:after {
|
|
||||||
opacity: 1;
|
|
||||||
transform-origin: center bottom;
|
|
||||||
transition:
|
|
||||||
all @tooltipDuration @tooltipEasing
|
|
||||||
;
|
|
||||||
}
|
|
||||||
[data-tooltip]:hover:before,
|
|
||||||
[data-tooltip]:hover:after {
|
|
||||||
visibility: visible;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
[data-tooltip]:hover:before {
|
|
||||||
transform: rotate(45deg) scale(1) !important;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation Position */
|
|
||||||
[data-tooltip]:after,
|
|
||||||
[data-tooltip][data-position="top center"]:after,
|
|
||||||
[data-tooltip][data-position="bottom center"]:after {
|
|
||||||
transform: translateX(-50%) scale(0) !important;
|
|
||||||
}
|
|
||||||
[data-tooltip]:hover:after,
|
|
||||||
[data-tooltip][data-position="bottom center"]:hover:after {
|
|
||||||
transform: translateX(-50%) scale(1) !important;
|
|
||||||
}
|
|
||||||
[data-tooltip][data-position="left center"]:after,
|
|
||||||
[data-tooltip][data-position="right center"]:after {
|
|
||||||
transform: translateY(-50%) scale(0) !important;
|
|
||||||
}
|
|
||||||
[data-tooltip][data-position="left center"]:hover:after,
|
|
||||||
[data-tooltip][data-position="right center"]:hover:after {
|
|
||||||
transform: translateY(-50%) scale(1) !important;
|
|
||||||
}
|
|
||||||
[data-tooltip][data-position="top left"]:after,
|
|
||||||
[data-tooltip][data-position="top right"]:after,
|
|
||||||
[data-tooltip][data-position="bottom left"]:after,
|
|
||||||
[data-tooltip][data-position="bottom right"]:after {
|
|
||||||
transform: scale(0) !important;
|
|
||||||
}
|
|
||||||
[data-tooltip][data-position="top left"]:hover:after,
|
|
||||||
[data-tooltip][data-position="top right"]:hover:after,
|
|
||||||
[data-tooltip][data-position="bottom left"]:hover:after,
|
|
||||||
[data-tooltip][data-position="bottom right"]:hover:after {
|
|
||||||
transform: scale(1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
[data-tooltip][data-inverted]:before {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow Position */
|
|
||||||
[data-tooltip][data-inverted]:before {
|
|
||||||
background: @invertedArrowBottomBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Popup */
|
|
||||||
[data-tooltip][data-inverted]:after {
|
|
||||||
background: @tooltipInvertedBackground;
|
|
||||||
color: @tooltipInvertedColor;
|
|
||||||
border: @tooltipInvertedBorder;
|
|
||||||
box-shadow: @tooltipInvertedBoxShadow;
|
|
||||||
}
|
|
||||||
[data-tooltip][data-inverted]:after .header {
|
|
||||||
background-color: @tooltipInvertedHeaderBackground;
|
|
||||||
color: @tooltipInvertedHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Position
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Top Center */
|
|
||||||
[data-position="top center"][data-tooltip]:after {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 100%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
margin-bottom: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="top center"][data-tooltip]:before {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
background: @tooltipArrowTopBackground;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-bottom: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top Left */
|
|
||||||
[data-position="top left"][data-tooltip]:after {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
margin-bottom: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="top left"][data-tooltip]:before {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: 100%;
|
|
||||||
left: @arrowDistanceFromEdge;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-bottom: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top Right */
|
|
||||||
[data-position="top right"][data-tooltip]:after {
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
margin-bottom: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="top right"][data-tooltip]:before {
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
bottom: 100%;
|
|
||||||
right: @arrowDistanceFromEdge;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-bottom: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Bottom Center */
|
|
||||||
[data-position="bottom center"][data-tooltip]:after {
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
left: 50%;
|
|
||||||
top: 100%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
margin-top: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="bottom center"][data-tooltip]:before {
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-top: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom Left */
|
|
||||||
[data-position="bottom left"][data-tooltip]:after {
|
|
||||||
left: 0;
|
|
||||||
top: 100%;
|
|
||||||
margin-top: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="bottom left"][data-tooltip]:before {
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
top: 100%;
|
|
||||||
left: @arrowDistanceFromEdge;
|
|
||||||
margin-left: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-top: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom Right */
|
|
||||||
[data-position="bottom right"][data-tooltip]:after {
|
|
||||||
right: 0;
|
|
||||||
top: 100%;
|
|
||||||
margin-top: @tooltipDistanceAway;
|
|
||||||
}
|
|
||||||
[data-position="bottom right"][data-tooltip]:before {
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
top: 100%;
|
|
||||||
right: @arrowDistanceFromEdge;
|
|
||||||
margin-left: @tooltipArrowVerticalOffset;
|
|
||||||
margin-top: -@tooltipArrowHorizontalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Left Center */
|
|
||||||
[data-position="left center"][data-tooltip]:after {
|
|
||||||
right: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-right: @tooltipDistanceAway;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
[data-position="left center"][data-tooltip]:before {
|
|
||||||
right: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: @tooltipArrowVerticalOffset;
|
|
||||||
margin-right: @tooltipArrowHorizontalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right Center */
|
|
||||||
[data-position="right center"][data-tooltip]:after {
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: @tooltipDistanceAway;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
[data-position="right center"][data-tooltip]:before {
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: @tooltipArrowHorizontalOffset;
|
|
||||||
margin-left: -@tooltipArrowVerticalOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow */
|
|
||||||
[data-position~="bottom"][data-tooltip]:before {
|
|
||||||
background: @arrowTopBackground;
|
|
||||||
box-shadow: @bottomArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-position="left center"][data-tooltip]:before {
|
|
||||||
background: @arrowCenterBackground;
|
|
||||||
box-shadow: @leftArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-position="right center"][data-tooltip]:before {
|
|
||||||
background: @arrowCenterBackground;
|
|
||||||
box-shadow: @rightArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-position~="top"][data-tooltip]:before {
|
|
||||||
background: @arrowBottomBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted Arrow Color */
|
|
||||||
[data-inverted][data-position~="bottom"][data-tooltip]:before {
|
|
||||||
background: @invertedArrowTopBackground;
|
|
||||||
box-shadow: @bottomArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-inverted][data-position="left center"][data-tooltip]:before {
|
|
||||||
background: @invertedArrowCenterBackground;
|
|
||||||
box-shadow: @leftArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-inverted][data-position="right center"][data-tooltip]:before {
|
|
||||||
background: @invertedArrowCenterBackground;
|
|
||||||
box-shadow: @rightArrowBoxShadow;
|
|
||||||
}
|
|
||||||
[data-inverted][data-position~="top"][data-tooltip]:before {
|
|
||||||
background: @invertedArrowBottomBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-position~="bottom"][data-tooltip]:before {
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
[data-position~="bottom"][data-tooltip]:after {
|
|
||||||
transform-origin: center top;
|
|
||||||
}
|
|
||||||
[data-position="left center"][data-tooltip]:before {
|
|
||||||
transform-origin: top center;
|
|
||||||
}
|
|
||||||
[data-position="left center"][data-tooltip]:after {
|
|
||||||
transform-origin: right center;
|
|
||||||
}
|
|
||||||
[data-position="right center"][data-tooltip]:before {
|
|
||||||
transform-origin: right center;
|
|
||||||
}
|
|
||||||
[data-position="right center"][data-tooltip]:after {
|
|
||||||
transform-origin: left center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Spacing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Top */
|
|
||||||
.ui.top.popup {
|
|
||||||
margin: 0em 0em @popupDistanceAway;
|
|
||||||
}
|
|
||||||
.ui.top.left.popup {
|
|
||||||
transform-origin: left bottom;
|
|
||||||
}
|
|
||||||
.ui.top.center.popup {
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
.ui.top.right.popup {
|
|
||||||
transform-origin: right bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Vertical Center */
|
|
||||||
.ui.left.center.popup {
|
|
||||||
margin: 0em @popupDistanceAway 0em 0em;
|
|
||||||
transform-origin: right 50%;
|
|
||||||
}
|
|
||||||
.ui.right.center.popup {
|
|
||||||
margin: 0em 0em 0em @popupDistanceAway;
|
|
||||||
transform-origin: left 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Bottom */
|
|
||||||
.ui.bottom.popup {
|
|
||||||
margin: @popupDistanceAway 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.bottom.left.popup {
|
|
||||||
transform-origin: left top;
|
|
||||||
}
|
|
||||||
.ui.bottom.center.popup {
|
|
||||||
transform-origin: center top;
|
|
||||||
}
|
|
||||||
.ui.bottom.right.popup {
|
|
||||||
transform-origin: right top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Pointer
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/*--- Below ---*/
|
|
||||||
.ui.bottom.center.popup:before {
|
|
||||||
margin-left: @arrowOffset;
|
|
||||||
top: @arrowOffset;
|
|
||||||
left: 50%;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
box-shadow: @bottomArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.left.popup {
|
|
||||||
margin-left: @boxArrowOffset;
|
|
||||||
}
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.bottom.left.popup:before {
|
|
||||||
top: @arrowOffset;
|
|
||||||
left: @arrowDistanceFromEdge;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
margin-left: 0em;
|
|
||||||
box-shadow: @bottomArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.right.popup {
|
|
||||||
margin-right: @boxArrowOffset;
|
|
||||||
}
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.bottom.right.popup:before {
|
|
||||||
top: @arrowOffset;
|
|
||||||
right: @arrowDistanceFromEdge;
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-left: 0em;
|
|
||||||
box-shadow: @bottomArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Above ---*/
|
|
||||||
.ui.top.center.popup:before {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: @arrowOffset;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: @arrowOffset;
|
|
||||||
}
|
|
||||||
.ui.top.left.popup {
|
|
||||||
margin-left: @boxArrowOffset;
|
|
||||||
}
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.top.left.popup:before {
|
|
||||||
bottom: @arrowOffset;
|
|
||||||
left: @arrowDistanceFromEdge;
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
.ui.top.right.popup {
|
|
||||||
margin-right: @boxArrowOffset;
|
|
||||||
}
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.top.right.popup:before {
|
|
||||||
bottom: @arrowOffset;
|
|
||||||
right: @arrowDistanceFromEdge;
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-left: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Left Center ---*/
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.left.center.popup:before {
|
|
||||||
top: 50%;
|
|
||||||
right: @arrowOffset;
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-top: @arrowOffset;
|
|
||||||
box-shadow: @leftArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Right Center ---*/
|
|
||||||
/*rtl:rename*/
|
|
||||||
.ui.right.center.popup:before {
|
|
||||||
top: 50%;
|
|
||||||
left: @arrowOffset;
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
margin-top: @arrowOffset;
|
|
||||||
box-shadow: @rightArrowBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow Color By Location */
|
|
||||||
.ui.bottom.popup:before {
|
|
||||||
background: @arrowTopBackground;
|
|
||||||
}
|
|
||||||
.ui.right.center.popup:before,
|
|
||||||
.ui.left.center.popup:before {
|
|
||||||
background: @arrowCenterBackground;
|
|
||||||
}
|
|
||||||
.ui.top.popup:before {
|
|
||||||
background: @arrowBottomBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted Arrow Color */
|
|
||||||
.ui.inverted.bottom.popup:before {
|
|
||||||
background: @invertedArrowTopBackground;
|
|
||||||
}
|
|
||||||
.ui.inverted.right.center.popup:before,
|
|
||||||
.ui.inverted.left.center.popup:before {
|
|
||||||
background: @invertedArrowCenterBackground;
|
|
||||||
}
|
|
||||||
.ui.inverted.top.popup:before {
|
|
||||||
background: @invertedArrowBottomBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Coupling
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Immediate Nested Grid */
|
|
||||||
.ui.popup > .ui.grid:not(.padded) {
|
|
||||||
width: @nestedGridWidth;
|
|
||||||
margin: @nestedGridMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.loading.popup {
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: @loadingZIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.animating.popup,
|
|
||||||
.ui.visible.popup {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.visible.popup {
|
|
||||||
transform: translateZ(0px);
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Basic
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.basic.popup:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Wide
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.wide.popup {
|
|
||||||
max-width: @wideWidth;
|
|
||||||
}
|
|
||||||
.ui[class*="very wide"].popup {
|
|
||||||
max-width: @veryWideWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
.ui.wide.popup,
|
|
||||||
.ui[class*="very wide"].popup {
|
|
||||||
max-width: @maxWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fluid
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fluid.popup {
|
|
||||||
width: 100%;
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Colors
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Inverted colors */
|
|
||||||
.ui.inverted.popup {
|
|
||||||
background: @invertedBackground;
|
|
||||||
color: @invertedColor;
|
|
||||||
border: @invertedBorder;
|
|
||||||
box-shadow: @invertedBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.inverted.popup .header {
|
|
||||||
background-color: @invertedHeaderBackground;
|
|
||||||
color: @invertedHeaderColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.popup:before {
|
|
||||||
background-color: @invertedArrowColor;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Flowing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.flowing.popup {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.mini.popup {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.popup {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.popup {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.popup {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.popup {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.huge.popup {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,931 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Progress
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
var
|
|
||||||
global = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.progress = 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.progress.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.progress.settings),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
metadata = settings.metadata,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$bar = $(this).find(selector.bar),
|
|
||||||
$progress = $(this).find(selector.progress),
|
|
||||||
$label = $(this).find(selector.label),
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
|
|
||||||
animating = false,
|
|
||||||
transitionEnd,
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.debug('Initializing progress bar', settings);
|
|
||||||
|
|
||||||
module.set.duration();
|
|
||||||
module.set.transitionEvent();
|
|
||||||
|
|
||||||
module.read.metadata();
|
|
||||||
module.read.settings();
|
|
||||||
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of progress', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous progress for', $module);
|
|
||||||
clearInterval(instance.interval);
|
|
||||||
module.remove.state();
|
|
||||||
$module.removeData(moduleNamespace);
|
|
||||||
instance = undefined;
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: function() {
|
|
||||||
module.remove.nextValue();
|
|
||||||
module.update.progress(0);
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function() {
|
|
||||||
if(module.percent === undefined || module.percent < 100) {
|
|
||||||
module.remove.progressPoll();
|
|
||||||
module.set.percent(100);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
read: {
|
|
||||||
metadata: function() {
|
|
||||||
var
|
|
||||||
data = {
|
|
||||||
percent : $module.data(metadata.percent),
|
|
||||||
total : $module.data(metadata.total),
|
|
||||||
value : $module.data(metadata.value)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
if(data.percent) {
|
|
||||||
module.debug('Current percent value set from metadata', data.percent);
|
|
||||||
module.set.percent(data.percent);
|
|
||||||
}
|
|
||||||
if(data.total) {
|
|
||||||
module.debug('Total value set from metadata', data.total);
|
|
||||||
module.set.total(data.total);
|
|
||||||
}
|
|
||||||
if(data.value) {
|
|
||||||
module.debug('Current value set from metadata', data.value);
|
|
||||||
module.set.value(data.value);
|
|
||||||
module.set.progress(data.value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
settings: function() {
|
|
||||||
if(settings.total !== false) {
|
|
||||||
module.debug('Current total set in settings', settings.total);
|
|
||||||
module.set.total(settings.total);
|
|
||||||
}
|
|
||||||
if(settings.value !== false) {
|
|
||||||
module.debug('Current value set in settings', settings.value);
|
|
||||||
module.set.value(settings.value);
|
|
||||||
module.set.progress(module.value);
|
|
||||||
}
|
|
||||||
if(settings.percent !== false) {
|
|
||||||
module.debug('Current percent set in settings', settings.percent);
|
|
||||||
module.set.percent(settings.percent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
transitionEnd: function(callback) {
|
|
||||||
var
|
|
||||||
transitionEnd = module.get.transitionEnd()
|
|
||||||
;
|
|
||||||
$bar
|
|
||||||
.one(transitionEnd + eventNamespace, function(event) {
|
|
||||||
clearTimeout(module.failSafeTimer);
|
|
||||||
callback.call(this, event);
|
|
||||||
})
|
|
||||||
;
|
|
||||||
module.failSafeTimer = setTimeout(function() {
|
|
||||||
$bar.triggerHandler(transitionEnd);
|
|
||||||
}, settings.duration + settings.failSafeDelay);
|
|
||||||
module.verbose('Adding fail safe timer', module.timer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
increment: function(incrementValue) {
|
|
||||||
var
|
|
||||||
maxValue,
|
|
||||||
startValue,
|
|
||||||
newValue
|
|
||||||
;
|
|
||||||
if( module.has.total() ) {
|
|
||||||
startValue = module.get.value();
|
|
||||||
incrementValue = incrementValue || 1;
|
|
||||||
newValue = startValue + incrementValue;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
startValue = module.get.percent();
|
|
||||||
incrementValue = incrementValue || module.get.randomValue();
|
|
||||||
|
|
||||||
newValue = startValue + incrementValue;
|
|
||||||
maxValue = 100;
|
|
||||||
module.debug('Incrementing percentage by', startValue, newValue);
|
|
||||||
}
|
|
||||||
newValue = module.get.normalizedValue(newValue);
|
|
||||||
module.set.progress(newValue);
|
|
||||||
},
|
|
||||||
decrement: function(decrementValue) {
|
|
||||||
var
|
|
||||||
total = module.get.total(),
|
|
||||||
startValue,
|
|
||||||
newValue
|
|
||||||
;
|
|
||||||
if(total) {
|
|
||||||
startValue = module.get.value();
|
|
||||||
decrementValue = decrementValue || 1;
|
|
||||||
newValue = startValue - decrementValue;
|
|
||||||
module.debug('Decrementing value by', decrementValue, startValue);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
startValue = module.get.percent();
|
|
||||||
decrementValue = decrementValue || module.get.randomValue();
|
|
||||||
newValue = startValue - decrementValue;
|
|
||||||
module.debug('Decrementing percentage by', decrementValue, startValue);
|
|
||||||
}
|
|
||||||
newValue = module.get.normalizedValue(newValue);
|
|
||||||
module.set.progress(newValue);
|
|
||||||
},
|
|
||||||
|
|
||||||
has: {
|
|
||||||
progressPoll: function() {
|
|
||||||
return module.progressPoll;
|
|
||||||
},
|
|
||||||
total: function() {
|
|
||||||
return (module.get.total() !== false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
text: function(templateText) {
|
|
||||||
var
|
|
||||||
value = module.value || 0,
|
|
||||||
total = module.total || 0,
|
|
||||||
percent = (animating)
|
|
||||||
? module.get.displayPercent()
|
|
||||||
: module.percent || 0,
|
|
||||||
left = (module.total > 0)
|
|
||||||
? (total - value)
|
|
||||||
: (100 - percent)
|
|
||||||
;
|
|
||||||
templateText = templateText || '';
|
|
||||||
templateText = templateText
|
|
||||||
.replace('{value}', value)
|
|
||||||
.replace('{total}', total)
|
|
||||||
.replace('{left}', left)
|
|
||||||
.replace('{percent}', percent)
|
|
||||||
;
|
|
||||||
module.verbose('Adding variables to progress bar text', templateText);
|
|
||||||
return templateText;
|
|
||||||
},
|
|
||||||
|
|
||||||
normalizedValue: function(value) {
|
|
||||||
if(value < 0) {
|
|
||||||
module.debug('Value cannot decrement below 0');
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
if(module.has.total()) {
|
|
||||||
if(value > module.total) {
|
|
||||||
module.debug('Value cannot increment above total', module.total);
|
|
||||||
return module.total;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(value > 100 ) {
|
|
||||||
module.debug('Value cannot increment above 100 percent');
|
|
||||||
return 100;
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
|
|
||||||
updateInterval: function() {
|
|
||||||
if(settings.updateInterval == 'auto') {
|
|
||||||
return settings.duration;
|
|
||||||
}
|
|
||||||
return settings.updateInterval;
|
|
||||||
},
|
|
||||||
|
|
||||||
randomValue: function() {
|
|
||||||
module.debug('Generating random increment percentage');
|
|
||||||
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
|
|
||||||
},
|
|
||||||
|
|
||||||
numericValue: function(value) {
|
|
||||||
return (typeof value === 'string')
|
|
||||||
? (value.replace(/[^\d.]/g, '') !== '')
|
|
||||||
? +(value.replace(/[^\d.]/g, ''))
|
|
||||||
: false
|
|
||||||
: value
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
transitionEnd: function() {
|
|
||||||
var
|
|
||||||
element = document.createElement('element'),
|
|
||||||
transitions = {
|
|
||||||
'transition' :'transitionend',
|
|
||||||
'OTransition' :'oTransitionEnd',
|
|
||||||
'MozTransition' :'transitionend',
|
|
||||||
'WebkitTransition' :'webkitTransitionEnd'
|
|
||||||
},
|
|
||||||
transition
|
|
||||||
;
|
|
||||||
for(transition in transitions){
|
|
||||||
if( element.style[transition] !== undefined ){
|
|
||||||
return transitions[transition];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// gets current displayed percentage (if animating values this is the intermediary value)
|
|
||||||
displayPercent: function() {
|
|
||||||
var
|
|
||||||
barWidth = $bar.width(),
|
|
||||||
totalWidth = $module.width(),
|
|
||||||
minDisplay = parseInt($bar.css('min-width'), 10),
|
|
||||||
displayPercent = (barWidth > minDisplay)
|
|
||||||
? (barWidth / totalWidth * 100)
|
|
||||||
: module.percent
|
|
||||||
;
|
|
||||||
return (settings.precision > 0)
|
|
||||||
? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision)
|
|
||||||
: Math.round(displayPercent)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
percent: function() {
|
|
||||||
return module.percent || 0;
|
|
||||||
},
|
|
||||||
value: function() {
|
|
||||||
return module.nextValue || module.value || 0;
|
|
||||||
},
|
|
||||||
total: function() {
|
|
||||||
return module.total || false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
create: {
|
|
||||||
progressPoll: function() {
|
|
||||||
module.progressPoll = setTimeout(function() {
|
|
||||||
module.update.toNextValue();
|
|
||||||
module.remove.progressPoll();
|
|
||||||
}, module.get.updateInterval());
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
complete: function() {
|
|
||||||
return module.is.success() || module.is.warning() || module.is.error();
|
|
||||||
},
|
|
||||||
success: function() {
|
|
||||||
return $module.hasClass(className.success);
|
|
||||||
},
|
|
||||||
warning: function() {
|
|
||||||
return $module.hasClass(className.warning);
|
|
||||||
},
|
|
||||||
error: function() {
|
|
||||||
return $module.hasClass(className.error);
|
|
||||||
},
|
|
||||||
active: function() {
|
|
||||||
return $module.hasClass(className.active);
|
|
||||||
},
|
|
||||||
visible: function() {
|
|
||||||
return $module.is(':visible');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
progressPoll: function() {
|
|
||||||
module.verbose('Removing progress poll timer');
|
|
||||||
if(module.progressPoll) {
|
|
||||||
clearTimeout(module.progressPoll);
|
|
||||||
delete module.progressPoll;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nextValue: function() {
|
|
||||||
module.verbose('Removing progress value stored for next update');
|
|
||||||
delete module.nextValue;
|
|
||||||
},
|
|
||||||
state: function() {
|
|
||||||
module.verbose('Removing stored state');
|
|
||||||
delete module.total;
|
|
||||||
delete module.percent;
|
|
||||||
delete module.value;
|
|
||||||
},
|
|
||||||
active: function() {
|
|
||||||
module.verbose('Removing active state');
|
|
||||||
$module.removeClass(className.active);
|
|
||||||
},
|
|
||||||
success: function() {
|
|
||||||
module.verbose('Removing success state');
|
|
||||||
$module.removeClass(className.success);
|
|
||||||
},
|
|
||||||
warning: function() {
|
|
||||||
module.verbose('Removing warning state');
|
|
||||||
$module.removeClass(className.warning);
|
|
||||||
},
|
|
||||||
error: function() {
|
|
||||||
module.verbose('Removing error state');
|
|
||||||
$module.removeClass(className.error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
barWidth: function(value) {
|
|
||||||
if(value > 100) {
|
|
||||||
module.error(error.tooHigh, value);
|
|
||||||
}
|
|
||||||
else if (value < 0) {
|
|
||||||
module.error(error.tooLow, value);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$bar
|
|
||||||
.css('width', value + '%')
|
|
||||||
;
|
|
||||||
$module
|
|
||||||
.attr('data-percent', parseInt(value, 10))
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: function(duration) {
|
|
||||||
duration = duration || settings.duration;
|
|
||||||
duration = (typeof duration == 'number')
|
|
||||||
? duration + 'ms'
|
|
||||||
: duration
|
|
||||||
;
|
|
||||||
module.verbose('Setting progress bar transition duration', duration);
|
|
||||||
$bar
|
|
||||||
.css({
|
|
||||||
'transition-duration': duration
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
percent: function(percent) {
|
|
||||||
percent = (typeof percent == 'string')
|
|
||||||
? +(percent.replace('%', ''))
|
|
||||||
: percent
|
|
||||||
;
|
|
||||||
// round display percentage
|
|
||||||
percent = (settings.precision > 0)
|
|
||||||
? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision)
|
|
||||||
: Math.round(percent)
|
|
||||||
;
|
|
||||||
module.percent = percent;
|
|
||||||
if( !module.has.total() ) {
|
|
||||||
module.value = (settings.precision > 0)
|
|
||||||
? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision)
|
|
||||||
: Math.round( (percent / 100) * module.total * 10) / 10
|
|
||||||
;
|
|
||||||
if(settings.limitValues) {
|
|
||||||
module.value = (module.value > 100)
|
|
||||||
? 100
|
|
||||||
: (module.value < 0)
|
|
||||||
? 0
|
|
||||||
: module.value
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
module.set.barWidth(percent);
|
|
||||||
module.set.labelInterval();
|
|
||||||
module.set.labels();
|
|
||||||
settings.onChange.call(element, percent, module.value, module.total);
|
|
||||||
},
|
|
||||||
labelInterval: function() {
|
|
||||||
var
|
|
||||||
animationCallback = function() {
|
|
||||||
module.verbose('Bar finished animating, removing continuous label updates');
|
|
||||||
clearInterval(module.interval);
|
|
||||||
animating = false;
|
|
||||||
module.set.labels();
|
|
||||||
}
|
|
||||||
;
|
|
||||||
clearInterval(module.interval);
|
|
||||||
module.bind.transitionEnd(animationCallback);
|
|
||||||
animating = true;
|
|
||||||
module.interval = setInterval(function() {
|
|
||||||
var
|
|
||||||
isInDOM = $.contains(document.documentElement, element)
|
|
||||||
;
|
|
||||||
if(!isInDOM) {
|
|
||||||
clearInterval(module.interval);
|
|
||||||
animating = false;
|
|
||||||
}
|
|
||||||
module.set.labels();
|
|
||||||
}, settings.framerate);
|
|
||||||
},
|
|
||||||
labels: function() {
|
|
||||||
module.verbose('Setting both bar progress and outer label text');
|
|
||||||
module.set.barLabel();
|
|
||||||
module.set.state();
|
|
||||||
},
|
|
||||||
label: function(text) {
|
|
||||||
text = text || '';
|
|
||||||
if(text) {
|
|
||||||
text = module.get.text(text);
|
|
||||||
module.verbose('Setting label to text', text);
|
|
||||||
$label.text(text);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
state: function(percent) {
|
|
||||||
percent = (percent !== undefined)
|
|
||||||
? percent
|
|
||||||
: module.percent
|
|
||||||
;
|
|
||||||
if(percent === 100) {
|
|
||||||
if(settings.autoSuccess && !(module.is.warning() || module.is.error() || module.is.success())) {
|
|
||||||
module.set.success();
|
|
||||||
module.debug('Automatically triggering success at 100%');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.verbose('Reached 100% removing active state');
|
|
||||||
module.remove.active();
|
|
||||||
module.remove.progressPoll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(percent > 0) {
|
|
||||||
module.verbose('Adjusting active progress bar label', percent);
|
|
||||||
module.set.active();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.remove.active();
|
|
||||||
module.set.label(settings.text.active);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
barLabel: function(text) {
|
|
||||||
if(text !== undefined) {
|
|
||||||
$progress.text( module.get.text(text) );
|
|
||||||
}
|
|
||||||
else if(settings.label == 'ratio' && module.total) {
|
|
||||||
module.verbose('Adding ratio to bar label');
|
|
||||||
$progress.text( module.get.text(settings.text.ratio) );
|
|
||||||
}
|
|
||||||
else if(settings.label == 'percent') {
|
|
||||||
module.verbose('Adding percentage to bar label');
|
|
||||||
$progress.text( module.get.text(settings.text.percent) );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
active: function(text) {
|
|
||||||
text = text || settings.text.active;
|
|
||||||
module.debug('Setting active state');
|
|
||||||
if(settings.showActivity && !module.is.active() ) {
|
|
||||||
$module.addClass(className.active);
|
|
||||||
}
|
|
||||||
module.remove.warning();
|
|
||||||
module.remove.error();
|
|
||||||
module.remove.success();
|
|
||||||
text = settings.onLabelUpdate('active', text, module.value, module.total);
|
|
||||||
if(text) {
|
|
||||||
module.set.label(text);
|
|
||||||
}
|
|
||||||
module.bind.transitionEnd(function() {
|
|
||||||
settings.onActive.call(element, module.value, module.total);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
success : function(text) {
|
|
||||||
text = text || settings.text.success || settings.text.active;
|
|
||||||
module.debug('Setting success state');
|
|
||||||
$module.addClass(className.success);
|
|
||||||
module.remove.active();
|
|
||||||
module.remove.warning();
|
|
||||||
module.remove.error();
|
|
||||||
module.complete();
|
|
||||||
if(settings.text.success) {
|
|
||||||
text = settings.onLabelUpdate('success', text, module.value, module.total);
|
|
||||||
module.set.label(text);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
text = settings.onLabelUpdate('active', text, module.value, module.total);
|
|
||||||
module.set.label(text);
|
|
||||||
}
|
|
||||||
module.bind.transitionEnd(function() {
|
|
||||||
settings.onSuccess.call(element, module.total);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
warning : function(text) {
|
|
||||||
text = text || settings.text.warning;
|
|
||||||
module.debug('Setting warning state');
|
|
||||||
$module.addClass(className.warning);
|
|
||||||
module.remove.active();
|
|
||||||
module.remove.success();
|
|
||||||
module.remove.error();
|
|
||||||
module.complete();
|
|
||||||
text = settings.onLabelUpdate('warning', text, module.value, module.total);
|
|
||||||
if(text) {
|
|
||||||
module.set.label(text);
|
|
||||||
}
|
|
||||||
module.bind.transitionEnd(function() {
|
|
||||||
settings.onWarning.call(element, module.value, module.total);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
error : function(text) {
|
|
||||||
text = text || settings.text.error;
|
|
||||||
module.debug('Setting error state');
|
|
||||||
$module.addClass(className.error);
|
|
||||||
module.remove.active();
|
|
||||||
module.remove.success();
|
|
||||||
module.remove.warning();
|
|
||||||
module.complete();
|
|
||||||
text = settings.onLabelUpdate('error', text, module.value, module.total);
|
|
||||||
if(text) {
|
|
||||||
module.set.label(text);
|
|
||||||
}
|
|
||||||
module.bind.transitionEnd(function() {
|
|
||||||
settings.onError.call(element, module.value, module.total);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
transitionEvent: function() {
|
|
||||||
transitionEnd = module.get.transitionEnd();
|
|
||||||
},
|
|
||||||
total: function(totalValue) {
|
|
||||||
module.total = totalValue;
|
|
||||||
},
|
|
||||||
value: function(value) {
|
|
||||||
module.value = value;
|
|
||||||
},
|
|
||||||
progress: function(value) {
|
|
||||||
if(!module.has.progressPoll()) {
|
|
||||||
module.debug('First update in progress update interval, immediately updating', value);
|
|
||||||
module.update.progress(value);
|
|
||||||
module.create.progressPoll();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Updated within interval, setting next update to use new value', value);
|
|
||||||
module.set.nextValue(value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nextValue: function(value) {
|
|
||||||
module.nextValue = value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
update: {
|
|
||||||
toNextValue: function() {
|
|
||||||
var
|
|
||||||
nextValue = module.nextValue
|
|
||||||
;
|
|
||||||
if(nextValue) {
|
|
||||||
module.debug('Update interval complete using last updated value', nextValue);
|
|
||||||
module.update.progress(nextValue);
|
|
||||||
module.remove.nextValue();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
progress: function(value) {
|
|
||||||
var
|
|
||||||
percentComplete
|
|
||||||
;
|
|
||||||
value = module.get.numericValue(value);
|
|
||||||
if(value === false) {
|
|
||||||
module.error(error.nonNumeric, value);
|
|
||||||
}
|
|
||||||
value = module.get.normalizedValue(value);
|
|
||||||
if( module.has.total() ) {
|
|
||||||
module.set.value(value);
|
|
||||||
percentComplete = (value / module.total) * 100;
|
|
||||||
module.debug('Calculating percent complete from total', percentComplete);
|
|
||||||
module.set.percent( percentComplete );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
percentComplete = value;
|
|
||||||
module.debug('Setting value to exact percentage value', percentComplete);
|
|
||||||
module.set.percent( percentComplete );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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($.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.progress.settings = {
|
|
||||||
|
|
||||||
name : 'Progress',
|
|
||||||
namespace : 'progress',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
random : {
|
|
||||||
min : 2,
|
|
||||||
max : 5
|
|
||||||
},
|
|
||||||
|
|
||||||
duration : 300,
|
|
||||||
|
|
||||||
updateInterval : 'auto',
|
|
||||||
|
|
||||||
autoSuccess : true,
|
|
||||||
showActivity : true,
|
|
||||||
limitValues : true,
|
|
||||||
|
|
||||||
label : 'percent',
|
|
||||||
precision : 0,
|
|
||||||
framerate : (1000 / 30), /// 30 fps
|
|
||||||
|
|
||||||
percent : false,
|
|
||||||
total : false,
|
|
||||||
value : false,
|
|
||||||
|
|
||||||
// delay in ms for fail safe animation callback
|
|
||||||
failSafeDelay : 100,
|
|
||||||
|
|
||||||
onLabelUpdate : function(state, text, value, total){
|
|
||||||
return text;
|
|
||||||
},
|
|
||||||
onChange : function(percent, value, total){},
|
|
||||||
onSuccess : function(total){},
|
|
||||||
onActive : function(value, total){},
|
|
||||||
onError : function(value, total){},
|
|
||||||
onWarning : function(value, total){},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
method : 'The method you called is not defined.',
|
|
||||||
nonNumeric : 'Progress value is non numeric',
|
|
||||||
tooHigh : 'Value specified is above 100%',
|
|
||||||
tooLow : 'Value specified is below 0%'
|
|
||||||
},
|
|
||||||
|
|
||||||
regExp: {
|
|
||||||
variable: /\{\$*[A-z0-9]+\}/g
|
|
||||||
},
|
|
||||||
|
|
||||||
metadata: {
|
|
||||||
percent : 'percent',
|
|
||||||
total : 'total',
|
|
||||||
value : 'value'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
bar : '> .bar',
|
|
||||||
label : '> .label',
|
|
||||||
progress : '.bar > .progress'
|
|
||||||
},
|
|
||||||
|
|
||||||
text : {
|
|
||||||
active : false,
|
|
||||||
error : false,
|
|
||||||
success : false,
|
|
||||||
warning : false,
|
|
||||||
percent : '{percent}%',
|
|
||||||
ratio : '{value} of {total}'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
active : 'active',
|
|
||||||
error : 'error',
|
|
||||||
success : 'success',
|
|
||||||
warning : 'warning'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,503 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Progress Bar
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'progress';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Progress
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.progress {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
border: @border;
|
|
||||||
margin: @margin;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
background: @background;
|
|
||||||
padding: @padding;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.progress:first-child {
|
|
||||||
margin: @firstMargin;
|
|
||||||
}
|
|
||||||
.ui.progress:last-child {
|
|
||||||
margin: @lastMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Content
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Activity Bar */
|
|
||||||
.ui.progress .bar {
|
|
||||||
display: block;
|
|
||||||
line-height: 1;
|
|
||||||
position: @barPosition;
|
|
||||||
width: @barInitialWidth;
|
|
||||||
min-width: @barMinWidth;
|
|
||||||
background: @barBackground;
|
|
||||||
border-radius: @barBorderRadius;
|
|
||||||
transition: @barTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Percent Complete */
|
|
||||||
.ui.progress .bar > .progress {
|
|
||||||
white-space: nowrap;
|
|
||||||
position: @progressPosition;
|
|
||||||
width: @progressWidth;
|
|
||||||
font-size: @progressSize;
|
|
||||||
top: @progressTop;
|
|
||||||
right: @progressRight;
|
|
||||||
left: @progressLeft;
|
|
||||||
bottom: @progressBottom;
|
|
||||||
color: @progressColor;
|
|
||||||
text-shadow: @progressTextShadow;
|
|
||||||
margin-top: @progressOffset;
|
|
||||||
font-weight: @progressFontWeight;
|
|
||||||
text-align: @progressTextAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Label */
|
|
||||||
.ui.progress > .label {
|
|
||||||
position: absolute;
|
|
||||||
width: @labelWidth;
|
|
||||||
font-size: @labelSize;
|
|
||||||
top: @labelTop;
|
|
||||||
right: @labelRight;
|
|
||||||
left: @labelLeft;
|
|
||||||
bottom: @labelBottom;
|
|
||||||
color: @labelColor;
|
|
||||||
font-weight: @labelFontWeight;
|
|
||||||
text-shadow: @labelTextShadow;
|
|
||||||
margin-top: @labelOffset;
|
|
||||||
text-align: @labelTextAlign;
|
|
||||||
transition: @labelTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/* Indicating */
|
|
||||||
.ui.indicating.progress[data-percent^="1"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent^="2"] .bar {
|
|
||||||
background-color: @indicatingFirstColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="3"] .bar {
|
|
||||||
background-color: @indicatingSecondColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="4"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent^="5"] .bar {
|
|
||||||
background-color: @indicatingThirdColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="6"] .bar {
|
|
||||||
background-color: @indicatingFourthColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="7"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent^="8"] .bar {
|
|
||||||
background-color: @indicatingFifthColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="9"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent^="100"] .bar {
|
|
||||||
background-color: @indicatingSixthColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Indicating Label */
|
|
||||||
.ui.indicating.progress[data-percent^="1"] .label,
|
|
||||||
.ui.indicating.progress[data-percent^="2"] .label {
|
|
||||||
color: @indicatingFirstLabelColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="3"] .label {
|
|
||||||
color: @indicatingSecondLabelColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="4"] .label,
|
|
||||||
.ui.indicating.progress[data-percent^="5"] .label {
|
|
||||||
color: @indicatingThirdLabelColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="6"] .label {
|
|
||||||
color: @indicatingFourthLabelColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="7"] .label,
|
|
||||||
.ui.indicating.progress[data-percent^="8"] .label {
|
|
||||||
color: @indicatingFifthLabelColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent^="9"] .label,
|
|
||||||
.ui.indicating.progress[data-percent^="100"] .label {
|
|
||||||
color: @indicatingSixthLabelColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Single Digits */
|
|
||||||
.ui.indicating.progress[data-percent="1"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="2"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="3"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="4"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="5"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="6"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="7"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="8"] .bar,
|
|
||||||
.ui.indicating.progress[data-percent="9"] .bar {
|
|
||||||
background-color: @indicatingFirstColor;
|
|
||||||
}
|
|
||||||
.ui.indicating.progress[data-percent="1"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="2"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="3"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="4"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="5"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="6"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="7"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="8"] .label,
|
|
||||||
.ui.indicating.progress[data-percent="9"] .label {
|
|
||||||
color: @indicatingFirstLabelColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Indicating Success */
|
|
||||||
.ui.indicating.progress.success .label {
|
|
||||||
color: @successHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Success
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.progress.success .bar {
|
|
||||||
background-color: @successColor !important;
|
|
||||||
}
|
|
||||||
.ui.progress.success .bar,
|
|
||||||
.ui.progress.success .bar::after {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
.ui.progress.success > .label {
|
|
||||||
color: @successHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Warning
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.progress.warning .bar {
|
|
||||||
background-color: @warningColor !important;
|
|
||||||
}
|
|
||||||
.ui.progress.warning .bar,
|
|
||||||
.ui.progress.warning .bar::after {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
.ui.progress.warning > .label {
|
|
||||||
color: @warningHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Error
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.progress.error .bar {
|
|
||||||
background-color: @errorColor !important;
|
|
||||||
}
|
|
||||||
.ui.progress.error .bar,
|
|
||||||
.ui.progress.error .bar::after {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
.ui.progress.error > .label {
|
|
||||||
color: @errorHeaderColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.active.progress .bar {
|
|
||||||
position: relative;
|
|
||||||
min-width: @activeMinWidth;
|
|
||||||
}
|
|
||||||
.ui.active.progress .bar::after {
|
|
||||||
content: '';
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
background: @activePulseColor;
|
|
||||||
|
|
||||||
border-radius: @barBorderRadius;
|
|
||||||
|
|
||||||
animation: progress-active @activePulseDuration @defaultEasing infinite;
|
|
||||||
}
|
|
||||||
@keyframes progress-active {
|
|
||||||
0% {
|
|
||||||
opacity: @activePulseMaxOpacity;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Disabled
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.disabled.progress {
|
|
||||||
opacity: 0.35;
|
|
||||||
}
|
|
||||||
.ui.disabled.progress .bar,
|
|
||||||
.ui.disabled.progress .bar::after {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inverted.progress {
|
|
||||||
background: @invertedBackground;
|
|
||||||
border: @invertedBorder;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress .bar {
|
|
||||||
background: @invertedBarBackground;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress .bar > .progress {
|
|
||||||
color: @invertedProgressColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress > .label {
|
|
||||||
color: @invertedLabelColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress.success > .label {
|
|
||||||
color: @successColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress.warning > .label {
|
|
||||||
color: @warningColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.progress.error > .label {
|
|
||||||
color: @errorColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Attached
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* bottom attached */
|
|
||||||
.ui.progress.attached {
|
|
||||||
background: @attachedBackground;
|
|
||||||
position: relative;
|
|
||||||
border: none;
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
.ui.progress.attached,
|
|
||||||
.ui.progress.attached .bar {
|
|
||||||
display: block;
|
|
||||||
height: @attachedHeight;
|
|
||||||
padding: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.progress.attached .bar {
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* top attached */
|
|
||||||
.ui.progress.top.attached,
|
|
||||||
.ui.progress.top.attached .bar {
|
|
||||||
top: 0px;
|
|
||||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.progress.top.attached .bar {
|
|
||||||
border-radius: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Coupling */
|
|
||||||
.ui.segment > .ui.attached.progress,
|
|
||||||
.ui.card > .ui.attached.progress {
|
|
||||||
position: absolute;
|
|
||||||
top: auto;
|
|
||||||
left: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.ui.segment > .ui.bottom.attached.progress,
|
|
||||||
.ui.card > .ui.bottom.attached.progress {
|
|
||||||
top: 100%;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Colors
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Red */
|
|
||||||
.ui.red.progress .bar {
|
|
||||||
background-color: @red;
|
|
||||||
}
|
|
||||||
.ui.red.inverted.progress .bar {
|
|
||||||
background-color: @lightRed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Orange */
|
|
||||||
.ui.orange.progress .bar {
|
|
||||||
background-color: @orange;
|
|
||||||
}
|
|
||||||
.ui.orange.inverted.progress .bar {
|
|
||||||
background-color: @lightOrange;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Yellow */
|
|
||||||
.ui.yellow.progress .bar {
|
|
||||||
background-color: @yellow;
|
|
||||||
}
|
|
||||||
.ui.yellow.inverted.progress .bar {
|
|
||||||
background-color: @lightYellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Olive */
|
|
||||||
.ui.olive.progress .bar {
|
|
||||||
background-color: @olive;
|
|
||||||
}
|
|
||||||
.ui.olive.inverted.progress .bar {
|
|
||||||
background-color: @lightOlive;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Green */
|
|
||||||
.ui.green.progress .bar {
|
|
||||||
background-color: @green;
|
|
||||||
}
|
|
||||||
.ui.green.inverted.progress .bar {
|
|
||||||
background-color: @lightGreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Teal */
|
|
||||||
.ui.teal.progress .bar {
|
|
||||||
background-color: @teal;
|
|
||||||
}
|
|
||||||
.ui.teal.inverted.progress .bar {
|
|
||||||
background-color: @lightTeal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Blue */
|
|
||||||
.ui.blue.progress .bar {
|
|
||||||
background-color: @blue;
|
|
||||||
}
|
|
||||||
.ui.blue.inverted.progress .bar {
|
|
||||||
background-color: @lightBlue;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Violet */
|
|
||||||
.ui.violet.progress .bar {
|
|
||||||
background-color: @violet;
|
|
||||||
}
|
|
||||||
.ui.violet.inverted.progress .bar {
|
|
||||||
background-color: @lightViolet;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Purple */
|
|
||||||
.ui.purple.progress .bar {
|
|
||||||
background-color: @purple;
|
|
||||||
}
|
|
||||||
.ui.purple.inverted.progress .bar {
|
|
||||||
background-color: @lightPurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pink */
|
|
||||||
.ui.pink.progress .bar {
|
|
||||||
background-color: @pink;
|
|
||||||
}
|
|
||||||
.ui.pink.inverted.progress .bar {
|
|
||||||
background-color: @lightPink;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Brown */
|
|
||||||
.ui.brown.progress .bar {
|
|
||||||
background-color: @brown;
|
|
||||||
}
|
|
||||||
.ui.brown.inverted.progress .bar {
|
|
||||||
background-color: @lightBrown;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grey */
|
|
||||||
.ui.grey.progress .bar {
|
|
||||||
background-color: @grey;
|
|
||||||
}
|
|
||||||
.ui.grey.inverted.progress .bar {
|
|
||||||
background-color: @lightGrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Black */
|
|
||||||
.ui.black.progress .bar {
|
|
||||||
background-color: @black;
|
|
||||||
}
|
|
||||||
.ui.black.inverted.progress .bar {
|
|
||||||
background-color: @lightBlack;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.tiny.progress {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.tiny.progress .bar {
|
|
||||||
height: @tinyBarHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.small.progress {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.small.progress .bar {
|
|
||||||
height: @smallBarHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.progress {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.progress .bar {
|
|
||||||
height: @barHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.large.progress {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.large.progress .bar {
|
|
||||||
height: @largeBarHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.big.progress {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.big.progress .bar {
|
|
||||||
height: @bigBarHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,508 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Rating
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.rating = 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.rating.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.rating.settings),
|
|
||||||
|
|
||||||
namespace = settings.namespace,
|
|
||||||
className = settings.className,
|
|
||||||
metadata = settings.metadata,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
instance = $(this).data(moduleNamespace),
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$icon = $module.find(selector.icon),
|
|
||||||
|
|
||||||
initialLoad,
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.verbose('Initializing rating module', settings);
|
|
||||||
|
|
||||||
if($icon.length === 0) {
|
|
||||||
module.setup.layout();
|
|
||||||
}
|
|
||||||
|
|
||||||
if(settings.interactive) {
|
|
||||||
module.enable();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.disable();
|
|
||||||
}
|
|
||||||
module.set.initialLoad();
|
|
||||||
module.set.rating( module.get.initialRating() );
|
|
||||||
module.remove.initialLoad();
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Instantiating module', settings);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous instance', instance);
|
|
||||||
module.remove.events();
|
|
||||||
$module
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
$icon = $module.find(selector.icon);
|
|
||||||
},
|
|
||||||
|
|
||||||
setup: {
|
|
||||||
layout: function() {
|
|
||||||
var
|
|
||||||
maxRating = module.get.maxRating(),
|
|
||||||
html = $.fn.rating.settings.templates.icon(maxRating)
|
|
||||||
;
|
|
||||||
module.debug('Generating icon html dynamically');
|
|
||||||
$module
|
|
||||||
.html(html)
|
|
||||||
;
|
|
||||||
module.refresh();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
mouseenter: function() {
|
|
||||||
var
|
|
||||||
$activeIcon = $(this)
|
|
||||||
;
|
|
||||||
$activeIcon
|
|
||||||
.nextAll()
|
|
||||||
.removeClass(className.selected)
|
|
||||||
;
|
|
||||||
$module
|
|
||||||
.addClass(className.selected)
|
|
||||||
;
|
|
||||||
$activeIcon
|
|
||||||
.addClass(className.selected)
|
|
||||||
.prevAll()
|
|
||||||
.addClass(className.selected)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
mouseleave: function() {
|
|
||||||
$module
|
|
||||||
.removeClass(className.selected)
|
|
||||||
;
|
|
||||||
$icon
|
|
||||||
.removeClass(className.selected)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
click: function() {
|
|
||||||
var
|
|
||||||
$activeIcon = $(this),
|
|
||||||
currentRating = module.get.rating(),
|
|
||||||
rating = $icon.index($activeIcon) + 1,
|
|
||||||
canClear = (settings.clearable == 'auto')
|
|
||||||
? ($icon.length === 1)
|
|
||||||
: settings.clearable
|
|
||||||
;
|
|
||||||
if(canClear && currentRating == rating) {
|
|
||||||
module.clearRating();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.set.rating( rating );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
clearRating: function() {
|
|
||||||
module.debug('Clearing current rating');
|
|
||||||
module.set.rating(0);
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
module.verbose('Binding events');
|
|
||||||
$module
|
|
||||||
.on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter)
|
|
||||||
.on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave)
|
|
||||||
.on('click' + eventNamespace, selector.icon, module.event.click)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
events: function() {
|
|
||||||
module.verbose('Removing events');
|
|
||||||
$module
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
initialLoad: function() {
|
|
||||||
initialLoad = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
enable: function() {
|
|
||||||
module.debug('Setting rating to interactive mode');
|
|
||||||
module.bind.events();
|
|
||||||
$module
|
|
||||||
.removeClass(className.disabled)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
disable: function() {
|
|
||||||
module.debug('Setting rating to read-only mode');
|
|
||||||
module.remove.events();
|
|
||||||
$module
|
|
||||||
.addClass(className.disabled)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
initialLoad: function() {
|
|
||||||
return initialLoad;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
initialRating: function() {
|
|
||||||
if($module.data(metadata.rating) !== undefined) {
|
|
||||||
$module.removeData(metadata.rating);
|
|
||||||
return $module.data(metadata.rating);
|
|
||||||
}
|
|
||||||
return settings.initialRating;
|
|
||||||
},
|
|
||||||
maxRating: function() {
|
|
||||||
if($module.data(metadata.maxRating) !== undefined) {
|
|
||||||
$module.removeData(metadata.maxRating);
|
|
||||||
return $module.data(metadata.maxRating);
|
|
||||||
}
|
|
||||||
return settings.maxRating;
|
|
||||||
},
|
|
||||||
rating: function() {
|
|
||||||
var
|
|
||||||
currentRating = $icon.filter('.' + className.active).length
|
|
||||||
;
|
|
||||||
module.verbose('Current rating retrieved', currentRating);
|
|
||||||
return currentRating;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
rating: function(rating) {
|
|
||||||
var
|
|
||||||
ratingIndex = (rating - 1 >= 0)
|
|
||||||
? (rating - 1)
|
|
||||||
: 0,
|
|
||||||
$activeIcon = $icon.eq(ratingIndex)
|
|
||||||
;
|
|
||||||
$module
|
|
||||||
.removeClass(className.selected)
|
|
||||||
;
|
|
||||||
$icon
|
|
||||||
.removeClass(className.selected)
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
if(rating > 0) {
|
|
||||||
module.verbose('Setting current rating to', rating);
|
|
||||||
$activeIcon
|
|
||||||
.prevAll()
|
|
||||||
.addBack()
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
if(!module.is.initialLoad()) {
|
|
||||||
settings.onRate.call(element, rating);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initialLoad: function() {
|
|
||||||
initialLoad = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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($allModules.length > 1) {
|
|
||||||
title += ' ' + '(' + $allModules.length + ')';
|
|
||||||
}
|
|
||||||
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 {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if ( $.isFunction( found ) ) {
|
|
||||||
response = found.apply(context, passedArguments);
|
|
||||||
}
|
|
||||||
else if(found !== undefined) {
|
|
||||||
response = found;
|
|
||||||
}
|
|
||||||
if($.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.rating.settings = {
|
|
||||||
|
|
||||||
name : 'Rating',
|
|
||||||
namespace : 'rating',
|
|
||||||
|
|
||||||
slent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
initialRating : 0,
|
|
||||||
interactive : true,
|
|
||||||
maxRating : 4,
|
|
||||||
clearable : 'auto',
|
|
||||||
|
|
||||||
fireOnInit : false,
|
|
||||||
|
|
||||||
onRate : function(rating){},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
method : 'The method you called is not defined',
|
|
||||||
noMaximum : 'No maximum rating specified. Cannot generate HTML automatically'
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
metadata: {
|
|
||||||
rating : 'rating',
|
|
||||||
maxRating : 'maxRating'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
active : 'active',
|
|
||||||
disabled : 'disabled',
|
|
||||||
selected : 'selected',
|
|
||||||
loading : 'loading'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
icon : '.icon'
|
|
||||||
},
|
|
||||||
|
|
||||||
templates: {
|
|
||||||
icon: function(maxRating) {
|
|
||||||
var
|
|
||||||
icon = 1,
|
|
||||||
html = ''
|
|
||||||
;
|
|
||||||
while(icon <= maxRating) {
|
|
||||||
html += '<i class="icon"></i>';
|
|
||||||
icon++;
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Rating
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.rating .icon {
|
|
||||||
padding: 0em;
|
|
||||||
margin: 0em;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: @normal;
|
|
||||||
font-style: normal;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
cursor: @iconCursor;
|
|
||||||
width: @iconWidth;
|
|
||||||
height: @iconHeight;
|
|
||||||
transition: @iconTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Standard
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Inactive Icon */
|
|
||||||
.ui.rating .icon {
|
|
||||||
background: @inactiveBackground;
|
|
||||||
color: @inactiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Icon */
|
|
||||||
.ui.rating .active.icon {
|
|
||||||
background: @activeBackground;
|
|
||||||
color: @activeColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selected Icon */
|
|
||||||
.ui.rating .icon.selected,
|
|
||||||
.ui.rating .icon.selected.active {
|
|
||||||
background: @selectedBackground;
|
|
||||||
color: @selectedColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Star
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
/* Inactive */
|
|
||||||
.ui.star.rating .icon {
|
|
||||||
width: @starIconWidth;
|
|
||||||
height: @starIconHeight;
|
|
||||||
background: @starInactiveBackground;
|
|
||||||
color: @starInactiveColor;
|
|
||||||
text-shadow: @starInactiveTextShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Star */
|
|
||||||
.ui.star.rating .active.icon {
|
|
||||||
background: @starActiveBackground !important;
|
|
||||||
color: @starActiveColor !important;
|
|
||||||
text-shadow: @starActiveTextShadow !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selected Star */
|
|
||||||
.ui.star.rating .icon.selected,
|
|
||||||
.ui.star.rating .icon.selected.active {
|
|
||||||
background: @starSelectedBackground !important;
|
|
||||||
color: @starSelectedColor !important;
|
|
||||||
text-shadow: @starSelectedTextShadow !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Heart
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.heart.rating .icon {
|
|
||||||
width: @heartIconWidth;
|
|
||||||
height: @heartIconHeight;
|
|
||||||
background: @heartInactiveBackground;
|
|
||||||
color: @heartInactiveColor;
|
|
||||||
text-shadow: @heartInactiveTextShadow !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active Heart */
|
|
||||||
.ui.heart.rating .active.icon {
|
|
||||||
background: @heartActiveBackground !important;
|
|
||||||
color: @heartActiveColor !important;
|
|
||||||
text-shadow: @heartActiveTextShadow !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selected Heart */
|
|
||||||
.ui.heart.rating .icon.selected,
|
|
||||||
.ui.heart.rating .icon.selected.active {
|
|
||||||
background: @heartSelectedBackground !important;
|
|
||||||
color: @heartSelectedColor !important;
|
|
||||||
text-shadow: @heartSelectedTextShadow !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
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.mini.rating {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.rating {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.rating {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.rating {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.rating {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.huge.rating {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.rating {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,448 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Search
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'search';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Search
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.search {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.search > .prompt {
|
|
||||||
margin: 0em;
|
|
||||||
outline: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
||||||
|
|
||||||
text-shadow: none;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: @normal;
|
|
||||||
|
|
||||||
line-height: @promptLineHeight;
|
|
||||||
padding: @promptPadding;
|
|
||||||
font-size: @promptFontSize;
|
|
||||||
|
|
||||||
background: @promptBackground;
|
|
||||||
border: @promptBorder;
|
|
||||||
color: @promptColor;
|
|
||||||
box-shadow: @promptBoxShadow;
|
|
||||||
transition: @promptTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.search .prompt {
|
|
||||||
border-radius: @promptBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Icon
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search .prompt ~ .search.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Results
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search > .results {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0%;
|
|
||||||
transform-origin: center top;
|
|
||||||
white-space: normal;
|
|
||||||
text-align: left;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
background: @resultsBackground;
|
|
||||||
|
|
||||||
margin-top: @resultsDistance;
|
|
||||||
width: @resultsWidth;
|
|
||||||
|
|
||||||
border-radius: @resultsBorderRadius;
|
|
||||||
box-shadow: @resultsBoxShadow;
|
|
||||||
border: @resultsBorder;
|
|
||||||
z-index: @resultsZIndex;
|
|
||||||
}
|
|
||||||
.ui.search > .results > :first-child {
|
|
||||||
border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.search > .results > :last-child {
|
|
||||||
border-radius: 0em 0em @resultsBorderRadius @resultsBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Result
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search > .results .result {
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: @resultFontSize;
|
|
||||||
padding: @resultPadding;
|
|
||||||
color: @resultTextColor;
|
|
||||||
line-height: @resultLineHeight;
|
|
||||||
border-bottom: @resultDivider;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result:last-child {
|
|
||||||
border-bottom: @resultLastDivider !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image */
|
|
||||||
.ui.search > .results .result .image {
|
|
||||||
float: @resultImageFloat;
|
|
||||||
overflow: hidden;
|
|
||||||
background: @resultImageBackground;
|
|
||||||
width: @resultImageWidth;
|
|
||||||
height: @resultImageHeight;
|
|
||||||
border-radius: @resultImageBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result .image img {
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Info
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search > .results .result .image + .content {
|
|
||||||
margin: @resultImageMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.search > .results .result .title {
|
|
||||||
margin: @resultTitleMargin;
|
|
||||||
font-family: @resultTitleFont;
|
|
||||||
font-weight: @resultTitleFontWeight;
|
|
||||||
font-size: @resultTitleFontSize;
|
|
||||||
color: @resultTitleColor;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result .description {
|
|
||||||
margin-top: @resultDescriptionDistance;
|
|
||||||
font-size: @resultDescriptionFontSize;
|
|
||||||
color: @resultDescriptionColor;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result .price {
|
|
||||||
float: @resultPriceFloat;
|
|
||||||
color: @resultPriceColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Message
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search > .results > .message {
|
|
||||||
padding: @messageVerticalPadding @messageHorizontalPadding;
|
|
||||||
}
|
|
||||||
.ui.search > .results > .message .header {
|
|
||||||
font-family: @headerFont;
|
|
||||||
font-size: @messageHeaderFontSize;
|
|
||||||
font-weight: @messageHeaderFontWeight;
|
|
||||||
color: @messageHeaderColor;
|
|
||||||
}
|
|
||||||
.ui.search > .results > .message .description {
|
|
||||||
margin-top: @messageDescriptionDistance;
|
|
||||||
font-size: @messageDescriptionFontSize;
|
|
||||||
color: @messageDescriptionColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* View All Results */
|
|
||||||
.ui.search > .results > .action {
|
|
||||||
display: block;
|
|
||||||
border-top: @actionBorder;
|
|
||||||
background: @actionBackground;
|
|
||||||
padding: @actionPadding;
|
|
||||||
color: @actionColor;
|
|
||||||
font-weight: @actionFontWeight;
|
|
||||||
text-align: @actionAlign;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Focus
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.search > .prompt:focus {
|
|
||||||
border-color: @promptFocusBorderColor;
|
|
||||||
background: @promptFocusBackground;
|
|
||||||
color: @promptFocusColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Loading
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.loading.search .input > i.icon:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: @loaderMargin;
|
|
||||||
width: @loaderSize;
|
|
||||||
height: @loaderSize;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
border: @loaderLineWidth solid @loaderFillColor;
|
|
||||||
}
|
|
||||||
.ui.loading.search .input > i.icon:after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
margin: @loaderMargin;
|
|
||||||
width: @loaderSize;
|
|
||||||
height: @loaderSize;
|
|
||||||
|
|
||||||
animation: button-spin @loaderSpeed linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
|
|
||||||
border-color: @loaderLineColor transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: @loaderLineWidth;
|
|
||||||
|
|
||||||
box-shadow: 0px 0px 0px 1px transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Hover
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search > .results .result:hover,
|
|
||||||
.ui.category.search > .results .category .result:hover {
|
|
||||||
background: @resultHoverBackground;
|
|
||||||
}
|
|
||||||
.ui.search .action:hover {
|
|
||||||
background: @actionHoverBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.category.search > .results .category.active {
|
|
||||||
background: @categoryActiveBackground;
|
|
||||||
}
|
|
||||||
.ui.category.search > .results .category.active > .name {
|
|
||||||
color: @categoryNameActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.search > .results .result.active,
|
|
||||||
.ui.category.search > .results .category .result.active {
|
|
||||||
position: relative;
|
|
||||||
border-left-color: @resultActiveBorderLeft;
|
|
||||||
background: @resultActiveBackground;
|
|
||||||
box-shadow: @resultActiveBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result.active .title {
|
|
||||||
color: @resultActiveTitleColor;
|
|
||||||
}
|
|
||||||
.ui.search > .results .result.active .description {
|
|
||||||
color: @resultActiveDescriptionColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Disabled
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
/* Disabled */
|
|
||||||
.ui.disabled.search {
|
|
||||||
cursor: default;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: @disabledOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Selection
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.search.selection .prompt {
|
|
||||||
border-radius: @selectionPromptBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove input */
|
|
||||||
.ui.search.selection > .icon.input > .remove.icon {
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
left: auto;
|
|
||||||
opacity: 0;
|
|
||||||
color: @selectionCloseIconColor;
|
|
||||||
top: @selectionCloseTop;
|
|
||||||
right: @selectionCloseRight;
|
|
||||||
transition: @selectionCloseTransition;
|
|
||||||
}
|
|
||||||
.ui.search.selection > .icon.input > .active.remove.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: @selectionCloseIconOpacity;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
|
|
||||||
right: @selectionCloseIconInputRight;
|
|
||||||
}
|
|
||||||
.ui.search.selection > .icon.input > .remove.icon:hover {
|
|
||||||
opacity: @selectionCloseIconHoverOpacity;
|
|
||||||
color: @selectionCloseIconHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Category
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.category.search .results {
|
|
||||||
width: @categoryResultsWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.category.search .results.animating,
|
|
||||||
.ui.category.search .results.visible {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Category */
|
|
||||||
.ui.category.search > .results .category {
|
|
||||||
display: table-row;
|
|
||||||
background: @categoryBackground;
|
|
||||||
box-shadow: @categoryBoxShadow;
|
|
||||||
transition: @categoryTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Last Category */
|
|
||||||
.ui.category.search > .results .category:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* First / Last */
|
|
||||||
.ui.category.search > .results .category:first-child .name + .result {
|
|
||||||
border-radius: 0em @resultsBorderRadius 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.category.search > .results .category:last-child .result:last-child {
|
|
||||||
border-radius: 0em 0em @resultsBorderRadius 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Category Result Name */
|
|
||||||
.ui.category.search > .results .category > .name {
|
|
||||||
display: table-cell;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: @categoryNameWidth;
|
|
||||||
white-space: @categoryNameWhitespace;
|
|
||||||
background: @categoryNameBackground;
|
|
||||||
font-family: @categoryNameFont;
|
|
||||||
font-size: @categoryNameFontSize;
|
|
||||||
padding: @categoryNamePadding;
|
|
||||||
font-weight: @categoryNameFontWeight;
|
|
||||||
color: @categoryNameColor;
|
|
||||||
border-bottom: @categoryDivider;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Category Result */
|
|
||||||
.ui.category.search > .results .category .results {
|
|
||||||
display: table-cell;
|
|
||||||
background: @categoryResultBackground;
|
|
||||||
border-left: @categoryResultLeftBorder;
|
|
||||||
border-bottom: @categoryDivider;
|
|
||||||
}
|
|
||||||
.ui.category.search > .results .category .result {
|
|
||||||
border-bottom: @categoryResultDivider;
|
|
||||||
transition: @categoryResultTransition;
|
|
||||||
padding: @categoryResultPadding;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Left / Right
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui[class*="left aligned"].search > .results {
|
|
||||||
right: auto;
|
|
||||||
left: 0%;
|
|
||||||
}
|
|
||||||
.ui[class*="right aligned"].search > .results {
|
|
||||||
right: 0%;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fluid
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fluid.search .results {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.mini.search {
|
|
||||||
font-size: @relativeMini;
|
|
||||||
}
|
|
||||||
.ui.small.search {
|
|
||||||
font-size: @relativeSmall;
|
|
||||||
}
|
|
||||||
.ui.search {
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
.ui.large.search {
|
|
||||||
font-size: @relativeLarge;
|
|
||||||
}
|
|
||||||
.ui.big.search {
|
|
||||||
font-size: @relativeBig;
|
|
||||||
}
|
|
||||||
.ui.huge.search {
|
|
||||||
font-size: @relativeHuge;
|
|
||||||
}
|
|
||||||
.ui.massive.search {
|
|
||||||
font-size: @relativeMassive;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Mobile
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
.ui.search .results {
|
|
||||||
max-width: @mobileMaxWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,921 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Shape
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.shape = function(parameters) {
|
|
||||||
var
|
|
||||||
$allModules = $(this),
|
|
||||||
$body = $('body'),
|
|
||||||
|
|
||||||
time = new Date().getTime(),
|
|
||||||
performance = [],
|
|
||||||
|
|
||||||
query = arguments[0],
|
|
||||||
methodInvoked = (typeof query == 'string'),
|
|
||||||
queryArguments = [].slice.call(arguments, 1),
|
|
||||||
|
|
||||||
requestAnimationFrame = window.requestAnimationFrame
|
|
||||||
|| window.mozRequestAnimationFrame
|
|
||||||
|| window.webkitRequestAnimationFrame
|
|
||||||
|| window.msRequestAnimationFrame
|
|
||||||
|| function(callback) { setTimeout(callback, 0); },
|
|
||||||
|
|
||||||
returnedValue
|
|
||||||
;
|
|
||||||
|
|
||||||
$allModules
|
|
||||||
.each(function() {
|
|
||||||
var
|
|
||||||
moduleSelector = $allModules.selector || '',
|
|
||||||
settings = ( $.isPlainObject(parameters) )
|
|
||||||
? $.extend(true, {}, $.fn.shape.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.shape.settings),
|
|
||||||
|
|
||||||
// internal aliases
|
|
||||||
namespace = settings.namespace,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
className = settings.className,
|
|
||||||
|
|
||||||
// define namespaces for modules
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
// selector cache
|
|
||||||
$module = $(this),
|
|
||||||
$sides = $module.find(selector.sides),
|
|
||||||
$side = $module.find(selector.side),
|
|
||||||
|
|
||||||
// private variables
|
|
||||||
nextIndex = false,
|
|
||||||
$activeSide,
|
|
||||||
$nextSide,
|
|
||||||
|
|
||||||
// standard module
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.verbose('Initializing module for', element);
|
|
||||||
module.set.defaultSide();
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, instance)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous module for', element);
|
|
||||||
$module
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
module.verbose('Refreshing selector cache for', element);
|
|
||||||
$module = $(element);
|
|
||||||
$sides = $(this).find(selector.shape);
|
|
||||||
$side = $(this).find(selector.side);
|
|
||||||
},
|
|
||||||
|
|
||||||
repaint: function() {
|
|
||||||
module.verbose('Forcing repaint event');
|
|
||||||
var
|
|
||||||
shape = $sides[0] || document.createElement('div'),
|
|
||||||
fakeAssignment = shape.offsetWidth
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
animate: function(propertyObject, callback) {
|
|
||||||
module.verbose('Animating box with properties', propertyObject);
|
|
||||||
callback = callback || function(event) {
|
|
||||||
module.verbose('Executing animation callback');
|
|
||||||
if(event !== undefined) {
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
module.reset();
|
|
||||||
module.set.active();
|
|
||||||
};
|
|
||||||
settings.beforeChange.call($nextSide[0]);
|
|
||||||
if(module.get.transitionEvent()) {
|
|
||||||
module.verbose('Starting CSS animation');
|
|
||||||
$module
|
|
||||||
.addClass(className.animating)
|
|
||||||
;
|
|
||||||
$sides
|
|
||||||
.css(propertyObject)
|
|
||||||
.one(module.get.transitionEvent(), callback)
|
|
||||||
;
|
|
||||||
module.set.duration(settings.duration);
|
|
||||||
requestAnimationFrame(function() {
|
|
||||||
$module
|
|
||||||
.addClass(className.animating)
|
|
||||||
;
|
|
||||||
$activeSide
|
|
||||||
.addClass(className.hidden)
|
|
||||||
;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
queue: function(method) {
|
|
||||||
module.debug('Queueing animation of', method);
|
|
||||||
$sides
|
|
||||||
.one(module.get.transitionEvent(), function() {
|
|
||||||
module.debug('Executing queued animation');
|
|
||||||
setTimeout(function(){
|
|
||||||
$module.shape(method);
|
|
||||||
}, 0);
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: function() {
|
|
||||||
module.verbose('Animating states reset');
|
|
||||||
$module
|
|
||||||
.removeClass(className.animating)
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
;
|
|
||||||
// removeAttr style does not consistently work in safari
|
|
||||||
$sides
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
;
|
|
||||||
$side
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
.removeClass(className.hidden)
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.removeClass(className.animating)
|
|
||||||
.attr('style', '')
|
|
||||||
.removeAttr('style')
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
complete: function() {
|
|
||||||
return ($side.filter('.' + className.active)[0] == $nextSide[0]);
|
|
||||||
},
|
|
||||||
animating: function() {
|
|
||||||
return $module.hasClass(className.animating);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
|
|
||||||
defaultSide: function() {
|
|
||||||
$activeSide = $module.find('.' + settings.className.active);
|
|
||||||
$nextSide = ( $activeSide.next(selector.side).length > 0 )
|
|
||||||
? $activeSide.next(selector.side)
|
|
||||||
: $module.find(selector.side).first()
|
|
||||||
;
|
|
||||||
nextIndex = false;
|
|
||||||
module.verbose('Active side set to', $activeSide);
|
|
||||||
module.verbose('Next side set to', $nextSide);
|
|
||||||
},
|
|
||||||
|
|
||||||
duration: function(duration) {
|
|
||||||
duration = duration || settings.duration;
|
|
||||||
duration = (typeof duration == 'number')
|
|
||||||
? duration + 'ms'
|
|
||||||
: duration
|
|
||||||
;
|
|
||||||
module.verbose('Setting animation duration', duration);
|
|
||||||
if(settings.duration || settings.duration === 0) {
|
|
||||||
$sides.add($side)
|
|
||||||
.css({
|
|
||||||
'-webkit-transition-duration': duration,
|
|
||||||
'-moz-transition-duration': duration,
|
|
||||||
'-ms-transition-duration': duration,
|
|
||||||
'-o-transition-duration': duration,
|
|
||||||
'transition-duration': duration
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
currentStageSize: function() {
|
|
||||||
var
|
|
||||||
$activeSide = $module.find('.' + settings.className.active),
|
|
||||||
width = $activeSide.outerWidth(true),
|
|
||||||
height = $activeSide.outerHeight(true)
|
|
||||||
;
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
width: width,
|
|
||||||
height: height
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
stageSize: function() {
|
|
||||||
var
|
|
||||||
$clone = $module.clone().addClass(className.loading),
|
|
||||||
$activeSide = $clone.find('.' + settings.className.active),
|
|
||||||
$nextSide = (nextIndex)
|
|
||||||
? $clone.find(selector.side).eq(nextIndex)
|
|
||||||
: ( $activeSide.next(selector.side).length > 0 )
|
|
||||||
? $activeSide.next(selector.side)
|
|
||||||
: $clone.find(selector.side).first(),
|
|
||||||
newWidth = (settings.width == 'next')
|
|
||||||
? $nextSide.outerWidth(true)
|
|
||||||
: (settings.width == 'initial')
|
|
||||||
? $module.width()
|
|
||||||
: settings.width,
|
|
||||||
newHeight = (settings.height == 'next')
|
|
||||||
? $nextSide.outerHeight(true)
|
|
||||||
: (settings.height == 'initial')
|
|
||||||
? $module.height()
|
|
||||||
: settings.height
|
|
||||||
;
|
|
||||||
$activeSide.removeClass(className.active);
|
|
||||||
$nextSide.addClass(className.active);
|
|
||||||
$clone.insertAfter($module);
|
|
||||||
$clone.remove();
|
|
||||||
if(settings.width != 'auto') {
|
|
||||||
$module.css('width', newWidth + settings.jitter);
|
|
||||||
module.verbose('Specifying width during animation', newWidth);
|
|
||||||
}
|
|
||||||
if(settings.height != 'auto') {
|
|
||||||
$module.css('height', newHeight + settings.jitter);
|
|
||||||
module.verbose('Specifying height during animation', newHeight);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
nextSide: function(selector) {
|
|
||||||
nextIndex = selector;
|
|
||||||
$nextSide = $side.filter(selector);
|
|
||||||
nextIndex = $side.index($nextSide);
|
|
||||||
if($nextSide.length === 0) {
|
|
||||||
module.set.defaultSide();
|
|
||||||
module.error(error.side);
|
|
||||||
}
|
|
||||||
module.verbose('Next side manually set to', $nextSide);
|
|
||||||
},
|
|
||||||
|
|
||||||
active: function() {
|
|
||||||
module.verbose('Setting new side to active', $nextSide);
|
|
||||||
$side
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
settings.onChange.call($nextSide[0]);
|
|
||||||
module.set.defaultSide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
flip: {
|
|
||||||
|
|
||||||
up: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping up', $nextSide);
|
|
||||||
var
|
|
||||||
transform = module.get.transform.up()
|
|
||||||
;
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.above();
|
|
||||||
module.animate(transform);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip up');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
down: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping down', $nextSide);
|
|
||||||
var
|
|
||||||
transform = module.get.transform.down()
|
|
||||||
;
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.below();
|
|
||||||
module.animate(transform);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip down');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
left: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping left', $nextSide);
|
|
||||||
var
|
|
||||||
transform = module.get.transform.left()
|
|
||||||
;
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.left();
|
|
||||||
module.animate(transform);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip left');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
right: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping right', $nextSide);
|
|
||||||
var
|
|
||||||
transform = module.get.transform.right()
|
|
||||||
;
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.right();
|
|
||||||
module.animate(transform);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip right');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
over: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping over', $nextSide);
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.behind();
|
|
||||||
module.animate(module.get.transform.over() );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip over');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
back: function() {
|
|
||||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
|
||||||
module.debug('Side already visible', $nextSide);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( !module.is.animating()) {
|
|
||||||
module.debug('Flipping back', $nextSide);
|
|
||||||
module.set.stageSize();
|
|
||||||
module.stage.behind();
|
|
||||||
module.animate(module.get.transform.back() );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.queue('flip back');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
|
|
||||||
transform: {
|
|
||||||
up: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
||||||
z: -($activeSide.outerHeight(true) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
down: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
||||||
z: -($activeSide.outerHeight(true) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
left: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
|
||||||
z : -($activeSide.outerWidth(true) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
right: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
|
||||||
z : -($activeSide.outerWidth(true) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
over: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
back: function() {
|
|
||||||
var
|
|
||||||
translate = {
|
|
||||||
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
|
|
||||||
}
|
|
||||||
;
|
|
||||||
return {
|
|
||||||
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
transitionEvent: function() {
|
|
||||||
var
|
|
||||||
element = document.createElement('element'),
|
|
||||||
transitions = {
|
|
||||||
'transition' :'transitionend',
|
|
||||||
'OTransition' :'oTransitionEnd',
|
|
||||||
'MozTransition' :'transitionend',
|
|
||||||
'WebkitTransition' :'webkitTransitionEnd'
|
|
||||||
},
|
|
||||||
transition
|
|
||||||
;
|
|
||||||
for(transition in transitions){
|
|
||||||
if( element.style[transition] !== undefined ){
|
|
||||||
return transitions[transition];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
nextSide: function() {
|
|
||||||
return ( $activeSide.next(selector.side).length > 0 )
|
|
||||||
? $activeSide.next(selector.side)
|
|
||||||
: $module.find(selector.side).first()
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
stage: {
|
|
||||||
|
|
||||||
above: function() {
|
|
||||||
var
|
|
||||||
box = {
|
|
||||||
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
||||||
depth : {
|
|
||||||
active : ($nextSide.outerHeight(true) / 2),
|
|
||||||
next : ($activeSide.outerHeight(true) / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
;
|
|
||||||
module.verbose('Setting the initial animation position as above', $nextSide, box);
|
|
||||||
$sides
|
|
||||||
.css({
|
|
||||||
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$activeSide
|
|
||||||
.css({
|
|
||||||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.animating)
|
|
||||||
.css({
|
|
||||||
'top' : box.origin + 'px',
|
|
||||||
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
below: function() {
|
|
||||||
var
|
|
||||||
box = {
|
|
||||||
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
|
||||||
depth : {
|
|
||||||
active : ($nextSide.outerHeight(true) / 2),
|
|
||||||
next : ($activeSide.outerHeight(true) / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
;
|
|
||||||
module.verbose('Setting the initial animation position as below', $nextSide, box);
|
|
||||||
$sides
|
|
||||||
.css({
|
|
||||||
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$activeSide
|
|
||||||
.css({
|
|
||||||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.animating)
|
|
||||||
.css({
|
|
||||||
'top' : box.origin + 'px',
|
|
||||||
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
left: function() {
|
|
||||||
var
|
|
||||||
height = {
|
|
||||||
active : $activeSide.outerWidth(true),
|
|
||||||
next : $nextSide.outerWidth(true)
|
|
||||||
},
|
|
||||||
box = {
|
|
||||||
origin : ( ( height.active - height.next ) / 2),
|
|
||||||
depth : {
|
|
||||||
active : (height.next / 2),
|
|
||||||
next : (height.active / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
;
|
|
||||||
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
|
||||||
$sides
|
|
||||||
.css({
|
|
||||||
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$activeSide
|
|
||||||
.css({
|
|
||||||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.animating)
|
|
||||||
.css({
|
|
||||||
'left' : box.origin + 'px',
|
|
||||||
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
right: function() {
|
|
||||||
var
|
|
||||||
height = {
|
|
||||||
active : $activeSide.outerWidth(true),
|
|
||||||
next : $nextSide.outerWidth(true)
|
|
||||||
},
|
|
||||||
box = {
|
|
||||||
origin : ( ( height.active - height.next ) / 2),
|
|
||||||
depth : {
|
|
||||||
active : (height.next / 2),
|
|
||||||
next : (height.active / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
;
|
|
||||||
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
|
||||||
$sides
|
|
||||||
.css({
|
|
||||||
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$activeSide
|
|
||||||
.css({
|
|
||||||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.animating)
|
|
||||||
.css({
|
|
||||||
'left' : box.origin + 'px',
|
|
||||||
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
behind: function() {
|
|
||||||
var
|
|
||||||
height = {
|
|
||||||
active : $activeSide.outerWidth(true),
|
|
||||||
next : $nextSide.outerWidth(true)
|
|
||||||
},
|
|
||||||
box = {
|
|
||||||
origin : ( ( height.active - height.next ) / 2),
|
|
||||||
depth : {
|
|
||||||
active : (height.next / 2),
|
|
||||||
next : (height.active / 2)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
;
|
|
||||||
module.verbose('Setting the initial animation position as behind', $nextSide, box);
|
|
||||||
$activeSide
|
|
||||||
.css({
|
|
||||||
'transform' : 'rotateY(0deg)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$nextSide
|
|
||||||
.addClass(className.animating)
|
|
||||||
.css({
|
|
||||||
'left' : box.origin + 'px',
|
|
||||||
'transform' : 'rotateY(-180deg)'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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($allModules.length > 1) {
|
|
||||||
title += ' ' + '(' + $allModules.length + ')';
|
|
||||||
}
|
|
||||||
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 {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if ( $.isFunction( found ) ) {
|
|
||||||
response = found.apply(context, passedArguments);
|
|
||||||
}
|
|
||||||
else if(found !== undefined) {
|
|
||||||
response = found;
|
|
||||||
}
|
|
||||||
if($.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.shape.settings = {
|
|
||||||
|
|
||||||
// module info
|
|
||||||
name : 'Shape',
|
|
||||||
|
|
||||||
// hide all debug content
|
|
||||||
silent : false,
|
|
||||||
|
|
||||||
// debug content outputted to console
|
|
||||||
debug : false,
|
|
||||||
|
|
||||||
// verbose debug output
|
|
||||||
verbose : false,
|
|
||||||
|
|
||||||
// fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors)
|
|
||||||
jitter : 0,
|
|
||||||
|
|
||||||
// performance data output
|
|
||||||
performance: true,
|
|
||||||
|
|
||||||
// event namespace
|
|
||||||
namespace : 'shape',
|
|
||||||
|
|
||||||
// width during animation, can be set to 'auto', initial', 'next' or pixel amount
|
|
||||||
width: 'initial',
|
|
||||||
|
|
||||||
// height during animation, can be set to 'auto', 'initial', 'next' or pixel amount
|
|
||||||
height: 'initial',
|
|
||||||
|
|
||||||
// callback occurs on side change
|
|
||||||
beforeChange : function() {},
|
|
||||||
onChange : function() {},
|
|
||||||
|
|
||||||
// allow animation to same side
|
|
||||||
allowRepeats: false,
|
|
||||||
|
|
||||||
// animation duration
|
|
||||||
duration : false,
|
|
||||||
|
|
||||||
// possible errors
|
|
||||||
error: {
|
|
||||||
side : 'You tried to switch to a side that does not exist.',
|
|
||||||
method : 'The method you called is not defined'
|
|
||||||
},
|
|
||||||
|
|
||||||
// classnames used
|
|
||||||
className : {
|
|
||||||
animating : 'animating',
|
|
||||||
hidden : 'hidden',
|
|
||||||
loading : 'loading',
|
|
||||||
active : 'active'
|
|
||||||
},
|
|
||||||
|
|
||||||
// selectors used
|
|
||||||
selector : {
|
|
||||||
sides : '.sides',
|
|
||||||
side : '.side'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Shape
|
|
||||||
* http://github.com/semantic-org/semantic-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 .sides {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.shape .side {
|
|
||||||
opacity: 1;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
margin: @sideMargin !important;
|
|
||||||
backface-visibility: @backfaceVisibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.shape .side {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.shape .side * {
|
|
||||||
backface-visibility: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.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
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.text.shape.animating .sides {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
.ui.text.shape .side {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.ui.text.shape .side > * {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Loading
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.loading.shape {
|
|
||||||
position: absolute;
|
|
||||||
top: -9999px;
|
|
||||||
left: -9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Animating
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.shape .animating.side {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
display: block;
|
|
||||||
z-index: @animatingZIndex;
|
|
||||||
}
|
|
||||||
.ui.shape .hidden.side {
|
|
||||||
opacity: @hiddenSideOpacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
CSS
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.shape.animating .sides {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.ui.shape.animating .sides {
|
|
||||||
transition: @transition;
|
|
||||||
}
|
|
||||||
.ui.shape.animating .side {
|
|
||||||
transition: @sideTransition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Active
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.shape .active.side {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,538 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Sidebar
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'module';
|
|
||||||
@element : 'sidebar';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Sidebar
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Sidebar Menu */
|
|
||||||
.ui.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
backface-visibility: hidden;
|
|
||||||
transition: none;
|
|
||||||
will-change: transform;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
visibility: hidden;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
height: 100% !important;
|
|
||||||
max-height: 100%;
|
|
||||||
border-radius: 0em !important;
|
|
||||||
margin: 0em !important;
|
|
||||||
overflow-y: auto !important;
|
|
||||||
z-index: @topLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GPU Layers for Child Elements */
|
|
||||||
.ui.sidebar > * {
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Direction
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.left.sidebar {
|
|
||||||
right: auto;
|
|
||||||
left: 0px;
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.right.sidebar {
|
|
||||||
right: 0px !important;
|
|
||||||
left: auto !important;
|
|
||||||
transform: translate3d(100%, 0%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.sidebar,
|
|
||||||
.ui.bottom.sidebar {
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
.ui.top.sidebar {
|
|
||||||
top: 0px !important;
|
|
||||||
bottom: auto !important;
|
|
||||||
transform: translate3d(0, -100%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.sidebar {
|
|
||||||
top: auto !important;
|
|
||||||
bottom: 0px !important;
|
|
||||||
transform: translate3d(0, 100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Pushable
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.pushable {
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Whole Page */
|
|
||||||
body.pushable {
|
|
||||||
background: @canvasBackground !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page Context */
|
|
||||||
.pushable:not(body) {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
.pushable:not(body) > .ui.sidebar,
|
|
||||||
.pushable:not(body) > .fixed,
|
|
||||||
.pushable:not(body) > .pusher:after {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fixed
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.pushable > .fixed {
|
|
||||||
position: fixed;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
will-change: transform;
|
|
||||||
z-index: @fixedLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Page
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.pushable > .pusher {
|
|
||||||
position: relative;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 100%;
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
z-index: @middleLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.pushable > .pusher {
|
|
||||||
background: @pageBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pusher should inherit background from context */
|
|
||||||
.pushable > .pusher {
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Dimmer
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.pushable > .pusher:after {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
content: '';
|
|
||||||
background-color: @dimmerColor;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
transition: @dimmerTransition;
|
|
||||||
will-change: opacity;
|
|
||||||
z-index: @dimmerLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Coupling
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.sidebar.menu .item {
|
|
||||||
border-radius: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Dimmed
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.pushable > .pusher.dimmed:after {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Animating
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.animating.sidebar {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Visible
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.visible.sidebar {
|
|
||||||
visibility: visible;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Shadow Direction */
|
|
||||||
.ui.left.visible.sidebar,
|
|
||||||
.ui.right.visible.sidebar {
|
|
||||||
box-shadow: @horizontalBoxShadow;
|
|
||||||
}
|
|
||||||
.ui.top.visible.sidebar,
|
|
||||||
.ui.bottom.visible.sidebar {
|
|
||||||
box-shadow: @verticalBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Visible On Load */
|
|
||||||
.ui.visible.left.sidebar ~ .fixed,
|
|
||||||
.ui.visible.left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(@width, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.right.sidebar ~ .fixed,
|
|
||||||
.ui.visible.right.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(-@width, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.top.sidebar ~ .fixed,
|
|
||||||
.ui.visible.top.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(0, @height, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.bottom.sidebar ~ .fixed,
|
|
||||||
.ui.visible.bottom.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(0, -@height, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* opposite sides visible forces content overlay */
|
|
||||||
.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,
|
|
||||||
.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,
|
|
||||||
.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,
|
|
||||||
.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
iOS
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Width
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Left / Right */
|
|
||||||
.ui.thin.left.sidebar,
|
|
||||||
.ui.thin.right.sidebar {
|
|
||||||
width: @thinWidth;
|
|
||||||
}
|
|
||||||
.ui[class*="very thin"].left.sidebar,
|
|
||||||
.ui[class*="very thin"].right.sidebar {
|
|
||||||
width: @veryThinWidth;
|
|
||||||
}
|
|
||||||
.ui.left.sidebar,
|
|
||||||
.ui.right.sidebar {
|
|
||||||
width: @width;
|
|
||||||
}
|
|
||||||
.ui.wide.left.sidebar,
|
|
||||||
.ui.wide.right.sidebar {
|
|
||||||
width: @wideWidth;
|
|
||||||
}
|
|
||||||
.ui[class*="very wide"].left.sidebar,
|
|
||||||
.ui[class*="very wide"].right.sidebar {
|
|
||||||
width: @veryWideWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Left Visible */
|
|
||||||
.ui.visible.thin.left.sidebar ~ .fixed,
|
|
||||||
.ui.visible.thin.left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(@thinWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible[class*="very thin"].left.sidebar ~ .fixed,
|
|
||||||
.ui.visible[class*="very thin"].left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(@veryThinWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.wide.left.sidebar ~ .fixed,
|
|
||||||
.ui.visible.wide.left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(@wideWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible[class*="very wide"].left.sidebar ~ .fixed,
|
|
||||||
.ui.visible[class*="very wide"].left.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(@veryWideWidth, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right Visible */
|
|
||||||
.ui.visible.thin.right.sidebar ~ .fixed,
|
|
||||||
.ui.visible.thin.right.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(-@thinWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible[class*="very thin"].right.sidebar ~ .fixed,
|
|
||||||
.ui.visible[class*="very thin"].right.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(-@veryThinWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.wide.right.sidebar ~ .fixed,
|
|
||||||
.ui.visible.wide.right.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(-@wideWidth, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible[class*="very wide"].right.sidebar ~ .fixed,
|
|
||||||
.ui.visible[class*="very wide"].right.sidebar ~ .pusher {
|
|
||||||
transform: translate3d(-@veryWideWidth, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Animations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Overlay
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Set-up */
|
|
||||||
.ui.overlay.sidebar {
|
|
||||||
z-index: @topLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.left.overlay.sidebar {
|
|
||||||
transform: translate3d(-100%, 0%, 0);
|
|
||||||
}
|
|
||||||
.ui.right.overlay.sidebar {
|
|
||||||
transform: translate3d(100%, 0%, 0);
|
|
||||||
}
|
|
||||||
.ui.top.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, -100%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, 100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.animating.ui.overlay.sidebar,
|
|
||||||
.ui.visible.overlay.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End - Sidebar */
|
|
||||||
.ui.visible.left.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, 0%, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.right.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, 0%, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.top.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, 0%, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.bottom.overlay.sidebar {
|
|
||||||
transform: translate3d(0%, 0%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End - Pusher */
|
|
||||||
.ui.visible.overlay.sidebar ~ .fixed,
|
|
||||||
.ui.visible.overlay.sidebar ~ .pusher {
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Push
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.push.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
z-index: @topLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar - Initial */
|
|
||||||
.ui.left.push.sidebar {
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.right.push.sidebar {
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.top.push.sidebar {
|
|
||||||
transform: translate3d(0%, -100%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.push.sidebar {
|
|
||||||
transform: translate3d(0%, 100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End */
|
|
||||||
.ui.visible.push.sidebar {
|
|
||||||
transform: translate3d(0%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Uncover
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.uncover.sidebar {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
z-index: @bottomLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End */
|
|
||||||
.ui.visible.uncover.sidebar {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Slide Along
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.slide.along.sidebar {
|
|
||||||
z-index: @bottomLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar - Initial */
|
|
||||||
.ui.left.slide.along.sidebar {
|
|
||||||
transform: translate3d(-50%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.right.slide.along.sidebar {
|
|
||||||
transform: translate3d(50%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.top.slide.along.sidebar {
|
|
||||||
transform: translate3d(0, -50%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.slide.along.sidebar {
|
|
||||||
transform: translate3d(0%, 50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.ui.animating.slide.along.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End */
|
|
||||||
.ui.visible.slide.along.sidebar {
|
|
||||||
transform: translate3d(0%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Slide Out
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.slide.out.sidebar {
|
|
||||||
z-index: @bottomLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar - Initial */
|
|
||||||
.ui.left.slide.out.sidebar {
|
|
||||||
transform: translate3d(50%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.right.slide.out.sidebar {
|
|
||||||
transform: translate3d(-50%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.top.slide.out.sidebar {
|
|
||||||
transform: translate3d(0%, 50%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.slide.out.sidebar {
|
|
||||||
transform: translate3d(0%, -50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.ui.animating.slide.out.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End */
|
|
||||||
.ui.visible.slide.out.sidebar {
|
|
||||||
transform: translate3d(0%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Scale Down
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Initial */
|
|
||||||
.ui.scale.down.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
z-index: @topLayer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar - Initial */
|
|
||||||
.ui.left.scale.down.sidebar {
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.right.scale.down.sidebar {
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.top.scale.down.sidebar {
|
|
||||||
transform: translate3d(0%, -100%, 0);
|
|
||||||
}
|
|
||||||
.ui.bottom.scale.down.sidebar {
|
|
||||||
transform: translate3d(0%, 100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pusher - Initial */
|
|
||||||
.ui.scale.down.left.sidebar ~ .pusher {
|
|
||||||
transform-origin: 75% 50%;
|
|
||||||
}
|
|
||||||
.ui.scale.down.right.sidebar ~ .pusher {
|
|
||||||
transform-origin: 25% 50%;
|
|
||||||
}
|
|
||||||
.ui.scale.down.top.sidebar ~ .pusher {
|
|
||||||
transform-origin: 50% 75%;
|
|
||||||
}
|
|
||||||
.ui.scale.down.bottom.sidebar ~ .pusher {
|
|
||||||
transform-origin: 50% 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.ui.animating.scale.down > .visible.ui.sidebar {
|
|
||||||
transition: transform @duration @easing;
|
|
||||||
}
|
|
||||||
.ui.visible.scale.down.sidebar ~ .pusher,
|
|
||||||
.ui.animating.scale.down.sidebar ~ .pusher {
|
|
||||||
display: block !important;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* End */
|
|
||||||
.ui.visible.scale.down.sidebar {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
.ui.visible.scale.down.sidebar ~ .pusher {
|
|
||||||
transform: scale(0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,959 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Sticky
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.sticky = 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.sticky.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.sticky.settings),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
namespace = settings.namespace,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + namespace,
|
|
||||||
moduleNamespace = 'module-' + namespace,
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$window = $(window),
|
|
||||||
$scroll = $(settings.scrollContext),
|
|
||||||
$container,
|
|
||||||
$context,
|
|
||||||
|
|
||||||
selector = $module.selector || '',
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
|
|
||||||
requestAnimationFrame = window.requestAnimationFrame
|
|
||||||
|| window.mozRequestAnimationFrame
|
|
||||||
|| window.webkitRequestAnimationFrame
|
|
||||||
|| window.msRequestAnimationFrame
|
|
||||||
|| function(callback) { setTimeout(callback, 0); },
|
|
||||||
|
|
||||||
element = this,
|
|
||||||
|
|
||||||
documentObserver,
|
|
||||||
observer,
|
|
||||||
module
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
|
|
||||||
module.determineContainer();
|
|
||||||
module.determineContext();
|
|
||||||
module.verbose('Initializing sticky', settings, $container);
|
|
||||||
|
|
||||||
module.save.positions();
|
|
||||||
module.checkErrors();
|
|
||||||
module.bind.events();
|
|
||||||
|
|
||||||
if(settings.observeChanges) {
|
|
||||||
module.observeChanges();
|
|
||||||
}
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function() {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.verbose('Destroying previous instance');
|
|
||||||
module.reset();
|
|
||||||
if(documentObserver) {
|
|
||||||
documentObserver.disconnect();
|
|
||||||
}
|
|
||||||
if(observer) {
|
|
||||||
observer.disconnect();
|
|
||||||
}
|
|
||||||
$window
|
|
||||||
.off('load' + eventNamespace, module.event.load)
|
|
||||||
.off('resize' + eventNamespace, module.event.resize)
|
|
||||||
;
|
|
||||||
$scroll
|
|
||||||
.off('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
||||||
;
|
|
||||||
$module.removeData(moduleNamespace);
|
|
||||||
},
|
|
||||||
|
|
||||||
observeChanges: function() {
|
|
||||||
if('MutationObserver' in window) {
|
|
||||||
documentObserver = new MutationObserver(module.event.documentChanged);
|
|
||||||
observer = new MutationObserver(module.event.changed);
|
|
||||||
documentObserver.observe(document, {
|
|
||||||
childList : true,
|
|
||||||
subtree : true
|
|
||||||
});
|
|
||||||
observer.observe(element, {
|
|
||||||
childList : true,
|
|
||||||
subtree : true
|
|
||||||
});
|
|
||||||
observer.observe($context[0], {
|
|
||||||
childList : true,
|
|
||||||
subtree : true
|
|
||||||
});
|
|
||||||
module.debug('Setting up mutation observer', observer);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
determineContainer: function() {
|
|
||||||
if(settings.container) {
|
|
||||||
$container = $(settings.container);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$container = $module.offsetParent();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
determineContext: function() {
|
|
||||||
if(settings.context) {
|
|
||||||
$context = $(settings.context);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$context = $container;
|
|
||||||
}
|
|
||||||
if($context.length === 0) {
|
|
||||||
module.error(error.invalidContext, settings.context, $module);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
checkErrors: function() {
|
|
||||||
if( module.is.hidden() ) {
|
|
||||||
module.error(error.visible, $module);
|
|
||||||
}
|
|
||||||
if(module.cache.element.height > module.cache.context.height) {
|
|
||||||
module.reset();
|
|
||||||
module.error(error.elementSize, $module);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
$window
|
|
||||||
.on('load' + eventNamespace, module.event.load)
|
|
||||||
.on('resize' + eventNamespace, module.event.resize)
|
|
||||||
;
|
|
||||||
// pub/sub pattern
|
|
||||||
$scroll
|
|
||||||
.off('scroll' + eventNamespace)
|
|
||||||
.on('scroll' + eventNamespace, module.event.scroll)
|
|
||||||
.on('scrollchange' + eventNamespace, module.event.scrollchange)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
changed: function(mutations) {
|
|
||||||
clearTimeout(module.timer);
|
|
||||||
module.timer = setTimeout(function() {
|
|
||||||
module.verbose('DOM tree modified, updating sticky menu', mutations);
|
|
||||||
module.refresh();
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
documentChanged: function(mutations) {
|
|
||||||
[].forEach.call(mutations, function(mutation) {
|
|
||||||
if(mutation.removedNodes) {
|
|
||||||
[].forEach.call(mutation.removedNodes, function(node) {
|
|
||||||
if(node == element || $(node).find(element).length > 0) {
|
|
||||||
module.debug('Element removed from DOM, tearing down events');
|
|
||||||
module.destroy();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
load: function() {
|
|
||||||
module.verbose('Page contents finished loading');
|
|
||||||
requestAnimationFrame(module.refresh);
|
|
||||||
},
|
|
||||||
resize: function() {
|
|
||||||
module.verbose('Window resized');
|
|
||||||
requestAnimationFrame(module.refresh);
|
|
||||||
},
|
|
||||||
scroll: function() {
|
|
||||||
requestAnimationFrame(function() {
|
|
||||||
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
|
|
||||||
});
|
|
||||||
},
|
|
||||||
scrollchange: function(event, scrollPosition) {
|
|
||||||
module.stick(scrollPosition);
|
|
||||||
settings.onScroll.call(element);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function(hardRefresh) {
|
|
||||||
module.reset();
|
|
||||||
if(!settings.context) {
|
|
||||||
module.determineContext();
|
|
||||||
}
|
|
||||||
if(hardRefresh) {
|
|
||||||
module.determineContainer();
|
|
||||||
}
|
|
||||||
module.save.positions();
|
|
||||||
module.stick();
|
|
||||||
settings.onReposition.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
supports: {
|
|
||||||
sticky: function() {
|
|
||||||
var
|
|
||||||
$element = $('<div/>'),
|
|
||||||
element = $element[0]
|
|
||||||
;
|
|
||||||
$element.addClass(className.supported);
|
|
||||||
return($element.css('position').match('sticky'));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
save: {
|
|
||||||
lastScroll: function(scroll) {
|
|
||||||
module.lastScroll = scroll;
|
|
||||||
},
|
|
||||||
elementScroll: function(scroll) {
|
|
||||||
module.elementScroll = scroll;
|
|
||||||
},
|
|
||||||
positions: function() {
|
|
||||||
var
|
|
||||||
scrollContext = {
|
|
||||||
height : $scroll.height()
|
|
||||||
},
|
|
||||||
element = {
|
|
||||||
margin: {
|
|
||||||
top : parseInt($module.css('margin-top'), 10),
|
|
||||||
bottom : parseInt($module.css('margin-bottom'), 10),
|
|
||||||
},
|
|
||||||
offset : $module.offset(),
|
|
||||||
width : $module.outerWidth(),
|
|
||||||
height : $module.outerHeight()
|
|
||||||
},
|
|
||||||
context = {
|
|
||||||
offset : $context.offset(),
|
|
||||||
height : $context.outerHeight()
|
|
||||||
},
|
|
||||||
container = {
|
|
||||||
height: $container.outerHeight()
|
|
||||||
}
|
|
||||||
;
|
|
||||||
if( !module.is.standardScroll() ) {
|
|
||||||
module.debug('Non-standard scroll. Removing scroll offset from element offset');
|
|
||||||
|
|
||||||
scrollContext.top = $scroll.scrollTop();
|
|
||||||
scrollContext.left = $scroll.scrollLeft();
|
|
||||||
|
|
||||||
element.offset.top += scrollContext.top;
|
|
||||||
context.offset.top += scrollContext.top;
|
|
||||||
element.offset.left += scrollContext.left;
|
|
||||||
context.offset.left += scrollContext.left;
|
|
||||||
}
|
|
||||||
module.cache = {
|
|
||||||
fits : ( (element.height + settings.offset) <= scrollContext.height),
|
|
||||||
sameHeight : (element.height == context.height),
|
|
||||||
scrollContext : {
|
|
||||||
height : scrollContext.height
|
|
||||||
},
|
|
||||||
element: {
|
|
||||||
margin : element.margin,
|
|
||||||
top : element.offset.top - element.margin.top,
|
|
||||||
left : element.offset.left,
|
|
||||||
width : element.width,
|
|
||||||
height : element.height,
|
|
||||||
bottom : element.offset.top + element.height
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
top : context.offset.top,
|
|
||||||
height : context.height,
|
|
||||||
bottom : context.offset.top + context.height
|
|
||||||
}
|
|
||||||
};
|
|
||||||
module.set.containerSize();
|
|
||||||
|
|
||||||
module.stick();
|
|
||||||
module.debug('Caching element positions', module.cache);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
direction: function(scroll) {
|
|
||||||
var
|
|
||||||
direction = 'down'
|
|
||||||
;
|
|
||||||
scroll = scroll || $scroll.scrollTop();
|
|
||||||
if(module.lastScroll !== undefined) {
|
|
||||||
if(module.lastScroll < scroll) {
|
|
||||||
direction = 'down';
|
|
||||||
}
|
|
||||||
else if(module.lastScroll > scroll) {
|
|
||||||
direction = 'up';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return direction;
|
|
||||||
},
|
|
||||||
scrollChange: function(scroll) {
|
|
||||||
scroll = scroll || $scroll.scrollTop();
|
|
||||||
return (module.lastScroll)
|
|
||||||
? (scroll - module.lastScroll)
|
|
||||||
: 0
|
|
||||||
;
|
|
||||||
},
|
|
||||||
currentElementScroll: function() {
|
|
||||||
if(module.elementScroll) {
|
|
||||||
return module.elementScroll;
|
|
||||||
}
|
|
||||||
return ( module.is.top() )
|
|
||||||
? Math.abs(parseInt($module.css('top'), 10)) || 0
|
|
||||||
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
elementScroll: function(scroll) {
|
|
||||||
scroll = scroll || $scroll.scrollTop();
|
|
||||||
var
|
|
||||||
element = module.cache.element,
|
|
||||||
scrollContext = module.cache.scrollContext,
|
|
||||||
delta = module.get.scrollChange(scroll),
|
|
||||||
maxScroll = (element.height - scrollContext.height + settings.offset),
|
|
||||||
elementScroll = module.get.currentElementScroll(),
|
|
||||||
possibleScroll = (elementScroll + delta)
|
|
||||||
;
|
|
||||||
if(module.cache.fits || possibleScroll < 0) {
|
|
||||||
elementScroll = 0;
|
|
||||||
}
|
|
||||||
else if(possibleScroll > maxScroll ) {
|
|
||||||
elementScroll = maxScroll;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
elementScroll = possibleScroll;
|
|
||||||
}
|
|
||||||
return elementScroll;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
remove: {
|
|
||||||
lastScroll: function() {
|
|
||||||
delete module.lastScroll;
|
|
||||||
},
|
|
||||||
elementScroll: function(scroll) {
|
|
||||||
delete module.elementScroll;
|
|
||||||
},
|
|
||||||
minimumSize: function() {
|
|
||||||
$container
|
|
||||||
.css('min-height', '')
|
|
||||||
;
|
|
||||||
},
|
|
||||||
offset: function() {
|
|
||||||
$module.css('margin-top', '');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
offset: function() {
|
|
||||||
module.verbose('Setting offset on element', settings.offset);
|
|
||||||
$module
|
|
||||||
.css('margin-top', settings.offset)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
containerSize: function() {
|
|
||||||
var
|
|
||||||
tagName = $container.get(0).tagName
|
|
||||||
;
|
|
||||||
if(tagName === 'HTML' || tagName == 'body') {
|
|
||||||
// this can trigger for too many reasons
|
|
||||||
//module.error(error.container, tagName, $module);
|
|
||||||
module.determineContainer();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
|
|
||||||
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
|
|
||||||
$container.css({
|
|
||||||
height: module.cache.context.height
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
minimumSize: function() {
|
|
||||||
var
|
|
||||||
element = module.cache.element
|
|
||||||
;
|
|
||||||
$container
|
|
||||||
.css('min-height', element.height)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
scroll: function(scroll) {
|
|
||||||
module.debug('Setting scroll on element', scroll);
|
|
||||||
if(module.elementScroll == scroll) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if( module.is.top() ) {
|
|
||||||
$module
|
|
||||||
.css('bottom', '')
|
|
||||||
.css('top', -scroll)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
if( module.is.bottom() ) {
|
|
||||||
$module
|
|
||||||
.css('top', '')
|
|
||||||
.css('bottom', scroll)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
size: function() {
|
|
||||||
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
|
|
||||||
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
|
|
||||||
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
standardScroll: function() {
|
|
||||||
return ($scroll[0] == window);
|
|
||||||
},
|
|
||||||
top: function() {
|
|
||||||
return $module.hasClass(className.top);
|
|
||||||
},
|
|
||||||
bottom: function() {
|
|
||||||
return $module.hasClass(className.bottom);
|
|
||||||
},
|
|
||||||
initialPosition: function() {
|
|
||||||
return (!module.is.fixed() && !module.is.bound());
|
|
||||||
},
|
|
||||||
hidden: function() {
|
|
||||||
return (!$module.is(':visible'));
|
|
||||||
},
|
|
||||||
bound: function() {
|
|
||||||
return $module.hasClass(className.bound);
|
|
||||||
},
|
|
||||||
fixed: function() {
|
|
||||||
return $module.hasClass(className.fixed);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
stick: function(scroll) {
|
|
||||||
var
|
|
||||||
cachedPosition = scroll || $scroll.scrollTop(),
|
|
||||||
cache = module.cache,
|
|
||||||
fits = cache.fits,
|
|
||||||
sameHeight = cache.sameHeight,
|
|
||||||
element = cache.element,
|
|
||||||
scrollContext = cache.scrollContext,
|
|
||||||
context = cache.context,
|
|
||||||
offset = (module.is.bottom() && settings.pushing)
|
|
||||||
? settings.bottomOffset
|
|
||||||
: settings.offset,
|
|
||||||
scroll = {
|
|
||||||
top : cachedPosition + offset,
|
|
||||||
bottom : cachedPosition + offset + scrollContext.height
|
|
||||||
},
|
|
||||||
direction = module.get.direction(scroll.top),
|
|
||||||
elementScroll = (fits)
|
|
||||||
? 0
|
|
||||||
: module.get.elementScroll(scroll.top),
|
|
||||||
|
|
||||||
// shorthand
|
|
||||||
doesntFit = !fits,
|
|
||||||
elementVisible = (element.height !== 0)
|
|
||||||
;
|
|
||||||
if(elementVisible && !sameHeight) {
|
|
||||||
|
|
||||||
if( module.is.initialPosition() ) {
|
|
||||||
if(scroll.top >= context.bottom) {
|
|
||||||
module.debug('Initial element position is bottom of container');
|
|
||||||
module.bindBottom();
|
|
||||||
}
|
|
||||||
else if(scroll.top > element.top) {
|
|
||||||
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
|
|
||||||
module.debug('Initial element position is bottom of container');
|
|
||||||
module.bindBottom();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Initial element position is fixed');
|
|
||||||
module.fixTop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
else if( module.is.fixed() ) {
|
|
||||||
|
|
||||||
// currently fixed top
|
|
||||||
if( module.is.top() ) {
|
|
||||||
if( scroll.top <= element.top ) {
|
|
||||||
module.debug('Fixed element reached top of container');
|
|
||||||
module.setInitialPosition();
|
|
||||||
}
|
|
||||||
else if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
|
|
||||||
module.debug('Fixed element reached bottom of container');
|
|
||||||
module.bindBottom();
|
|
||||||
}
|
|
||||||
// scroll element if larger than screen
|
|
||||||
else if(doesntFit) {
|
|
||||||
module.set.scroll(elementScroll);
|
|
||||||
module.save.lastScroll(scroll.top);
|
|
||||||
module.save.elementScroll(elementScroll);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// currently fixed bottom
|
|
||||||
else if(module.is.bottom() ) {
|
|
||||||
|
|
||||||
// top edge
|
|
||||||
if( (scroll.bottom - element.height) <= element.top) {
|
|
||||||
module.debug('Bottom fixed rail has reached top of container');
|
|
||||||
module.setInitialPosition();
|
|
||||||
}
|
|
||||||
// bottom edge
|
|
||||||
else if(scroll.bottom >= context.bottom) {
|
|
||||||
module.debug('Bottom fixed rail has reached bottom of container');
|
|
||||||
module.bindBottom();
|
|
||||||
}
|
|
||||||
// scroll element if larger than screen
|
|
||||||
else if(doesntFit) {
|
|
||||||
module.set.scroll(elementScroll);
|
|
||||||
module.save.lastScroll(scroll.top);
|
|
||||||
module.save.elementScroll(elementScroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if( module.is.bottom() ) {
|
|
||||||
if( scroll.top <= element.top ) {
|
|
||||||
module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
|
|
||||||
module.setInitialPosition();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if(settings.pushing) {
|
|
||||||
if(module.is.bound() && scroll.bottom <= context.bottom ) {
|
|
||||||
module.debug('Fixing bottom attached element to bottom of browser.');
|
|
||||||
module.fixBottom();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if(module.is.bound() && (scroll.top <= context.bottom - element.height) ) {
|
|
||||||
module.debug('Fixing bottom attached element to top of browser.');
|
|
||||||
module.fixTop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
bindTop: function() {
|
|
||||||
module.debug('Binding element to top of parent container');
|
|
||||||
module.remove.offset();
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
left : '',
|
|
||||||
top : '',
|
|
||||||
marginBottom : ''
|
|
||||||
})
|
|
||||||
.removeClass(className.fixed)
|
|
||||||
.removeClass(className.bottom)
|
|
||||||
.addClass(className.bound)
|
|
||||||
.addClass(className.top)
|
|
||||||
;
|
|
||||||
settings.onTop.call(element);
|
|
||||||
settings.onUnstick.call(element);
|
|
||||||
},
|
|
||||||
bindBottom: function() {
|
|
||||||
module.debug('Binding element to bottom of parent container');
|
|
||||||
module.remove.offset();
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
left : '',
|
|
||||||
top : ''
|
|
||||||
})
|
|
||||||
.removeClass(className.fixed)
|
|
||||||
.removeClass(className.top)
|
|
||||||
.addClass(className.bound)
|
|
||||||
.addClass(className.bottom)
|
|
||||||
;
|
|
||||||
settings.onBottom.call(element);
|
|
||||||
settings.onUnstick.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
setInitialPosition: function() {
|
|
||||||
module.debug('Returning to initial position');
|
|
||||||
module.unfix();
|
|
||||||
module.unbind();
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
fixTop: function() {
|
|
||||||
module.debug('Fixing element to top of page');
|
|
||||||
if(settings.setSize) {
|
|
||||||
module.set.size();
|
|
||||||
}
|
|
||||||
module.set.minimumSize();
|
|
||||||
module.set.offset();
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
left : module.cache.element.left,
|
|
||||||
bottom : '',
|
|
||||||
marginBottom : ''
|
|
||||||
})
|
|
||||||
.removeClass(className.bound)
|
|
||||||
.removeClass(className.bottom)
|
|
||||||
.addClass(className.fixed)
|
|
||||||
.addClass(className.top)
|
|
||||||
;
|
|
||||||
settings.onStick.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
fixBottom: function() {
|
|
||||||
module.debug('Sticking element to bottom of page');
|
|
||||||
if(settings.setSize) {
|
|
||||||
module.set.size();
|
|
||||||
}
|
|
||||||
module.set.minimumSize();
|
|
||||||
module.set.offset();
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
left : module.cache.element.left,
|
|
||||||
bottom : '',
|
|
||||||
marginBottom : ''
|
|
||||||
})
|
|
||||||
.removeClass(className.bound)
|
|
||||||
.removeClass(className.top)
|
|
||||||
.addClass(className.fixed)
|
|
||||||
.addClass(className.bottom)
|
|
||||||
;
|
|
||||||
settings.onStick.call(element);
|
|
||||||
},
|
|
||||||
|
|
||||||
unbind: function() {
|
|
||||||
if( module.is.bound() ) {
|
|
||||||
module.debug('Removing container bound position on element');
|
|
||||||
module.remove.offset();
|
|
||||||
$module
|
|
||||||
.removeClass(className.bound)
|
|
||||||
.removeClass(className.top)
|
|
||||||
.removeClass(className.bottom)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
unfix: function() {
|
|
||||||
if( module.is.fixed() ) {
|
|
||||||
module.debug('Removing fixed position on element');
|
|
||||||
module.remove.minimumSize();
|
|
||||||
module.remove.offset();
|
|
||||||
$module
|
|
||||||
.removeClass(className.fixed)
|
|
||||||
.removeClass(className.top)
|
|
||||||
.removeClass(className.bottom)
|
|
||||||
;
|
|
||||||
settings.onUnstick.call(element);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: function() {
|
|
||||||
module.debug('Resetting elements position');
|
|
||||||
module.unbind();
|
|
||||||
module.unfix();
|
|
||||||
module.resetCSS();
|
|
||||||
module.remove.offset();
|
|
||||||
module.remove.lastScroll();
|
|
||||||
},
|
|
||||||
|
|
||||||
resetCSS: function() {
|
|
||||||
$module
|
|
||||||
.css({
|
|
||||||
width : '',
|
|
||||||
height : ''
|
|
||||||
})
|
|
||||||
;
|
|
||||||
$container
|
|
||||||
.css({
|
|
||||||
height: ''
|
|
||||||
})
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
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.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, 0);
|
|
||||||
},
|
|
||||||
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 {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if ( $.isFunction( found ) ) {
|
|
||||||
response = found.apply(context, passedArguments);
|
|
||||||
}
|
|
||||||
else if(found !== undefined) {
|
|
||||||
response = found;
|
|
||||||
}
|
|
||||||
if($.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.sticky.settings = {
|
|
||||||
|
|
||||||
name : 'Sticky',
|
|
||||||
namespace : 'sticky',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : true,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
// whether to stick in the opposite direction on scroll up
|
|
||||||
pushing : false,
|
|
||||||
|
|
||||||
context : false,
|
|
||||||
container : false,
|
|
||||||
|
|
||||||
// Context to watch scroll events
|
|
||||||
scrollContext : window,
|
|
||||||
|
|
||||||
// Offset to adjust scroll
|
|
||||||
offset : 0,
|
|
||||||
|
|
||||||
// Offset to adjust scroll when attached to bottom of screen
|
|
||||||
bottomOffset : 0,
|
|
||||||
|
|
||||||
// will only set container height if difference between context and container is larger than this number
|
|
||||||
jitter : 5,
|
|
||||||
|
|
||||||
// set width of sticky element when it is fixed to page (used to make sure 100% width is maintained if no fixed size set)
|
|
||||||
setSize : true,
|
|
||||||
|
|
||||||
// Whether to automatically observe changes with Mutation Observers
|
|
||||||
observeChanges : false,
|
|
||||||
|
|
||||||
// Called when position is recalculated
|
|
||||||
onReposition : function(){},
|
|
||||||
|
|
||||||
// Called on each scroll
|
|
||||||
onScroll : function(){},
|
|
||||||
|
|
||||||
// Called when element is stuck to viewport
|
|
||||||
onStick : function(){},
|
|
||||||
|
|
||||||
// Called when element is unstuck from viewport
|
|
||||||
onUnstick : function(){},
|
|
||||||
|
|
||||||
// Called when element reaches top of context
|
|
||||||
onTop : function(){},
|
|
||||||
|
|
||||||
// Called when element reaches bottom of context
|
|
||||||
onBottom : function(){},
|
|
||||||
|
|
||||||
error : {
|
|
||||||
container : 'Sticky element must be inside a relative container',
|
|
||||||
visible : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
|
|
||||||
method : 'The method you called is not defined.',
|
|
||||||
invalidContext : 'Context specified does not exist',
|
|
||||||
elementSize : 'Sticky element is larger than its container, cannot create sticky.'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
bound : 'bound',
|
|
||||||
fixed : 'fixed',
|
|
||||||
supported : 'native',
|
|
||||||
top : 'top',
|
|
||||||
bottom : 'bottom'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Sticky
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0px;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
.ui.sticky.bound.bottom,
|
|
||||||
.ui.sticky.fixed.bottom {
|
|
||||||
top: auto;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.native.sticky {
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: -moz-sticky;
|
|
||||||
position: -ms-sticky;
|
|
||||||
position: -o-sticky;
|
|
||||||
position: sticky;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,952 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Tab
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($, window, document, undefined) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window = (typeof window != 'undefined' && window.Math == Math)
|
|
||||||
? window
|
|
||||||
: (typeof self != 'undefined' && self.Math == Math)
|
|
||||||
? self
|
|
||||||
: Function('return this')()
|
|
||||||
;
|
|
||||||
|
|
||||||
$.fn.tab = function(parameters) {
|
|
||||||
|
|
||||||
var
|
|
||||||
// use window context if none specified
|
|
||||||
$allModules = $.isFunction(this)
|
|
||||||
? $(window)
|
|
||||||
: $(this),
|
|
||||||
|
|
||||||
moduleSelector = $allModules.selector || '',
|
|
||||||
time = new Date().getTime(),
|
|
||||||
performance = [],
|
|
||||||
|
|
||||||
query = arguments[0],
|
|
||||||
methodInvoked = (typeof query == 'string'),
|
|
||||||
queryArguments = [].slice.call(arguments, 1),
|
|
||||||
|
|
||||||
initializedHistory = false,
|
|
||||||
returnedValue
|
|
||||||
;
|
|
||||||
|
|
||||||
$allModules
|
|
||||||
.each(function() {
|
|
||||||
var
|
|
||||||
|
|
||||||
settings = ( $.isPlainObject(parameters) )
|
|
||||||
? $.extend(true, {}, $.fn.tab.settings, parameters)
|
|
||||||
: $.extend({}, $.fn.tab.settings),
|
|
||||||
|
|
||||||
className = settings.className,
|
|
||||||
metadata = settings.metadata,
|
|
||||||
selector = settings.selector,
|
|
||||||
error = settings.error,
|
|
||||||
|
|
||||||
eventNamespace = '.' + settings.namespace,
|
|
||||||
moduleNamespace = 'module-' + settings.namespace,
|
|
||||||
|
|
||||||
$module = $(this),
|
|
||||||
$context,
|
|
||||||
$tabs,
|
|
||||||
|
|
||||||
cache = {},
|
|
||||||
firstLoad = true,
|
|
||||||
recursionDepth = 0,
|
|
||||||
element = this,
|
|
||||||
instance = $module.data(moduleNamespace),
|
|
||||||
|
|
||||||
activeTabPath,
|
|
||||||
parameterArray,
|
|
||||||
module,
|
|
||||||
|
|
||||||
historyEvent
|
|
||||||
|
|
||||||
;
|
|
||||||
|
|
||||||
module = {
|
|
||||||
|
|
||||||
initialize: function() {
|
|
||||||
module.debug('Initializing tab menu item', $module);
|
|
||||||
module.fix.callbacks();
|
|
||||||
module.determineTabs();
|
|
||||||
|
|
||||||
module.debug('Determining tabs', settings.context, $tabs);
|
|
||||||
// set up automatic routing
|
|
||||||
if(settings.auto) {
|
|
||||||
module.set.auto();
|
|
||||||
}
|
|
||||||
module.bind.events();
|
|
||||||
|
|
||||||
if(settings.history && !initializedHistory) {
|
|
||||||
module.initializeHistory();
|
|
||||||
initializedHistory = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.instantiate();
|
|
||||||
},
|
|
||||||
|
|
||||||
instantiate: function () {
|
|
||||||
module.verbose('Storing instance of module', module);
|
|
||||||
instance = module;
|
|
||||||
$module
|
|
||||||
.data(moduleNamespace, module)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
|
||||||
module.debug('Destroying tabs', $module);
|
|
||||||
$module
|
|
||||||
.removeData(moduleNamespace)
|
|
||||||
.off(eventNamespace)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
|
|
||||||
bind: {
|
|
||||||
events: function() {
|
|
||||||
// if using $.tab don't add events
|
|
||||||
if( !$.isWindow( element ) ) {
|
|
||||||
module.debug('Attaching tab activation events to element', $module);
|
|
||||||
$module
|
|
||||||
.on('click' + eventNamespace, module.event.click)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
determineTabs: function() {
|
|
||||||
var
|
|
||||||
$reference
|
|
||||||
;
|
|
||||||
|
|
||||||
// determine tab context
|
|
||||||
if(settings.context === 'parent') {
|
|
||||||
if($module.closest(selector.ui).length > 0) {
|
|
||||||
$reference = $module.closest(selector.ui);
|
|
||||||
module.verbose('Using closest UI element as parent', $reference);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$reference = $module;
|
|
||||||
}
|
|
||||||
$context = $reference.parent();
|
|
||||||
module.verbose('Determined parent element for creating context', $context);
|
|
||||||
}
|
|
||||||
else if(settings.context) {
|
|
||||||
$context = $(settings.context);
|
|
||||||
module.verbose('Using selector for tab context', settings.context, $context);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$context = $('body');
|
|
||||||
}
|
|
||||||
// find tabs
|
|
||||||
if(settings.childrenOnly) {
|
|
||||||
$tabs = $context.children(selector.tabs);
|
|
||||||
module.debug('Searching tab context children for tabs', $context, $tabs);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$tabs = $context.find(selector.tabs);
|
|
||||||
module.debug('Searching tab context for tabs', $context, $tabs);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
fix: {
|
|
||||||
callbacks: function() {
|
|
||||||
if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) {
|
|
||||||
if(parameters.onTabLoad) {
|
|
||||||
parameters.onLoad = parameters.onTabLoad;
|
|
||||||
delete parameters.onTabLoad;
|
|
||||||
module.error(error.legacyLoad, parameters.onLoad);
|
|
||||||
}
|
|
||||||
if(parameters.onTabInit) {
|
|
||||||
parameters.onFirstLoad = parameters.onTabInit;
|
|
||||||
delete parameters.onTabInit;
|
|
||||||
module.error(error.legacyInit, parameters.onFirstLoad);
|
|
||||||
}
|
|
||||||
settings = $.extend(true, {}, $.fn.tab.settings, parameters);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
initializeHistory: function() {
|
|
||||||
module.debug('Initializing page state');
|
|
||||||
if( $.address === undefined ) {
|
|
||||||
module.error(error.state);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if(settings.historyType == 'state') {
|
|
||||||
module.debug('Using HTML5 to manage state');
|
|
||||||
if(settings.path !== false) {
|
|
||||||
$.address
|
|
||||||
.history(true)
|
|
||||||
.state(settings.path)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.error(error.path);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$.address
|
|
||||||
.bind('change', module.event.history.change)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
event: {
|
|
||||||
click: function(event) {
|
|
||||||
var
|
|
||||||
tabPath = $(this).data(metadata.tab)
|
|
||||||
;
|
|
||||||
if(tabPath !== undefined) {
|
|
||||||
if(settings.history) {
|
|
||||||
module.verbose('Updating page state', event);
|
|
||||||
$.address.value(tabPath);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.verbose('Changing tab', event);
|
|
||||||
module.changeTab(tabPath);
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('No tab specified');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
history: {
|
|
||||||
change: function(event) {
|
|
||||||
var
|
|
||||||
tabPath = event.pathNames.join('/') || module.get.initialPath(),
|
|
||||||
pageTitle = settings.templates.determineTitle(tabPath) || false
|
|
||||||
;
|
|
||||||
module.performance.display();
|
|
||||||
module.debug('History change event', tabPath, event);
|
|
||||||
historyEvent = event;
|
|
||||||
if(tabPath !== undefined) {
|
|
||||||
module.changeTab(tabPath);
|
|
||||||
}
|
|
||||||
if(pageTitle) {
|
|
||||||
$.address.title(pageTitle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
if(activeTabPath) {
|
|
||||||
module.debug('Refreshing tab', activeTabPath);
|
|
||||||
module.changeTab(activeTabPath);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
cache: {
|
|
||||||
|
|
||||||
read: function(cacheKey) {
|
|
||||||
return (cacheKey !== undefined)
|
|
||||||
? cache[cacheKey]
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
},
|
|
||||||
add: function(cacheKey, content) {
|
|
||||||
cacheKey = cacheKey || activeTabPath;
|
|
||||||
module.debug('Adding cached content for', cacheKey);
|
|
||||||
cache[cacheKey] = content;
|
|
||||||
},
|
|
||||||
remove: function(cacheKey) {
|
|
||||||
cacheKey = cacheKey || activeTabPath;
|
|
||||||
module.debug('Removing cached content for', cacheKey);
|
|
||||||
delete cache[cacheKey];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
set: {
|
|
||||||
auto: function() {
|
|
||||||
var
|
|
||||||
url = (typeof settings.path == 'string')
|
|
||||||
? settings.path.replace(/\/$/, '') + '/{$tab}'
|
|
||||||
: '/{$tab}'
|
|
||||||
;
|
|
||||||
module.verbose('Setting up automatic tab retrieval from server', url);
|
|
||||||
if($.isPlainObject(settings.apiSettings)) {
|
|
||||||
settings.apiSettings.url = url;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
settings.apiSettings = {
|
|
||||||
url: url
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
loading: function(tabPath) {
|
|
||||||
var
|
|
||||||
$tab = module.get.tabElement(tabPath),
|
|
||||||
isLoading = $tab.hasClass(className.loading)
|
|
||||||
;
|
|
||||||
if(!isLoading) {
|
|
||||||
module.verbose('Setting loading state for', $tab);
|
|
||||||
$tab
|
|
||||||
.addClass(className.loading)
|
|
||||||
.siblings($tabs)
|
|
||||||
.removeClass(className.active + ' ' + className.loading)
|
|
||||||
;
|
|
||||||
if($tab.length > 0) {
|
|
||||||
settings.onRequest.call($tab[0], tabPath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
state: function(state) {
|
|
||||||
$.address.value(state);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
changeTab: function(tabPath) {
|
|
||||||
var
|
|
||||||
pushStateAvailable = (window.history && window.history.pushState),
|
|
||||||
shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad),
|
|
||||||
remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ),
|
|
||||||
// only add default path if not remote content
|
|
||||||
pathArray = (remoteContent && !shouldIgnoreLoad)
|
|
||||||
? module.utilities.pathToArray(tabPath)
|
|
||||||
: module.get.defaultPathArray(tabPath)
|
|
||||||
;
|
|
||||||
tabPath = module.utilities.arrayToPath(pathArray);
|
|
||||||
$.each(pathArray, function(index, tab) {
|
|
||||||
var
|
|
||||||
currentPathArray = pathArray.slice(0, index + 1),
|
|
||||||
currentPath = module.utilities.arrayToPath(currentPathArray),
|
|
||||||
|
|
||||||
isTab = module.is.tab(currentPath),
|
|
||||||
isLastIndex = (index + 1 == pathArray.length),
|
|
||||||
|
|
||||||
$tab = module.get.tabElement(currentPath),
|
|
||||||
$anchor,
|
|
||||||
nextPathArray,
|
|
||||||
nextPath,
|
|
||||||
isLastTab
|
|
||||||
;
|
|
||||||
module.verbose('Looking for tab', tab);
|
|
||||||
if(isTab) {
|
|
||||||
module.verbose('Tab was found', tab);
|
|
||||||
// scope up
|
|
||||||
activeTabPath = currentPath;
|
|
||||||
parameterArray = module.utilities.filterArray(pathArray, currentPathArray);
|
|
||||||
|
|
||||||
if(isLastIndex) {
|
|
||||||
isLastTab = true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
nextPathArray = pathArray.slice(0, index + 2);
|
|
||||||
nextPath = module.utilities.arrayToPath(nextPathArray);
|
|
||||||
isLastTab = ( !module.is.tab(nextPath) );
|
|
||||||
if(isLastTab) {
|
|
||||||
module.verbose('Tab parameters found', nextPathArray);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(isLastTab && remoteContent) {
|
|
||||||
if(!shouldIgnoreLoad) {
|
|
||||||
module.activate.navigation(currentPath);
|
|
||||||
module.fetch.content(currentPath, tabPath);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Ignoring remote content on first tab load', currentPath);
|
|
||||||
firstLoad = false;
|
|
||||||
module.cache.add(tabPath, $tab.html());
|
|
||||||
module.activate.all(currentPath);
|
|
||||||
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Opened local tab', currentPath);
|
|
||||||
module.activate.all(currentPath);
|
|
||||||
if( !module.cache.read(currentPath) ) {
|
|
||||||
module.cache.add(currentPath, true);
|
|
||||||
module.debug('First time tab loaded calling tab init');
|
|
||||||
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
}
|
|
||||||
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
else if(tabPath.search('/') == -1 && tabPath !== '') {
|
|
||||||
// look for in page anchor
|
|
||||||
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]');
|
|
||||||
currentPath = $anchor.closest('[data-tab]').data(metadata.tab);
|
|
||||||
$tab = module.get.tabElement(currentPath);
|
|
||||||
// if anchor exists use parent tab
|
|
||||||
if($anchor && $anchor.length > 0 && currentPath) {
|
|
||||||
module.debug('Anchor link used, opening parent tab', $tab, $anchor);
|
|
||||||
if( !$tab.hasClass(className.active) ) {
|
|
||||||
setTimeout(function() {
|
|
||||||
module.scrollTo($anchor);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
module.activate.all(currentPath);
|
|
||||||
if( !module.cache.read(currentPath) ) {
|
|
||||||
module.cache.add(currentPath, true);
|
|
||||||
module.debug('First time tab loaded calling tab init');
|
|
||||||
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
}
|
|
||||||
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.error(error.missingTab, $module, $context, currentPath);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
scrollTo: function($element) {
|
|
||||||
var
|
|
||||||
scrollOffset = ($element && $element.length > 0)
|
|
||||||
? $element.offset().top
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
if(scrollOffset !== false) {
|
|
||||||
module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element);
|
|
||||||
$(document).scrollTop(scrollOffset);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
update: {
|
|
||||||
content: function(tabPath, html, evaluateScripts) {
|
|
||||||
var
|
|
||||||
$tab = module.get.tabElement(tabPath),
|
|
||||||
tab = $tab[0]
|
|
||||||
;
|
|
||||||
evaluateScripts = (evaluateScripts !== undefined)
|
|
||||||
? evaluateScripts
|
|
||||||
: settings.evaluateScripts
|
|
||||||
;
|
|
||||||
if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && typeof html !== 'string') {
|
|
||||||
$tab
|
|
||||||
.empty()
|
|
||||||
.append($(html).clone(true))
|
|
||||||
;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if(evaluateScripts) {
|
|
||||||
module.debug('Updating HTML and evaluating inline scripts', tabPath, html);
|
|
||||||
$tab.html(html);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Updating HTML', tabPath, html);
|
|
||||||
tab.innerHTML = html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
fetch: {
|
|
||||||
|
|
||||||
content: function(tabPath, fullTabPath) {
|
|
||||||
var
|
|
||||||
$tab = module.get.tabElement(tabPath),
|
|
||||||
apiSettings = {
|
|
||||||
dataType : 'html',
|
|
||||||
encodeParameters : false,
|
|
||||||
on : 'now',
|
|
||||||
cache : settings.alwaysRefresh,
|
|
||||||
headers : {
|
|
||||||
'X-Remote': true
|
|
||||||
},
|
|
||||||
onSuccess : function(response) {
|
|
||||||
if(settings.cacheType == 'response') {
|
|
||||||
module.cache.add(fullTabPath, response);
|
|
||||||
}
|
|
||||||
module.update.content(tabPath, response);
|
|
||||||
if(tabPath == activeTabPath) {
|
|
||||||
module.debug('Content loaded', tabPath);
|
|
||||||
module.activate.tab(tabPath);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('Content loaded in background', tabPath);
|
|
||||||
}
|
|
||||||
settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent);
|
|
||||||
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
|
|
||||||
|
|
||||||
if(settings.loadOnce) {
|
|
||||||
module.cache.add(fullTabPath, true);
|
|
||||||
}
|
|
||||||
else if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && $tab.children().length > 0) {
|
|
||||||
setTimeout(function() {
|
|
||||||
var
|
|
||||||
$clone = $tab.children().clone(true)
|
|
||||||
;
|
|
||||||
$clone = $clone.not('script');
|
|
||||||
module.cache.add(fullTabPath, $clone);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.cache.add(fullTabPath, $tab.html());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
urlData: {
|
|
||||||
tab: fullTabPath
|
|
||||||
}
|
|
||||||
},
|
|
||||||
request = $tab.api('get request') || false,
|
|
||||||
existingRequest = ( request && request.state() === 'pending' ),
|
|
||||||
requestSettings,
|
|
||||||
cachedContent
|
|
||||||
;
|
|
||||||
|
|
||||||
fullTabPath = fullTabPath || tabPath;
|
|
||||||
cachedContent = module.cache.read(fullTabPath);
|
|
||||||
|
|
||||||
|
|
||||||
if(settings.cache && cachedContent) {
|
|
||||||
module.activate.tab(tabPath);
|
|
||||||
module.debug('Adding cached content', fullTabPath);
|
|
||||||
if(!settings.loadOnce) {
|
|
||||||
if(settings.evaluateScripts == 'once') {
|
|
||||||
module.update.content(tabPath, cachedContent, false);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.update.content(tabPath, cachedContent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
|
|
||||||
}
|
|
||||||
else if(existingRequest) {
|
|
||||||
module.set.loading(tabPath);
|
|
||||||
module.debug('Content is already loading', fullTabPath);
|
|
||||||
}
|
|
||||||
else if($.api !== undefined) {
|
|
||||||
requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings);
|
|
||||||
module.debug('Retrieving remote content', fullTabPath, requestSettings);
|
|
||||||
module.set.loading(tabPath);
|
|
||||||
$tab.api(requestSettings);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.error(error.api);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
activate: {
|
|
||||||
all: function(tabPath) {
|
|
||||||
module.activate.tab(tabPath);
|
|
||||||
module.activate.navigation(tabPath);
|
|
||||||
},
|
|
||||||
tab: function(tabPath) {
|
|
||||||
var
|
|
||||||
$tab = module.get.tabElement(tabPath),
|
|
||||||
$deactiveTabs = (settings.deactivate == 'siblings')
|
|
||||||
? $tab.siblings($tabs)
|
|
||||||
: $tabs.not($tab),
|
|
||||||
isActive = $tab.hasClass(className.active)
|
|
||||||
;
|
|
||||||
module.verbose('Showing tab content for', $tab);
|
|
||||||
if(!isActive) {
|
|
||||||
$tab
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
$deactiveTabs
|
|
||||||
.removeClass(className.active + ' ' + className.loading)
|
|
||||||
;
|
|
||||||
if($tab.length > 0) {
|
|
||||||
settings.onVisible.call($tab[0], tabPath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
navigation: function(tabPath) {
|
|
||||||
var
|
|
||||||
$navigation = module.get.navElement(tabPath),
|
|
||||||
$deactiveNavigation = (settings.deactivate == 'siblings')
|
|
||||||
? $navigation.siblings($allModules)
|
|
||||||
: $allModules.not($navigation),
|
|
||||||
isActive = $navigation.hasClass(className.active)
|
|
||||||
;
|
|
||||||
module.verbose('Activating tab navigation for', $navigation, tabPath);
|
|
||||||
if(!isActive) {
|
|
||||||
$navigation
|
|
||||||
.addClass(className.active)
|
|
||||||
;
|
|
||||||
$deactiveNavigation
|
|
||||||
.removeClass(className.active + ' ' + className.loading)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
deactivate: {
|
|
||||||
all: function() {
|
|
||||||
module.deactivate.navigation();
|
|
||||||
module.deactivate.tabs();
|
|
||||||
},
|
|
||||||
navigation: function() {
|
|
||||||
$allModules
|
|
||||||
.removeClass(className.active)
|
|
||||||
;
|
|
||||||
},
|
|
||||||
tabs: function() {
|
|
||||||
$tabs
|
|
||||||
.removeClass(className.active + ' ' + className.loading)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
is: {
|
|
||||||
tab: function(tabName) {
|
|
||||||
return (tabName !== undefined)
|
|
||||||
? ( module.get.tabElement(tabName).length > 0 )
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get: {
|
|
||||||
initialPath: function() {
|
|
||||||
return $allModules.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab);
|
|
||||||
},
|
|
||||||
path: function() {
|
|
||||||
return $.address.value();
|
|
||||||
},
|
|
||||||
// adds default tabs to tab path
|
|
||||||
defaultPathArray: function(tabPath) {
|
|
||||||
return module.utilities.pathToArray( module.get.defaultPath(tabPath) );
|
|
||||||
},
|
|
||||||
defaultPath: function(tabPath) {
|
|
||||||
var
|
|
||||||
$defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0),
|
|
||||||
defaultTab = $defaultNav.data(metadata.tab) || false
|
|
||||||
;
|
|
||||||
if( defaultTab ) {
|
|
||||||
module.debug('Found default tab', defaultTab);
|
|
||||||
if(recursionDepth < settings.maxDepth) {
|
|
||||||
recursionDepth++;
|
|
||||||
return module.get.defaultPath(defaultTab);
|
|
||||||
}
|
|
||||||
module.error(error.recursion);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
module.debug('No default tabs found for', tabPath, $tabs);
|
|
||||||
}
|
|
||||||
recursionDepth = 0;
|
|
||||||
return tabPath;
|
|
||||||
},
|
|
||||||
navElement: function(tabPath) {
|
|
||||||
tabPath = tabPath || activeTabPath;
|
|
||||||
return $allModules.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
|
||||||
},
|
|
||||||
tabElement: function(tabPath) {
|
|
||||||
var
|
|
||||||
$fullPathTab,
|
|
||||||
$simplePathTab,
|
|
||||||
tabPathArray,
|
|
||||||
lastTab
|
|
||||||
;
|
|
||||||
tabPath = tabPath || activeTabPath;
|
|
||||||
tabPathArray = module.utilities.pathToArray(tabPath);
|
|
||||||
lastTab = module.utilities.last(tabPathArray);
|
|
||||||
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
|
||||||
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
|
|
||||||
return ($fullPathTab.length > 0)
|
|
||||||
? $fullPathTab
|
|
||||||
: $simplePathTab
|
|
||||||
;
|
|
||||||
},
|
|
||||||
tab: function() {
|
|
||||||
return activeTabPath;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
utilities: {
|
|
||||||
filterArray: function(keepArray, removeArray) {
|
|
||||||
return $.grep(keepArray, function(keepValue) {
|
|
||||||
return ( $.inArray(keepValue, removeArray) == -1);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
last: function(array) {
|
|
||||||
return $.isArray(array)
|
|
||||||
? array[ array.length - 1]
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
},
|
|
||||||
pathToArray: function(pathName) {
|
|
||||||
if(pathName === undefined) {
|
|
||||||
pathName = activeTabPath;
|
|
||||||
}
|
|
||||||
return typeof pathName == 'string'
|
|
||||||
? pathName.split('/')
|
|
||||||
: [pathName]
|
|
||||||
;
|
|
||||||
},
|
|
||||||
arrayToPath: function(pathArray) {
|
|
||||||
return $.isArray(pathArray)
|
|
||||||
? pathArray.join('/')
|
|
||||||
: false
|
|
||||||
;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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($.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
|
|
||||||
;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// shortcut for tabbed content with no defined navigation
|
|
||||||
$.tab = function() {
|
|
||||||
$(window).tab.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.tab.settings = {
|
|
||||||
|
|
||||||
name : 'Tab',
|
|
||||||
namespace : 'tab',
|
|
||||||
|
|
||||||
silent : false,
|
|
||||||
debug : false,
|
|
||||||
verbose : false,
|
|
||||||
performance : true,
|
|
||||||
|
|
||||||
auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
|
|
||||||
history : false, // use browser history
|
|
||||||
historyType : 'hash', // #/ or html5 state
|
|
||||||
path : false, // base path of url
|
|
||||||
|
|
||||||
context : false, // specify a context that tabs must appear inside
|
|
||||||
childrenOnly : false, // use only tabs that are children of context
|
|
||||||
maxDepth : 25, // max depth a tab can be nested
|
|
||||||
|
|
||||||
deactivate : 'siblings', // whether tabs should deactivate sibling menu elements or all elements initialized together
|
|
||||||
|
|
||||||
alwaysRefresh : false, // load tab content new every tab click
|
|
||||||
cache : true, // cache the content requests to pull locally
|
|
||||||
loadOnce : false, // Whether tab data should only be loaded once when using remote content
|
|
||||||
cacheType : 'response', // Whether to cache exact response, or to html cache contents after scripts execute
|
|
||||||
ignoreFirstLoad : false, // don't load remote content on first load
|
|
||||||
|
|
||||||
apiSettings : false, // settings for api call
|
|
||||||
evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content
|
|
||||||
|
|
||||||
onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
|
|
||||||
onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
|
|
||||||
onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
|
|
||||||
onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
|
|
||||||
|
|
||||||
templates : {
|
|
||||||
determineTitle: function(tabArray) {} // returns page title for path
|
|
||||||
},
|
|
||||||
|
|
||||||
error: {
|
|
||||||
api : 'You attempted to load content without API module',
|
|
||||||
method : 'The method you called is not defined',
|
|
||||||
missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
|
|
||||||
noContent : 'The tab you specified is missing a content url.',
|
|
||||||
path : 'History enabled, but no path was specified',
|
|
||||||
recursion : 'Max recursive depth reached',
|
|
||||||
legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
|
|
||||||
legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
|
|
||||||
state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
|
|
||||||
},
|
|
||||||
|
|
||||||
metadata : {
|
|
||||||
tab : 'tab',
|
|
||||||
loaded : 'loaded',
|
|
||||||
promise: 'promise'
|
|
||||||
},
|
|
||||||
|
|
||||||
className : {
|
|
||||||
loading : 'loading',
|
|
||||||
active : 'active'
|
|
||||||
},
|
|
||||||
|
|
||||||
selector : {
|
|
||||||
tabs : '.ui.tab',
|
|
||||||
ui : '.ui'
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery, window, document );
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Tab
|
|
||||||
* http://github.com/semantic-org/semantic-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
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: button-spin @loaderSpeed linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
border-radius: @circularRadius;
|
|
||||||
|
|
||||||
border-color: @loaderLineColor transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: @loaderLineWidth;
|
|
||||||
|
|
||||||
box-shadow: 0px 0px 0px 1px transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,78 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Transition
|
|
||||||
* http://github.com/semantic-org/semantic-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Disabled */
|
|
||||||
.disabled.transition {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.looping.transition {
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,268 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Ad
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.ad:last-child {
|
|
||||||
margin: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.ad iframe {
|
|
||||||
margin: 0em;
|
|
||||||
padding: 0em;
|
|
||||||
border: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Common
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Leaderboard */
|
|
||||||
.ui.leaderboard.ad {
|
|
||||||
width: 728px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Square
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Square */
|
|
||||||
.ui.square.ad {
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small Square */
|
|
||||||
.ui[class*="small square"].ad {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Rectangle
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Small Rectangle */
|
|
||||||
.ui[class*="small rectangle"].ad {
|
|
||||||
width: 180px;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vertical Rectangle */
|
|
||||||
.ui[class*="vertical rectangle"].ad {
|
|
||||||
width: 240px;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Button
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.button.ad {
|
|
||||||
width: 120px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
.ui[class*="square button"].ad {
|
|
||||||
width: 125px;
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
.ui[class*="small button"].ad {
|
|
||||||
width: 120px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Skyscrapers
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Skyscraper */
|
|
||||||
.ui.skyscraper.ad {
|
|
||||||
width: 120px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Wide Skyscraper */
|
|
||||||
.ui[class*="wide skyscraper"].ad {
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Leaderboard */
|
|
||||||
.ui[class*="large leaderboard"].ad {
|
|
||||||
width: 970px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Billboard */
|
|
||||||
.ui.billboard.ad {
|
|
||||||
width: 970px;
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Panorama
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Panorama */
|
|
||||||
.ui.panorama.ad {
|
|
||||||
width: 980px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Netboard
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Netboard */
|
|
||||||
.ui.netboard.ad {
|
|
||||||
width: 580px;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Mobile
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Large Mobile Banner */
|
|
||||||
.ui[class*="large mobile banner"].ad {
|
|
||||||
width: 320px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.centered.ad {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.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,269 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Comment
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em;
|
|
||||||
}
|
|
||||||
.ui.comments:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.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: 0em 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: 0em @metadataContentSpacing 0em 0em;
|
|
||||||
}
|
|
||||||
.ui.comments .comment .metadata > :last-child {
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
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: 0em @actionContentDistance 0em 0em;
|
|
||||||
color: @actionLinkColor;
|
|
||||||
}
|
|
||||||
.ui.comments .comment .actions a:last-child {
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
.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
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
Threaded
|
|
||||||
---------------------*/
|
|
||||||
|
|
||||||
.ui.threaded.comments .comment .comments {
|
|
||||||
margin: @threadedCommentMargin;
|
|
||||||
padding: @threadedCommentPadding;
|
|
||||||
box-shadow: @threadedCommentBoxShadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------
|
|
||||||
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.mini.comments {
|
|
||||||
font-size: @mini;
|
|
||||||
}
|
|
||||||
.ui.tiny.comments {
|
|
||||||
font-size: @tiny;
|
|
||||||
}
|
|
||||||
.ui.small.comments {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.comments {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.comments {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
.ui.big.comments {
|
|
||||||
font-size: @big;
|
|
||||||
}
|
|
||||||
.ui.huge.comments {
|
|
||||||
font-size: @huge;
|
|
||||||
}
|
|
||||||
.ui.massive.comments {
|
|
||||||
font-size: @massive;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,278 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Feed
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em;
|
|
||||||
}
|
|
||||||
.ui.feed:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
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: 0px;
|
|
||||||
padding-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.feed > .event:last-child {
|
|
||||||
padding-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
color: @dateColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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: 0em;
|
|
||||||
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: 0em;
|
|
||||||
}
|
|
||||||
.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.small.feed {
|
|
||||||
font-size: @small;
|
|
||||||
}
|
|
||||||
.ui.feed {
|
|
||||||
font-size: @medium;
|
|
||||||
}
|
|
||||||
.ui.large.feed {
|
|
||||||
font-size: @large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,474 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Item
|
|
||||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@type : 'view';
|
|
||||||
@element : 'item';
|
|
||||||
|
|
||||||
@import (multiple) '../../theme.config';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Standard
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Item
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item {
|
|
||||||
display: @display;
|
|
||||||
margin: @itemSpacing 0em;
|
|
||||||
width: @width;
|
|
||||||
min-height: @minHeight;
|
|
||||||
background: @background;
|
|
||||||
padding: @padding;
|
|
||||||
|
|
||||||
border: @border;
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
box-shadow: @boxShadow;
|
|
||||||
transition: @transition;
|
|
||||||
z-index: @zIndex;
|
|
||||||
}
|
|
||||||
.ui.items > .item a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Items
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items {
|
|
||||||
margin: @groupMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items:first-child {
|
|
||||||
margin-top: 0em !important;
|
|
||||||
}
|
|
||||||
.ui.items:last-child {
|
|
||||||
margin-bottom: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Item
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item:after {
|
|
||||||
display: block;
|
|
||||||
content: ' ';
|
|
||||||
height: 0px;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.ui.items > .item:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.items > .item:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Images
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item > .image {
|
|
||||||
position: relative;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: @imageDisplay;
|
|
||||||
float: @imageFloat;
|
|
||||||
margin: @imageMargin;
|
|
||||||
padding: @imagePadding;
|
|
||||||
max-height: @imageMaxHeight;
|
|
||||||
align-self: @imageVerticalAlign;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .image > img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: @imageBorderRadius;
|
|
||||||
border: @imageBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items > .item > .image:only-child > img {
|
|
||||||
border-radius: @borderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item > .content {
|
|
||||||
display: block;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
background: @contentBackground;
|
|
||||||
margin: @contentMargin;
|
|
||||||
padding: @contentPadding;
|
|
||||||
box-shadow: @contentBoxShadow;
|
|
||||||
font-size: @contentFontSize;
|
|
||||||
border: @contentBorder;
|
|
||||||
border-radius: @contentBorderRadius;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content:after {
|
|
||||||
display: block;
|
|
||||||
content: ' ';
|
|
||||||
height: 0px;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items > .item > .image + .content {
|
|
||||||
min-width: 0;
|
|
||||||
width: @contentWidth;
|
|
||||||
display: @contentDisplay;
|
|
||||||
margin-left: @contentOffset;
|
|
||||||
align-self: @contentVerticalAlign;
|
|
||||||
padding-left: @contentImageDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items > .item > .content > .header {
|
|
||||||
display: inline-block;
|
|
||||||
margin: @headerMargin;
|
|
||||||
font-family: @headerFont;
|
|
||||||
font-weight: @headerFontWeight;
|
|
||||||
color: @headerColor;
|
|
||||||
}
|
|
||||||
/* Default Header Size */
|
|
||||||
.ui.items > .item > .content > .header:not(.ui) {
|
|
||||||
font-size: @headerFontSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Floated
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item [class*="left floated"] {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.ui.items > .item [class*="right floated"] {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Content Image
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item .content img {
|
|
||||||
align-self: @contentImageVerticalAlign;
|
|
||||||
width: @contentImageWidth;
|
|
||||||
}
|
|
||||||
.ui.items > .item img.avatar,
|
|
||||||
.ui.items > .item .avatar img {
|
|
||||||
width: @avatarSize;
|
|
||||||
height: @avatarSize;
|
|
||||||
border-radius: @avatarBorderRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Description
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item > .content > .description {
|
|
||||||
margin-top: @descriptionDistance;
|
|
||||||
max-width: @descriptionMaxWidth;
|
|
||||||
font-size: @descriptionFontSize;
|
|
||||||
line-height: @descriptionLineHeight;
|
|
||||||
color: @descriptionColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Paragraph
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item > .content p {
|
|
||||||
margin: 0em 0em @paragraphDistance;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content p:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Meta
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item .meta {
|
|
||||||
margin: @metaMargin;
|
|
||||||
font-size: @metaFontSize;
|
|
||||||
line-height: @metaLineHeight;
|
|
||||||
color: @metaColor;
|
|
||||||
}
|
|
||||||
.ui.items > .item .meta * {
|
|
||||||
margin-right: @metaSpacing;
|
|
||||||
}
|
|
||||||
.ui.items > .item .meta :last-child {
|
|
||||||
margin-right: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items > .item .meta [class*="right floated"] {
|
|
||||||
margin-right: 0em;
|
|
||||||
margin-left: @metaSpacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Links
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Generic */
|
|
||||||
.ui.items > .item > .content a:not(.ui) {
|
|
||||||
color: @contentLinkColor;
|
|
||||||
transition: @contentLinkTransition;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content a:not(.ui):hover {
|
|
||||||
color: @contentLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.ui.items > .item > .content > a.header {
|
|
||||||
color: @headerLinkColor;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content > a.header:hover {
|
|
||||||
color: @headerLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Meta */
|
|
||||||
.ui.items > .item .meta > a:not(.ui) {
|
|
||||||
color: @metaLinkColor;
|
|
||||||
}
|
|
||||||
.ui.items > .item .meta > a:not(.ui):hover {
|
|
||||||
color: @metaLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Labels
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/*-----Star----- */
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.items > .item > .content .favorite.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: @actionOpacity;
|
|
||||||
transition: @actionTransition;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content .favorite.icon:hover {
|
|
||||||
opacity: @actionHoverOpacity;
|
|
||||||
color: @favoriteColor;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content .active.favorite.icon {
|
|
||||||
color: @favoriteActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*-----Like----- */
|
|
||||||
|
|
||||||
/* Icon */
|
|
||||||
.ui.items > .item > .content .like.icon {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: @actionOpacity;
|
|
||||||
transition: @actionTransition;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content .like.icon:hover {
|
|
||||||
opacity: @actionHoverOpacity;
|
|
||||||
color: @likeColor;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .content .active.like.icon {
|
|
||||||
color: @likeActiveColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*----------------
|
|
||||||
Extra Content
|
|
||||||
-----------------*/
|
|
||||||
|
|
||||||
.ui.items > .item .extra {
|
|
||||||
display: @extraDisplay;
|
|
||||||
position: @extraPosition;
|
|
||||||
background: @extraBackground;
|
|
||||||
margin: @extraMargin;
|
|
||||||
width: @extraWidth;
|
|
||||||
padding: @extraPadding;
|
|
||||||
top: @extraTop;
|
|
||||||
left: @extraLeft;
|
|
||||||
color: @extraColor;
|
|
||||||
box-shadow: @extraBoxShadow;
|
|
||||||
transition: @extraTransition;
|
|
||||||
border-top: @extraDivider;
|
|
||||||
}
|
|
||||||
.ui.items > .item .extra > * {
|
|
||||||
margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0em;
|
|
||||||
}
|
|
||||||
.ui.items > .item .extra > [class*="right floated"] {
|
|
||||||
margin: (@extraRowSpacing / 2) 0em (@extraRowSpacing / 2) @extraHorizontalSpacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items > .item .extra:after {
|
|
||||||
display: block;
|
|
||||||
content: ' ';
|
|
||||||
height: 0px;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Responsive
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Default Image Width */
|
|
||||||
.ui.items > .item > .image:not(.ui) {
|
|
||||||
width: @imageWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Tablet Only */
|
|
||||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
|
||||||
.ui.items > .item {
|
|
||||||
margin: @tabletItemSpacing 0em;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .image:not(.ui) {
|
|
||||||
width: @tabletImageWidth;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .image + .content {
|
|
||||||
display: block;
|
|
||||||
padding: 0em 0em 0em @tabletContentImageDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile Only */
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
.ui.items:not(.unstackable) > .item {
|
|
||||||
flex-direction: column;
|
|
||||||
margin: @mobileItemSpacing 0em;
|
|
||||||
}
|
|
||||||
.ui.items:not(.unstackable) > .item > .image {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.ui.items:not(.unstackable) > .item > .image,
|
|
||||||
.ui.items:not(.unstackable) > .item > .image > img {
|
|
||||||
max-width: 100% !important;
|
|
||||||
width: @mobileImageWidth !important;
|
|
||||||
max-height: @mobileImageMaxHeight !important;
|
|
||||||
}
|
|
||||||
.ui.items:not(.unstackable) > .item > .image + .content {
|
|
||||||
display: block;
|
|
||||||
padding: @mobileContentImageDistance 0em 0em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Aligned
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.items > .item > .image + [class*="top aligned"].content {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .image + [class*="middle aligned"].content {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.ui.items > .item > .image + [class*="bottom aligned"].content {
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Relaxed
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.relaxed.items > .item {
|
|
||||||
margin: @relaxedItemSpacing 0em;
|
|
||||||
}
|
|
||||||
.ui[class*="very relaxed"].items > .item {
|
|
||||||
margin: @veryRelaxedItemSpacing 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Divided
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.divided.items > .item {
|
|
||||||
border-top: @dividedBorder;
|
|
||||||
margin: @dividedMargin;
|
|
||||||
padding: @dividedPadding;
|
|
||||||
}
|
|
||||||
.ui.divided.items > .item:first-child {
|
|
||||||
border-top: none;
|
|
||||||
margin-top: @dividedFirstLastMargin !important;
|
|
||||||
padding-top: @dividedFirstLastPadding !important;
|
|
||||||
}
|
|
||||||
.ui.divided.items > .item:last-child {
|
|
||||||
margin-bottom: @dividedFirstLastMargin !important;
|
|
||||||
padding-bottom: @dividedFirstLastPadding !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Relaxed Divided */
|
|
||||||
.ui.relaxed.divided.items > .item {
|
|
||||||
margin: 0em;
|
|
||||||
padding: @relaxedItemSpacing 0em;
|
|
||||||
}
|
|
||||||
.ui[class*="very relaxed"].divided.items > .item {
|
|
||||||
margin: 0em;
|
|
||||||
padding: @veryRelaxedItemSpacing 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------------
|
|
||||||
Link
|
|
||||||
--------------------*/
|
|
||||||
|
|
||||||
.ui.items a.item:hover,
|
|
||||||
.ui.link.items > .item:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.items a.item:hover .content .header,
|
|
||||||
.ui.link.items > .item:hover .content .header {
|
|
||||||
color: @headerLinkHoverColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Size
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.items > .item {
|
|
||||||
font-size: @relativeMedium;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---------------
|
|
||||||
Unstackable
|
|
||||||
----------------*/
|
|
||||||
|
|
||||||
@media only screen and (max-width: @largestMobileScreen) {
|
|
||||||
.ui.unstackable.items > .item > .image,
|
|
||||||
.ui.unstackable.items > .item > .image > img {
|
|
||||||
width: @unstackableMobileImageWidth !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,554 +0,0 @@
|
|||||||
/*!
|
|
||||||
* # Semantic UI - Statistic
|
|
||||||
* http://github.com/semantic-org/semantic-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: 0em 0em 0em @horizontalSpacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.statistic:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
.ui.statistic:last-child {
|
|
||||||
margin-bottom: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
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: 0px;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.statistics:first-child {
|
|
||||||
margin-top: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
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: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Horizontal
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.horizontal.statistic {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.ui.horizontal.statistics {
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 0em;
|
|
||||||
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: 0em !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: 0em 0em 0em @horizontalLabelDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Colors
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.red.statistics .statistic > .value,
|
|
||||||
.ui.statistics .red.statistic > .value,
|
|
||||||
.ui.red.statistic > .value {
|
|
||||||
color: @red;
|
|
||||||
}
|
|
||||||
.ui.orange.statistics .statistic > .value,
|
|
||||||
.ui.statistics .orange.statistic > .value,
|
|
||||||
.ui.orange.statistic > .value {
|
|
||||||
color: @orange;
|
|
||||||
}
|
|
||||||
.ui.yellow.statistics .statistic > .value,
|
|
||||||
.ui.statistics .yellow.statistic > .value,
|
|
||||||
.ui.yellow.statistic > .value {
|
|
||||||
color: @yellow;
|
|
||||||
}
|
|
||||||
.ui.olive.statistics .statistic > .value,
|
|
||||||
.ui.statistics .olive.statistic > .value,
|
|
||||||
.ui.olive.statistic > .value {
|
|
||||||
color: @olive;
|
|
||||||
}
|
|
||||||
.ui.green.statistics .statistic > .value,
|
|
||||||
.ui.statistics .green.statistic > .value,
|
|
||||||
.ui.green.statistic > .value {
|
|
||||||
color: @green;
|
|
||||||
}
|
|
||||||
.ui.teal.statistics .statistic > .value,
|
|
||||||
.ui.statistics .teal.statistic > .value,
|
|
||||||
.ui.teal.statistic > .value {
|
|
||||||
color: @teal;
|
|
||||||
}
|
|
||||||
.ui.blue.statistics .statistic > .value,
|
|
||||||
.ui.statistics .blue.statistic > .value,
|
|
||||||
.ui.blue.statistic > .value {
|
|
||||||
color: @blue;
|
|
||||||
}
|
|
||||||
.ui.violet.statistics .statistic > .value,
|
|
||||||
.ui.statistics .violet.statistic > .value,
|
|
||||||
.ui.violet.statistic > .value {
|
|
||||||
color: @violet;
|
|
||||||
}
|
|
||||||
.ui.purple.statistics .statistic > .value,
|
|
||||||
.ui.statistics .purple.statistic > .value,
|
|
||||||
.ui.purple.statistic > .value {
|
|
||||||
color: @purple;
|
|
||||||
}
|
|
||||||
.ui.pink.statistics .statistic > .value,
|
|
||||||
.ui.statistics .pink.statistic > .value,
|
|
||||||
.ui.pink.statistic > .value {
|
|
||||||
color: @pink;
|
|
||||||
}
|
|
||||||
.ui.brown.statistics .statistic > .value,
|
|
||||||
.ui.statistics .brown.statistic > .value,
|
|
||||||
.ui.brown.statistic > .value {
|
|
||||||
color: @brown;
|
|
||||||
}
|
|
||||||
.ui.grey.statistics .statistic > .value,
|
|
||||||
.ui.statistics .grey.statistic > .value,
|
|
||||||
.ui.grey.statistic > .value {
|
|
||||||
color: @grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Inverted
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.inverted.statistics .statistic > .value,
|
|
||||||
.ui.inverted.statistic .value {
|
|
||||||
color: @invertedValueColor;
|
|
||||||
}
|
|
||||||
.ui.inverted.statistics .statistic > .label,
|
|
||||||
.ui.inverted.statistic .label {
|
|
||||||
color: @invertedLabelColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.red.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.red.statistic > .value,
|
|
||||||
.ui.inverted.red.statistic > .value {
|
|
||||||
color: @lightRed;
|
|
||||||
}
|
|
||||||
.ui.inverted.orange.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.orange.statistic > .value,
|
|
||||||
.ui.inverted.orange.statistic > .value {
|
|
||||||
color: @lightOrange;
|
|
||||||
}
|
|
||||||
.ui.inverted.yellow.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.yellow.statistic > .value,
|
|
||||||
.ui.inverted.yellow.statistic > .value {
|
|
||||||
color: @lightYellow;
|
|
||||||
}
|
|
||||||
.ui.inverted.olive.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.olive.statistic > .value,
|
|
||||||
.ui.inverted.olive.statistic > .value {
|
|
||||||
color: @lightOlive;
|
|
||||||
}
|
|
||||||
.ui.inverted.green.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.green.statistic > .value,
|
|
||||||
.ui.inverted.green.statistic > .value {
|
|
||||||
color: @lightGreen;
|
|
||||||
}
|
|
||||||
.ui.inverted.teal.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.teal.statistic > .value,
|
|
||||||
.ui.inverted.teal.statistic > .value {
|
|
||||||
color: @lightTeal;
|
|
||||||
}
|
|
||||||
.ui.inverted.blue.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.blue.statistic > .value,
|
|
||||||
.ui.inverted.blue.statistic > .value {
|
|
||||||
color: @lightBlue;
|
|
||||||
}
|
|
||||||
.ui.inverted.violet.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.violet.statistic > .value,
|
|
||||||
.ui.inverted.violet.statistic > .value {
|
|
||||||
color: @lightViolet;
|
|
||||||
}
|
|
||||||
.ui.inverted.purple.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.purple.statistic > .value,
|
|
||||||
.ui.inverted.purple.statistic > .value {
|
|
||||||
color: @lightPurple;
|
|
||||||
}
|
|
||||||
.ui.inverted.pink.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.pink.statistic > .value,
|
|
||||||
.ui.inverted.pink.statistic > .value {
|
|
||||||
color: @lightPink;
|
|
||||||
}
|
|
||||||
.ui.inverted.brown.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.brown.statistic > .value,
|
|
||||||
.ui.inverted.brown.statistic > .value {
|
|
||||||
color: @lightBrown;
|
|
||||||
}
|
|
||||||
.ui.inverted.grey.statistics .statistic > .value,
|
|
||||||
.ui.statistics .inverted.grey.statistic > .value,
|
|
||||||
.ui.inverted.grey.statistic > .value {
|
|
||||||
color: @lightGrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
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: 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
|
|
||||||
/* Mini */
|
|
||||||
.ui.mini.statistics .statistic > .value,
|
|
||||||
.ui.mini.statistic > .value {
|
|
||||||
font-size: @miniValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.mini.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.mini.horizontal.statistic > .value {
|
|
||||||
font-size: @miniHorizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.mini.statistics .statistic > .text.value,
|
|
||||||
.ui.mini.statistic > .text.value {
|
|
||||||
font-size: @miniTextValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Tiny */
|
|
||||||
.ui.tiny.statistics .statistic > .value,
|
|
||||||
.ui.tiny.statistic > .value {
|
|
||||||
font-size: @tinyValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.tiny.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.tiny.horizontal.statistic > .value {
|
|
||||||
font-size: @tinyHorizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.tiny.statistics .statistic > .text.value,
|
|
||||||
.ui.tiny.statistic > .text.value {
|
|
||||||
font-size: @tinyTextValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Small */
|
|
||||||
.ui.small.statistics .statistic > .value,
|
|
||||||
.ui.small.statistic > .value {
|
|
||||||
font-size: @smallValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.small.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.small.horizontal.statistic > .value {
|
|
||||||
font-size: @smallHorizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.small.statistics .statistic > .text.value,
|
|
||||||
.ui.small.statistic > .text.value {
|
|
||||||
font-size: @smallTextValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Medium */
|
|
||||||
.ui.statistics .statistic > .value,
|
|
||||||
.ui.statistic > .value {
|
|
||||||
font-size: @valueSize !important;
|
|
||||||
}
|
|
||||||
.ui.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.horizontal.statistic > .value {
|
|
||||||
font-size: @horizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.statistics .statistic > .text.value,
|
|
||||||
.ui.statistic > .text.value {
|
|
||||||
font-size: @textValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large */
|
|
||||||
.ui.large.statistics .statistic > .value,
|
|
||||||
.ui.large.statistic > .value {
|
|
||||||
font-size: @largeValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.large.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.large.horizontal.statistic > .value {
|
|
||||||
font-size: @largeHorizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.large.statistics .statistic > .text.value,
|
|
||||||
.ui.large.statistic > .text.value {
|
|
||||||
font-size: @largeTextValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Huge */
|
|
||||||
.ui.huge.statistics .statistic > .value,
|
|
||||||
.ui.huge.statistic > .value {
|
|
||||||
font-size: @hugeValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.huge.horizontal.statistics .statistic > .value,
|
|
||||||
.ui.huge.horizontal.statistic > .value {
|
|
||||||
font-size: @hugeHorizontalValueSize !important;
|
|
||||||
}
|
|
||||||
.ui.huge.statistics .statistic > .text.value,
|
|
||||||
.ui.huge.statistic > .text.value {
|
|
||||||
font-size: @hugeTextValueSize !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.loadUIOverrides();
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
|
|
||||||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
|
|
||||||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
|
|
||||||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
|
|
||||||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
|
|
||||||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
|
|
||||||
|
|
||||||
Import this file into your LESS project to use Semantic 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/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"; }
|
|
||||||
|
|
||||||
/* 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/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/rating"; }
|
|
||||||
& { @import "definitions/modules/search"; }
|
|
||||||
& { @import "definitions/modules/shape"; }
|
|
||||||
& { @import "definitions/modules/sidebar"; }
|
|
||||||
& { @import "definitions/modules/sticky"; }
|
|
||||||
& { @import "definitions/modules/tab"; }
|
|
||||||
& { @import "definitions/modules/transition"; }
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*-------------------
|
|
||||||
Flag Variables
|
|
||||||
--------------------*/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
Site Overrides
|
|
||||||
*******************************/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
/*******************************
|
|
||||||
User Variable Overrides
|
|
||||||
*******************************/
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user