1412 changed files with 436635 additions and 219 deletions
@ -0,0 +1,5 @@ |
|||
last 2 versions |
|||
> 1% |
|||
opera 12.1 |
|||
bb 10 |
|||
android 4 |
|||
@ -0,0 +1,322 @@ |
|||
{ |
|||
"remove-empty-rulesets": true, |
|||
"always-semicolon": true, |
|||
"color-case": "upper", |
|||
"block-indent": " ", |
|||
"color-shorthand": false, |
|||
"element-case": "lower", |
|||
"leading-zero": true, |
|||
"space-after-colon": " ", |
|||
"space-before-combinator": " ", |
|||
"space-after-combinator": " ", |
|||
"space-between-declarations": "\n", |
|||
"space-before-opening-brace": " ", |
|||
"space-after-opening-brace": "\n", |
|||
"space-after-selector-delimiter": "\n", |
|||
"space-before-selector-delimiter": "", |
|||
"space-before-closing-brace": "\n", |
|||
"strip-spaces": true, |
|||
"tab-size": true, |
|||
"vendor-prefix-align": true, |
|||
"sort-order": [ |
|||
[ |
|||
"display", |
|||
"visibility", |
|||
"float", |
|||
"clear", |
|||
"overflow", |
|||
"overflow-x", |
|||
"overflow-y", |
|||
"-webkit-box-sizing", |
|||
"-moz-box-sizing", |
|||
"box-sizing", |
|||
"-ms-overflow-x", |
|||
"-ms-overflow-y", |
|||
"clip", |
|||
"zoom", |
|||
"flex-direction", |
|||
"flex-order", |
|||
"flex-pack", |
|||
"flex-align" |
|||
], |
|||
[ |
|||
"position", |
|||
"z-index", |
|||
"top", |
|||
"right", |
|||
"bottom", |
|||
"left" |
|||
], |
|||
[ |
|||
"font", |
|||
"font-family", |
|||
"font-size", |
|||
"font-weight", |
|||
"font-style", |
|||
"font-variant", |
|||
"font-size-adjust", |
|||
"font-stretch", |
|||
"font-effect", |
|||
"font-emphasize", |
|||
"font-emphasize-position", |
|||
"font-emphasize-style", |
|||
"font-smooth", |
|||
"line-height" |
|||
], |
|||
[ |
|||
"width", |
|||
"min-width", |
|||
"max-width", |
|||
"height", |
|||
"min-height", |
|||
"max-height", |
|||
"margin", |
|||
"margin-top", |
|||
"margin-right", |
|||
"margin-bottom", |
|||
"margin-left", |
|||
"padding", |
|||
"padding-top", |
|||
"padding-right", |
|||
"padding-bottom", |
|||
"padding-left" |
|||
], |
|||
[ |
|||
"table-layout", |
|||
"empty-cells", |
|||
"caption-side", |
|||
"border-spacing", |
|||
"border-collapse", |
|||
"list-style", |
|||
"list-style-position", |
|||
"list-style-type", |
|||
"list-style-image" |
|||
], |
|||
[ |
|||
"opacity", |
|||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", |
|||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", |
|||
"-ms-interpolation-mode", |
|||
"color", |
|||
"border", |
|||
"border-width", |
|||
"border-style", |
|||
"border-color", |
|||
"border-top", |
|||
"border-top-width", |
|||
"border-top-style", |
|||
"border-top-color", |
|||
"border-right", |
|||
"border-right-width", |
|||
"border-right-style", |
|||
"border-right-color", |
|||
"border-bottom", |
|||
"border-bottom-width", |
|||
"border-bottom-style", |
|||
"border-bottom-color", |
|||
"border-left", |
|||
"border-left-width", |
|||
"border-left-style", |
|||
"border-left-color", |
|||
"-webkit-border-radius", |
|||
"-moz-border-radius", |
|||
"border-radius", |
|||
"-webkit-border-top-left-radius", |
|||
"-moz-border-radius-topleft", |
|||
"border-top-left-radius", |
|||
"-webkit-border-top-right-radius", |
|||
"-moz-border-radius-topright", |
|||
"border-top-right-radius", |
|||
"-webkit-border-bottom-right-radius", |
|||
"-moz-border-radius-bottomright", |
|||
"border-bottom-right-radius", |
|||
"-webkit-border-bottom-left-radius", |
|||
"-moz-border-radius-bottomleft", |
|||
"border-bottom-left-radius", |
|||
"-webkit-border-image", |
|||
"-moz-border-image", |
|||
"-o-border-image", |
|||
"border-image", |
|||
"-webkit-border-image-source", |
|||
"-moz-border-image-source", |
|||
"-o-border-image-source", |
|||
"border-image-source", |
|||
"-webkit-border-image-slice", |
|||
"-moz-border-image-slice", |
|||
"-o-border-image-slice", |
|||
"border-image-slice", |
|||
"-webkit-border-image-width", |
|||
"-moz-border-image-width", |
|||
"-o-border-image-width", |
|||
"border-image-width", |
|||
"-webkit-border-image-outset", |
|||
"-moz-border-image-outset", |
|||
"-o-border-image-outset", |
|||
"border-image-outset", |
|||
"-webkit-border-image-repeat", |
|||
"-moz-border-image-repeat", |
|||
"-o-border-image-repeat", |
|||
"border-image-repeat", |
|||
"outline", |
|||
"outline-width", |
|||
"outline-style", |
|||
"outline-color", |
|||
"outline-offset", |
|||
"background", |
|||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", |
|||
"background-color", |
|||
"background-image", |
|||
"background-repeat", |
|||
"background-attachment", |
|||
"background-position", |
|||
"background-position-x", |
|||
"-ms-background-position-x", |
|||
"background-position-y", |
|||
"-ms-background-position-y", |
|||
"-webkit-background-clip", |
|||
"-moz-background-clip", |
|||
"background-clip", |
|||
"background-origin", |
|||
"-webkit-background-size", |
|||
"-moz-background-size", |
|||
"-o-background-size", |
|||
"background-size", |
|||
"box-decoration-break", |
|||
"-webkit-box-shadow", |
|||
"-moz-box-shadow", |
|||
"box-shadow", |
|||
"filter:progid:DXImageTransform.Microsoft.gradient", |
|||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", |
|||
"text-shadow" |
|||
], |
|||
|
|||
[ |
|||
"content", |
|||
"quotes", |
|||
"counter-reset", |
|||
"counter-increment", |
|||
"resize", |
|||
"cursor", |
|||
"-webkit-user-select", |
|||
"-moz-user-select", |
|||
"-ms-user-select", |
|||
"user-select", |
|||
"nav-index", |
|||
"nav-up", |
|||
"nav-right", |
|||
"nav-down", |
|||
"nav-left", |
|||
"-webkit-transition", |
|||
"-moz-transition", |
|||
"-ms-transition", |
|||
"-o-transition", |
|||
"transition", |
|||
"-webkit-transition-delay", |
|||
"-moz-transition-delay", |
|||
"-ms-transition-delay", |
|||
"-o-transition-delay", |
|||
"transition-delay", |
|||
"-webkit-transition-timing-function", |
|||
"-moz-transition-timing-function", |
|||
"-ms-transition-timing-function", |
|||
"-o-transition-timing-function", |
|||
"transition-timing-function", |
|||
"-webkit-transition-duration", |
|||
"-moz-transition-duration", |
|||
"-ms-transition-duration", |
|||
"-o-transition-duration", |
|||
"transition-duration", |
|||
"-webkit-transition-property", |
|||
"-moz-transition-property", |
|||
"-ms-transition-property", |
|||
"-o-transition-property", |
|||
"transition-property", |
|||
"-webkit-transform", |
|||
"-moz-transform", |
|||
"-ms-transform", |
|||
"-o-transform", |
|||
"transform", |
|||
"-webkit-transform-origin", |
|||
"-moz-transform-origin", |
|||
"-ms-transform-origin", |
|||
"-o-transform-origin", |
|||
"transform-origin", |
|||
"-webkit-animation", |
|||
"-moz-animation", |
|||
"-ms-animation", |
|||
"-o-animation", |
|||
"animation", |
|||
"-webkit-animation-name", |
|||
"-moz-animation-name", |
|||
"-ms-animation-name", |
|||
"-o-animation-name", |
|||
"animation-name", |
|||
"-webkit-animation-duration", |
|||
"-moz-animation-duration", |
|||
"-ms-animation-duration", |
|||
"-o-animation-duration", |
|||
"animation-duration", |
|||
"-webkit-animation-play-state", |
|||
"-moz-animation-play-state", |
|||
"-ms-animation-play-state", |
|||
"-o-animation-play-state", |
|||
"animation-play-state", |
|||
"-webkit-animation-timing-function", |
|||
"-moz-animation-timing-function", |
|||
"-ms-animation-timing-function", |
|||
"-o-animation-timing-function", |
|||
"animation-timing-function", |
|||
"-webkit-animation-delay", |
|||
"-moz-animation-delay", |
|||
"-ms-animation-delay", |
|||
"-o-animation-delay", |
|||
"animation-delay", |
|||
"-webkit-animation-iteration-count", |
|||
"-moz-animation-iteration-count", |
|||
"-ms-animation-iteration-count", |
|||
"-o-animation-iteration-count", |
|||
"animation-iteration-count", |
|||
"-webkit-animation-direction", |
|||
"-moz-animation-direction", |
|||
"-ms-animation-direction", |
|||
"-o-animation-direction", |
|||
"animation-direction", |
|||
"text-align", |
|||
"-webkit-text-align-last", |
|||
"-moz-text-align-last", |
|||
"-ms-text-align-last", |
|||
"text-align-last", |
|||
"vertical-align", |
|||
"white-space", |
|||
"text-decoration", |
|||
"text-emphasis", |
|||
"text-emphasis-color", |
|||
"text-emphasis-style", |
|||
"text-emphasis-position", |
|||
"text-indent", |
|||
"-ms-text-justify", |
|||
"text-justify", |
|||
"letter-spacing", |
|||
"word-spacing", |
|||
"-ms-writing-mode", |
|||
"text-outline", |
|||
"text-transform", |
|||
"text-wrap", |
|||
"text-overflow", |
|||
"-ms-text-overflow", |
|||
"text-overflow-ellipsis", |
|||
"text-overflow-mode", |
|||
"-ms-word-wrap", |
|||
"word-wrap", |
|||
"word-break", |
|||
"-ms-word-break", |
|||
"-moz-tab-size", |
|||
"-o-tab-size", |
|||
"tab-size", |
|||
"-webkit-hyphens", |
|||
"-moz-hyphens", |
|||
"hyphens", |
|||
"pointer-events" |
|||
] |
|||
] |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
{ |
|||
"vendor-prefix" : true, |
|||
"duplicate-properties" : true, |
|||
"display-property-grouping" : true, |
|||
"empty-rules" : true, |
|||
|
|||
"adjoining-classes" : false, |
|||
"box-model" : false, |
|||
"compatible-vendor-prefixes" : false, |
|||
"box-sizing" : false, |
|||
"duplicate-background-images" : false, |
|||
"floats" : false, |
|||
"important" : false, |
|||
"overqualified-elements" : false, |
|||
"rules-count" : false, |
|||
"shorthand" : false, |
|||
"zero-units" : false |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
✖ USAGE QUESTIONS → Use these dedicated resources: |
|||
Docs - http://www.semantic-ui.com |
|||
Chat - https://gitter.im/Semantic-Org/Semantic-UI |
|||
SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes |
|||
|
|||
✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible. |
|||
✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations. |
|||
|
|||
### Title (Put in field above) |
|||
Use the format: [Component] Component Should Do X |
|||
i.e. [Checkbox] onChange Should Fire When Update Triggered via DOM |
|||
|
|||
### Steps |
|||
|
|||
### Expected Result |
|||
|
|||
### Actual Result |
|||
|
|||
### Version |
|||
x.y.z |
|||
|
|||
### Testcase |
|||
[Fork, update, and replace to show the bug]: |
|||
https://jsfiddle.net/ca0rovs3/ |
|||
@ -0,0 +1,28 @@ |
|||
✖ Multiple features in one PR |
|||
✖ New Components Unless Previously Discussed with Maintainers (Consider creating separate repo, I'll link out to you) |
|||
|
|||
✔ Add comments to complex/confusing code in "code" view of PR |
|||
✔ BUGS → This form is required: |
|||
✔ Enhancements → Only specific enhancements with detailed descriptions. |
|||
|
|||
### Issue Titles |
|||
|
|||
Use the format: [Component] Adds Support for Thing |
|||
|
|||
For example: [Build Tools] Adds Source Map Support |
|||
Or: [Button] Fixes Inheritance for Red Basic Active State |
|||
|
|||
### Closed Issues |
|||
#222 #333 #444 |
|||
|
|||
### Description |
|||
|
|||
### Testcase |
|||
|
|||
[Show before with this fiddle] |
|||
https://jsfiddle.net/ca0rovs3/ |
|||
|
|||
[Consider showing "fixed" case with your fiddle]() |
|||
|
|||
You can link to your JS using https://rawgit.com/ |
|||
|
|||
@ -0,0 +1,33 @@ |
|||
# Number of days of inactivity before an issue becomes stale |
|||
daysUntilStale: 90 |
|||
|
|||
# Number of days of inactivity before a stale issue is closed |
|||
daysUntilClose: 90 |
|||
|
|||
# Issues with these labels will never be considered stale |
|||
exemptLabels: |
|||
- pinned |
|||
- security |
|||
|
|||
# Label to use when marking an issue as stale |
|||
staleLabel: stale |
|||
|
|||
# Comment to post when marking an issue as stale. Set to `false` to disable |
|||
markComment: > |
|||
There has been no activity in this thread for 90 days. While we care about |
|||
every issue and we’d love to see this fixed, the core team’s time is |
|||
limited so we have to focus our attention on the issues that are most |
|||
pressing. Therefore, we will likely not be able to get to this one. |
|||
|
|||
|
|||
However, PRs for this issue will of course be accepted and welcome! |
|||
|
|||
|
|||
If there is no more activity in the next 90 days, this issue will be closed |
|||
automatically for housekeeping. To prevent this, simply leave a reply here. |
|||
Thanks! |
|||
|
|||
# Comment to post when closing a stale issue. Set to `false` to disable |
|||
closeComment: > |
|||
This issue will be closed due to lack of activity for 6 months. If you’d |
|||
like this to be reopened, just leave a comment; we do monitor them! |
|||
@ -0,0 +1,38 @@ |
|||
node_modules/ |
|||
test/coverage/ |
|||
coverage/ |
|||
src/**/site/ |
|||
theme.config |
|||
semantic.json |
|||
tasks/**/oauth.js |
|||
package-lock.json |
|||
|
|||
# Numerous always-ignore extensions |
|||
*.diff |
|||
*.err |
|||
*.orig |
|||
*.log |
|||
*.rej |
|||
*.swo |
|||
*.swp |
|||
*.zip |
|||
*.vi |
|||
*~ |
|||
*.sass-cache |
|||
*.ruby-version |
|||
|
|||
# OS or Editor folders |
|||
.DS_Store |
|||
._* |
|||
Thumbs.db |
|||
.cache |
|||
.project |
|||
.settings |
|||
.tmproj |
|||
.docpad.db |
|||
*.esproj |
|||
nbproject |
|||
*.sublime-project |
|||
*.sublime-workspace |
|||
.build* |
|||
.idea |
|||
@ -0,0 +1,38 @@ |
|||
{ |
|||
|
|||
"globals": { |
|||
"$" : true, |
|||
"afterEach" : true, |
|||
"AnimatedPNG" : true, |
|||
"beforeEach" : true, |
|||
"console" : true, |
|||
"describe" : true, |
|||
"expect" : true, |
|||
"it" : true, |
|||
"jQuery" : true, |
|||
"loadFixtures" : true, |
|||
"module" : true, |
|||
"requestAnimationFrame" : true, |
|||
"require" : true, |
|||
"semantic" : true |
|||
}, |
|||
|
|||
"debug" : false, |
|||
"devel" : true, |
|||
|
|||
"browser" : true, |
|||
"curly" : true, |
|||
"immed" : true, |
|||
"latedef" : true, |
|||
"loopfunc" : true, |
|||
"noarg" : true, |
|||
"undef" : true, |
|||
"sub" : true, |
|||
"loopfunc" : true, |
|||
|
|||
"laxbreak" : true, |
|||
"evil" : true, |
|||
"indent" : false, |
|||
"trailing" : false |
|||
|
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
# Contributing to Semantic UI |
|||
|
|||
### Usage Questions |
|||
|
|||
Questions about usage should be asked in our [Gitter chatroom](https://gitter.im/Semantic-Org/Semantic-UI), on [Semantic UI forums](http://forums.semantic-ui.com) or [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui). |
|||
|
|||
Examples of usage questions |
|||
* *Why isn't my code working?* |
|||
* *Can Semantic UI do this?* |
|||
|
|||
Once you receive feedback through community channels you may find your question is actually a bug. At this point it's a good idea to submit it as a bug report. Just keep in mind the following suggestions. |
|||
|
|||
### Creating Bug Reports |
|||
|
|||
[Github Issues Tracker](https://github.com/Semantic-Org/Semantic-UI/issues) is used to track all upcoming milestones and changes to the project. |
|||
|
|||
**Please create a fork of this [JSFiddle](https://jsfiddle.net/ca0rovs3/) to demonstrate bugs.** |
|||
|
|||
When submiting a bug report, include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't reproduce the issue then it will make solving things much more difficult. |
|||
|
|||
If your bug uses a third party framework like Ember, Meteor, or Angular. Be sure to submit the issue to their respective issues boards. If you are confident the bug is part of the 'vanilla' SUI release, keep in mind not all maintainers are familiar with all framework and a simple test case is greatly appreciated. |
|||
|
|||
If your bug is reproduced by a maintainer it will be assigned the [`confirmed bug`](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aopen+is%3Aissue+label%3A%22Confirmed+Bug%22) tag. Browsing this tag is a good way to keep track of known issues with SUI. |
|||
|
|||
#### Naming Issues |
|||
|
|||
Semantic UI boards use a special naming convention to help tag issue titles by the component the issue is related to. |
|||
|
|||
##### Bugs |
|||
Please tag titles in the format "[Component] *Sub-type* should do *correct behavior*". Please use standard [title case](http://www.titlecase.com) for titles, including the bracketed tag. |
|||
|
|||
For example |
|||
* [Dropdown] Multiple Selection Should Preserve "Set Selected" Order |
|||
* [Validation] - E-mail Validation Should Handle Cyrillic |
|||
* [Button] - Grouped Buttons Should Display Correctly on Mobile |
|||
|
|||
##### Enhancements |
|||
|
|||
For new feature requests, you can use the format "[Component] Add *new feature*" |
|||
|
|||
For example |
|||
* [Dropdown] Add "Clearable" Setting |
|||
* [Validation] Add Rules for Zipcode Validation |
|||
* [API] Add "onProgress" callback setting |
|||
|
|||
|
|||
### Tracking Issue Progress |
|||
|
|||
As bugs and features are triaged they will be assigned to milestones. The best indication of when a change will land is to check the date on the [upcoming milestones](https://github.com/Semantic-Org/Semantic-UI/milestones) page. |
|||
|
|||
### Creating Pull Requests |
|||
|
|||
**All pull requests should be merged into the `next` branch.** |
|||
|
|||
Anyone can jump on the issues board and grab off bugs to fix. This is probably the best way to become a contributor to Semantic. Be sure to adhere to the style guides when submitting code. |
|||
|
|||
* [Create a Pull Request](https://github.com/Semantic-Org/Semantic-UI/compare) |
|||
* [View Open Issues](https://github.com/Semantic-Org/Semantic-UI/issues) |
|||
@ -0,0 +1,7 @@ |
|||
# The MIT License |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
|||
@ -0,0 +1,112 @@ |
|||
 |
|||
|
|||
# Semantic UI |
|||
|
|||
[](https://gitter.im/Semantic-Org/Semantic-UI?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
|||
|
|||
[](https://cdnjs.com/libraries/semantic-ui/) |
|||
|
|||
[Semantic](http://www.semantic-ui.com) is a UI framework designed for theming. |
|||
|
|||
Key Features |
|||
* 50+ UI elements |
|||
* 3000 + CSS variables |
|||
* 3 Levels of variable inheritance (similar to SublimeText) |
|||
* Built with EM values for responsive design |
|||
* Flexbox friendly |
|||
|
|||
Semantic allows developers to build beautiful websites fast, with **concise HTML**, **intuitive javascript**, and **simplified debugging**, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as **React**, **Angular**, **Meteor**, and **Ember**, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic. |
|||
|
|||
## 2.5.0 Release (Oct 6, 2022) |
|||
|
|||
Semantic UI is now compatible with Node 18 and Gulp 4. |
|||
|
|||
## User Support |
|||
|
|||
Please help us keep the issue tracker organized. For technical questions that do not include a specific [JSFiddle test case](https://jsfiddle.net/ca0rovs3/) (bug reports), or feature request please use [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui) to find a solution. |
|||
|
|||
Visit our [contributing guide](https://github.com/Semantic-Org/Semantic-UI/blob/master/CONTRIBUTING.md) for more on what should be posted to GitHub Issues. |
|||
|
|||
## Install |
|||
|
|||
#### Recommended Install |
|||
```bash |
|||
npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile. |
|||
``` |
|||
|
|||
Semantic UI includes an interactive installer to help setup your project. |
|||
|
|||
* For more details on setup visit our [getting started guide](http://semantic-ui.com/introduction/getting-started.html). |
|||
* To learn more about theming please read our [theming guide](http://www.semantic-ui.com/usage/theming.html) |
|||
|
|||
#### Additional Versions |
|||
|
|||
Environment | Install Script | Repo |
|||
--- | --- | --- | |
|||
CSS Only | `npm install semantic-ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS) |
|||
[LESS](https://github.com/less/less.js/) Only | `npm install semantic-ui-less` | [LESS Repo](https://github.com/Semantic-Org/Semantic-UI-LESS) |
|||
[LESS](https://github.com/less/less.js/) plugin | `npm install less-plugin-semantic-ui` | [LESS Plugin Repo](https://github.com/bassjobsen/less-plugin-semantic-ui/) |
|||
[EmberJS](http://emberjs.com/) | `ember install:addon semantic-ui-ember` | [Ember Repo](https://github.com/Semantic-Org/Semantic-UI-Ember) |
|||
|[Meteor](https://www.meteor.com/) - [LESS](https://github.com/less/less.js/) | `meteor add semantic:ui` | [Meteor Repo](https://github.com/Semantic-Org/Semantic-UI-Meteor) | |
|||
|[Meteor](https://www.meteor.com/) - CSS | `meteor add semantic:ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS) | |
|||
[Bower](http://bower.io/) | `bower install semantic-ui` | |
|||
|
|||
Check out our [integration wiki](https://github.com/Semantic-Org/Semantic-UI/wiki/Integration) for more options. |
|||
|
|||
#### Browser Support |
|||
|
|||
* Last 2 Versions FF, Chrome, Safari Mac |
|||
* IE 11+ |
|||
* Android 4.4+, Chrome for Android 44+ |
|||
* iOS Safari 7+ |
|||
* Microsoft Edge 12+ |
|||
|
|||
Although some components will work in IE9, [grids](http://semantic-ui.com/collections/grid.html) and other [flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) components are not supported by IE9 and may not appear correctly. |
|||
|
|||
## Community |
|||
|
|||
#### Getting Help |
|||
Please **do not post** usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom][Gitter.im Room] or [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui). |
|||
|
|||
#### Submitting Bugs and Enhancements |
|||
[GitHub Issues](https://github.com/Semantic-Org/Semantic-UI/issues) is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following: |
|||
* Check out our [contributing guide](https://github.com/Semantic-Org/Semantic-UI/blob/master/CONTRIBUTING.md) for info on our release cycle. |
|||
* [Fork this boilerplate JSFiddle](https://jsfiddle.net/ca0rovs3/) to create a test case for your bug. If a bug is apparent in the docs, that's ok as a test case, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged. |
|||
|
|||
|
|||
#### Pull Requests |
|||
|
|||
When adding pull requests, be sure to merge into the [next](https://github.com/Semantic-Org/Semantic-UI/tree/next) branch. If you need to demonstrate a fix in ``next`` release, you can use [this JSFiddle](https://jsfiddle.net/ca0rovs3/) |
|||
|
|||
|
|||
#### International |
|||
|
|||
* **Chinese** A Chinese mirror site is available at [http://www.semantic-ui.cn](http://www.semantic-ui.cn). |
|||
* **Right-to-Left (RTL)** An RTL version can be created using our build tools by selecting `rtl` from the install script. |
|||
* **Translation** To help translate see the [Wiki Guide](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) for translations. |
|||
|
|||
#### Resources |
|||
|
|||
Resource | Description |
|||
--- | --- | |
|||
Bugs & Feature Requests | All bug submission **require** a link to a test case, and a set of steps to reproduce the issue. You can make a test case by forking this [JSFiddle](https://jsfiddle.net/ca0rovs3/), then submit your [bug report on GitHub Issues](https://github.com/Semantic-Org/Semantic-UI/issues) |
|||
Live Chat | Join our [Gitter.im Room][Gitter.im Room] |
|||
Newsletter Updates | Sign up for updates at [semantic-ui.com](http://www.semantic-ui.com) |
|||
Additional Resources | Submit a question on [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui) or ask our [Google Group](https://groups.google.com/forum/#!forum/semantic-ui) |
|||
|
|||
#### Places to Help |
|||
|
|||
Project | How To Help | Next Step |
|||
--- | --- | --- | |
|||
Localization | Help us translate Semantic UI into your language | [Join our Translation Community](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) |
|||
[SCSS](http://sass-lang.com/) | SASS needs PR to support variables inside `@import` | [Add Pull Request](https://github.com/sass/sass/pulls) for [#739](https://github.com/sass/sass/issues/739#issuecomment-73984809) |
|||
[Angular](https://angularjs.org/) | Help develop angular bindings | Reach Out on [GitHub Issues](https://github.com/Semantic-Org/Semantic-UI-Angular/issues/8) |
|||
Guides & Tutorials | Help write guides and tutorials | [Join the discussion](https://github.com/Semantic-Org/Semantic-UI/issues/1571) |
|||
|
|||
#### Reaching Out |
|||
|
|||
If you'd like to start a conversation about Semantic feel free to e-mail me at [jack@semantic-ui.com](mailto:jack@semantic-ui.com) |
|||
|
|||
<a href="http://packagequality.com/#?package=semantic-ui"><img src="http://npm.packagequality.com/badge/semantic-ui.png"/></a> |
|||
|
|||
[Gitter.im Room]: https://gitter.im/Semantic-Org/Semantic-UI |
|||
File diff suppressed because it is too large
@ -0,0 +1,5 @@ |
|||
last 2 versions |
|||
> 1% |
|||
opera 12.1 |
|||
bb 10 |
|||
android 4 |
|||
@ -0,0 +1,322 @@ |
|||
{ |
|||
"remove-empty-rulesets": true, |
|||
"always-semicolon": true, |
|||
"color-case": "upper", |
|||
"block-indent": " ", |
|||
"color-shorthand": false, |
|||
"element-case": "lower", |
|||
"leading-zero": true, |
|||
"space-after-colon": " ", |
|||
"space-before-combinator": " ", |
|||
"space-after-combinator": " ", |
|||
"space-between-declarations": "\n", |
|||
"space-before-opening-brace": " ", |
|||
"space-after-opening-brace": "\n", |
|||
"space-after-selector-delimiter": "\n", |
|||
"space-before-selector-delimiter": "", |
|||
"space-before-closing-brace": "\n", |
|||
"strip-spaces": true, |
|||
"tab-size": true, |
|||
"vendor-prefix-align": true, |
|||
"sort-order": [ |
|||
[ |
|||
"display", |
|||
"visibility", |
|||
"float", |
|||
"clear", |
|||
"overflow", |
|||
"overflow-x", |
|||
"overflow-y", |
|||
"-webkit-box-sizing", |
|||
"-moz-box-sizing", |
|||
"box-sizing", |
|||
"-ms-overflow-x", |
|||
"-ms-overflow-y", |
|||
"clip", |
|||
"zoom", |
|||
"flex-direction", |
|||
"flex-order", |
|||
"flex-pack", |
|||
"flex-align" |
|||
], |
|||
[ |
|||
"position", |
|||
"z-index", |
|||
"top", |
|||
"right", |
|||
"bottom", |
|||
"left" |
|||
], |
|||
[ |
|||
"font", |
|||
"font-family", |
|||
"font-size", |
|||
"font-weight", |
|||
"font-style", |
|||
"font-variant", |
|||
"font-size-adjust", |
|||
"font-stretch", |
|||
"font-effect", |
|||
"font-emphasize", |
|||
"font-emphasize-position", |
|||
"font-emphasize-style", |
|||
"font-smooth", |
|||
"line-height" |
|||
], |
|||
[ |
|||
"width", |
|||
"min-width", |
|||
"max-width", |
|||
"height", |
|||
"min-height", |
|||
"max-height", |
|||
"margin", |
|||
"margin-top", |
|||
"margin-right", |
|||
"margin-bottom", |
|||
"margin-left", |
|||
"padding", |
|||
"padding-top", |
|||
"padding-right", |
|||
"padding-bottom", |
|||
"padding-left" |
|||
], |
|||
[ |
|||
"table-layout", |
|||
"empty-cells", |
|||
"caption-side", |
|||
"border-spacing", |
|||
"border-collapse", |
|||
"list-style", |
|||
"list-style-position", |
|||
"list-style-type", |
|||
"list-style-image" |
|||
], |
|||
[ |
|||
"opacity", |
|||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", |
|||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", |
|||
"-ms-interpolation-mode", |
|||
"color", |
|||
"border", |
|||
"border-width", |
|||
"border-style", |
|||
"border-color", |
|||
"border-top", |
|||
"border-top-width", |
|||
"border-top-style", |
|||
"border-top-color", |
|||
"border-right", |
|||
"border-right-width", |
|||
"border-right-style", |
|||
"border-right-color", |
|||
"border-bottom", |
|||
"border-bottom-width", |
|||
"border-bottom-style", |
|||
"border-bottom-color", |
|||
"border-left", |
|||
"border-left-width", |
|||
"border-left-style", |
|||
"border-left-color", |
|||
"-webkit-border-radius", |
|||
"-moz-border-radius", |
|||
"border-radius", |
|||
"-webkit-border-top-left-radius", |
|||
"-moz-border-radius-topleft", |
|||
"border-top-left-radius", |
|||
"-webkit-border-top-right-radius", |
|||
"-moz-border-radius-topright", |
|||
"border-top-right-radius", |
|||
"-webkit-border-bottom-right-radius", |
|||
"-moz-border-radius-bottomright", |
|||
"border-bottom-right-radius", |
|||
"-webkit-border-bottom-left-radius", |
|||
"-moz-border-radius-bottomleft", |
|||
"border-bottom-left-radius", |
|||
"-webkit-border-image", |
|||
"-moz-border-image", |
|||
"-o-border-image", |
|||
"border-image", |
|||
"-webkit-border-image-source", |
|||
"-moz-border-image-source", |
|||
"-o-border-image-source", |
|||
"border-image-source", |
|||
"-webkit-border-image-slice", |
|||
"-moz-border-image-slice", |
|||
"-o-border-image-slice", |
|||
"border-image-slice", |
|||
"-webkit-border-image-width", |
|||
"-moz-border-image-width", |
|||
"-o-border-image-width", |
|||
"border-image-width", |
|||
"-webkit-border-image-outset", |
|||
"-moz-border-image-outset", |
|||
"-o-border-image-outset", |
|||
"border-image-outset", |
|||
"-webkit-border-image-repeat", |
|||
"-moz-border-image-repeat", |
|||
"-o-border-image-repeat", |
|||
"border-image-repeat", |
|||
"outline", |
|||
"outline-width", |
|||
"outline-style", |
|||
"outline-color", |
|||
"outline-offset", |
|||
"background", |
|||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", |
|||
"background-color", |
|||
"background-image", |
|||
"background-repeat", |
|||
"background-attachment", |
|||
"background-position", |
|||
"background-position-x", |
|||
"-ms-background-position-x", |
|||
"background-position-y", |
|||
"-ms-background-position-y", |
|||
"-webkit-background-clip", |
|||
"-moz-background-clip", |
|||
"background-clip", |
|||
"background-origin", |
|||
"-webkit-background-size", |
|||
"-moz-background-size", |
|||
"-o-background-size", |
|||
"background-size", |
|||
"box-decoration-break", |
|||
"-webkit-box-shadow", |
|||
"-moz-box-shadow", |
|||
"box-shadow", |
|||
"filter:progid:DXImageTransform.Microsoft.gradient", |
|||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", |
|||
"text-shadow" |
|||
], |
|||
|
|||
[ |
|||
"content", |
|||
"quotes", |
|||
"counter-reset", |
|||
"counter-increment", |
|||
"resize", |
|||
"cursor", |
|||
"-webkit-user-select", |
|||
"-moz-user-select", |
|||
"-ms-user-select", |
|||
"user-select", |
|||
"nav-index", |
|||
"nav-up", |
|||
"nav-right", |
|||
"nav-down", |
|||
"nav-left", |
|||
"-webkit-transition", |
|||
"-moz-transition", |
|||
"-ms-transition", |
|||
"-o-transition", |
|||
"transition", |
|||
"-webkit-transition-delay", |
|||
"-moz-transition-delay", |
|||
"-ms-transition-delay", |
|||
"-o-transition-delay", |
|||
"transition-delay", |
|||
"-webkit-transition-timing-function", |
|||
"-moz-transition-timing-function", |
|||
"-ms-transition-timing-function", |
|||
"-o-transition-timing-function", |
|||
"transition-timing-function", |
|||
"-webkit-transition-duration", |
|||
"-moz-transition-duration", |
|||
"-ms-transition-duration", |
|||
"-o-transition-duration", |
|||
"transition-duration", |
|||
"-webkit-transition-property", |
|||
"-moz-transition-property", |
|||
"-ms-transition-property", |
|||
"-o-transition-property", |
|||
"transition-property", |
|||
"-webkit-transform", |
|||
"-moz-transform", |
|||
"-ms-transform", |
|||
"-o-transform", |
|||
"transform", |
|||
"-webkit-transform-origin", |
|||
"-moz-transform-origin", |
|||
"-ms-transform-origin", |
|||
"-o-transform-origin", |
|||
"transform-origin", |
|||
"-webkit-animation", |
|||
"-moz-animation", |
|||
"-ms-animation", |
|||
"-o-animation", |
|||
"animation", |
|||
"-webkit-animation-name", |
|||
"-moz-animation-name", |
|||
"-ms-animation-name", |
|||
"-o-animation-name", |
|||
"animation-name", |
|||
"-webkit-animation-duration", |
|||
"-moz-animation-duration", |
|||
"-ms-animation-duration", |
|||
"-o-animation-duration", |
|||
"animation-duration", |
|||
"-webkit-animation-play-state", |
|||
"-moz-animation-play-state", |
|||
"-ms-animation-play-state", |
|||
"-o-animation-play-state", |
|||
"animation-play-state", |
|||
"-webkit-animation-timing-function", |
|||
"-moz-animation-timing-function", |
|||
"-ms-animation-timing-function", |
|||
"-o-animation-timing-function", |
|||
"animation-timing-function", |
|||
"-webkit-animation-delay", |
|||
"-moz-animation-delay", |
|||
"-ms-animation-delay", |
|||
"-o-animation-delay", |
|||
"animation-delay", |
|||
"-webkit-animation-iteration-count", |
|||
"-moz-animation-iteration-count", |
|||
"-ms-animation-iteration-count", |
|||
"-o-animation-iteration-count", |
|||
"animation-iteration-count", |
|||
"-webkit-animation-direction", |
|||
"-moz-animation-direction", |
|||
"-ms-animation-direction", |
|||
"-o-animation-direction", |
|||
"animation-direction", |
|||
"text-align", |
|||
"-webkit-text-align-last", |
|||
"-moz-text-align-last", |
|||
"-ms-text-align-last", |
|||
"text-align-last", |
|||
"vertical-align", |
|||
"white-space", |
|||
"text-decoration", |
|||
"text-emphasis", |
|||
"text-emphasis-color", |
|||
"text-emphasis-style", |
|||
"text-emphasis-position", |
|||
"text-indent", |
|||
"-ms-text-justify", |
|||
"text-justify", |
|||
"letter-spacing", |
|||
"word-spacing", |
|||
"-ms-writing-mode", |
|||
"text-outline", |
|||
"text-transform", |
|||
"text-wrap", |
|||
"text-overflow", |
|||
"-ms-text-overflow", |
|||
"text-overflow-ellipsis", |
|||
"text-overflow-mode", |
|||
"-ms-word-wrap", |
|||
"word-wrap", |
|||
"word-break", |
|||
"-ms-word-break", |
|||
"-moz-tab-size", |
|||
"-o-tab-size", |
|||
"tab-size", |
|||
"-webkit-hyphens", |
|||
"-moz-hyphens", |
|||
"hyphens", |
|||
"pointer-events" |
|||
] |
|||
] |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
{ |
|||
"vendor-prefix" : true, |
|||
"duplicate-properties" : true, |
|||
"display-property-grouping" : true, |
|||
"empty-rules" : true, |
|||
|
|||
"adjoining-classes" : false, |
|||
"box-model" : false, |
|||
"compatible-vendor-prefixes" : false, |
|||
"box-sizing" : false, |
|||
"duplicate-background-images" : false, |
|||
"floats" : false, |
|||
"important" : false, |
|||
"overqualified-elements" : false, |
|||
"rules-count" : false, |
|||
"shorthand" : false, |
|||
"zero-units" : false |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
✖ USAGE QUESTIONS → Use these dedicated resources: |
|||
Docs - http://www.semantic-ui.com |
|||
Chat - https://gitter.im/Semantic-Org/Semantic-UI |
|||
SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes |
|||
|
|||
✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible. |
|||
✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations. |
|||
|
|||
### Title (Put in field above) |
|||
Use the format: [Component] Component Should Do X |
|||
i.e. [Checkbox] onChange Should Fire When Update Triggered via DOM |
|||
|
|||
### Steps |
|||
|
|||
### Expected Result |
|||
|
|||
### Actual Result |
|||
|
|||
### Version |
|||
x.y.z |
|||
|
|||
### Testcase |
|||
[Fork, update, and replace to show the bug]: |
|||
https://jsfiddle.net/ca0rovs3/ |
|||
@ -0,0 +1,28 @@ |
|||
✖ Multiple features in one PR |
|||
✖ New Components Unless Previously Discussed with Maintainers (Consider creating separate repo, I'll link out to you) |
|||
|
|||
✔ Add comments to complex/confusing code in "code" view of PR |
|||
✔ BUGS → This form is required: |
|||
✔ Enhancements → Only specific enhancements with detailed descriptions. |
|||
|
|||
### Issue Titles |
|||
|
|||
Use the format: [Component] Adds Support for Thing |
|||
|
|||
For example: [Build Tools] Adds Source Map Support |
|||
Or: [Button] Fixes Inheritance for Red Basic Active State |
|||
|
|||
### Closed Issues |
|||
#222 #333 #444 |
|||
|
|||
### Description |
|||
|
|||
### Testcase |
|||
|
|||
[Show before with this fiddle] |
|||
https://jsfiddle.net/ca0rovs3/ |
|||
|
|||
[Consider showing "fixed" case with your fiddle]() |
|||
|
|||
You can link to your JS using https://rawgit.com/ |
|||
|
|||
@ -0,0 +1,33 @@ |
|||
# Number of days of inactivity before an issue becomes stale |
|||
daysUntilStale: 90 |
|||
|
|||
# Number of days of inactivity before a stale issue is closed |
|||
daysUntilClose: 90 |
|||
|
|||
# Issues with these labels will never be considered stale |
|||
exemptLabels: |
|||
- pinned |
|||
- security |
|||
|
|||
# Label to use when marking an issue as stale |
|||
staleLabel: stale |
|||
|
|||
# Comment to post when marking an issue as stale. Set to `false` to disable |
|||
markComment: > |
|||
There has been no activity in this thread for 90 days. While we care about |
|||
every issue and we’d love to see this fixed, the core team’s time is |
|||
limited so we have to focus our attention on the issues that are most |
|||
pressing. Therefore, we will likely not be able to get to this one. |
|||
|
|||
|
|||
However, PRs for this issue will of course be accepted and welcome! |
|||
|
|||
|
|||
If there is no more activity in the next 90 days, this issue will be closed |
|||
automatically for housekeeping. To prevent this, simply leave a reply here. |
|||
Thanks! |
|||
|
|||
# Comment to post when closing a stale issue. Set to `false` to disable |
|||
closeComment: > |
|||
This issue will be closed due to lack of activity for 6 months. If you’d |
|||
like this to be reopened, just leave a comment; we do monitor them! |
|||
@ -0,0 +1,38 @@ |
|||
node_modules/ |
|||
test/coverage/ |
|||
coverage/ |
|||
src/**/site/ |
|||
theme.config |
|||
semantic.json |
|||
tasks/**/oauth.js |
|||
package-lock.json |
|||
|
|||
# Numerous always-ignore extensions |
|||
*.diff |
|||
*.err |
|||
*.orig |
|||
*.log |
|||
*.rej |
|||
*.swo |
|||
*.swp |
|||
*.zip |
|||
*.vi |
|||
*~ |
|||
*.sass-cache |
|||
*.ruby-version |
|||
|
|||
# OS or Editor folders |
|||
.DS_Store |
|||
._* |
|||
Thumbs.db |
|||
.cache |
|||
.project |
|||
.settings |
|||
.tmproj |
|||
.docpad.db |
|||
*.esproj |
|||
nbproject |
|||
*.sublime-project |
|||
*.sublime-workspace |
|||
.build* |
|||
.idea |
|||
@ -0,0 +1,38 @@ |
|||
{ |
|||
|
|||
"globals": { |
|||
"$" : true, |
|||
"afterEach" : true, |
|||
"AnimatedPNG" : true, |
|||
"beforeEach" : true, |
|||
"console" : true, |
|||
"describe" : true, |
|||
"expect" : true, |
|||
"it" : true, |
|||
"jQuery" : true, |
|||
"loadFixtures" : true, |
|||
"module" : true, |
|||
"requestAnimationFrame" : true, |
|||
"require" : true, |
|||
"semantic" : true |
|||
}, |
|||
|
|||
"debug" : false, |
|||
"devel" : true, |
|||
|
|||
"browser" : true, |
|||
"curly" : true, |
|||
"immed" : true, |
|||
"latedef" : true, |
|||
"loopfunc" : true, |
|||
"noarg" : true, |
|||
"undef" : true, |
|||
"sub" : true, |
|||
"loopfunc" : true, |
|||
|
|||
"laxbreak" : true, |
|||
"evil" : true, |
|||
"indent" : false, |
|||
"trailing" : false |
|||
|
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
# Contributing to Semantic UI |
|||
|
|||
### Usage Questions |
|||
|
|||
Questions about usage should be asked in our [Gitter chatroom](https://gitter.im/Semantic-Org/Semantic-UI), on [Semantic UI forums](http://forums.semantic-ui.com) or [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui). |
|||
|
|||
Examples of usage questions |
|||
* *Why isn't my code working?* |
|||
* *Can Semantic UI do this?* |
|||
|
|||
Once you receive feedback through community channels you may find your question is actually a bug. At this point it's a good idea to submit it as a bug report. Just keep in mind the following suggestions. |
|||
|
|||
### Creating Bug Reports |
|||
|
|||
[Github Issues Tracker](https://github.com/Semantic-Org/Semantic-UI/issues) is used to track all upcoming milestones and changes to the project. |
|||
|
|||
**Please create a fork of this [JSFiddle](https://jsfiddle.net/ca0rovs3/) to demonstrate bugs.** |
|||
|
|||
When submiting a bug report, include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't reproduce the issue then it will make solving things much more difficult. |
|||
|
|||
If your bug uses a third party framework like Ember, Meteor, or Angular. Be sure to submit the issue to their respective issues boards. If you are confident the bug is part of the 'vanilla' SUI release, keep in mind not all maintainers are familiar with all framework and a simple test case is greatly appreciated. |
|||
|
|||
If your bug is reproduced by a maintainer it will be assigned the [`confirmed bug`](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aopen+is%3Aissue+label%3A%22Confirmed+Bug%22) tag. Browsing this tag is a good way to keep track of known issues with SUI. |
|||
|
|||
#### Naming Issues |
|||
|
|||
Semantic UI boards use a special naming convention to help tag issue titles by the component the issue is related to. |
|||
|
|||
##### Bugs |
|||
Please tag titles in the format "[Component] *Sub-type* should do *correct behavior*". Please use standard [title case](http://www.titlecase.com) for titles, including the bracketed tag. |
|||
|
|||
For example |
|||
* [Dropdown] Multiple Selection Should Preserve "Set Selected" Order |
|||
* [Validation] - E-mail Validation Should Handle Cyrillic |
|||
* [Button] - Grouped Buttons Should Display Correctly on Mobile |
|||
|
|||
##### Enhancements |
|||
|
|||
For new feature requests, you can use the format "[Component] Add *new feature*" |
|||
|
|||
For example |
|||
* [Dropdown] Add "Clearable" Setting |
|||
* [Validation] Add Rules for Zipcode Validation |
|||
* [API] Add "onProgress" callback setting |
|||
|
|||
|
|||
### Tracking Issue Progress |
|||
|
|||
As bugs and features are triaged they will be assigned to milestones. The best indication of when a change will land is to check the date on the [upcoming milestones](https://github.com/Semantic-Org/Semantic-UI/milestones) page. |
|||
|
|||
### Creating Pull Requests |
|||
|
|||
**All pull requests should be merged into the `next` branch.** |
|||
|
|||
Anyone can jump on the issues board and grab off bugs to fix. This is probably the best way to become a contributor to Semantic. Be sure to adhere to the style guides when submitting code. |
|||
|
|||
* [Create a Pull Request](https://github.com/Semantic-Org/Semantic-UI/compare) |
|||
* [View Open Issues](https://github.com/Semantic-Org/Semantic-UI/issues) |
|||
@ -0,0 +1,7 @@ |
|||
# The MIT License |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
|||
@ -0,0 +1,112 @@ |
|||
 |
|||
|
|||
# Semantic UI |
|||
|
|||
[](https://gitter.im/Semantic-Org/Semantic-UI?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
|||
|
|||
[](https://cdnjs.com/libraries/semantic-ui/) |
|||
|
|||
[Semantic](http://www.semantic-ui.com) is a UI framework designed for theming. |
|||
|
|||
Key Features |
|||
* 50+ UI elements |
|||
* 3000 + CSS variables |
|||
* 3 Levels of variable inheritance (similar to SublimeText) |
|||
* Built with EM values for responsive design |
|||
* Flexbox friendly |
|||
|
|||
Semantic allows developers to build beautiful websites fast, with **concise HTML**, **intuitive javascript**, and **simplified debugging**, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as **React**, **Angular**, **Meteor**, and **Ember**, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic. |
|||
|
|||
## 2.5.0 Release (Oct 6, 2022) |
|||
|
|||
Semantic UI is now compatible with Node 18 and Gulp 4. |
|||
|
|||
## User Support |
|||
|
|||
Please help us keep the issue tracker organized. For technical questions that do not include a specific [JSFiddle test case](https://jsfiddle.net/ca0rovs3/) (bug reports), or feature request please use [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui) to find a solution. |
|||
|
|||
Visit our [contributing guide](https://github.com/Semantic-Org/Semantic-UI/blob/master/CONTRIBUTING.md) for more on what should be posted to GitHub Issues. |
|||
|
|||
## Install |
|||
|
|||
#### Recommended Install |
|||
```bash |
|||
npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile. |
|||
``` |
|||
|
|||
Semantic UI includes an interactive installer to help setup your project. |
|||
|
|||
* For more details on setup visit our [getting started guide](http://semantic-ui.com/introduction/getting-started.html). |
|||
* To learn more about theming please read our [theming guide](http://www.semantic-ui.com/usage/theming.html) |
|||
|
|||
#### Additional Versions |
|||
|
|||
Environment | Install Script | Repo |
|||
--- | --- | --- | |
|||
CSS Only | `npm install semantic-ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS) |
|||
[LESS](https://github.com/less/less.js/) Only | `npm install semantic-ui-less` | [LESS Repo](https://github.com/Semantic-Org/Semantic-UI-LESS) |
|||
[LESS](https://github.com/less/less.js/) plugin | `npm install less-plugin-semantic-ui` | [LESS Plugin Repo](https://github.com/bassjobsen/less-plugin-semantic-ui/) |
|||
[EmberJS](http://emberjs.com/) | `ember install:addon semantic-ui-ember` | [Ember Repo](https://github.com/Semantic-Org/Semantic-UI-Ember) |
|||
|[Meteor](https://www.meteor.com/) - [LESS](https://github.com/less/less.js/) | `meteor add semantic:ui` | [Meteor Repo](https://github.com/Semantic-Org/Semantic-UI-Meteor) | |
|||
|[Meteor](https://www.meteor.com/) - CSS | `meteor add semantic:ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS) | |
|||
[Bower](http://bower.io/) | `bower install semantic-ui` | |
|||
|
|||
Check out our [integration wiki](https://github.com/Semantic-Org/Semantic-UI/wiki/Integration) for more options. |
|||
|
|||
#### Browser Support |
|||
|
|||
* Last 2 Versions FF, Chrome, Safari Mac |
|||
* IE 11+ |
|||
* Android 4.4+, Chrome for Android 44+ |
|||
* iOS Safari 7+ |
|||
* Microsoft Edge 12+ |
|||
|
|||
Although some components will work in IE9, [grids](http://semantic-ui.com/collections/grid.html) and other [flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) components are not supported by IE9 and may not appear correctly. |
|||
|
|||
## Community |
|||
|
|||
#### Getting Help |
|||
Please **do not post** usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom][Gitter.im Room] or [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui). |
|||
|
|||
#### Submitting Bugs and Enhancements |
|||
[GitHub Issues](https://github.com/Semantic-Org/Semantic-UI/issues) is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following: |
|||
* Check out our [contributing guide](https://github.com/Semantic-Org/Semantic-UI/blob/master/CONTRIBUTING.md) for info on our release cycle. |
|||
* [Fork this boilerplate JSFiddle](https://jsfiddle.net/ca0rovs3/) to create a test case for your bug. If a bug is apparent in the docs, that's ok as a test case, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged. |
|||
|
|||
|
|||
#### Pull Requests |
|||
|
|||
When adding pull requests, be sure to merge into the [next](https://github.com/Semantic-Org/Semantic-UI/tree/next) branch. If you need to demonstrate a fix in ``next`` release, you can use [this JSFiddle](https://jsfiddle.net/ca0rovs3/) |
|||
|
|||
|
|||
#### International |
|||
|
|||
* **Chinese** A Chinese mirror site is available at [http://www.semantic-ui.cn](http://www.semantic-ui.cn). |
|||
* **Right-to-Left (RTL)** An RTL version can be created using our build tools by selecting `rtl` from the install script. |
|||
* **Translation** To help translate see the [Wiki Guide](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) for translations. |
|||
|
|||
#### Resources |
|||
|
|||
Resource | Description |
|||
--- | --- | |
|||
Bugs & Feature Requests | All bug submission **require** a link to a test case, and a set of steps to reproduce the issue. You can make a test case by forking this [JSFiddle](https://jsfiddle.net/ca0rovs3/), then submit your [bug report on GitHub Issues](https://github.com/Semantic-Org/Semantic-UI/issues) |
|||
Live Chat | Join our [Gitter.im Room][Gitter.im Room] |
|||
Newsletter Updates | Sign up for updates at [semantic-ui.com](http://www.semantic-ui.com) |
|||
Additional Resources | Submit a question on [StackOverflow](http://stackoverflow.com/questions/tagged/semantic-ui) or ask our [Google Group](https://groups.google.com/forum/#!forum/semantic-ui) |
|||
|
|||
#### Places to Help |
|||
|
|||
Project | How To Help | Next Step |
|||
--- | --- | --- | |
|||
Localization | Help us translate Semantic UI into your language | [Join our Translation Community](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) |
|||
[SCSS](http://sass-lang.com/) | SASS needs PR to support variables inside `@import` | [Add Pull Request](https://github.com/sass/sass/pulls) for [#739](https://github.com/sass/sass/issues/739#issuecomment-73984809) |
|||
[Angular](https://angularjs.org/) | Help develop angular bindings | Reach Out on [GitHub Issues](https://github.com/Semantic-Org/Semantic-UI-Angular/issues/8) |
|||
Guides & Tutorials | Help write guides and tutorials | [Join the discussion](https://github.com/Semantic-Org/Semantic-UI/issues/1571) |
|||
|
|||
#### Reaching Out |
|||
|
|||
If you'd like to start a conversation about Semantic feel free to e-mail me at [jack@semantic-ui.com](mailto:jack@semantic-ui.com) |
|||
|
|||
<a href="http://packagequality.com/#?package=semantic-ui"><img src="http://npm.packagequality.com/badge/semantic-ui.png"/></a> |
|||
|
|||
[Gitter.im Room]: https://gitter.im/Semantic-Org/Semantic-UI |
|||
File diff suppressed because it is too large
@ -0,0 +1,27 @@ |
|||
{ |
|||
"name" : "semantic", |
|||
"description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.", |
|||
"homepage" : "http://www.semantic-ui.com", |
|||
"author": { |
|||
"name" : "Jack Lukic", |
|||
"web" : "http://www.jacklukic.com" |
|||
}, |
|||
"dependencies": { |
|||
"jquery" : ">=1.8" |
|||
}, |
|||
"main": [ |
|||
"src/semantic.less", |
|||
"dist/semantic.js" |
|||
], |
|||
"keywords": [ |
|||
"semantic", |
|||
"ui", |
|||
"css3", |
|||
"framework" |
|||
], |
|||
"license" : "MIT", |
|||
"ignore": [ |
|||
"src/site", |
|||
"test" |
|||
] |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
{ |
|||
"name" : "semantic/ui", |
|||
"description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.", |
|||
"homepage" : "http://www.semantic-ui.com", |
|||
"authors" : [ |
|||
{ |
|||
"name" : "Jack Lukic", |
|||
"email" : "jacklukic@gmail.com", |
|||
"homepage" : "http://www.jacklukic.com", |
|||
"role" : "Creator" |
|||
} |
|||
], |
|||
"support": { |
|||
"issues": "https://github.com/Semantic-Org/Semantic-UI/issues", |
|||
"source": "https://github.com/Semantic-Org/Semantic-UI" |
|||
}, |
|||
"keywords" : [ |
|||
"semantic", |
|||
"ui", |
|||
"css", |
|||
"framework" |
|||
], |
|||
"license" : "MIT" |
|||
} |
|||
@ -0,0 +1,244 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Accordion |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Accordion |
|||
*******************************/ |
|||
|
|||
.ui.accordion, |
|||
.ui.accordion .accordion { |
|||
max-width: 100%; |
|||
} |
|||
.ui.accordion .accordion { |
|||
margin: 1em 0em 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/* Title */ |
|||
.ui.accordion .title, |
|||
.ui.accordion .accordion .title { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Default Styling */ |
|||
.ui.accordion .title:not(.ui) { |
|||
padding: 0.5em 0em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
font-size: 1em; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.accordion .title ~ .content, |
|||
.ui.accordion .accordion .title ~ .content { |
|||
display: none; |
|||
} |
|||
|
|||
/* Default Styling */ |
|||
.ui.accordion:not(.styled) .title ~ .content:not(.ui), |
|||
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { |
|||
margin: ''; |
|||
padding: 0.5em 0em 1em; |
|||
} |
|||
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
/* Arrow */ |
|||
.ui.accordion .title .dropdown.icon, |
|||
.ui.accordion .accordion .title .dropdown.icon { |
|||
display: inline-block; |
|||
float: none; |
|||
opacity: 1; |
|||
width: 1.25em; |
|||
height: 1em; |
|||
margin: 0em 0.25rem 0em 0rem; |
|||
padding: 0em; |
|||
font-size: 1em; |
|||
transition: transform 0.1s ease, opacity 0.1s ease; |
|||
vertical-align: baseline; |
|||
transform: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Coupling |
|||
---------------*/ |
|||
|
|||
|
|||
/* Menu */ |
|||
.ui.accordion.menu .item .title { |
|||
display: block; |
|||
padding: 0em; |
|||
} |
|||
.ui.accordion.menu .item .title > .dropdown.icon { |
|||
float: right; |
|||
margin: 0.21425em 0em 0em 1em; |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.accordion .ui.header .dropdown.icon { |
|||
font-size: 1em; |
|||
margin: 0em 0.25rem 0em 0rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.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: #FFFFFF; |
|||
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15); |
|||
} |
|||
.ui.styled.accordion .title, |
|||
.ui.styled.accordion .accordion .title { |
|||
margin: 0em; |
|||
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, |
|||
.ui.styled.accordion .accordion .content { |
|||
margin: 0em; |
|||
padding: 0.5em 1em 1.5em; |
|||
} |
|||
.ui.styled.accordion .accordion .content { |
|||
padding: 0em; |
|||
padding: 0.5em 1em 1.5em; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.styled.accordion .title:hover, |
|||
.ui.styled.accordion .active.title, |
|||
.ui.styled.accordion .accordion .title:hover, |
|||
.ui.styled.accordion .accordion .active.title { |
|||
background: transparent; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
.ui.styled.accordion .accordion .title:hover, |
|||
.ui.styled.accordion .accordion .active.title { |
|||
background: transparent; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.styled.accordion .active.title { |
|||
background: transparent; |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
.ui.styled.accordion .accordion .active.title { |
|||
background: transparent; |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.accordion .active.content, |
|||
.ui.accordion .accordion .active.content { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Fluid |
|||
---------------*/ |
|||
|
|||
.ui.fluid.accordion, |
|||
.ui.fluid.accordion .accordion { |
|||
width: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.accordion .title:not(.ui) { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
@font-face { |
|||
font-family: 'Accordion'; |
|||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
/* 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 .title .dropdown.icon:before, |
|||
.ui.accordion .accordion .title .dropdown.icon:before { |
|||
content: '\f0da' /*rtl:'\f0d9'*/; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
User Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,613 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Accordion |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
'use strict'; |
|||
|
|||
window = (typeof window != 'undefined' && window.Math == Math) |
|||
? window |
|||
: (typeof self != 'undefined' && self.Math == Math) |
|||
? self |
|||
: Function('return this')() |
|||
; |
|||
|
|||
$.fn.accordion = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); }, |
|||
|
|||
returnedValue |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.accordion.settings, parameters) |
|||
: $.extend({}, $.fn.accordion.settings), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
$module = $(this), |
|||
$title = $module.find(selector.title), |
|||
$content = $module.find(selector.content), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
observer, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing', $module); |
|||
module.bind.events(); |
|||
if(settings.observeChanges) { |
|||
module.observeChanges(); |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.debug('Destroying previous instance', $module); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
$title = $module.find(selector.title); |
|||
$content = $module.find(selector.content); |
|||
}, |
|||
|
|||
observeChanges: function() { |
|||
if('MutationObserver' in window) { |
|||
observer = new MutationObserver(function(mutations) { |
|||
module.debug('DOM tree modified, updating selector cache'); |
|||
module.refresh(); |
|||
}); |
|||
observer.observe(element, { |
|||
childList : true, |
|||
subtree : true |
|||
}); |
|||
module.debug('Setting up mutation observer', observer); |
|||
} |
|||
}, |
|||
|
|||
bind: { |
|||
events: function() { |
|||
module.debug('Binding delegated events'); |
|||
$module |
|||
.on(settings.on + eventNamespace, selector.trigger, module.event.click) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
click: function() { |
|||
module.toggle.call(this); |
|||
} |
|||
}, |
|||
|
|||
toggle: function(query) { |
|||
var |
|||
$activeTitle = (query !== undefined) |
|||
? (typeof query === 'number') |
|||
? $title.eq(query) |
|||
: $(query).closest(selector.title) |
|||
: $(this).closest(selector.title), |
|||
$activeContent = $activeTitle.next($content), |
|||
isAnimating = $activeContent.hasClass(className.animating), |
|||
isActive = $activeContent.hasClass(className.active), |
|||
isOpen = (isActive && !isAnimating), |
|||
isOpening = (!isActive && isAnimating) |
|||
; |
|||
module.debug('Toggling visibility of content', $activeTitle); |
|||
if(isOpen || isOpening) { |
|||
if(settings.collapsible) { |
|||
module.close.call($activeTitle); |
|||
} |
|||
else { |
|||
module.debug('Cannot close accordion content collapsing is disabled'); |
|||
} |
|||
} |
|||
else { |
|||
module.open.call($activeTitle); |
|||
} |
|||
}, |
|||
|
|||
open: function(query) { |
|||
var |
|||
$activeTitle = (query !== undefined) |
|||
? (typeof query === 'number') |
|||
? $title.eq(query) |
|||
: $(query).closest(selector.title) |
|||
: $(this).closest(selector.title), |
|||
$activeContent = $activeTitle.next($content), |
|||
isAnimating = $activeContent.hasClass(className.animating), |
|||
isActive = $activeContent.hasClass(className.active), |
|||
isOpen = (isActive || isAnimating) |
|||
; |
|||
if(isOpen) { |
|||
module.debug('Accordion already open, skipping', $activeContent); |
|||
return; |
|||
} |
|||
module.debug('Opening accordion content', $activeTitle); |
|||
settings.onOpening.call($activeContent); |
|||
settings.onChanging.call($activeContent); |
|||
if(settings.exclusive) { |
|||
module.closeOthers.call($activeTitle); |
|||
} |
|||
$activeTitle |
|||
.addClass(className.active) |
|||
; |
|||
$activeContent |
|||
.stop(true, true) |
|||
.addClass(className.animating) |
|||
; |
|||
if(settings.animateChildren) { |
|||
if($.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$activeContent |
|||
.children() |
|||
.transition({ |
|||
animation : 'fade in', |
|||
queue : false, |
|||
useFailSafe : true, |
|||
debug : settings.debug, |
|||
verbose : settings.verbose, |
|||
duration : settings.duration |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$activeContent |
|||
.children() |
|||
.stop(true, true) |
|||
.animate({ |
|||
opacity: 1 |
|||
}, settings.duration, module.resetOpacity) |
|||
; |
|||
} |
|||
} |
|||
$activeContent |
|||
.slideDown(settings.duration, settings.easing, function() { |
|||
$activeContent |
|||
.removeClass(className.animating) |
|||
.addClass(className.active) |
|||
; |
|||
module.reset.display.call(this); |
|||
settings.onOpen.call(this); |
|||
settings.onChange.call(this); |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
close: function(query) { |
|||
var |
|||
$activeTitle = (query !== undefined) |
|||
? (typeof query === 'number') |
|||
? $title.eq(query) |
|||
: $(query).closest(selector.title) |
|||
: $(this).closest(selector.title), |
|||
$activeContent = $activeTitle.next($content), |
|||
isAnimating = $activeContent.hasClass(className.animating), |
|||
isActive = $activeContent.hasClass(className.active), |
|||
isOpening = (!isActive && isAnimating), |
|||
isClosing = (isActive && isAnimating) |
|||
; |
|||
if((isActive || isOpening) && !isClosing) { |
|||
module.debug('Closing accordion content', $activeContent); |
|||
settings.onClosing.call($activeContent); |
|||
settings.onChanging.call($activeContent); |
|||
$activeTitle |
|||
.removeClass(className.active) |
|||
; |
|||
$activeContent |
|||
.stop(true, true) |
|||
.addClass(className.animating) |
|||
; |
|||
if(settings.animateChildren) { |
|||
if($.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$activeContent |
|||
.children() |
|||
.transition({ |
|||
animation : 'fade out', |
|||
queue : false, |
|||
useFailSafe : true, |
|||
debug : settings.debug, |
|||
verbose : settings.verbose, |
|||
duration : settings.duration |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$activeContent |
|||
.children() |
|||
.stop(true, true) |
|||
.animate({ |
|||
opacity: 0 |
|||
}, settings.duration, module.resetOpacity) |
|||
; |
|||
} |
|||
} |
|||
$activeContent |
|||
.slideUp(settings.duration, settings.easing, function() { |
|||
$activeContent |
|||
.removeClass(className.animating) |
|||
.removeClass(className.active) |
|||
; |
|||
module.reset.display.call(this); |
|||
settings.onClose.call(this); |
|||
settings.onChange.call(this); |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
closeOthers: function(index) { |
|||
var |
|||
$activeTitle = (index !== undefined) |
|||
? $title.eq(index) |
|||
: $(this).closest(selector.title), |
|||
$parentTitles = $activeTitle.parents(selector.content).prev(selector.title), |
|||
$activeAccordion = $activeTitle.closest(selector.accordion), |
|||
activeSelector = selector.title + '.' + className.active + ':visible', |
|||
activeContent = selector.content + '.' + className.active + ':visible', |
|||
$openTitles, |
|||
$nestedTitles, |
|||
$openContents |
|||
; |
|||
if(settings.closeNested) { |
|||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles); |
|||
$openContents = $openTitles.next($content); |
|||
} |
|||
else { |
|||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles); |
|||
$nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); |
|||
$openTitles = $openTitles.not($nestedTitles); |
|||
$openContents = $openTitles.next($content); |
|||
} |
|||
if( ($openTitles.length > 0) ) { |
|||
module.debug('Exclusive enabled, closing other content', $openTitles); |
|||
$openTitles |
|||
.removeClass(className.active) |
|||
; |
|||
$openContents |
|||
.removeClass(className.animating) |
|||
.stop(true, true) |
|||
; |
|||
if(settings.animateChildren) { |
|||
if($.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$openContents |
|||
.children() |
|||
.transition({ |
|||
animation : 'fade out', |
|||
useFailSafe : true, |
|||
debug : settings.debug, |
|||
verbose : settings.verbose, |
|||
duration : settings.duration |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$openContents |
|||
.children() |
|||
.stop(true, true) |
|||
.animate({ |
|||
opacity: 0 |
|||
}, settings.duration, module.resetOpacity) |
|||
; |
|||
} |
|||
} |
|||
$openContents |
|||
.slideUp(settings.duration , settings.easing, function() { |
|||
$(this).removeClass(className.active); |
|||
module.reset.display.call(this); |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
reset: { |
|||
|
|||
display: function() { |
|||
module.verbose('Removing inline display from element', this); |
|||
$(this).css('display', ''); |
|||
if( $(this).attr('style') === '') { |
|||
$(this) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
opacity: function() { |
|||
module.verbose('Removing inline opacity from element', this); |
|||
$(this).css('opacity', ''); |
|||
if( $(this).attr('style') === '') { |
|||
$(this) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
if($.isPlainObject(settings[name])) { |
|||
$.extend(true, settings[name], value); |
|||
} |
|||
else { |
|||
settings[name] = value; |
|||
} |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
module.debug('Changing internal', name, value); |
|||
if(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
module[name] = value; |
|||
} |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(!settings.silent && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(!settings.silent && settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
if(!settings.silent) { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
} |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 500); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
instance.invoke('destroy'); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.accordion.settings = { |
|||
|
|||
name : 'Accordion', |
|||
namespace : 'accordion', |
|||
|
|||
silent : false, |
|||
debug : false, |
|||
verbose : false, |
|||
performance : true, |
|||
|
|||
on : 'click', // event on title that opens accordion
|
|||
|
|||
observeChanges : true, // whether accordion should automatically refresh on DOM insertion
|
|||
|
|||
exclusive : true, // whether a single accordion content panel should be open at once
|
|||
collapsible : true, // whether accordion content can be closed
|
|||
closeNested : false, // whether nested content should be closed when a panel is closed
|
|||
animateChildren : true, // whether children opacity should be animated
|
|||
|
|||
duration : 350, // duration of animation
|
|||
easing : 'easeOutQuad', // easing equation for animation
|
|||
|
|||
onOpening : function(){}, // callback before open animation
|
|||
onClosing : function(){}, // callback before closing animation
|
|||
onChanging : function(){}, // callback before closing or opening animation
|
|||
|
|||
onOpen : function(){}, // callback after open animation
|
|||
onClose : function(){}, // callback after closing animation
|
|||
onChange : function(){}, // callback after closing or opening animation
|
|||
|
|||
error: { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
animating : 'animating' |
|||
}, |
|||
|
|||
selector : { |
|||
accordion : '.accordion', |
|||
title : '.title', |
|||
trigger : '.title', |
|||
content : '.content' |
|||
} |
|||
|
|||
}; |
|||
|
|||
// Adds easing
|
|||
$.extend( $.easing, { |
|||
easeOutQuad: function (x, t, b, c, d) { |
|||
return -c *(t/=d)*(t-2) + b; |
|||
} |
|||
}); |
|||
|
|||
})( jQuery, window, document ); |
|||
|
|||
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,274 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Ad |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Advertisement |
|||
*******************************/ |
|||
|
|||
.ui.ad { |
|||
display: block; |
|||
overflow: hidden; |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.ad:first-child { |
|||
margin: 0em; |
|||
} |
|||
.ui.ad:last-child { |
|||
margin: 0em; |
|||
} |
|||
.ui.ad iframe { |
|||
margin: 0em; |
|||
padding: 0em; |
|||
border: none; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Common |
|||
---------------*/ |
|||
|
|||
|
|||
/* Leaderboard */ |
|||
.ui.leaderboard.ad { |
|||
width: 728px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/* Medium Rectangle */ |
|||
.ui[class*="medium rectangle"].ad { |
|||
width: 300px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/* Large Rectangle */ |
|||
.ui[class*="large rectangle"].ad { |
|||
width: 336px; |
|||
height: 280px; |
|||
} |
|||
|
|||
/* Half Page */ |
|||
.ui[class*="half page"].ad { |
|||
width: 300px; |
|||
height: 600px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Square |
|||
---------------*/ |
|||
|
|||
|
|||
/* Square */ |
|||
.ui.square.ad { |
|||
width: 250px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/* Small Square */ |
|||
.ui[class*="small square"].ad { |
|||
width: 200px; |
|||
height: 200px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Rectangle |
|||
---------------*/ |
|||
|
|||
|
|||
/* Small Rectangle */ |
|||
.ui[class*="small rectangle"].ad { |
|||
width: 180px; |
|||
height: 150px; |
|||
} |
|||
|
|||
/* Vertical Rectangle */ |
|||
.ui[class*="vertical rectangle"].ad { |
|||
width: 240px; |
|||
height: 400px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Button |
|||
---------------*/ |
|||
|
|||
.ui.button.ad { |
|||
width: 120px; |
|||
height: 90px; |
|||
} |
|||
.ui[class*="square button"].ad { |
|||
width: 125px; |
|||
height: 125px; |
|||
} |
|||
.ui[class*="small button"].ad { |
|||
width: 120px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Skyscrapers |
|||
---------------*/ |
|||
|
|||
|
|||
/* Skyscraper */ |
|||
.ui.skyscraper.ad { |
|||
width: 120px; |
|||
height: 600px; |
|||
} |
|||
|
|||
/* Wide Skyscraper */ |
|||
.ui[class*="wide skyscraper"].ad { |
|||
width: 160px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Banners |
|||
---------------*/ |
|||
|
|||
|
|||
/* Banner */ |
|||
.ui.banner.ad { |
|||
width: 468px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/* Vertical Banner */ |
|||
.ui[class*="vertical banner"].ad { |
|||
width: 120px; |
|||
height: 240px; |
|||
} |
|||
|
|||
/* Top Banner */ |
|||
.ui[class*="top banner"].ad { |
|||
width: 930px; |
|||
height: 180px; |
|||
} |
|||
|
|||
/* Half Banner */ |
|||
.ui[class*="half banner"].ad { |
|||
width: 234px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Boards |
|||
---------------*/ |
|||
|
|||
|
|||
/* Leaderboard */ |
|||
.ui[class*="large leaderboard"].ad { |
|||
width: 970px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/* Billboard */ |
|||
.ui.billboard.ad { |
|||
width: 970px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Panorama |
|||
---------------*/ |
|||
|
|||
|
|||
/* Panorama */ |
|||
.ui.panorama.ad { |
|||
width: 980px; |
|||
height: 120px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Netboard |
|||
---------------*/ |
|||
|
|||
|
|||
/* Netboard */ |
|||
.ui.netboard.ad { |
|||
width: 580px; |
|||
height: 400px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Mobile |
|||
---------------*/ |
|||
|
|||
|
|||
/* Large Mobile Banner */ |
|||
.ui[class*="large mobile banner"].ad { |
|||
width: 320px; |
|||
height: 100px; |
|||
} |
|||
|
|||
/* Mobile Leaderboard */ |
|||
.ui[class*="mobile leaderboard"].ad { |
|||
width: 320px; |
|||
height: 50px; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/* Mobile Sizes */ |
|||
.ui.mobile.ad { |
|||
display: none; |
|||
} |
|||
@media only screen and (max-width: 767px) { |
|||
.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: #FFFFFF; |
|||
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 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Ad |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://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:767px){.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
File diff suppressed because one or more lines are too long
@ -0,0 +1,124 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Breadcrumb |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Breadcrumb |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb { |
|||
line-height: 1; |
|||
display: inline-block; |
|||
margin: 0em 0em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.breadcrumb:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.breadcrumb:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
|
|||
/* Divider */ |
|||
.ui.breadcrumb .divider { |
|||
display: inline-block; |
|||
opacity: 0.7; |
|||
margin: 0em 0.21428571rem 0em; |
|||
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: 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/* Loose Coupling */ |
|||
.ui.breadcrumb.segment { |
|||
display: inline-block; |
|||
padding: 0.78571429em 1em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .active.section { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.mini.breadcrumb { |
|||
font-size: 0.78571429rem; |
|||
} |
|||
.ui.tiny.breadcrumb { |
|||
font-size: 0.85714286rem; |
|||
} |
|||
.ui.small.breadcrumb { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
.ui.breadcrumb { |
|||
font-size: 1rem; |
|||
} |
|||
.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 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Breadcrumb |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/.ui.breadcrumb{line-height:1;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 0;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.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.78571429rem}.ui.tiny.breadcrumb{font-size:.85714286rem}.ui.small.breadcrumb{font-size:.92857143rem}.ui.breadcrumb{font-size:1rem}.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
File diff suppressed because one or more lines are too long
@ -0,0 +1,937 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Item |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Card |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card, |
|||
.ui.card { |
|||
max-width: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 290px; |
|||
min-height: 0px; |
|||
background: #FFFFFF; |
|||
padding: 0em; |
|||
border: none; |
|||
border-radius: 0.28571429rem; |
|||
box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; |
|||
transition: box-shadow 0.1s ease, transform 0.1s ease; |
|||
z-index: ''; |
|||
} |
|||
.ui.card { |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.cards > .card a, |
|||
.ui.card a { |
|||
cursor: pointer; |
|||
} |
|||
.ui.card:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.card:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Cards |
|||
---------------*/ |
|||
|
|||
.ui.cards { |
|||
display: flex; |
|||
margin: -0.875em -0.5em; |
|||
flex-wrap: wrap; |
|||
} |
|||
.ui.cards > .card { |
|||
display: flex; |
|||
margin: 0.875em 0.5em; |
|||
float: none; |
|||
} |
|||
|
|||
/* Clearing */ |
|||
.ui.cards:after, |
|||
.ui.card:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/* Consecutive Card Groups Preserve Row Spacing */ |
|||
.ui.cards ~ .ui.cards { |
|||
margin-top: 0.875em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Rounded Edges |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > :first-child, |
|||
.ui.card > :first-child { |
|||
border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; |
|||
border-top: none !important; |
|||
} |
|||
.ui.cards > .card > :last-child, |
|||
.ui.card > :last-child { |
|||
border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; |
|||
} |
|||
.ui.cards > .card > :only-child, |
|||
.ui.card > :only-child { |
|||
border-radius: 0.28571429rem !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > .image, |
|||
.ui.card > .image { |
|||
position: relative; |
|||
display: block; |
|||
flex: 0 0 auto; |
|||
padding: 0em; |
|||
background: rgba(0, 0, 0, 0.05); |
|||
} |
|||
.ui.cards > .card > .image > img, |
|||
.ui.card > .image > img { |
|||
display: block; |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: inherit; |
|||
} |
|||
.ui.cards > .card > .image:not(.ui) > img, |
|||
.ui.card > .image:not(.ui) > img { |
|||
border: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > .content, |
|||
.ui.card > .content { |
|||
flex-grow: 1; |
|||
border: none; |
|||
border-top: 1px solid rgba(34, 36, 38, 0.1); |
|||
background: none; |
|||
margin: 0em; |
|||
padding: 1em 1em; |
|||
box-shadow: none; |
|||
font-size: 1em; |
|||
border-radius: 0em; |
|||
} |
|||
.ui.cards > .card > .content:after, |
|||
.ui.card > .content:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
.ui.cards > .card > .content > .header, |
|||
.ui.card > .content > .header { |
|||
display: block; |
|||
margin: ''; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
|
|||
/* Default Header Size */ |
|||
.ui.cards > .card > .content > .header:not(.ui), |
|||
.ui.card > .content > .header:not(.ui) { |
|||
font-weight: bold; |
|||
font-size: 1.28571429em; |
|||
margin-top: -0.21425em; |
|||
line-height: 1.28571429em; |
|||
} |
|||
.ui.cards > .card > .content > .meta + .description, |
|||
.ui.cards > .card > .content > .header + .description, |
|||
.ui.card > .content > .meta + .description, |
|||
.ui.card > .content > .header + .description { |
|||
margin-top: 0.5em; |
|||
} |
|||
|
|||
/*---------------- |
|||
Floated Content |
|||
-----------------*/ |
|||
|
|||
.ui.cards > .card [class*="left floated"], |
|||
.ui.card [class*="left floated"] { |
|||
float: left; |
|||
} |
|||
.ui.cards > .card [class*="right floated"], |
|||
.ui.card [class*="right floated"] { |
|||
float: right; |
|||
} |
|||
|
|||
/*-------------- |
|||
Aligned |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card [class*="left aligned"], |
|||
.ui.card [class*="left aligned"] { |
|||
text-align: left; |
|||
} |
|||
.ui.cards > .card [class*="center aligned"], |
|||
.ui.card [class*="center aligned"] { |
|||
text-align: center; |
|||
} |
|||
.ui.cards > .card [class*="right aligned"], |
|||
.ui.card [class*="right aligned"] { |
|||
text-align: right; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content Image |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card .content img, |
|||
.ui.card .content img { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: ''; |
|||
} |
|||
.ui.cards > .card img.avatar, |
|||
.ui.cards > .card .avatar img, |
|||
.ui.card img.avatar, |
|||
.ui.card .avatar img { |
|||
width: 2em; |
|||
height: 2em; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Description |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > .content > .description, |
|||
.ui.card > .content > .description { |
|||
clear: both; |
|||
color: rgba(0, 0, 0, 0.68); |
|||
} |
|||
|
|||
/*-------------- |
|||
Paragraph |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > .content p, |
|||
.ui.card > .content p { |
|||
margin: 0em 0em 0.5em; |
|||
} |
|||
.ui.cards > .card > .content p:last-child, |
|||
.ui.card > .content p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card .meta, |
|||
.ui.card .meta { |
|||
font-size: 1em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.cards > .card .meta *, |
|||
.ui.card .meta * { |
|||
margin-right: 0.3em; |
|||
} |
|||
.ui.cards > .card .meta :last-child, |
|||
.ui.card .meta :last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.cards > .card .meta [class*="right floated"], |
|||
.ui.card .meta [class*="right floated"] { |
|||
margin-right: 0em; |
|||
margin-left: 0.3em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Links |
|||
---------------*/ |
|||
|
|||
|
|||
/* Generic */ |
|||
.ui.cards > .card > .content a:not(.ui), |
|||
.ui.card > .content a:not(.ui) { |
|||
color: ''; |
|||
transition: color 0.1s ease; |
|||
} |
|||
.ui.cards > .card > .content a:not(.ui):hover, |
|||
.ui.card > .content a:not(.ui):hover { |
|||
color: ''; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.cards > .card > .content > a.header, |
|||
.ui.card > .content > a.header { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
.ui.cards > .card > .content > a.header:hover, |
|||
.ui.card > .content > a.header:hover { |
|||
color: #1e70bf; |
|||
} |
|||
|
|||
/* Meta */ |
|||
.ui.cards > .card .meta > a:not(.ui), |
|||
.ui.card .meta > a:not(.ui) { |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.cards > .card .meta > a:not(.ui):hover, |
|||
.ui.card .meta > a:not(.ui):hover { |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/*-------------- |
|||
Buttons |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card > .buttons, |
|||
.ui.card > .buttons, |
|||
.ui.cards > .card > .button, |
|||
.ui.card > .button { |
|||
margin: 0px -1px; |
|||
width: calc(100% + 2px ); |
|||
} |
|||
|
|||
/*-------------- |
|||
Dimmer |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card .dimmer, |
|||
.ui.card .dimmer { |
|||
background-color: ''; |
|||
z-index: 10; |
|||
} |
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
|
|||
/*-----Star----- */ |
|||
|
|||
|
|||
/* Icon */ |
|||
.ui.cards > .card > .content .star.icon, |
|||
.ui.card > .content .star.icon { |
|||
cursor: pointer; |
|||
opacity: 0.75; |
|||
transition: color 0.1s ease; |
|||
} |
|||
.ui.cards > .card > .content .star.icon:hover, |
|||
.ui.card > .content .star.icon:hover { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
.ui.cards > .card > .content .active.star.icon, |
|||
.ui.card > .content .active.star.icon { |
|||
color: #FFE623; |
|||
} |
|||
|
|||
/*-----Like----- */ |
|||
|
|||
|
|||
/* Icon */ |
|||
.ui.cards > .card > .content .like.icon, |
|||
.ui.card > .content .like.icon { |
|||
cursor: pointer; |
|||
opacity: 0.75; |
|||
transition: color 0.1s ease; |
|||
} |
|||
.ui.cards > .card > .content .like.icon:hover, |
|||
.ui.card > .content .like.icon:hover { |
|||
opacity: 1; |
|||
color: #FF2733; |
|||
} |
|||
.ui.cards > .card > .content .active.like.icon, |
|||
.ui.card > .content .active.like.icon { |
|||
color: #FF2733; |
|||
} |
|||
|
|||
/*---------------- |
|||
Extra Content |
|||
-----------------*/ |
|||
|
|||
.ui.cards > .card > .extra, |
|||
.ui.card > .extra { |
|||
max-width: 100%; |
|||
min-height: 0em !important; |
|||
flex-grow: 0; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important; |
|||
position: static; |
|||
background: none; |
|||
width: auto; |
|||
margin: 0em 0em; |
|||
padding: 0.75em 1em; |
|||
top: 0em; |
|||
left: 0em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
box-shadow: none; |
|||
transition: color 0.1s ease; |
|||
} |
|||
.ui.cards > .card > .extra a:not(.ui), |
|||
.ui.card > .extra a:not(.ui) { |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.cards > .card > .extra a:not(.ui):hover, |
|||
.ui.card > .extra a:not(.ui):hover { |
|||
color: #1e70bf; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Raised |
|||
--------------------*/ |
|||
|
|||
.ui.raised.cards > .card, |
|||
.ui.raised.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); |
|||
} |
|||
.ui.raised.cards a.card:hover, |
|||
.ui.link.cards .raised.card:hover, |
|||
a.ui.raised.card:hover, |
|||
.ui.link.raised.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); |
|||
} |
|||
.ui.raised.cards > .card, |
|||
.ui.raised.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); |
|||
} |
|||
|
|||
/*------------------- |
|||
Centered |
|||
--------------------*/ |
|||
|
|||
.ui.centered.cards { |
|||
justify-content: center; |
|||
} |
|||
.ui.centered.card { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fluid |
|||
--------------------*/ |
|||
|
|||
.ui.fluid.card { |
|||
width: 100%; |
|||
max-width: 9999px; |
|||
} |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.cards a.card, |
|||
.ui.link.cards .card, |
|||
a.ui.card, |
|||
.ui.link.card { |
|||
transform: none; |
|||
} |
|||
.ui.cards a.card:hover, |
|||
.ui.link.cards .card:hover, |
|||
a.ui.card:hover, |
|||
.ui.link.card:hover { |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
background: #FFFFFF; |
|||
border: none; |
|||
box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; |
|||
transform: translateY(-3px); |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
|
|||
/* Red */ |
|||
.ui.red.cards > .card, |
|||
.ui.cards > .red.card, |
|||
.ui.red.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.red.cards > .card:hover, |
|||
.ui.cards > .red.card:hover, |
|||
.ui.red.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Orange */ |
|||
.ui.orange.cards > .card, |
|||
.ui.cards > .orange.card, |
|||
.ui.orange.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.orange.cards > .card:hover, |
|||
.ui.cards > .orange.card:hover, |
|||
.ui.orange.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Yellow */ |
|||
.ui.yellow.cards > .card, |
|||
.ui.cards > .yellow.card, |
|||
.ui.yellow.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.yellow.cards > .card:hover, |
|||
.ui.cards > .yellow.card:hover, |
|||
.ui.yellow.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Olive */ |
|||
.ui.olive.cards > .card, |
|||
.ui.cards > .olive.card, |
|||
.ui.olive.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.olive.cards > .card:hover, |
|||
.ui.cards > .olive.card:hover, |
|||
.ui.olive.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Green */ |
|||
.ui.green.cards > .card, |
|||
.ui.cards > .green.card, |
|||
.ui.green.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.green.cards > .card:hover, |
|||
.ui.cards > .green.card:hover, |
|||
.ui.green.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Teal */ |
|||
.ui.teal.cards > .card, |
|||
.ui.cards > .teal.card, |
|||
.ui.teal.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.teal.cards > .card:hover, |
|||
.ui.cards > .teal.card:hover, |
|||
.ui.teal.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Blue */ |
|||
.ui.blue.cards > .card, |
|||
.ui.cards > .blue.card, |
|||
.ui.blue.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.blue.cards > .card:hover, |
|||
.ui.cards > .blue.card:hover, |
|||
.ui.blue.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Violet */ |
|||
.ui.violet.cards > .card, |
|||
.ui.cards > .violet.card, |
|||
.ui.violet.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.violet.cards > .card:hover, |
|||
.ui.cards > .violet.card:hover, |
|||
.ui.violet.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Purple */ |
|||
.ui.purple.cards > .card, |
|||
.ui.cards > .purple.card, |
|||
.ui.purple.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.purple.cards > .card:hover, |
|||
.ui.cards > .purple.card:hover, |
|||
.ui.purple.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Pink */ |
|||
.ui.pink.cards > .card, |
|||
.ui.cards > .pink.card, |
|||
.ui.pink.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.pink.cards > .card:hover, |
|||
.ui.cards > .pink.card:hover, |
|||
.ui.pink.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Brown */ |
|||
.ui.brown.cards > .card, |
|||
.ui.cards > .brown.card, |
|||
.ui.brown.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.brown.cards > .card:hover, |
|||
.ui.cards > .brown.card:hover, |
|||
.ui.brown.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Grey */ |
|||
.ui.grey.cards > .card, |
|||
.ui.cards > .grey.card, |
|||
.ui.grey.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.grey.cards > .card:hover, |
|||
.ui.cards > .grey.card:hover, |
|||
.ui.grey.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/* Black */ |
|||
.ui.black.cards > .card, |
|||
.ui.cards > .black.card, |
|||
.ui.black.card { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; |
|||
} |
|||
.ui.black.cards > .card:hover, |
|||
.ui.cards > .black.card:hover, |
|||
.ui.black.card:hover { |
|||
box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; |
|||
} |
|||
|
|||
/*-------------- |
|||
Card Count |
|||
---------------*/ |
|||
|
|||
.ui.one.cards { |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
} |
|||
.ui.one.cards > .card { |
|||
width: 100%; |
|||
} |
|||
.ui.two.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.two.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.three.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.three.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.four.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.four.cards > .card { |
|||
width: calc( 25% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.five.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.five.cards > .card { |
|||
width: calc( 20% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.six.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.six.cards > .card { |
|||
width: calc( 16.66666667% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.seven.cards { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.seven.cards > .card { |
|||
width: calc( 14.28571429% - 1em ); |
|||
margin-left: 0.5em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui.eight.cards { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.eight.cards > .card { |
|||
width: calc( 12.5% - 1em ); |
|||
margin-left: 0.5em; |
|||
margin-right: 0.5em; |
|||
font-size: 11px; |
|||
} |
|||
.ui.nine.cards { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.nine.cards > .card { |
|||
width: calc( 11.11111111% - 1em ); |
|||
margin-left: 0.5em; |
|||
margin-right: 0.5em; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.cards { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.ten.cards > .card { |
|||
width: calc( 10% - 1em ); |
|||
margin-left: 0.5em; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Doubling |
|||
--------------------*/ |
|||
|
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.two.doubling.cards { |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
} |
|||
.ui.two.doubling.cards > .card { |
|||
width: 100%; |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
} |
|||
.ui.three.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.three.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.four.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.four.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.five.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.five.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.six.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.six.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.seven.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.seven.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.eight.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.eight.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.nine.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.nine.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.ten.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.ten.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
} |
|||
|
|||
/* Tablet Only */ |
|||
@media only screen and (min-width: 768px) and (max-width: 991px) { |
|||
.ui.two.doubling.cards { |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
} |
|||
.ui.two.doubling.cards > .card { |
|||
width: 100%; |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
} |
|||
.ui.three.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.three.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.four.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.four.doubling.cards > .card { |
|||
width: calc( 50% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.five.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.five.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.six.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.six.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.eight.doubling.cards { |
|||
margin-left: -1em; |
|||
margin-right: -1em; |
|||
} |
|||
.ui.eight.doubling.cards > .card { |
|||
width: calc( 33.33333333% - 2em ); |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.eight.doubling.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.eight.doubling.cards > .card { |
|||
width: calc( 25% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.nine.doubling.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.nine.doubling.cards > .card { |
|||
width: calc( 25% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
.ui.ten.doubling.cards { |
|||
margin-left: -0.75em; |
|||
margin-right: -0.75em; |
|||
} |
|||
.ui.ten.doubling.cards > .card { |
|||
width: calc( 20% - 1.5em ); |
|||
margin-left: 0.75em; |
|||
margin-right: 0.75em; |
|||
} |
|||
} |
|||
|
|||
/*------------------- |
|||
Stackable |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width: 767px) { |
|||
.ui.stackable.cards { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.cards .card:first-child { |
|||
margin-top: 0em !important; |
|||
} |
|||
.ui.stackable.cards > .card { |
|||
display: block !important; |
|||
height: auto !important; |
|||
margin: 1em 1em; |
|||
padding: 0 !important; |
|||
width: calc( 100% - 2em ) !important; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.cards > .card { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
|
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,608 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Checkbox |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://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: 1rem; |
|||
line-height: 17px; |
|||
min-width: 17px; |
|||
} |
|||
|
|||
/* HTML Checkbox */ |
|||
.ui.checkbox input[type="checkbox"], |
|||
.ui.checkbox input[type="radio"] { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
opacity: 0 !important; |
|||
outline: none; |
|||
z-index: 3; |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Box |
|||
---------------*/ |
|||
|
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
cursor: auto; |
|||
position: relative; |
|||
display: block; |
|||
padding-left: 1.85714em; |
|||
outline: none; |
|||
font-size: 1em; |
|||
} |
|||
.ui.checkbox .box:before, |
|||
.ui.checkbox label:before { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 17px; |
|||
height: 17px; |
|||
content: ''; |
|||
background: #FFFFFF; |
|||
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 .box:after, |
|||
.ui.checkbox label:after { |
|||
position: absolute; |
|||
font-size: 14px; |
|||
top: 0px; |
|||
left: 0px; |
|||
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; |
|||
} |
|||
|
|||
/*-------------- |
|||
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 .box:hover::before, |
|||
.ui.checkbox label:hover::before { |
|||
background: #FFFFFF; |
|||
border-color: rgba(34, 36, 38, 0.35); |
|||
} |
|||
.ui.checkbox label:hover, |
|||
.ui.checkbox + label:hover { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/*-------------- |
|||
Down |
|||
---------------*/ |
|||
|
|||
.ui.checkbox .box:active::before, |
|||
.ui.checkbox label:active::before { |
|||
background: #F9FAFB; |
|||
border-color: rgba(34, 36, 38, 0.35); |
|||
} |
|||
.ui.checkbox .box:active::after, |
|||
.ui.checkbox label:active::after { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
.ui.checkbox input:active ~ label { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/*-------------- |
|||
Focus |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:focus ~ .box:before, |
|||
.ui.checkbox input:focus ~ label:before { |
|||
background: #FFFFFF; |
|||
border-color: #96C8DA; |
|||
} |
|||
.ui.checkbox input:focus ~ .box:after, |
|||
.ui.checkbox input:focus ~ label:after { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
.ui.checkbox input:focus ~ label { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:checked ~ .box:before, |
|||
.ui.checkbox input:checked ~ label:before { |
|||
background: #FFFFFF; |
|||
border-color: rgba(34, 36, 38, 0.35); |
|||
} |
|||
.ui.checkbox input:checked ~ .box:after, |
|||
.ui.checkbox input:checked ~ label:after { |
|||
opacity: 1; |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/*-------------- |
|||
Indeterminate |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, |
|||
.ui.checkbox input:not([type=radio]):indeterminate ~ label:before { |
|||
background: #FFFFFF; |
|||
border-color: rgba(34, 36, 38, 0.35); |
|||
} |
|||
.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, |
|||
.ui.checkbox input:not([type=radio]):indeterminate ~ label:after { |
|||
opacity: 1; |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/*-------------- |
|||
Active Focus |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, |
|||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, |
|||
.ui.checkbox input:checked:focus ~ .box:before, |
|||
.ui.checkbox input:checked:focus ~ label:before { |
|||
background: #FFFFFF; |
|||
border-color: #96C8DA; |
|||
} |
|||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, |
|||
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, |
|||
.ui.checkbox input:checked:focus ~ .box:after, |
|||
.ui.checkbox input:checked:focus ~ label:after { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/*-------------- |
|||
Read-Only |
|||
---------------*/ |
|||
|
|||
.ui.read-only.checkbox, |
|||
.ui.read-only.checkbox label { |
|||
cursor: default; |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.disabled.checkbox .box:after, |
|||
.ui.disabled.checkbox label, |
|||
.ui.checkbox input[disabled] ~ .box:after, |
|||
.ui.checkbox input[disabled] ~ label { |
|||
cursor: default !important; |
|||
opacity: 0.5; |
|||
color: #000000; |
|||
} |
|||
|
|||
/*-------------- |
|||
Hidden |
|||
---------------*/ |
|||
|
|||
|
|||
/* Initialized checkbox moves input below element |
|||
to prevent manually triggering */ |
|||
.ui.checkbox input.hidden { |
|||
z-index: -1; |
|||
} |
|||
|
|||
/* Selectable Label */ |
|||
.ui.checkbox input.hidden + label { |
|||
cursor: pointer; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Radio |
|||
---------------*/ |
|||
|
|||
.ui.radio.checkbox { |
|||
min-height: 15px; |
|||
} |
|||
.ui.radio.checkbox .box, |
|||
.ui.radio.checkbox label { |
|||
padding-left: 1.85714em; |
|||
} |
|||
|
|||
/* Box */ |
|||
.ui.radio.checkbox .box:before, |
|||
.ui.radio.checkbox label:before { |
|||
content: ''; |
|||
transform: none; |
|||
width: 15px; |
|||
height: 15px; |
|||
border-radius: 500rem; |
|||
top: 1px; |
|||
left: 0px; |
|||
} |
|||
|
|||
/* Bullet */ |
|||
.ui.radio.checkbox .box:after, |
|||
.ui.radio.checkbox label:after { |
|||
border: none; |
|||
content: '' !important; |
|||
width: 15px; |
|||
height: 15px; |
|||
line-height: 15px; |
|||
} |
|||
|
|||
/* Radio Checkbox */ |
|||
.ui.radio.checkbox .box:after, |
|||
.ui.radio.checkbox label:after { |
|||
top: 1px; |
|||
left: 0px; |
|||
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 ~ .box:before, |
|||
.ui.radio.checkbox input:focus ~ label:before { |
|||
background-color: #FFFFFF; |
|||
} |
|||
.ui.radio.checkbox input:focus ~ .box:after, |
|||
.ui.radio.checkbox input:focus ~ label:after { |
|||
background-color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/* Indeterminate */ |
|||
.ui.radio.checkbox input:indeterminate ~ .box:after, |
|||
.ui.radio.checkbox input:indeterminate ~ label:after { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.radio.checkbox input:checked ~ .box:before, |
|||
.ui.radio.checkbox input:checked ~ label:before { |
|||
background-color: #FFFFFF; |
|||
} |
|||
.ui.radio.checkbox input:checked ~ .box:after, |
|||
.ui.radio.checkbox input:checked ~ label:after { |
|||
background-color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
/* Active Focus */ |
|||
.ui.radio.checkbox input:focus:checked ~ .box:before, |
|||
.ui.radio.checkbox input:focus:checked ~ label:before { |
|||
background-color: #FFFFFF; |
|||
} |
|||
.ui.radio.checkbox input:focus:checked ~ .box:after, |
|||
.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 .box, |
|||
.ui.slider.checkbox label { |
|||
padding-left: 4.5rem; |
|||
line-height: 1rem; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/* Line */ |
|||
.ui.slider.checkbox .box:before, |
|||
.ui.slider.checkbox label:before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
border: none !important; |
|||
left: 0em; |
|||
z-index: 1; |
|||
top: 0.4rem; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
width: 3.5rem; |
|||
height: 0.21428571rem; |
|||
transform: none; |
|||
border-radius: 500rem; |
|||
transition: background 0.3s ease; |
|||
} |
|||
|
|||
/* Handle */ |
|||
.ui.slider.checkbox .box:after, |
|||
.ui.slider.checkbox label:after { |
|||
background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); |
|||
position: absolute; |
|||
content: '' !important; |
|||
opacity: 1; |
|||
z-index: 2; |
|||
border: none; |
|||
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
top: -0.25rem; |
|||
left: 0em; |
|||
transform: none; |
|||
border-radius: 500rem; |
|||
transition: left 0.3s ease; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.slider.checkbox input:focus ~ .box:before, |
|||
.ui.slider.checkbox input:focus ~ label:before { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
border: none; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.slider.checkbox .box:hover, |
|||
.ui.slider.checkbox label:hover { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.slider.checkbox .box:hover::before, |
|||
.ui.slider.checkbox label:hover::before { |
|||
background: rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.slider.checkbox input:checked ~ .box, |
|||
.ui.slider.checkbox input:checked ~ label { |
|||
color: rgba(0, 0, 0, 0.95) !important; |
|||
} |
|||
.ui.slider.checkbox input:checked ~ .box:before, |
|||
.ui.slider.checkbox input:checked ~ label:before { |
|||
background-color: #545454 !important; |
|||
} |
|||
.ui.slider.checkbox input:checked ~ .box:after, |
|||
.ui.slider.checkbox input:checked ~ label:after { |
|||
left: 2rem; |
|||
} |
|||
|
|||
/* Active Focus */ |
|||
.ui.slider.checkbox input:focus:checked ~ .box, |
|||
.ui.slider.checkbox input:focus:checked ~ label { |
|||
color: rgba(0, 0, 0, 0.95) !important; |
|||
} |
|||
.ui.slider.checkbox input:focus:checked ~ .box:before, |
|||
.ui.slider.checkbox input:focus:checked ~ label:before { |
|||
background-color: #000000 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Toggle |
|||
---------------*/ |
|||
|
|||
.ui.toggle.checkbox { |
|||
min-height: 1.5rem; |
|||
} |
|||
|
|||
/* Input */ |
|||
.ui.toggle.checkbox input { |
|||
width: 3.5rem; |
|||
height: 1.5rem; |
|||
} |
|||
|
|||
/* Label */ |
|||
.ui.toggle.checkbox .box, |
|||
.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 .box:before, |
|||
.ui.toggle.checkbox label:before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
z-index: 1; |
|||
transform: none; |
|||
border: none; |
|||
top: 0rem; |
|||
background: rgba(0, 0, 0, 0.05); |
|||
box-shadow: none; |
|||
width: 3.5rem; |
|||
height: 1.5rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/* Handle */ |
|||
.ui.toggle.checkbox .box:after, |
|||
.ui.toggle.checkbox label:after { |
|||
background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); |
|||
position: absolute; |
|||
content: '' !important; |
|||
opacity: 1; |
|||
z-index: 2; |
|||
border: none; |
|||
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; |
|||
width: 1.5rem; |
|||
height: 1.5rem; |
|||
top: 0rem; |
|||
left: 0em; |
|||
border-radius: 500rem; |
|||
transition: background 0.3s ease, left 0.3s ease; |
|||
} |
|||
.ui.toggle.checkbox input ~ .box:after, |
|||
.ui.toggle.checkbox input ~ label:after { |
|||
left: -0.05rem; |
|||
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.toggle.checkbox input:focus ~ .box:before, |
|||
.ui.toggle.checkbox input:focus ~ label:before { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
border: none; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.toggle.checkbox .box:hover::before, |
|||
.ui.toggle.checkbox label:hover::before { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
border: none; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.toggle.checkbox input:checked ~ .box, |
|||
.ui.toggle.checkbox input:checked ~ label { |
|||
color: rgba(0, 0, 0, 0.95) !important; |
|||
} |
|||
.ui.toggle.checkbox input:checked ~ .box:before, |
|||
.ui.toggle.checkbox input:checked ~ label:before { |
|||
background-color: #2185D0 !important; |
|||
} |
|||
.ui.toggle.checkbox input:checked ~ .box:after, |
|||
.ui.toggle.checkbox input:checked ~ label:after { |
|||
left: 2.15rem; |
|||
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; |
|||
} |
|||
|
|||
/* Active Focus */ |
|||
.ui.toggle.checkbox input:focus:checked ~ .box, |
|||
.ui.toggle.checkbox input:focus:checked ~ label { |
|||
color: rgba(0, 0, 0, 0.95) !important; |
|||
} |
|||
.ui.toggle.checkbox input:focus:checked ~ .box:before, |
|||
.ui.toggle.checkbox input:focus:checked ~ label:before { |
|||
background-color: #0d71bb !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Fitted |
|||
---------------*/ |
|||
|
|||
.ui.fitted.checkbox .box, |
|||
.ui.fitted.checkbox label { |
|||
padding-left: 0em !important; |
|||
} |
|||
.ui.fitted.toggle.checkbox, |
|||
.ui.fitted.toggle.checkbox { |
|||
width: 3.5rem; |
|||
} |
|||
.ui.fitted.slider.checkbox, |
|||
.ui.fitted.slider.checkbox { |
|||
width: 3.5rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
@font-face { |
|||
font-family: 'Checkbox'; |
|||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); |
|||
} |
|||
|
|||
/* Checkmark */ |
|||
.ui.checkbox label:after, |
|||
.ui.checkbox .box:after { |
|||
font-family: 'Checkbox'; |
|||
} |
|||
|
|||
/* Checked */ |
|||
.ui.checkbox input:checked ~ .box:after, |
|||
.ui.checkbox input:checked ~ label:after { |
|||
content: '\e800'; |
|||
} |
|||
|
|||
/* Indeterminate */ |
|||
.ui.checkbox input:indeterminate ~ .box:after, |
|||
.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,831 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Checkbox |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
'use strict'; |
|||
|
|||
window = (typeof window != 'undefined' && window.Math == Math) |
|||
? window |
|||
: (typeof self != 'undefined' && self.Math == Math) |
|||
? self |
|||
: Function('return this')() |
|||
; |
|||
|
|||
$.fn.checkbox = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$label = $(this).children(selector.label), |
|||
$input = $(this).children(selector.input), |
|||
input = $input[0], |
|||
|
|||
initialLoad = false, |
|||
shortcutPressed = false, |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
observer, |
|||
element = this, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing checkbox', settings); |
|||
|
|||
module.create.label(); |
|||
module.bind.events(); |
|||
|
|||
module.set.tabbable(); |
|||
module.hide.input(); |
|||
|
|||
module.observeChanges(); |
|||
module.instantiate(); |
|||
module.setup(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying module'); |
|||
module.unbind.events(); |
|||
module.show.input(); |
|||
$module.removeData(moduleNamespace); |
|||
}, |
|||
|
|||
fix: { |
|||
reference: function() { |
|||
if( $module.is(selector.input) ) { |
|||
module.debug('Behavior called on <input> adjusting invoked element'); |
|||
$module = $module.closest(selector.checkbox); |
|||
module.refresh(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
setup: function() { |
|||
module.set.initialLoad(); |
|||
if( module.is.indeterminate() ) { |
|||
module.debug('Initial value is indeterminate'); |
|||
module.indeterminate(); |
|||
} |
|||
else if( module.is.checked() ) { |
|||
module.debug('Initial value is checked'); |
|||
module.check(); |
|||
} |
|||
else { |
|||
module.debug('Initial value is unchecked'); |
|||
module.uncheck(); |
|||
} |
|||
module.remove.initialLoad(); |
|||
}, |
|||
|
|||
refresh: function() { |
|||
$label = $module.children(selector.label); |
|||
$input = $module.children(selector.input); |
|||
input = $input[0]; |
|||
}, |
|||
|
|||
hide: { |
|||
input: function() { |
|||
module.verbose('Modifying <input> z-index to be unselectable'); |
|||
$input.addClass(className.hidden); |
|||
} |
|||
}, |
|||
show: { |
|||
input: function() { |
|||
module.verbose('Modifying <input> z-index to be selectable'); |
|||
$input.removeClass(className.hidden); |
|||
} |
|||
}, |
|||
|
|||
observeChanges: function() { |
|||
if('MutationObserver' in window) { |
|||
observer = new MutationObserver(function(mutations) { |
|||
module.debug('DOM tree modified, updating selector cache'); |
|||
module.refresh(); |
|||
}); |
|||
observer.observe(element, { |
|||
childList : true, |
|||
subtree : true |
|||
}); |
|||
module.debug('Setting up mutation observer', observer); |
|||
} |
|||
}, |
|||
|
|||
attachEvents: function(selector, event) { |
|||
var |
|||
$element = $(selector) |
|||
; |
|||
event = $.isFunction(module[event]) |
|||
? module[event] |
|||
: module.toggle |
|||
; |
|||
if($element.length > 0) { |
|||
module.debug('Attaching checkbox events to element', selector, event); |
|||
$element |
|||
.on('click' + eventNamespace, event) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.notFound); |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
click: function(event) { |
|||
var |
|||
$target = $(event.target) |
|||
; |
|||
if( $target.is(selector.input) ) { |
|||
module.verbose('Using default check action on initialized checkbox'); |
|||
return; |
|||
} |
|||
if( $target.is(selector.link) ) { |
|||
module.debug('Clicking link inside checkbox, skipping toggle'); |
|||
return; |
|||
} |
|||
module.toggle(); |
|||
$input.focus(); |
|||
event.preventDefault(); |
|||
}, |
|||
keydown: function(event) { |
|||
var |
|||
key = event.which, |
|||
keyCode = { |
|||
enter : 13, |
|||
space : 32, |
|||
escape : 27 |
|||
} |
|||
; |
|||
if(key == keyCode.escape) { |
|||
module.verbose('Escape key pressed blurring field'); |
|||
$input.blur(); |
|||
shortcutPressed = true; |
|||
} |
|||
else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { |
|||
module.verbose('Enter/space key pressed, toggling checkbox'); |
|||
module.toggle(); |
|||
shortcutPressed = true; |
|||
} |
|||
else { |
|||
shortcutPressed = false; |
|||
} |
|||
}, |
|||
keyup: function(event) { |
|||
if(shortcutPressed) { |
|||
event.preventDefault(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
check: function() { |
|||
if( !module.should.allowCheck() ) { |
|||
return; |
|||
} |
|||
module.debug('Checking checkbox', $input); |
|||
module.set.checked(); |
|||
if( !module.should.ignoreCallbacks() ) { |
|||
settings.onChecked.call(input); |
|||
settings.onChange.call(input); |
|||
} |
|||
}, |
|||
|
|||
uncheck: function() { |
|||
if( !module.should.allowUncheck() ) { |
|||
return; |
|||
} |
|||
module.debug('Unchecking checkbox'); |
|||
module.set.unchecked(); |
|||
if( !module.should.ignoreCallbacks() ) { |
|||
settings.onUnchecked.call(input); |
|||
settings.onChange.call(input); |
|||
} |
|||
}, |
|||
|
|||
indeterminate: function() { |
|||
if( module.should.allowIndeterminate() ) { |
|||
module.debug('Checkbox is already indeterminate'); |
|||
return; |
|||
} |
|||
module.debug('Making checkbox indeterminate'); |
|||
module.set.indeterminate(); |
|||
if( !module.should.ignoreCallbacks() ) { |
|||
settings.onIndeterminate.call(input); |
|||
settings.onChange.call(input); |
|||
} |
|||
}, |
|||
|
|||
determinate: function() { |
|||
if( module.should.allowDeterminate() ) { |
|||
module.debug('Checkbox is already determinate'); |
|||
return; |
|||
} |
|||
module.debug('Making checkbox determinate'); |
|||
module.set.determinate(); |
|||
if( !module.should.ignoreCallbacks() ) { |
|||
settings.onDeterminate.call(input); |
|||
settings.onChange.call(input); |
|||
} |
|||
}, |
|||
|
|||
enable: function() { |
|||
if( module.is.enabled() ) { |
|||
module.debug('Checkbox is already enabled'); |
|||
return; |
|||
} |
|||
module.debug('Enabling checkbox'); |
|||
module.set.enabled(); |
|||
settings.onEnable.call(input); |
|||
// preserve legacy callbacks
|
|||
settings.onEnabled.call(input); |
|||
}, |
|||
|
|||
disable: function() { |
|||
if( module.is.disabled() ) { |
|||
module.debug('Checkbox is already disabled'); |
|||
return; |
|||
} |
|||
module.debug('Disabling checkbox'); |
|||
module.set.disabled(); |
|||
settings.onDisable.call(input); |
|||
// preserve legacy callbacks
|
|||
settings.onDisabled.call(input); |
|||
}, |
|||
|
|||
get: { |
|||
radios: function() { |
|||
var |
|||
name = module.get.name() |
|||
; |
|||
return $('input[name="' + name + '"]').closest(selector.checkbox); |
|||
}, |
|||
otherRadios: function() { |
|||
return module.get.radios().not($module); |
|||
}, |
|||
name: function() { |
|||
return $input.attr('name'); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
initialLoad: function() { |
|||
return initialLoad; |
|||
}, |
|||
radio: function() { |
|||
return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); |
|||
}, |
|||
indeterminate: function() { |
|||
return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); |
|||
}, |
|||
checked: function() { |
|||
return $input.prop('checked') !== undefined && $input.prop('checked'); |
|||
}, |
|||
disabled: function() { |
|||
return $input.prop('disabled') !== undefined && $input.prop('disabled'); |
|||
}, |
|||
enabled: function() { |
|||
return !module.is.disabled(); |
|||
}, |
|||
determinate: function() { |
|||
return !module.is.indeterminate(); |
|||
}, |
|||
unchecked: function() { |
|||
return !module.is.checked(); |
|||
} |
|||
}, |
|||
|
|||
should: { |
|||
allowCheck: function() { |
|||
if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { |
|||
module.debug('Should not allow check, checkbox is already checked'); |
|||
return false; |
|||
} |
|||
if(settings.beforeChecked.apply(input) === false) { |
|||
module.debug('Should not allow check, beforeChecked cancelled'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
allowUncheck: function() { |
|||
if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { |
|||
module.debug('Should not allow uncheck, checkbox is already unchecked'); |
|||
return false; |
|||
} |
|||
if(settings.beforeUnchecked.apply(input) === false) { |
|||
module.debug('Should not allow uncheck, beforeUnchecked cancelled'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
allowIndeterminate: function() { |
|||
if(module.is.indeterminate() && !module.should.forceCallbacks() ) { |
|||
module.debug('Should not allow indeterminate, checkbox is already indeterminate'); |
|||
return false; |
|||
} |
|||
if(settings.beforeIndeterminate.apply(input) === false) { |
|||
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
allowDeterminate: function() { |
|||
if(module.is.determinate() && !module.should.forceCallbacks() ) { |
|||
module.debug('Should not allow determinate, checkbox is already determinate'); |
|||
return false; |
|||
} |
|||
if(settings.beforeDeterminate.apply(input) === false) { |
|||
module.debug('Should not allow determinate, beforeDeterminate cancelled'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
forceCallbacks: function() { |
|||
return (module.is.initialLoad() && settings.fireOnInit); |
|||
}, |
|||
ignoreCallbacks: function() { |
|||
return (initialLoad && !settings.fireOnInit); |
|||
} |
|||
}, |
|||
|
|||
can: { |
|||
change: function() { |
|||
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); |
|||
}, |
|||
uncheck: function() { |
|||
return (typeof settings.uncheckable === 'boolean') |
|||
? settings.uncheckable |
|||
: !module.is.radio() |
|||
; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
initialLoad: function() { |
|||
initialLoad = true; |
|||
}, |
|||
checked: function() { |
|||
module.verbose('Setting class to checked'); |
|||
$module |
|||
.removeClass(className.indeterminate) |
|||
.addClass(className.checked) |
|||
; |
|||
if( module.is.radio() ) { |
|||
module.uncheckOthers(); |
|||
} |
|||
if(!module.is.indeterminate() && module.is.checked()) { |
|||
module.debug('Input is already checked, skipping input property change'); |
|||
return; |
|||
} |
|||
module.verbose('Setting state to checked', input); |
|||
$input |
|||
.prop('indeterminate', false) |
|||
.prop('checked', true) |
|||
; |
|||
module.trigger.change(); |
|||
}, |
|||
unchecked: function() { |
|||
module.verbose('Removing checked class'); |
|||
$module |
|||
.removeClass(className.indeterminate) |
|||
.removeClass(className.checked) |
|||
; |
|||
if(!module.is.indeterminate() && module.is.unchecked() ) { |
|||
module.debug('Input is already unchecked'); |
|||
return; |
|||
} |
|||
module.debug('Setting state to unchecked'); |
|||
$input |
|||
.prop('indeterminate', false) |
|||
.prop('checked', false) |
|||
; |
|||
module.trigger.change(); |
|||
}, |
|||
indeterminate: function() { |
|||
module.verbose('Setting class to indeterminate'); |
|||
$module |
|||
.addClass(className.indeterminate) |
|||
; |
|||
if( module.is.indeterminate() ) { |
|||
module.debug('Input is already indeterminate, skipping input property change'); |
|||
return; |
|||
} |
|||
module.debug('Setting state to indeterminate'); |
|||
$input |
|||
.prop('indeterminate', true) |
|||
; |
|||
module.trigger.change(); |
|||
}, |
|||
determinate: function() { |
|||
module.verbose('Removing indeterminate class'); |
|||
$module |
|||
.removeClass(className.indeterminate) |
|||
; |
|||
if( module.is.determinate() ) { |
|||
module.debug('Input is already determinate, skipping input property change'); |
|||
return; |
|||
} |
|||
module.debug('Setting state to determinate'); |
|||
$input |
|||
.prop('indeterminate', false) |
|||
; |
|||
}, |
|||
disabled: function() { |
|||
module.verbose('Setting class to disabled'); |
|||
$module |
|||
.addClass(className.disabled) |
|||
; |
|||
if( module.is.disabled() ) { |
|||
module.debug('Input is already disabled, skipping input property change'); |
|||
return; |
|||
} |
|||
module.debug('Setting state to disabled'); |
|||
$input |
|||
.prop('disabled', 'disabled') |
|||
; |
|||
module.trigger.change(); |
|||
}, |
|||
enabled: function() { |
|||
module.verbose('Removing disabled class'); |
|||
$module.removeClass(className.disabled); |
|||
if( module.is.enabled() ) { |
|||
module.debug('Input is already enabled, skipping input property change'); |
|||
return; |
|||
} |
|||
module.debug('Setting state to enabled'); |
|||
$input |
|||
.prop('disabled', false) |
|||
; |
|||
module.trigger.change(); |
|||
}, |
|||
tabbable: function() { |
|||
module.verbose('Adding tabindex to checkbox'); |
|||
if( $input.attr('tabindex') === undefined) { |
|||
$input.attr('tabindex', 0); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
initialLoad: function() { |
|||
initialLoad = false; |
|||
} |
|||
}, |
|||
|
|||
trigger: { |
|||
change: function() { |
|||
var |
|||
events = document.createEvent('HTMLEvents'), |
|||
inputElement = $input[0] |
|||
; |
|||
if(inputElement) { |
|||
module.verbose('Triggering native change event'); |
|||
events.initEvent('change', true, false); |
|||
inputElement.dispatchEvent(events); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
|
|||
create: { |
|||
label: function() { |
|||
if($input.prevAll(selector.label).length > 0) { |
|||
$input.prev(selector.label).detach().insertAfter($input); |
|||
module.debug('Moving existing label', $label); |
|||
} |
|||
else if( !module.has.label() ) { |
|||
$label = $('<label>').insertAfter($input); |
|||
module.debug('Creating label', $label); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
has: { |
|||
label: function() { |
|||
return ($label.length > 0); |
|||
} |
|||
}, |
|||
|
|||
bind: { |
|||
events: function() { |
|||
module.verbose('Attaching checkbox events'); |
|||
$module |
|||
.on('click' + eventNamespace, module.event.click) |
|||
.on('keydown' + eventNamespace, selector.input, module.event.keydown) |
|||
.on('keyup' + eventNamespace, selector.input, module.event.keyup) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
unbind: { |
|||
events: function() { |
|||
module.debug('Removing events'); |
|||
$module |
|||
.off(eventNamespace) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
uncheckOthers: function() { |
|||
var |
|||
$radios = module.get.otherRadios() |
|||
; |
|||
module.debug('Unchecking other radios', $radios); |
|||
$radios.removeClass(className.checked); |
|||
}, |
|||
|
|||
toggle: function() { |
|||
if( !module.can.change() ) { |
|||
if(!module.is.radio()) { |
|||
module.debug('Checkbox is read-only or disabled, ignoring toggle'); |
|||
} |
|||
return; |
|||
} |
|||
if( module.is.indeterminate() || module.is.unchecked() ) { |
|||
module.debug('Currently unchecked'); |
|||
module.check(); |
|||
} |
|||
else if( module.is.checked() && module.can.uncheck() ) { |
|||
module.debug('Currently checked'); |
|||
module.uncheck(); |
|||
} |
|||
}, |
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
if($.isPlainObject(settings[name])) { |
|||
$.extend(true, settings[name], value); |
|||
} |
|||
else { |
|||
settings[name] = value; |
|||
} |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(!settings.silent && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(!settings.silent && settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
if(!settings.silent) { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
} |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 500); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
instance.invoke('destroy'); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.checkbox.settings = { |
|||
|
|||
name : 'Checkbox', |
|||
namespace : 'checkbox', |
|||
|
|||
silent : false, |
|||
debug : false, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
// delegated event context
|
|||
uncheckable : 'auto', |
|||
fireOnInit : false, |
|||
|
|||
onChange : function(){}, |
|||
|
|||
beforeChecked : function(){}, |
|||
beforeUnchecked : function(){}, |
|||
beforeDeterminate : function(){}, |
|||
beforeIndeterminate : function(){}, |
|||
|
|||
onChecked : function(){}, |
|||
onUnchecked : function(){}, |
|||
|
|||
onDeterminate : function() {}, |
|||
onIndeterminate : function() {}, |
|||
|
|||
onEnable : function(){}, |
|||
onDisable : function(){}, |
|||
|
|||
// preserve misspelled callbacks (will be removed in 3.0)
|
|||
onEnabled : function(){}, |
|||
onDisabled : function(){}, |
|||
|
|||
className : { |
|||
checked : 'checked', |
|||
indeterminate : 'indeterminate', |
|||
disabled : 'disabled', |
|||
hidden : 'hidden', |
|||
radio : 'radio', |
|||
readOnly : 'read-only' |
|||
}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
selector : { |
|||
checkbox : '.ui.checkbox', |
|||
label : 'label, .box', |
|||
input : 'input[type="checkbox"], input[type="radio"]', |
|||
link : 'a[href]' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window, document ); |
|||
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,268 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Comment |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Comments |
|||
---------------*/ |
|||
|
|||
.ui.comments { |
|||
margin: 1.5em 0em; |
|||
max-width: 650px; |
|||
} |
|||
.ui.comments:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.comments:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Comment |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment { |
|||
position: relative; |
|||
background: none; |
|||
margin: 0.5em 0em 0em; |
|||
padding: 0.5em 0em 0em; |
|||
border: none; |
|||
border-top: none; |
|||
line-height: 1.2; |
|||
} |
|||
.ui.comments .comment:first-child { |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Nested Comments |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .comments { |
|||
margin: 0em 0em 0.5em 0.5em; |
|||
padding: 1em 0em 1em 1em; |
|||
} |
|||
.ui.comments .comment .comments:before { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
} |
|||
.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 0em 0em; |
|||
} |
|||
.ui.comments .comment img.avatar, |
|||
.ui.comments .comment .avatar img { |
|||
display: block; |
|||
margin: 0em 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: 0em 0.5em 0em 0em; |
|||
} |
|||
.ui.comments .comment .metadata > :last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Comment Text |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .text { |
|||
margin: 0.25em 0em 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: 0em 0.75em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.comments .comment .actions a:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.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 0em 2em 2.25em; |
|||
box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Minimal |
|||
---------------------*/ |
|||
|
|||
.ui.minimal.comments .comment .actions { |
|||
opacity: 0; |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
left: auto; |
|||
transition: opacity 0.2s ease; |
|||
transition-delay: 0.1s; |
|||
} |
|||
.ui.minimal.comments .comment > .content:hover > .actions { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.mini.comments { |
|||
font-size: 0.78571429rem; |
|||
} |
|||
.ui.tiny.comments { |
|||
font-size: 0.85714286rem; |
|||
} |
|||
.ui.small.comments { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
.ui.comments { |
|||
font-size: 1rem; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Comment |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://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.mini.comments{font-size:.78571429rem}.ui.tiny.comments{font-size:.85714286rem}.ui.small.comments{font-size:.92857143rem}.ui.comments{font-size:1rem}.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} |
|||
@ -0,0 +1,147 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Container |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Container |
|||
*******************************/ |
|||
|
|||
|
|||
/* All Sizes */ |
|||
.ui.container { |
|||
display: block; |
|||
max-width: 100% !important; |
|||
} |
|||
|
|||
/* Mobile */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.container { |
|||
width: auto !important; |
|||
margin-left: 1em !important; |
|||
margin-right: 1em !important; |
|||
} |
|||
.ui.grid.container { |
|||
width: auto !important; |
|||
} |
|||
.ui.relaxed.grid.container { |
|||
width: auto !important; |
|||
} |
|||
.ui.very.relaxed.grid.container { |
|||
width: auto !important; |
|||
} |
|||
} |
|||
|
|||
/* Tablet */ |
|||
@media only screen and (min-width: 768px) and (max-width: 991px) { |
|||
.ui.container { |
|||
width: 723px; |
|||
margin-left: auto !important; |
|||
margin-right: auto !important; |
|||
} |
|||
.ui.grid.container { |
|||
width: calc( 723px + 2rem ) !important; |
|||
} |
|||
.ui.relaxed.grid.container { |
|||
width: calc( 723px + 3rem ) !important; |
|||
} |
|||
.ui.very.relaxed.grid.container { |
|||
width: calc( 723px + 5rem ) !important; |
|||
} |
|||
} |
|||
|
|||
/* Small Monitor */ |
|||
@media only screen and (min-width: 992px) and (max-width: 1199px) { |
|||
.ui.container { |
|||
width: 933px; |
|||
margin-left: auto !important; |
|||
margin-right: auto !important; |
|||
} |
|||
.ui.grid.container { |
|||
width: calc( 933px + 2rem ) !important; |
|||
} |
|||
.ui.relaxed.grid.container { |
|||
width: calc( 933px + 3rem ) !important; |
|||
} |
|||
.ui.very.relaxed.grid.container { |
|||
width: calc( 933px + 5rem ) !important; |
|||
} |
|||
} |
|||
|
|||
/* Large Monitor */ |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.container { |
|||
width: 1127px; |
|||
margin-left: auto !important; |
|||
margin-right: auto !important; |
|||
} |
|||
.ui.grid.container { |
|||
width: calc( 1127px + 2rem ) !important; |
|||
} |
|||
.ui.relaxed.grid.container { |
|||
width: calc( 1127px + 3rem ) !important; |
|||
} |
|||
.ui.very.relaxed.grid.container { |
|||
width: calc( 1127px + 5rem ) !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/* Text Container */ |
|||
.ui.text.container { |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
max-width: 700px !important; |
|||
line-height: 1.5; |
|||
} |
|||
.ui.text.container { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
|
|||
/* 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; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Container |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/.ui.container{display:block;max-width:100%!important}@media only screen and (max-width:767px){.ui.container{width:auto!important;margin-left:1em!important;margin-right:1em!important}.ui.grid.container{width:auto!important}.ui.relaxed.grid.container{width:auto!important}.ui.very.relaxed.grid.container{width:auto!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.container{width:723px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(723px + 2rem)!important}.ui.relaxed.grid.container{width:calc(723px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(723px + 5rem)!important}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.container{width:933px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(933px + 2rem)!important}.ui.relaxed.grid.container{width:calc(933px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(933px + 5rem)!important}}@media only screen and (min-width:1200px){.ui.container{width:1127px;margin-left:auto!important;margin-right:auto!important}.ui.grid.container{width:calc(1127px + 2rem)!important}.ui.relaxed.grid.container{width:calc(1127px + 3rem)!important}.ui.very.relaxed.grid.container{width:calc(1127px + 5rem)!important}}.ui.text.container{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;max-width:700px!important;line-height:1.5}.ui.text.container{font-size:1.14285714rem}.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} |
|||
@ -0,0 +1,235 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Dimmer |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Dimmer |
|||
*******************************/ |
|||
|
|||
.dimmable:not(body) { |
|||
position: relative; |
|||
} |
|||
.ui.dimmer { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
width: 100%; |
|||
height: 100%; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
padding: 1em; |
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
opacity: 0; |
|||
line-height: 1; |
|||
-webkit-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
-webkit-animation-duration: 0.5s; |
|||
animation-duration: 0.5s; |
|||
transition: background-color 0.5s linear; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
-webkit-user-select: none; |
|||
-moz-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; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/* Loose Coupling */ |
|||
.ui.segment > .ui.dimmer { |
|||
border-radius: inherit !important; |
|||
} |
|||
|
|||
/* 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); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
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; |
|||
} |
|||
body.animating.in.dimmable, |
|||
body.dimmed.dimmable { |
|||
overflow: hidden; |
|||
} |
|||
body.dimmable > .dimmer { |
|||
position: fixed; |
|||
} |
|||
|
|||
/*-------------- |
|||
Blurring |
|||
---------------*/ |
|||
|
|||
.blurring.dimmable > :not(.dimmer) { |
|||
-webkit-filter: blur(0px) grayscale(0); |
|||
filter: blur(0px) grayscale(0); |
|||
transition: 800ms -webkit-filter ease; |
|||
transition: 800ms filter ease; |
|||
transition: 800ms filter ease, 800ms -webkit-filter ease; |
|||
} |
|||
.blurring.dimmed.dimmable > :not(.dimmer) { |
|||
-webkit-filter: blur(5px) grayscale(0.7); |
|||
filter: blur(5px) grayscale(0.7); |
|||
} |
|||
|
|||
/* Dimmer Color */ |
|||
.blurring.dimmable > .dimmer { |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.blurring.dimmable > .inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.6); |
|||
} |
|||
|
|||
/*-------------- |
|||
Aligned |
|||
---------------*/ |
|||
|
|||
.ui.dimmer > .top.aligned.content > * { |
|||
vertical-align: top; |
|||
} |
|||
.ui.dimmer > .bottom.aligned.content > * { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
.ui.inverted.dimmer > .content > * { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
|
|||
|
|||
/* Displays without javascript */ |
|||
.ui.simple.dimmer { |
|||
display: block; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
width: 0%; |
|||
height: 0%; |
|||
z-index: -100; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
.dimmed.dimmable > .ui.simple.dimmer { |
|||
overflow: visible; |
|||
opacity: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
z-index: 1; |
|||
} |
|||
.ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.dimmed.dimmable > .ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
User Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,733 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Dimmer |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
'use strict'; |
|||
|
|||
window = (typeof window != 'undefined' && window.Math == Math) |
|||
? window |
|||
: (typeof self != 'undefined' && self.Math == Math) |
|||
? self |
|||
: Function('return this')() |
|||
; |
|||
|
|||
$.fn.dimmer = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.dimmer.settings, parameters) |
|||
: $.extend({}, $.fn.dimmer.settings), |
|||
|
|||
selector = settings.selector, |
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
clickEvent = ('ontouchstart' in document.documentElement) |
|||
? 'touchstart' |
|||
: 'click', |
|||
|
|||
$module = $(this), |
|||
$dimmer, |
|||
$dimmable, |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
preinitialize: function() { |
|||
if( module.is.dimmer() ) { |
|||
|
|||
$dimmable = $module.parent(); |
|||
$dimmer = $module; |
|||
} |
|||
else { |
|||
$dimmable = $module; |
|||
if( module.has.dimmer() ) { |
|||
if(settings.dimmerName) { |
|||
$dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); |
|||
} |
|||
else { |
|||
$dimmer = $dimmable.find(selector.dimmer); |
|||
} |
|||
} |
|||
else { |
|||
$dimmer = module.create(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing dimmer', settings); |
|||
|
|||
module.bind.events(); |
|||
module.set.dimmable(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module', $dimmer); |
|||
module.unbind.events(); |
|||
module.remove.variation(); |
|||
$dimmable |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
bind: { |
|||
events: function() { |
|||
if(settings.on == 'hover') { |
|||
$dimmable |
|||
.on('mouseenter' + eventNamespace, module.show) |
|||
.on('mouseleave' + eventNamespace, module.hide) |
|||
; |
|||
} |
|||
else if(settings.on == 'click') { |
|||
$dimmable |
|||
.on(clickEvent + eventNamespace, module.toggle) |
|||
; |
|||
} |
|||
if( module.is.page() ) { |
|||
module.debug('Setting as a page dimmer', $dimmable); |
|||
module.set.pageDimmer(); |
|||
} |
|||
|
|||
if( module.is.closable() ) { |
|||
module.verbose('Adding dimmer close event', $dimmer); |
|||
$dimmable |
|||
.on(clickEvent + eventNamespace, selector.dimmer, module.event.click) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
unbind: { |
|||
events: function() { |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$dimmable |
|||
.off(eventNamespace) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
click: function(event) { |
|||
module.verbose('Determining if event 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() ) |
|||
; |
|||
if(settings.dimmerName) { |
|||
module.debug('Creating named dimmer', settings.dimmerName); |
|||
$element.addClass(settings.dimmerName); |
|||
} |
|||
$element |
|||
.appendTo($dimmable) |
|||
; |
|||
return $element; |
|||
}, |
|||
|
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.debug('Showing dimmer', $dimmer, settings); |
|||
module.set.variation(); |
|||
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { |
|||
module.animate.show(callback); |
|||
settings.onShow.call(element); |
|||
settings.onChange.call(element); |
|||
} |
|||
else { |
|||
module.debug('Dimmer is already shown or disabled'); |
|||
} |
|||
}, |
|||
|
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( module.is.dimmed() || module.is.animating() ) { |
|||
module.debug('Hiding dimmer', $dimmer); |
|||
module.animate.hide(callback); |
|||
settings.onHide.call(element); |
|||
settings.onChange.call(element); |
|||
} |
|||
else { |
|||
module.debug('Dimmer is not visible'); |
|||
} |
|||
}, |
|||
|
|||
toggle: function() { |
|||
module.verbose('Toggling dimmer visibility', $dimmer); |
|||
if( !module.is.dimmed() ) { |
|||
module.show(); |
|||
} |
|||
else { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
|
|||
animate: { |
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { |
|||
if(settings.useFlex) { |
|||
module.debug('Using flex dimmer'); |
|||
module.remove.legacy(); |
|||
} |
|||
else { |
|||
module.debug('Using legacy non-flex dimmer'); |
|||
module.set.legacy(); |
|||
} |
|||
if(settings.opacity !== 'auto') { |
|||
module.set.opacity(); |
|||
} |
|||
$dimmer |
|||
.transition({ |
|||
displayType : settings.useFlex |
|||
? 'flex' |
|||
: 'block', |
|||
animation : settings.transition + ' in', |
|||
queue : false, |
|||
duration : module.get.duration(), |
|||
useFailSafe : true, |
|||
onStart : function() { |
|||
module.set.dimmed(); |
|||
}, |
|||
onComplete : function() { |
|||
module.set.active(); |
|||
callback(); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.verbose('Showing dimmer animation with javascript'); |
|||
module.set.dimmed(); |
|||
if(settings.opacity == 'auto') { |
|||
settings.opacity = 0.8; |
|||
} |
|||
$dimmer |
|||
.stop() |
|||
.css({ |
|||
opacity : 0, |
|||
width : '100%', |
|||
height : '100%' |
|||
}) |
|||
.fadeTo(module.get.duration(), settings.opacity, function() { |
|||
$dimmer.removeAttr('style'); |
|||
module.set.active(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { |
|||
module.verbose('Hiding dimmer with css'); |
|||
$dimmer |
|||
.transition({ |
|||
displayType : settings.useFlex |
|||
? 'flex' |
|||
: 'block', |
|||
animation : settings.transition + ' out', |
|||
queue : false, |
|||
duration : module.get.duration(), |
|||
useFailSafe : true, |
|||
onStart : function() { |
|||
module.remove.dimmed(); |
|||
}, |
|||
onComplete : function() { |
|||
module.remove.variation(); |
|||
module.remove.active(); |
|||
callback(); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.verbose('Hiding dimmer with javascript'); |
|||
module.remove.dimmed(); |
|||
$dimmer |
|||
.stop() |
|||
.fadeOut(module.get.duration(), function() { |
|||
module.remove.active(); |
|||
$dimmer.removeAttr('style'); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
dimmer: function() { |
|||
return $dimmer; |
|||
}, |
|||
duration: function() { |
|||
if(typeof settings.duration == 'object') { |
|||
if( module.is.active() ) { |
|||
return settings.duration.hide; |
|||
} |
|||
else { |
|||
return settings.duration.show; |
|||
} |
|||
} |
|||
return settings.duration; |
|||
} |
|||
}, |
|||
|
|||
has: { |
|||
dimmer: function() { |
|||
if(settings.dimmerName) { |
|||
return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0); |
|||
} |
|||
else { |
|||
return ( $module.find(selector.dimmer).length > 0 ); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
active: function() { |
|||
return $dimmer.hasClass(className.active); |
|||
}, |
|||
animating: function() { |
|||
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) ); |
|||
}, |
|||
closable: function() { |
|||
if(settings.closable == 'auto') { |
|||
if(settings.on == 'hover') { |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
return settings.closable; |
|||
}, |
|||
dimmer: function() { |
|||
return $module.hasClass(className.dimmer); |
|||
}, |
|||
dimmable: function() { |
|||
return $module.hasClass(className.dimmable); |
|||
}, |
|||
dimmed: function() { |
|||
return $dimmable.hasClass(className.dimmed); |
|||
}, |
|||
disabled: function() { |
|||
return $dimmable.hasClass(className.disabled); |
|||
}, |
|||
enabled: function() { |
|||
return !module.is.disabled(); |
|||
}, |
|||
page: function () { |
|||
return $dimmable.is('body'); |
|||
}, |
|||
pageDimmer: function() { |
|||
return $dimmer.hasClass(className.pageDimmer); |
|||
} |
|||
}, |
|||
|
|||
can: { |
|||
show: function() { |
|||
return !$dimmer.hasClass(className.disabled); |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
opacity: function(opacity) { |
|||
var |
|||
color = $dimmer.css('background-color'), |
|||
colorArray = color.split(','), |
|||
isRGB = (colorArray && colorArray.length == 3), |
|||
isRGBA = (colorArray && colorArray.length == 4) |
|||
; |
|||
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity; |
|||
if(isRGB || isRGBA) { |
|||
colorArray[3] = opacity + ')'; |
|||
color = colorArray.join(','); |
|||
} |
|||
else { |
|||
color = 'rgba(0, 0, 0, ' + opacity + ')'; |
|||
} |
|||
module.debug('Setting opacity to', opacity); |
|||
$dimmer.css('background-color', color); |
|||
}, |
|||
legacy: function() { |
|||
$dimmer.addClass(className.legacy); |
|||
}, |
|||
active: function() { |
|||
$dimmer.addClass(className.active); |
|||
}, |
|||
dimmable: function() { |
|||
$dimmable.addClass(className.dimmable); |
|||
}, |
|||
dimmed: function() { |
|||
$dimmable.addClass(className.dimmed); |
|||
}, |
|||
pageDimmer: function() { |
|||
$dimmer.addClass(className.pageDimmer); |
|||
}, |
|||
disabled: function() { |
|||
$dimmer.addClass(className.disabled); |
|||
}, |
|||
variation: function(variation) { |
|||
variation = variation || settings.variation; |
|||
if(variation) { |
|||
$dimmer.addClass(variation); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
active: function() { |
|||
$dimmer |
|||
.removeClass(className.active) |
|||
; |
|||
}, |
|||
legacy: function() { |
|||
$dimmer.removeClass(className.legacy); |
|||
}, |
|||
dimmed: function() { |
|||
$dimmable.removeClass(className.dimmed); |
|||
}, |
|||
disabled: function() { |
|||
$dimmer.removeClass(className.disabled); |
|||
}, |
|||
variation: function(variation) { |
|||
variation = variation || settings.variation; |
|||
if(variation) { |
|||
$dimmer.removeClass(variation); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
if($.isPlainObject(settings[name])) { |
|||
$.extend(true, settings[name], value); |
|||
} |
|||
else { |
|||
settings[name] = value; |
|||
} |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(!settings.silent && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(!settings.silent && settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
if(!settings.silent) { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
} |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 500); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.length > 1) { |
|||
title += ' ' + '(' + $allModules.length + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
module.preinitialize(); |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
instance.invoke('destroy'); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.dimmer.settings = { |
|||
|
|||
name : 'Dimmer', |
|||
namespace : 'dimmer', |
|||
|
|||
silent : false, |
|||
debug : false, |
|||
verbose : false, |
|||
performance : true, |
|||
|
|||
// whether should use flex layout
|
|||
useFlex : true, |
|||
|
|||
// name to distinguish between multiple dimmers in context
|
|||
dimmerName : false, |
|||
|
|||
// whether to add a variation type
|
|||
variation : false, |
|||
|
|||
// whether to bind close events
|
|||
closable : 'auto', |
|||
|
|||
// whether to use css animations
|
|||
useCSS : true, |
|||
|
|||
// css animation to use
|
|||
transition : 'fade', |
|||
|
|||
// event to bind to
|
|||
on : false, |
|||
|
|||
// overriding opacity value
|
|||
opacity : 'auto', |
|||
|
|||
// transition durations
|
|||
duration : { |
|||
show : 500, |
|||
hide : 500 |
|||
}, |
|||
|
|||
onChange : function(){}, |
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
animating : 'animating', |
|||
dimmable : 'dimmable', |
|||
dimmed : 'dimmed', |
|||
dimmer : 'dimmer', |
|||
disabled : 'disabled', |
|||
hide : 'hide', |
|||
legacy : 'legacy', |
|||
pageDimmer : 'page', |
|||
show : 'show' |
|||
}, |
|||
|
|||
selector: { |
|||
dimmer : '> .ui.dimmer', |
|||
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' |
|||
}, |
|||
|
|||
template: { |
|||
dimmer: function() { |
|||
return $('<div />').attr('class', 'ui dimmer'); |
|||
} |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window, document ); |
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Dimmer |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0!important;left:0!important;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.5s;animation-duration:.5s;transition:background-color .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer{border-radius:inherit!important}.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)}.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}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}.blurring.dimmable>:not(.dimmer){-webkit-filter:blur(0) grayscale(0);filter:blur(0) grayscale(0);transition:.8s -webkit-filter ease;transition:.8s filter ease;transition:.8s filter ease,.8s -webkit-filter ease}.blurring.dimmed.dimmable>:not(.dimmer){-webkit-filter:blur(5px) grayscale(.7);filter:blur(5px) grayscale(.7)}.blurring.dimmable>.dimmer{background-color:rgba(0,0,0,.6)}.blurring.dimmable>.inverted.dimmer{background-color:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content>*{color:#fff}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;width:0%;height:0%;z-index:-100;background-color:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,258 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Divider |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Divider |
|||
*******************************/ |
|||
|
|||
.ui.divider { |
|||
margin: 1rem 0rem; |
|||
line-height: 1; |
|||
height: 0em; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
letter-spacing: 0.05em; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
-webkit-user-select: none; |
|||
-moz-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: 0rem; |
|||
padding: 0em; |
|||
width: auto; |
|||
height: 50%; |
|||
line-height: 0em; |
|||
text-align: center; |
|||
transform: translateX(-50%); |
|||
} |
|||
.ui.vertical.divider:before, |
|||
.ui.vertical.divider:after { |
|||
position: absolute; |
|||
left: 50%; |
|||
content: ''; |
|||
z-index: 3; |
|||
border-left: 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: 0px; |
|||
} |
|||
|
|||
/* Inside grid */ |
|||
@media only screen and (max-width: 767px) { |
|||
.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 { |
|||
position: static; |
|||
left: 0; |
|||
border-left: none; |
|||
border-right: none; |
|||
content: ''; |
|||
display: table-cell; |
|||
position: relative; |
|||
top: 50%; |
|||
width: 50%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.ui.stackable.grid .ui.vertical.divider:before, |
|||
.ui.grid .stackable.row .ui.vertical.divider:before { |
|||
background-position: right 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: 0rem; |
|||
font-size: 1rem; |
|||
height: 1em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hidden |
|||
---------------*/ |
|||
|
|||
.ui.hidden.divider { |
|||
border-color: transparent !important; |
|||
} |
|||
.ui.hidden.divider:before, |
|||
.ui.hidden.divider:after { |
|||
display: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.divider.inverted, |
|||
.ui.vertical.inverted.divider, |
|||
.ui.horizontal.inverted.divider { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.divider.inverted, |
|||
.ui.divider.inverted:after, |
|||
.ui.divider.inverted:before { |
|||
border-top-color: rgba(34, 36, 38, 0.15) !important; |
|||
border-left-color: rgba(34, 36, 38, 0.15) !important; |
|||
border-bottom-color: rgba(255, 255, 255, 0.15) !important; |
|||
border-right-color: rgba(255, 255, 255, 0.15) !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fitted |
|||
---------------*/ |
|||
|
|||
.ui.fitted.divider { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Clearing |
|||
---------------*/ |
|||
|
|||
.ui.clearing.divider { |
|||
clear: both; |
|||
} |
|||
|
|||
/*-------------- |
|||
Section |
|||
---------------*/ |
|||
|
|||
.ui.section.divider { |
|||
margin-top: 2rem; |
|||
margin-bottom: 2rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.divider { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
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
File diff suppressed because it is too large
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,161 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Video |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.embed { |
|||
position: relative; |
|||
max-width: 100%; |
|||
height: 0px; |
|||
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: 0px; |
|||
left: 0px; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/*----------------- |
|||
Embed |
|||
------------------*/ |
|||
|
|||
.ui.embed > .embed { |
|||
display: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Placeholder |
|||
---------------*/ |
|||
|
|||
.ui.embed > .placeholder { |
|||
position: absolute; |
|||
cursor: pointer; |
|||
top: 0px; |
|||
left: 0px; |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.embed > .icon { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 2; |
|||
} |
|||
.ui.embed > .icon:after { |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 3; |
|||
content: ''; |
|||
background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); |
|||
opacity: 0.5; |
|||
transition: opacity 0.5s ease; |
|||
} |
|||
.ui.embed > .icon:before { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 4; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
color: #FFFFFF; |
|||
font-size: 6rem; |
|||
text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2); |
|||
transition: opacity 0.5s ease, color 0.5s ease; |
|||
z-index: 10; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.embed .icon:hover:after { |
|||
background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); |
|||
opacity: 1; |
|||
} |
|||
.ui.embed .icon:hover:before { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.active.embed > .icon, |
|||
.ui.active.embed > .placeholder { |
|||
display: none; |
|||
} |
|||
.ui.active.embed > .embed { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Video Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
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%; |
|||
} |
|||
@ -0,0 +1,706 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Embed |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
"use strict"; |
|||
|
|||
window = (typeof window != 'undefined' && window.Math == Math) |
|||
? window |
|||
: (typeof self != 'undefined' && self.Math == Math) |
|||
? self |
|||
: Function('return this')() |
|||
; |
|||
|
|||
$.fn.embed = function(parameters) { |
|||
|
|||
var |
|||
$allModules = $(this), |
|||
|
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.embed.settings, parameters) |
|||
: $.extend({}, $.fn.embed.settings), |
|||
|
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
sources = settings.sources, |
|||
error = settings.error, |
|||
metadata = settings.metadata, |
|||
namespace = settings.namespace, |
|||
templates = settings.templates, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$window = $(window), |
|||
$module = $(this), |
|||
$placeholder = $module.find(selector.placeholder), |
|||
$icon = $module.find(selector.icon), |
|||
$embed = $module.find(selector.embed), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing embed'); |
|||
module.determine.autoplay(); |
|||
module.create(); |
|||
module.bind.events(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous instance of embed'); |
|||
module.reset(); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache'); |
|||
$placeholder = $module.find(selector.placeholder); |
|||
$icon = $module.find(selector.icon); |
|||
$embed = $module.find(selector.embed); |
|||
}, |
|||
|
|||
bind: { |
|||
events: function() { |
|||
if( module.has.placeholder() ) { |
|||
module.debug('Adding placeholder events'); |
|||
$module |
|||
.on('click' + eventNamespace, selector.placeholder, module.createAndShow) |
|||
.on('click' + eventNamespace, selector.icon, module.createAndShow) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
create: function() { |
|||
var |
|||
placeholder = module.get.placeholder() |
|||
; |
|||
if(placeholder) { |
|||
module.createPlaceholder(); |
|||
} |
|||
else { |
|||
module.createAndShow(); |
|||
} |
|||
}, |
|||
|
|||
createPlaceholder: function(placeholder) { |
|||
var |
|||
icon = module.get.icon(), |
|||
url = module.get.url(), |
|||
embed = module.generate.embed(url) |
|||
; |
|||
placeholder = placeholder || module.get.placeholder(); |
|||
$module.html( templates.placeholder(placeholder, icon) ); |
|||
module.debug('Creating placeholder for embed', placeholder, icon); |
|||
}, |
|||
|
|||
createEmbed: function(url) { |
|||
module.refresh(); |
|||
url = url || module.get.url(); |
|||
$embed = $('<div/>') |
|||
.addClass(className.embed) |
|||
.html( module.generate.embed(url) ) |
|||
.appendTo($module) |
|||
; |
|||
settings.onCreate.call(element, url); |
|||
module.debug('Creating embed object', $embed); |
|||
}, |
|||
|
|||
changeEmbed: function(url) { |
|||
$embed |
|||
.html( module.generate.embed(url) ) |
|||
; |
|||
}, |
|||
|
|||
createAndShow: function() { |
|||
module.createEmbed(); |
|||
module.show(); |
|||
}, |
|||
|
|||
// sets new embed
|
|||
change: function(source, id, url) { |
|||
module.debug('Changing video to ', source, id, url); |
|||
$module |
|||
.data(metadata.source, source) |
|||
.data(metadata.id, id) |
|||
; |
|||
if(url) { |
|||
$module.data(metadata.url, url); |
|||
} |
|||
else { |
|||
$module.removeData(metadata.url); |
|||
} |
|||
if(module.has.embed()) { |
|||
module.changeEmbed(); |
|||
} |
|||
else { |
|||
module.create(); |
|||
} |
|||
}, |
|||
|
|||
// clears embed
|
|||
reset: function() { |
|||
module.debug('Clearing embed and showing placeholder'); |
|||
module.remove.data(); |
|||
module.remove.active(); |
|||
module.remove.embed(); |
|||
module.showPlaceholder(); |
|||
settings.onReset.call(element); |
|||
}, |
|||
|
|||
// shows current embed
|
|||
show: function() { |
|||
module.debug('Showing embed'); |
|||
module.set.active(); |
|||
settings.onDisplay.call(element); |
|||
}, |
|||
|
|||
hide: function() { |
|||
module.debug('Hiding embed'); |
|||
module.showPlaceholder(); |
|||
}, |
|||
|
|||
showPlaceholder: function() { |
|||
module.debug('Showing placeholder image'); |
|||
module.remove.active(); |
|||
settings.onPlaceholderDisplay.call(element); |
|||
}, |
|||
|
|||
get: { |
|||
id: function() { |
|||
return settings.id || $module.data(metadata.id); |
|||
}, |
|||
placeholder: function() { |
|||
return settings.placeholder || $module.data(metadata.placeholder); |
|||
}, |
|||
icon: function() { |
|||
return (settings.icon) |
|||
? settings.icon |
|||
: ($module.data(metadata.icon) !== undefined) |
|||
? $module.data(metadata.icon) |
|||
: module.determine.icon() |
|||
; |
|||
}, |
|||
source: function(url) { |
|||
return (settings.source) |
|||
? settings.source |
|||
: ($module.data(metadata.source) !== undefined) |
|||
? $module.data(metadata.source) |
|||
: module.determine.source() |
|||
; |
|||
}, |
|||
type: function() { |
|||
var source = module.get.source(); |
|||
return (sources[source] !== undefined) |
|||
? sources[source].type |
|||
: false |
|||
; |
|||
}, |
|||
url: function() { |
|||
return (settings.url) |
|||
? settings.url |
|||
: ($module.data(metadata.url) !== undefined) |
|||
? $module.data(metadata.url) |
|||
: module.determine.url() |
|||
; |
|||
} |
|||
}, |
|||
|
|||
determine: { |
|||
autoplay: function() { |
|||
if(module.should.autoplay()) { |
|||
settings.autoplay = true; |
|||
} |
|||
}, |
|||
source: function(url) { |
|||
var |
|||
matchedSource = false |
|||
; |
|||
url = url || module.get.url(); |
|||
if(url) { |
|||
$.each(sources, function(name, source) { |
|||
if(url.search(source.domain) !== -1) { |
|||
matchedSource = name; |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
return matchedSource; |
|||
}, |
|||
icon: function() { |
|||
var |
|||
source = module.get.source() |
|||
; |
|||
return (sources[source] !== undefined) |
|||
? sources[source].icon |
|||
: false |
|||
; |
|||
}, |
|||
url: function() { |
|||
var |
|||
id = settings.id || $module.data(metadata.id), |
|||
source = settings.source || $module.data(metadata.source), |
|||
url |
|||
; |
|||
url = (sources[source] !== undefined) |
|||
? sources[source].url.replace('{id}', id) |
|||
: false |
|||
; |
|||
if(url) { |
|||
$module.data(metadata.url, url); |
|||
} |
|||
return url; |
|||
} |
|||
}, |
|||
|
|||
|
|||
set: { |
|||
active: function() { |
|||
$module.addClass(className.active); |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
data: function() { |
|||
$module |
|||
.removeData(metadata.id) |
|||
.removeData(metadata.icon) |
|||
.removeData(metadata.placeholder) |
|||
.removeData(metadata.source) |
|||
.removeData(metadata.url) |
|||
; |
|||
}, |
|||
active: function() { |
|||
$module.removeClass(className.active); |
|||
}, |
|||
embed: function() { |
|||
$embed.empty(); |
|||
} |
|||
}, |
|||
|
|||
encode: { |
|||
parameters: function(parameters) { |
|||
var |
|||
urlString = [], |
|||
index |
|||
; |
|||
for (index in parameters) { |
|||
urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) ); |
|||
} |
|||
return urlString.join('&'); |
|||
} |
|||
}, |
|||
|
|||
generate: { |
|||
embed: function(url) { |
|||
module.debug('Generating embed html'); |
|||
var |
|||
source = module.get.source(), |
|||
html, |
|||
parameters |
|||
; |
|||
url = module.get.url(url); |
|||
if(url) { |
|||
parameters = module.generate.parameters(source); |
|||
html = templates.iframe(url, parameters); |
|||
} |
|||
else { |
|||
module.error(error.noURL, $module); |
|||
} |
|||
return html; |
|||
}, |
|||
parameters: function(source, extraParameters) { |
|||
var |
|||
parameters = (sources[source] && sources[source].parameters !== undefined) |
|||
? sources[source].parameters(settings) |
|||
: {} |
|||
; |
|||
extraParameters = extraParameters || settings.parameters; |
|||
if(extraParameters) { |
|||
parameters = $.extend({}, parameters, extraParameters); |
|||
} |
|||
parameters = settings.onEmbed(parameters); |
|||
return module.encode.parameters(parameters); |
|||
} |
|||
}, |
|||
|
|||
has: { |
|||
embed: function() { |
|||
return ($embed.length > 0); |
|||
}, |
|||
placeholder: function() { |
|||
return settings.placeholder || $module.data(metadata.placeholder); |
|||
} |
|||
}, |
|||
|
|||
should: { |
|||
autoplay: function() { |
|||
return (settings.autoplay === 'auto') |
|||
? (settings.placeholder || $module.data(metadata.placeholder) !== undefined) |
|||
: settings.autoplay |
|||
; |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
video: function() { |
|||
return module.get.type() == 'video'; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
if($.isPlainObject(settings[name])) { |
|||
$.extend(true, settings[name], value); |
|||
} |
|||
else { |
|||
settings[name] = value; |
|||
} |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(!settings.silent && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(!settings.silent && settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
if(!settings.silent) { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
} |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 500); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.length > 1) { |
|||
title += ' ' + '(' + $allModules.length + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
instance.invoke('destroy'); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.embed.settings = { |
|||
|
|||
name : 'Embed', |
|||
namespace : 'embed', |
|||
|
|||
silent : false, |
|||
debug : false, |
|||
verbose : false, |
|||
performance : true, |
|||
|
|||
icon : false, |
|||
source : false, |
|||
url : false, |
|||
id : false, |
|||
|
|||
// standard video settings
|
|||
autoplay : 'auto', |
|||
color : '#444444', |
|||
hd : true, |
|||
brandedUI : false, |
|||
|
|||
// additional parameters to include with the embed
|
|||
parameters: false, |
|||
|
|||
onDisplay : function() {}, |
|||
onPlaceholderDisplay : function() {}, |
|||
onReset : function() {}, |
|||
onCreate : function(url) {}, |
|||
onEmbed : function(parameters) { |
|||
return parameters; |
|||
}, |
|||
|
|||
metadata : { |
|||
id : 'id', |
|||
icon : 'icon', |
|||
placeholder : 'placeholder', |
|||
source : 'source', |
|||
url : 'url' |
|||
}, |
|||
|
|||
error : { |
|||
noURL : 'No URL specified', |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
embed : 'embed' |
|||
}, |
|||
|
|||
selector : { |
|||
embed : '.embed', |
|||
placeholder : '.placeholder', |
|||
icon : '.icon' |
|||
}, |
|||
|
|||
sources: { |
|||
youtube: { |
|||
name : 'youtube', |
|||
type : 'video', |
|||
icon : 'video play', |
|||
domain : 'youtube.com', |
|||
url : '//www.youtube.com/embed/{id}', |
|||
parameters: function(settings) { |
|||
return { |
|||
autohide : !settings.brandedUI, |
|||
autoplay : settings.autoplay, |
|||
color : settings.color || undefined, |
|||
hq : settings.hd, |
|||
jsapi : settings.api, |
|||
modestbranding : !settings.brandedUI |
|||
}; |
|||
} |
|||
}, |
|||
vimeo: { |
|||
name : 'vimeo', |
|||
type : 'video', |
|||
icon : 'video play', |
|||
domain : 'vimeo.com', |
|||
url : '//player.vimeo.com/video/{id}', |
|||
parameters: function(settings) { |
|||
return { |
|||
api : settings.api, |
|||
autoplay : settings.autoplay, |
|||
byline : settings.brandedUI, |
|||
color : settings.color || undefined, |
|||
portrait : settings.brandedUI, |
|||
title : settings.brandedUI |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
templates: { |
|||
iframe : function(url, parameters) { |
|||
var src = url; |
|||
if (parameters) { |
|||
src += '?' + parameters; |
|||
} |
|||
return '' |
|||
+ '<iframe src="' + src + '"' |
|||
+ ' width="100%" height="100%"' |
|||
+ ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
|||
; |
|||
}, |
|||
placeholder : function(image, icon) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(icon) { |
|||
html += '<i class="' + icon + ' icon"></i>'; |
|||
} |
|||
if(image) { |
|||
html += '<img class="placeholder" src="' + image + '">'; |
|||
} |
|||
return html; |
|||
} |
|||
}, |
|||
|
|||
// NOT YET IMPLEMENTED
|
|||
api : false, |
|||
onPause : function() {}, |
|||
onPlay : function() {}, |
|||
onStop : function() {} |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
})( jQuery, window, document ); |
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Video |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://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}.ui.embed>.embed{display:none}.ui.embed>.placeholder{position:absolute;cursor:pointer;top:0;left:0;display:block;width:100%;height:100%;background-color:radial-gradient(transparent 45%,rgba(0,0,0,.3))}.ui.embed>.icon{cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.ui.embed>.icon:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;content:'';background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:.5;transition:opacity .5s ease}.ui.embed>.icon:before{position:absolute;top:50%;left:50%;z-index:4;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 .icon:hover:after{background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:1}.ui.embed .icon:hover:before{color:#fff}.ui.active.embed>.icon,.ui.active.embed>.placeholder{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
@ -0,0 +1,281 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Feed |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Activity Feed |
|||
*******************************/ |
|||
|
|||
.ui.feed { |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.feed:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.feed:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
|
|||
/* Event */ |
|||
.ui.feed > .event { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
padding: 0.21428571rem 0em; |
|||
margin: 0em; |
|||
background: none; |
|||
border-top: none; |
|||
} |
|||
.ui.feed > .event:first-child { |
|||
border-top: 0px; |
|||
padding-top: 0em; |
|||
} |
|||
.ui.feed > .event:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
/* Event Label */ |
|||
.ui.feed > .event > .label { |
|||
display: block; |
|||
flex: 0 0 auto; |
|||
width: 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: none; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.ui.feed > .event > .label img { |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: 500rem; |
|||
} |
|||
.ui.feed > .event > .label + .content { |
|||
margin: 0.5em 0em 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: 0em; |
|||
} |
|||
|
|||
/* Link */ |
|||
.ui.feed > .event > .content a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/*-------------- |
|||
Date |
|||
---------------*/ |
|||
|
|||
.ui.feed > .event > .content .date { |
|||
margin: -0.5rem 0em 0em; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-size: 1em; |
|||
font-style: normal; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/*-------------- |
|||
Summary |
|||
---------------*/ |
|||
|
|||
.ui.feed > .event > .content .summary { |
|||
margin: 0em; |
|||
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 0em 0em; |
|||
border-radius: 0.25em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*-------------- |
|||
User |
|||
---------------*/ |
|||
|
|||
.ui.feed > .event > .content .user { |
|||
display: inline-block; |
|||
font-weight: bold; |
|||
margin-right: 0em; |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.feed > .event > .content .user img { |
|||
margin: -0.25em 0.25em 0em 0em; |
|||
width: auto; |
|||
height: 10em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inline Date |
|||
---------------*/ |
|||
|
|||
|
|||
/* Date inside Summary */ |
|||
.ui.feed > .event > .content .summary > .date { |
|||
display: inline-block; |
|||
float: none; |
|||
font-weight: normal; |
|||
font-size: 0.85714286em; |
|||
font-style: normal; |
|||
margin: 0em 0em 0em 0.5em; |
|||
padding: 0em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/*-------------- |
|||
Extra Summary |
|||
---------------*/ |
|||
|
|||
.ui.feed > .event > .content .extra { |
|||
margin: 0.5em 0em 0em; |
|||
background: none; |
|||
padding: 0em; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/* Images */ |
|||
.ui.feed > .event > .content .extra.images img { |
|||
display: inline-block; |
|||
margin: 0em 0.25em 0em 0em; |
|||
width: 6em; |
|||
} |
|||
|
|||
/* Text */ |
|||
.ui.feed > .event > .content .extra.text { |
|||
padding: 0em; |
|||
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 0em 0em; |
|||
background: none; |
|||
border: none; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
padding: 0em; |
|||
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: 0em; |
|||
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 .icon { |
|||
color: #FF2733; |
|||
} |
|||
.ui.feed > .event > .content .meta .active.like .icon { |
|||
color: #EF404A; |
|||
} |
|||
|
|||
/* First element */ |
|||
.ui.feed > .event > .content .meta > :first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.feed > .event > .content .meta > :first-child::after { |
|||
display: none; |
|||
} |
|||
|
|||
/* Action */ |
|||
.ui.feed > .event > .content .meta a, |
|||
.ui.feed > .event > .content .meta > .icon { |
|||
cursor: 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 .icon, |
|||
.ui.feed > .event > .content .meta > .icon:hover { |
|||
color: rgba(0, 0, 0, 0.95); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.feed { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
.ui.feed { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.feed { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Feed |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/.ui.feed{margin:1em 0}.ui.feed:first-child{margin-top:0}.ui.feed:last-child{margin-bottom:0}.ui.feed>.event{display:flex;flex-direction:row;width:100%;padding:.21428571rem 0;margin:0;background:0 0;border-top:none}.ui.feed>.event:first-child{border-top:0;padding-top:0}.ui.feed>.event:last-child{padding-bottom:0}.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:.25em;background:0 0;border:none;border-radius:none;color:rgba(0,0,0,.6)}.ui.feed>.event>.label img{width:100%;height:auto;border-radius:500rem}.ui.feed>.event>.label+.content{margin:.5em 0 .35714286em 1.14285714em}.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}.ui.feed>.event>.content a{cursor:pointer}.ui.feed>.event>.content .date{margin:-.5rem 0 0;padding:0;font-weight:400;font-size:1em;font-style:normal;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .summary{margin:0;font-size:1em;font-weight:700;color:rgba(0,0,0,.87)}.ui.feed>.event>.content .summary img{display:inline-block;width:auto;height:10em;margin:-.25em .25em 0 0;border-radius:.25em;vertical-align:middle}.ui.feed>.event>.content .user{display:inline-block;font-weight:700;margin-right:0;vertical-align:baseline}.ui.feed>.event>.content .user img{margin:-.25em .25em 0 0;width:auto;height:10em;vertical-align:middle}.ui.feed>.event>.content .summary>.date{display:inline-block;float:none;font-weight:400;font-size:.85714286em;font-style:normal;margin:0 0 0 .5em;padding:0;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .extra{margin:.5em 0 0;background:0 0;padding:0;color:rgba(0,0,0,.87)}.ui.feed>.event>.content .extra.images img{display:inline-block;margin:0 .25em 0 0;width:6em}.ui.feed>.event>.content .extra.text{padding:0;border-left:none;font-size:1em;max-width:500px;line-height:1.4285em}.ui.feed>.event>.content .meta{display:inline-block;font-size:.85714286em;margin:.5em 0 0;background:0 0;border:none;border-radius:0;box-shadow:none;padding:0;color:rgba(0,0,0,.6)}.ui.feed>.event>.content .meta>*{position:relative;margin-left:.75em}.ui.feed>.event>.content .meta>:after{content:'';color:rgba(0,0,0,.2);top:0;left:-1em;opacity:1;position:absolute;vertical-align:top}.ui.feed>.event>.content .meta .like{color:'';transition:.2s color ease}.ui.feed>.event>.content .meta .like:hover .icon{color:#ff2733}.ui.feed>.event>.content .meta .active.like .icon{color:#ef404a}.ui.feed>.event>.content .meta>:first-child{margin-left:0}.ui.feed>.event>.content .meta>:first-child::after{display:none}.ui.feed>.event>.content .meta a,.ui.feed>.event>.content .meta>.icon{cursor:pointer;opacity:1;color:rgba(0,0,0,.5);transition:color .1s ease}.ui.feed>.event>.content .meta a:hover,.ui.feed>.event>.content .meta a:hover .icon,.ui.feed>.event>.content .meta>.icon:hover{color:rgba(0,0,0,.95)}.ui.small.feed{font-size:.92857143rem}.ui.feed{font-size:1rem}.ui.large.feed{font-size:1.14285714rem} |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
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
File diff suppressed because one or more lines are too long
@ -0,0 +1,719 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Header |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Header |
|||
*******************************/ |
|||
|
|||
|
|||
/* Standard */ |
|||
.ui.header { |
|||
border: none; |
|||
margin: calc(2rem - 0.14285714em ) 0em 1rem; |
|||
padding: 0em 0em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
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: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sub Header |
|||
---------------*/ |
|||
|
|||
.ui.header .sub.header { |
|||
display: block; |
|||
font-weight: normal; |
|||
padding: 0em; |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
line-height: 1.2em; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.header > .icon { |
|||
display: table-cell; |
|||
opacity: 1; |
|||
font-size: 1.5em; |
|||
padding-top: 0em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* With Text Node */ |
|||
.ui.header .icon:only-child { |
|||
display: inline-block; |
|||
padding: 0em; |
|||
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 > .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: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Page |
|||
---------------*/ |
|||
|
|||
h1.ui.header { |
|||
font-size: 2rem; |
|||
} |
|||
h2.ui.header { |
|||
font-size: 1.71428571rem; |
|||
} |
|||
h3.ui.header { |
|||
font-size: 1.28571429rem; |
|||
} |
|||
h4.ui.header { |
|||
font-size: 1.07142857rem; |
|||
} |
|||
h5.ui.header { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
/* Sub Header */ |
|||
h1.ui.header .sub.header { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
h2.ui.header .sub.header { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
h3.ui.header .sub.header { |
|||
font-size: 1rem; |
|||
} |
|||
h4.ui.header .sub.header { |
|||
font-size: 1rem; |
|||
} |
|||
h5.ui.header .sub.header { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content Heading |
|||
---------------*/ |
|||
|
|||
.ui.huge.header { |
|||
min-height: 1em; |
|||
font-size: 2em; |
|||
} |
|||
.ui.large.header { |
|||
font-size: 1.71428571em; |
|||
} |
|||
.ui.medium.header { |
|||
font-size: 1.28571429em; |
|||
} |
|||
.ui.small.header { |
|||
font-size: 1.07142857em; |
|||
} |
|||
.ui.tiny.header { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Sub Header */ |
|||
.ui.huge.header .sub.header { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
.ui.large.header .sub.header { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
.ui.header .sub.header { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.small.header .sub.header { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.tiny.header .sub.header { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sub Heading |
|||
---------------*/ |
|||
|
|||
.ui.sub.header { |
|||
padding: 0em; |
|||
margin-bottom: 0.14285714rem; |
|||
font-weight: bold; |
|||
font-size: 0.85714286em; |
|||
text-transform: uppercase; |
|||
color: ''; |
|||
} |
|||
.ui.small.sub.header { |
|||
font-size: 0.78571429em; |
|||
} |
|||
.ui.sub.header { |
|||
font-size: 0.85714286em; |
|||
} |
|||
.ui.large.sub.header { |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.huge.sub.header { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Icon |
|||
--------------------*/ |
|||
|
|||
.ui.icon.header { |
|||
display: inline-block; |
|||
text-align: center; |
|||
margin: 2rem 0em 1rem; |
|||
} |
|||
.ui.icon.header:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0px; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
.ui.icon.header:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.icon.header .icon { |
|||
float: none; |
|||
display: block; |
|||
width: auto; |
|||
height: auto; |
|||
line-height: 1; |
|||
padding: 0em; |
|||
font-size: 3em; |
|||
margin: 0em auto 0.5rem; |
|||
opacity: 1; |
|||
} |
|||
.ui.icon.header .content { |
|||
display: block; |
|||
padding: 0em; |
|||
} |
|||
.ui.icon.header .circular.icon { |
|||
font-size: 2em; |
|||
} |
|||
.ui.icon.header .square.icon { |
|||
font-size: 2em; |
|||
} |
|||
.ui.block.icon.header .icon { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.icon.header.aligned { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.header { |
|||
opacity: 0.45; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.header { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.header .sub.header { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.attached.header { |
|||
background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); |
|||
box-shadow: none; |
|||
border-color: transparent; |
|||
} |
|||
.ui.inverted.block.header { |
|||
background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.block.header { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
|
|||
/*--- Red ---*/ |
|||
|
|||
.ui.red.header { |
|||
color: #DB2828 !important; |
|||
} |
|||
a.ui.red.header:hover { |
|||
color: #d01919 !important; |
|||
} |
|||
.ui.red.dividing.header { |
|||
border-bottom: 2px solid #DB2828; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.red.header { |
|||
color: #FF695E !important; |
|||
} |
|||
a.ui.inverted.red.header:hover { |
|||
color: #ff5144 !important; |
|||
} |
|||
|
|||
/*--- Orange ---*/ |
|||
|
|||
.ui.orange.header { |
|||
color: #F2711C !important; |
|||
} |
|||
a.ui.orange.header:hover { |
|||
color: #f26202 !important; |
|||
} |
|||
.ui.orange.dividing.header { |
|||
border-bottom: 2px solid #F2711C; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.orange.header { |
|||
color: #FF851B !important; |
|||
} |
|||
a.ui.inverted.orange.header:hover { |
|||
color: #ff7701 !important; |
|||
} |
|||
|
|||
/*--- Olive ---*/ |
|||
|
|||
.ui.olive.header { |
|||
color: #B5CC18 !important; |
|||
} |
|||
a.ui.olive.header:hover { |
|||
color: #a7bd0d !important; |
|||
} |
|||
.ui.olive.dividing.header { |
|||
border-bottom: 2px solid #B5CC18; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.olive.header { |
|||
color: #D9E778 !important; |
|||
} |
|||
a.ui.inverted.olive.header:hover { |
|||
color: #d8ea5c !important; |
|||
} |
|||
|
|||
/*--- Yellow ---*/ |
|||
|
|||
.ui.yellow.header { |
|||
color: #FBBD08 !important; |
|||
} |
|||
a.ui.yellow.header:hover { |
|||
color: #eaae00 !important; |
|||
} |
|||
.ui.yellow.dividing.header { |
|||
border-bottom: 2px solid #FBBD08; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.yellow.header { |
|||
color: #FFE21F !important; |
|||
} |
|||
a.ui.inverted.yellow.header:hover { |
|||
color: #ffdf05 !important; |
|||
} |
|||
|
|||
/*--- Green ---*/ |
|||
|
|||
.ui.green.header { |
|||
color: #21BA45 !important; |
|||
} |
|||
a.ui.green.header:hover { |
|||
color: #16ab39 !important; |
|||
} |
|||
.ui.green.dividing.header { |
|||
border-bottom: 2px solid #21BA45; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.green.header { |
|||
color: #2ECC40 !important; |
|||
} |
|||
a.ui.inverted.green.header:hover { |
|||
color: #22be34 !important; |
|||
} |
|||
|
|||
/*--- Teal ---*/ |
|||
|
|||
.ui.teal.header { |
|||
color: #00B5AD !important; |
|||
} |
|||
a.ui.teal.header:hover { |
|||
color: #009c95 !important; |
|||
} |
|||
.ui.teal.dividing.header { |
|||
border-bottom: 2px solid #00B5AD; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.teal.header { |
|||
color: #6DFFFF !important; |
|||
} |
|||
a.ui.inverted.teal.header:hover { |
|||
color: #54ffff !important; |
|||
} |
|||
|
|||
/*--- Blue ---*/ |
|||
|
|||
.ui.blue.header { |
|||
color: #2185D0 !important; |
|||
} |
|||
a.ui.blue.header:hover { |
|||
color: #1678c2 !important; |
|||
} |
|||
.ui.blue.dividing.header { |
|||
border-bottom: 2px solid #2185D0; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.blue.header { |
|||
color: #54C8FF !important; |
|||
} |
|||
a.ui.inverted.blue.header:hover { |
|||
color: #3ac0ff !important; |
|||
} |
|||
|
|||
/*--- Violet ---*/ |
|||
|
|||
.ui.violet.header { |
|||
color: #6435C9 !important; |
|||
} |
|||
a.ui.violet.header:hover { |
|||
color: #5829bb !important; |
|||
} |
|||
.ui.violet.dividing.header { |
|||
border-bottom: 2px solid #6435C9; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.violet.header { |
|||
color: #A291FB !important; |
|||
} |
|||
a.ui.inverted.violet.header:hover { |
|||
color: #8a73ff !important; |
|||
} |
|||
|
|||
/*--- Purple ---*/ |
|||
|
|||
.ui.purple.header { |
|||
color: #A333C8 !important; |
|||
} |
|||
a.ui.purple.header:hover { |
|||
color: #9627ba !important; |
|||
} |
|||
.ui.purple.dividing.header { |
|||
border-bottom: 2px solid #A333C8; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.purple.header { |
|||
color: #DC73FF !important; |
|||
} |
|||
a.ui.inverted.purple.header:hover { |
|||
color: #d65aff !important; |
|||
} |
|||
|
|||
/*--- Pink ---*/ |
|||
|
|||
.ui.pink.header { |
|||
color: #E03997 !important; |
|||
} |
|||
a.ui.pink.header:hover { |
|||
color: #e61a8d !important; |
|||
} |
|||
.ui.pink.dividing.header { |
|||
border-bottom: 2px solid #E03997; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.pink.header { |
|||
color: #FF8EDF !important; |
|||
} |
|||
a.ui.inverted.pink.header:hover { |
|||
color: #ff74d8 !important; |
|||
} |
|||
|
|||
/*--- Brown ---*/ |
|||
|
|||
.ui.brown.header { |
|||
color: #A5673F !important; |
|||
} |
|||
a.ui.brown.header:hover { |
|||
color: #975b33 !important; |
|||
} |
|||
.ui.brown.dividing.header { |
|||
border-bottom: 2px solid #A5673F; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.brown.header { |
|||
color: #D67C1C !important; |
|||
} |
|||
a.ui.inverted.brown.header:hover { |
|||
color: #c86f11 !important; |
|||
} |
|||
|
|||
/*--- Grey ---*/ |
|||
|
|||
.ui.grey.header { |
|||
color: #767676 !important; |
|||
} |
|||
a.ui.grey.header:hover { |
|||
color: #838383 !important; |
|||
} |
|||
.ui.grey.dividing.header { |
|||
border-bottom: 2px solid #767676; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.grey.header { |
|||
color: #DCDDDE !important; |
|||
} |
|||
a.ui.inverted.grey.header:hover { |
|||
color: #cfd0d2 !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.header { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.header { |
|||
text-align: right; |
|||
} |
|||
.ui.centered.header, |
|||
.ui.center.aligned.header { |
|||
text-align: center; |
|||
} |
|||
.ui.justified.header { |
|||
text-align: justify; |
|||
} |
|||
.ui.justified.header:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 100%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.header, |
|||
.ui[class*="left floated"].header { |
|||
float: left; |
|||
margin-top: 0em; |
|||
margin-right: 0.5em; |
|||
} |
|||
.ui[class*="right floated"].header { |
|||
float: right; |
|||
margin-top: 0em; |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fitted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.header { |
|||
padding: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
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 .icon { |
|||
margin-bottom: 0em; |
|||
} |
|||
.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.tiny.block.header { |
|||
font-size: 0.85714286rem; |
|||
} |
|||
.ui.small.block.header { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.block.header { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
.ui.huge.block.header { |
|||
font-size: 1.42857143rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.attached.header { |
|||
background: #FFFFFF; |
|||
padding: 0.78571429rem 1rem; |
|||
margin-left: -1px; |
|||
margin-right: -1px; |
|||
box-shadow: none; |
|||
border: 1px solid #D4D4D5; |
|||
} |
|||
.ui.attached.block.header { |
|||
background: #F3F4F5; |
|||
} |
|||
.ui.attached:not(.top):not(.bottom).header { |
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
border-top: none; |
|||
border-radius: 0em; |
|||
} |
|||
.ui.top.attached.header { |
|||
margin-bottom: 0em; |
|||
border-radius: 0.28571429rem 0.28571429rem 0em 0em; |
|||
} |
|||
.ui.bottom.attached.header { |
|||
margin-top: 0em; |
|||
border-top: none; |
|||
border-radius: 0em 0em 0.28571429rem 0.28571429rem; |
|||
} |
|||
|
|||
/* Attached Sizes */ |
|||
.ui.tiny.attached.header { |
|||
font-size: 0.85714286em; |
|||
} |
|||
.ui.small.attached.header { |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.attached.header { |
|||
font-size: 1.14285714em; |
|||
} |
|||
.ui.huge.attached.header { |
|||
font-size: 1.42857143em; |
|||
} |
|||
|
|||
/*------------------- |
|||
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
File diff suppressed because one or more lines are too long
@ -0,0 +1,310 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Image |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://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.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.images .image, |
|||
.ui.top.aligned.image, |
|||
.ui.top.aligned.image svg, |
|||
.ui.top.aligned.image img { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
.ui.middle.aligned.images .image, |
|||
.ui.middle.aligned.image, |
|||
.ui.middle.aligned.image svg, |
|||
.ui.middle.aligned.image img { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.bottom.aligned.images .image, |
|||
.ui.bottom.aligned.image, |
|||
.ui.bottom.aligned.image svg, |
|||
.ui.bottom.aligned.image img { |
|||
display: inline-block; |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*-------------- |
|||
Rounded |
|||
---------------*/ |
|||
|
|||
.ui.rounded.images .image, |
|||
.ui.rounded.image, |
|||
.ui.rounded.images .image > *, |
|||
.ui.rounded.image > * { |
|||
border-radius: 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: 0em; |
|||
} |
|||
.ui[class*="right spaced"].image { |
|||
margin-left: 0em; |
|||
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: 0em; |
|||
margin-bottom: 1em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.floated.images:last-child, |
|||
.ui.floated.image:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.centered.images, |
|||
.ui.centered.image { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.mini.images .image, |
|||
.ui.mini.images img, |
|||
.ui.mini.images svg, |
|||
.ui.mini.image { |
|||
width: 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.medium.images .image, |
|||
.ui.medium.images img, |
|||
.ui.medium.images svg, |
|||
.ui.medium.image { |
|||
width: 300px; |
|||
height: auto; |
|||
font-size: 1rem; |
|||
} |
|||
.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: 0em; |
|||
margin: 0em -0.25rem 0rem; |
|||
} |
|||
.ui.images .image, |
|||
.ui.images > img, |
|||
.ui.images > svg { |
|||
display: inline-block; |
|||
margin: 0em 0.25rem 0.5rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Image |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://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.image,.ui.hidden.images{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,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.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,.ui.centered.images{margin-left:auto;margin-right:auto}.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.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.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 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem} |
|||
@ -0,0 +1,495 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Input |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Inputs |
|||
---------------------*/ |
|||
|
|||
.ui.input { |
|||
position: relative; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
display: inline-flex; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
.ui.input > input { |
|||
margin: 0em; |
|||
max-width: 100%; |
|||
flex: 1 0 auto; |
|||
outline: none; |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
text-align: left; |
|||
line-height: 1.21428571em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
padding: 0.67857143em 1em; |
|||
background: #FFFFFF; |
|||
border: 1px solid rgba(34, 36, 38, 0.15); |
|||
color: rgba(0, 0, 0, 0.87); |
|||
border-radius: 0.28571429rem; |
|||
transition: box-shadow 0.1s ease, border-color 0.1s ease; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Placeholder |
|||
---------------------*/ |
|||
|
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.input > input::-webkit-input-placeholder { |
|||
color: rgba(191, 191, 191, 0.87); |
|||
} |
|||
.ui.input > input::-moz-placeholder { |
|||
color: rgba(191, 191, 191, 0.87); |
|||
} |
|||
.ui.input > input:-ms-input-placeholder { |
|||
color: rgba(191, 191, 191, 0.87); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Disabled |
|||
---------------------*/ |
|||
|
|||
.ui.disabled.input, |
|||
.ui.input:not(.disabled) input[disabled] { |
|||
opacity: 0.45; |
|||
} |
|||
.ui.disabled.input > input, |
|||
.ui.input:not(.disabled) input[disabled] { |
|||
pointer-events: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Active |
|||
---------------------*/ |
|||
|
|||
.ui.input > input:active, |
|||
.ui.input.down input { |
|||
border-color: rgba(0, 0, 0, 0.3); |
|||
background: #FAFAFA; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.loading.loading.input > i.icon:before { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -0.64285714em 0em 0em -0.64285714em; |
|||
width: 1.28571429em; |
|||
height: 1.28571429em; |
|||
border-radius: 500rem; |
|||
border: 0.2em solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.loading.loading.input > i.icon:after { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -0.64285714em 0em 0em -0.64285714em; |
|||
width: 1.28571429em; |
|||
height: 1.28571429em; |
|||
-webkit-animation: button-spin 0.6s linear; |
|||
animation: button-spin 0.6s linear; |
|||
-webkit-animation-iteration-count: infinite; |
|||
animation-iteration-count: infinite; |
|||
border-radius: 500rem; |
|||
border-color: #767676 transparent transparent; |
|||
border-style: solid; |
|||
border-width: 0.2em; |
|||
box-shadow: 0px 0px 0px 1px transparent; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.input.focus > input, |
|||
.ui.input > input:focus { |
|||
border-color: #85B7D9; |
|||
background: #FFFFFF; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
box-shadow: none; |
|||
} |
|||
.ui.input.focus > input::-webkit-input-placeholder, |
|||
.ui.input > input:focus::-webkit-input-placeholder { |
|||
color: rgba(115, 115, 115, 0.87); |
|||
} |
|||
.ui.input.focus > input::-moz-placeholder, |
|||
.ui.input > input:focus::-moz-placeholder { |
|||
color: rgba(115, 115, 115, 0.87); |
|||
} |
|||
.ui.input.focus > input:-ms-input-placeholder, |
|||
.ui.input > input:focus:-ms-input-placeholder { |
|||
color: rgba(115, 115, 115, 0.87); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
.ui.input.error > input { |
|||
background-color: #FFF6F6; |
|||
border-color: #E0B4B4; |
|||
color: #9F3A38; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.input.error > input::-webkit-input-placeholder { |
|||
color: #e7bdbc; |
|||
} |
|||
.ui.input.error > input::-moz-placeholder { |
|||
color: #e7bdbc; |
|||
} |
|||
.ui.input.error > input:-ms-input-placeholder { |
|||
color: #e7bdbc !important; |
|||
} |
|||
|
|||
/* Focused Error Placeholder */ |
|||
.ui.input.error > input:focus::-webkit-input-placeholder { |
|||
color: #da9796; |
|||
} |
|||
.ui.input.error > input:focus::-moz-placeholder { |
|||
color: #da9796; |
|||
} |
|||
.ui.input.error > input:focus:-ms-input-placeholder { |
|||
color: #da9796 !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Transparent |
|||
---------------------*/ |
|||
|
|||
.ui.transparent.input > input { |
|||
border-color: transparent !important; |
|||
background-color: transparent !important; |
|||
padding: 0em !important; |
|||
box-shadow: none !important; |
|||
border-radius: 0px !important; |
|||
} |
|||
|
|||
/* Transparent Icon */ |
|||
.ui.transparent.icon.input > i.icon { |
|||
width: 1.1em; |
|||
} |
|||
.ui.transparent.icon.input > input { |
|||
padding-left: 0em !important; |
|||
padding-right: 2em !important; |
|||
} |
|||
.ui.transparent[class*="left icon"].input > input { |
|||
padding-left: 2em !important; |
|||
padding-right: 0em !important; |
|||
} |
|||
|
|||
/* Transparent Inverted */ |
|||
.ui.transparent.inverted.input { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.transparent.inverted.input > input { |
|||
color: inherit; |
|||
} |
|||
.ui.transparent.inverted.input > input::-webkit-input-placeholder { |
|||
color: rgba(255, 255, 255, 0.5); |
|||
} |
|||
.ui.transparent.inverted.input > input::-moz-placeholder { |
|||
color: rgba(255, 255, 255, 0.5); |
|||
} |
|||
.ui.transparent.inverted.input > input:-ms-input-placeholder { |
|||
color: rgba(255, 255, 255, 0.5); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Icon |
|||
---------------------*/ |
|||
|
|||
.ui.icon.input > i.icon { |
|||
cursor: default; |
|||
position: absolute; |
|||
line-height: 1; |
|||
text-align: center; |
|||
top: 0px; |
|||
right: 0px; |
|||
margin: 0em; |
|||
height: 100%; |
|||
width: 2.67142857em; |
|||
opacity: 0.5; |
|||
border-radius: 0em 0.28571429rem 0.28571429rem 0em; |
|||
transition: opacity 0.3s ease; |
|||
} |
|||
.ui.icon.input > i.icon:not(.link) { |
|||
pointer-events: none; |
|||
} |
|||
.ui.icon.input > input { |
|||
padding-right: 2.67142857em !important; |
|||
} |
|||
.ui.icon.input > i.icon:before, |
|||
.ui.icon.input > i.icon:after { |
|||
left: 0; |
|||
position: absolute; |
|||
text-align: center; |
|||
top: 50%; |
|||
width: 100%; |
|||
margin-top: -0.5em; |
|||
} |
|||
.ui.icon.input > i.link.icon { |
|||
cursor: pointer; |
|||
} |
|||
.ui.icon.input > i.circular.icon { |
|||
top: 0.35em; |
|||
right: 0.5em; |
|||
} |
|||
|
|||
/* Left Icon Input */ |
|||
.ui[class*="left icon"].input > i.icon { |
|||
right: auto; |
|||
left: 1px; |
|||
border-radius: 0.28571429rem 0em 0em 0.28571429rem; |
|||
} |
|||
.ui[class*="left icon"].input > i.circular.icon { |
|||
right: auto; |
|||
left: 0.5em; |
|||
} |
|||
.ui[class*="left icon"].input > input { |
|||
padding-left: 2.67142857em !important; |
|||
padding-right: 1em !important; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.icon.input > input:focus ~ i.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labeled |
|||
---------------------*/ |
|||
|
|||
|
|||
/* Adjacent Label */ |
|||
.ui.labeled.input > .label { |
|||
flex: 0 0 auto; |
|||
margin: 0; |
|||
font-size: 1em; |
|||
} |
|||
.ui.labeled.input > .label:not(.corner) { |
|||
padding-top: 0.78571429em; |
|||
padding-bottom: 0.78571429em; |
|||
} |
|||
|
|||
/* Regular Label on Left */ |
|||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { |
|||
border-top-right-radius: 0px; |
|||
border-bottom-right-radius: 0px; |
|||
} |
|||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { |
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
border-left-color: transparent; |
|||
} |
|||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { |
|||
border-left-color: #85B7D9; |
|||
} |
|||
|
|||
/* Regular Label on Right */ |
|||
.ui[class*="right labeled"].input > input { |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-right-color: transparent !important; |
|||
} |
|||
.ui[class*="right labeled"].input > input + .label { |
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
} |
|||
.ui[class*="right labeled"].input > input:focus { |
|||
border-right-color: #85B7D9 !important; |
|||
} |
|||
|
|||
/* Corner Label */ |
|||
.ui.labeled.input .corner.label { |
|||
top: 1px; |
|||
right: 1px; |
|||
font-size: 0.64285714em; |
|||
border-radius: 0em 0.28571429rem 0em 0em; |
|||
} |
|||
|
|||
/* Spacing with corner label */ |
|||
.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { |
|||
padding-right: 2.5em !important; |
|||
} |
|||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { |
|||
padding-right: 3.25em !important; |
|||
} |
|||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { |
|||
margin-right: 1.25em; |
|||
} |
|||
|
|||
/* Left Labeled */ |
|||
.ui[class*="left corner labeled"].labeled.input > input { |
|||
padding-left: 2.5em !important; |
|||
} |
|||
.ui[class*="left corner labeled"].icon.input > input { |
|||
padding-left: 3.25em !important; |
|||
} |
|||
.ui[class*="left corner labeled"].icon.input > .icon { |
|||
margin-left: 1.25em; |
|||
} |
|||
|
|||
/* Corner Label Position */ |
|||
.ui.input > .ui.corner.label { |
|||
top: 1px; |
|||
right: 1px; |
|||
} |
|||
.ui.input > .ui.left.corner.label { |
|||
right: auto; |
|||
left: 1px; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Action |
|||
---------------------*/ |
|||
|
|||
.ui.action.input > .button, |
|||
.ui.action.input > .buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 0 0 auto; |
|||
} |
|||
.ui.action.input > .button, |
|||
.ui.action.input > .buttons > .button { |
|||
padding-top: 0.78571429em; |
|||
padding-bottom: 0.78571429em; |
|||
margin: 0; |
|||
} |
|||
|
|||
/* Button on Right */ |
|||
.ui.action.input:not([class*="left action"]) > input { |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-right-color: transparent !important; |
|||
} |
|||
.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), |
|||
.ui.action.input:not([class*="left action"]) > .button:not(:first-child), |
|||
.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { |
|||
border-radius: 0px; |
|||
} |
|||
.ui.action.input:not([class*="left action"]) > .dropdown:last-child, |
|||
.ui.action.input:not([class*="left action"]) > .button:last-child, |
|||
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { |
|||
border-radius: 0px 0.28571429rem 0.28571429rem 0px; |
|||
} |
|||
|
|||
/* Input Focus */ |
|||
.ui.action.input:not([class*="left action"]) > input:focus { |
|||
border-right-color: #85B7D9 !important; |
|||
} |
|||
|
|||
/* Button on Left */ |
|||
.ui[class*="left action"].input > input { |
|||
border-top-left-radius: 0px !important; |
|||
border-bottom-left-radius: 0px !important; |
|||
border-left-color: transparent !important; |
|||
} |
|||
.ui[class*="left action"].input > .dropdown, |
|||
.ui[class*="left action"].input > .button, |
|||
.ui[class*="left action"].input > .buttons > .button { |
|||
border-radius: 0px; |
|||
} |
|||
.ui[class*="left action"].input > .dropdown:first-child, |
|||
.ui[class*="left action"].input > .button:first-child, |
|||
.ui[class*="left action"].input > .buttons:first-child > .button { |
|||
border-radius: 0.28571429rem 0px 0px 0.28571429rem; |
|||
} |
|||
|
|||
/* Input Focus */ |
|||
.ui[class*="left action"].input > input:focus { |
|||
border-left-color: #85B7D9 !important; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Inverted |
|||
---------------------*/ |
|||
|
|||
|
|||
/* Standard */ |
|||
.ui.inverted.input > input { |
|||
border: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Fluid |
|||
---------------------*/ |
|||
|
|||
.ui.fluid.input { |
|||
display: flex; |
|||
} |
|||
.ui.fluid.input > input { |
|||
width: 0px !important; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Size |
|||
---------------------*/ |
|||
|
|||
.ui.mini.input { |
|||
font-size: 0.78571429em; |
|||
} |
|||
.ui.small.input { |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.input { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.input { |
|||
font-size: 1.14285714em; |
|||
} |
|||
.ui.big.input { |
|||
font-size: 1.28571429em; |
|||
} |
|||
.ui.huge.input { |
|||
font-size: 1.42857143em; |
|||
} |
|||
.ui.massive.input { |
|||
font-size: 1.71428571em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,462 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Item |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.items > .item { |
|||
display: flex; |
|||
margin: 1em 0em; |
|||
width: 100%; |
|||
min-height: 0px; |
|||
background: transparent; |
|||
padding: 0em; |
|||
border: none; |
|||
border-radius: 0rem; |
|||
box-shadow: none; |
|||
transition: box-shadow 0.1s ease; |
|||
z-index: ''; |
|||
} |
|||
.ui.items > .item a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.items { |
|||
margin: 1.5em 0em; |
|||
} |
|||
.ui.items:first-child { |
|||
margin-top: 0em !important; |
|||
} |
|||
.ui.items:last-child { |
|||
margin-bottom: 0em !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.items > .item:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
.ui.items > .item:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.items > .item:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.items > .item > .image { |
|||
position: relative; |
|||
flex: 0 0 auto; |
|||
display: block; |
|||
float: none; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
max-height: ''; |
|||
align-self: top; |
|||
} |
|||
.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: 0rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.items > .item > .content { |
|||
display: block; |
|||
flex: 1 1 auto; |
|||
background: none; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
box-shadow: none; |
|||
font-size: 1em; |
|||
border: none; |
|||
border-radius: 0em; |
|||
} |
|||
.ui.items > .item > .content:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
.ui.items > .item > .image + .content { |
|||
min-width: 0; |
|||
width: auto; |
|||
display: block; |
|||
margin-left: 0em; |
|||
align-self: top; |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.items > .item > .content > .header { |
|||
display: inline-block; |
|||
margin: -0.21425em 0em 0em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
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: middle; |
|||
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: auto; |
|||
font-size: 1em; |
|||
line-height: 1.4285em; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/*-------------- |
|||
Paragraph |
|||
---------------*/ |
|||
|
|||
.ui.items > .item > .content p { |
|||
margin: 0em 0em 0.5em; |
|||
} |
|||
.ui.items > .item > .content p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.items > .item .meta { |
|||
margin: 0.5em 0em 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: 0em; |
|||
} |
|||
.ui.items > .item .meta [class*="right floated"] { |
|||
margin-right: 0em; |
|||
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 0em 0em; |
|||
width: 100%; |
|||
padding: 0em 0em 0em; |
|||
top: 0em; |
|||
left: 0em; |
|||
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 0em; |
|||
} |
|||
.ui.items > .item .extra > [class*="right floated"] { |
|||
margin: 0.25rem 0em 0.25rem 0.5rem; |
|||
} |
|||
.ui.items > .item .extra:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Responsive |
|||
*******************************/ |
|||
|
|||
|
|||
/* Default Image Width */ |
|||
.ui.items > .item > .image:not(.ui) { |
|||
width: 175px; |
|||
} |
|||
|
|||
/* Tablet Only */ |
|||
@media only screen and (min-width: 768px) and (max-width: 991px) { |
|||
.ui.items > .item { |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.items > .item > .image:not(.ui) { |
|||
width: 150px; |
|||
} |
|||
.ui.items > .item > .image + .content { |
|||
display: block; |
|||
padding: 0em 0em 0em 1em; |
|||
} |
|||
} |
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.items:not(.unstackable) > .item { |
|||
flex-direction: column; |
|||
margin: 2em 0em; |
|||
} |
|||
.ui.items:not(.unstackable) > .item > .image { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
.ui.items:not(.unstackable) > .item > .image, |
|||
.ui.items:not(.unstackable) > .item > .image > img { |
|||
max-width: 100% !important; |
|||
width: auto !important; |
|||
max-height: 250px !important; |
|||
} |
|||
.ui.items:not(.unstackable) > .item > .image + .content { |
|||
display: block; |
|||
padding: 1.5em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.items > .item > .image + [class*="top aligned"].content { |
|||
align-self: flex-start; |
|||
} |
|||
.ui.items > .item > .image + [class*="middle aligned"].content { |
|||
align-self: center; |
|||
} |
|||
.ui.items > .item > .image + [class*="bottom aligned"].content { |
|||
align-self: flex-end; |
|||
} |
|||
|
|||
/*-------------- |
|||
Relaxed |
|||
---------------*/ |
|||
|
|||
.ui.relaxed.items > .item { |
|||
margin: 1.5em 0em; |
|||
} |
|||
.ui[class*="very relaxed"].items > .item { |
|||
margin: 2em 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
|
|||
.ui.divided.items > .item { |
|||
border-top: 1px solid rgba(34, 36, 38, 0.15); |
|||
margin: 0em; |
|||
padding: 1em 0em; |
|||
} |
|||
.ui.divided.items > .item:first-child { |
|||
border-top: none; |
|||
margin-top: 0em !important; |
|||
padding-top: 0em !important; |
|||
} |
|||
.ui.divided.items > .item:last-child { |
|||
margin-bottom: 0em !important; |
|||
padding-bottom: 0em !important; |
|||
} |
|||
|
|||
/* Relaxed Divided */ |
|||
.ui.relaxed.divided.items > .item { |
|||
margin: 0em; |
|||
padding: 1.5em 0em; |
|||
} |
|||
.ui[class*="very relaxed"].divided.items > .item { |
|||
margin: 0em; |
|||
padding: 2em 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.items a.item:hover, |
|||
.ui.link.items > .item:hover { |
|||
cursor: pointer; |
|||
} |
|||
.ui.items a.item:hover .content .header, |
|||
.ui.link.items > .item:hover .content .header { |
|||
color: #1e70bf; |
|||
} |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.items > .item { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/*--------------- |
|||
Unstackable |
|||
----------------*/ |
|||
|
|||
@media only screen and (max-width: 767px) { |
|||
.ui.unstackable.items > .item > .image, |
|||
.ui.unstackable.items > .item > .image > img { |
|||
width: 125px !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,949 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - List |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
|
|||
ul.ui.list, |
|||
ol.ui.list, |
|||
.ui.list { |
|||
list-style-type: none; |
|||
margin: 1em 0em; |
|||
padding: 0em 0em; |
|||
} |
|||
ul.ui.list:first-child, |
|||
ol.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
} |
|||
ul.ui.list:last-child, |
|||
ol.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
|
|||
/* List Item */ |
|||
ul.ui.list li, |
|||
ol.ui.list li, |
|||
.ui.list > .item, |
|||
.ui.list .list > .item { |
|||
display: list-item; |
|||
table-layout: fixed; |
|||
list-style-type: none; |
|||
list-style-position: outside; |
|||
padding: 0.21428571em 0em; |
|||
line-height: 1.14285714em; |
|||
} |
|||
ul.ui.list > li:first-child:after, |
|||
ol.ui.list > li:first-child:after, |
|||
.ui.list > .list > .item, |
|||
.ui.list > .item:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
ul.ui.list li:first-child, |
|||
ol.ui.list li:first-child, |
|||
.ui.list .list > .item:first-child, |
|||
.ui.list > .item:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
ul.ui.list li:last-child, |
|||
ol.ui.list li:last-child, |
|||
.ui.list .list > .item:last-child, |
|||
.ui.list > .item:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
/* Child List */ |
|||
ul.ui.list ul, |
|||
ol.ui.list ol, |
|||
.ui.list .list { |
|||
clear: both; |
|||
margin: 0em; |
|||
padding: 0.75em 0em 0.25em 0.5em; |
|||
} |
|||
|
|||
/* Child Item */ |
|||
ul.ui.list ul li, |
|||
ol.ui.list ol li, |
|||
.ui.list .list > .item { |
|||
padding: 0.14285714em 0em; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.list .list > .item > i.icon, |
|||
.ui.list > .item > i.icon { |
|||
display: table-cell; |
|||
margin: 0em; |
|||
padding-top: 0em; |
|||
padding-right: 0.28571429em; |
|||
vertical-align: top; |
|||
transition: color 0.1s ease; |
|||
} |
|||
.ui.list .list > .item > i.icon:only-child, |
|||
.ui.list > .item > i.icon:only-child { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.list .list > .item > .image, |
|||
.ui.list > .item > .image { |
|||
display: table-cell; |
|||
background-color: transparent; |
|||
margin: 0em; |
|||
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; |
|||
} |
|||
.ui.list .list > .item > .image + .content, |
|||
.ui.list .list > .item > .icon + .content, |
|||
.ui.list > .item > .image + .content, |
|||
.ui.list > .item > .icon + .content { |
|||
display: table-cell; |
|||
width: 100%; |
|||
padding: 0em 0em 0em 0.5em; |
|||
vertical-align: top; |
|||
} |
|||
.ui.list .list > .item > img.image + .content, |
|||
.ui.list > .item > img.image + .content { |
|||
display: inline-block; |
|||
width: auto; |
|||
} |
|||
.ui.list .list > .item > .content > .list, |
|||
.ui.list > .item > .content > .list { |
|||
margin-left: 0em; |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.list .list > .item .header, |
|||
.ui.list > .item .header { |
|||
display: block; |
|||
margin: 0em; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
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.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: 0em 1em 0em 0em; |
|||
} |
|||
.ui.list .list > .item [class*="right floated"], |
|||
.ui.list > .item [class*="right floated"] { |
|||
float: right; |
|||
margin: 0em 0em 0em 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 0em; |
|||
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: 0em; |
|||
} |
|||
.ui.menu .ui.list .list > .item:last-child, |
|||
.ui.menu .ui.list > .item:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.list { |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
} |
|||
.ui.horizontal.list > .item { |
|||
display: inline-block; |
|||
margin-left: 1em; |
|||
font-size: 1rem; |
|||
} |
|||
.ui.horizontal.list:not(.celled) > .item:first-child { |
|||
margin-left: 0em !important; |
|||
padding-left: 0em !important; |
|||
} |
|||
.ui.horizontal.list .list { |
|||
padding-left: 0em; |
|||
padding-bottom: 0em; |
|||
} |
|||
.ui.horizontal.list > .item > .image, |
|||
.ui.horizontal.list .list > .item > .image, |
|||
.ui.horizontal.list > .item > .icon, |
|||
.ui.horizontal.list .list > .item > .icon, |
|||
.ui.horizontal.list > .item > .content, |
|||
.ui.horizontal.list .list > .item > .content { |
|||
vertical-align: 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 { |
|||
margin: 0em; |
|||
padding: 0em 0.25em 0em 0em; |
|||
} |
|||
.ui.horizontal.list > .item > .icon, |
|||
.ui.horizontal.list > .item > .icon + .content { |
|||
float: none; |
|||
display: inline-block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Disabled |
|||
--------------------*/ |
|||
|
|||
.ui.list .list > .disabled.item, |
|||
.ui.list > .disabled.item { |
|||
pointer-events: none; |
|||
color: 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 .icon, |
|||
.ui.list > a.item:hover .icon { |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.list .list > a.item > .icon, |
|||
.ui.inverted.list > a.item > .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); |
|||
} |
|||
|
|||
/* 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.link.list.list a.item:hover, |
|||
.ui.link.list.list .item a:not(.ui):hover { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.link.list.list a.item:active, |
|||
.ui.link.list.list .item a:not(.ui):active { |
|||
color: rgba(0, 0, 0, 0.9); |
|||
} |
|||
.ui.link.list.list .active.item, |
|||
.ui.link.list.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.inverted.link.list.list a.item:hover, |
|||
.ui.inverted.link.list.list .item a:not(.ui):hover { |
|||
color: #ffffff; |
|||
} |
|||
.ui.inverted.link.list.list a.item:active, |
|||
.ui.inverted.link.list.list .item a:not(.ui):active { |
|||
color: #ffffff; |
|||
} |
|||
.ui.inverted.link.list.list a.active.item, |
|||
.ui.inverted.link.list.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: 0em; |
|||
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: 0em; |
|||
} |
|||
.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, |
|||
.ui.inverted.selection.list > .item { |
|||
background: transparent; |
|||
color: rgba(255, 255, 255, 0.5); |
|||
} |
|||
.ui.inverted.selection.list > .item:hover, |
|||
.ui.inverted.selection.list > .item:hover { |
|||
background: rgba(255, 255, 255, 0.02); |
|||
color: #ffffff; |
|||
} |
|||
.ui.inverted.selection.list > .item:active, |
|||
.ui.inverted.selection.list > .item:active { |
|||
background: rgba(255, 255, 255, 0.08); |
|||
color: #ffffff; |
|||
} |
|||
.ui.inverted.selection.list > .item.active, |
|||
.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: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
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: 0em; |
|||
padding-right: 0em; |
|||
} |
|||
.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; |
|||
-moz-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: '•'; |
|||
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 { |
|||
padding-left: 1.25rem; |
|||
} |
|||
|
|||
/* Horizontal Bulleted */ |
|||
ul.ui.horizontal.bulleted.list, |
|||
.ui.horizontal.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li, |
|||
.ui.horizontal.bulleted.list > .item { |
|||
margin-left: 1.75rem; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child, |
|||
.ui.horizontal.bulleted.list > .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li::before, |
|||
.ui.horizontal.bulleted.list > .item::before { |
|||
color: 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, |
|||
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; |
|||
-moz-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], |
|||
.ui.ordered.list > .item[data-value] { |
|||
content: attr(data-value); |
|||
} |
|||
ol.ui.list li[value]:before { |
|||
content: attr(value); |
|||
} |
|||
|
|||
/* Child Lists */ |
|||
ol.ui.list ol, |
|||
.ui.ordered.list .list { |
|||
margin-left: 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: 0em; |
|||
} |
|||
ol.ui.horizontal.list li:before, |
|||
.ui.ordered.horizontal.list .list > .item:before, |
|||
.ui.ordered.horizontal.list > .item:before { |
|||
position: static; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
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 { |
|||
margin-left: 0em; |
|||
padding-left: 0em; |
|||
} |
|||
.ui.divided.bulleted.list > .item:not(.horizontal) { |
|||
padding-left: 1.25rem; |
|||
} |
|||
|
|||
/* Divided Ordered */ |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.ordered.list .list > .item, |
|||
.ui.divided.ordered.list > .item { |
|||
padding-left: 1.25rem; |
|||
} |
|||
.ui.divided.ordered.list .item .list { |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
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: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
/* Divided horizontal */ |
|||
.ui.divided.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.horizontal.list > .item:not(:first-child) { |
|||
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-left: 1px solid rgba(34, 36, 38, 0.15); |
|||
margin: 0em; |
|||
line-height: 0.6; |
|||
} |
|||
.ui.horizontal.divided.list > .item:first-child { |
|||
border-left: none; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.divided.inverted.list > .item, |
|||
.ui.divided.inverted.list > .list, |
|||
.ui.divided.inverted.horizontal.list > .item { |
|||
border-color: 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: 0px; |
|||
} |
|||
.ui.celled.list .list > .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Celled Bulleted */ |
|||
.ui.celled.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.bulleted.list .list > .item, |
|||
.ui.celled.bulleted.list > .item { |
|||
padding-left: 1.25rem; |
|||
} |
|||
.ui.celled.bulleted.list .item .list { |
|||
margin-left: -1.25rem; |
|||
margin-right: -1.25rem; |
|||
padding-bottom: 0.21428571em; |
|||
} |
|||
|
|||
/* Celled Ordered */ |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.ordered.list .list > .item, |
|||
.ui.celled.ordered.list > .item { |
|||
padding-left: 1.25rem; |
|||
} |
|||
.ui.celled.ordered.list .item .list { |
|||
margin-left: 0em; |
|||
margin-right: 0em; |
|||
padding-bottom: 0.21428571em; |
|||
} |
|||
.ui.celled.ordered.list .list > .item { |
|||
padding-left: 1em; |
|||
} |
|||
|
|||
/* Celled Horizontal */ |
|||
.ui.horizontal.celled.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.horizontal.celled.list .list > .item, |
|||
.ui.horizontal.celled.list > .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(34, 36, 38, 0.15); |
|||
margin: 0em; |
|||
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: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
.ui.celled.inverted.horizontal.list .list > .item, |
|||
.ui.celled.inverted.horizontal.list > .item { |
|||
border-color: 1px solid 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.mini.list { |
|||
font-size: 0.78571429em; |
|||
} |
|||
.ui.tiny.list { |
|||
font-size: 0.85714286em; |
|||
} |
|||
.ui.small.list { |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.list { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.list { |
|||
font-size: 1.14285714em; |
|||
} |
|||
.ui.big.list { |
|||
font-size: 1.28571429em; |
|||
} |
|||
.ui.huge.list { |
|||
font-size: 1.42857143em; |
|||
} |
|||
.ui.massive.list { |
|||
font-size: 1.71428571em; |
|||
} |
|||
.ui.mini.horizontal.list .list > .item, |
|||
.ui.mini.horizontal.list > .item { |
|||
font-size: 0.78571429rem; |
|||
} |
|||
.ui.tiny.horizontal.list .list > .item, |
|||
.ui.tiny.horizontal.list > .item { |
|||
font-size: 0.85714286rem; |
|||
} |
|||
.ui.small.horizontal.list .list > .item, |
|||
.ui.small.horizontal.list > .item { |
|||
font-size: 0.92857143rem; |
|||
} |
|||
.ui.horizontal.list .list > .item, |
|||
.ui.horizontal.list > .item { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.horizontal.list .list > .item, |
|||
.ui.large.horizontal.list > .item { |
|||
font-size: 1.14285714rem; |
|||
} |
|||
.ui.big.horizontal.list .list > .item, |
|||
.ui.big.horizontal.list > .item { |
|||
font-size: 1.28571429rem; |
|||
} |
|||
.ui.huge.horizontal.list .list > .item, |
|||
.ui.huge.horizontal.list > .item { |
|||
font-size: 1.42857143rem; |
|||
} |
|||
.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,340 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Loader |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Loader |
|||
*******************************/ |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.loader { |
|||
display: none; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: 0px; |
|||
text-align: center; |
|||
z-index: 1000; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
} |
|||
|
|||
/* Static Shape */ |
|||
.ui.loader:before { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 0%; |
|||
left: 50%; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 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%; |
|||
-webkit-animation: loader 0.6s linear; |
|||
animation: loader 0.6s linear; |
|||
-webkit-animation-iteration-count: infinite; |
|||
animation-iteration-count: infinite; |
|||
border-radius: 500rem; |
|||
border-color: #767676 transparent transparent; |
|||
border-style: solid; |
|||
border-width: 0.2em; |
|||
box-shadow: 0px 0px 0px 1px transparent; |
|||
} |
|||
|
|||
/* Active Animation */ |
|||
@-webkit-keyframes loader { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
@keyframes loader { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
/* Sizes */ |
|||
.ui.mini.loader:before, |
|||
.ui.mini.loader:after { |
|||
width: 1rem; |
|||
height: 1rem; |
|||
margin: 0em 0em 0em -0.5rem; |
|||
} |
|||
.ui.tiny.loader:before, |
|||
.ui.tiny.loader:after { |
|||
width: 1.14285714rem; |
|||
height: 1.14285714rem; |
|||
margin: 0em 0em 0em -0.57142857rem; |
|||
} |
|||
.ui.small.loader:before, |
|||
.ui.small.loader:after { |
|||
width: 1.71428571rem; |
|||
height: 1.71428571rem; |
|||
margin: 0em 0em 0em -0.85714286rem; |
|||
} |
|||
.ui.loader:before, |
|||
.ui.loader:after { |
|||
width: 2.28571429rem; |
|||
height: 2.28571429rem; |
|||
margin: 0em 0em 0em -1.14285714rem; |
|||
} |
|||
.ui.large.loader:before, |
|||
.ui.large.loader:after { |
|||
width: 3.42857143rem; |
|||
height: 3.42857143rem; |
|||
margin: 0em 0em 0em -1.71428571rem; |
|||
} |
|||
.ui.big.loader:before, |
|||
.ui.big.loader:after { |
|||
width: 3.71428571rem; |
|||
height: 3.71428571rem; |
|||
margin: 0em 0em 0em -1.85714286rem; |
|||
} |
|||
.ui.huge.loader:before, |
|||
.ui.huge.loader:after { |
|||
width: 4.14285714rem; |
|||
height: 4.14285714rem; |
|||
margin: 0em 0em 0em -2.07142857rem; |
|||
} |
|||
.ui.massive.loader:before, |
|||
.ui.massive.loader:after { |
|||
width: 4.57142857rem; |
|||
height: 4.57142857rem; |
|||
margin: 0em 0em 0em -2.28571429rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
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:before { |
|||
border-color: rgba(255, 255, 255, 0.15); |
|||
} |
|||
.ui.dimmer .ui.loader:after { |
|||
border-color: #FFFFFF transparent transparent; |
|||
} |
|||
|
|||
/* White Dimmer (Inverted) */ |
|||
.ui.inverted.dimmer .ui.loader { |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
.ui.inverted.dimmer .ui.loader:before { |
|||
border-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.inverted.dimmer .ui.loader:after { |
|||
border-color: #767676 transparent transparent; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Text |
|||
--------------------*/ |
|||
|
|||
.ui.text.loader { |
|||
width: auto !important; |
|||
height: auto !important; |
|||
text-align: center; |
|||
font-style: normal; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.indeterminate.loader:after { |
|||
animation-direction: reverse; |
|||
-webkit-animation-duration: 1.2s; |
|||
animation-duration: 1.2s; |
|||
} |
|||
.ui.loader.active, |
|||
.ui.loader.visible { |
|||
display: block; |
|||
} |
|||
.ui.loader.disabled, |
|||
.ui.loader.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
|
|||
/* Loader */ |
|||
.ui.inverted.dimmer .ui.mini.loader, |
|||
.ui.mini.loader { |
|||
width: 1rem; |
|||
height: 1rem; |
|||
font-size: 0.78571429em; |
|||
} |
|||
.ui.inverted.dimmer .ui.tiny.loader, |
|||
.ui.tiny.loader { |
|||
width: 1.14285714rem; |
|||
height: 1.14285714rem; |
|||
font-size: 0.85714286em; |
|||
} |
|||
.ui.inverted.dimmer .ui.small.loader, |
|||
.ui.small.loader { |
|||
width: 1.71428571rem; |
|||
height: 1.71428571rem; |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.inverted.dimmer .ui.loader, |
|||
.ui.loader { |
|||
width: 2.28571429rem; |
|||
height: 2.28571429rem; |
|||
font-size: 1em; |
|||
} |
|||
.ui.inverted.dimmer .ui.large.loader, |
|||
.ui.large.loader { |
|||
width: 3.42857143rem; |
|||
height: 3.42857143rem; |
|||
font-size: 1.14285714em; |
|||
} |
|||
.ui.inverted.dimmer .ui.big.loader, |
|||
.ui.big.loader { |
|||
width: 3.71428571rem; |
|||
height: 3.71428571rem; |
|||
font-size: 1.28571429em; |
|||
} |
|||
.ui.inverted.dimmer .ui.huge.loader, |
|||
.ui.huge.loader { |
|||
width: 4.14285714rem; |
|||
height: 4.14285714rem; |
|||
font-size: 1.42857143em; |
|||
} |
|||
.ui.inverted.dimmer .ui.massive.loader, |
|||
.ui.massive.loader { |
|||
width: 4.57142857rem; |
|||
height: 4.57142857rem; |
|||
font-size: 1.71428571em; |
|||
} |
|||
|
|||
/* Text Loader */ |
|||
.ui.mini.text.loader { |
|||
min-width: 1rem; |
|||
padding-top: 1.78571429rem; |
|||
} |
|||
.ui.tiny.text.loader { |
|||
min-width: 1.14285714rem; |
|||
padding-top: 1.92857143rem; |
|||
} |
|||
.ui.small.text.loader { |
|||
min-width: 1.71428571rem; |
|||
padding-top: 2.5rem; |
|||
} |
|||
.ui.text.loader { |
|||
min-width: 2.28571429rem; |
|||
padding-top: 3.07142857rem; |
|||
} |
|||
.ui.large.text.loader { |
|||
min-width: 3.42857143rem; |
|||
padding-top: 4.21428571rem; |
|||
} |
|||
.ui.big.text.loader { |
|||
min-width: 3.71428571rem; |
|||
padding-top: 4.5rem; |
|||
} |
|||
.ui.huge.text.loader { |
|||
min-width: 4.14285714rem; |
|||
padding-top: 4.92857143rem; |
|||
} |
|||
.ui.massive.text.loader { |
|||
min-width: 4.57142857rem; |
|||
padding-top: 5.35714286rem; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.loader { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.inverted.loader:before { |
|||
border-color: rgba(255, 255, 255, 0.15); |
|||
} |
|||
.ui.inverted.loader:after { |
|||
border-top-color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inline |
|||
--------------------*/ |
|||
|
|||
.ui.inline.loader { |
|||
position: relative; |
|||
vertical-align: middle; |
|||
margin: 0em; |
|||
left: 0em; |
|||
top: 0em; |
|||
transform: none; |
|||
} |
|||
.ui.inline.loader.active, |
|||
.ui.inline.loader.visible { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* Centered Inline */ |
|||
.ui.centered.inline.loader.active, |
|||
.ui.centered.inline.loader.visible { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Loader |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:0;text-align:center;z-index:1000;transform:translateX(-50%) translateY(-50%)}.ui.loader:before{position:absolute;content:'';top:0;left:50%;width:100%;height:100%;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loader:after{position:absolute;content:'';top:0;left:50%;width:100%;height:100%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;box-shadow:0 0 0 1px transparent}@-webkit-keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}.ui.mini.loader:after,.ui.mini.loader:before{width:1rem;height:1rem;margin:0 0 0 -.5rem}.ui.tiny.loader:after,.ui.tiny.loader:before{width:1.14285714rem;height:1.14285714rem;margin:0 0 0 -.57142857rem}.ui.small.loader:after,.ui.small.loader:before{width:1.71428571rem;height:1.71428571rem;margin:0 0 0 -.85714286rem}.ui.loader:after,.ui.loader:before{width:2.28571429rem;height:2.28571429rem;margin:0 0 0 -1.14285714rem}.ui.large.loader:after,.ui.large.loader:before{width:3.42857143rem;height:3.42857143rem;margin:0 0 0 -1.71428571rem}.ui.big.loader:after,.ui.big.loader:before{width:3.71428571rem;height:3.71428571rem;margin:0 0 0 -1.85714286rem}.ui.huge.loader:after,.ui.huge.loader:before{width:4.14285714rem;height:4.14285714rem;margin:0 0 0 -2.07142857rem}.ui.massive.loader:after,.ui.massive.loader:before{width:4.57142857rem;height:4.57142857rem;margin:0 0 0 -2.28571429rem}.ui.dimmer .loader{display:block}.ui.dimmer .ui.loader{color:rgba(255,255,255,.9)}.ui.dimmer .ui.loader:before{border-color:rgba(255,255,255,.15)}.ui.dimmer .ui.loader:after{border-color:#fff transparent transparent}.ui.inverted.dimmer .ui.loader{color:rgba(0,0,0,.87)}.ui.inverted.dimmer .ui.loader:before{border-color:rgba(0,0,0,.1)}.ui.inverted.dimmer .ui.loader:after{border-color:#767676 transparent transparent}.ui.text.loader{width:auto!important;height:auto!important;text-align:center;font-style:normal}.ui.indeterminate.loader:after{animation-direction:reverse;-webkit-animation-duration:1.2s;animation-duration:1.2s}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.inverted.dimmer .ui.mini.loader,.ui.mini.loader{width:1rem;height:1rem;font-size:.78571429em}.ui.inverted.dimmer .ui.tiny.loader,.ui.tiny.loader{width:1.14285714rem;height:1.14285714rem;font-size:.85714286em}.ui.inverted.dimmer .ui.small.loader,.ui.small.loader{width:1.71428571rem;height:1.71428571rem;font-size:.92857143em}.ui.inverted.dimmer .ui.loader,.ui.loader{width:2.28571429rem;height:2.28571429rem;font-size:1em}.ui.inverted.dimmer .ui.large.loader,.ui.large.loader{width:3.42857143rem;height:3.42857143rem;font-size:1.14285714em}.ui.big.loader,.ui.inverted.dimmer .ui.big.loader{width:3.71428571rem;height:3.71428571rem;font-size:1.28571429em}.ui.huge.loader,.ui.inverted.dimmer .ui.huge.loader{width:4.14285714rem;height:4.14285714rem;font-size:1.42857143em}.ui.inverted.dimmer .ui.massive.loader,.ui.massive.loader{width:4.57142857rem;height:4.57142857rem;font-size:1.71428571em}.ui.mini.text.loader{min-width:1rem;padding-top:1.78571429rem}.ui.tiny.text.loader{min-width:1.14285714rem;padding-top:1.92857143rem}.ui.small.text.loader{min-width:1.71428571rem;padding-top:2.5rem}.ui.text.loader{min-width:2.28571429rem;padding-top:3.07142857rem}.ui.large.text.loader{min-width:3.42857143rem;padding-top:4.21428571rem}.ui.big.text.loader{min-width:3.71428571rem;padding-top:4.5rem}.ui.huge.text.loader{min-width:4.14285714rem;padding-top:4.92857143rem}.ui.massive.text.loader{min-width:4.57142857rem;padding-top:5.35714286rem}.ui.inverted.loader{color:rgba(255,255,255,.9)}.ui.inverted.loader:before{border-color:rgba(255,255,255,.15)}.ui.inverted.loader:after{border-top-color:#fff}.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}.ui.centered.inline.loader.active,.ui.centered.inline.loader.visible{display:block;margin-left:auto;margin-right:auto} |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,468 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Message |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Message |
|||
*******************************/ |
|||
|
|||
.ui.message { |
|||
position: relative; |
|||
min-height: 1em; |
|||
margin: 1em 0em; |
|||
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: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.message:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
|
|||
/* Header */ |
|||
.ui.message .header { |
|||
display: block; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
font-weight: bold; |
|||
margin: -0.14285714em 0em 0rem 0em; |
|||
} |
|||
|
|||
/* Default font size */ |
|||
.ui.message .header:not(.ui) { |
|||
font-size: 1.14285714em; |
|||
} |
|||
|
|||
/* Paragraph */ |
|||
.ui.message p { |
|||
opacity: 0.85; |
|||
margin: 0.75em 0em; |
|||
} |
|||
.ui.message p:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.message .header + p { |
|||
margin-top: 0.25em; |
|||
} |
|||
|
|||
/* List */ |
|||
.ui.message .list:not(.ui) { |
|||
text-align: left; |
|||
padding: 0em; |
|||
opacity: 0.85; |
|||
list-style-position: inside; |
|||
margin: 0.5em 0em 0em; |
|||
} |
|||
.ui.message .list:not(.ui):first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message .list:not(.ui):last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.message .list:not(.ui) li { |
|||
position: relative; |
|||
list-style-type: none; |
|||
margin: 0em 0em 0.3em 1em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message .list:not(.ui) li:before { |
|||
position: absolute; |
|||
content: '•'; |
|||
left: -1em; |
|||
height: 100%; |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.message .list:not(.ui) li:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.message > .icon { |
|||
margin-right: 0.6em; |
|||
} |
|||
|
|||
/* Close Icon */ |
|||
.ui.message > .close.icon { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
margin: 0em; |
|||
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: 0em; |
|||
} |
|||
.ui.message > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Coupling |
|||
*******************************/ |
|||
|
|||
.ui.dropdown .menu > .message { |
|||
margin: 0px -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 |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Compact |
|||
---------------*/ |
|||
|
|||
.ui.compact.message { |
|||
display: inline-block; |
|||
} |
|||
.ui.compact.icon.message { |
|||
display: inline-flex; |
|||
} |
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
.ui.attached.message { |
|||
margin-bottom: -1px; |
|||
border-radius: 0.28571429rem 0.28571429rem 0em 0em; |
|||
box-shadow: 0em 0em 0em 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: 0em; |
|||
} |
|||
.ui.bottom.attached.message { |
|||
margin-top: -1px; |
|||
border-radius: 0em 0em 0.28571429rem 0.28571429rem; |
|||
box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 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 > .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 .icon:not(.close) + .content { |
|||
padding-left: 0rem; |
|||
} |
|||
.ui.icon.message .circular.icon { |
|||
width: 1em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.message { |
|||
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); |
|||
} |
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.message { |
|||
background-color: #1B1C1D; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/*-------------- |
|||
Types |
|||
---------------*/ |
|||
|
|||
|
|||
/* Positive */ |
|||
.ui.positive.message { |
|||
background-color: #FCFFF5; |
|||
color: #2C662D; |
|||
} |
|||
.ui.positive.message, |
|||
.ui.attached.positive.message { |
|||
box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.positive.message .header { |
|||
color: #1A531B; |
|||
} |
|||
|
|||
/* Negative */ |
|||
.ui.negative.message { |
|||
background-color: #FFF6F6; |
|||
color: #9F3A38; |
|||
} |
|||
.ui.negative.message, |
|||
.ui.attached.negative.message { |
|||
box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.negative.message .header { |
|||
color: #912D2B; |
|||
} |
|||
|
|||
/* Info */ |
|||
.ui.info.message { |
|||
background-color: #F8FFFF; |
|||
color: #276F86; |
|||
} |
|||
.ui.info.message, |
|||
.ui.attached.info.message { |
|||
box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.info.message .header { |
|||
color: #0E566C; |
|||
} |
|||
|
|||
/* Warning */ |
|||
.ui.warning.message { |
|||
background-color: #FFFAF3; |
|||
color: #573A08; |
|||
} |
|||
.ui.warning.message, |
|||
.ui.attached.warning.message { |
|||
box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.warning.message .header { |
|||
color: #794B02; |
|||
} |
|||
|
|||
/* Error */ |
|||
.ui.error.message { |
|||
background-color: #FFF6F6; |
|||
color: #9F3A38; |
|||
} |
|||
.ui.error.message, |
|||
.ui.attached.error.message { |
|||
box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.error.message .header { |
|||
color: #912D2B; |
|||
} |
|||
|
|||
/* Success */ |
|||
.ui.success.message { |
|||
background-color: #FCFFF5; |
|||
color: #2C662D; |
|||
} |
|||
.ui.success.message, |
|||
.ui.attached.success.message { |
|||
box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.success.message .header { |
|||
color: #1A531B; |
|||
} |
|||
|
|||
/* Colors */ |
|||
.ui.inverted.message, |
|||
.ui.black.message { |
|||
background-color: #1B1C1D; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.red.message { |
|||
background-color: #FFE8E6; |
|||
color: #DB2828; |
|||
box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.red.message .header { |
|||
color: #c82121; |
|||
} |
|||
.ui.orange.message { |
|||
background-color: #FFEDDE; |
|||
color: #F2711C; |
|||
box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.orange.message .header { |
|||
color: #e7640d; |
|||
} |
|||
.ui.yellow.message { |
|||
background-color: #FFF8DB; |
|||
color: #B58105; |
|||
box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.yellow.message .header { |
|||
color: #9c6f04; |
|||
} |
|||
.ui.olive.message { |
|||
background-color: #FBFDEF; |
|||
color: #8ABC1E; |
|||
box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.olive.message .header { |
|||
color: #7aa61a; |
|||
} |
|||
.ui.green.message { |
|||
background-color: #E5F9E7; |
|||
color: #1EBC30; |
|||
box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.green.message .header { |
|||
color: #1aa62a; |
|||
} |
|||
.ui.teal.message { |
|||
background-color: #E1F7F7; |
|||
color: #10A3A3; |
|||
box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.teal.message .header { |
|||
color: #0e8c8c; |
|||
} |
|||
.ui.blue.message { |
|||
background-color: #DFF0FF; |
|||
color: #2185D0; |
|||
box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.blue.message .header { |
|||
color: #1e77ba; |
|||
} |
|||
.ui.violet.message { |
|||
background-color: #EAE7FF; |
|||
color: #6435C9; |
|||
box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.violet.message .header { |
|||
color: #5a30b5; |
|||
} |
|||
.ui.purple.message { |
|||
background-color: #F6E7FF; |
|||
color: #A333C8; |
|||
box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.purple.message .header { |
|||
color: #922eb4; |
|||
} |
|||
.ui.pink.message { |
|||
background-color: #FFE3FB; |
|||
color: #E03997; |
|||
box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.pink.message .header { |
|||
color: #dd238b; |
|||
} |
|||
.ui.brown.message { |
|||
background-color: #F1E2D3; |
|||
color: #A5673F; |
|||
box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.brown.message .header { |
|||
color: #935b38; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.mini.message { |
|||
font-size: 0.78571429em; |
|||
} |
|||
.ui.tiny.message { |
|||
font-size: 0.85714286em; |
|||
} |
|||
.ui.small.message { |
|||
font-size: 0.92857143em; |
|||
} |
|||
.ui.message { |
|||
font-size: 1em; |
|||
} |
|||
.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,586 @@ |
|||
/*! |
|||
* # Semantic UI 2.5.0 - Modal |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Modal |
|||
*******************************/ |
|||
|
|||
.ui.modal { |
|||
position: absolute; |
|||
display: none; |
|||
z-index: 1001; |
|||
text-align: left; |
|||
background: #FFFFFF; |
|||
border: none; |
|||
box-shadow: 1px 3px 3px 0px 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; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
will-change: top, left, margin, transform, opacity; |
|||
} |
|||
.ui.modal > :first-child:not(.icon), |
|||
.ui.modal > .icon:first-child + * { |
|||
border-top-left-radius: 0.28571429rem; |
|||
border-top-right-radius: 0.28571429rem; |
|||
} |
|||
.ui.modal > :last-child { |
|||
border-bottom-left-radius: 0.28571429rem; |
|||
border-bottom-right-radius: 0.28571429rem; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
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: #FFFFFF; |
|||
width: 2.25rem; |
|||
height: 2.25rem; |
|||
padding: 0.625rem 0rem 0rem 0rem; |
|||
} |
|||
.ui.modal > .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Header |
|||
---------------*/ |
|||
|
|||
.ui.modal > .header { |
|||
display: block; |
|||
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
background: #FFFFFF; |
|||
margin: 0em; |
|||
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: #FFFFFF; |
|||
} |
|||
.ui.modal > .image.content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.modal > .content > .image { |
|||
display: block; |
|||
flex: 0 1 auto; |
|||
width: ''; |
|||
align-self: top; |
|||
} |
|||
.ui.modal > [class*="top aligned"] { |
|||
align-self: top; |
|||
} |
|||
.ui.modal > [class*="middle aligned"] { |
|||
align-self: middle; |
|||
} |
|||
.ui.modal > [class*="stretched"] { |
|||
align-self: stretch; |
|||
} |
|||
|
|||
/* Description */ |
|||
.ui.modal > .content > .description { |
|||
display: block; |
|||
flex: 1 0 auto; |
|||
min-width: 0px; |
|||
align-self: top; |
|||
} |
|||
.ui.modal > .content > .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: 0em; |
|||
opacity: 1; |
|||
width: auto; |
|||
line-height: 1; |
|||
font-size: 8rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Actions |
|||
---------------*/ |
|||
|
|||
.ui.modal > .actions { |
|||
background: #F9FAFB; |
|||
padding: 1rem 1rem; |
|||
border-top: 1px solid rgba(34, 36, 38, 0.15); |
|||
text-align: right; |
|||
} |
|||
.ui.modal .actions > .button { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
|
|||
/* Modal Width */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.modal { |
|||
width: 95%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
.ui.modal { |
|||
width: 88%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
.ui.modal { |
|||
width: 850px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.modal { |
|||
width: 900px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
.ui.modal { |
|||
width: 950px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
/* Tablet and Mobile */ |
|||
@media only screen and (max-width: 991px) { |
|||
.ui.modal > .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: 767px) { |
|||
.ui.modal > .header { |
|||
padding: 0.75rem 1rem !important; |
|||
padding-right: 2.25rem !important; |
|||
} |
|||
.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: 0em auto !important; |
|||
text-align: center; |
|||
padding: 0rem 0rem 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: 0em !important; |
|||
padding: 1rem 0rem !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: 0em; |
|||
box-shadow: none !important; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.basic.modal > .header, |
|||
.ui.basic.modal > .content, |
|||
.ui.basic.modal > .actions { |
|||
background-color: transparent; |
|||
} |
|||
.ui.basic.modal > .header { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.basic.modal > .close { |
|||
top: 1rem; |
|||
right: 1.5rem; |
|||
} |
|||
.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.modal, |
|||
.ui.legacy.page.dimmer > .ui.modal { |
|||
top: 50%; |
|||
left: 50%; |
|||
} |
|||
.ui.legacy.page.dimmer > .ui.scrolling.modal, |
|||
.ui.page.dimmer > .ui.scrolling.legacy.modal, |
|||
.ui.top.aligned.legacy.page.dimmer > .ui.modal, |
|||
.ui.top.aligned.dimmer > .ui.legacy.modal { |
|||
top: auto; |
|||
} |
|||
|
|||
/* Tablet and Mobile */ |
|||
@media only screen and (max-width: 991px) { |
|||
.ui.basic.modal > .close { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.loading.modal { |
|||
display: block; |
|||
visibility: hidden; |
|||
z-index: -1; |
|||
} |
|||
.ui.active.modal { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Top Aligned |
|||
---------------*/ |
|||
|
|||
|
|||
/* Top Aligned Modal */ |
|||
.modals.dimmer[class*="top aligned"] .modal { |
|||
margin: 5vh auto; |
|||
} |
|||
@media only screen and (max-width: 767px) { |
|||
.modals.dimmer[class*="top aligned"] .modal { |
|||
margin: 1rem auto; |
|||
} |
|||
} |
|||
|
|||
/* Legacy Top Aligned */ |
|||
.legacy.modals.dimmer[class*="top aligned"] { |
|||
padding-top: 5vh; |
|||
} |
|||
@media only screen and (max-width: 767px) { |
|||
.legacy.modals.dimmer[class*="top aligned"] { |
|||
padding-top: 1rem; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Scrolling |
|||
---------------*/ |
|||
|
|||
|
|||
/* Scrolling Dimmer */ |
|||
.scrolling.dimmable.dimmed { |
|||
overflow: hidden; |
|||
} |
|||
.scrolling.dimmable > .dimmer { |
|||
justify-content: flex-start; |
|||
} |
|||
.scrolling.dimmable.dimmed > .dimmer { |
|||
overflow: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
.scrolling.dimmable > .dimmer { |
|||
position: fixed; |
|||
} |
|||
.modals.dimmer .ui.scrolling.modal { |
|||
margin: 1rem auto; |
|||
} |
|||
|
|||
/* Undetached Scrolling */ |
|||
.scrolling.undetached.dimmable.dimmed { |
|||
overflow: auto; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
.scrolling.undetached.dimmable.dimmed > .dimmer { |
|||
overflow: hidden; |
|||
} |
|||
.scrolling.undetached.dimmable .ui.scrolling.modal { |
|||
position: absolute; |
|||
left: 50%; |
|||
margin-top: 1rem !important; |
|||
} |
|||
|
|||
/* Scrolling Content */ |
|||
.ui.modal .scrolling.content { |
|||
max-height: calc(80vh - 10em); |
|||
overflow: auto; |
|||
} |
|||
|
|||
/*-------------- |
|||
Full Screen |
|||
---------------*/ |
|||
|
|||
.ui.fullscreen.modal { |
|||
width: 95% !important; |
|||
margin: 1em auto; |
|||
} |
|||
.ui.fullscreen.modal > .header { |
|||
padding-right: 2.25rem; |
|||
} |
|||
.ui.fullscreen.modal > .close { |
|||
top: 1.0535rem; |
|||
right: 1rem; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.modal { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
/* Mini */ |
|||
.ui.mini.modal > .header:not(.ui) { |
|||
font-size: 1.3em; |
|||
} |
|||
|
|||
/* Mini Modal Width */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.mini.modal { |
|||
width: 95%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
.ui.mini.modal { |
|||
width: 35.2%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
.ui.mini.modal { |
|||
width: 340px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.mini.modal { |
|||
width: 360px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
.ui.mini.modal { |
|||
width: 380px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
/* mini */ |
|||
.ui.small.modal > .header:not(.ui) { |
|||
font-size: 1.3em; |
|||
} |
|||
|
|||
/* Tiny Modal Width */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.tiny.modal { |
|||
width: 95%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
.ui.tiny.modal { |
|||
width: 52.8%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
.ui.tiny.modal { |
|||
width: 510px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.tiny.modal { |
|||
width: 540px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
.ui.tiny.modal { |
|||
width: 570px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
/* Small */ |
|||
.ui.small.modal > .header:not(.ui) { |
|||
font-size: 1.3em; |
|||
} |
|||
|
|||
/* Small Modal Width */ |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.small.modal { |
|||
width: 95%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
.ui.small.modal { |
|||
width: 70.4%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
.ui.small.modal { |
|||
width: 680px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.small.modal { |
|||
width: 720px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
.ui.small.modal { |
|||
width: 760px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
/* Large Modal Width */ |
|||
.ui.large.modal > .header { |
|||
font-size: 1.6em; |
|||
} |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.large.modal { |
|||
width: 95%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
.ui.large.modal { |
|||
width: 88%; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
.ui.large.modal { |
|||
width: 1020px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1200px) { |
|||
.ui.large.modal { |
|||
width: 1080px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
.ui.large.modal { |
|||
width: 1140px; |
|||
margin: 0em 0em 0em 0em; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Site Overrides |
|||
*******************************/ |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue