Adrien W
6 months ago
parent
b56a9f5940
commit
d08005e23c
|
After Width: | Height: | Size: 8.6 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Backbone localStorage Adapter v1.0
|
||||
* https://github.com/jeromegn/Backbone.localStorage
|
||||
*
|
||||
* Date: Sun Aug 14 2011 09:53:55 -0400
|
||||
*/
|
||||
|
||||
function S4(){return(((1+Math.random())*65536)|0).toString(16).substring(1)}function guid(){return(S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4())}window.Store=function(b){this.name=b;var a=localStorage.getItem(this.name);this.records=(a&&a.split(","))||[]};_.extend(Store.prototype,{save:function(){localStorage.setItem(this.name,this.records.join(","))},create:function(a){if(!a.id){a.id=a.attributes.id=guid()}localStorage.setItem(this.name+"-"+a.id,JSON.stringify(a));this.records.push(a.id.toString());this.save();return a},update:function(a){localStorage.setItem(this.name+"-"+a.id,JSON.stringify(a));if(!_.include(this.records,a.id.toString())){this.records.push(a.id.toString())}this.save();return a},find:function(a){return JSON.parse(localStorage.getItem(this.name+"-"+a.id))},findAll:function(){return _.map(this.records,function(a){return JSON.parse(localStorage.getItem(this.name+"-"+a))},this)},destroy:function(a){localStorage.removeItem(this.name+"-"+a.id);this.records=_.reject(this.records,function(b){return b==a.id.toString()});this.save();return a}});Backbone.sync=function(f,d,c,b){if(typeof c=="function"){c={success:c,error:b}}var e;var a=d.localStorage||d.collection.localStorage;switch(f){case"read":e=d.id?a.find(d):a.findAll();break;case"create":e=a.create(d);break;case"update":e=a.update(d);break;case"delete":e=a.destroy(d);break}if(e){c.success(e)}else{c.error("Record not found")}};
|
||||
@ -0,0 +1,369 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Accordion
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Accordion
|
||||
*******************************/
|
||||
|
||||
.ui.accordion,
|
||||
.ui.accordion .accordion {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ui.accordion .accordion {
|
||||
margin: 1em 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.ui.accordion.menu .item > .title,
|
||||
.ui.accordion > .title,
|
||||
.ui.accordion .accordion > .title {
|
||||
cursor: pointer;
|
||||
padding: 0.5em 0;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1em;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Default Styling */
|
||||
.ui.accordion:not(.styled) .title ~ .content,
|
||||
.ui.accordion:not(.styled) .accordion .title ~ .content {
|
||||
margin: "";
|
||||
padding: 0.5em 0 1em;
|
||||
}
|
||||
.ui.accordion:not(.styled) .title ~ .content:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Arrow */
|
||||
.ui.accordion .ui.header > .dropdown.icon,
|
||||
.ui.accordion .title > .dropdown.icon,
|
||||
.ui.accordion .accordion .title > .dropdown.icon {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
opacity: 1;
|
||||
width: 1.25em;
|
||||
height: 1em;
|
||||
margin: 0 0.25rem 0 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
transition: transform 0.1s ease, opacity 0.1s ease;
|
||||
vertical-align: baseline;
|
||||
transform: none;
|
||||
}
|
||||
.ui.accordion .ui.header > .dropdown.icon.right,
|
||||
.ui.accordion .title > .dropdown.icon.right,
|
||||
.ui.accordion .accordion .title > .dropdown.icon.right {
|
||||
float: right;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Coupling
|
||||
--------------- */
|
||||
|
||||
/* Menu */
|
||||
.ui.accordion.menu .item .title {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.accordion.menu .item .title > .dropdown.icon {
|
||||
float: right;
|
||||
margin: 0 0.25rem 0 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ui.accordion .ui.header > .dropdown.icon {
|
||||
font-size: 1em;
|
||||
margin: 0 0.25rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.accordion[open] > .title > .dropdown.icon,
|
||||
.ui.accordion .accordion[open] > .title > .dropdown.icon,
|
||||
.ui.accordion .active.title > .dropdown.icon,
|
||||
.ui.accordion .accordion .active.title > .dropdown.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.ui.accordion.menu .item .active.title > .dropdown.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Styled
|
||||
--------------- */
|
||||
.ui.styled.accordion {
|
||||
width: 600px;
|
||||
}
|
||||
.ui.styled.accordion,
|
||||
.ui.styled.accordion .accordion {
|
||||
border-radius: 0.28571429rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.styled.accordion > .title,
|
||||
.ui.styled.accordion .accordion > .title {
|
||||
margin: 0;
|
||||
padding: 0.75em 1em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: bold;
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
transition: background 0.1s ease, color 0.1s ease;
|
||||
}
|
||||
.ui.styled.accordion > .title:first-child,
|
||||
.ui.styled.accordion .accordion > .title:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.ui.styled.accordion > .content {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em 1.5em;
|
||||
}
|
||||
.ui.styled.accordion .accordion > .content {
|
||||
margin: 0;
|
||||
padding: 0.5em 1em 1.5em;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.styled.accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.styled.accordion .accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.styled.accordion[open] > .title,
|
||||
.ui.styled.accordion .active.title {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.styled.accordion .accordion[open] > .title,
|
||||
.ui.styled.accordion .accordion .active.title {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Compact
|
||||
--------------- */
|
||||
|
||||
/* Default Styling */
|
||||
.ui.compact.accordion:not(.styled) > .title,
|
||||
.ui.compact.accordion:not(.styled) .accordion > .title {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
.ui.compact.accordion:not(.styled) .title ~ .content,
|
||||
.ui.compact.accordion:not(.styled) .accordion .title ~ .content {
|
||||
padding: 0.25em 0 0.5em;
|
||||
}
|
||||
|
||||
/* Styled */
|
||||
.ui.compact.styled.accordion > .title,
|
||||
.ui.compact.styled.accordion .accordion > .title {
|
||||
padding: 0.375em 0.5em;
|
||||
}
|
||||
.ui.compact.styled.accordion .title ~ .content,
|
||||
.ui.compact.styled.accordion .accordion .title ~ .content {
|
||||
padding: 0.25em 0.5em 0.75em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Very Compact
|
||||
--------------- */
|
||||
.ui[class*="very compact"].accordion:not(.styled) > .title,
|
||||
.ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
|
||||
padding: 0.125em 0;
|
||||
}
|
||||
.ui[class*="very compact"].accordion:not(.styled) .title ~ .content,
|
||||
.ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content {
|
||||
padding: 0.125em 0 0.25em;
|
||||
}
|
||||
.ui[class*="very compact"].styled.accordion > .title,
|
||||
.ui[class*="very compact"].styled.accordion .accordion > .title {
|
||||
padding: 0.1875em 0.25em;
|
||||
}
|
||||
.ui[class*="very compact"].styled.accordion .title ~ .content,
|
||||
.ui[class*="very compact"].styled.accordion .accordion .title ~ .content {
|
||||
padding: 0.125em 0.25em 0.375em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Not Active
|
||||
--------------- */
|
||||
.ui.accordion:not(details) .title ~ .content:not(.active),
|
||||
.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Fluid
|
||||
--------------- */
|
||||
.ui.fluid.accordion,
|
||||
.ui.fluid.accordion .accordion {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.inverted.accordion.menu .item > .title,
|
||||
.ui.inverted.accordion > .title,
|
||||
.ui.inverted.accordion .accordion > .title {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.styled.accordion,
|
||||
.ui.inverted.styled.accordion .accordion {
|
||||
background: #1b1c1d;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.inverted.styled.accordion > .title,
|
||||
.ui.inverted.styled.accordion .accordion > .title {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.inverted.styled.accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.styled.accordion .accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.inverted.styled.accordion[open] > .title,
|
||||
.ui.inverted.styled.accordion .active.title {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.styled.accordion .accordion[open] > .title,
|
||||
.ui.inverted.styled.accordion .accordion .active.title {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.basic.styled.accordion,
|
||||
.ui.basic.styled.accordion .accordion {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.basic.styled.accordion > .title,
|
||||
.ui.basic.styled.accordion .accordion > .title {
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.ui.basic.styled.accordion > .title:hover,
|
||||
.ui.basic.styled.accordion .accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.basic.styled.accordion[open] > .title,
|
||||
.ui.basic.styled.accordion .active.title,
|
||||
.ui.basic.styled.accordion .accordion[open] > .title,
|
||||
.ui.basic.styled.accordion .accordion .active.title {
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.inverted.basic.styled.accordion > .title,
|
||||
.ui.inverted.basic.styled.accordion .accordion > .title {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.ui.inverted.basic.styled.accordion > .title:hover,
|
||||
.ui.inverted.basic.styled.accordion .accordion > .title:hover {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.basic.styled.accordion[open] > .title,
|
||||
.ui.inverted.basic.styled.accordion .active.title,
|
||||
.ui.inverted.basic.styled.accordion .accordion[open] > .title,
|
||||
.ui.inverted.basic.styled.accordion .accordion .active.title {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.tree.accordion:not(.styled) .title ~ .content,
|
||||
.ui.tree.accordion:not(.styled) .accordion .title ~ .content {
|
||||
padding: 0;
|
||||
}
|
||||
.ui.tree.accordion > .content,
|
||||
.ui.tree.accordion .accordion > .content {
|
||||
margin-left: 1.7em;
|
||||
}
|
||||
.ui.tree.accordion .accordion {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
@font-face {
|
||||
font-family: Accordion;
|
||||
src: url("data:application/font-woff;base64,d09GRk9UVE8AAAREAAsAAAAABkAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAC7AAAAQoAAAE/j/fxwUZGVE0AAAQUAAAAHAAAAByNqvxQR0RFRgAAA/gAAAAcAAAAIAAnABhPUy8yAAABYAAAAEIAAABgTadW5mNtYXAAAAKMAAAAUQAAAWAFZuKDaGVhZAAAAQgAAAAyAAAANg8zT8toaGVhAAABPAAAABoAAAAkApkA5mhtdHgAAAQwAAAAEwAAABYBtwASbWF4cAAAAVgAAAAGAAAABgAGUABuYW1lAAABpAAAAOYAAAGq/HAhWXBvc3QAAALgAAAADAAAACAAAwAAeJxjYGRgYADi8KWRsvH8Nl8ZuJkYQOD838XvQPT9hGxNIOXJsJ0xD0hzMIClARzsCcoAAHicY2BkYGB88P8BkGQAg+0wBhywAgBgjgOAAAAAAFAAAAYAAHicY2BmOM84gYGVgYHRhzGNgYHBHUp/ZZBkaGFABYwCSJyANNcUBgcGhg+3GB/8fwCUfMCgAFIDV6AAhIwARVcMJwAAeJx1jrFOwzAURU/SNKgFIVgQ6uSRKWolZjaQOnQBqQNb2lpRpMqW3HTowhew8U9I/BU37WOjtmyfd/3utYEbvsn4G7lxRsmtcc4FD8YD6U/GhfjNeMglybjU/DQeM+FHrqwY2QsnzrgSnTjnmnvjgfSpcSF+Nh5yx7txKf3DeMwjX31soqajJdCoqLs26HzFq9yz1WVS6Zv9tk5nmv8Vl0pI7CRHXThmVPofS592bQxuVk3PGF+Ohk6WRhHhGNO3eTbSVhy0z1mra6HV91YyxdC5xgevFL9xq4Obr+MixlDxC/HTOrsAAHicY2BgYGaAYBkGRgYQiALyGMF8FgY7IM3FwMHABISMDAofbv3/+/8/WJXCh5tgNuP/x2A+RC8bUC0DUB8rWIgNiJkY8AJm/NJDHgAALqoOxgAAAHicY2BmwAsAAH0ABHicPY7BSsNAEIZnkk2zlhg1JKAYxOrJi6RepMdC8SKefAJP4kVBzCtkNw7ZjeK1j9C38Rn6CO5CDrppigwMM8P/f/8gMAaIGL4+vD09PwJ6gLCwp2AnaM88e+7bQ0aRTxE7GcPRffJL9D9EIX2bW+sFOXzu5QD7OSwPcuA5Xiew05N8CIDDLiSQuTqGSVmU0/KqKG+Kxaxv8+llMURvHwBAgRJrfEeCEaLns9HdRxzHP/FqaV4yaptWK25SkwZKu4Va0rUSWjYVVbz7CqmqhZBSiNodqGqk5l2vFqrW1PJ4tWbGqZxVKa31htA6gmN2aTBwBobzuYsU1YYkGheyZVBqLjKKxn8cSmvuAAB4nGNgZGBg4AFiAQYJBiYgzQLEIJoRggEFbQBAAAAAAQAAAADeTO04AAAAAM/9o+4AAAAA32BrKXicY2BAAEYQsZ1BiIEBAAPpAMsA") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Dropdown Icon */
|
||||
.ui.accordion .ui.header > .dropdown.icon,
|
||||
.ui.accordion .title > .dropdown.icon,
|
||||
.ui.accordion .accordion .title > .dropdown.icon {
|
||||
font-family: Accordion;
|
||||
line-height: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.accordion .ui.header > .dropdown.icon::before,
|
||||
.ui.accordion .title > .dropdown.icon::before,
|
||||
.ui.accordion .accordion .title > .dropdown.icon::before {
|
||||
content: "\f0da"
|
||||
/* rtl: "\f0d9" */;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,593 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Accordion
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.accordion = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = Date.now(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = typeof query === 'string',
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
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,
|
||||
|
||||
$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 (event) {
|
||||
if ($(event.target).closest(selector.ignore).length === 0) {
|
||||
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) {
|
||||
$activeContent
|
||||
.children()
|
||||
.transition({
|
||||
animation: 'fade in',
|
||||
queue: false,
|
||||
useFailSafe: true,
|
||||
debug: settings.debug,
|
||||
verbose: settings.verbose,
|
||||
silent: settings.silent,
|
||||
duration: settings.duration,
|
||||
skipInlineHidden: true,
|
||||
onComplete: function () {
|
||||
$activeContent.children().removeClass(className.transition);
|
||||
},
|
||||
})
|
||||
;
|
||||
} 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) {
|
||||
$activeContent
|
||||
.children()
|
||||
.transition({
|
||||
animation: 'fade out',
|
||||
queue: false,
|
||||
useFailSafe: true,
|
||||
debug: settings.debug,
|
||||
verbose: settings.verbose,
|
||||
silent: settings.silent,
|
||||
duration: settings.duration,
|
||||
skipInlineHidden: true,
|
||||
})
|
||||
;
|
||||
} 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) {
|
||||
$openContents
|
||||
.children()
|
||||
.transition({
|
||||
animation: 'fade out',
|
||||
useFailSafe: true,
|
||||
debug: settings.debug,
|
||||
verbose: settings.verbose,
|
||||
silent: settings.silent,
|
||||
duration: settings.duration,
|
||||
skipInlineHidden: true,
|
||||
})
|
||||
;
|
||||
} 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);
|
||||
var $element = $(this);
|
||||
$element.css('display', '');
|
||||
if ($element.attr('style') === '') {
|
||||
$element
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
opacity: function () {
|
||||
module.verbose('Removing inline opacity from element', this);
|
||||
var $element = $(this);
|
||||
$element.css('opacity', '');
|
||||
if ($element.attr('style') === '') {
|
||||
$element
|
||||
.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 = Date.now();
|
||||
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(function () { 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 (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
if (methodInvoked) {
|
||||
if (instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
} else {
|
||||
if (instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
|
||||
return returnedValue !== undefined
|
||||
? returnedValue
|
||||
: this;
|
||||
};
|
||||
|
||||
$.fn.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',
|
||||
transition: 'transition',
|
||||
},
|
||||
|
||||
selector: {
|
||||
accordion: '.accordion',
|
||||
title: '.title',
|
||||
trigger: '.title',
|
||||
ignore: '.ui.dropdown',
|
||||
content: '.content',
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
// Adds easing
|
||||
$.extend($.easing, {
|
||||
easeOutQuad: function (x) {
|
||||
return 1 - (1 - x) * (1 - x);
|
||||
},
|
||||
});
|
||||
})(jQuery, window, document);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,264 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Ad
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Copyright 2013 Contributors
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Advertisement
|
||||
*******************************/
|
||||
|
||||
.ui.ad {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.ui.ad:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.ad:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.ad iframe {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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: 767.98px) {
|
||||
.ui.mobile.ad {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.centered.ad {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.test.ad {
|
||||
position: relative;
|
||||
background: #545454;
|
||||
}
|
||||
.ui.test.ad::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
content: "Ad";
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui.mobile.test.ad::after {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.test.ad[data-text]::after {
|
||||
content: attr(data-text);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Ad
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Copyright 2013 Contributors
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.ad{display:block;overflow:hidden;margin:1em 0}.ui.ad:first-child{margin:0}.ui.ad:last-child{margin:0}.ui.ad iframe{margin:0;padding:0;border:none;overflow:hidden}.ui.leaderboard.ad{width:728px;height:90px}.ui[class*="medium rectangle"].ad{width:300px;height:250px}.ui[class*="large rectangle"].ad{width:336px;height:280px}.ui[class*="half page"].ad{width:300px;height:600px}.ui.square.ad{width:250px;height:250px}.ui[class*="small square"].ad{width:200px;height:200px}.ui[class*="small rectangle"].ad{width:180px;height:150px}.ui[class*="vertical rectangle"].ad{width:240px;height:400px}.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}.ui.skyscraper.ad{width:120px;height:600px}.ui[class*="wide skyscraper"].ad{width:160px}.ui.banner.ad{width:468px;height:60px}.ui[class*="vertical banner"].ad{width:120px;height:240px}.ui[class*="top banner"].ad{width:930px;height:180px}.ui[class*="half banner"].ad{width:234px;height:60px}.ui[class*="large leaderboard"].ad{width:970px;height:90px}.ui.billboard.ad{width:970px;height:250px}.ui.panorama.ad{width:980px;height:120px}.ui.netboard.ad{width:580px;height:400px}.ui[class*="large mobile banner"].ad{width:320px;height:100px}.ui[class*="mobile leaderboard"].ad{width:320px;height:50px}.ui.mobile.ad{display:none}@media only screen and (max-width:767.98px){.ui.mobile.ad{display:block}}.ui.centered.ad{margin-left:auto;margin-right:auto}.ui.test.ad{position:relative;background:#545454}.ui.test.ad::after{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translateX(-50%) translateY(-50%);content:"Ad";color:#fff;font-size:1em;font-weight:700}.ui.mobile.test.ad::after{font-size:.85714286em}.ui.test.ad[data-text]::after{content:attr(data-text)}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,135 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Breadcrumb
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Breadcrumb
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
line-height: 1.4285em;
|
||||
display: inline-block;
|
||||
margin: 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.breadcrumb:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.breadcrumb:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Divider */
|
||||
.ui.breadcrumb .divider {
|
||||
display: inline-block;
|
||||
opacity: 0.7;
|
||||
margin: 0 0.21428571rem;
|
||||
font-size: 0.92857143em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.breadcrumb a {
|
||||
color: #4183c4;
|
||||
}
|
||||
.ui.breadcrumb a:hover {
|
||||
color: #1e70bf;
|
||||
}
|
||||
|
||||
/* Icon Divider */
|
||||
.ui.breadcrumb .icon.divider {
|
||||
font-size: 0.85714286em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.ui.breadcrumb a.section {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.breadcrumb .section {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.breadcrumb.segment {
|
||||
display: inline-block;
|
||||
padding: 0.78571429em 1em;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.breadcrumb {
|
||||
color: #dcddde;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .active.section {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.breadcrumb > .divider {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb .active.section {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.breadcrumb {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.breadcrumb {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.breadcrumb {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.breadcrumb {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.breadcrumb {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.breadcrumb {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.breadcrumb {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.breadcrumb {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Breadcrumb
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.breadcrumb{line-height:1.4285em;display:inline-block;margin:0 0;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.7;margin:0 .21428571rem;font-size:.92857143em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#4183c4}.ui.breadcrumb a:hover{color:#1e70bf}.ui.breadcrumb .icon.divider{font-size:.85714286em;vertical-align:baseline}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.78571429em 1em}.ui.inverted.breadcrumb{color:#dcddde}.ui.inverted.breadcrumb>.active.section{color:#fff}.ui.inverted.breadcrumb>.divider{color:rgba(255,255,255,.7)}.ui.breadcrumb .active.section{font-weight:700}.ui.breadcrumb{font-size:1rem}.ui.mini.breadcrumb{font-size:.78571429rem}.ui.tiny.breadcrumb{font-size:.85714286rem}.ui.small.breadcrumb{font-size:.92857143rem}.ui.large.breadcrumb{font-size:1.14285714rem}.ui.big.breadcrumb{font-size:1.28571429rem}.ui.huge.breadcrumb{font-size:1.42857143rem}.ui.massive.breadcrumb{font-size:1.71428571rem}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,327 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Calendar
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Popup
|
||||
*******************************/
|
||||
|
||||
.ui.calendar.popup {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ui.calendar.popup.inverted::before {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Calendar
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .calendar:focus,
|
||||
.ui.calendar.popup:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Grid
|
||||
*******************************/
|
||||
|
||||
.ui.calendar.popup .ui.grid {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui.calendar.popup .ui.grid > .column {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Table
|
||||
*******************************/
|
||||
|
||||
.ui.calendar .ui.table.year,
|
||||
.ui.calendar .ui.table.month,
|
||||
.ui.calendar .ui.table.minute {
|
||||
min-width: 15em;
|
||||
}
|
||||
.ui.calendar .ui.table.day {
|
||||
min-width: 18em;
|
||||
}
|
||||
.ui.calendar .ui.table.day.andweek {
|
||||
min-width: 22em;
|
||||
}
|
||||
.ui.calendar .ui.table.hour {
|
||||
min-width: 20em;
|
||||
}
|
||||
.ui.calendar .ui.table tr th,
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui.calendar .ui.table tr th {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.calendar .ui.table tr th i.icon {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.calendar .ui.table tr:first-child th {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui.calendar .ui.table.day tr:first-child th {
|
||||
border: none;
|
||||
}
|
||||
.ui.calendar .ui.table.day tr:nth-child(2) th {
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
.ui.calendar .ui.table tr td {
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
.ui.calendar .ui.table tr .link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.calendar .ui.table tr .prev.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.ui.calendar .ui.table tr .next.link {
|
||||
width: 14.28571429%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.ui.ui.calendar .ui.table tr .disabled {
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
color: rgba(40, 40, 40, 0.3);
|
||||
}
|
||||
.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
States
|
||||
--------------- */
|
||||
.ui.calendar .ui.table tr td.today {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui.calendar .ui.table tr td.range {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.calendar:not(.disabled):focus .ui.table tbody tr td.focus,
|
||||
.ui.calendar:not(.disabled).popup.active .ui.table tbody tr td.focus {
|
||||
box-shadow: inset 0 0 0 1px #85b7d9;
|
||||
}
|
||||
.ui.inverted.calendar .ui.table.inverted tr td.range {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
|
||||
.ui.inverted.calendar:not(.disabled).popup.active .ui.table.inverted tbody tr td.focus {
|
||||
box-shadow: inset 0 0 0 1px #85b7d9;
|
||||
}
|
||||
.ui.inverted.calendar .ui.ui.ui.inverted.table tr .disabled {
|
||||
color: rgba(225, 225, 225, 0.3);
|
||||
}
|
||||
.ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.ui.ui.ui.calendar.popup > .ui.ui.grid {
|
||||
margin: -1rem;
|
||||
}
|
||||
.ui.ui.ui.calendar.popup > .ui.ui.grid > .column:not(:first-child) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.ui.ui.ui.calendar.popup > .ui.ui.grid > .column:not(:first-child) > .ui.table {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.ui.ui.ui.calendar.popup > .ui.ui.grid > .column:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui.ui.ui.calendar.popup > .ui.ui.grid > .column:not(:last-child) > .ui.table {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Sizes
|
||||
--------------------- */
|
||||
.ui.mini.calendar,
|
||||
.ui.mini.calendar .ui.table tr th,
|
||||
.ui.mini.calendar .ui.table tr td {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.mini.calendar .ui.table.year,
|
||||
.ui.mini.calendar .ui.table.month,
|
||||
.ui.mini.calendar .ui.table.minute {
|
||||
min-width: 11.78571429em;
|
||||
}
|
||||
.ui.mini.calendar .ui.table.day {
|
||||
min-width: 14.14285714em;
|
||||
}
|
||||
.ui.mini.calendar .ui.table.day.andweek {
|
||||
min-width: 17.28571429em;
|
||||
}
|
||||
.ui.mini.calendar .ui.table.hour {
|
||||
min-width: 15.71428571em;
|
||||
}
|
||||
.ui.tiny.calendar,
|
||||
.ui.tiny.calendar .ui.table tr th,
|
||||
.ui.tiny.calendar .ui.table tr td {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.tiny.calendar .ui.table.year,
|
||||
.ui.tiny.calendar .ui.table.month,
|
||||
.ui.tiny.calendar .ui.table.minute {
|
||||
min-width: 12.85714286em;
|
||||
}
|
||||
.ui.tiny.calendar .ui.table.day {
|
||||
min-width: 15.42857143em;
|
||||
}
|
||||
.ui.tiny.calendar .ui.table.day.andweek {
|
||||
min-width: 18.85714286em;
|
||||
}
|
||||
.ui.tiny.calendar .ui.table.hour {
|
||||
min-width: 17.14285714em;
|
||||
}
|
||||
.ui.small.calendar,
|
||||
.ui.small.calendar .ui.table tr th,
|
||||
.ui.small.calendar .ui.table tr td {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.small.calendar .ui.table.year,
|
||||
.ui.small.calendar .ui.table.month,
|
||||
.ui.small.calendar .ui.table.minute {
|
||||
min-width: 13.92857143em;
|
||||
}
|
||||
.ui.small.calendar .ui.table.day {
|
||||
min-width: 16.71428571em;
|
||||
}
|
||||
.ui.small.calendar .ui.table.day.andweek {
|
||||
min-width: 20.42857143em;
|
||||
}
|
||||
.ui.small.calendar .ui.table.hour {
|
||||
min-width: 18.57142857em;
|
||||
}
|
||||
.ui.large.calendar,
|
||||
.ui.large.calendar .ui.table tr th,
|
||||
.ui.large.calendar .ui.table tr td {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.large.calendar .ui.table.year,
|
||||
.ui.large.calendar .ui.table.month,
|
||||
.ui.large.calendar .ui.table.minute {
|
||||
min-width: 17.14285714em;
|
||||
}
|
||||
.ui.large.calendar .ui.table.day {
|
||||
min-width: 20.57142857em;
|
||||
}
|
||||
.ui.large.calendar .ui.table.day.andweek {
|
||||
min-width: 25.14285714em;
|
||||
}
|
||||
.ui.large.calendar .ui.table.hour {
|
||||
min-width: 22.85714286em;
|
||||
}
|
||||
.ui.big.calendar,
|
||||
.ui.big.calendar .ui.table tr th,
|
||||
.ui.big.calendar .ui.table tr td {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.big.calendar .ui.table.year,
|
||||
.ui.big.calendar .ui.table.month,
|
||||
.ui.big.calendar .ui.table.minute {
|
||||
min-width: 19.28571429em;
|
||||
}
|
||||
.ui.big.calendar .ui.table.day {
|
||||
min-width: 23.14285714em;
|
||||
}
|
||||
.ui.big.calendar .ui.table.day.andweek {
|
||||
min-width: 28.28571429em;
|
||||
}
|
||||
.ui.big.calendar .ui.table.hour {
|
||||
min-width: 25.71428571em;
|
||||
}
|
||||
.ui.huge.calendar,
|
||||
.ui.huge.calendar .ui.table tr th,
|
||||
.ui.huge.calendar .ui.table tr td {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.huge.calendar .ui.table.year,
|
||||
.ui.huge.calendar .ui.table.month,
|
||||
.ui.huge.calendar .ui.table.minute {
|
||||
min-width: 21.42857143em;
|
||||
}
|
||||
.ui.huge.calendar .ui.table.day {
|
||||
min-width: 25.71428571em;
|
||||
}
|
||||
.ui.huge.calendar .ui.table.day.andweek {
|
||||
min-width: 31.42857143em;
|
||||
}
|
||||
.ui.huge.calendar .ui.table.hour {
|
||||
min-width: 28.57142857em;
|
||||
}
|
||||
.ui.massive.calendar,
|
||||
.ui.massive.calendar .ui.table tr th,
|
||||
.ui.massive.calendar .ui.table tr td {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
.ui.massive.calendar .ui.table.year,
|
||||
.ui.massive.calendar .ui.table.month,
|
||||
.ui.massive.calendar .ui.table.minute {
|
||||
min-width: 25.71428571em;
|
||||
}
|
||||
.ui.massive.calendar .ui.table.day {
|
||||
min-width: 30.85714286em;
|
||||
}
|
||||
.ui.massive.calendar .ui.table.day.andweek {
|
||||
min-width: 37.71428571em;
|
||||
}
|
||||
.ui.massive.calendar .ui.table.hour {
|
||||
min-width: 34.28571429em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------------
|
||||
Disabled
|
||||
--------------------- */
|
||||
.ui.disabled.calendar {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.ui.disabled.calendar > .input,
|
||||
.ui.disabled.calendar .ui.table tr .link {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,785 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Checkbox
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Checkbox
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
outline: none;
|
||||
vertical-align: baseline;
|
||||
font-style: normal;
|
||||
min-height: 17px;
|
||||
font-size: 1em;
|
||||
line-height: 17px;
|
||||
min-width: 17px;
|
||||
}
|
||||
|
||||
/* HTML Checkbox */
|
||||
.ui.checkbox input[type="checkbox"],
|
||||
.ui.checkbox input[type="radio"] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0 !important;
|
||||
outline: none;
|
||||
z-index: 3;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.ui.checkbox label {
|
||||
cursor: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
outline: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.checkbox:not(.invisible) label {
|
||||
padding-left: 1.85714em;
|
||||
}
|
||||
.ui.checkbox label::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
content: "";
|
||||
background: #fff;
|
||||
border-radius: 0.21428571rem;
|
||||
transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
|
||||
border: 1px solid #d4d4d5;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Checkmark
|
||||
--------------- */
|
||||
.ui.checkbox label::after {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
.ui.right.aligned.checkbox label {
|
||||
padding-left: 0;
|
||||
padding-right: 1.85714em;
|
||||
}
|
||||
.ui.right.aligned.checkbox label::after,
|
||||
.ui.right.aligned.checkbox label::before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Label
|
||||
--------------- */
|
||||
|
||||
/* Inside */
|
||||
.ui.checkbox label,
|
||||
.ui.checkbox + label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
|
||||
/* Outside */
|
||||
.ui.checkbox + label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Hover
|
||||
--------------- */
|
||||
.ui.checkbox label:hover::before {
|
||||
background: #fff;
|
||||
border-color: rgba(34, 36, 38, 0.35);
|
||||
}
|
||||
.ui.checkbox:not(.invisible) label:hover,
|
||||
.ui.checkbox:not(.invisible) + label:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Down
|
||||
--------------- */
|
||||
.ui.checkbox label:active::before {
|
||||
background: #f9fafb;
|
||||
border-color: rgba(34, 36, 38, 0.35);
|
||||
}
|
||||
.ui.checkbox label:active::after {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.checkbox:not(.invisible) input:active ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Focus
|
||||
--------------- */
|
||||
.ui.checkbox input:focus ~ label::before {
|
||||
background: #fff;
|
||||
border-color: #96c8da;
|
||||
}
|
||||
.ui.checkbox input:focus ~ label::after {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.checkbox:not(.invisible) input:focus ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Active
|
||||
--------------- */
|
||||
.ui.checkbox input:checked ~ label::before {
|
||||
background: #fff;
|
||||
border-color: rgba(34, 36, 38, 0.35);
|
||||
}
|
||||
.ui.checkbox input:checked ~ label::after {
|
||||
opacity: 1;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Indeterminate
|
||||
--------------- */
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
|
||||
background: #fff;
|
||||
border-color: rgba(34, 36, 38, 0.35);
|
||||
}
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after {
|
||||
opacity: 1;
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.indeterminate.toggle.checkbox input:not([type="radio"]):indeterminate ~ label::before {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.ui.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after {
|
||||
left: 1.075rem;
|
||||
}
|
||||
.ui.right.aligned.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after {
|
||||
left: auto;
|
||||
right: 1.075rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Active Focus
|
||||
--------------- */
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
|
||||
.ui.checkbox input:checked:focus ~ label::before {
|
||||
background: #fff;
|
||||
border-color: #96c8da;
|
||||
}
|
||||
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
|
||||
.ui.checkbox input:checked:focus ~ label::after {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Read-Only
|
||||
--------------- */
|
||||
.ui.read-only.checkbox,
|
||||
.ui.read-only.checkbox label {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Disabled
|
||||
--------------- */
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[disabled] ~ label {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
color: #000000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Hidden
|
||||
--------------- */
|
||||
|
||||
/* Initialized checkbox moves input below element
|
||||
to prevent manually triggering */
|
||||
.ui.checkbox input.hidden {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Selectable Label */
|
||||
.ui.checkbox input + label[for],
|
||||
.ui.checkbox input.hidden + label {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Radio
|
||||
--------------- */
|
||||
.ui.radio.checkbox {
|
||||
min-height: 15px;
|
||||
}
|
||||
.ui.radio.checkbox label {
|
||||
padding-left: 1.85714em;
|
||||
}
|
||||
|
||||
/* Box */
|
||||
.ui.radio.checkbox label::before {
|
||||
content: "";
|
||||
transform: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 500rem;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Bullet */
|
||||
.ui.radio.checkbox label::after {
|
||||
border: none;
|
||||
content: "" !important;
|
||||
line-height: 15px;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 500rem;
|
||||
transform: scale(0.46666667);
|
||||
background-color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.radio.checkbox input:focus ~ label::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ui.radio.checkbox input:focus ~ label::after {
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* Indeterminate */
|
||||
.ui.radio.checkbox input:indeterminate ~ label::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.radio.checkbox input:checked ~ label::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ui.radio.checkbox input:checked ~ label::after {
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* Active Focus */
|
||||
.ui.radio.checkbox input:focus:checked ~ label::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ui.radio.checkbox input:focus:checked ~ label::after {
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Slider
|
||||
--------------- */
|
||||
.ui.slider.checkbox {
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.ui.slider.checkbox input {
|
||||
width: 3.5rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.ui.slider.checkbox label {
|
||||
padding-left: 4.5rem;
|
||||
line-height: 1rem;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Line */
|
||||
.ui.slider.checkbox label::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: none;
|
||||
border: none !important;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
top: 0.4rem;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
width: 3.5rem;
|
||||
height: 0.21428571rem;
|
||||
border-radius: 500rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ui.slider.checkbox label::after {
|
||||
background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||
position: absolute;
|
||||
content: "" !important;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: -0.25rem;
|
||||
left: 0;
|
||||
transform: none;
|
||||
border-radius: 500rem;
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.slider.checkbox input:focus ~ label::before {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.slider.checkbox label:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.ui.slider.checkbox label:hover::before {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.slider.checkbox input:checked ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.slider.checkbox input:checked ~ label::before {
|
||||
background-color: #545454;
|
||||
}
|
||||
.ui.slider.checkbox input:checked ~ label::after {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
/* Active Focus */
|
||||
.ui.slider.checkbox input:focus:checked ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.slider.checkbox input:focus:checked ~ label::before {
|
||||
background-color: #000000;
|
||||
}
|
||||
.ui.right.aligned.slider.checkbox label {
|
||||
padding-left: 0;
|
||||
padding-right: 4.5rem;
|
||||
}
|
||||
.ui.right.aligned.slider.checkbox label::after {
|
||||
left: auto;
|
||||
right: 2rem;
|
||||
transition: right 0.3s ease;
|
||||
}
|
||||
.ui.right.aligned.slider.checkbox input:checked ~ label::after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Toggle
|
||||
--------------- */
|
||||
.ui.toggle.checkbox {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.ui.toggle.checkbox input {
|
||||
width: 3.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.ui.toggle.checkbox label {
|
||||
min-height: 1.5rem;
|
||||
padding-left: 4.5rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.toggle.checkbox label {
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
.ui.toggle.checkbox label::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
border: none;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
box-shadow: none;
|
||||
width: 3.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||
position: absolute;
|
||||
content: "" !important;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
border: none;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 500rem;
|
||||
transition: background 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
.ui.toggle.checkbox input ~ label::after {
|
||||
left: -0.05rem;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.toggle.checkbox input:focus ~ label::before {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.toggle.checkbox label:hover::before {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.toggle.checkbox input:checked ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::before {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::after {
|
||||
left: 2.15rem;
|
||||
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
}
|
||||
|
||||
/* Active Focus */
|
||||
.ui.toggle.checkbox input:focus:checked ~ label {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
.ui.toggle.checkbox input:focus:checked ~ label::before {
|
||||
background-color: #0d71bb;
|
||||
}
|
||||
.ui.right.aligned.toggle.checkbox label {
|
||||
padding-left: 0;
|
||||
padding-right: 4.5rem;
|
||||
}
|
||||
.ui.right.aligned.toggle.checkbox input ~ label::after {
|
||||
left: auto;
|
||||
right: 2.15rem;
|
||||
transition: background 0.3s ease, right 0.3s ease;
|
||||
}
|
||||
.ui.right.aligned.toggle.checkbox input:checked ~ label::after {
|
||||
left: auto;
|
||||
right: -0.05rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Fitted
|
||||
--------------- */
|
||||
.ui.ui.fitted.checkbox label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.ui.fitted.toggle.checkbox {
|
||||
width: 3.5rem;
|
||||
}
|
||||
.ui.fitted.slider.checkbox {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.ui.ui.inverted.checkbox label,
|
||||
.ui.ui.ui.inverted.checkbox + label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.ui.inverted.checkbox label:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.checkbox label:hover::before {
|
||||
border-color: rgba(34, 36, 38, 0.5);
|
||||
}
|
||||
|
||||
/* Slider Label */
|
||||
.ui.inverted.slider.checkbox label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Slider Line */
|
||||
.ui.ui.inverted.slider.checkbox label::before {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Slider Hover */
|
||||
.ui.ui.inverted.slider.checkbox label:hover::before {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Slider Active */
|
||||
.ui.ui.inverted.slider.checkbox input:checked ~ label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.slider.checkbox input:checked ~ label::before {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Slider Active Focus */
|
||||
.ui.ui.inverted.slider.checkbox input:focus:checked ~ label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Toggle Switch */
|
||||
.ui.ui.inverted.toggle.checkbox label::before {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Toggle Hover */
|
||||
.ui.ui.inverted.toggle.checkbox label:hover::before {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* Toggle Active */
|
||||
.ui.ui.inverted.toggle.checkbox input:checked ~ label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.toggle.checkbox input:checked ~ label::before {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
|
||||
/* Toggle Active Focus */
|
||||
.ui.ui.inverted.toggle.checkbox input:focus:checked ~ label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
|
||||
background-color: #0d71bb;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Invisible
|
||||
--------------- */
|
||||
.ui.invisible.checkbox:not(.compact) {
|
||||
display: block;
|
||||
}
|
||||
.ui.invisible.checkbox input {
|
||||
left: -99999px;
|
||||
position: absolute;
|
||||
}
|
||||
.ui.invisible.checkbox label::before,
|
||||
.ui.invisible.checkbox label::after {
|
||||
display: none;
|
||||
}
|
||||
.ui.invisible.checkbox label {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
color: inherit;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label:not(.image) {
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label.image,
|
||||
.basic.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.invisible.checkbox input:not(:checked) + label.image {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label.image {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.ui.invisible.checkbox input:not(:checked)[disabled] + label.image,
|
||||
.disabled.ui.invisible.checkbox input:not(:checked) + label.image {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Size
|
||||
--------------------- */
|
||||
.ui.mini.checkbox {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.tiny.checkbox {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.checkbox {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.large.checkbox {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
|
||||
.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
|
||||
transform: scale(1.14285714);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.large.form .checkbox.radio label::before,
|
||||
.ui.large.checkbox.radio label::before {
|
||||
transform: scale(1.14285714);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.large.form .checkbox.radio label::after,
|
||||
.ui.large.checkbox.radio label::after {
|
||||
transform: scale(0.57142857);
|
||||
transform-origin: left;
|
||||
left: 0.33571429em;
|
||||
}
|
||||
.ui.big.checkbox {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
|
||||
.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
|
||||
transform: scale(1.28571429);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.big.form .checkbox.radio label::before,
|
||||
.ui.big.checkbox.radio label::before {
|
||||
transform: scale(1.28571429);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.big.form .checkbox.radio label::after,
|
||||
.ui.big.checkbox.radio label::after {
|
||||
transform: scale(0.64285714);
|
||||
transform-origin: left;
|
||||
left: 0.37142857em;
|
||||
}
|
||||
.ui.huge.checkbox {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
|
||||
.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
|
||||
transform: scale(1.42857143);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.huge.form .checkbox.radio label::before,
|
||||
.ui.huge.checkbox.radio label::before {
|
||||
transform: scale(1.42857143);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.huge.form .checkbox.radio label::after,
|
||||
.ui.huge.checkbox.radio label::after {
|
||||
transform: scale(0.71428571);
|
||||
transform-origin: left;
|
||||
left: 0.40714286em;
|
||||
}
|
||||
.ui.massive.checkbox {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
|
||||
.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
|
||||
.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
|
||||
transform: scale(1.71428571);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.massive.form .checkbox.radio label::before,
|
||||
.ui.massive.checkbox.radio label::before {
|
||||
transform: scale(1.71428571);
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.massive.form .checkbox.radio label::after,
|
||||
.ui.massive.checkbox.radio label::after {
|
||||
transform: scale(0.85714286);
|
||||
transform-origin: left;
|
||||
left: 0.47857143em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
@font-face {
|
||||
font-family: Checkbox;
|
||||
src: url("data:application/font-woff;base64,d09GRgABAAAAAAR8AA0AAAAABtwAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEYAAAABoAAAAcgbCWJ0dERUYAAARIAAAAFwAAABgAJQAAT1MvMgAAAZgAAABAAAAAYA8SBD9jbWFwAAAB9AAAAFMAAAFc71zo6Wdhc3AAAARAAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAADJAAABVHshwGBoZWFkAAABMAAAAC4AAAA2Bj3tWWhoZWEAAAFgAAAAHQAAACQHfQPIaG10eAAAAdgAAAAZAAAAHg56AEVsb2NhAAACSAAAABIAAAASAQoAjG1heHAAAAGAAAAAGAAAACAACgAvbmFtZQAAAygAAADnAAABp5xOC4Fwb3N0AAAEEAAAADAAAABaHRtWW3icY2BkYGBgYmDgqbAVjee3+crAzcIAAhc3XilHppl3M+cBKQ6QWgYGAAHnCVsAAHicY2BkYGA+8P8AAwMLAwgw72ZgZEAF7ABaJgNOAAAAeJxjYGRgYOBg0GUA0QwMTAxoAAAFtQA6eJxjYGYWYpzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgF0AQYHBgYXjAxH/h/gMGB+QCIx8CIJKvAwAgAIOcKW3icY2GAAMZQCM0ExCwMDK7MqiAeAAqXAM4AAAB4nN2NwQ2AMAwDL00pHYJH52AQ9n/w6BbFCS9WwJFlO3IUwHl5YAQuJctcOaVdU6TGmGWt7IxJuHXnvmcrnLPR2GWb6NnF4rrwhT5U/o0Hf5EJGAAAAAAAAAgACAAQABgASABsAKoAAHichY09CsJAEIVndiG2gyQ7IASJIbHQyvyIiFhZpBE8iNsIeiVvYOFx7FPbKE6yUcHGgZ23jzd8DxDeowAWCv77Dez0Vd1hAIB+D714NMa0yNdYZrMhum0CfaWnT4bpeSPaEjOd8djIltTBNBlhSGzES3Jqb5oW6UOrE1WBL7/A73lxNBqnK8znZRbNWMgJET8qJhlWF1HV3zvXSceBSifawrTjTLrd0uI3c4lFu4UcYvbh1/KsIaodUayx7Kxr+wb8Y+EFi+YsngAAAHicfc5BSsNAGMXxf9q0agURFy50M3shlOoNikIXddGFa5N0SEvLDKQp2KUH8AxuXXkkz+JL+NYJJPzmffNmAlzxS0L7JJxzYx5wxoN5qPzZnMrv5hGXfJrHyr/NE+74UytJL5Rcdye0Huiue/NQ+aM5lV/NI27ZmsfKv8wTnvhhzgZPyY6CyAfMN77cFVFaaVBxZE9OraWvjvtc6Kn0jN40qDnoVyIBx4yMqWJfH7YxuFk27a2/dLVGxUpbQndYrrVnrazgpO9C1chSb7s3UymGxlU++Dpv/NoVJ7co4zLGkPEPj0VARQB4nGNgYsAPOBgYGJkYmBiZGZgZWRhZGdnYS/MyDYAAShuCaFcLCB9Iw/hGAOPdCuMAAQAB//8AD3icY2BkYGDgAWIBIGYCYhYIDQACOwAmAHicY2BgYGQAgns+by1A9MWNV8phNABQ5wfrAAA=") format("woff");
|
||||
}
|
||||
|
||||
/* Checkmark */
|
||||
.ui.checkbox label::after {
|
||||
font-family: Checkbox;
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
.ui.checkbox input:checked ~ label::after {
|
||||
content: "\e800";
|
||||
}
|
||||
|
||||
/* Indeterminate */
|
||||
.ui.checkbox input:indeterminate ~ label::after {
|
||||
font-size: 12px;
|
||||
content: "\e801";
|
||||
}
|
||||
/* UTF Reference
|
||||
.check::before { content: '\e800'; }
|
||||
.dash::before { content: '\e801'; }
|
||||
.plus::before { content: '\e802'; }
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,882 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Checkbox
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.checkbox = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = Date.now(),
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
preventDefaultOnInputTarget: function () {
|
||||
if (event !== undefined && event !== null && $(event.target).is(selector.input)) {
|
||||
module.verbose('Preventing default check action after manual check action');
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
change: function (event) {
|
||||
if (!module.should.ignoreCallbacks()) {
|
||||
settings.onChange.call(input);
|
||||
}
|
||||
},
|
||||
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.trigger('focus');
|
||||
event.preventDefault();
|
||||
},
|
||||
keydown: function (event) {
|
||||
var
|
||||
key = event.which,
|
||||
keyCode = {
|
||||
enter: 13,
|
||||
space: 32,
|
||||
escape: 27,
|
||||
left: 37,
|
||||
up: 38,
|
||||
right: 39,
|
||||
down: 40,
|
||||
}
|
||||
;
|
||||
|
||||
var
|
||||
r = module.get.radios(),
|
||||
rIndex = r.index($module),
|
||||
rLen = r.length,
|
||||
checkIndex = false
|
||||
;
|
||||
|
||||
if (key === keyCode.left || key === keyCode.up) {
|
||||
checkIndex = (rIndex === 0 ? rLen : rIndex) - 1;
|
||||
} else if (key === keyCode.right || key === keyCode.down) {
|
||||
checkIndex = rIndex === rLen - 1 ? 0 : rIndex + 1;
|
||||
}
|
||||
|
||||
if (!module.should.ignoreCallbacks() && checkIndex !== false) {
|
||||
if (settings.beforeUnchecked.apply(input) === false) {
|
||||
module.verbose('Option not allowed to be unchecked, cancelling key navigation');
|
||||
|
||||
return false;
|
||||
}
|
||||
if (settings.beforeChecked.apply($(r[checkIndex]).children(selector.input)[0]) === false) {
|
||||
module.verbose('Next option should not allow check, cancelling key navigation');
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
shortcutPressed = false;
|
||||
if (key === keyCode.escape) {
|
||||
module.verbose('Escape key pressed blurring field');
|
||||
$input.trigger('blur');
|
||||
shortcutPressed = true;
|
||||
event.stopPropagation();
|
||||
} else if (!module.can.change()) {
|
||||
shortcutPressed = true;
|
||||
} else if (!event.ctrlKey) {
|
||||
if (key === keyCode.space || (key === keyCode.enter && settings.enableEnterKey)) {
|
||||
module.verbose('Enter/space key pressed, toggling checkbox');
|
||||
module.toggle();
|
||||
shortcutPressed = true;
|
||||
} else if ($module.is('.toggle, .slider') && !module.is.radio()) {
|
||||
if (key === keyCode.left && module.is.checked()) {
|
||||
module.uncheck();
|
||||
shortcutPressed = true;
|
||||
} else if (key === keyCode.right && module.is.unchecked()) {
|
||||
module.check();
|
||||
shortcutPressed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
module.trigger.change();
|
||||
}
|
||||
module.preventDefaultOnInputTarget();
|
||||
},
|
||||
|
||||
uncheck: function () {
|
||||
if (!module.should.allowUncheck()) {
|
||||
return;
|
||||
}
|
||||
module.debug('Unchecking checkbox');
|
||||
module.set.unchecked();
|
||||
if (!module.should.ignoreCallbacks()) {
|
||||
settings.onUnchecked.call(input);
|
||||
module.trigger.change();
|
||||
}
|
||||
module.preventDefaultOnInputTarget();
|
||||
},
|
||||
|
||||
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);
|
||||
module.trigger.change();
|
||||
}
|
||||
},
|
||||
|
||||
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);
|
||||
module.trigger.change();
|
||||
}
|
||||
},
|
||||
|
||||
enable: function () {
|
||||
if (module.is.enabled()) {
|
||||
module.debug('Checkbox is already enabled');
|
||||
|
||||
return;
|
||||
}
|
||||
module.debug('Enabling checkbox');
|
||||
module.set.enabled();
|
||||
if (!module.should.ignoreCallbacks()) {
|
||||
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();
|
||||
if (!module.should.ignoreCallbacks()) {
|
||||
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.is.initialLoad()) {
|
||||
module.debug('Should not allow check, checkbox is already checked');
|
||||
|
||||
return false;
|
||||
}
|
||||
if (!module.should.ignoreCallbacks() && 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.is.initialLoad()) {
|
||||
module.debug('Should not allow uncheck, checkbox is already unchecked');
|
||||
|
||||
return false;
|
||||
}
|
||||
if (!module.should.ignoreCallbacks() && settings.beforeUnchecked.apply(input) === false) {
|
||||
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
allowIndeterminate: function () {
|
||||
if (module.is.indeterminate() && !module.is.initialLoad()) {
|
||||
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
|
||||
|
||||
return false;
|
||||
}
|
||||
if (!module.should.ignoreCallbacks() && settings.beforeIndeterminate.apply(input) === false) {
|
||||
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
allowDeterminate: function () {
|
||||
if (module.is.determinate() && !module.is.initialLoad()) {
|
||||
module.debug('Should not allow determinate, checkbox is already determinate');
|
||||
|
||||
return false;
|
||||
}
|
||||
if (!module.should.ignoreCallbacks() && settings.beforeDeterminate.apply(input) === false) {
|
||||
module.debug('Should not allow determinate, beforeDeterminate cancelled');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
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)
|
||||
;
|
||||
},
|
||||
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)
|
||||
;
|
||||
},
|
||||
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)
|
||||
;
|
||||
},
|
||||
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')
|
||||
;
|
||||
},
|
||||
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)
|
||||
;
|
||||
},
|
||||
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
|
||||
inputElement = $input[0]
|
||||
;
|
||||
if (inputElement) {
|
||||
var events = document.createEvent('HTMLEvents');
|
||||
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('change' + eventNamespace, module.event.change)
|
||||
.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 = Date.now();
|
||||
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(function () { 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 (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
|
||||
if (methodInvoked) {
|
||||
if (instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
} else {
|
||||
if (instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
|
||||
return returnedValue !== undefined
|
||||
? returnedValue
|
||||
: this;
|
||||
};
|
||||
|
||||
$.fn.checkbox.settings = {
|
||||
|
||||
name: 'Checkbox',
|
||||
namespace: 'checkbox',
|
||||
|
||||
silent: false,
|
||||
debug: false,
|
||||
verbose: false,
|
||||
performance: true,
|
||||
|
||||
// delegated event context
|
||||
uncheckable: 'auto',
|
||||
fireOnInit: false,
|
||||
enableEnterKey: true,
|
||||
|
||||
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',
|
||||
input: 'input[type="checkbox"], input[type="radio"]',
|
||||
link: 'a[href]',
|
||||
},
|
||||
|
||||
};
|
||||
})(jQuery, window, document);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,283 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Comment
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Comments
|
||||
--------------- */
|
||||
.ui.comments {
|
||||
margin: 1.5em 0;
|
||||
max-width: 650px;
|
||||
}
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Comment
|
||||
--------------- */
|
||||
.ui.comments .comment {
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 0.5em 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Nested Comments
|
||||
--------------------- */
|
||||
.ui.comments .comment > .comments {
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
padding: 1em 0 1em 1em;
|
||||
}
|
||||
.ui.comments .comment > .comments::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ui.comments .comment > .comments .comment {
|
||||
border: none;
|
||||
border-top: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Avatar
|
||||
--------------- */
|
||||
.ui.comments .comment .avatar {
|
||||
display: block;
|
||||
width: 2.5em;
|
||||
height: auto;
|
||||
float: left;
|
||||
margin: 0.2em 0 0;
|
||||
}
|
||||
.ui.comments .comment img.avatar,
|
||||
.ui.comments .comment .avatar img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.comments .comment > .content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* If there is an avatar move content over */
|
||||
.ui.comments .comment > .avatar ~ .content {
|
||||
margin-left: 3.5em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Author
|
||||
--------------- */
|
||||
.ui.comments .comment .author {
|
||||
font-size: 1em;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui.comments .comment a.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.comments .comment a.author:hover {
|
||||
color: #1e70bf;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Metadata
|
||||
--------------- */
|
||||
.ui.comments .comment .metadata {
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.ui.comments .comment .metadata > * {
|
||||
display: inline-block;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
.ui.comments .comment .metadata > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Comment Text
|
||||
--------------------- */
|
||||
.ui.comments .comment .text {
|
||||
margin: 0.25em 0 0.5em;
|
||||
font-size: 1em;
|
||||
word-wrap: break-word;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
User Actions
|
||||
--------------------- */
|
||||
.ui.comments .comment .actions {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.ui.comments .comment .actions a {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 0.75em 0 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.ui.comments .comment .actions a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.comments .comment .actions a.active,
|
||||
.ui.comments .comment .actions a:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Reply Form
|
||||
--------------------- */
|
||||
.ui.comments > .reply.form {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.ui.comments .comment .reply.form {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.ui.comments .reply.form textarea {
|
||||
font-size: 1em;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
State
|
||||
*******************************/
|
||||
|
||||
.ui.collapsed.comments,
|
||||
.ui.comments .collapsed.comments,
|
||||
.ui.comments .collapsed.comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------------
|
||||
Threaded
|
||||
--------------------- */
|
||||
.ui.threaded.comments .comment > .comments {
|
||||
margin: -1.5em 0 -1em 1.25em;
|
||||
padding: 3em 0 2em 2.25em;
|
||||
box-shadow: -1px 0 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* --------------------
|
||||
Minimal
|
||||
--------------------- */
|
||||
.ui.minimal.comments .comment .actions {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
transition: opacity 0.2s ease;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
.ui.minimal.comments .comment > .content:hover > .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Sizes
|
||||
-------------------- */
|
||||
.ui.comments {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.comments {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.comments {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.comments {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.comments {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.comments {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.comments {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.comments {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Inverted
|
||||
-------------------- */
|
||||
.ui.inverted.comments .comment {
|
||||
background-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.comments .comment .author,
|
||||
.ui.inverted.comments .comment .text {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.comments .comment .metadata,
|
||||
.ui.inverted.comments .comment .actions a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.comments .comment a.author:hover,
|
||||
.ui.inverted.comments .comment .actions a.active,
|
||||
.ui.inverted.comments .comment .actions a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.threaded.comments .comment > .comments {
|
||||
box-shadow: -1px 0 0 #555;
|
||||
}
|
||||
.ui.disabled.comments,
|
||||
.ui.comments .disabled.comment {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Comment
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.comments{margin:1.5em 0;max-width:650px}.ui.comments:first-child{margin-top:0}.ui.comments:last-child{margin-bottom:0}.ui.comments .comment{position:relative;background:0 0;margin:.5em 0 0;padding:.5em 0 0;border:none;border-top:none;line-height:1.2}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment>.comments{margin:0 0 .5em .5em;padding:1em 0 1em 1em}.ui.comments .comment>.comments::before{position:absolute;top:0;left:0}.ui.comments .comment>.comments .comment{border:none;border-top:none;background:0 0}.ui.comments .comment .avatar{display:block;width:2.5em;height:auto;float:left;margin:.2em 0 0}.ui.comments .comment .avatar img,.ui.comments .comment img.avatar{display:block;margin:0 auto;width:100%;height:100%;border-radius:.25rem}.ui.comments .comment>.content{display:block}.ui.comments .comment>.avatar~.content{margin-left:3.5em}.ui.comments .comment .author{font-size:1em;color:rgba(0,0,0,.87);font-weight:700}.ui.comments .comment a.author{cursor:pointer}.ui.comments .comment a.author:hover{color:#1e70bf}.ui.comments .comment .metadata{display:inline-block;margin-left:.5em;color:rgba(0,0,0,.4);font-size:.875em}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .5em 0 0}.ui.comments .comment .metadata>:last-child{margin-right:0}.ui.comments .comment .text{margin:.25em 0 .5em;font-size:1em;word-wrap:break-word;color:rgba(0,0,0,.87);line-height:1.3}.ui.comments .comment .actions{font-size:.875em}.ui.comments .comment .actions a{cursor:pointer;display:inline-block;margin:0 .75em 0 0;color:rgba(0,0,0,.4)}.ui.comments .comment .actions a:last-child{margin-right:0}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.8)}.ui.comments>.reply.form{margin-top:1em}.ui.comments .comment .reply.form{width:100%;margin-top:1em}.ui.comments .reply.form textarea{font-size:1em;height:12em}.ui.collapsed.comments,.ui.comments .collapsed.comment,.ui.comments .collapsed.comments{display:none}.ui.threaded.comments .comment>.comments{margin:-1.5em 0 -1em 1.25em;padding:3em 0 2em 2.25em;box-shadow:-1px 0 0 rgba(34,36,38,.15)}.ui.minimal.comments .comment .actions{opacity:0;position:absolute;top:0;right:0;left:auto;transition:opacity .2s ease;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.comments{font-size:1rem}.ui.mini.comments{font-size:.78571429rem}.ui.tiny.comments{font-size:.85714286rem}.ui.small.comments{font-size:.92857143rem}.ui.large.comments{font-size:1.14285714rem}.ui.big.comments{font-size:1.28571429rem}.ui.huge.comments{font-size:1.42857143rem}.ui.massive.comments{font-size:1.71428571rem}.ui.inverted.comments .comment{background-color:#1b1c1d}.ui.inverted.comments .comment .author,.ui.inverted.comments .comment .text{color:rgba(255,255,255,.9)}.ui.inverted.comments .comment .actions a,.ui.inverted.comments .comment .metadata{color:rgba(255,255,255,.7)}.ui.inverted.comments .comment .actions a.active,.ui.inverted.comments .comment .actions a:hover,.ui.inverted.comments .comment a.author:hover{color:#fff}.ui.inverted.threaded.comments .comment>.comments{box-shadow:-1px 0 0 #555}.ui.comments .disabled.comment,.ui.disabled.comments{opacity:.45;pointer-events:none}
|
||||
@ -0,0 +1,300 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Container
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Container
|
||||
*******************************/
|
||||
|
||||
|
||||
/* All Sizes */
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: auto;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.ui.ui.ui.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 723px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(723px + 2rem);
|
||||
}
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(723px + 3rem);
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(723px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Monitor */
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 933px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(933px + 2rem);
|
||||
}
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(933px + 3rem);
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(933px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Monitor */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 1127px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(1127px + 2rem);
|
||||
}
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(1127px + 3rem);
|
||||
}
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(1127px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Text Container */
|
||||
.ui.text.container {
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
max-width: 700px;
|
||||
line-height: 1.5;
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
/* Wide Container */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.ui.ui.wide.container {
|
||||
width: 867.6px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.ui.ui.wide.container {
|
||||
width: 1119.6px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.ui.ui.wide.container {
|
||||
width: 1352.4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Scrolling
|
||||
--------------- */
|
||||
.ui.scrolling.container {
|
||||
overflow: auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.scrolling.container.short {
|
||||
max-height: 11.25em;
|
||||
}
|
||||
.ui.scrolling.container.short.resizable {
|
||||
height: 11.25em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"] {
|
||||
max-height: 7.5em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"].resizable {
|
||||
height: 7.5em;
|
||||
}
|
||||
.ui.scrolling.container {
|
||||
max-height: 15em;
|
||||
}
|
||||
.ui.scrolling.container.long {
|
||||
max-height: 30em;
|
||||
}
|
||||
.ui.scrolling.container.long.resizable {
|
||||
height: 30em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"] {
|
||||
max-height: 45em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"].resizable {
|
||||
height: 45em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.scrolling.container.short {
|
||||
max-height: 13.5em;
|
||||
}
|
||||
.ui.scrolling.container.short.resizable {
|
||||
height: 13.5em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"] {
|
||||
max-height: 9em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"].resizable {
|
||||
height: 9em;
|
||||
}
|
||||
.ui.scrolling.container {
|
||||
max-height: 18em;
|
||||
}
|
||||
.ui.scrolling.container.resizable {
|
||||
height: 18em;
|
||||
}
|
||||
.ui.scrolling.container.long {
|
||||
max-height: 36em;
|
||||
}
|
||||
.ui.scrolling.container.long.resizable {
|
||||
height: 36em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"] {
|
||||
max-height: 54em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"].resizable {
|
||||
height: 54em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.scrolling.container.short {
|
||||
max-height: 18em;
|
||||
}
|
||||
.ui.scrolling.container.short.resizable {
|
||||
height: 18em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"] {
|
||||
max-height: 12em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"].resizable {
|
||||
height: 12em;
|
||||
}
|
||||
.ui.scrolling.container {
|
||||
max-height: 24em;
|
||||
}
|
||||
.ui.scrolling.container.resizable {
|
||||
height: 24em;
|
||||
}
|
||||
.ui.scrolling.container.long {
|
||||
max-height: 48em;
|
||||
}
|
||||
.ui.scrolling.container.long.resizable {
|
||||
height: 48em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"] {
|
||||
max-height: 72em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"].resizable {
|
||||
height: 72em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.scrolling.container.short {
|
||||
max-height: 22.5em;
|
||||
}
|
||||
.ui.scrolling.container.short.resizable {
|
||||
height: 22.5em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"] {
|
||||
max-height: 15em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very short"].resizable {
|
||||
height: 15em;
|
||||
}
|
||||
.ui.scrolling.container {
|
||||
max-height: 30em;
|
||||
}
|
||||
.ui.scrolling.container.resizable {
|
||||
height: 30em;
|
||||
}
|
||||
.ui.scrolling.container.long {
|
||||
max-height: 60em;
|
||||
}
|
||||
.ui.scrolling.container.long.resizable {
|
||||
height: 60em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"] {
|
||||
max-height: 90em;
|
||||
}
|
||||
.ui.scrolling.container[class*="very long"].resizable {
|
||||
height: 90em;
|
||||
}
|
||||
}
|
||||
.ui.resizable.scrolling.container {
|
||||
resize: vertical;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Container
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:723px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(723px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(723px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(723px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:933px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(933px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(933px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(933px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1127px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1127px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1127px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1127px + 5rem)}}.ui.text.container{font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";max-width:700px;line-height:1.5;font-size:1.14285714rem}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.wide.container{width:867.6px}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.wide.container{width:1119.6px}}@media only screen and (min-width:1200px){.ui.ui.ui.wide.container{width:1352.4px}}.ui.fluid.container{width:100%}.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;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.scrolling.container{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:none}@media only screen and (max-width:767.98px){.ui.scrolling.container.short{max-height:11.25em}.ui.scrolling.container.short.resizable{height:11.25em}.ui.scrolling.container[class*="very short"]{max-height:7.5em}.ui.scrolling.container[class*="very short"].resizable{height:7.5em}.ui.scrolling.container{max-height:15em}.ui.scrolling.container.long{max-height:30em}.ui.scrolling.container.long.resizable{height:30em}.ui.scrolling.container[class*="very long"]{max-height:45em}.ui.scrolling.container[class*="very long"].resizable{height:45em}}@media only screen and (min-width:768px){.ui.scrolling.container.short{max-height:13.5em}.ui.scrolling.container.short.resizable{height:13.5em}.ui.scrolling.container[class*="very short"]{max-height:9em}.ui.scrolling.container[class*="very short"].resizable{height:9em}.ui.scrolling.container{max-height:18em}.ui.scrolling.container.resizable{height:18em}.ui.scrolling.container.long{max-height:36em}.ui.scrolling.container.long.resizable{height:36em}.ui.scrolling.container[class*="very long"]{max-height:54em}.ui.scrolling.container[class*="very long"].resizable{height:54em}}@media only screen and (min-width:992px){.ui.scrolling.container.short{max-height:18em}.ui.scrolling.container.short.resizable{height:18em}.ui.scrolling.container[class*="very short"]{max-height:12em}.ui.scrolling.container[class*="very short"].resizable{height:12em}.ui.scrolling.container{max-height:24em}.ui.scrolling.container.resizable{height:24em}.ui.scrolling.container.long{max-height:48em}.ui.scrolling.container.long.resizable{height:48em}.ui.scrolling.container[class*="very long"]{max-height:72em}.ui.scrolling.container[class*="very long"].resizable{height:72em}}@media only screen and (min-width:1920px){.ui.scrolling.container.short{max-height:22.5em}.ui.scrolling.container.short.resizable{height:22.5em}.ui.scrolling.container[class*="very short"]{max-height:15em}.ui.scrolling.container[class*="very short"].resizable{height:15em}.ui.scrolling.container{max-height:30em}.ui.scrolling.container.resizable{height:30em}.ui.scrolling.container.long{max-height:60em}.ui.scrolling.container.long.resizable{height:60em}.ui.scrolling.container[class*="very long"]{max-height:90em}.ui.scrolling.container[class*="very long"].resizable{height:90em}}.ui.resizable.scrolling.container{resize:vertical;max-height:none}
|
||||
@ -0,0 +1,363 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Dimmer
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Dimmer
|
||||
*******************************/
|
||||
|
||||
.dimmable:not(body) {
|
||||
position: relative;
|
||||
}
|
||||
.ui.dimmer {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 1em;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0;
|
||||
line-height: 1;
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.5s;
|
||||
transition: all 0.5s linear;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
will-change: opacity;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Dimmer Content */
|
||||
.ui.dimmer > .content {
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.segment > .ui.dimmer:not(.page) {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.ui.dimmer:not(.inverted) {
|
||||
|
||||
/* IE11 */
|
||||
scrollbar-face-color: #656565;
|
||||
scrollbar-shadow-color: #656565;
|
||||
scrollbar-track-color: #323232;
|
||||
scrollbar-arrow-color: #323232;
|
||||
|
||||
/* firefox: first color thumb, second track */
|
||||
scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Animating */
|
||||
.animating.dimmable:not(body),
|
||||
.dimmed.dimmable:not(body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animating / Active / Visible */
|
||||
.dimmed.dimmable > .ui.animating.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.dimmer,
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 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: fixed;
|
||||
transform-style: "";
|
||||
perspective: 2000px;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.ui.page.dimmer.modals {
|
||||
-moz-perspective: none;
|
||||
}
|
||||
body.animating.in.dimmable,
|
||||
body.dimmed.dimmable {
|
||||
overflow: hidden;
|
||||
}
|
||||
body.dimmable > .dimmer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Blurring
|
||||
--------------- */
|
||||
@supports (not (-webkit-backdrop-filter: none)) and (not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))) {
|
||||
.blurring.dimmable > :not(.dimmer) {
|
||||
filter: initial;
|
||||
transition: 800ms filter ease;
|
||||
}
|
||||
.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
|
||||
filter: blur(5px) grayscale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dimmer Color */
|
||||
.blurring.dimmable > .dimmer {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
-webkit-backdrop-filter: blur(5px) grayscale(0.7);
|
||||
backdrop-filter: blur(5px) grayscale(0.7);
|
||||
}
|
||||
.blurring.dimmable > .inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Aligned
|
||||
--------------- */
|
||||
.ui.dimmer > .top.aligned.content > * {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.dimmer > .bottom.aligned.content > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Shades
|
||||
--------------- */
|
||||
.medium.medium.medium.medium.medium.dimmer {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.light.light.light.light.light.dimmer {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.very.very.very.very.light.dimmer {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.ui.inverted.dimmer > .content,
|
||||
.ui.inverted.dimmer > .content > * {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted Shades
|
||||
--------------- */
|
||||
.medium.medium.medium.medium.medium.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
.light.light.light.light.light.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.very.very.very.very.light.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Simple
|
||||
--------------- */
|
||||
|
||||
/* Displays without javascript */
|
||||
.ui.simple.dimmer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -100;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.dimmer {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 1;
|
||||
}
|
||||
.ui.simple.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.inverted.dimmer {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Partially
|
||||
---------------- */
|
||||
.ui[class*="top dimmer"],
|
||||
.ui[class*="center dimmer"],
|
||||
.ui[class*="bottom dimmer"] {
|
||||
height: auto;
|
||||
}
|
||||
.ui[class*="bottom dimmer"] {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui[class*="center dimmer"] {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="top dimmer"] {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="center dimmer"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.segment > .ui.ui[class*="bottom dimmer"] {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].in {
|
||||
animation-name: fadeInUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].in {
|
||||
animation-name: fadeInDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade up"].out {
|
||||
animation-name: fadeOutUpCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].transition[class*="fade down"].out {
|
||||
animation-name: fadeOutDownCenter;
|
||||
}
|
||||
.ui[class*="center dimmer"].bounce.transition {
|
||||
animation-name: bounceCenter;
|
||||
}
|
||||
@keyframes fadeInUpCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDownCenter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutUpCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-45%);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutDownCenter {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-55%);
|
||||
}
|
||||
}
|
||||
@keyframes bounceCenter {
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(calc(-50% - 30px));
|
||||
}
|
||||
60% {
|
||||
transform: translateY(calc(-50% - 15px));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,730 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Dimmer
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.dimmer = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = Date.now(),
|
||||
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,
|
||||
|
||||
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()) {
|
||||
$dimmer = settings.dimmerName
|
||||
? $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName)
|
||||
: $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 occurred 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(settings))
|
||||
;
|
||||
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 () {};
|
||||
if ((!module.is.dimmed() || module.is.animating()) && module.is.enabled()) {
|
||||
if (settings.onShow.call(element) === false) {
|
||||
module.verbose('Show callback returned false cancelling dimmer show');
|
||||
|
||||
return;
|
||||
}
|
||||
module.debug('Showing dimmer', $dimmer, settings);
|
||||
module.set.variation();
|
||||
module.animate.show(callback);
|
||||
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()) {
|
||||
if (settings.onHide.call(element) === false) {
|
||||
module.verbose('Hide callback returned false cancelling dimmer hide');
|
||||
|
||||
return;
|
||||
}
|
||||
module.debug('Hiding dimmer', $dimmer);
|
||||
module.animate.hide(callback);
|
||||
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 {
|
||||
if (module.is.closable()) {
|
||||
module.hide();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
animate: {
|
||||
show: function (callback) {
|
||||
callback = isFunction(callback)
|
||||
? callback
|
||||
: function () {};
|
||||
if (settings.useCSS && $.fn.transition !== undefined) {
|
||||
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({
|
||||
debug: settings.debug,
|
||||
verbose: settings.verbose,
|
||||
silent: settings.silent,
|
||||
displayType: settings.useFlex
|
||||
? 'flex'
|
||||
: 'block',
|
||||
animation: (settings.transition.showMethod || settings.transition) + ' in',
|
||||
queue: false,
|
||||
duration: module.get.duration(),
|
||||
useFailSafe: true,
|
||||
onStart: function () {
|
||||
module.set.dimmed();
|
||||
},
|
||||
onComplete: function () {
|
||||
module.set.active();
|
||||
settings.onVisible.call($dimmer);
|
||||
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();
|
||||
settings.onVisible.call($dimmer);
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
hide: function (callback) {
|
||||
callback = isFunction(callback)
|
||||
? callback
|
||||
: function () {};
|
||||
if (settings.useCSS && $.fn.transition !== undefined) {
|
||||
module.verbose('Hiding dimmer with css');
|
||||
$dimmer
|
||||
.transition({
|
||||
debug: settings.debug,
|
||||
verbose: settings.verbose,
|
||||
silent: settings.silent,
|
||||
displayType: settings.useFlex
|
||||
? 'flex'
|
||||
: 'block',
|
||||
animation: (settings.transition.hideMethod || settings.transition) + ' out',
|
||||
queue: false,
|
||||
duration: module.get.duration(),
|
||||
useFailSafe: true,
|
||||
onComplete: function () {
|
||||
module.remove.dimmed();
|
||||
module.remove.variation();
|
||||
module.remove.active();
|
||||
settings.onHidden.call($dimmer);
|
||||
callback();
|
||||
},
|
||||
})
|
||||
;
|
||||
} else {
|
||||
module.verbose('Hiding dimmer with javascript');
|
||||
$dimmer
|
||||
.stop()
|
||||
.fadeOut(module.get.duration(), function () {
|
||||
module.remove.dimmed();
|
||||
module.remove.active();
|
||||
$dimmer.removeAttr('style');
|
||||
settings.onHidden.call($dimmer);
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
get: {
|
||||
dimmer: function () {
|
||||
return $dimmer;
|
||||
},
|
||||
duration: function () {
|
||||
if (module.is.active()) {
|
||||
return settings.transition.hideDuration || settings.duration.hide || settings.duration;
|
||||
}
|
||||
|
||||
return settings.transition.showDuration || settings.duration.show || settings.duration;
|
||||
},
|
||||
},
|
||||
|
||||
has: {
|
||||
dimmer: function () {
|
||||
if (settings.dimmerName) {
|
||||
return $module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0;
|
||||
}
|
||||
|
||||
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') {
|
||||
return settings.on !== 'hover';
|
||||
}
|
||||
|
||||
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
|
||||
;
|
||||
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
|
||||
if (isRGB) {
|
||||
colorArray[2] = colorArray[2].replace(')', '');
|
||||
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 = Date.now();
|
||||
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(function () { 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 ($allModules.length > 1) {
|
||||
title += ' (' + $allModules.length + ')';
|
||||
}
|
||||
if (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
|
||||
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,
|
||||
},
|
||||
// whether the dynamically created dimmer should have a loader
|
||||
displayLoader: false,
|
||||
loaderText: false,
|
||||
loaderVariation: '',
|
||||
|
||||
onChange: function () {},
|
||||
onShow: function () {},
|
||||
onHide: function () {},
|
||||
onVisible: function () {},
|
||||
onHidden: 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',
|
||||
loader: 'ui loader',
|
||||
},
|
||||
|
||||
selector: {
|
||||
dimmer: '> .ui.dimmer',
|
||||
content: '.ui.dimmer > .content, .ui.dimmer > .content > .center',
|
||||
},
|
||||
|
||||
template: {
|
||||
dimmer: function (settings) {
|
||||
var
|
||||
d = $('<div/>').addClass('ui dimmer'),
|
||||
l
|
||||
;
|
||||
if (settings.displayLoader) {
|
||||
l = $('<div/>')
|
||||
.addClass(settings.className.loader)
|
||||
.addClass(settings.loaderVariation)
|
||||
;
|
||||
if (settings.loaderText) {
|
||||
l.text(settings.loaderText);
|
||||
l.addClass('text');
|
||||
}
|
||||
d.append(l);
|
||||
}
|
||||
|
||||
return d;
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
})(jQuery, window, document);
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Dimmer
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background:rgba(0,0,0,.85);opacity:0;line-height:1;animation-fill-mode:both;animation-duration:.5s;transition:all .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer:not(.page){border-radius:inherit}.ui.dimmer:not(.inverted)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.ui.dimmer:not(.inverted){scrollbar-face-color:#656565;scrollbar-shadow-color:#656565;scrollbar-track-color:#323232;scrollbar-arrow-color:#323232;scrollbar-color:rgba(255,255,255,.25) rgba(255,255,255,.1)}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:flex;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.dimmed.dimmable>.ui.animating.legacy.dimmer,.dimmed.dimmable>.ui.visible.legacy.dimmer,.ui.active.legacy.dimmer{display:block}.ui[class*="top aligned"].dimmer{justify-content:flex-start}.ui[class*="bottom aligned"].dimmer{justify-content:flex-end}.ui.page.dimmer{position:fixed;transform-style:"";perspective:2000px;transform-origin:center center}.ui.page.dimmer.modals{-moz-perspective:none}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}@supports (not (-webkit-backdrop-filter:none)) and (not ((-webkit-backdrop-filter:none) or (backdrop-filter:none))){.blurring.dimmable>:not(.dimmer){filter:initial;transition:.8s filter ease}.blurring.dimmed.dimmable>:not(.dimmer):not(.popup){filter:blur(5px) grayscale(.7)}}.blurring.dimmable>.dimmer{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(5px) grayscale(.7);backdrop-filter:blur(5px) grayscale(.7)}.blurring.dimmable>.inverted.dimmer{background:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.medium.medium.medium.medium.medium.dimmer{background:rgba(0,0,0,.65)}.light.light.light.light.light.dimmer{background:rgba(0,0,0,.45)}.very.very.very.very.light.dimmer{background:rgba(0,0,0,.25)}.ui.inverted.dimmer{background:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content,.ui.inverted.dimmer>.content>*{color:#000}.medium.medium.medium.medium.medium.inverted.dimmer{background:rgba(255,255,255,.65)}.light.light.light.light.light.inverted.dimmer{background:rgba(255,255,255,.45)}.very.very.very.very.light.inverted.dimmer{background:rgba(255,255,255,.25)}.ui.simple.dimmer{display:block;overflow:hidden;opacity:0;width:0;height:0;z-index:-100;background:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background:rgba(255,255,255,.85)}.ui[class*="bottom dimmer"],.ui[class*="center dimmer"],.ui[class*="top dimmer"]{height:auto}.ui[class*="bottom dimmer"]{top:auto;bottom:0}.ui[class*="center dimmer"]{top:50%;transform:translateY(-50%)}.ui.segment>.ui.ui[class*="top dimmer"]{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.segment>.ui.ui[class*="center dimmer"]{border-radius:0}.ui.segment>.ui.ui[class*="bottom dimmer"]{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="center dimmer"].transition[class*="fade up"].in{animation-name:fadeInUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].in{animation-name:fadeInDownCenter}.ui[class*="center dimmer"].transition[class*="fade up"].out{animation-name:fadeOutUpCenter}.ui[class*="center dimmer"].transition[class*="fade down"].out{animation-name:fadeOutDownCenter}.ui[class*="center dimmer"].bounce.transition{animation-name:bounceCenter}@keyframes fadeInUpCenter{0%{opacity:0;transform:translateY(-40%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeInDownCenter{0%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:translateY(-50%)}}@keyframes fadeOutUpCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-45%)}}@keyframes fadeOutDownCenter{0%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-55%)}}@keyframes bounceCenter{0%,100%,20%,50%,80%{transform:translateY(-50%)}40%{transform:translateY(calc(-50% - 30px))}60%{transform:translateY(calc(-50% - 15px))}}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,279 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Divider
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Divider
|
||||
*******************************/
|
||||
|
||||
.ui.divider {
|
||||
margin: 1rem 0;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Basic
|
||||
--------------- */
|
||||
.ui.divider:not(.vertical):not(.horizontal) {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
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: "";
|
||||
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 1em top 50%;
|
||||
}
|
||||
.ui.horizontal.divider::after {
|
||||
background-position: left 1em top 50%;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Vertical
|
||||
--------------- */
|
||||
.ui.vertical.divider {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.ui.vertical.divider::before,
|
||||
.ui.vertical.divider::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
content: "";
|
||||
z-index: 3;
|
||||
border-left: 1px solid rgba(34, 36, 38, 0.15);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 0;
|
||||
height: calc(100% - 1rem);
|
||||
}
|
||||
.ui.vertical.divider::before {
|
||||
top: -100%;
|
||||
}
|
||||
.ui.vertical.divider::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Inside grid */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.grid .ui.vertical.divider,
|
||||
.ui.grid .stackable.row .ui.vertical.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: "";
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider::before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider::before,
|
||||
.ui.stackable.grid .ui.vertical.divider::after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider::after {
|
||||
left: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
content: "";
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider::before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider::before {
|
||||
background-position: right 1em top 50%;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider::after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider::after {
|
||||
background-position: left 1em top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Icon
|
||||
--------------- */
|
||||
.ui.divider > .icon {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Header
|
||||
--------------- */
|
||||
.ui.horizontal.divider[class*="left aligned"]::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.horizontal.divider[class*="left aligned"]::after {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.horizontal.divider[class*="right aligned"]::before {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.horizontal.divider[class*="right aligned"]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
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: #fff;
|
||||
}
|
||||
.ui.divider.inverted,
|
||||
.ui.divider.inverted::after,
|
||||
.ui.divider.inverted::before {
|
||||
border-color: rgba(34, 36, 38, 0.15) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(34, 36, 38, 0.15) !important;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Fitted
|
||||
--------------- */
|
||||
.ui.fitted.divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Clearing
|
||||
--------------- */
|
||||
.ui.clearing.divider {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Section
|
||||
--------------- */
|
||||
.ui.section.divider {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sizes
|
||||
--------------- */
|
||||
.ui.divider {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.divider {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.divider {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.divider {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.divider {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.divider {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.divider {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.divider {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
.ui.horizontal.divider::before,
|
||||
.ui.horizontal.divider::after {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC");
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.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 {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,155 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Embed
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.embed {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: #dcddde;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
/* -----------------
|
||||
Embedded Content
|
||||
------------------ */
|
||||
.ui.embed iframe,
|
||||
.ui.embed embed,
|
||||
.ui.embed object {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* -----------------
|
||||
Embed
|
||||
------------------ */
|
||||
.ui.embed > .embed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Placeholder
|
||||
--------------- */
|
||||
.ui.embed > .placeholder {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Icon
|
||||
--------------- */
|
||||
.ui.embed > i.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
.ui.embed > i.icon::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
content: "";
|
||||
background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.ui.embed > i.icon::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
color: #fff;
|
||||
font-size: 6rem;
|
||||
text-shadow: 0 2px 10px rgba(34, 36, 38, 0.2);
|
||||
transition: opacity 0.5s ease, color 0.5s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Hover
|
||||
--------------- */
|
||||
.ui.embed i.icon:hover::after {
|
||||
background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.embed i.icon:hover::before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Active
|
||||
--------------- */
|
||||
.ui.active.embed > i.icon,
|
||||
.ui.active.embed > .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ui.active.embed > .embed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.square.embed {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
.ui[class*="4:3"].embed {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
.ui[class*="16:9"].embed {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
.ui[class*="21:9"].embed {
|
||||
padding-bottom: 42.85714286%;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Video Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,678 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Embed
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.embed = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = Date.now(),
|
||||
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,
|
||||
|
||||
$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()
|
||||
;
|
||||
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 || ($module.data(metadata.icon) !== undefined
|
||||
? $module.data(metadata.icon)
|
||||
: module.determine.icon());
|
||||
},
|
||||
source: function (url) {
|
||||
return 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 || ($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 = Date.now();
|
||||
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(function () { 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 ($allModules.length > 1) {
|
||||
title += ' (' + $allModules.length + ')';
|
||||
}
|
||||
if (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
|
||||
if (methodInvoked) {
|
||||
if (instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
} else {
|
||||
if (instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
|
||||
return returnedValue !== undefined
|
||||
? returnedValue
|
||||
: this;
|
||||
};
|
||||
|
||||
$.fn.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: '#444',
|
||||
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: {
|
||||
deQuote: function (string, encode) {
|
||||
return String(string).replace(/"/g, encode ? '"' : '');
|
||||
},
|
||||
iframe: function (url, parameters) {
|
||||
var
|
||||
src = url,
|
||||
deQuote = $.fn.embed.settings.templates.deQuote
|
||||
;
|
||||
if (parameters) {
|
||||
src += '?' + parameters;
|
||||
}
|
||||
|
||||
return ''
|
||||
+ '<iframe src="' + deQuote(src) + '"'
|
||||
+ ' width="100%" height="100%"'
|
||||
+ ' msallowFullScreen allowFullScreen></iframe>';
|
||||
},
|
||||
placeholder: function (image, icon) {
|
||||
var
|
||||
html = '',
|
||||
deQuote = $.fn.embed.settings.templates.deQuote
|
||||
;
|
||||
if (icon) {
|
||||
html += '<i class="' + deQuote(icon) + ' icon"></i>';
|
||||
}
|
||||
if (image) {
|
||||
html += '<img class="placeholder" src="' + deQuote(image) + '">';
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
},
|
||||
|
||||
// NOT YET IMPLEMENTED
|
||||
api: false,
|
||||
onPause: function () {},
|
||||
onPlay: function () {},
|
||||
onStop: function () {},
|
||||
|
||||
};
|
||||
})(jQuery, window, document);
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Embed
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.embed{position:relative;max-width:100%;height:0;overflow:hidden;background:#dcddde;padding-bottom:56.25%}.ui.embed embed,.ui.embed iframe,.ui.embed object{position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:hidden}.ui.embed>.embed{display:none}.ui.embed>.placeholder{position:absolute;cursor:pointer;top:0;left:0;display:block;width:100%;height:100%;background:radial-gradient(transparent 45%,rgba(0,0,0,.3))}.ui.embed>i.icon{cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.ui.embed>i.icon::after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;content:"";background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:.5;transition:opacity .5s ease}.ui.embed>i.icon::before{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);color:#fff;font-size:6rem;text-shadow:0 2px 10px rgba(34,36,38,.2);transition:opacity .5s ease,color .5s ease;z-index:10}.ui.embed i.icon:hover::after{background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:1}.ui.embed i.icon:hover::before{color:#fff}.ui.active.embed>.placeholder,.ui.active.embed>i.icon{display:none}.ui.active.embed>.embed{display:block}.ui.square.embed{padding-bottom:100%}.ui[class*="4:3"].embed{padding-bottom:75%}.ui[class*="16:9"].embed{padding-bottom:56.25%}.ui[class*="21:9"].embed{padding-bottom:42.85714286%}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,788 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Feed
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Activity Feed
|
||||
*******************************/
|
||||
|
||||
.ui.feed {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.ui.feed:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.feed:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Event */
|
||||
.ui.feed > .event {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding: 0.21428571rem 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
}
|
||||
.ui.feed > .event:not(:first-child) {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.feed:not(.connected) > .event:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.feed > .event:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Event Label */
|
||||
.ui.feed > .event > .label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: 2.5em;
|
||||
height: auto;
|
||||
align-self: stretch;
|
||||
text-align: left;
|
||||
}
|
||||
.ui.feed > .event > .label .icon {
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
width: 100%;
|
||||
padding: 0.25em;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.ui.feed > .event > .label img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 500rem;
|
||||
}
|
||||
.ui.feed > .event > .label > .text {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.ui.feed > .event > .label > .text.ui {
|
||||
margin-top: 0.65em;
|
||||
}
|
||||
.ui.feed > .event > .label > .text.multiline {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.feed > .event > .label > .text.multiline.ui {
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.ui.feed > .event > .label > .ui.label {
|
||||
margin-top: 0.4em;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.ui.feed > .event > .label + .content {
|
||||
margin: 0.5em 0 0.35714286em 1.14285714em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
|
||||
/* Content */
|
||||
.ui.feed > .event > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
align-self: stretch;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.ui.feed > .event:last-child > .content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.feed > .event > .content a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Date
|
||||
--------------- */
|
||||
.ui.feed > .event > .content .date {
|
||||
margin: -0.5rem 0 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Summary
|
||||
--------------- */
|
||||
.ui.feed > .event > .content .summary {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Summary Image */
|
||||
.ui.feed > .event > .content .summary img {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 10em;
|
||||
margin: -0.25em 0.25em 0 0;
|
||||
border-radius: 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inline Date
|
||||
--------------- */
|
||||
|
||||
/* Date inside Summary */
|
||||
.ui.feed > .event > .content .summary > .date {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
font-size: 0.85714286em;
|
||||
font-style: normal;
|
||||
margin: 0 0 0 0.5em;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.ui.feed > .event > .content .summary > .date:not(.floated) {
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
User
|
||||
--------------- */
|
||||
.ui.feed > .event > .content .user {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.feed > .event > .content .user img {
|
||||
margin: -0.25em 0.25em 0 0;
|
||||
width: auto;
|
||||
height: 10em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Extra Summary
|
||||
--------------- */
|
||||
.ui.feed > .event > .content .extra {
|
||||
margin: 0.5em 0 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.ui.feed > .event > .content .extra.images img {
|
||||
display: inline-block;
|
||||
margin: 0 0.25em 0 0;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.feed > .event > .content .extra.text {
|
||||
padding: 0;
|
||||
border-left: none;
|
||||
font-size: 1em;
|
||||
max-width: 500px;
|
||||
line-height: 1.4285em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Meta
|
||||
--------------- */
|
||||
.ui.feed > .event > .content .meta {
|
||||
display: inline-block;
|
||||
font-size: 0.85714286em;
|
||||
margin: 0.5em 0 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.ui.feed > .event > .content .meta > * {
|
||||
position: relative;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > *::after {
|
||||
content: "";
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
top: 0;
|
||||
left: -1em;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .like {
|
||||
color: "";
|
||||
transition: 0.2s color ease;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .like:hover i.icon {
|
||||
color: #ff2733;
|
||||
}
|
||||
.ui.feed > .event > .content .meta .active.like i.icon {
|
||||
color: #ef404a;
|
||||
}
|
||||
|
||||
/* First element */
|
||||
.ui.feed > .event > .content .meta > :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.feed > .event > .content .meta > :first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Action */
|
||||
.ui.feed > .event > .content .meta a,
|
||||
.ui.feed > .event > .content .meta > i.icon {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
.ui.feed > .event > .content .meta a:hover,
|
||||
.ui.feed > .event > .content .meta a:hover i.icon,
|
||||
.ui.feed > .event > .content .meta > i.icon:hover {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* rtl:rename */
|
||||
.ui.feed .right.floated {
|
||||
float: right;
|
||||
}
|
||||
.ui.connected.feed > .event {
|
||||
position: relative;
|
||||
}
|
||||
.ui.connected.feed > .event:not(:last-child)::before {
|
||||
border-left: 2px solid rgba(34, 36, 38, 0.15);
|
||||
content: "";
|
||||
left: 1.2em;
|
||||
position: absolute;
|
||||
top: 2.1em;
|
||||
height: calc(100% - 1.5em);
|
||||
}
|
||||
.ui.connected.feed > .event > .label {
|
||||
position: relative;
|
||||
}
|
||||
.ui.inverted.connected.feed > .event::before {
|
||||
border-left-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.divided.feed > .event:not(:first-child) {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.inverted.divided.feed > .event {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.ui.feed > .event > .label[data-text]::before {
|
||||
content: attr(data-text);
|
||||
}
|
||||
.ui.feed > .event > .label[data-text]::before,
|
||||
.ui.ordered.feed > .event > .label::before {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 2.5em;
|
||||
background: #bbbbbb;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
padding-top: 0.6em;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 0.3em;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.ui.ordered.feed {
|
||||
counter-reset: ordered;
|
||||
}
|
||||
.ui.ordered.feed > .event > .label::before {
|
||||
counter-increment: ordered;
|
||||
content: counter(ordered);
|
||||
}
|
||||
.ui.ordered.basic.feed > .event > .label::before,
|
||||
.ui.ordered.feed > .event > .basic.label::before {
|
||||
border-color: #bbbbbb;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
.ui.ordered.connected.feed > .event::before {
|
||||
top: 2.7em;
|
||||
height: calc(100% - 2.5em);
|
||||
}
|
||||
|
||||
/* workaround until all browsers support :has() */
|
||||
.ui.connected.labeled.feed > .event::before,
|
||||
.ui.connected.feed > .labeled.event::before {
|
||||
top: 4.85em;
|
||||
height: calc(100% - 4.6499999999999995em);
|
||||
}
|
||||
@supports selector(:has(.f)) {
|
||||
.ui.connected.feed > .event:has(> .label[data-text] > *)::before,
|
||||
.ui.ordered.connected.feed > .event:has(> .label > *)::before {
|
||||
top: 4.85em;
|
||||
height: calc(100% - 4.6499999999999995em);
|
||||
}
|
||||
}
|
||||
.ui.feed {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.feed {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.feed {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.feed {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.feed {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.feed {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.feed {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.feed {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
/* ------------------
|
||||
Inverted
|
||||
------------------- */
|
||||
.ui.inverted.feed > .event {
|
||||
background: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.feed > .event > .label i.icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.feed > .event > .label .text:not(.ui) {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.feed > .event > .content .date,
|
||||
.ui.inverted.feed > .event > .content .meta .like {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.feed > .event > .content .summary,
|
||||
.ui.inverted.feed > .event > .content .extra.text {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.feed > .event > .content .meta .like:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.feed > .event > .content .meta .active.like i.icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Colors
|
||||
--------------- */
|
||||
.ui.ui.feed > .event > .primary.label::before,
|
||||
.ui.primary.feed > .event > .label::before {
|
||||
background: #2185d0;
|
||||
}
|
||||
.ui.primary.connected.feed > .event::before,
|
||||
.ui.connected.feed > .primary.event::before {
|
||||
border-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.primary.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.primary.event::before {
|
||||
border-color: #54c8ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .primary.basic.label::before,
|
||||
.ui.primary.basic.feed > .event > .label::before {
|
||||
color: #2185d0;
|
||||
}
|
||||
.ui.feed > .event > .inverted.primary.label::before,
|
||||
.ui.inverted.primary.feed > .event > .label::before {
|
||||
background: #54c8ff;
|
||||
}
|
||||
.ui.feed > .event > .inverted.primary.basic.label::before,
|
||||
.ui.inverted.primary.basic.feed > .event > .label::before {
|
||||
color: #54c8ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .secondary.label::before,
|
||||
.ui.secondary.feed > .event > .label::before {
|
||||
background: #1b1c1d;
|
||||
}
|
||||
.ui.secondary.connected.feed > .event::before,
|
||||
.ui.connected.feed > .secondary.event::before {
|
||||
border-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.secondary.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.secondary.event::before {
|
||||
border-color: #545454;
|
||||
}
|
||||
.ui.ui.feed > .event > .secondary.basic.label::before,
|
||||
.ui.secondary.basic.feed > .event > .label::before {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.feed > .event > .inverted.secondary.label::before,
|
||||
.ui.inverted.secondary.feed > .event > .label::before {
|
||||
background: #545454;
|
||||
}
|
||||
.ui.feed > .event > .inverted.secondary.basic.label::before,
|
||||
.ui.inverted.secondary.basic.feed > .event > .label::before {
|
||||
color: #545454;
|
||||
}
|
||||
.ui.ui.feed > .event > .red.label::before,
|
||||
.ui.red.feed > .event > .label::before {
|
||||
background: #db2828;
|
||||
}
|
||||
.ui.red.connected.feed > .event::before,
|
||||
.ui.connected.feed > .red.event::before {
|
||||
border-color: #db2828;
|
||||
}
|
||||
.ui.inverted.red.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.red.event::before {
|
||||
border-color: #ff695e;
|
||||
}
|
||||
.ui.ui.feed > .event > .red.basic.label::before,
|
||||
.ui.red.basic.feed > .event > .label::before {
|
||||
color: #db2828;
|
||||
}
|
||||
.ui.feed > .event > .inverted.red.label::before,
|
||||
.ui.inverted.red.feed > .event > .label::before {
|
||||
background: #ff695e;
|
||||
}
|
||||
.ui.feed > .event > .inverted.red.basic.label::before,
|
||||
.ui.inverted.red.basic.feed > .event > .label::before {
|
||||
color: #ff695e;
|
||||
}
|
||||
.ui.ui.feed > .event > .orange.label::before,
|
||||
.ui.orange.feed > .event > .label::before {
|
||||
background: #f2711c;
|
||||
}
|
||||
.ui.orange.connected.feed > .event::before,
|
||||
.ui.connected.feed > .orange.event::before {
|
||||
border-color: #f2711c;
|
||||
}
|
||||
.ui.inverted.orange.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.orange.event::before {
|
||||
border-color: #ff851b;
|
||||
}
|
||||
.ui.ui.feed > .event > .orange.basic.label::before,
|
||||
.ui.orange.basic.feed > .event > .label::before {
|
||||
color: #f2711c;
|
||||
}
|
||||
.ui.feed > .event > .inverted.orange.label::before,
|
||||
.ui.inverted.orange.feed > .event > .label::before {
|
||||
background: #ff851b;
|
||||
}
|
||||
.ui.feed > .event > .inverted.orange.basic.label::before,
|
||||
.ui.inverted.orange.basic.feed > .event > .label::before {
|
||||
color: #ff851b;
|
||||
}
|
||||
.ui.ui.feed > .event > .yellow.label::before,
|
||||
.ui.yellow.feed > .event > .label::before {
|
||||
background: #fbbd08;
|
||||
}
|
||||
.ui.yellow.connected.feed > .event::before,
|
||||
.ui.connected.feed > .yellow.event::before {
|
||||
border-color: #fbbd08;
|
||||
}
|
||||
.ui.inverted.yellow.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.yellow.event::before {
|
||||
border-color: #ffe21f;
|
||||
}
|
||||
.ui.ui.feed > .event > .yellow.basic.label::before,
|
||||
.ui.yellow.basic.feed > .event > .label::before {
|
||||
color: #fbbd08;
|
||||
}
|
||||
.ui.feed > .event > .inverted.yellow.label::before,
|
||||
.ui.inverted.yellow.feed > .event > .label::before {
|
||||
background: #ffe21f;
|
||||
}
|
||||
.ui.feed > .event > .inverted.yellow.basic.label::before,
|
||||
.ui.inverted.yellow.basic.feed > .event > .label::before {
|
||||
color: #ffe21f;
|
||||
}
|
||||
.ui.ui.feed > .event > .olive.label::before,
|
||||
.ui.olive.feed > .event > .label::before {
|
||||
background: #b5cc18;
|
||||
}
|
||||
.ui.olive.connected.feed > .event::before,
|
||||
.ui.connected.feed > .olive.event::before {
|
||||
border-color: #b5cc18;
|
||||
}
|
||||
.ui.inverted.olive.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.olive.event::before {
|
||||
border-color: #d9e778;
|
||||
}
|
||||
.ui.ui.feed > .event > .olive.basic.label::before,
|
||||
.ui.olive.basic.feed > .event > .label::before {
|
||||
color: #b5cc18;
|
||||
}
|
||||
.ui.feed > .event > .inverted.olive.label::before,
|
||||
.ui.inverted.olive.feed > .event > .label::before {
|
||||
background: #d9e778;
|
||||
}
|
||||
.ui.feed > .event > .inverted.olive.basic.label::before,
|
||||
.ui.inverted.olive.basic.feed > .event > .label::before {
|
||||
color: #d9e778;
|
||||
}
|
||||
.ui.ui.feed > .event > .green.label::before,
|
||||
.ui.green.feed > .event > .label::before {
|
||||
background: #21ba45;
|
||||
}
|
||||
.ui.green.connected.feed > .event::before,
|
||||
.ui.connected.feed > .green.event::before {
|
||||
border-color: #21ba45;
|
||||
}
|
||||
.ui.inverted.green.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.green.event::before {
|
||||
border-color: #2ecc40;
|
||||
}
|
||||
.ui.ui.feed > .event > .green.basic.label::before,
|
||||
.ui.green.basic.feed > .event > .label::before {
|
||||
color: #21ba45;
|
||||
}
|
||||
.ui.feed > .event > .inverted.green.label::before,
|
||||
.ui.inverted.green.feed > .event > .label::before {
|
||||
background: #2ecc40;
|
||||
}
|
||||
.ui.feed > .event > .inverted.green.basic.label::before,
|
||||
.ui.inverted.green.basic.feed > .event > .label::before {
|
||||
color: #2ecc40;
|
||||
}
|
||||
.ui.ui.feed > .event > .teal.label::before,
|
||||
.ui.teal.feed > .event > .label::before {
|
||||
background: #00b5ad;
|
||||
}
|
||||
.ui.teal.connected.feed > .event::before,
|
||||
.ui.connected.feed > .teal.event::before {
|
||||
border-color: #00b5ad;
|
||||
}
|
||||
.ui.inverted.teal.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.teal.event::before {
|
||||
border-color: #6dffff;
|
||||
}
|
||||
.ui.ui.feed > .event > .teal.basic.label::before,
|
||||
.ui.teal.basic.feed > .event > .label::before {
|
||||
color: #00b5ad;
|
||||
}
|
||||
.ui.feed > .event > .inverted.teal.label::before,
|
||||
.ui.inverted.teal.feed > .event > .label::before {
|
||||
background: #6dffff;
|
||||
}
|
||||
.ui.feed > .event > .inverted.teal.basic.label::before,
|
||||
.ui.inverted.teal.basic.feed > .event > .label::before {
|
||||
color: #6dffff;
|
||||
}
|
||||
.ui.ui.feed > .event > .blue.label::before,
|
||||
.ui.blue.feed > .event > .label::before {
|
||||
background: #2185d0;
|
||||
}
|
||||
.ui.blue.connected.feed > .event::before,
|
||||
.ui.connected.feed > .blue.event::before {
|
||||
border-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.blue.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.blue.event::before {
|
||||
border-color: #54c8ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .blue.basic.label::before,
|
||||
.ui.blue.basic.feed > .event > .label::before {
|
||||
color: #2185d0;
|
||||
}
|
||||
.ui.feed > .event > .inverted.blue.label::before,
|
||||
.ui.inverted.blue.feed > .event > .label::before {
|
||||
background: #54c8ff;
|
||||
}
|
||||
.ui.feed > .event > .inverted.blue.basic.label::before,
|
||||
.ui.inverted.blue.basic.feed > .event > .label::before {
|
||||
color: #54c8ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .violet.label::before,
|
||||
.ui.violet.feed > .event > .label::before {
|
||||
background: #6435c9;
|
||||
}
|
||||
.ui.violet.connected.feed > .event::before,
|
||||
.ui.connected.feed > .violet.event::before {
|
||||
border-color: #6435c9;
|
||||
}
|
||||
.ui.inverted.violet.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.violet.event::before {
|
||||
border-color: #a291fb;
|
||||
}
|
||||
.ui.ui.feed > .event > .violet.basic.label::before,
|
||||
.ui.violet.basic.feed > .event > .label::before {
|
||||
color: #6435c9;
|
||||
}
|
||||
.ui.feed > .event > .inverted.violet.label::before,
|
||||
.ui.inverted.violet.feed > .event > .label::before {
|
||||
background: #a291fb;
|
||||
}
|
||||
.ui.feed > .event > .inverted.violet.basic.label::before,
|
||||
.ui.inverted.violet.basic.feed > .event > .label::before {
|
||||
color: #a291fb;
|
||||
}
|
||||
.ui.ui.feed > .event > .purple.label::before,
|
||||
.ui.purple.feed > .event > .label::before {
|
||||
background: #a333c8;
|
||||
}
|
||||
.ui.purple.connected.feed > .event::before,
|
||||
.ui.connected.feed > .purple.event::before {
|
||||
border-color: #a333c8;
|
||||
}
|
||||
.ui.inverted.purple.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.purple.event::before {
|
||||
border-color: #dc73ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .purple.basic.label::before,
|
||||
.ui.purple.basic.feed > .event > .label::before {
|
||||
color: #a333c8;
|
||||
}
|
||||
.ui.feed > .event > .inverted.purple.label::before,
|
||||
.ui.inverted.purple.feed > .event > .label::before {
|
||||
background: #dc73ff;
|
||||
}
|
||||
.ui.feed > .event > .inverted.purple.basic.label::before,
|
||||
.ui.inverted.purple.basic.feed > .event > .label::before {
|
||||
color: #dc73ff;
|
||||
}
|
||||
.ui.ui.feed > .event > .pink.label::before,
|
||||
.ui.pink.feed > .event > .label::before {
|
||||
background: #e03997;
|
||||
}
|
||||
.ui.pink.connected.feed > .event::before,
|
||||
.ui.connected.feed > .pink.event::before {
|
||||
border-color: #e03997;
|
||||
}
|
||||
.ui.inverted.pink.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.pink.event::before {
|
||||
border-color: #ff8edf;
|
||||
}
|
||||
.ui.ui.feed > .event > .pink.basic.label::before,
|
||||
.ui.pink.basic.feed > .event > .label::before {
|
||||
color: #e03997;
|
||||
}
|
||||
.ui.feed > .event > .inverted.pink.label::before,
|
||||
.ui.inverted.pink.feed > .event > .label::before {
|
||||
background: #ff8edf;
|
||||
}
|
||||
.ui.feed > .event > .inverted.pink.basic.label::before,
|
||||
.ui.inverted.pink.basic.feed > .event > .label::before {
|
||||
color: #ff8edf;
|
||||
}
|
||||
.ui.ui.feed > .event > .brown.label::before,
|
||||
.ui.brown.feed > .event > .label::before {
|
||||
background: #a5673f;
|
||||
}
|
||||
.ui.brown.connected.feed > .event::before,
|
||||
.ui.connected.feed > .brown.event::before {
|
||||
border-color: #a5673f;
|
||||
}
|
||||
.ui.inverted.brown.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.brown.event::before {
|
||||
border-color: #d67c1c;
|
||||
}
|
||||
.ui.ui.feed > .event > .brown.basic.label::before,
|
||||
.ui.brown.basic.feed > .event > .label::before {
|
||||
color: #a5673f;
|
||||
}
|
||||
.ui.feed > .event > .inverted.brown.label::before,
|
||||
.ui.inverted.brown.feed > .event > .label::before {
|
||||
background: #d67c1c;
|
||||
}
|
||||
.ui.feed > .event > .inverted.brown.basic.label::before,
|
||||
.ui.inverted.brown.basic.feed > .event > .label::before {
|
||||
color: #d67c1c;
|
||||
}
|
||||
.ui.ui.feed > .event > .grey.label::before,
|
||||
.ui.grey.feed > .event > .label::before {
|
||||
background: #767676;
|
||||
}
|
||||
.ui.grey.connected.feed > .event::before,
|
||||
.ui.connected.feed > .grey.event::before {
|
||||
border-color: #767676;
|
||||
}
|
||||
.ui.inverted.grey.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.grey.event::before {
|
||||
border-color: #dcddde;
|
||||
}
|
||||
.ui.ui.feed > .event > .grey.basic.label::before,
|
||||
.ui.grey.basic.feed > .event > .label::before {
|
||||
color: #767676;
|
||||
}
|
||||
.ui.feed > .event > .inverted.grey.label::before,
|
||||
.ui.inverted.grey.feed > .event > .label::before {
|
||||
background: #dcddde;
|
||||
}
|
||||
.ui.feed > .event > .inverted.grey.basic.label::before,
|
||||
.ui.inverted.grey.basic.feed > .event > .label::before {
|
||||
color: #dcddde;
|
||||
}
|
||||
.ui.ui.feed > .event > .black.label::before,
|
||||
.ui.black.feed > .event > .label::before {
|
||||
background: #1b1c1d;
|
||||
}
|
||||
.ui.black.connected.feed > .event::before,
|
||||
.ui.connected.feed > .black.event::before {
|
||||
border-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.black.connected.feed > .event::before,
|
||||
.ui.connected.feed > .inverted.black.event::before {
|
||||
border-color: #545454;
|
||||
}
|
||||
.ui.ui.feed > .event > .black.basic.label::before,
|
||||
.ui.black.basic.feed > .event > .label::before {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.feed > .event > .inverted.black.label::before,
|
||||
.ui.inverted.black.feed > .event > .label::before {
|
||||
background: #545454;
|
||||
}
|
||||
.ui.feed > .event > .inverted.black.basic.label::before,
|
||||
.ui.inverted.black.basic.feed > .event > .label::before {
|
||||
color: #545454;
|
||||
}
|
||||
.ui.ui.feed > .event > .basic.label::before,
|
||||
.ui.ui.ui.basic.feed > .event > .label::before {
|
||||
background: transparent;
|
||||
border-color: currentColor;
|
||||
}
|
||||
.ui.disabled.feed,
|
||||
.ui.feed .disabled.event {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,546 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Flyout
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Flyout
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Flyout Menu */
|
||||
.ui.flyout {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: none;
|
||||
will-change: transform;
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: hidden;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
z-index: 102;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* GPU Layers for Child Elements */
|
||||
.ui.flyout > * {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Close
|
||||
--------------- */
|
||||
.ui.flyout > .close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: 1.5rem;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
font-size: 1.25em;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
margin: 0 0 0 0.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
.ui.flyout > .close:focus,
|
||||
.ui.flyout > .close:hover {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Header
|
||||
--------------- */
|
||||
.ui.flyout > .header {
|
||||
display: block;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: none;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.flyout > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
padding: 1.5rem;
|
||||
background: #fff;
|
||||
}
|
||||
.ui.flyout > .content.scrolling {
|
||||
overflow: auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
.ui.flyout.left > .content,
|
||||
.ui.flyout.right > .content {
|
||||
min-height: calc(100vh - 4.7rem);
|
||||
}
|
||||
.ui.flyout.left > .header + .content,
|
||||
.ui.flyout.right > .header + .content {
|
||||
min-height: calc(100vh - 9.1rem);
|
||||
}
|
||||
.ui.flyout.left > .scrolling.content,
|
||||
.ui.flyout.right > .scrolling.content {
|
||||
max-height: calc(100vh - 4.7rem);
|
||||
}
|
||||
.ui.flyout.left > .header + .scrolling.content,
|
||||
.ui.flyout.right > .header + .scrolling.content {
|
||||
max-height: calc(100vh - 9.1rem);
|
||||
}
|
||||
.ui.flyout.top > .scrolling.content,
|
||||
.ui.flyout.bottom > .scrolling.content {
|
||||
max-height: calc(80vh - 9.1rem);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Actions
|
||||
--------------- */
|
||||
.ui.flyout > .actions {
|
||||
background: #f9fafb;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
text-align: right;
|
||||
}
|
||||
.ui.flyout .actions > .button:not(.fluid) {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
.ui.ui.flyout > .basic.actions {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.flyout > .left.actions {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.flyout > .left.actions > .button:not(.fluid) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.ui.flyout > .centered,
|
||||
.ui.flyout > .center.aligned {
|
||||
text-align: center;
|
||||
}
|
||||
.ui.flyout > .centered.actions > .button:not(.fluid),
|
||||
.ui.flyout > .center.aligned.actions > .button:not(.fluid) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.ui.ui.flyout > .basic.header,
|
||||
.ui.ui.flyout > .basic.actions {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ui.flyout > .basic.header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Direction
|
||||
--------------- */
|
||||
.ui.left.flyout {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.ui.right.flyout {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.ui.top.flyout,
|
||||
.ui.bottom.flyout {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.ui.top.flyout {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.ui.bottom.flyout {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Pushable
|
||||
--------------- */
|
||||
.pushable.pushable.pushable {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.pushable.pushable.pushable.locked {
|
||||
overflow-y: hidden;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* Whole Page */
|
||||
body.pushable {
|
||||
background: #545454;
|
||||
}
|
||||
body.pushable.dimmed {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* Page Context */
|
||||
.pushable:not(body) {
|
||||
transform: translate3d(0, 0, 0);
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.pushable:not(body) > .ui.flyout,
|
||||
.pushable:not(body) > .fixed,
|
||||
.pushable:not(body) > .pusher::after {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Fixed
|
||||
--------------- */
|
||||
.pushable > .fixed {
|
||||
position: fixed;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: transform 500ms ease;
|
||||
will-change: transform;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Page
|
||||
--------------- */
|
||||
.pushable > .pusher {
|
||||
position: relative;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
min-height: 100%;
|
||||
transition: transform 500ms ease;
|
||||
z-index: 2;
|
||||
|
||||
/* Pusher should inherit background from context */
|
||||
background: inherit;
|
||||
}
|
||||
.pushable > .pusher:not(.overflowing) {
|
||||
overflow: hidden;
|
||||
}
|
||||
body.pushable > .pusher {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Dimmer
|
||||
--------------- */
|
||||
.pushable > .pusher::after {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: "";
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: all 500ms;
|
||||
will-change: opacity;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Coupling
|
||||
--------------- */
|
||||
.ui.flyout.menu .item {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Dimmed
|
||||
--------------- */
|
||||
.pushable > .pusher.dimmed::after {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.pushable > .pusher.dimmed.blurring:not(.closing)::after {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
-webkit-backdrop-filter: blur(5px) grayscale(0.7);
|
||||
backdrop-filter: blur(5px) grayscale(0.7);
|
||||
}
|
||||
.pushable > .pusher.closing.dimmed::after {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Animating
|
||||
--------------- */
|
||||
.ui.animating.flyout {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Visible
|
||||
--------------- */
|
||||
.ui.visible.flyout {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Shadow Direction */
|
||||
.ui.left.visible.flyout,
|
||||
.ui.right.visible.flyout {
|
||||
box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.top.visible.flyout,
|
||||
.ui.bottom.visible.flyout {
|
||||
box-shadow: 0 0 20px rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* Visible On Load */
|
||||
.ui.visible.left.flyout ~ .fixed,
|
||||
.ui.visible.left.flyout ~ .pusher {
|
||||
transform: translate3d(400px, 0, 0);
|
||||
}
|
||||
.ui.visible.right.flyout ~ .fixed,
|
||||
.ui.visible.right.flyout ~ .pusher {
|
||||
transform: translate3d(-400px, 0, 0);
|
||||
}
|
||||
.ui.visible.top.flyout ~ .fixed,
|
||||
.ui.visible.top.flyout ~ .pusher {
|
||||
transform: translate3d(0, 36px, 0);
|
||||
}
|
||||
.ui.visible.bottom.flyout ~ .fixed,
|
||||
.ui.visible.bottom.flyout ~ .pusher {
|
||||
transform: translate3d(0, -36px, 0);
|
||||
}
|
||||
|
||||
/* opposite sides visible forces content overlay */
|
||||
.ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .fixed,
|
||||
.ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher,
|
||||
.ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .fixed,
|
||||
.ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.flyout.inverted {
|
||||
background: #000;
|
||||
}
|
||||
.ui.flyout.inverted > .close {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.flyout.inverted > .header,
|
||||
.ui.flyout.inverted > .content {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.ui.flyout.inverted > .actions {
|
||||
background: #191a1b;
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.85);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Width
|
||||
--------------- */
|
||||
|
||||
/* Left / Right */
|
||||
.ui.left.flyout,
|
||||
.ui.right.flyout {
|
||||
width: 400px;
|
||||
}
|
||||
.ui.thin.left.flyout,
|
||||
.ui.thin.right.flyout {
|
||||
width: 200px;
|
||||
}
|
||||
.ui[class*="very thin"].left.flyout,
|
||||
.ui[class*="very thin"].right.flyout {
|
||||
width: 120px;
|
||||
}
|
||||
.ui.wide.left.flyout,
|
||||
.ui.wide.right.flyout {
|
||||
width: 600px;
|
||||
}
|
||||
.ui[class*="very wide"].left.flyout,
|
||||
.ui[class*="very wide"].right.flyout {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
/* Left Visible */
|
||||
.ui.visible.thin.left.flyout ~ .fixed,
|
||||
.ui.visible.thin.left.flyout ~ .pusher {
|
||||
transform: translate3d(200px, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very thin"].left.flyout ~ .fixed,
|
||||
.ui.visible[class*="very thin"].left.flyout ~ .pusher {
|
||||
transform: translate3d(120px, 0, 0);
|
||||
}
|
||||
.ui.visible.wide.left.flyout ~ .fixed,
|
||||
.ui.visible.wide.left.flyout ~ .pusher {
|
||||
transform: translate3d(600px, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very wide"].left.flyout ~ .fixed,
|
||||
.ui.visible[class*="very wide"].left.flyout ~ .pusher {
|
||||
transform: translate3d(800px, 0, 0);
|
||||
}
|
||||
|
||||
/* Right Visible */
|
||||
.ui.visible.thin.right.flyout ~ .fixed,
|
||||
.ui.visible.thin.right.flyout ~ .pusher {
|
||||
transform: translate3d(-200px, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very thin"].right.flyout ~ .fixed,
|
||||
.ui.visible[class*="very thin"].right.flyout ~ .pusher {
|
||||
transform: translate3d(-120px, 0, 0);
|
||||
}
|
||||
.ui.visible.wide.right.flyout ~ .fixed,
|
||||
.ui.visible.wide.right.flyout ~ .pusher {
|
||||
transform: translate3d(-600px, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very wide"].right.flyout ~ .fixed,
|
||||
.ui.visible[class*="very wide"].right.flyout ~ .pusher {
|
||||
transform: translate3d(-800px, 0, 0);
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
.ui.fullscreen.flyout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Column Width
|
||||
-------------------- */
|
||||
|
||||
/* Sizing Combinations */
|
||||
.ui[class*="one wide"].flyout:not(.fullscreen) {
|
||||
width: 6.25%;
|
||||
}
|
||||
.ui[class*="two wide"].flyout:not(.fullscreen) {
|
||||
width: 12.5%;
|
||||
}
|
||||
.ui[class*="three wide"].flyout:not(.fullscreen) {
|
||||
width: 18.75%;
|
||||
}
|
||||
.ui[class*="four wide"].flyout:not(.fullscreen) {
|
||||
width: 25%;
|
||||
}
|
||||
.ui[class*="five wide"].flyout:not(.fullscreen) {
|
||||
width: 31.25%;
|
||||
}
|
||||
.ui[class*="six wide"].flyout:not(.fullscreen) {
|
||||
width: 37.5%;
|
||||
}
|
||||
.ui[class*="seven wide"].flyout:not(.fullscreen) {
|
||||
width: 43.75%;
|
||||
}
|
||||
.ui[class*="eight wide"].flyout:not(.fullscreen) {
|
||||
width: 50%;
|
||||
}
|
||||
.ui[class*="nine wide"].flyout:not(.fullscreen) {
|
||||
width: 56.25%;
|
||||
}
|
||||
.ui[class*="ten wide"].flyout:not(.fullscreen) {
|
||||
width: 62.5%;
|
||||
}
|
||||
.ui[class*="eleven wide"].flyout:not(.fullscreen) {
|
||||
width: 68.75%;
|
||||
}
|
||||
.ui[class*="twelve wide"].flyout:not(.fullscreen) {
|
||||
width: 75%;
|
||||
}
|
||||
.ui[class*="thirteen wide"].flyout:not(.fullscreen) {
|
||||
width: 81.25%;
|
||||
}
|
||||
.ui[class*="fourteen wide"].flyout:not(.fullscreen) {
|
||||
width: 87.5%;
|
||||
}
|
||||
.ui[class*="fifteen wide"].flyout:not(.fullscreen) {
|
||||
width: 93.75%;
|
||||
}
|
||||
.ui[class*="sixteen wide"].flyout:not(.fullscreen) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Animations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Overlay
|
||||
--------------- */
|
||||
|
||||
/* Set-up */
|
||||
.ui.overlay.flyout {
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.ui.left.overlay.flyout {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.ui.right.overlay.flyout {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.ui.top.overlay.flyout {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.ui.bottom.overlay.flyout {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.animating.ui.overlay.flyout,
|
||||
.ui.visible.overlay.flyout {
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
|
||||
/* End - flyout */
|
||||
.ui.visible.overlay.flyout {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* End - Pusher */
|
||||
.ui.visible.overlay.flyout ~ .fixed,
|
||||
.ui.visible.overlay.flyout ~ .pusher {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,775 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Header
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Header
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Standard */
|
||||
.ui.header {
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0 0;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-weight: bold;
|
||||
line-height: 1.28571429em;
|
||||
text-transform: none;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sub Header
|
||||
--------------- */
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2em;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Icon
|
||||
--------------- */
|
||||
.ui.header > .icons,
|
||||
.ui.header > i.icon {
|
||||
display: table-cell;
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* With Text Node */
|
||||
.ui.header:not(.icon) > .icons:only-child,
|
||||
.ui.header:not(.icon) > i.icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Image
|
||||
-------------------- */
|
||||
.ui.header > .image:not(.icon),
|
||||
.ui.header > img {
|
||||
display: inline-block;
|
||||
margin-top: 0.14285714em;
|
||||
width: 2.5em;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.header > .image:not(.icon):only-child,
|
||||
.ui.header > img:only-child {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.header .content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* After Image */
|
||||
.ui.header > img + .content,
|
||||
.ui.header > .image + .content {
|
||||
padding-left: 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* After Icon */
|
||||
.ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content,
|
||||
.ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content {
|
||||
padding-left: 0.75rem;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Loose Coupling
|
||||
--------------- */
|
||||
.ui.header .ui.label {
|
||||
font-size: "";
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Page
|
||||
--------------- */
|
||||
h1.ui.header {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h1.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
h3.ui.header {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
h3.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
h4.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5.ui.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h5.ui.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
h6.ui.header {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
h6.ui.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content Heading
|
||||
--------------- */
|
||||
.ui.mini.header {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.mini.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.mini.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.tiny.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.tiny.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.tiny.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.small.header {
|
||||
font-size: 1.07142857em;
|
||||
}
|
||||
.ui.small.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.small.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.large.header {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
.ui.large.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.large.sub.header {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.big.header {
|
||||
font-size: 1.85714286em;
|
||||
}
|
||||
.ui.big.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.sub.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.huge.header {
|
||||
font-size: 2em;
|
||||
min-height: 1em;
|
||||
}
|
||||
.ui.huge.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.huge.sub.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.massive.header {
|
||||
font-size: 2.28571429em;
|
||||
min-height: 1em;
|
||||
}
|
||||
.ui.massive.header .sub.header {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.sub.header {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sub Heading
|
||||
--------------- */
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.85714286em;
|
||||
text-transform: uppercase;
|
||||
color: "";
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Icon
|
||||
-------------------- */
|
||||
.ui.icon.header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
.ui.icon.header::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.icon.header:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.icon.header > .image.icon,
|
||||
.ui.icon.header > .icons,
|
||||
.ui.icon.header > i.icon {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
font-size: 3em;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.icon.header .corner.icon {
|
||||
font-size: calc(3em * 0.45);
|
||||
}
|
||||
.ui.icon.header .content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.icon.header > i.circular {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ui.icon.header > i.square {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ui.block.icon.header > .image.icon,
|
||||
.ui.block.icon.header > .icons,
|
||||
.ui.block.icon.header > i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.icon.header.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.disabled.header {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Inverted
|
||||
-------------------- */
|
||||
.ui.inverted.header {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.header .sub.header {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.ui.inverted.attached.header {
|
||||
background: #1b1c1d;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
.ui.inverted.block.header {
|
||||
background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Colors
|
||||
-------------------- */
|
||||
.ui.primary.header {
|
||||
color: #2185d0;
|
||||
}
|
||||
a.ui.primary.header:hover {
|
||||
color: #1678c2;
|
||||
}
|
||||
.ui.primary.dividing.header {
|
||||
border-bottom: 2px solid #2185d0;
|
||||
}
|
||||
.ui.inverted.primary.header.header.header {
|
||||
color: #54c8ff;
|
||||
}
|
||||
a.ui.inverted.primary.header.header.header:hover {
|
||||
color: #21b8ff;
|
||||
}
|
||||
.ui.inverted.primary.dividing.header {
|
||||
border-bottom: 2px solid #54c8ff;
|
||||
}
|
||||
.ui.secondary.header {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
a.ui.secondary.header:hover {
|
||||
color: #27292a;
|
||||
}
|
||||
.ui.secondary.dividing.header {
|
||||
border-bottom: 2px solid #1b1c1d;
|
||||
}
|
||||
.ui.inverted.secondary.header.header.header {
|
||||
color: #545454;
|
||||
}
|
||||
a.ui.inverted.secondary.header.header.header:hover {
|
||||
color: #6e6e6e;
|
||||
}
|
||||
.ui.inverted.secondary.dividing.header {
|
||||
border-bottom: 2px solid #545454;
|
||||
}
|
||||
.ui.red.header {
|
||||
color: #db2828;
|
||||
}
|
||||
a.ui.red.header:hover {
|
||||
color: #d01919;
|
||||
}
|
||||
.ui.red.dividing.header {
|
||||
border-bottom: 2px solid #db2828;
|
||||
}
|
||||
.ui.inverted.red.header.header.header {
|
||||
color: #ff695e;
|
||||
}
|
||||
a.ui.inverted.red.header.header.header:hover {
|
||||
color: #ff392b;
|
||||
}
|
||||
.ui.inverted.red.dividing.header {
|
||||
border-bottom: 2px solid #ff695e;
|
||||
}
|
||||
.ui.orange.header {
|
||||
color: #f2711c;
|
||||
}
|
||||
a.ui.orange.header:hover {
|
||||
color: #f26202;
|
||||
}
|
||||
.ui.orange.dividing.header {
|
||||
border-bottom: 2px solid #f2711c;
|
||||
}
|
||||
.ui.inverted.orange.header.header.header {
|
||||
color: #ff851b;
|
||||
}
|
||||
a.ui.inverted.orange.header.header.header:hover {
|
||||
color: #e76b00;
|
||||
}
|
||||
.ui.inverted.orange.dividing.header {
|
||||
border-bottom: 2px solid #ff851b;
|
||||
}
|
||||
.ui.yellow.header {
|
||||
color: #fbbd08;
|
||||
}
|
||||
a.ui.yellow.header:hover {
|
||||
color: #eaae00;
|
||||
}
|
||||
.ui.yellow.dividing.header {
|
||||
border-bottom: 2px solid #fbbd08;
|
||||
}
|
||||
.ui.inverted.yellow.header.header.header {
|
||||
color: #ffe21f;
|
||||
}
|
||||
a.ui.inverted.yellow.header.header.header:hover {
|
||||
color: #ebcd00;
|
||||
}
|
||||
.ui.inverted.yellow.dividing.header {
|
||||
border-bottom: 2px solid #ffe21f;
|
||||
}
|
||||
.ui.olive.header {
|
||||
color: #b5cc18;
|
||||
}
|
||||
a.ui.olive.header:hover {
|
||||
color: #a7bd0d;
|
||||
}
|
||||
.ui.olive.dividing.header {
|
||||
border-bottom: 2px solid #b5cc18;
|
||||
}
|
||||
.ui.inverted.olive.header.header.header {
|
||||
color: #d9e778;
|
||||
}
|
||||
a.ui.inverted.olive.header.header.header:hover {
|
||||
color: #d2e745;
|
||||
}
|
||||
.ui.inverted.olive.dividing.header {
|
||||
border-bottom: 2px solid #d9e778;
|
||||
}
|
||||
.ui.green.header {
|
||||
color: #21ba45;
|
||||
}
|
||||
a.ui.green.header:hover {
|
||||
color: #16ab39;
|
||||
}
|
||||
.ui.green.dividing.header {
|
||||
border-bottom: 2px solid #21ba45;
|
||||
}
|
||||
.ui.inverted.green.header.header.header {
|
||||
color: #2ecc40;
|
||||
}
|
||||
a.ui.inverted.green.header.header.header:hover {
|
||||
color: #1ea92e;
|
||||
}
|
||||
.ui.inverted.green.dividing.header {
|
||||
border-bottom: 2px solid #2ecc40;
|
||||
}
|
||||
.ui.teal.header {
|
||||
color: #00b5ad;
|
||||
}
|
||||
a.ui.teal.header:hover {
|
||||
color: #009c95;
|
||||
}
|
||||
.ui.teal.dividing.header {
|
||||
border-bottom: 2px solid #00b5ad;
|
||||
}
|
||||
.ui.inverted.teal.header.header.header {
|
||||
color: #6dffff;
|
||||
}
|
||||
a.ui.inverted.teal.header.header.header:hover {
|
||||
color: #3affff;
|
||||
}
|
||||
.ui.inverted.teal.dividing.header {
|
||||
border-bottom: 2px solid #6dffff;
|
||||
}
|
||||
.ui.blue.header {
|
||||
color: #2185d0;
|
||||
}
|
||||
a.ui.blue.header:hover {
|
||||
color: #1678c2;
|
||||
}
|
||||
.ui.blue.dividing.header {
|
||||
border-bottom: 2px solid #2185d0;
|
||||
}
|
||||
.ui.inverted.blue.header.header.header {
|
||||
color: #54c8ff;
|
||||
}
|
||||
a.ui.inverted.blue.header.header.header:hover {
|
||||
color: #21b8ff;
|
||||
}
|
||||
.ui.inverted.blue.dividing.header {
|
||||
border-bottom: 2px solid #54c8ff;
|
||||
}
|
||||
.ui.violet.header {
|
||||
color: #6435c9;
|
||||
}
|
||||
a.ui.violet.header:hover {
|
||||
color: #5829bb;
|
||||
}
|
||||
.ui.violet.dividing.header {
|
||||
border-bottom: 2px solid #6435c9;
|
||||
}
|
||||
.ui.inverted.violet.header.header.header {
|
||||
color: #a291fb;
|
||||
}
|
||||
a.ui.inverted.violet.header.header.header:hover {
|
||||
color: #745aff;
|
||||
}
|
||||
.ui.inverted.violet.dividing.header {
|
||||
border-bottom: 2px solid #a291fb;
|
||||
}
|
||||
.ui.purple.header {
|
||||
color: #a333c8;
|
||||
}
|
||||
a.ui.purple.header:hover {
|
||||
color: #9627ba;
|
||||
}
|
||||
.ui.purple.dividing.header {
|
||||
border-bottom: 2px solid #a333c8;
|
||||
}
|
||||
.ui.inverted.purple.header.header.header {
|
||||
color: #dc73ff;
|
||||
}
|
||||
a.ui.inverted.purple.header.header.header:hover {
|
||||
color: #cf40ff;
|
||||
}
|
||||
.ui.inverted.purple.dividing.header {
|
||||
border-bottom: 2px solid #dc73ff;
|
||||
}
|
||||
.ui.pink.header {
|
||||
color: #e03997;
|
||||
}
|
||||
a.ui.pink.header:hover {
|
||||
color: #e61a8d;
|
||||
}
|
||||
.ui.pink.dividing.header {
|
||||
border-bottom: 2px solid #e03997;
|
||||
}
|
||||
.ui.inverted.pink.header.header.header {
|
||||
color: #ff8edf;
|
||||
}
|
||||
a.ui.inverted.pink.header.header.header:hover {
|
||||
color: #ff5bd1;
|
||||
}
|
||||
.ui.inverted.pink.dividing.header {
|
||||
border-bottom: 2px solid #ff8edf;
|
||||
}
|
||||
.ui.brown.header {
|
||||
color: #a5673f;
|
||||
}
|
||||
a.ui.brown.header:hover {
|
||||
color: #975b33;
|
||||
}
|
||||
.ui.brown.dividing.header {
|
||||
border-bottom: 2px solid #a5673f;
|
||||
}
|
||||
.ui.inverted.brown.header.header.header {
|
||||
color: #d67c1c;
|
||||
}
|
||||
a.ui.inverted.brown.header.header.header:hover {
|
||||
color: #b0620f;
|
||||
}
|
||||
.ui.inverted.brown.dividing.header {
|
||||
border-bottom: 2px solid #d67c1c;
|
||||
}
|
||||
.ui.grey.header {
|
||||
color: #767676;
|
||||
}
|
||||
a.ui.grey.header:hover {
|
||||
color: #838383;
|
||||
}
|
||||
.ui.grey.dividing.header {
|
||||
border-bottom: 2px solid #767676;
|
||||
}
|
||||
.ui.inverted.grey.header.header.header {
|
||||
color: #dcddde;
|
||||
}
|
||||
a.ui.inverted.grey.header.header.header:hover {
|
||||
color: #c2c4c5;
|
||||
}
|
||||
.ui.inverted.grey.dividing.header {
|
||||
border-bottom: 2px solid #dcddde;
|
||||
}
|
||||
.ui.black.header {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
a.ui.black.header:hover {
|
||||
color: #27292a;
|
||||
}
|
||||
.ui.black.dividing.header {
|
||||
border-bottom: 2px solid #1b1c1d;
|
||||
}
|
||||
.ui.inverted.black.header.header.header {
|
||||
color: #545454;
|
||||
}
|
||||
a.ui.inverted.black.header.header.header:hover {
|
||||
color: #000000;
|
||||
}
|
||||
.ui.inverted.black.dividing.header {
|
||||
border-bottom: 2px solid #545454;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
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: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.ui[class*="right floated"].header {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Fitted
|
||||
-------------------- */
|
||||
.ui.fitted.header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Dividing
|
||||
-------------------- */
|
||||
.ui.dividing.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
.ui.dividing.header i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.inverted.dividing.header {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Block
|
||||
-------------------- */
|
||||
.ui.block.header {
|
||||
background: #f3f4f5;
|
||||
padding: 0.78571429rem 1rem;
|
||||
box-shadow: none;
|
||||
border: 1px solid #d4d4d5;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.block.header {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.block.header {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.block.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.block.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.block.header {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.block.header {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.block.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Attached
|
||||
-------------------- */
|
||||
.ui.attached.header {
|
||||
background: #fff;
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #d4d4d5;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.attached.block.header {
|
||||
background: #f3f4f5;
|
||||
}
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
/* Attached Sizes */
|
||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.mini.attached.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.tiny.attached.header {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.attached.header {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.large.attached.header {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.big.attached.header {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.huge.attached.header {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.massive.attached.header {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Sizing
|
||||
-------------------- */
|
||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,315 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Image
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Image
|
||||
*******************************/
|
||||
|
||||
.ui.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
img.ui.image {
|
||||
display: block;
|
||||
}
|
||||
.ui.image svg,
|
||||
.ui.image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.hidden.images,
|
||||
.ui.ui.hidden.image {
|
||||
display: none;
|
||||
}
|
||||
.ui.hidden.transition.images,
|
||||
.ui.hidden.transition.image {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.images > .hidden.transition {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.disabled.images,
|
||||
.ui.disabled.image {
|
||||
cursor: default;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Inline
|
||||
--------------- */
|
||||
.ui.inline.image,
|
||||
.ui.inline.image svg,
|
||||
.ui.inline.image img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ------------------
|
||||
Vertical Aligned
|
||||
------------------- */
|
||||
.ui.top.aligned.image,
|
||||
.ui.top.aligned.image svg,
|
||||
.ui.top.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.middle.aligned.image,
|
||||
.ui.middle.aligned.image svg,
|
||||
.ui.middle.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.bottom.aligned.image,
|
||||
.ui.bottom.aligned.image svg,
|
||||
.ui.bottom.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.ui.top.aligned.images .image,
|
||||
.ui.images .ui.top.aligned.image {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.ui.middle.aligned.images .image,
|
||||
.ui.images .ui.middle.aligned.image {
|
||||
align-self: center;
|
||||
}
|
||||
.ui.bottom.aligned.images .image,
|
||||
.ui.images .ui.bottom.aligned.image {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Rounded
|
||||
--------------- */
|
||||
.ui.rounded.images .image,
|
||||
.ui.rounded.image,
|
||||
.ui.rounded.images .image > *,
|
||||
.ui.rounded.image > * {
|
||||
border-radius: 0.3125em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
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: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Circular
|
||||
--------------- */
|
||||
.ui.circular.images,
|
||||
.ui.circular.image {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui.circular.images .image,
|
||||
.ui.circular.image,
|
||||
.ui.circular.images .image > *,
|
||||
.ui.circular.image > * {
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
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: 0.25em;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Spaced
|
||||
-------------------- */
|
||||
.ui.spaced.image {
|
||||
display: inline-block !important;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.ui[class*="left spaced"].image {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui[class*="right spaced"].image {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Floated
|
||||
-------------------- */
|
||||
.ui.floated.image,
|
||||
.ui.floated.images {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.ui.right.floated.images,
|
||||
.ui.right.floated.image {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.ui.floated.images:last-child,
|
||||
.ui.floated.image:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.centered.image {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.centered.images {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sizes
|
||||
--------------- */
|
||||
.ui.medium.images .image,
|
||||
.ui.medium.images img,
|
||||
.ui.medium.images svg,
|
||||
.ui.medium.image {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.images .image,
|
||||
.ui.mini.images img,
|
||||
.ui.mini.images svg,
|
||||
.ui.mini.image {
|
||||
width: 35px;
|
||||
height: auto;
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.images .image,
|
||||
.ui.tiny.images img,
|
||||
.ui.tiny.images svg,
|
||||
.ui.tiny.image {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.images .image,
|
||||
.ui.small.images img,
|
||||
.ui.small.images svg,
|
||||
.ui.small.image {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.images .image,
|
||||
.ui.large.images img,
|
||||
.ui.large.images svg,
|
||||
.ui.large.image {
|
||||
width: 450px;
|
||||
height: auto;
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.images .image,
|
||||
.ui.big.images img,
|
||||
.ui.big.images svg,
|
||||
.ui.big.image {
|
||||
width: 600px;
|
||||
height: auto;
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.images .image,
|
||||
.ui.huge.images img,
|
||||
.ui.huge.images svg,
|
||||
.ui.huge.image {
|
||||
width: 800px;
|
||||
height: auto;
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.images .image,
|
||||
.ui.massive.images img,
|
||||
.ui.massive.images svg,
|
||||
.ui.massive.image {
|
||||
width: 960px;
|
||||
height: auto;
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.images {
|
||||
font-size: 0;
|
||||
margin: 0 -0.25rem;
|
||||
}
|
||||
.ui.images .image,
|
||||
.ui.images > img,
|
||||
.ui.images > svg {
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Image
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.images,.ui.ui.hidden.image{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg{display:inline-block;vertical-align:bottom}.ui.images .ui.top.aligned.image,.ui.top.aligned.images .image{align-self:flex-start}.ui.images .ui.middle.aligned.image,.ui.middle.aligned.images .image{align-self:center}.ui.bottom.aligned.images .image,.ui.images .ui.bottom.aligned.image{align-self:flex-end}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image{display:block;margin-left:auto;margin-right:auto}.ui.centered.images{display:flex;flex-flow:row wrap;align-items:stretch;justify-content:center}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.78571429rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,534 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Item
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Item
|
||||
--------------- */
|
||||
.ui.items > .item {
|
||||
display: flex;
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: box-shadow 0.1s ease;
|
||||
z-index: "";
|
||||
}
|
||||
.ui.items > .item a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Items
|
||||
--------------- */
|
||||
.ui.items {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
.ui.items:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.ui.items:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Item
|
||||
--------------- */
|
||||
.ui.items > .item::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.items > .item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.items > .item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Images
|
||||
--------------- */
|
||||
.ui.items > .item > .image {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: "";
|
||||
align-self: start;
|
||||
}
|
||||
.ui.items > .item > .image > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.125rem;
|
||||
border: none;
|
||||
}
|
||||
.ui.items > .item > .image:only-child > img {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.items > .item > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
background: none;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.items > .item > .content::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
.ui.items > .item > .image + .content {
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
align-self: start;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.ui.items > .item > .content > .header {
|
||||
display: inline-block;
|
||||
margin: -0.21425em 0 0;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
/* Default Header Size */
|
||||
.ui.items > .item > .content > .header:not(.ui) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
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: center;
|
||||
width: "";
|
||||
}
|
||||
.ui.items > .item img.avatar,
|
||||
.ui.items > .item .avatar img {
|
||||
width: "";
|
||||
height: "";
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Description
|
||||
--------------- */
|
||||
.ui.items > .item > .content > .description {
|
||||
margin-top: 0.6em;
|
||||
max-width: none;
|
||||
font-size: 1em;
|
||||
line-height: 1.4285em;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Paragraph
|
||||
--------------- */
|
||||
.ui.items > .item > .content p {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
.ui.items > .item > .content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Meta
|
||||
--------------- */
|
||||
.ui.items > .item .meta {
|
||||
margin: 0.5em 0 0.5em;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.ui.items > .item .meta * {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.ui.items > .item .meta :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.items > .item .meta [class*="right floated"] {
|
||||
margin-right: 0;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Links
|
||||
--------------- */
|
||||
|
||||
/* Generic */
|
||||
.ui.items > .item > .content a:not(.ui) {
|
||||
color: "";
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
.ui.items > .item > .content a:not(.ui):hover {
|
||||
color: "";
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ui.items > .item > .content > a.header {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.ui.items > .item > .content > a.header:hover {
|
||||
color: #1e70bf;
|
||||
}
|
||||
|
||||
/* Meta */
|
||||
.ui.items > .item .meta > a:not(.ui) {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.ui.items > .item .meta > a:not(.ui):hover {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Labels
|
||||
--------------- */
|
||||
|
||||
/* -----Star----- */
|
||||
|
||||
/* Icon */
|
||||
.ui.items > .item > .content .favorite.icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
.ui.items > .item > .content .favorite.icon:hover {
|
||||
opacity: 1;
|
||||
color: #ffb70a;
|
||||
}
|
||||
.ui.items > .item > .content .active.favorite.icon {
|
||||
color: #ffe623;
|
||||
}
|
||||
|
||||
/* -----Like----- */
|
||||
|
||||
/* Icon */
|
||||
.ui.items > .item > .content .like.icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
.ui.items > .item > .content .like.icon:hover {
|
||||
opacity: 1;
|
||||
color: #ff2733;
|
||||
}
|
||||
.ui.items > .item > .content .active.like.icon {
|
||||
color: #ff2733;
|
||||
}
|
||||
|
||||
/* ----------------
|
||||
Extra Content
|
||||
----------------- */
|
||||
.ui.items > .item .extra {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 0.5rem 0 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
box-shadow: none;
|
||||
transition: color 0.1s ease;
|
||||
border-top: none;
|
||||
}
|
||||
.ui.items > .item .extra > * {
|
||||
margin: 0.25rem 0.5rem 0.25rem 0;
|
||||
}
|
||||
.ui.items > .item .extra > [class*="right floated"] {
|
||||
margin: 0.25rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
.ui.items > .item .extra::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Responsive
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Default Image Width */
|
||||
.ui.items > .item > .image:not(.ui) {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
/* Tablet Only */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.items > .item {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.ui.items > .item > .image:not(.ui) {
|
||||
width: 150px;
|
||||
}
|
||||
.ui.items > .item > .image + .content {
|
||||
display: block;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Only */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.items:not(.unstackable) > .item {
|
||||
flex-direction: column;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.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: auto !important;
|
||||
max-height: 250px !important;
|
||||
}
|
||||
.ui.items:not(.unstackable) > .item > .image + .content {
|
||||
display: block;
|
||||
padding: 1.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
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: 1.5em 0;
|
||||
}
|
||||
.ui[class*="very relaxed"].items > .item {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Divided
|
||||
-------------------- */
|
||||
.ui.divided.items > .item {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.ui.divided.items > .item:first-child {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.ui.divided.items > .item:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Relaxed Divided */
|
||||
.ui.relaxed.divided.items > .item {
|
||||
margin: 0;
|
||||
padding: 1.5em 0;
|
||||
}
|
||||
.ui[class*="very relaxed"].divided.items > .item {
|
||||
margin: 0;
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
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: #1e70bf;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Size
|
||||
--------------- */
|
||||
.ui.items > .item {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.mini.items > .item {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.tiny.items > .item {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.items > .item {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.large.items > .item {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.big.items > .item {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.huge.items > .item {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.massive.items > .item {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
Unstackable
|
||||
---------------- */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.unstackable.items > .item > .image,
|
||||
.ui.unstackable.items > .item > .image > img {
|
||||
width: 125px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.inverted.items > .item {
|
||||
background: transparent;
|
||||
}
|
||||
.ui.inverted.items > .item > .content {
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.items > .item .extra {
|
||||
background: none;
|
||||
}
|
||||
.ui.inverted.items > .item > .content > .header {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.items > .item > .content > .description {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.items > .item .meta {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.ui.inverted.items > .item > .content a:not(.ui) {
|
||||
color: #57a4ef;
|
||||
}
|
||||
.ui.inverted.items > .item > .content a:not(.ui):hover {
|
||||
color: #4183c4;
|
||||
}
|
||||
.ui.inverted.items > .item > .content > a.header {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.items > .item > .content > a.header:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.items > .item .meta > a:not(.ui) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.items > .item .meta > a:not(.ui):hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.items > .item > .content .favorite.icon:hover {
|
||||
color: #ffc63d;
|
||||
}
|
||||
.ui.inverted.items > .item > .content .active.favorite.icon {
|
||||
color: #ffec56;
|
||||
}
|
||||
.ui.inverted.items > .item > .content .like.icon:hover {
|
||||
color: #ff5a63;
|
||||
}
|
||||
.ui.inverted.items > .item > .content .active.like.icon {
|
||||
color: #ff5a63;
|
||||
}
|
||||
.ui.inverted.items > .item .extra {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.items a.item:hover .content .header,
|
||||
.ui.inverted.link.items > .item:hover .content .header {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.divided.items > .item {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.inverted.divided.items > .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.disabled.items,
|
||||
.ui.items > .disabled.item {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,955 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - List
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
List
|
||||
*******************************/
|
||||
|
||||
ul.ui.list,
|
||||
ol.ui.list,
|
||||
.ui.list {
|
||||
list-style-type: none;
|
||||
margin: 1em 0;
|
||||
padding: 0 0;
|
||||
}
|
||||
ul.ui.list:first-child,
|
||||
ol.ui.list:first-child,
|
||||
.ui.list:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
ul.ui.list:last-child,
|
||||
ol.ui.list:last-child,
|
||||
.ui.list:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
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: none;
|
||||
list-style-position: outside;
|
||||
padding: 0.21428571em 0;
|
||||
line-height: 1.14285714em;
|
||||
}
|
||||
ul.ui.list > li:first-child::after,
|
||||
ol.ui.list > li:first-child::after,
|
||||
.ui.list > .list > .item::after,
|
||||
.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: 0;
|
||||
}
|
||||
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: 0;
|
||||
}
|
||||
|
||||
/* Child List */
|
||||
ul.ui.list ul,
|
||||
ol.ui.list ol,
|
||||
.ui.list .list:not(.icon) {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0.75em 0 0.25em 0.5em;
|
||||
}
|
||||
|
||||
/* Child Item */
|
||||
ul.ui.list ul li,
|
||||
ol.ui.list ol li,
|
||||
.ui.list .list > .item {
|
||||
padding: 0.14285714em 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.list .list > .item > i.icon,
|
||||
.ui.list > .item > i.icon {
|
||||
display: table-cell;
|
||||
min-width: 1.55em;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
.ui.list .list > .item > i.icon:not(.loading),
|
||||
.ui.list > .item > i.icon:not(.loading) {
|
||||
padding-right: 0.28571429em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > i.icon:only-child,
|
||||
.ui.list > .item > i.icon:only-child {
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.ui.list .list > .item > .image,
|
||||
.ui.list > .item > .image {
|
||||
display: table-cell;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > .image:not(:only-child):not(img),
|
||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.list .list > .item > .image img,
|
||||
.ui.list > .item > .image img {
|
||||
vertical-align: top;
|
||||
}
|
||||
.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: 1.14285714em;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.list .list > .item > .image + .content,
|
||||
.ui.list .list > .item > i.icon + .content,
|
||||
.ui.list > .item > .image + .content,
|
||||
.ui.list > .item > i.icon + .content {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
padding: 0 0 0 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > i.loading.icon + .content,
|
||||
.ui.list > .item > i.loading.icon + .content {
|
||||
padding-left: calc(0.2857142857142857em + 0.5em);
|
||||
}
|
||||
.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: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.ui.list .list > .item .description,
|
||||
.ui.list > .item .description {
|
||||
display: block;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
/* 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: #4183c4;
|
||||
}
|
||||
.ui.list .list > a.item:hover,
|
||||
.ui.list > a.item:hover {
|
||||
color: #1e70bf;
|
||||
}
|
||||
|
||||
/* Linked Item Icons */
|
||||
.ui.list .list > a.item > i.icons,
|
||||
.ui.list > a.item > i.icons,
|
||||
.ui.list .list > a.item > i.icon,
|
||||
.ui.list > a.item > i.icon {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Header Link */
|
||||
.ui.list .list > .item a.header,
|
||||
.ui.list > .item a.header {
|
||||
cursor: pointer;
|
||||
color: #4183c4 !important;
|
||||
}
|
||||
.ui.list .list > .item > a.header:hover,
|
||||
.ui.list > .item > a.header:hover {
|
||||
color: #1e70bf !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: 0 1em 0 0;
|
||||
}
|
||||
.ui.list .list > .item [class*="right floated"],
|
||||
.ui.list > .item [class*="right floated"] {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
.ui.menu .ui.list > .item,
|
||||
.ui.menu .ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
background-color: transparent;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding: 0.21428571em 0;
|
||||
line-height: 1.14285714em;
|
||||
}
|
||||
.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: 0;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:last-child,
|
||||
.ui.menu .ui.list > .item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Horizontal
|
||||
-------------------- */
|
||||
.ui.horizontal.list {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
}
|
||||
.ui.horizontal.list > .item {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.horizontal.list:not(.celled) > .item:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui.horizontal.list .list:not(.icon) {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ui.horizontal.list > .item > .image,
|
||||
.ui.horizontal.list .list > .item > .image,
|
||||
.ui.horizontal.list > .item > i.icon,
|
||||
.ui.horizontal.list .list > .item > i.icon,
|
||||
.ui.horizontal.list > .item > .content,
|
||||
.ui.horizontal.list .list > .item > .content {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Padding on all elements */
|
||||
.ui.horizontal.list > .item:first-child,
|
||||
.ui.horizontal.list > .item:last-child {
|
||||
padding-top: 0.21428571em;
|
||||
padding-bottom: 0.21428571em;
|
||||
}
|
||||
|
||||
/* Horizontal List */
|
||||
.ui.horizontal.list > .item > i.icon,
|
||||
.ui.horizontal.list .item > i.icons > i.icon {
|
||||
margin: 0;
|
||||
padding: 0 0.25em 0 0;
|
||||
}
|
||||
.ui.horizontal.list > .item > .image + .content,
|
||||
.ui.horizontal.list > .item > i.icon,
|
||||
.ui.horizontal.list > .item > i.icon + .content {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.ui.horizontal.list > .item > .image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Disabled
|
||||
-------------------- */
|
||||
.ui.list .list > .disabled.item,
|
||||
.ui.list > .disabled.item {
|
||||
pointer-events: none;
|
||||
color: rgba(40, 40, 40, 0.3) !important;
|
||||
}
|
||||
.ui.inverted.list .list > .disabled.item,
|
||||
.ui.inverted.list > .disabled.item {
|
||||
color: rgba(225, 225, 225, 0.3) !important;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Hover
|
||||
-------------------- */
|
||||
.ui.list .list > a.item:hover > .icons,
|
||||
.ui.list > a.item:hover > .icons,
|
||||
.ui.list .list > a.item:hover > i.icon,
|
||||
.ui.list > a.item:hover > i.icon {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Inverted
|
||||
-------------------- */
|
||||
.ui.inverted.list .list > a.item > i.icon,
|
||||
.ui.inverted.list > a.item > i.icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.list .list > .item .header,
|
||||
.ui.inverted.list > .item .header {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.list .list > .item .description,
|
||||
.ui.inverted.list > .item .description {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.ui.inverted.list .list > .item > .content,
|
||||
.ui.inverted.list > .item > .content {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Item Link */
|
||||
.ui.inverted.list .list > a.item,
|
||||
.ui.inverted.list > a.item {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.list .list > a.item:hover,
|
||||
.ui.inverted.list > a.item:hover {
|
||||
color: #1e70bf;
|
||||
}
|
||||
|
||||
/* Linking Content */
|
||||
.ui.inverted.list .item a:not(.ui) {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
.ui.inverted.list .item a:not(.ui):hover {
|
||||
color: #1e70bf !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: rgba(0, 0, 0, 0.4);
|
||||
transition: 0.1s color ease;
|
||||
}
|
||||
.ui.ui.link.list a.item:hover,
|
||||
.ui.ui.link.list .item a:not(.ui):hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.ui.ui.link.list a.item:active,
|
||||
.ui.ui.link.list .item a:not(.ui):active {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.ui.ui.link.list .active.item,
|
||||
.ui.ui.link.list .active.item a:not(.ui) {
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.link.list .item,
|
||||
.ui.inverted.link.list a.item,
|
||||
.ui.inverted.link.list .item a:not(.ui) {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.ui.ui.inverted.link.list a.item:hover,
|
||||
.ui.ui.inverted.link.list .item a:not(.ui):hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.link.list a.item:active,
|
||||
.ui.ui.inverted.link.list .item a:not(.ui):active {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.ui.inverted.link.list a.active.item,
|
||||
.ui.ui.inverted.link.list .active.item a:not(.ui) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Selection
|
||||
-------------------- */
|
||||
.ui.selection.list .list > .item,
|
||||
.ui.selection.list > .item {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
padding: 0.5em 0.5em;
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 0.5em;
|
||||
transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease;
|
||||
}
|
||||
.ui.selection.list .list > .item:last-child,
|
||||
.ui.selection.list > .item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.selection.list .list > .item:hover,
|
||||
.ui.selection.list > .item:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.ui.selection.list .list > .item:active,
|
||||
.ui.selection.list > .item:active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.ui.selection.list .list > .item.active,
|
||||
.ui.selection.list > .item.active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.selection.list > .item {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.ui.inverted.selection.list > .item:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.selection.list > .item:active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui.inverted.selection.list > .item.active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 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: 0;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Animated
|
||||
-------------------- */
|
||||
.ui.animated.list > .item {
|
||||
transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s;
|
||||
}
|
||||
.ui.animated.list:not(.horizontal) > .item:hover {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Fitted
|
||||
-------------------- */
|
||||
.ui.fitted.list:not(.selection) .list > .item,
|
||||
.ui.fitted.list:not(.selection) > .item {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui.fitted.selection.list .list > .item,
|
||||
.ui.fitted.selection.list > .item {
|
||||
margin-left: -0.5em;
|
||||
margin-right: -0.5em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Bulleted
|
||||
-------------------- */
|
||||
ul.ui.list,
|
||||
.ui.bulleted.list {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
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 {
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
font-weight: normal;
|
||||
margin-left: -1.25rem;
|
||||
content: "\2022";
|
||||
opacity: 1;
|
||||
color: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
ul.ui.list li::before,
|
||||
.ui.bulleted.list .list > a.item::before,
|
||||
.ui.bulleted.list > a.item::before {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
ul.ui.list ul,
|
||||
.ui.bulleted.list .list:not(.icon) {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Horizontal Bulleted */
|
||||
ul.ui.horizontal.bulleted.list,
|
||||
.ui.horizontal.bulleted.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li,
|
||||
.ui.horizontal.bulleted.list > .item {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li:first-child,
|
||||
.ui.horizontal.bulleted.list > .item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li::before,
|
||||
.ui.horizontal.bulleted.list > .item::before {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
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:not(.icon),
|
||||
ol.ui.list ol {
|
||||
counter-reset: ordered;
|
||||
margin-left: 1.25rem;
|
||||
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;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
margin-left: -1.25rem;
|
||||
counter-increment: ordered;
|
||||
content: counters(ordered, ".") " ";
|
||||
text-align: right;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
vertical-align: middle;
|
||||
opacity: 0.8;
|
||||
}
|
||||
ol.ui.inverted.list li::before,
|
||||
.ui.ordered.inverted.list .list > .item::before,
|
||||
.ui.ordered.inverted.list > .item::before {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Value */
|
||||
.ui.ordered.list .list > .item[data-value]::before,
|
||||
.ui.ordered.list > .item[data-value]::before {
|
||||
content: attr(data-value);
|
||||
}
|
||||
ol.ui.list li[value]::before {
|
||||
content: attr(value);
|
||||
}
|
||||
|
||||
/* Child Lists */
|
||||
ol.ui.list ol,
|
||||
.ui.ordered.list .list:not(.icon) {
|
||||
margin-left: 1em;
|
||||
}
|
||||
ol.ui.list ol li::before,
|
||||
.ui.ordered.list .list > .item::before {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
/* Horizontal Ordered */
|
||||
ol.ui.horizontal.list,
|
||||
.ui.ordered.horizontal.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
ol.ui.horizontal.list li::before,
|
||||
.ui.ordered.horizontal.list .list > .item::before,
|
||||
.ui.ordered.horizontal.list > .item::before {
|
||||
position: static;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Suffixed Ordered */
|
||||
ol.ui.suffixed.list li::before,
|
||||
.ui.suffixed.ordered.list .list > .item::before,
|
||||
.ui.suffixed.ordered.list > .item::before {
|
||||
content: counters(ordered, ".") ".";
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Divided
|
||||
-------------------- */
|
||||
.ui.divided.list > .item {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.divided.list .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .item .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.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: 1px;
|
||||
}
|
||||
|
||||
/* Divided bulleted */
|
||||
.ui.divided.bulleted.list:not(.horizontal),
|
||||
.ui.divided.bulleted.list .list:not(.icon) {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.ui.divided.bulleted.list > .item:not(.horizontal) {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Divided Ordered */
|
||||
.ui.divided.ordered.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.divided.ordered.list .list > .item,
|
||||
.ui.divided.ordered.list > .item {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.ui.divided.ordered.list .item .list:not(.icon) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-bottom: 0.21428571em;
|
||||
}
|
||||
.ui.divided.ordered.list .item .list > .item {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/* Divided Selection */
|
||||
.ui.divided.selection.list .list > .item,
|
||||
.ui.divided.selection.list > .item {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Divided horizontal */
|
||||
.ui.divided.horizontal.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item:not(:last-child) {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item {
|
||||
border-top: none;
|
||||
border-right: 1px solid rgba(34, 36, 38, 0.15);
|
||||
margin: 0;
|
||||
line-height: 0.6;
|
||||
}
|
||||
.ui.horizontal.divided.list > .item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.divided.inverted.list > .item,
|
||||
.ui.divided.inverted.list > .list,
|
||||
.ui.divided.inverted.horizontal.list > .item {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Celled
|
||||
-------------------- */
|
||||
.ui.celled.list > .item,
|
||||
.ui.celled.list > .list {
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.celled.list > .item:last-child {
|
||||
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* Padding on all elements */
|
||||
.ui.celled.list > .item:first-child,
|
||||
.ui.celled.list > .item:last-child {
|
||||
padding-top: 0.21428571em;
|
||||
padding-bottom: 0.21428571em;
|
||||
}
|
||||
|
||||
/* Sub Menu */
|
||||
.ui.celled.list .item .list > .item {
|
||||
border-width: 0;
|
||||
}
|
||||
.ui.celled.list .list > .item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
/* Celled Bulleted */
|
||||
.ui.celled.bulleted.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.celled.bulleted.list .list > .item,
|
||||
.ui.celled.bulleted.list > .item {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.ui.celled.bulleted.list .item .list:not(.icon) {
|
||||
margin-left: -1.25rem;
|
||||
margin-right: -1.25rem;
|
||||
padding-bottom: 0.21428571em;
|
||||
}
|
||||
|
||||
/* Celled Ordered */
|
||||
.ui.celled.ordered.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.celled.ordered.list .list > .item,
|
||||
.ui.celled.ordered.list > .item {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.ui.celled.ordered.list .item .list:not(.icon) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-bottom: 0.21428571em;
|
||||
}
|
||||
.ui.celled.ordered.list .list > .item {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/* Celled Horizontal */
|
||||
.ui.horizontal.celled.list {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ui.horizontal.celled.list .list > .item,
|
||||
.ui.horizontal.celled.list > .item {
|
||||
border-top: none;
|
||||
border-left: 1px solid rgba(34, 36, 38, 0.15);
|
||||
margin: 0;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
line-height: 0.6;
|
||||
}
|
||||
.ui.horizontal.celled.list .list > .item:last-child,
|
||||
.ui.horizontal.celled.list > .item:last-child {
|
||||
border-bottom: none;
|
||||
border-right: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.celled.inverted.list > .item,
|
||||
.ui.celled.inverted.list > .list {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.ui.celled.inverted.horizontal.list .list > .item,
|
||||
.ui.celled.inverted.horizontal.list > .item {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Relaxed
|
||||
-------------------- */
|
||||
.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
|
||||
padding-top: 0.42857143em;
|
||||
}
|
||||
.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
|
||||
padding-bottom: 0.42857143em;
|
||||
}
|
||||
.ui.horizontal.relaxed.list .list > .item:not(:first-child),
|
||||
.ui.horizontal.relaxed.list > .item:not(:first-child) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.ui.horizontal.relaxed.list .list > .item:not(:last-child),
|
||||
.ui.horizontal.relaxed.list > .item:not(:last-child) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
/* Very Relaxed */
|
||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
|
||||
padding-top: 0.85714286em;
|
||||
}
|
||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
|
||||
padding-bottom: 0.85714286em;
|
||||
}
|
||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
|
||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
|
||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Sizes
|
||||
-------------------- */
|
||||
.ui.list {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.mini.list {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.mini.horizontal.list .list > .item,
|
||||
.ui.mini.horizontal.list > .item {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.list {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.tiny.horizontal.list .list > .item,
|
||||
.ui.tiny.horizontal.list > .item {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.list {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.small.horizontal.list .list > .item,
|
||||
.ui.small.horizontal.list > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.list {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.large.horizontal.list .list > .item,
|
||||
.ui.large.horizontal.list > .item {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.list {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.big.horizontal.list .list > .item,
|
||||
.ui.big.horizontal.list > .item {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.list {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.huge.horizontal.list .list > .item,
|
||||
.ui.huge.horizontal.list > .item {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.massive.list {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
.ui.massive.horizontal.list .list > .item,
|
||||
.ui.massive.horizontal.list > .item {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Variable Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,787 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Loader
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Loader
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Standard Size */
|
||||
.ui.loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
.ui.loader::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
.ui.loader::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid #767676;
|
||||
border-radius: 500rem;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
/* Speeds */
|
||||
.ui.ui.fast.loading::after,
|
||||
.ui.ui.fast.loading .input > i.icon::after,
|
||||
.ui.ui.fast.loading > i.icon::after,
|
||||
.ui.fast.loader::after {
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
.ui.ui.slow.loading::after,
|
||||
.ui.ui.slow.loading .input > i.icon::after,
|
||||
.ui.ui.slow.loading > i.icon::after,
|
||||
.ui.slow.loader::after {
|
||||
animation-duration: 0.9s;
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
@keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Coupling
|
||||
-------------------- */
|
||||
|
||||
/* Show inside active dimmer */
|
||||
.ui.dimmer > .loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Black Dimmer */
|
||||
.ui.dimmer > .ui.loader {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.dimmer > .ui.loader:not(.elastic)::before {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* White Dimmer (Inverted) */
|
||||
.ui.inverted.dimmer > .ui.loader {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.loader:not(.elastic)::before {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Text
|
||||
-------------------- */
|
||||
.ui.ui.ui.ui.text.loader {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.indeterminate.loader::after {
|
||||
animation-direction: reverse;
|
||||
animation-duration: 1.2s;
|
||||
}
|
||||
.ui.loader.active,
|
||||
.ui.loader.visible {
|
||||
display: block;
|
||||
}
|
||||
.ui.loader.disabled,
|
||||
.ui.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Sizes
|
||||
-------------------- */
|
||||
.ui.loader {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.loader::before,
|
||||
.ui.loader::after {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
margin: 0 0 0 -1.14285714rem;
|
||||
}
|
||||
.ui.text.loader {
|
||||
min-width: 2.28571429rem;
|
||||
padding-top: 3.07142857rem;
|
||||
}
|
||||
.ui.mini.loader {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.mini.loader::before,
|
||||
.ui.mini.loader::after {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0 0 0 -0.5rem;
|
||||
}
|
||||
.ui.mini.text.loader {
|
||||
min-width: 1rem;
|
||||
padding-top: 1.78571429rem;
|
||||
}
|
||||
.ui.tiny.loader {
|
||||
width: 1.14285714rem;
|
||||
height: 1.14285714rem;
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.tiny.loader::before,
|
||||
.ui.tiny.loader::after {
|
||||
width: 1.14285714rem;
|
||||
height: 1.14285714rem;
|
||||
margin: 0 0 0 -0.57142857rem;
|
||||
}
|
||||
.ui.tiny.text.loader {
|
||||
min-width: 1.14285714rem;
|
||||
padding-top: 1.92857143rem;
|
||||
}
|
||||
.ui.small.loader {
|
||||
width: 1.71428571rem;
|
||||
height: 1.71428571rem;
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.small.loader::before,
|
||||
.ui.small.loader::after {
|
||||
width: 1.71428571rem;
|
||||
height: 1.71428571rem;
|
||||
margin: 0 0 0 -0.85714286rem;
|
||||
}
|
||||
.ui.small.text.loader {
|
||||
min-width: 1.71428571rem;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
.ui.large.loader {
|
||||
width: 3.42857143rem;
|
||||
height: 3.42857143rem;
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.large.loader::before,
|
||||
.ui.large.loader::after {
|
||||
width: 3.42857143rem;
|
||||
height: 3.42857143rem;
|
||||
margin: 0 0 0 -1.71428571rem;
|
||||
}
|
||||
.ui.large.text.loader {
|
||||
min-width: 3.42857143rem;
|
||||
padding-top: 4.21428571rem;
|
||||
}
|
||||
.ui.big.loader {
|
||||
width: 3.71428571rem;
|
||||
height: 3.71428571rem;
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.big.loader::before,
|
||||
.ui.big.loader::after {
|
||||
width: 3.71428571rem;
|
||||
height: 3.71428571rem;
|
||||
margin: 0 0 0 -1.85714286rem;
|
||||
}
|
||||
.ui.big.text.loader {
|
||||
min-width: 3.71428571rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
.ui.huge.loader {
|
||||
width: 4.14285714rem;
|
||||
height: 4.14285714rem;
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.huge.loader::before,
|
||||
.ui.huge.loader::after {
|
||||
width: 4.14285714rem;
|
||||
height: 4.14285714rem;
|
||||
margin: 0 0 0 -2.07142857rem;
|
||||
}
|
||||
.ui.huge.text.loader {
|
||||
min-width: 4.14285714rem;
|
||||
padding-top: 4.92857143rem;
|
||||
}
|
||||
.ui.massive.loader {
|
||||
width: 4.57142857rem;
|
||||
height: 4.57142857rem;
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
.ui.massive.loader::before,
|
||||
.ui.massive.loader::after {
|
||||
width: 4.57142857rem;
|
||||
height: 4.57142857rem;
|
||||
margin: 0 0 0 -2.28571429rem;
|
||||
}
|
||||
.ui.massive.text.loader {
|
||||
min-width: 4.57142857rem;
|
||||
padding-top: 5.35714286rem;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Colors
|
||||
-------------------- */
|
||||
.ui.ui.primary.elastic.loader::before,
|
||||
.ui.primary.basic.elastic.loading.button::before,
|
||||
.ui.primary.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.primary.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.primary.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.primary.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.primary.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.primary.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.primary.loading > i.icon::after,
|
||||
.ui.ui.ui.primary.loader::after {
|
||||
color: #2185d0;
|
||||
}
|
||||
.ui.inverted.primary.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.primary.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.primary.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.primary.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.primary.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.primary.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.primary.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.primary.loader::after {
|
||||
color: #54c8ff;
|
||||
}
|
||||
.ui.ui.secondary.elastic.loader::before,
|
||||
.ui.secondary.basic.elastic.loading.button::before,
|
||||
.ui.secondary.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.secondary.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.secondary.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.secondary.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.secondary.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.secondary.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.secondary.loading > i.icon::after,
|
||||
.ui.ui.ui.secondary.loader::after {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.secondary.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.secondary.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.secondary.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.secondary.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.secondary.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.secondary.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.secondary.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.secondary.loader::after {
|
||||
color: #545454;
|
||||
}
|
||||
.ui.ui.red.elastic.loader::before,
|
||||
.ui.red.basic.elastic.loading.button::before,
|
||||
.ui.red.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.red.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.red.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.red.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.red.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.red.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.red.loading > i.icon::after,
|
||||
.ui.ui.ui.red.loader::after {
|
||||
color: #db2828;
|
||||
}
|
||||
.ui.inverted.red.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.red.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.red.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.red.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.red.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.red.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.red.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.red.loader::after {
|
||||
color: #ff695e;
|
||||
}
|
||||
.ui.ui.orange.elastic.loader::before,
|
||||
.ui.orange.basic.elastic.loading.button::before,
|
||||
.ui.orange.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.orange.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.orange.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.orange.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.orange.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.orange.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.orange.loading > i.icon::after,
|
||||
.ui.ui.ui.orange.loader::after {
|
||||
color: #f2711c;
|
||||
}
|
||||
.ui.inverted.orange.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.orange.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.orange.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.orange.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.orange.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.orange.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.orange.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.orange.loader::after {
|
||||
color: #ff851b;
|
||||
}
|
||||
.ui.ui.yellow.elastic.loader::before,
|
||||
.ui.yellow.basic.elastic.loading.button::before,
|
||||
.ui.yellow.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.yellow.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.yellow.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.yellow.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.yellow.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.yellow.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.yellow.loading > i.icon::after,
|
||||
.ui.ui.ui.yellow.loader::after {
|
||||
color: #fbbd08;
|
||||
}
|
||||
.ui.inverted.yellow.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.yellow.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.yellow.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.yellow.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.yellow.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.yellow.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.yellow.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.yellow.loader::after {
|
||||
color: #ffe21f;
|
||||
}
|
||||
.ui.ui.olive.elastic.loader::before,
|
||||
.ui.olive.basic.elastic.loading.button::before,
|
||||
.ui.olive.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.olive.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.olive.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.olive.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.olive.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.olive.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.olive.loading > i.icon::after,
|
||||
.ui.ui.ui.olive.loader::after {
|
||||
color: #b5cc18;
|
||||
}
|
||||
.ui.inverted.olive.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.olive.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.olive.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.olive.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.olive.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.olive.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.olive.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.olive.loader::after {
|
||||
color: #d9e778;
|
||||
}
|
||||
.ui.ui.green.elastic.loader::before,
|
||||
.ui.green.basic.elastic.loading.button::before,
|
||||
.ui.green.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.green.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.green.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.green.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.green.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.green.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.green.loading > i.icon::after,
|
||||
.ui.ui.ui.green.loader::after {
|
||||
color: #21ba45;
|
||||
}
|
||||
.ui.inverted.green.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.green.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.green.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.green.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.green.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.green.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.green.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.green.loader::after {
|
||||
color: #2ecc40;
|
||||
}
|
||||
.ui.ui.teal.elastic.loader::before,
|
||||
.ui.teal.basic.elastic.loading.button::before,
|
||||
.ui.teal.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.teal.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.teal.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.teal.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.teal.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.teal.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.teal.loading > i.icon::after,
|
||||
.ui.ui.ui.teal.loader::after {
|
||||
color: #00b5ad;
|
||||
}
|
||||
.ui.inverted.teal.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.teal.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.teal.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.teal.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.teal.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.teal.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.teal.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.teal.loader::after {
|
||||
color: #6dffff;
|
||||
}
|
||||
.ui.ui.blue.elastic.loader::before,
|
||||
.ui.blue.basic.elastic.loading.button::before,
|
||||
.ui.blue.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.blue.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.blue.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.blue.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.blue.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.blue.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.blue.loading > i.icon::after,
|
||||
.ui.ui.ui.blue.loader::after {
|
||||
color: #2185d0;
|
||||
}
|
||||
.ui.inverted.blue.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.blue.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.blue.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.blue.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.blue.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.blue.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.blue.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.blue.loader::after {
|
||||
color: #54c8ff;
|
||||
}
|
||||
.ui.ui.violet.elastic.loader::before,
|
||||
.ui.violet.basic.elastic.loading.button::before,
|
||||
.ui.violet.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.violet.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.violet.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.violet.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.violet.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.violet.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.violet.loading > i.icon::after,
|
||||
.ui.ui.ui.violet.loader::after {
|
||||
color: #6435c9;
|
||||
}
|
||||
.ui.inverted.violet.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.violet.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.violet.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.violet.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.violet.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.violet.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.violet.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.violet.loader::after {
|
||||
color: #a291fb;
|
||||
}
|
||||
.ui.ui.purple.elastic.loader::before,
|
||||
.ui.purple.basic.elastic.loading.button::before,
|
||||
.ui.purple.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.purple.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.purple.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.purple.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.purple.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.purple.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.purple.loading > i.icon::after,
|
||||
.ui.ui.ui.purple.loader::after {
|
||||
color: #a333c8;
|
||||
}
|
||||
.ui.inverted.purple.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.purple.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.purple.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.purple.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.purple.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.purple.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.purple.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.purple.loader::after {
|
||||
color: #dc73ff;
|
||||
}
|
||||
.ui.ui.pink.elastic.loader::before,
|
||||
.ui.pink.basic.elastic.loading.button::before,
|
||||
.ui.pink.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.pink.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.pink.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.pink.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.pink.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.pink.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.pink.loading > i.icon::after,
|
||||
.ui.ui.ui.pink.loader::after {
|
||||
color: #e03997;
|
||||
}
|
||||
.ui.inverted.pink.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.pink.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.pink.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.pink.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.pink.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.pink.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.pink.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.pink.loader::after {
|
||||
color: #ff8edf;
|
||||
}
|
||||
.ui.ui.brown.elastic.loader::before,
|
||||
.ui.brown.basic.elastic.loading.button::before,
|
||||
.ui.brown.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.brown.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.brown.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.brown.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.brown.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.brown.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.brown.loading > i.icon::after,
|
||||
.ui.ui.ui.brown.loader::after {
|
||||
color: #a5673f;
|
||||
}
|
||||
.ui.inverted.brown.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.brown.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.brown.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.brown.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.brown.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.brown.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.brown.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.brown.loader::after {
|
||||
color: #d67c1c;
|
||||
}
|
||||
.ui.ui.grey.elastic.loader::before,
|
||||
.ui.grey.basic.elastic.loading.button::before,
|
||||
.ui.grey.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.grey.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.grey.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.grey.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.grey.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.grey.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.grey.loading > i.icon::after,
|
||||
.ui.ui.ui.grey.loader::after {
|
||||
color: #767676;
|
||||
}
|
||||
.ui.inverted.grey.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.grey.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.grey.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.grey.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.grey.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.grey.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.grey.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.grey.loader::after {
|
||||
color: #dcddde;
|
||||
}
|
||||
.ui.ui.black.elastic.loader::before,
|
||||
.ui.black.basic.elastic.loading.button::before,
|
||||
.ui.black.basic.elastic.loading.button::after,
|
||||
.ui.ui.ui.black.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.black.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.ui.black.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.black.loading:not(.usual):not(.button)::after,
|
||||
.ui.ui.ui.ui.black.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.black.loading > i.icon::after,
|
||||
.ui.ui.ui.black.loader::after {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.black.elastic.loader::before,
|
||||
.ui.ui.ui.inverted.black.elastic.loading:not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.inverted.black.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.inverted.black.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.inverted.black.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.inverted.black.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.inverted.black.loading > i.icon::after,
|
||||
.ui.ui.ui.inverted.black.loader::after {
|
||||
color: #545454;
|
||||
}
|
||||
.ui.ui.elastic.loader::before,
|
||||
.ui.ui.ui.elastic.loading::before,
|
||||
.ui.ui.ui.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.elastic.loading > i.icon::before,
|
||||
.ui.ui.ui.ui.loading:not(.usual)::after,
|
||||
.ui.ui.ui.ui.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.loading > i.icon::after,
|
||||
.ui.ui.ui.loader::after {
|
||||
border-color: currentColor;
|
||||
}
|
||||
.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.elastic.basic.loading.button::before,
|
||||
.ui.elastic.basic.loading.button::after {
|
||||
color: #767676;
|
||||
}
|
||||
.ui.ui.ui.ui.double.loading.button::after {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Inline
|
||||
-------------------- */
|
||||
.ui.inline.loader {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
.ui.inline.loader.active,
|
||||
.ui.inline.loader.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Centered Inline */
|
||||
.ui.centered.inline.loader.active,
|
||||
.ui.centered.inline.loader.visible {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.ui.loading::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading > i.icon::after,
|
||||
.ui.ui.ui.ui.ui.loader::after {
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
|
||||
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
|
||||
.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
|
||||
.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.ui.ui.ui.ui.ui.ui.loading.card::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.segments::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.segment::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.form::after {
|
||||
border-left-color: rgba(0, 0, 0, 0.1);
|
||||
border-right-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
|
||||
.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Elastic
|
||||
-------------------- */
|
||||
.ui.dimmer > .ui.elastic.loader {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.elastic.loader {
|
||||
color: #767676;
|
||||
}
|
||||
.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
|
||||
.ui.ui.elastic.loading .input > i.icon::after,
|
||||
.ui.ui.elastic.loading > i.icon::after,
|
||||
.ui.ui.elastic.loader::after {
|
||||
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.elastic.loading > i.icon::before,
|
||||
.ui.ui.elastic.loader::before {
|
||||
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.ui.elastic.inline.loader:empty {
|
||||
animation: loader 8s infinite linear;
|
||||
}
|
||||
.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
|
||||
.ui.ui.slow.elastic.loading .input > i.icon::after,
|
||||
.ui.ui.slow.elastic.loading > i.icon::after,
|
||||
.ui.ui.slow.elastic.loader::after {
|
||||
animation-duration: 1.5s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.slow.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.slow.elastic.loading > i.icon::before,
|
||||
.ui.ui.slow.elastic.loader::before {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
|
||||
.ui.ui.fast.elastic.loading .input > i.icon::after,
|
||||
.ui.ui.fast.elastic.loading > i.icon::after,
|
||||
.ui.ui.fast.elastic.loader::after {
|
||||
animation-duration: 0.66s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
|
||||
.ui.ui.ui.fast.elastic.loading .input > i.icon::before,
|
||||
.ui.ui.ui.fast.elastic.loading > i.icon::before,
|
||||
.ui.ui.fast.elastic.loader::before {
|
||||
animation-duration: 0.66s;
|
||||
}
|
||||
@keyframes elastic-loader {
|
||||
0%,
|
||||
1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
1.1%,
|
||||
50% {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
10%,
|
||||
35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%,
|
||||
35% {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes currentcolor-elastic-loader {
|
||||
0%,
|
||||
1% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
1.1%,
|
||||
50% {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
10%,
|
||||
35.1% {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
10.1%,
|
||||
35% {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
50.1% {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,618 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Message
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Message
|
||||
*******************************/
|
||||
|
||||
.ui.message {
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
margin: 1em 0;
|
||||
background: #f8f8f9;
|
||||
padding: 1em 1.5em;
|
||||
line-height: 1.4285em;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
|
||||
border-radius: 0.28571429rem;
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
|
||||
/* Header */
|
||||
.ui.message .header {
|
||||
display: block;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-weight: bold;
|
||||
margin: -0.14285714em 0 0 0;
|
||||
}
|
||||
|
||||
/* Default font size */
|
||||
.ui.message .header:not(.ui) {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
|
||||
/* Paragraph */
|
||||
.ui.message p {
|
||||
opacity: 0.85;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.ui.message p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.message p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.message .header + p {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
/* List */
|
||||
.ui.message .list:not(.ui) {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
opacity: 0.85;
|
||||
list-style-position: inside;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
.ui.message .list:not(.ui):first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.message .list:not(.ui):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.message .list:not(.ui) li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
margin: 0 0 0.3em 1em;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.message .list:not(.ui) li::before {
|
||||
position: absolute;
|
||||
content: "•";
|
||||
left: -1em;
|
||||
height: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.message .list:not(.ui) li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.icon.message > .icons,
|
||||
.ui.icon.message > i.icon {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
.ui.icon.message > .icons:last-child,
|
||||
.ui.icon.message > i.icon:last-child {
|
||||
margin: 0 0 0 0.6em;
|
||||
}
|
||||
|
||||
/* Close Icon */
|
||||
.ui.message > .close.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 0.78575em;
|
||||
right: 0.5em;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
.ui.message > .close.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* First / Last Element */
|
||||
.ui.message > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.message > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
.ui.dropdown .menu > .message {
|
||||
margin: 0 -1px;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
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
|
||||
*******************************/
|
||||
|
||||
.ui.centered.message,
|
||||
.ui.center.aligned.message {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.centered.message > .content,
|
||||
.ui.center.aligned.message > .content {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ui.right.aligned.message {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Compact
|
||||
--------------- */
|
||||
.ui.compact.message {
|
||||
display: inline-block;
|
||||
}
|
||||
.ui.compact.icon.message {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Attached
|
||||
--------------- */
|
||||
.ui.attached.message {
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
||||
margin-top: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.bottom.attached.message {
|
||||
margin-top: -1px;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.bottom.attached.message:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.ui.attached.icon.message {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Icon
|
||||
--------------- */
|
||||
.ui.icon.message {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.icon.message > .icons,
|
||||
.ui.icon.message > i.icon:not(.close) {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: 3em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.icon.message > .content {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.icon.message > .icons + .content,
|
||||
.ui.icon.message > i.icon:not(.close) + .content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.ui.icon.message > i.circular {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Floating
|
||||
--------------- */
|
||||
.ui.floating.message {
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Colors
|
||||
--------------- */
|
||||
|
||||
/* --------------
|
||||
Types
|
||||
--------------- */
|
||||
|
||||
/* Colors */
|
||||
.ui.positive.message {
|
||||
background-color: #fcfff5;
|
||||
color: #2c662d;
|
||||
}
|
||||
.ui.positive.message,
|
||||
.ui.attached.positive.message {
|
||||
box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.positive.message {
|
||||
box-shadow: 0 0 0 1px #a3c293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.positive.message .header {
|
||||
color: #1a531b;
|
||||
}
|
||||
.ui.inverted.positive.message,
|
||||
.ui.inverted.positive.message .header {
|
||||
color: #a3c293;
|
||||
}
|
||||
.ui.negative.message {
|
||||
background-color: #fff6f6;
|
||||
color: #9f3a38;
|
||||
}
|
||||
.ui.negative.message,
|
||||
.ui.attached.negative.message {
|
||||
box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.negative.message {
|
||||
box-shadow: 0 0 0 1px #e0b4b4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.negative.message .header {
|
||||
color: #912d2b;
|
||||
}
|
||||
.ui.inverted.negative.message,
|
||||
.ui.inverted.negative.message .header {
|
||||
color: #e0b4b4;
|
||||
}
|
||||
.ui.error.message {
|
||||
background-color: #fff6f6;
|
||||
color: #9f3a38;
|
||||
}
|
||||
.ui.error.message,
|
||||
.ui.attached.error.message {
|
||||
box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.error.message {
|
||||
box-shadow: 0 0 0 1px #e0b4b4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.error.message .header {
|
||||
color: #912d2b;
|
||||
}
|
||||
.ui.inverted.error.message,
|
||||
.ui.inverted.error.message .header {
|
||||
color: #ecd1d1;
|
||||
}
|
||||
.ui.info.message {
|
||||
background-color: #f8ffff;
|
||||
color: #276f86;
|
||||
}
|
||||
.ui.info.message,
|
||||
.ui.attached.info.message {
|
||||
box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.info.message {
|
||||
box-shadow: 0 0 0 1px #a9d5de inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.info.message .header {
|
||||
color: #0e566c;
|
||||
}
|
||||
.ui.inverted.info.message,
|
||||
.ui.inverted.info.message .header {
|
||||
color: #c6e3e9;
|
||||
}
|
||||
.ui.success.message {
|
||||
background-color: #fcfff5;
|
||||
color: #2c662d;
|
||||
}
|
||||
.ui.success.message,
|
||||
.ui.attached.success.message {
|
||||
box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.success.message {
|
||||
box-shadow: 0 0 0 1px #a3c293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.success.message .header {
|
||||
color: #1a531b;
|
||||
}
|
||||
.ui.inverted.success.message,
|
||||
.ui.inverted.success.message .header {
|
||||
color: #b9d1ad;
|
||||
}
|
||||
.ui.warning.message {
|
||||
background-color: #fffaf3;
|
||||
color: #573a08;
|
||||
}
|
||||
.ui.warning.message,
|
||||
.ui.attached.warning.message {
|
||||
box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.warning.message {
|
||||
box-shadow: 0 0 0 1px #c9ba9b inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.warning.message .header {
|
||||
color: #794b02;
|
||||
}
|
||||
.ui.inverted.warning.message,
|
||||
.ui.inverted.warning.message .header {
|
||||
color: #d7ccb5;
|
||||
}
|
||||
.ui.primary.message {
|
||||
background-color: #dff0ff;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.primary.message,
|
||||
.ui.attached.primary.message {
|
||||
box-shadow: 0 0 0 1px #2185d0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.primary.message {
|
||||
box-shadow: 0 0 0 1px #2185d0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.primary.message .header {
|
||||
color: rgba(242, 242, 242, 0.9);
|
||||
}
|
||||
.ui.secondary.message {
|
||||
background-color: #f4f4f4;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.secondary.message,
|
||||
.ui.attached.secondary.message {
|
||||
box-shadow: 0 0 0 1px #1b1c1d inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.secondary.message {
|
||||
box-shadow: 0 0 0 1px #1b1c1d inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.secondary.message .header {
|
||||
color: rgba(242, 242, 242, 0.9);
|
||||
}
|
||||
.ui.red.message {
|
||||
background-color: #ffe8e6;
|
||||
color: #db2828;
|
||||
}
|
||||
.ui.red.message,
|
||||
.ui.attached.red.message {
|
||||
box-shadow: 0 0 0 1px #db2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.red.message {
|
||||
box-shadow: 0 0 0 1px #db2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.red.message .header {
|
||||
color: #c82121;
|
||||
}
|
||||
.ui.orange.message {
|
||||
background-color: #ffedde;
|
||||
color: #f2711c;
|
||||
}
|
||||
.ui.orange.message,
|
||||
.ui.attached.orange.message {
|
||||
box-shadow: 0 0 0 1px #f2711c inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.orange.message {
|
||||
box-shadow: 0 0 0 1px #f2711c inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.orange.message .header {
|
||||
color: #e7640d;
|
||||
}
|
||||
.ui.yellow.message {
|
||||
background-color: #fff8db;
|
||||
color: #b58105;
|
||||
}
|
||||
.ui.yellow.message,
|
||||
.ui.attached.yellow.message {
|
||||
box-shadow: 0 0 0 1px #b58105 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.yellow.message {
|
||||
box-shadow: 0 0 0 1px #b58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.yellow.message .header {
|
||||
color: #9c6f04;
|
||||
}
|
||||
.ui.olive.message {
|
||||
background-color: #fbfdef;
|
||||
color: #8abc1e;
|
||||
}
|
||||
.ui.olive.message,
|
||||
.ui.attached.olive.message {
|
||||
box-shadow: 0 0 0 1px #8abc1e inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.olive.message {
|
||||
box-shadow: 0 0 0 1px #8abc1e inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.olive.message .header {
|
||||
color: #7aa61a;
|
||||
}
|
||||
.ui.green.message {
|
||||
background-color: #e5f9e7;
|
||||
color: #1ebc30;
|
||||
}
|
||||
.ui.green.message,
|
||||
.ui.attached.green.message {
|
||||
box-shadow: 0 0 0 1px #1ebc30 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.green.message {
|
||||
box-shadow: 0 0 0 1px #1ebc30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.green.message .header {
|
||||
color: #1aa62a;
|
||||
}
|
||||
.ui.teal.message {
|
||||
background-color: #e1f7f7;
|
||||
color: #10a3a3;
|
||||
}
|
||||
.ui.teal.message,
|
||||
.ui.attached.teal.message {
|
||||
box-shadow: 0 0 0 1px #10a3a3 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.teal.message {
|
||||
box-shadow: 0 0 0 1px #10a3a3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.teal.message .header {
|
||||
color: #0e8c8c;
|
||||
}
|
||||
.ui.blue.message {
|
||||
background-color: #dff0ff;
|
||||
color: #2185d0;
|
||||
}
|
||||
.ui.blue.message,
|
||||
.ui.attached.blue.message {
|
||||
box-shadow: 0 0 0 1px #2185d0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.blue.message {
|
||||
box-shadow: 0 0 0 1px #2185d0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.blue.message .header {
|
||||
color: #1e77ba;
|
||||
}
|
||||
.ui.violet.message {
|
||||
background-color: #eae7ff;
|
||||
color: #6435c9;
|
||||
}
|
||||
.ui.violet.message,
|
||||
.ui.attached.violet.message {
|
||||
box-shadow: 0 0 0 1px #6435c9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.violet.message {
|
||||
box-shadow: 0 0 0 1px #6435c9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.violet.message .header {
|
||||
color: #5a30b5;
|
||||
}
|
||||
.ui.purple.message {
|
||||
background-color: #f6e7ff;
|
||||
color: #a333c8;
|
||||
}
|
||||
.ui.purple.message,
|
||||
.ui.attached.purple.message {
|
||||
box-shadow: 0 0 0 1px #a333c8 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.purple.message {
|
||||
box-shadow: 0 0 0 1px #a333c8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.purple.message .header {
|
||||
color: #922eb4;
|
||||
}
|
||||
.ui.pink.message {
|
||||
background-color: #ffe3fb;
|
||||
color: #e03997;
|
||||
}
|
||||
.ui.pink.message,
|
||||
.ui.attached.pink.message {
|
||||
box-shadow: 0 0 0 1px #e03997 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.pink.message {
|
||||
box-shadow: 0 0 0 1px #e03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.pink.message .header {
|
||||
color: #dd238b;
|
||||
}
|
||||
.ui.brown.message {
|
||||
background-color: #f1e2d3;
|
||||
color: #a5673f;
|
||||
}
|
||||
.ui.brown.message,
|
||||
.ui.attached.brown.message {
|
||||
box-shadow: 0 0 0 1px #a5673f inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.brown.message {
|
||||
box-shadow: 0 0 0 1px #a5673f inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.brown.message .header {
|
||||
color: #935b38;
|
||||
}
|
||||
.ui.grey.message {
|
||||
background-color: #f4f4f4;
|
||||
color: #767676;
|
||||
}
|
||||
.ui.grey.message,
|
||||
.ui.attached.grey.message {
|
||||
box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
.ui.floating.grey.message {
|
||||
box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.grey.message .header {
|
||||
color: #696969;
|
||||
}
|
||||
.ui.black.message {
|
||||
background-color: #1b1c1d;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.black.message .header {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.message {
|
||||
background-color: #1b1c1d;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sizes
|
||||
--------------- */
|
||||
.ui.message {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui.mini.message {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
.ui.tiny.message {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.message {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
.ui.large.message {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
.ui.big.message {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
.ui.huge.message {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
.ui.massive.message {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,779 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Modal
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Modal
|
||||
*******************************/
|
||||
|
||||
.ui.modal {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 1001;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
border: none;
|
||||
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
|
||||
transform-origin: 50% 25%;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 0.28571429rem;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
will-change: top, left, margin, transform, opacity;
|
||||
outline: none;
|
||||
}
|
||||
.ui.modal > :first-child:not(.close):not(.dimmer),
|
||||
.ui.modal > i.icon:first-child + *,
|
||||
.ui.modal > .dimmer:first-child + *:not(.close),
|
||||
.ui.modal > .dimmer:first-child + i.icon + * {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
.ui.modal > :last-child {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
.ui.modal > .ui.dimmer {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Close
|
||||
--------------- */
|
||||
.ui.modal > .close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
right: -2.5rem;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
font-size: 1.25em;
|
||||
color: #fff;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0.625rem 0 0 0;
|
||||
}
|
||||
.ui.modal > .close:focus,
|
||||
.ui.modal > .close:hover {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Header
|
||||
--------------- */
|
||||
.ui.modal > .header {
|
||||
display: block;
|
||||
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: none;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
.ui.modal > .header:not(.ui) {
|
||||
font-size: 1.42857143rem;
|
||||
line-height: 1.28571429em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Content
|
||||
--------------- */
|
||||
.ui.modal > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
padding: 1.5rem;
|
||||
background: #fff;
|
||||
}
|
||||
.ui.modal > .image.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.ui.modal > .content > .image {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
width: "";
|
||||
align-self: start;
|
||||
max-width: 100%;
|
||||
}
|
||||
.ui.modal > [class*="top aligned"] {
|
||||
align-self: start;
|
||||
}
|
||||
.ui.modal > [class*="middle aligned"] {
|
||||
align-self: center;
|
||||
}
|
||||
.ui.modal > [class*="stretched"] {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.ui.modal > .content > .description {
|
||||
display: block;
|
||||
flex: 1 0 auto;
|
||||
min-width: 0;
|
||||
align-self: start;
|
||||
}
|
||||
.ui.modal > .content > i.icon + .description,
|
||||
.ui.modal > .content > .image + .description {
|
||||
flex: 0 1 auto;
|
||||
min-width: "";
|
||||
width: auto;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.ui.modal > .content > .image > i.icon {
|
||||
margin: 0;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
line-height: 1;
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Actions
|
||||
--------------- */
|
||||
.ui.modal > .actions {
|
||||
background: #f9fafb;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
||||
text-align: right;
|
||||
}
|
||||
.ui.modal .actions > .button:not(.fluid) {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
.ui.ui.modal > .basic.actions,
|
||||
.ui.basic.modal > .actions {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.modal > .left.actions {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.modal > .left.actions > .button:not(.fluid) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.ui.modal > .centered,
|
||||
.ui.modal > .center.aligned {
|
||||
text-align: center;
|
||||
}
|
||||
.ui.modal > .centered.actions > .button:not(.fluid),
|
||||
.ui.modal > .center.aligned.actions > .button:not(.fluid) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Responsive
|
||||
-------------------- */
|
||||
|
||||
/* Modal Width */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal:not(.fullscreen) {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.modal:not(.fullscreen) {
|
||||
width: 88%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.modal:not(.fullscreen) {
|
||||
width: 850px;
|
||||
margin: 0;
|
||||
}
|
||||
.ui.modal:not(.fullscreen) > .active.dimmer + .close:not(.inside) {
|
||||
pointer-events: none;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
|
||||
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.3), 1px -1px 2px rgba(0, 0, 0, 0.3), -1px 2px 2px rgba(0, 0, 0, 0.3), 1px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
|
||||
text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.3), 1px -1px 2px rgba(255, 255, 255, 0.3), -1px 2px 2px rgba(255, 255, 255, 0.3), 1px 2px 2px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.modal:not(.fullscreen) {
|
||||
width: 900px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.modal:not(.fullscreen) {
|
||||
width: 950px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and Mobile */
|
||||
@media only screen and (max-width: 991.98px) {
|
||||
.ui.modal > .close + .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal > .header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.ui.modal > .close + .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
.ui.overlay.fullscreen.modal > .content.content.content {
|
||||
min-height: calc(100vh - 8.1rem);
|
||||
}
|
||||
.ui.overlay.fullscreen.modal > .scrolling.content.content.content {
|
||||
max-height: calc(100vh - 8.1rem);
|
||||
}
|
||||
.ui.modal > .content {
|
||||
display: block;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 0.5rem !important;
|
||||
right: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.ui.modal .image.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.ui.modal > .content > .image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto !important;
|
||||
text-align: center;
|
||||
padding: 0 0 1rem !important;
|
||||
}
|
||||
.ui.modal > .content > .image > i.icon {
|
||||
font-size: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* rtl:ignore */
|
||||
.ui.modal > .content > .description {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 1rem 0 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Let Buttons Stack */
|
||||
.ui.modal > .actions {
|
||||
padding: 1rem 1rem 0rem !important;
|
||||
}
|
||||
.ui.modal .actions > .buttons,
|
||||
.ui.modal .actions > .button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Coupling
|
||||
--------------- */
|
||||
.ui.inverted.dimmer > .ui.modal {
|
||||
box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.basic.modal {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
color: #fff;
|
||||
}
|
||||
.ui.ui.modal > .basic.header,
|
||||
.ui.ui.modal > .basic.actions,
|
||||
.ui.basic.modal > .header,
|
||||
.ui.basic.modal > .content,
|
||||
.ui.basic.modal > .actions {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ui.modal > .basic.header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.ui.basic.modal > .header {
|
||||
color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ui.basic.modal > .close {
|
||||
top: 1rem;
|
||||
right: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.dimmer > .basic.modal {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.inverted.dimmer > .ui.basic.modal > .header {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
/* Resort to margin positioning if legacy */
|
||||
.ui.legacy.legacy.modal,
|
||||
.ui.legacy.legacy.page.dimmer > .ui.modal {
|
||||
left: 50% !important;
|
||||
}
|
||||
.ui.legacy.legacy.modal:not(.aligned),
|
||||
.ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
|
||||
top: 50%;
|
||||
}
|
||||
.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
|
||||
.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
|
||||
.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
|
||||
.ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
|
||||
top: auto;
|
||||
}
|
||||
.ui.legacy.overlay.fullscreen.modal {
|
||||
margin-top: -2rem !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.loading.modal {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
.ui.active.modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Aligned
|
||||
--------------- */
|
||||
.modals.dimmer .ui.top.aligned.modal {
|
||||
top: 5vh;
|
||||
}
|
||||
.modals.dimmer .ui.bottom.aligned.modal {
|
||||
bottom: 5vh;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.modals.dimmer .ui.top.aligned.modal {
|
||||
top: 1rem;
|
||||
}
|
||||
.modals.dimmer .ui.bottom.aligned.modal {
|
||||
bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Scrolling
|
||||
--------------- */
|
||||
|
||||
/* Scrolling Dimmer */
|
||||
.scrolling.dimmable.dimmed {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrolling.dimmable > .dimmer {
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
}
|
||||
.scrolling.dimmable:not(body) > .dimmer {
|
||||
position: absolute;
|
||||
}
|
||||
.scrolling.dimmable.dimmed > .dimmer {
|
||||
overflow: auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
.modals.dimmer .ui.scrolling.modal.fullscreen {
|
||||
top: 0;
|
||||
}
|
||||
.modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
|
||||
margin: 2rem auto;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/* Fix for Firefox, Edge, IE11 */
|
||||
.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
|
||||
content: "\00A0";
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
/* Undetached Scrolling */
|
||||
.scrolling.undetached.dimmable.dimmed {
|
||||
overflow: auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
.scrolling.undetached.dimmable.dimmed > .dimmer {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/* Scrolling Content */
|
||||
.ui.modal > .scrolling.content {
|
||||
max-height: calc(80vh - 10rem);
|
||||
overflow: auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
.ui.modal > .resizable.scrolling.content {
|
||||
resize: vertical;
|
||||
max-height: none;
|
||||
}
|
||||
.ui.overlay.fullscreen.modal > .content {
|
||||
min-height: calc(100vh - 9.1rem);
|
||||
}
|
||||
.ui.overlay.fullscreen.modal > .scrolling.content {
|
||||
max-height: calc(100vh - 9.1rem);
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Full Screen
|
||||
--------------- */
|
||||
.ui.fullscreen.modal {
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
.ui.overlay.fullscreen.modal {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
|
||||
.ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
.ui.modal > .close.inside,
|
||||
.ui.fullscreen.modal > .close {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.basic.fullscreen.modal > .close {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Size
|
||||
--------------- */
|
||||
.ui.modal {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.mini.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.mini.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.mini.modal {
|
||||
width: 35.2%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.mini.modal {
|
||||
width: 340px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.mini.modal {
|
||||
width: 360px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.mini.modal {
|
||||
width: 380px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.tiny.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.tiny.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.tiny.modal {
|
||||
width: 52.8%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.tiny.modal {
|
||||
width: 510px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.tiny.modal {
|
||||
width: 540px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.tiny.modal {
|
||||
width: 570px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.small.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.small.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.small.modal {
|
||||
width: 70.4%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.small.modal {
|
||||
width: 680px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.small.modal {
|
||||
width: 720px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.small.modal {
|
||||
width: 760px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.large.modal > .header:not(.ui) {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.large.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.large.modal {
|
||||
width: 88%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.large.modal {
|
||||
width: 1020px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.large.modal {
|
||||
width: 1080px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.large.modal {
|
||||
width: 1140px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.big.modal > .header:not(.ui) {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.big.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.big.modal {
|
||||
width: 88%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.big.modal {
|
||||
width: 1190px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.big.modal {
|
||||
width: 1260px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.big.modal {
|
||||
width: 1330px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.huge.modal > .header:not(.ui) {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.huge.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.huge.modal {
|
||||
width: 88%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.huge.modal {
|
||||
width: 1360px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.huge.modal {
|
||||
width: 1440px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.huge.modal {
|
||||
width: 1520px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ui.massive.modal > .header:not(.ui) {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.massive.modal {
|
||||
width: 95%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.massive.modal {
|
||||
width: 88%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.massive.modal {
|
||||
width: 1530px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.massive.modal {
|
||||
width: 1620px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.massive.modal {
|
||||
width: 1710px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************************
|
||||
Inverted
|
||||
*******************************/
|
||||
|
||||
.ui.inverted.modal {
|
||||
background: #000;
|
||||
}
|
||||
.ui.inverted.modal > .header,
|
||||
.ui.inverted.modal > .content {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.modal > .actions {
|
||||
background: #191a1b;
|
||||
border-top: 1px solid rgba(34, 36, 38, 0.85);
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.dimmer > .modal > .close {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
@media only screen and (max-width: 991.98px) {
|
||||
.ui.dimmer .inverted.modal > .close {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.ui.inverted.modal > .close.inside,
|
||||
.ui.inverted.fullscreen.modal > .close {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,290 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Nag
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Nag
|
||||
*******************************/
|
||||
|
||||
.ui.nag {
|
||||
display: none;
|
||||
opacity: 0.95;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0.75em 1em;
|
||||
background: #909090;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
transition: 0.2s background ease;
|
||||
}
|
||||
a.ui.nag {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.nag > .title {
|
||||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
color: #fff;
|
||||
}
|
||||
.ui.nag > .close.icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1em;
|
||||
font-size: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
color: #fff;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.ui.nag:not(.overlay):not(.fixed) {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Hover */
|
||||
.ui.nag:hover {
|
||||
background: #909090;
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.nag > .close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Static
|
||||
--------------- */
|
||||
.ui.overlay.nags,
|
||||
.ui.overlay.nag {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Fixed
|
||||
--------------- */
|
||||
.ui.fixed.nags,
|
||||
.ui.fixed.nag {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Bottom
|
||||
--------------- */
|
||||
.ui.bottom.nags,
|
||||
.ui.bottom.nag {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.inverted.nags .nag,
|
||||
.ui.inverted.nag {
|
||||
background-color: #f3f4f5;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.ui.inverted.nags .nag > .close,
|
||||
.ui.inverted.nag > .close {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.ui.inverted.nags .nag > .title,
|
||||
.ui.inverted.nag > .title {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Sizes
|
||||
-------------------- */
|
||||
.ui.mini.nag,
|
||||
.ui.mini.nags .nag {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.nag,
|
||||
.ui.tiny.nags .nag {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.nag,
|
||||
.ui.small.nags .nag {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.large.nag,
|
||||
.ui.large.nags .nag {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.big.nag,
|
||||
.ui.big.nags .nag {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.huge.nag,
|
||||
.ui.huge.nags .nag {
|
||||
font-size: 1.42857143rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.ui.massive.nag,
|
||||
.ui.massive.nags .nag {
|
||||
font-size: 1.71428571rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Colors
|
||||
-------------- */
|
||||
.ui.primary.nag {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.primary.nag {
|
||||
background-color: #54c8ff;
|
||||
}
|
||||
.ui.secondary.nag {
|
||||
background-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.secondary.nag {
|
||||
background-color: #545454;
|
||||
}
|
||||
.ui.red.nag {
|
||||
background-color: #db2828;
|
||||
}
|
||||
.ui.inverted.red.nag {
|
||||
background-color: #ff695e;
|
||||
}
|
||||
.ui.orange.nag {
|
||||
background-color: #f2711c;
|
||||
}
|
||||
.ui.inverted.orange.nag {
|
||||
background-color: #ff851b;
|
||||
}
|
||||
.ui.yellow.nag {
|
||||
background-color: #fbbd08;
|
||||
}
|
||||
.ui.inverted.yellow.nag {
|
||||
background-color: #ffe21f;
|
||||
}
|
||||
.ui.olive.nag {
|
||||
background-color: #b5cc18;
|
||||
}
|
||||
.ui.inverted.olive.nag {
|
||||
background-color: #d9e778;
|
||||
}
|
||||
.ui.green.nag {
|
||||
background-color: #21ba45;
|
||||
}
|
||||
.ui.inverted.green.nag {
|
||||
background-color: #2ecc40;
|
||||
}
|
||||
.ui.teal.nag {
|
||||
background-color: #00b5ad;
|
||||
}
|
||||
.ui.inverted.teal.nag {
|
||||
background-color: #6dffff;
|
||||
}
|
||||
.ui.blue.nag {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.blue.nag {
|
||||
background-color: #54c8ff;
|
||||
}
|
||||
.ui.violet.nag {
|
||||
background-color: #6435c9;
|
||||
}
|
||||
.ui.inverted.violet.nag {
|
||||
background-color: #a291fb;
|
||||
}
|
||||
.ui.purple.nag {
|
||||
background-color: #a333c8;
|
||||
}
|
||||
.ui.inverted.purple.nag {
|
||||
background-color: #dc73ff;
|
||||
}
|
||||
.ui.pink.nag {
|
||||
background-color: #e03997;
|
||||
}
|
||||
.ui.inverted.pink.nag {
|
||||
background-color: #ff8edf;
|
||||
}
|
||||
.ui.brown.nag {
|
||||
background-color: #a5673f;
|
||||
}
|
||||
.ui.inverted.brown.nag {
|
||||
background-color: #d67c1c;
|
||||
}
|
||||
.ui.grey.nag {
|
||||
background-color: #767676;
|
||||
}
|
||||
.ui.inverted.grey.nag {
|
||||
background-color: #dcddde;
|
||||
}
|
||||
.ui.black.nag {
|
||||
background-color: #1b1c1d;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.black.nag {
|
||||
background-color: #545454;
|
||||
}
|
||||
.ui.inverted.black.nag .title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.nags {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ui.ui.nags .nag {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.nags:not(.bottom) .nag:last-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.bottom.nags .nag:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.nags:not(.fixed):not(.overlay) .nag:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.nags:not(.fixed):not(.overlay) .nag:only-child {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
User Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,560 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Nag
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.nag = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
$body = $('body'),
|
||||
|
||||
time = Date.now(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = typeof query === 'string',
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
contextCheck = function (context, win) {
|
||||
var $context;
|
||||
if ([window, document].indexOf(context) >= 0) {
|
||||
$context = $(context);
|
||||
} else {
|
||||
$context = $(win.document).find(context);
|
||||
if ($context.length === 0) {
|
||||
$context = win.frameElement ? contextCheck(context, win.parent) : $body;
|
||||
}
|
||||
}
|
||||
|
||||
return $context;
|
||||
},
|
||||
returnedValue
|
||||
;
|
||||
$allModules.each(function () {
|
||||
var
|
||||
settings = $.isPlainObject(parameters)
|
||||
? $.extend(true, {}, $.fn.nag.settings, parameters)
|
||||
: $.extend({}, $.fn.nag.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
namespace = settings.namespace,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = namespace + '-module',
|
||||
|
||||
$module = $(this),
|
||||
|
||||
$context = settings.context ? contextCheck(settings.context, window) : $body,
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
storage,
|
||||
module
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function () {
|
||||
module.verbose('Initializing element');
|
||||
if (typeof settings.value !== 'string') {
|
||||
settings.value = JSON.stringify(settings.value);
|
||||
}
|
||||
storage = module.get.storage();
|
||||
$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(function () { 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')) {
|
||||
if (settings.onShow.call(element) === false) {
|
||||
module.debug('onShow callback returned false, cancelling nag animation');
|
||||
|
||||
return false;
|
||||
}
|
||||
module.debug('Showing nag', settings.animation.show);
|
||||
if (settings.animation.show === 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing, settings.onVisible)
|
||||
;
|
||||
} else {
|
||||
$module
|
||||
.slideDown(settings.duration, settings.easing, settings.onVisible)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
if (settings.onHide.call(element) === false) {
|
||||
module.debug('onHide callback returned false, cancelling nag animation');
|
||||
|
||||
return false;
|
||||
}
|
||||
module.debug('Hiding nag', settings.animation.hide);
|
||||
if (settings.animation.hide === 'fade') {
|
||||
$module
|
||||
.fadeOut(settings.duration, settings.easing, settings.onHidden)
|
||||
;
|
||||
} else {
|
||||
$module
|
||||
.slideUp(settings.duration, settings.easing, settings.onHidden)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
dismiss: function (event) {
|
||||
if (module.hide() !== false && settings.storageMethod) {
|
||||
module.debug('Dismissing nag', settings.storageMethod, settings.key, settings.value, settings.expires);
|
||||
module.storage.set(settings.key, settings.value);
|
||||
}
|
||||
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: {
|
||||
expirationDate: function (expires) {
|
||||
if (typeof expires === 'number') {
|
||||
expires = new Date(Date.now() + expires * 864e5);
|
||||
}
|
||||
if (expires instanceof Date && expires.getTime()) {
|
||||
return expires.toUTCString();
|
||||
}
|
||||
|
||||
module.error(error.expiresFormat);
|
||||
},
|
||||
storage: function () {
|
||||
if (settings.storageMethod === 'localstorage' && window.localStorage !== undefined) {
|
||||
module.debug('Using local storage');
|
||||
|
||||
return window.localStorage;
|
||||
}
|
||||
if (settings.storageMethod === 'sessionstorage' && window.sessionStorage !== undefined) {
|
||||
module.debug('Using session storage');
|
||||
|
||||
return window.sessionStorage;
|
||||
}
|
||||
if ('cookie' in document) {
|
||||
module.debug('Using cookie');
|
||||
|
||||
return {
|
||||
setItem: function (key, value, options) {
|
||||
// RFC6265 compliant encoding
|
||||
key = encodeURIComponent(key)
|
||||
.replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
|
||||
.replace(/[()]/g, escape)
|
||||
;
|
||||
value = encodeURIComponent(value)
|
||||
.replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[B-D])/g, decodeURIComponent)
|
||||
;
|
||||
|
||||
var cookieOptions = '';
|
||||
for (var option in options) {
|
||||
if (Object.prototype.hasOwnProperty.call(options, option)) {
|
||||
cookieOptions += '; ' + option;
|
||||
if (typeof options[option] === 'string') {
|
||||
cookieOptions += '=' + options[option].split(';')[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
document.cookie = key + '=' + value + cookieOptions;
|
||||
},
|
||||
getItem: function (key) {
|
||||
var cookies = document.cookie.split('; ');
|
||||
for (var i = 0, il = cookies.length; i < il; i++) {
|
||||
var
|
||||
parts = cookies[i].split('='),
|
||||
foundKey = parts[0].replace(/(%[\da-f]{2})+/gi, decodeURIComponent)
|
||||
;
|
||||
if (key === foundKey) {
|
||||
return parts[1] || '';
|
||||
}
|
||||
}
|
||||
},
|
||||
removeItem: function (key, options) {
|
||||
storage.setItem(key, '', options);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.error(error.noStorage);
|
||||
},
|
||||
storageOptions: function () {
|
||||
var
|
||||
options = {}
|
||||
;
|
||||
if (settings.expires) {
|
||||
options.expires = module.get.expirationDate(settings.expires);
|
||||
}
|
||||
if (settings.domain) {
|
||||
options.domain = settings.domain;
|
||||
}
|
||||
if (settings.path) {
|
||||
options.path = settings.path;
|
||||
}
|
||||
if (settings.secure) {
|
||||
options.secure = settings.secure;
|
||||
}
|
||||
if (settings.samesite) {
|
||||
options.samesite = settings.samesite;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
module.storage.remove(settings.key);
|
||||
},
|
||||
|
||||
storage: {
|
||||
set: function (key, value) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if (storage === window.localStorage && options.expires) {
|
||||
module.debug('Storing expiration value in localStorage', key, options.expires);
|
||||
storage.setItem(key + settings.expirationKey, options.expires);
|
||||
}
|
||||
module.debug('Value stored', key, value);
|
||||
try {
|
||||
storage.setItem(key, value, options);
|
||||
} catch (e) {
|
||||
module.error(error.setItem, e);
|
||||
}
|
||||
},
|
||||
get: function (key) {
|
||||
var
|
||||
storedValue
|
||||
;
|
||||
storedValue = storage.getItem(key);
|
||||
if (storage === window.localStorage) {
|
||||
var expiration = storage.getItem(key + settings.expirationKey);
|
||||
if (expiration !== null && expiration !== undefined && new Date(expiration) < new Date()) {
|
||||
module.debug('Value in localStorage has expired. Deleting key', key);
|
||||
module.storage.remove(key);
|
||||
storedValue = null;
|
||||
}
|
||||
}
|
||||
if (storedValue === 'undefined' || storedValue === 'null' || storedValue === undefined || storedValue === null) {
|
||||
storedValue = undefined;
|
||||
}
|
||||
|
||||
return storedValue;
|
||||
},
|
||||
remove: function (key) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
options.expires = module.get.expirationDate(-1);
|
||||
if (storage === window.localStorage) {
|
||||
storage.removeItem(key + settings.expirationKey);
|
||||
}
|
||||
storage.removeItem(key, options);
|
||||
},
|
||||
},
|
||||
|
||||
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 = Date.now();
|
||||
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(function () { 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 (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
|
||||
if (methodInvoked) {
|
||||
if (instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
} else {
|
||||
if (instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
|
||||
return returnedValue !== undefined
|
||||
? returnedValue
|
||||
: this;
|
||||
};
|
||||
|
||||
$.fn.nag.settings = {
|
||||
|
||||
name: 'Nag',
|
||||
|
||||
silent: false,
|
||||
debug: false,
|
||||
verbose: false,
|
||||
performance: true,
|
||||
|
||||
namespace: 'Nag',
|
||||
|
||||
// allows cookie to be overridden
|
||||
persist: false,
|
||||
|
||||
// set to zero to require manually dismissal, otherwise hides on its own
|
||||
displayTime: 0,
|
||||
|
||||
animation: {
|
||||
show: 'slide',
|
||||
hide: 'slide',
|
||||
},
|
||||
|
||||
context: false,
|
||||
detachable: false,
|
||||
|
||||
expires: 30,
|
||||
|
||||
// cookie storage only options
|
||||
domain: false,
|
||||
path: '/',
|
||||
secure: false,
|
||||
samesite: false,
|
||||
|
||||
// type of storage to use
|
||||
storageMethod: 'cookie',
|
||||
|
||||
// value to store in dismissed localstorage/cookie
|
||||
key: 'nag',
|
||||
value: 'dismiss',
|
||||
|
||||
// Key suffix to support expiration in localstorage
|
||||
expirationKey: 'ExpirationDate',
|
||||
|
||||
error: {
|
||||
noStorage: 'Unsupported storage method',
|
||||
method: 'The method you called is not defined.',
|
||||
setItem: 'Unexpected error while setting value',
|
||||
expiresFormat: '"expires" must be a number of days or a Date Object',
|
||||
},
|
||||
|
||||
className: {
|
||||
bottom: 'bottom',
|
||||
fixed: 'fixed',
|
||||
},
|
||||
|
||||
selector: {
|
||||
close: '> .close.icon',
|
||||
},
|
||||
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad',
|
||||
|
||||
// callback before show animation, return false to prevent show
|
||||
onShow: function () {},
|
||||
|
||||
// called after show animation
|
||||
onVisible: function () {},
|
||||
|
||||
// callback before hide animation, return false to prevent hide
|
||||
onHide: function () {},
|
||||
|
||||
// callback after hide animation
|
||||
onHidden: function () {},
|
||||
|
||||
};
|
||||
|
||||
// Adds easing
|
||||
$.extend($.easing, {
|
||||
easeOutQuad: function (x) {
|
||||
return 1 - (1 - x) * (1 - x);
|
||||
},
|
||||
});
|
||||
})(jQuery, window, document);
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Nag
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.nag{display:none;opacity:.95;position:relative;top:0;left:0;z-index:999;min-height:0;width:100%;margin:0;padding:.75em 1em;background:#909090;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1rem;text-align:center;color:rgba(0,0,0,.87);border-radius:0 0 .28571429rem .28571429rem;transition:.2s background ease}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#fff}.ui.nag>.close.icon{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;font-size:1em;margin:-.5em 0 0;color:#fff;transition:opacity .2s ease}.ui.nag:not(.overlay):not(.fixed){border-radius:.28571429rem}.ui.nag:hover{background:#909090;opacity:1}.ui.nag>.close:hover{opacity:1}.ui.overlay.nag,.ui.overlay.nags{position:absolute}.ui.fixed.nag,.ui.fixed.nags{position:fixed}.ui.bottom.nag,.ui.bottom.nags{border-radius:.28571429rem .28571429rem 0 0;top:auto;bottom:0}.ui.inverted.nag,.ui.inverted.nags .nag{background-color:#f3f4f5;color:rgba(0,0,0,.85)}.ui.inverted.nag>.close,.ui.inverted.nags .nag>.close{color:rgba(0,0,0,.6)}.ui.inverted.nag>.title,.ui.inverted.nags .nag>.title{color:rgba(0,0,0,.6)}.ui.mini.nag,.ui.mini.nags .nag{font-size:.78571429rem}.ui.tiny.nag,.ui.tiny.nags .nag{font-size:.85714286rem}.ui.small.nag,.ui.small.nags .nag{font-size:.92857143rem}.ui.large.nag,.ui.large.nags .nag{font-size:1.14285714rem}.ui.big.nag,.ui.big.nags .nag{font-size:1.28571429rem}.ui.huge.nag,.ui.huge.nags .nag{font-size:1.42857143rem;line-height:1}.ui.massive.nag,.ui.massive.nags .nag{font-size:1.71428571rem;line-height:1}.ui.primary.nag{background-color:#2185d0}.ui.inverted.primary.nag{background-color:#54c8ff}.ui.secondary.nag{background-color:#1b1c1d}.ui.inverted.secondary.nag{background-color:#545454}.ui.red.nag{background-color:#db2828}.ui.inverted.red.nag{background-color:#ff695e}.ui.orange.nag{background-color:#f2711c}.ui.inverted.orange.nag{background-color:#ff851b}.ui.yellow.nag{background-color:#fbbd08}.ui.inverted.yellow.nag{background-color:#ffe21f}.ui.olive.nag{background-color:#b5cc18}.ui.inverted.olive.nag{background-color:#d9e778}.ui.green.nag{background-color:#21ba45}.ui.inverted.green.nag{background-color:#2ecc40}.ui.teal.nag{background-color:#00b5ad}.ui.inverted.teal.nag{background-color:#6dffff}.ui.blue.nag{background-color:#2185d0}.ui.inverted.blue.nag{background-color:#54c8ff}.ui.violet.nag{background-color:#6435c9}.ui.inverted.violet.nag{background-color:#a291fb}.ui.purple.nag{background-color:#a333c8}.ui.inverted.purple.nag{background-color:#dc73ff}.ui.pink.nag{background-color:#e03997}.ui.inverted.pink.nag{background-color:#ff8edf}.ui.brown.nag{background-color:#a5673f}.ui.inverted.brown.nag{background-color:#d67c1c}.ui.grey.nag{background-color:#767676}.ui.inverted.grey.nag{background-color:#dcddde}.ui.black.nag{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.inverted.black.nag{background-color:#545454}.ui.inverted.black.nag .title{color:#fff}.ui.nags{top:0;left:0;width:100%}.ui.ui.nags .nag{border-radius:0}.ui.nags:not(.bottom) .nag:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.bottom.nags .nag:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.nags:not(.fixed):not(.overlay) .nag:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.nags:not(.fixed):not(.overlay) .nag:only-child{border-radius:.28571429rem}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,228 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Placeholder
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/* -------------------
|
||||
Content
|
||||
-------------------- */
|
||||
.ui.placeholder {
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
animation: placeholderShimmer 2s linear;
|
||||
animation-iteration-count: infinite;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
|
||||
background-size: 1200px 100%;
|
||||
max-width: 30rem;
|
||||
}
|
||||
@keyframes placeholderShimmer {
|
||||
0% {
|
||||
background-position: -1200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1200px 0;
|
||||
}
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.ui.placeholder,
|
||||
.ui.placeholder > ::before,
|
||||
.ui.placeholder .image.header::after,
|
||||
.ui.placeholder .line,
|
||||
.ui.placeholder .line::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ui.placeholder.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
|
||||
height: 100px;
|
||||
}
|
||||
.ui.placeholder .square.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
/* 1/1 aspect ratio */
|
||||
padding-top: 100%;
|
||||
}
|
||||
.ui.placeholder .rectangular.image:not(.header) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
/* 4/3 aspect ratio */
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
/* Lines */
|
||||
.ui.placeholder .line {
|
||||
position: relative;
|
||||
height: 0.85714286em;
|
||||
}
|
||||
.ui.placeholder .line::before,
|
||||
.ui.placeholder .line::after {
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: inherit;
|
||||
}
|
||||
.ui.placeholder .line::before {
|
||||
left: 0;
|
||||
}
|
||||
.ui.placeholder .line::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Any Lines */
|
||||
.ui.placeholder .line {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.ui.placeholder .line::before,
|
||||
.ui.placeholder .line::after {
|
||||
height: 0.5em;
|
||||
}
|
||||
.ui.placeholder .line:not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Line Outdent */
|
||||
.ui.placeholder .line:nth-child(1)::after {
|
||||
width: 0;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(2)::after {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(3)::after {
|
||||
width: 10%;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(4)::after {
|
||||
width: 35%;
|
||||
}
|
||||
.ui.placeholder .line:nth-child(5)::after {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
/* Header Image + 2 Lines */
|
||||
.ui.placeholder .header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header Line 1 & 2 */
|
||||
.ui.placeholder .header .line {
|
||||
margin-bottom: 0.64285714em;
|
||||
}
|
||||
.ui.placeholder .header .line::before,
|
||||
.ui.placeholder .header .line::after {
|
||||
height: 0.64285714em;
|
||||
}
|
||||
.ui.placeholder .header .line:not(:first-child) {
|
||||
margin-top: 0.64285714em;
|
||||
}
|
||||
.ui.placeholder .header .line::after {
|
||||
width: 20%;
|
||||
}
|
||||
.ui.placeholder .header .line:nth-child(2)::after {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Image Header */
|
||||
.ui.placeholder .image.header .line {
|
||||
margin-left: 3em;
|
||||
}
|
||||
.ui.placeholder .image.header .line::before {
|
||||
width: 0.71428571rem;
|
||||
}
|
||||
.ui.placeholder .image.header::after {
|
||||
display: block;
|
||||
height: 0.85714286em;
|
||||
content: "";
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
/* 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: 1.42857143em;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inverted Content Loader */
|
||||
.ui.inverted.placeholder {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
|
||||
}
|
||||
.ui.inverted.placeholder,
|
||||
.ui.inverted.placeholder > ::before,
|
||||
.ui.inverted.placeholder .image.header::after,
|
||||
.ui.inverted.placeholder .line,
|
||||
.ui.inverted.placeholder .line::after {
|
||||
background-color: #1b1c1d;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* -------------------
|
||||
Sizes
|
||||
-------------------- */
|
||||
.ui.placeholder .full.line.line.line::after {
|
||||
width: 0;
|
||||
}
|
||||
.ui.placeholder .very.long.line.line.line::after {
|
||||
width: 10%;
|
||||
}
|
||||
.ui.placeholder .long.line.line.line::after {
|
||||
width: 35%;
|
||||
}
|
||||
.ui.placeholder .medium.line.line.line::after {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.placeholder .short.line.line.line::after {
|
||||
width: 65%;
|
||||
}
|
||||
.ui.placeholder .very.short.line.line.line::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Fluid
|
||||
-------------------- */
|
||||
.ui.fluid.placeholder {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Placeholder
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/.ui.placeholder{position:static;overflow:hidden;animation:placeholderShimmer 2s linear;animation-iteration-count:infinite;background-color:#fff;background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header::after,.ui.placeholder .line,.ui.placeholder .line::after,.ui.placeholder>::before{background-color:#fff}.ui.placeholder.hidden{display:none}.ui.placeholder .image:not(.header):not(.ui):not(.icon){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:.85714286em}.ui.placeholder .line::after,.ui.placeholder .line::before{top:100%;position:absolute;content:"";background-color:inherit}.ui.placeholder .line::before{left:0}.ui.placeholder .line::after{right:0}.ui.placeholder .line{margin-bottom:.5em}.ui.placeholder .line::after,.ui.placeholder .line::before{height:.5em}.ui.placeholder .line:not(:first-child){margin-top:.5em}.ui.placeholder .line:nth-child(1)::after{width:0}.ui.placeholder .line:nth-child(2)::after{width:50%}.ui.placeholder .line:nth-child(3)::after{width:10%}.ui.placeholder .line:nth-child(4)::after{width:35%}.ui.placeholder .line:nth-child(5)::after{width:65%}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .header .line{margin-bottom:.64285714em}.ui.placeholder .header .line::after,.ui.placeholder .header .line::before{height:.64285714em}.ui.placeholder .header .line:not(:first-child){margin-top:.64285714em}.ui.placeholder .header .line::after{width:20%}.ui.placeholder .header .line:nth-child(2)::after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line::before{width:.71428571rem}.ui.placeholder .image.header::after{display:block;height:.85714286em;content:"";margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child)::before,.ui.placeholder .image:not(:first-child)::before,.ui.placeholder .paragraph:not(:first-child)::before{height:1.42857143em;content:"";display:block}.ui.inverted.placeholder{background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header::after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line::after,.ui.inverted.placeholder>::before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line::after{width:0}.ui.placeholder .very.long.line.line.line::after{width:10%}.ui.placeholder .long.line.line.line::after{width:35%}.ui.placeholder .medium.line.line.line::after{width:50%}.ui.placeholder .short.line.line.line::after{width:65%}.ui.placeholder .very.short.line.line.line::after{width:80%}.ui.fluid.placeholder{max-width:none}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,752 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Progress
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Progress
|
||||
*******************************/
|
||||
|
||||
.ui.progress {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
margin: 1em 0 2.5em;
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
.ui.progress:first-child {
|
||||
margin: 0 0 2.5em;
|
||||
}
|
||||
.ui.progress:last-child {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Activity Bar */
|
||||
.ui.progress .bar {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
width: 0;
|
||||
min-width: 2em;
|
||||
background: #888;
|
||||
border-radius: 0.28571429rem;
|
||||
transition: width 0.1s ease, background-color 0.1s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
|
||||
.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
|
||||
background: transparent;
|
||||
}
|
||||
.ui.progress[data-percent="0"] .bar .progress {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.inverted.progress[data-percent="0"] .bar .progress {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Percent Complete */
|
||||
.ui.progress .bar > .progress {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
font-size: 0.92857143em;
|
||||
top: 50%;
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-shadow: none;
|
||||
margin-top: -0.5em;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
.ui.right.aligned.progress {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.ui.right.aligned.progress .bar > .progress {
|
||||
left: 0.5em;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.ui.progress > .label {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
top: 100%;
|
||||
right: auto;
|
||||
left: 0;
|
||||
bottom: auto;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
margin-top: 0.2em;
|
||||
text-align: center;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Indicating */
|
||||
.ui.indicating.progress[data-percent^="1"] .bar,
|
||||
.ui.indicating.progress[data-percent^="2"] .bar {
|
||||
background-color: #d95c5c;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="3"] .bar {
|
||||
background-color: #efbc72;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="4"] .bar,
|
||||
.ui.indicating.progress[data-percent^="5"] .bar {
|
||||
background-color: #e6bb48;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="6"] .bar {
|
||||
background-color: #ddc928;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="7"] .bar,
|
||||
.ui.indicating.progress[data-percent^="8"] .bar {
|
||||
background-color: #b4d95c;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="9"] .bar,
|
||||
.ui.indicating.progress[data-percent^="100"] .bar {
|
||||
background-color: #66da81;
|
||||
}
|
||||
|
||||
/* Indicating Label */
|
||||
.ui.indicating.progress[data-percent^="1"] .label,
|
||||
.ui.indicating.progress[data-percent^="2"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="3"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="4"] .label,
|
||||
.ui.indicating.progress[data-percent^="5"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="6"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="7"] .label,
|
||||
.ui.indicating.progress[data-percent^="8"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="9"] .label,
|
||||
.ui.indicating.progress[data-percent^="100"] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
/* Inverted Indicating Label */
|
||||
.ui.inverted.indicating.progress[data-percent^="1"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="2"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent^="3"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent^="4"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="5"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent^="6"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent^="7"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="8"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent^="9"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="100"] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Single Digits */
|
||||
.ui.indicating.progress[data-percent="1"] .bar,
|
||||
.ui.indicating.progress[data-percent^="1."] .bar,
|
||||
.ui.indicating.progress[data-percent="2"] .bar,
|
||||
.ui.indicating.progress[data-percent^="2."] .bar,
|
||||
.ui.indicating.progress[data-percent="3"] .bar,
|
||||
.ui.indicating.progress[data-percent^="3."] .bar,
|
||||
.ui.indicating.progress[data-percent="4"] .bar,
|
||||
.ui.indicating.progress[data-percent^="4."] .bar,
|
||||
.ui.indicating.progress[data-percent="5"] .bar,
|
||||
.ui.indicating.progress[data-percent^="5."] .bar,
|
||||
.ui.indicating.progress[data-percent="6"] .bar,
|
||||
.ui.indicating.progress[data-percent^="6."] .bar,
|
||||
.ui.indicating.progress[data-percent="7"] .bar,
|
||||
.ui.indicating.progress[data-percent^="7."] .bar,
|
||||
.ui.indicating.progress[data-percent="8"] .bar,
|
||||
.ui.indicating.progress[data-percent^="8."] .bar,
|
||||
.ui.indicating.progress[data-percent="9"] .bar,
|
||||
.ui.indicating.progress[data-percent^="9."] .bar {
|
||||
background-color: #d95c5c;
|
||||
}
|
||||
.ui.indicating.progress[data-percent="0"] .label,
|
||||
.ui.indicating.progress[data-percent^="0."] .label,
|
||||
.ui.indicating.progress[data-percent="1"] .label,
|
||||
.ui.indicating.progress[data-percent^="1."] .label,
|
||||
.ui.indicating.progress[data-percent="2"] .label,
|
||||
.ui.indicating.progress[data-percent^="2."] .label,
|
||||
.ui.indicating.progress[data-percent="3"] .label,
|
||||
.ui.indicating.progress[data-percent^="3."] .label,
|
||||
.ui.indicating.progress[data-percent="4"] .label,
|
||||
.ui.indicating.progress[data-percent^="4."] .label,
|
||||
.ui.indicating.progress[data-percent="5"] .label,
|
||||
.ui.indicating.progress[data-percent^="5."] .label,
|
||||
.ui.indicating.progress[data-percent="6"] .label,
|
||||
.ui.indicating.progress[data-percent^="6."] .label,
|
||||
.ui.indicating.progress[data-percent="7"] .label,
|
||||
.ui.indicating.progress[data-percent^="7."] .label,
|
||||
.ui.indicating.progress[data-percent="8"] .label,
|
||||
.ui.indicating.progress[data-percent^="8."] .label,
|
||||
.ui.indicating.progress[data-percent="9"] .label,
|
||||
.ui.indicating.progress[data-percent^="9."] .label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.ui.inverted.indicating.progress[data-percent="0"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="0."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="1"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="1."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="2"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="2."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="3"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="3."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="4"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="4."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="5"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="5."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="6"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="6."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="7"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="7."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="8"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="8."] .label,
|
||||
.ui.inverted.indicating.progress[data-percent="9"] .label,
|
||||
.ui.inverted.indicating.progress[data-percent^="9."] .label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Indicating Success */
|
||||
.ui.ui.indicating.progress.success .label {
|
||||
color: #1a531b;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Success
|
||||
--------------- */
|
||||
.ui.ui.progress.success .bar {
|
||||
background-color: #21ba45;
|
||||
}
|
||||
.ui.ui.progress.success .bar,
|
||||
.ui.ui.progress.success .bar::after {
|
||||
animation: none;
|
||||
}
|
||||
.ui.progress.success > .label {
|
||||
color: #1a531b;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Warning
|
||||
--------------- */
|
||||
.ui.ui.progress.warning .bar {
|
||||
background-color: #f2c037;
|
||||
}
|
||||
.ui.ui.progress.warning .bar,
|
||||
.ui.ui.progress.warning .bar::after {
|
||||
animation: none;
|
||||
}
|
||||
.ui.progress.warning > .label {
|
||||
color: #794b02;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Error
|
||||
--------------- */
|
||||
.ui.ui.progress.error .bar {
|
||||
background-color: #db2828;
|
||||
}
|
||||
.ui.ui.progress.error .bar,
|
||||
.ui.ui.progress.error .bar::after {
|
||||
animation: none;
|
||||
}
|
||||
.ui.progress.error > .label {
|
||||
color: #912d2b;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Active
|
||||
--------------- */
|
||||
.ui.active.progress .bar {
|
||||
position: relative;
|
||||
min-width: 2em;
|
||||
}
|
||||
.ui.active.progress .bar::after {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 0.28571429rem;
|
||||
animation: progress-active 2s ease infinite;
|
||||
transform-origin: left;
|
||||
}
|
||||
.ui.active.right.aligned.progress .bar::after {
|
||||
transform-origin: right;
|
||||
}
|
||||
@keyframes progress-active {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Disabled
|
||||
--------------- */
|
||||
.ui.disabled.progress {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.ui.ui.disabled.progress .bar,
|
||||
.ui.ui.disabled.progress .bar::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/* --------------
|
||||
Inverted
|
||||
--------------- */
|
||||
.ui.inverted.progress {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: none;
|
||||
}
|
||||
.ui.inverted.progress .bar {
|
||||
background: #888;
|
||||
}
|
||||
.ui.inverted.progress .bar > .progress {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.progress > .label {
|
||||
color: #fff;
|
||||
}
|
||||
.ui.inverted.progress.success > .label {
|
||||
color: #21ba45;
|
||||
}
|
||||
.ui.inverted.progress.warning > .label {
|
||||
color: #f2c037;
|
||||
}
|
||||
.ui.inverted.progress.error > .label {
|
||||
color: #db2828;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Attached
|
||||
--------------- */
|
||||
|
||||
/* bottom attached */
|
||||
.ui.progress.attached {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
.ui.progress.attached,
|
||||
.ui.progress.attached .bar {
|
||||
height: 0.2rem;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.progress.attached .bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* top attached */
|
||||
.ui.progress.top.attached,
|
||||
.ui.progress.top.attached .bar {
|
||||
top: 0;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.progress.top.attached .bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 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
|
||||
--------------- */
|
||||
.ui.indeterminate.primary.progress .bar::before,
|
||||
.ui.primary.progress .bar,
|
||||
.ui.progress .primary.bar {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.indeterminate.primary.progress .bar::before,
|
||||
.ui.primary.inverted.progress .bar,
|
||||
.ui.inverted.progress .primary.bar {
|
||||
background-color: #54c8ff;
|
||||
}
|
||||
.ui.indeterminate.secondary.progress .bar::before,
|
||||
.ui.secondary.progress .bar,
|
||||
.ui.progress .secondary.bar {
|
||||
background-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.indeterminate.secondary.progress .bar::before,
|
||||
.ui.secondary.inverted.progress .bar,
|
||||
.ui.inverted.progress .secondary.bar {
|
||||
background-color: #545454;
|
||||
}
|
||||
.ui.indeterminate.red.progress .bar::before,
|
||||
.ui.red.progress .bar,
|
||||
.ui.progress .red.bar {
|
||||
background-color: #db2828;
|
||||
}
|
||||
.ui.inverted.indeterminate.red.progress .bar::before,
|
||||
.ui.red.inverted.progress .bar,
|
||||
.ui.inverted.progress .red.bar {
|
||||
background-color: #ff695e;
|
||||
}
|
||||
.ui.indeterminate.orange.progress .bar::before,
|
||||
.ui.orange.progress .bar,
|
||||
.ui.progress .orange.bar {
|
||||
background-color: #f2711c;
|
||||
}
|
||||
.ui.inverted.indeterminate.orange.progress .bar::before,
|
||||
.ui.orange.inverted.progress .bar,
|
||||
.ui.inverted.progress .orange.bar {
|
||||
background-color: #ff851b;
|
||||
}
|
||||
.ui.indeterminate.yellow.progress .bar::before,
|
||||
.ui.yellow.progress .bar,
|
||||
.ui.progress .yellow.bar {
|
||||
background-color: #fbbd08;
|
||||
}
|
||||
.ui.inverted.indeterminate.yellow.progress .bar::before,
|
||||
.ui.yellow.inverted.progress .bar,
|
||||
.ui.inverted.progress .yellow.bar {
|
||||
background-color: #ffe21f;
|
||||
}
|
||||
.ui.indeterminate.olive.progress .bar::before,
|
||||
.ui.olive.progress .bar,
|
||||
.ui.progress .olive.bar {
|
||||
background-color: #b5cc18;
|
||||
}
|
||||
.ui.inverted.indeterminate.olive.progress .bar::before,
|
||||
.ui.olive.inverted.progress .bar,
|
||||
.ui.inverted.progress .olive.bar {
|
||||
background-color: #d9e778;
|
||||
}
|
||||
.ui.indeterminate.green.progress .bar::before,
|
||||
.ui.green.progress .bar,
|
||||
.ui.progress .green.bar {
|
||||
background-color: #21ba45;
|
||||
}
|
||||
.ui.inverted.indeterminate.green.progress .bar::before,
|
||||
.ui.green.inverted.progress .bar,
|
||||
.ui.inverted.progress .green.bar {
|
||||
background-color: #2ecc40;
|
||||
}
|
||||
.ui.indeterminate.teal.progress .bar::before,
|
||||
.ui.teal.progress .bar,
|
||||
.ui.progress .teal.bar {
|
||||
background-color: #00b5ad;
|
||||
}
|
||||
.ui.inverted.indeterminate.teal.progress .bar::before,
|
||||
.ui.teal.inverted.progress .bar,
|
||||
.ui.inverted.progress .teal.bar {
|
||||
background-color: #6dffff;
|
||||
}
|
||||
.ui.indeterminate.blue.progress .bar::before,
|
||||
.ui.blue.progress .bar,
|
||||
.ui.progress .blue.bar {
|
||||
background-color: #2185d0;
|
||||
}
|
||||
.ui.inverted.indeterminate.blue.progress .bar::before,
|
||||
.ui.blue.inverted.progress .bar,
|
||||
.ui.inverted.progress .blue.bar {
|
||||
background-color: #54c8ff;
|
||||
}
|
||||
.ui.indeterminate.violet.progress .bar::before,
|
||||
.ui.violet.progress .bar,
|
||||
.ui.progress .violet.bar {
|
||||
background-color: #6435c9;
|
||||
}
|
||||
.ui.inverted.indeterminate.violet.progress .bar::before,
|
||||
.ui.violet.inverted.progress .bar,
|
||||
.ui.inverted.progress .violet.bar {
|
||||
background-color: #a291fb;
|
||||
}
|
||||
.ui.indeterminate.purple.progress .bar::before,
|
||||
.ui.purple.progress .bar,
|
||||
.ui.progress .purple.bar {
|
||||
background-color: #a333c8;
|
||||
}
|
||||
.ui.inverted.indeterminate.purple.progress .bar::before,
|
||||
.ui.purple.inverted.progress .bar,
|
||||
.ui.inverted.progress .purple.bar {
|
||||
background-color: #dc73ff;
|
||||
}
|
||||
.ui.indeterminate.pink.progress .bar::before,
|
||||
.ui.pink.progress .bar,
|
||||
.ui.progress .pink.bar {
|
||||
background-color: #e03997;
|
||||
}
|
||||
.ui.inverted.indeterminate.pink.progress .bar::before,
|
||||
.ui.pink.inverted.progress .bar,
|
||||
.ui.inverted.progress .pink.bar {
|
||||
background-color: #ff8edf;
|
||||
}
|
||||
.ui.indeterminate.brown.progress .bar::before,
|
||||
.ui.brown.progress .bar,
|
||||
.ui.progress .brown.bar {
|
||||
background-color: #a5673f;
|
||||
}
|
||||
.ui.inverted.indeterminate.brown.progress .bar::before,
|
||||
.ui.brown.inverted.progress .bar,
|
||||
.ui.inverted.progress .brown.bar {
|
||||
background-color: #d67c1c;
|
||||
}
|
||||
.ui.indeterminate.grey.progress .bar::before,
|
||||
.ui.grey.progress .bar,
|
||||
.ui.progress .grey.bar {
|
||||
background-color: #767676;
|
||||
}
|
||||
.ui.inverted.indeterminate.grey.progress .bar::before,
|
||||
.ui.grey.inverted.progress .bar,
|
||||
.ui.inverted.progress .grey.bar {
|
||||
background-color: #dcddde;
|
||||
}
|
||||
.ui.indeterminate.black.progress .bar::before,
|
||||
.ui.black.progress .bar,
|
||||
.ui.progress .black.bar {
|
||||
background-color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.indeterminate.black.progress .bar::before,
|
||||
.ui.black.inverted.progress .bar,
|
||||
.ui.inverted.progress .black.bar {
|
||||
background-color: #545454;
|
||||
}
|
||||
|
||||
/* --------------
|
||||
Sizes
|
||||
--------------- */
|
||||
.ui.progress {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.progress .bar {
|
||||
height: 1.75em;
|
||||
}
|
||||
.ui.mini.progress {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.mini.progress .bar {
|
||||
height: 0.3em;
|
||||
}
|
||||
.ui.tiny.progress {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.tiny.progress .bar {
|
||||
height: 0.5em;
|
||||
}
|
||||
.ui.small.progress {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.small.progress .bar {
|
||||
height: 1em;
|
||||
}
|
||||
.ui.large.progress {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
.ui.large.progress .bar {
|
||||
height: 2.5em;
|
||||
}
|
||||
.ui.big.progress {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
.ui.big.progress .bar {
|
||||
height: 3.5em;
|
||||
}
|
||||
.ui.huge.progress {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
.ui.huge.progress .bar {
|
||||
height: 4em;
|
||||
}
|
||||
.ui.massive.progress {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
.ui.massive.progress .bar {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
/* ---------------
|
||||
Indeterminate
|
||||
---------------- */
|
||||
.ui.indeterminate.progress .bar {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.indeterminate.progress .bar .progress,
|
||||
.ui.progress .bar .centered.progress {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
.ui.indeterminate.progress .bar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0.28571429rem;
|
||||
animation: progress-pulsating 2s ease infinite;
|
||||
transform-origin: center;
|
||||
width: 100%;
|
||||
}
|
||||
.ui.slow.indeterminate.progress .bar::before {
|
||||
animation-duration: 4s;
|
||||
}
|
||||
.ui.fast.indeterminate.progress .bar::before {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
.ui.swinging.indeterminate.progress .bar::before {
|
||||
transform-origin: left;
|
||||
animation-name: progress-swinging;
|
||||
}
|
||||
.ui.sliding.indeterminate.progress .bar::before {
|
||||
transform-origin: left;
|
||||
animation-name: progress-sliding;
|
||||
}
|
||||
.ui.filling.indeterminate.progress .bar::before {
|
||||
animation-name: progress-filling;
|
||||
}
|
||||
.ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
|
||||
background: #fff;
|
||||
}
|
||||
.ui.sliding.indeterminate.progress .bar,
|
||||
.ui.swinging.indeterminate.progress .bar,
|
||||
.ui.filling.indeterminate.progress .bar {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.ui.sliding.indeterminate.progress .bar .progress,
|
||||
.ui.swinging.indeterminate.progress .bar .progress {
|
||||
color: #1b1c1d;
|
||||
}
|
||||
.ui.inverted.sliding.indeterminate.progress .bar,
|
||||
.ui.inverted.swinging.indeterminate.progress .bar,
|
||||
.ui.inverted.filling.indeterminate.progress .bar {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.ui.inverted.sliding.indeterminate.progress .bar .progress,
|
||||
.ui.inverted.swinging.indeterminate.progress .bar .progress {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
@keyframes progress-swinging {
|
||||
0%,
|
||||
100% {
|
||||
width: 10%;
|
||||
left: -25%;
|
||||
}
|
||||
25%,
|
||||
65% {
|
||||
width: 70%;
|
||||
}
|
||||
50% {
|
||||
width: 10%;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes progress-sliding {
|
||||
0% {
|
||||
width: 10%;
|
||||
left: -25%;
|
||||
}
|
||||
50% {
|
||||
width: 70%;
|
||||
}
|
||||
100% {
|
||||
width: 10%;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes progress-filling {
|
||||
0% {
|
||||
transform: scale(0, 1);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes progress-pulsating {
|
||||
0% {
|
||||
transform: scale(0, 1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Progress
|
||||
*******************************/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
||||
@ -0,0 +1,977 @@
|
||||
/*!
|
||||
* # Fomantic-UI 2.9.3 - Progress
|
||||
* https://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
function isFunction(obj) {
|
||||
return typeof obj === 'function' && typeof obj.nodeType !== 'number';
|
||||
}
|
||||
|
||||
window = window !== undefined && window.Math === Math
|
||||
? window
|
||||
: globalThis;
|
||||
|
||||
$.fn.progress = function (parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = Date.now(),
|
||||
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),
|
||||
$bars = $(this).find(selector.bar),
|
||||
$progresses = $(this).find(selector.progress),
|
||||
$label = $(this).find(selector.label),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
animating = false,
|
||||
module
|
||||
;
|
||||
module = {
|
||||
helper: {
|
||||
sum: function (nums) {
|
||||
return Array.isArray(nums) ? nums.reduce(function (left, right) {
|
||||
return left + Number(right);
|
||||
}, 0) : 0;
|
||||
},
|
||||
/**
|
||||
* Derive precision for multiple progress with total and values.
|
||||
*
|
||||
* This helper dervices a precision that is sufficiently large to show minimum value of multiple progress.
|
||||
*
|
||||
* Example1
|
||||
* - total: 1122
|
||||
* - values: [325, 111, 74, 612]
|
||||
* - min ratio: 74/1122 = 0.0659...
|
||||
* - required precision: 100
|
||||
*
|
||||
* Example2
|
||||
* - total: 10541
|
||||
* - values: [3235, 1111, 74, 6121]
|
||||
* - min ratio: 74/10541 = 0.0070...
|
||||
* - required precision: 1000
|
||||
*
|
||||
* @param min A minimum value within multiple values
|
||||
* @param total A total amount of multiple values
|
||||
* @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
|
||||
*/
|
||||
derivePrecision: function (min, total) {
|
||||
var precisionPower = 0;
|
||||
var precision = 1;
|
||||
var ratio = min / total;
|
||||
while (precisionPower < 10) {
|
||||
ratio *= precision;
|
||||
if (ratio > 1) {
|
||||
break;
|
||||
}
|
||||
precision = Math.pow(10, precisionPower++);
|
||||
}
|
||||
|
||||
return precision;
|
||||
},
|
||||
forceArray: function (element) {
|
||||
return Array.isArray(element)
|
||||
? element
|
||||
: (!isNaN(element)
|
||||
? [element]
|
||||
: (typeof element === 'string' ? element.split(',') : [])); // eslint-disable-line unicorn/no-nested-ternary
|
||||
},
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
module.set.duration();
|
||||
module.debug(element);
|
||||
|
||||
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 (keepState) {
|
||||
if (module.percent === undefined || module.percent < 100) {
|
||||
module.remove.progressPoll();
|
||||
if (keepState !== true) {
|
||||
module.set.percent(100);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
read: {
|
||||
metadata: function () {
|
||||
var
|
||||
data = {
|
||||
percent: module.helper.forceArray($module.data(metadata.percent)),
|
||||
total: $module.data(metadata.total),
|
||||
value: module.helper.forceArray($module.data(metadata.value)),
|
||||
}
|
||||
;
|
||||
if (data.total !== undefined) {
|
||||
module.debug('Total value set from metadata', data.total);
|
||||
module.set.total(data.total);
|
||||
}
|
||||
if (data.value.length > 0) {
|
||||
module.debug('Current value set from metadata', data.value);
|
||||
module.set.value(data.value);
|
||||
module.set.progress(data.value);
|
||||
}
|
||||
if (data.percent.length > 0) {
|
||||
module.debug('Current percent value set from metadata', data.percent);
|
||||
module.set.percent(data.percent);
|
||||
}
|
||||
},
|
||||
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) {
|
||||
$bars
|
||||
.one('transitionend' + eventNamespace, function (event) {
|
||||
clearTimeout(module.failSafeTimer);
|
||||
callback.call(this, event);
|
||||
})
|
||||
;
|
||||
module.failSafeTimer = setTimeout(function () {
|
||||
$bars.triggerHandler('transitionend');
|
||||
}, settings.duration + settings.failSafeDelay);
|
||||
module.verbose('Adding fail safe timer', module.timer);
|
||||
},
|
||||
},
|
||||
|
||||
increment: function (incrementValue) {
|
||||
var
|
||||
startValue,
|
||||
newValue
|
||||
;
|
||||
if (module.has.total()) {
|
||||
startValue = module.get.value();
|
||||
incrementValue = incrementValue || 1;
|
||||
} else {
|
||||
startValue = module.get.percent();
|
||||
incrementValue = incrementValue || module.get.randomValue();
|
||||
}
|
||||
newValue = startValue + incrementValue;
|
||||
module.debug('Incrementing percentage by', startValue, newValue, incrementValue);
|
||||
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, index) {
|
||||
if (!index) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
var
|
||||
value = module.get.value(index),
|
||||
total = module.get.total(),
|
||||
percent = animating
|
||||
? module.get.displayPercent(index)
|
||||
: module.get.percent(index),
|
||||
left = total !== false
|
||||
? Math.max(0, total - value)
|
||||
: 100 - percent
|
||||
;
|
||||
templateText = templateText || '';
|
||||
templateText = templateText
|
||||
.replace('{value}', value)
|
||||
.replace('{total}', total || 0)
|
||||
.replace('{left}', left)
|
||||
.replace('{percent}', percent)
|
||||
.replace('{bar}', settings.text.bars[index] || '')
|
||||
;
|
||||
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;
|
||||
},
|
||||
|
||||
// gets current displayed percentage (if animating values this is the intermediary value)
|
||||
displayPercent: function (index) {
|
||||
var
|
||||
$bar = $($bars[index]),
|
||||
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 (index) {
|
||||
return (module.percent && module.percent[index || 0]) || 0;
|
||||
},
|
||||
value: function (index) {
|
||||
return module.nextValue || (module.value && module.value[index || 0]) || 0;
|
||||
},
|
||||
total: function () {
|
||||
return module.total !== undefined ? 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 (values) {
|
||||
module.debug('set bar width with ', values);
|
||||
values = module.helper.forceArray(values);
|
||||
var firstNonZeroIndex = -1;
|
||||
var lastNonZeroIndex = -1;
|
||||
var valuesSum = module.helper.sum(values);
|
||||
var barCounts = $bars.length;
|
||||
var isMultiple = barCounts > 1;
|
||||
var percents = values.map(function (value, index) {
|
||||
var allZero = index === barCounts - 1 && valuesSum === 0;
|
||||
var $bar = $($bars[index]);
|
||||
if (value === 0 && isMultiple && !allZero) {
|
||||
$bar.css('display', 'none');
|
||||
} else {
|
||||
if (isMultiple && allZero) {
|
||||
$bar.css('background', 'transparent');
|
||||
}
|
||||
if (firstNonZeroIndex === -1) {
|
||||
firstNonZeroIndex = index;
|
||||
}
|
||||
lastNonZeroIndex = index;
|
||||
$bar.css({
|
||||
display: 'block',
|
||||
width: value + '%',
|
||||
});
|
||||
}
|
||||
|
||||
return parseFloat(value);
|
||||
});
|
||||
values.forEach(function (_, index) {
|
||||
var $bar = $($bars[index]);
|
||||
$bar.css({
|
||||
borderTopLeftRadius: index === firstNonZeroIndex ? '' : '0',
|
||||
borderBottomLeftRadius: index === firstNonZeroIndex ? '' : '0',
|
||||
borderTopRightRadius: index === lastNonZeroIndex ? '' : '0',
|
||||
borderBottomRightRadius: index === lastNonZeroIndex ? '' : '0',
|
||||
});
|
||||
});
|
||||
$module
|
||||
.attr('data-percent', percents)
|
||||
;
|
||||
},
|
||||
duration: function (duration) {
|
||||
duration = duration || settings.duration;
|
||||
duration = typeof duration === 'number'
|
||||
? duration + 'ms'
|
||||
: duration;
|
||||
module.verbose('Setting progress bar transition duration', duration);
|
||||
$bars
|
||||
.css({
|
||||
'transition-duration': duration,
|
||||
})
|
||||
;
|
||||
},
|
||||
percent: function (percents) {
|
||||
percents = module.helper.forceArray(percents).map(function (percent) {
|
||||
percent = typeof percent === 'string'
|
||||
? +percent.replace('%', '')
|
||||
: percent;
|
||||
|
||||
return settings.limitValues
|
||||
? Math.max(0, Math.min(100, percent))
|
||||
: percent;
|
||||
});
|
||||
var hasTotal = module.has.total();
|
||||
var totalPercent = module.helper.sum(percents);
|
||||
var isMultipleValues = percents.length > 1 && hasTotal;
|
||||
var sumTotal = module.helper.sum(module.helper.forceArray(module.value));
|
||||
if (isMultipleValues && sumTotal > module.total) {
|
||||
// Sum values instead of pecents to avoid precision issues when summing floats
|
||||
module.error(error.sumExceedsTotal, sumTotal, module.total);
|
||||
} else if (!isMultipleValues && totalPercent > 100) {
|
||||
// Sum before rounding since sum of rounded may have error though sum of actual is fine
|
||||
module.error(error.tooHigh, totalPercent);
|
||||
} else if (totalPercent < 0) {
|
||||
module.error(error.tooLow, totalPercent);
|
||||
} else {
|
||||
var autoPrecision = settings.precision > 0
|
||||
? settings.precision
|
||||
: (isMultipleValues
|
||||
? module.helper.derivePrecision(Math.min.apply(null, module.value), module.total)
|
||||
: 0);
|
||||
|
||||
// round display percentage
|
||||
var roundedPercents = percents.map(function (percent) {
|
||||
return autoPrecision > 0
|
||||
? Math.round(percent * (10 * autoPrecision)) / (10 * autoPrecision)
|
||||
: Math.round(percent)
|
||||
;
|
||||
});
|
||||
module.percent = roundedPercents;
|
||||
if (hasTotal) {
|
||||
module.value = percents.map(function (percent) {
|
||||
return autoPrecision > 0
|
||||
? Math.round((percent / 100) * module.total * (10 * autoPrecision)) / (10 * autoPrecision)
|
||||
: Math.round((percent / 100) * module.total * 10) / 10;
|
||||
});
|
||||
}
|
||||
module.set.barWidth(percents);
|
||||
module.set.labelInterval();
|
||||
}
|
||||
settings.onChange.call(element, percents, 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) {
|
||||
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.helper.sum(module.percent);
|
||||
if (percent === 100) {
|
||||
if (settings.autoSuccess && $bars.length === 1 && !(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.remove.warning();
|
||||
module.remove.error();
|
||||
module.remove.success();
|
||||
module.set.label(settings.text.active);
|
||||
}
|
||||
},
|
||||
barLabel: function (text) {
|
||||
$progresses.each(function (index, element) {
|
||||
var $progress = $(element);
|
||||
if (text !== undefined) {
|
||||
$progress.text(module.get.text(text, index));
|
||||
} else if (settings.label === 'ratio' && module.has.total()) {
|
||||
module.verbose('Adding ratio to bar label');
|
||||
$progress.text(module.get.text(settings.text.ratio, index));
|
||||
} else if (settings.label === 'percent') {
|
||||
module.verbose('Adding percentage to bar label');
|
||||
$progress.text(module.get.text(settings.text.percent, index));
|
||||
}
|
||||
});
|
||||
},
|
||||
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, keepState) {
|
||||
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(keepState);
|
||||
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, keepState) {
|
||||
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(keepState);
|
||||
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, keepState) {
|
||||
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(keepState);
|
||||
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);
|
||||
});
|
||||
},
|
||||
total: function (totalValue) {
|
||||
module.total = totalValue;
|
||||
},
|
||||
value: function (value) {
|
||||
module.value = module.helper.forceArray(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 (values) {
|
||||
var hasTotal = module.has.total();
|
||||
if (hasTotal) {
|
||||
module.set.value(values);
|
||||
}
|
||||
var percentCompletes = module.helper.forceArray(values).map(function (value) {
|
||||
var
|
||||
percentComplete
|
||||
;
|
||||
value = module.get.numericValue(value);
|
||||
if (value === false) {
|
||||
module.error(error.nonNumeric, value);
|
||||
}
|
||||
value = module.get.normalizedValue(value);
|
||||
if (hasTotal) {
|
||||
percentComplete = module.total > 0 ? (value / module.total) * 100 : 100;
|
||||
module.debug('Calculating percent complete from total', percentComplete);
|
||||
} else {
|
||||
percentComplete = value;
|
||||
module.debug('Setting value to exact percentage value', percentComplete);
|
||||
}
|
||||
|
||||
return percentComplete;
|
||||
});
|
||||
module.set.percent(percentCompletes);
|
||||
},
|
||||
},
|
||||
|
||||
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 = Date.now();
|
||||
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(function () { 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 (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 = context || element;
|
||||
if (typeof query === 'string' && object !== undefined) {
|
||||
query = query.split(/[ .]/);
|
||||
maxDepth = query.length - 1;
|
||||
$.each(query, function (depth, value) {
|
||||
var camelCaseValue = depth !== maxDepth
|
||||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
|
||||
: query
|
||||
;
|
||||
if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
|
||||
object = object[camelCaseValue];
|
||||
} else if (object[camelCaseValue] !== undefined) {
|
||||
found = object[camelCaseValue];
|
||||
|
||||
return false;
|
||||
} else if ($.isPlainObject(object[value]) && (depth !== maxDepth)) {
|
||||
object = object[value];
|
||||
} else if (object[value] !== undefined) {
|
||||
found = object[value];
|
||||
|
||||
return false;
|
||||
} else {
|
||||
module.error(error.method, query);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isFunction(found)) {
|
||||
response = found.apply(context, passedArguments);
|
||||
} else if (found !== undefined) {
|
||||
response = found;
|
||||
}
|
||||
if (Array.isArray(returnedValue)) {
|
||||
returnedValue.push(response);
|
||||
} else if (returnedValue !== undefined) {
|
||||
returnedValue = [returnedValue, response];
|
||||
} else if (response !== undefined) {
|
||||
returnedValue = response;
|
||||
}
|
||||
|
||||
return found;
|
||||
},
|
||||
};
|
||||
|
||||
if (methodInvoked) {
|
||||
if (instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
} else {
|
||||
if (instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
|
||||
return returnedValue !== undefined
|
||||
? returnedValue
|
||||
: this;
|
||||
};
|
||||
|
||||
$.fn.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%',
|
||||
sumExceedsTotal: 'Sum of multiple values exceed total',
|
||||
},
|
||||
|
||||
regExp: {
|
||||
variable: /{\$*[\da-z]+}/gi,
|
||||
},
|
||||
|
||||
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}',
|
||||
bars: [''],
|
||||
},
|
||||
|
||||
className: {
|
||||
active: 'active',
|
||||
error: 'error',
|
||||
success: 'success',
|
||||
warning: 'warning',
|
||||
},
|
||||
|
||||
};
|
||||
})(jQuery, window, document);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue