├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── gulpfile.babel.js
├── icons
├── brand-icons.eot
├── brand-icons.svg
├── brand-icons.ttf
├── brand-icons.woff
├── brand-icons.woff2
├── icons.eot
├── icons.otf
├── icons.svg
├── icons.ttf
├── icons.woff
├── icons.woff2
├── outline-icons.eot
├── outline-icons.svg
├── outline-icons.ttf
├── outline-icons.woff
└── outline-icons.woff2
├── images
└── flags.png
├── js
├── accordion.js
├── api.js
├── checkbox.js
├── colorize.js
├── dimmer.js
├── dropdown.js
├── embed.js
├── form.js
├── modal.js
├── nag.js
├── popup.js
├── progress.js
├── rating.js
├── search.js
├── shape.js
├── sidebar.js
├── site.js
├── state.js
├── sticky.js
├── tab.js
├── transition.js
├── video.js
├── visibility.js
└── visit.js
├── package.json
├── scss
├── collections
│ ├── _all.scss
│ ├── _breadcrumb.scss
│ ├── _form.scss
│ ├── _grid.scss
│ ├── _menu.scss
│ ├── _message.scss
│ └── _table.scss
├── elements
│ ├── _all.scss
│ ├── _button.scss
│ ├── _container.scss
│ ├── _divider.scss
│ ├── _flag.scss
│ ├── _header.scss
│ ├── _icon.scss
│ ├── _image.scss
│ ├── _input.scss
│ ├── _label.scss
│ ├── _list.scss
│ ├── _loader.scss
│ ├── _placeholder.scss
│ ├── _rail.scss
│ ├── _reveal.scss
│ ├── _segment.scss
│ └── _step.scss
├── globals
│ ├── _all.scss
│ ├── _reset.scss
│ ├── _site.scss
│ └── _variables.scss
├── modules
│ ├── _accordion.scss
│ ├── _all.scss
│ ├── _checkbox.scss
│ ├── _dimmer.scss
│ ├── _dropdown.scss
│ ├── _embed.scss
│ ├── _modal.scss
│ ├── _nag.scss
│ ├── _popup.scss
│ ├── _progress.scss
│ ├── _rating.scss
│ ├── _search.scss
│ ├── _shape.scss
│ ├── _sidebar.scss
│ ├── _sticky.scss
│ ├── _tab.scss
│ ├── _transition.scss
│ └── _video.scss
└── views
│ ├── _ad.scss
│ ├── _all.scss
│ ├── _card.scss
│ ├── _comment.scss
│ ├── _feed.scss
│ ├── _item.scss
│ └── _statistic.scss
├── semantic-ui.js
├── semantic-ui.scss
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "targets": {
5 | "node": "current"
6 | }
7 | }]
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .temp/
2 | .idea/
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2017 NiftyCo
2 |
3 | MIT License
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Semantic UI, converted to Sass
2 |
3 | `semantic-ui-sass` is a Sass-powered version of [Semantic UI](http://www.semantic-ui.com) and ready to drop into any project.
4 |
5 | **IMPORTANT:** I no longer use Semantic UI or SASS therefore I don't have time or desire to keep this up-to-date, therefore I am archiving the repo. If anyone is interested in taking this over, find me on Twitter.
6 |
7 | ## NOTE
8 |
9 | The package only has the default theme.
10 |
11 | ## Installation and Usage
12 |
13 | ```shell
14 | yarn add --dev semantic-ui-sass
15 | ```
16 |
17 | ### JavaScript
18 |
19 | ```javascript
20 | import 'semantic-ui-sass';
21 | ```
22 |
23 | ### CSS
24 |
25 | Import Semantic in an SCSS file (for example, `application.scss`) to get all of Semantic's styles
26 |
27 | ```css
28 | @import "semantic-ui";
29 | ```
30 |
31 | ### Custom Font
32 |
33 | ```css
34 | $font-url: 'http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
35 | @import 'semantic-ui';
36 | ```
37 |
38 | ### Skip font loading
39 |
40 | ```css
41 | $import-google-fonts: false;
42 | @import 'semantic-ui';
43 | ```
44 |
45 | ### Custom font family
46 |
47 | ```css
48 | $font-family: 'custom-font-family';
49 | @import 'semantic-ui';
50 | ```
51 |
52 | ### Customizable Variables
53 |
54 | ```css
55 | $import-google-fonts: true !default;
56 | $font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
57 | $font-name: 'Lato' !default;
58 | $font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
59 | $icons-font-path: '../../icons' !default;
60 | $flags-image-path: '../../images' !default;
61 | ```
62 |
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import del from 'del';
3 | import run from 'run-sequence';
4 | import replace from 'gulp-replace';
5 | import { append } from 'gulp-insert';
6 | import { log } from 'gulp-util';
7 | import { clone } from 'gulp-git';
8 |
9 | const SRC_REPO = 'https://github.com/doabit/semantic-ui-sass';
10 | const TEMP_DIR = '.temp';
11 |
12 | gulp.task('clean', () => {
13 | return del(['./.temp', './semantic-ui.scss', './semantic-ui.js', './scss', './icons', './images', './js']);
14 | });
15 |
16 | gulp.task('fetch', (done) => {
17 | clone(SRC_REPO, { args: TEMP_DIR, quiet: true }, done);
18 | });
19 |
20 | gulp.task('move-scss', () => {
21 | return gulp.src(`${TEMP_DIR}/app/assets/stylesheets/semantic-ui/**/*.scss`)
22 | .pipe(replace(/semantic-ui\/icons/g, '#{\$icons-font-path}/icons'))
23 | .pipe(replace(/semantic-ui\/brand-icons/g, '#{\$icons-font-path}/brand-icons'))
24 | .pipe(replace(/semantic-ui\/outline-icons/g, '#{\$icons-font-path}/outline-icons'))
25 | .pipe(replace(/semantic-ui\/flags\.png/g, '#{\$flags-image-path}/flags.png'))
26 | .pipe(replace(/font-url\(/g, 'url('))
27 | .pipe(gulp.dest('./scss/'));
28 | });
29 |
30 | gulp.task('move-semantic', ['move-scss'], () => {
31 | return gulp.src(`${TEMP_DIR}/app/assets/stylesheets/semantic-ui.scss`)
32 | .pipe(replace(/semantic-ui/g, `scss`))
33 | .pipe(gulp.dest('./'));
34 | });
35 |
36 | gulp.task('move-images', () => {
37 | return gulp.src(`${TEMP_DIR}/app/assets/images/semantic-ui/**/*`)
38 | .pipe(gulp.dest('./images/'));
39 | });
40 |
41 | gulp.task('move-icons', () => {
42 | return gulp.src(`${TEMP_DIR}/app/assets/fonts/semantic-ui/**/*`)
43 | .pipe(gulp.dest('./icons/'));
44 | });
45 |
46 | gulp.task('move-javascript', () => {
47 | return gulp.src(`${TEMP_DIR}/app/assets/javascripts/semantic-ui/**/*`)
48 | .pipe(gulp.dest('./js/'));
49 | });
50 |
51 | gulp.task('move-js', ['move-javascript'], () => {
52 | return gulp.src(`${TEMP_DIR}/app/assets/javascripts/semantic-ui.js`)
53 | .pipe(replace(/\/\/= require semantic-ui\/(.+)/g, `require('./js/$1');`))
54 | .pipe(gulp.dest('./'));
55 | });
56 |
57 | gulp.task('append-to-variables', () => {
58 | return gulp.src('./scss/globals/_variables.scss')
59 | .pipe(append(`$icons-font-path: '../../icons' !default;\n`))
60 | .pipe(append(`$flags-image-path: '../../images' !default;\n`))
61 | .pipe(gulp.dest('./scss/globals'));
62 | });
63 |
64 | gulp.task('build', (done) => {
65 | run('clean', 'fetch', ['move-semantic', 'move-images', 'move-icons', 'move-js'], 'append-to-variables', done);
66 | });
67 |
68 | gulp.task('test', () => {
69 | return log('testing...');
70 | });
71 |
72 | gulp.task('release', () => {
73 | return log('releasing...');
74 | });
75 |
--------------------------------------------------------------------------------
/icons/brand-icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/brand-icons.eot
--------------------------------------------------------------------------------
/icons/brand-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/brand-icons.ttf
--------------------------------------------------------------------------------
/icons/brand-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/brand-icons.woff
--------------------------------------------------------------------------------
/icons/brand-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/brand-icons.woff2
--------------------------------------------------------------------------------
/icons/icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/icons.eot
--------------------------------------------------------------------------------
/icons/icons.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/icons.otf
--------------------------------------------------------------------------------
/icons/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/icons.ttf
--------------------------------------------------------------------------------
/icons/icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/icons.woff
--------------------------------------------------------------------------------
/icons/icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/icons.woff2
--------------------------------------------------------------------------------
/icons/outline-icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/outline-icons.eot
--------------------------------------------------------------------------------
/icons/outline-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/outline-icons.ttf
--------------------------------------------------------------------------------
/icons/outline-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/outline-icons.woff
--------------------------------------------------------------------------------
/icons/outline-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/icons/outline-icons.woff2
--------------------------------------------------------------------------------
/images/flags.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aniftyco-archive/semantic-ui-sass/61f8c6ffa5ace5e82879aab8a287548aea4c3983/images/flags.png
--------------------------------------------------------------------------------
/js/colorize.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI - Colorize
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 | ;(function ($, window, document, undefined) {
12 |
13 | "use strict";
14 |
15 | window = (typeof window != 'undefined' && window.Math == Math)
16 | ? window
17 | : (typeof self != 'undefined' && self.Math == Math)
18 | ? self
19 | : Function('return this')()
20 | ;
21 |
22 | $.fn.colorize = function(parameters) {
23 | var
24 | settings = ( $.isPlainObject(parameters) )
25 | ? $.extend(true, {}, $.fn.colorize.settings, parameters)
26 | : $.extend({}, $.fn.colorize.settings),
27 | // hoist arguments
28 | moduleArguments = arguments || false
29 | ;
30 | $(this)
31 | .each(function(instanceIndex) {
32 |
33 | var
34 | $module = $(this),
35 |
36 | mainCanvas = $('')[0],
37 | imageCanvas = $('')[0],
38 | overlayCanvas = $('')[0],
39 |
40 | backgroundImage = new Image(),
41 |
42 | // defs
43 | mainContext,
44 | imageContext,
45 | overlayContext,
46 |
47 | image,
48 | imageName,
49 |
50 | width,
51 | height,
52 |
53 | // shortcuts
54 | colors = settings.colors,
55 | paths = settings.paths,
56 | namespace = settings.namespace,
57 | error = settings.error,
58 |
59 | // boilerplate
60 | instance = $module.data('module-' + namespace),
61 | module
62 | ;
63 |
64 | module = {
65 |
66 | checkPreconditions: function() {
67 | module.debug('Checking pre-conditions');
68 |
69 | if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) {
70 | module.error(error.undefinedColors);
71 | return false;
72 | }
73 | return true;
74 | },
75 |
76 | async: function(callback) {
77 | if(settings.async) {
78 | setTimeout(callback, 0);
79 | }
80 | else {
81 | callback();
82 | }
83 | },
84 |
85 | getMetadata: function() {
86 | module.debug('Grabbing metadata');
87 | image = $module.data('image') || settings.image || undefined;
88 | imageName = $module.data('name') || settings.name || instanceIndex;
89 | width = settings.width || $module.width();
90 | height = settings.height || $module.height();
91 | if(width === 0 || height === 0) {
92 | module.error(error.undefinedSize);
93 | }
94 | },
95 |
96 | initialize: function() {
97 | module.debug('Initializing with colors', colors);
98 | if( module.checkPreconditions() ) {
99 |
100 | module.async(function() {
101 | module.getMetadata();
102 | module.canvas.create();
103 |
104 | module.draw.image(function() {
105 | module.draw.colors();
106 | module.canvas.merge();
107 | });
108 | $module
109 | .data('module-' + namespace, module)
110 | ;
111 | });
112 | }
113 | },
114 |
115 | redraw: function() {
116 | module.debug('Redrawing image');
117 | module.async(function() {
118 | module.canvas.clear();
119 | module.draw.colors();
120 | module.canvas.merge();
121 | });
122 | },
123 |
124 | change: {
125 | color: function(colorName, color) {
126 | module.debug('Changing color', colorName);
127 | if(colors[colorName] === undefined) {
128 | module.error(error.missingColor);
129 | return false;
130 | }
131 | colors[colorName] = color;
132 | module.redraw();
133 | }
134 | },
135 |
136 | canvas: {
137 | create: function() {
138 | module.debug('Creating canvases');
139 |
140 | mainCanvas.width = width;
141 | mainCanvas.height = height;
142 | imageCanvas.width = width;
143 | imageCanvas.height = height;
144 | overlayCanvas.width = width;
145 | overlayCanvas.height = height;
146 |
147 | mainContext = mainCanvas.getContext('2d');
148 | imageContext = imageCanvas.getContext('2d');
149 | overlayContext = overlayCanvas.getContext('2d');
150 |
151 | $module
152 | .append( mainCanvas )
153 | ;
154 | mainContext = $module.children('canvas')[0].getContext('2d');
155 | },
156 | clear: function(context) {
157 | module.debug('Clearing canvas');
158 | overlayContext.fillStyle = '#FFFFFF';
159 | overlayContext.fillRect(0, 0, width, height);
160 | },
161 | merge: function() {
162 | if( !$.isFunction(mainContext.blendOnto) ) {
163 | module.error(error.missingPlugin);
164 | return;
165 | }
166 | mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0);
167 | overlayContext.blendOnto(mainContext, 'multiply');
168 | }
169 | },
170 |
171 | draw: {
172 |
173 | image: function(callback) {
174 | module.debug('Drawing image');
175 | callback = callback || function(){};
176 | if(image) {
177 | backgroundImage.src = image;
178 | backgroundImage.onload = function() {
179 | imageContext.drawImage(backgroundImage, 0, 0);
180 | callback();
181 | };
182 | }
183 | else {
184 | module.error(error.noImage);
185 | callback();
186 | }
187 | },
188 |
189 | colors: function() {
190 | module.debug('Drawing color overlays', colors);
191 | $.each(colors, function(colorName, color) {
192 | settings.onDraw(overlayContext, imageName, colorName, color);
193 | });
194 | }
195 |
196 | },
197 |
198 | debug: function(message, variableName) {
199 | if(settings.debug) {
200 | if(variableName !== undefined) {
201 | console.info(settings.name + ': ' + message, variableName);
202 | }
203 | else {
204 | console.info(settings.name + ': ' + message);
205 | }
206 | }
207 | },
208 | error: function(errorMessage) {
209 | console.warn(settings.name + ': ' + errorMessage);
210 | },
211 | invoke: function(methodName, context, methodArguments) {
212 | var
213 | method
214 | ;
215 | methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
216 |
217 | if(typeof methodName == 'string' && instance !== undefined) {
218 | methodName = methodName.split('.');
219 | $.each(methodName, function(index, name) {
220 | if( $.isPlainObject( instance[name] ) ) {
221 | instance = instance[name];
222 | return true;
223 | }
224 | else if( $.isFunction( instance[name] ) ) {
225 | method = instance[name];
226 | return true;
227 | }
228 | module.error(settings.error.method);
229 | return false;
230 | });
231 | }
232 | return ( $.isFunction( method ) )
233 | ? method.apply(context, methodArguments)
234 | : false
235 | ;
236 | }
237 |
238 | };
239 | if(instance !== undefined && moduleArguments) {
240 | // simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
241 | if(moduleArguments[0] == 'invoke') {
242 | moduleArguments = Array.prototype.slice.call( moduleArguments, 1 );
243 | }
244 | return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
245 | }
246 | // initializing
247 | module.initialize();
248 | })
249 | ;
250 | return this;
251 | };
252 |
253 | $.fn.colorize.settings = {
254 | name : 'Image Colorizer',
255 | debug : true,
256 | namespace : 'colorize',
257 |
258 | onDraw : function(overlayContext, imageName, colorName, color) {},
259 |
260 | // whether to block execution while updating canvas
261 | async : true,
262 | // object containing names and default values of color regions
263 | colors : {},
264 |
265 | metadata: {
266 | image : 'image',
267 | name : 'name'
268 | },
269 |
270 | error: {
271 | noImage : 'No tracing image specified',
272 | undefinedColors : 'No default colors specified.',
273 | missingColor : 'Attempted to change color that does not exist',
274 | missingPlugin : 'Blend onto plug-in must be included',
275 | undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.'
276 | }
277 |
278 | };
279 |
280 | })( jQuery, window, document );
281 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "semantic-ui-sass",
3 | "version": "2.4.2",
4 | "description": "Semantic UI, converted to Sass",
5 | "license": "MIT",
6 | "homepage": "http://www.semantic-ui.com",
7 | "repository": "aniftyco/semantic-ui-sass",
8 | "style": "semantic-ui.scss",
9 | "sass": "semantic-ui.scss",
10 | "main": "semantic-ui.js",
11 | "scripts": {
12 | "build": "gulp build",
13 | "test": "gulp test",
14 | "release": "gulp release"
15 | },
16 | "author": {
17 | "name": "NiftyCo",
18 | "email": "support@anifty.co",
19 | "url": "https://anifty.co"
20 | },
21 | "contributors": [
22 | {
23 | "name": "Josh Manders",
24 | "url": "https://twitter.com/joshmanders"
25 | },
26 | {
27 | "name": "Magnus Nirgi",
28 | "email": "maxcreation@gmail.com"
29 | }
30 | ],
31 | "devDependencies": {
32 | "babel-core": "^6.24.1",
33 | "babel-preset-env": "^1.5.1",
34 | "babel-register": "^6.24.1",
35 | "del": "^2.2.2",
36 | "gulp": "^3.9.1",
37 | "gulp-git": "^2.4.0",
38 | "gulp-insert": "^0.5.0",
39 | "gulp-replace": "^0.5.4",
40 | "gulp-util": "^3.0.8",
41 | "run-sequence": "^1.2.2"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/scss/collections/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'breadcrumb';
2 | @import 'form';
3 | @import 'grid';
4 | @import 'menu';
5 | @import 'message';
6 | @import 'table';
7 |
--------------------------------------------------------------------------------
/scss/collections/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Breadcrumb
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Breadcrumb
14 | *******************************/
15 |
16 | .ui.breadcrumb {
17 | line-height: 1;
18 | display: inline-block;
19 | margin: 0em 0em;
20 | vertical-align: middle;
21 | }
22 | .ui.breadcrumb:first-child {
23 | margin-top: 0em;
24 | }
25 | .ui.breadcrumb:last-child {
26 | margin-bottom: 0em;
27 | }
28 |
29 |
30 | /*******************************
31 | Content
32 | *******************************/
33 |
34 |
35 | /* Divider */
36 | .ui.breadcrumb .divider {
37 | display: inline-block;
38 | opacity: 0.7;
39 | margin: 0em 0.21428571rem 0em;
40 | font-size: 0.92857143em;
41 | color: rgba(0, 0, 0, 0.4);
42 | vertical-align: baseline;
43 | }
44 |
45 | /* Link */
46 | .ui.breadcrumb a {
47 | color: #4183C4;
48 | }
49 | .ui.breadcrumb a:hover {
50 | color: #1e70bf;
51 | }
52 |
53 | /* Icon Divider */
54 | .ui.breadcrumb .icon.divider {
55 | font-size: 0.85714286em;
56 | vertical-align: baseline;
57 | }
58 |
59 | /* Section */
60 | .ui.breadcrumb a.section {
61 | cursor: pointer;
62 | }
63 | .ui.breadcrumb .section {
64 | display: inline-block;
65 | margin: 0em;
66 | padding: 0em;
67 | }
68 |
69 | /* Loose Coupling */
70 | .ui.breadcrumb.segment {
71 | display: inline-block;
72 | padding: 0.78571429em 1em;
73 | }
74 |
75 |
76 | /*******************************
77 | States
78 | *******************************/
79 |
80 | .ui.breadcrumb .active.section {
81 | font-weight: bold;
82 | }
83 |
84 |
85 | /*******************************
86 | Variations
87 | *******************************/
88 |
89 | .ui.mini.breadcrumb {
90 | font-size: 0.78571429rem;
91 | }
92 | .ui.tiny.breadcrumb {
93 | font-size: 0.85714286rem;
94 | }
95 | .ui.small.breadcrumb {
96 | font-size: 0.92857143rem;
97 | }
98 | .ui.breadcrumb {
99 | font-size: 1rem;
100 | }
101 | .ui.large.breadcrumb {
102 | font-size: 1.14285714rem;
103 | }
104 | .ui.big.breadcrumb {
105 | font-size: 1.28571429rem;
106 | }
107 | .ui.huge.breadcrumb {
108 | font-size: 1.42857143rem;
109 | }
110 | .ui.massive.breadcrumb {
111 | font-size: 1.71428571rem;
112 | }
113 |
114 |
115 | /*******************************
116 | Theme Overrides
117 | *******************************/
118 |
119 |
120 |
121 | /*******************************
122 | Site Overrides
123 | *******************************/
124 |
125 |
--------------------------------------------------------------------------------
/scss/collections/_message.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Message
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Message
14 | *******************************/
15 |
16 | .ui.message {
17 | position: relative;
18 | min-height: 1em;
19 | margin: 1em 0em;
20 | background: #F8F8F9;
21 | padding: 1em 1.5em;
22 | line-height: 1.4285em;
23 | color: rgba(0, 0, 0, 0.87);
24 | -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
25 | transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
26 | transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
27 | transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
28 | border-radius: 0.28571429rem;
29 | -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
30 | box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
31 | }
32 | .ui.message:first-child {
33 | margin-top: 0em;
34 | }
35 | .ui.message:last-child {
36 | margin-bottom: 0em;
37 | }
38 |
39 | /*--------------
40 | Content
41 | ---------------*/
42 |
43 |
44 | /* Header */
45 | .ui.message .header {
46 | display: block;
47 | font-family: $font-family;
48 | font-weight: bold;
49 | margin: -0.14285714em 0em 0rem 0em;
50 | }
51 |
52 | /* Default font size */
53 | .ui.message .header:not(.ui) {
54 | font-size: 1.14285714em;
55 | }
56 |
57 | /* Paragraph */
58 | .ui.message p {
59 | opacity: 0.85;
60 | margin: 0.75em 0em;
61 | }
62 | .ui.message p:first-child {
63 | margin-top: 0em;
64 | }
65 | .ui.message p:last-child {
66 | margin-bottom: 0em;
67 | }
68 | .ui.message .header + p {
69 | margin-top: 0.25em;
70 | }
71 |
72 | /* List */
73 | .ui.message .list:not(.ui) {
74 | text-align: left;
75 | padding: 0em;
76 | opacity: 0.85;
77 | list-style-position: inside;
78 | margin: 0.5em 0em 0em;
79 | }
80 | .ui.message .list:not(.ui):first-child {
81 | margin-top: 0em;
82 | }
83 | .ui.message .list:not(.ui):last-child {
84 | margin-bottom: 0em;
85 | }
86 | .ui.message .list:not(.ui) li {
87 | position: relative;
88 | list-style-type: none;
89 | margin: 0em 0em 0.3em 1em;
90 | padding: 0em;
91 | }
92 | .ui.message .list:not(.ui) li:before {
93 | position: absolute;
94 | content: '•';
95 | left: -1em;
96 | height: 100%;
97 | vertical-align: baseline;
98 | }
99 | .ui.message .list:not(.ui) li:last-child {
100 | margin-bottom: 0em;
101 | }
102 |
103 | /* Icon */
104 | .ui.message > .icon {
105 | margin-right: 0.6em;
106 | }
107 |
108 | /* Close Icon */
109 | .ui.message > .close.icon {
110 | cursor: pointer;
111 | position: absolute;
112 | margin: 0em;
113 | top: 0.78575em;
114 | right: 0.5em;
115 | opacity: 0.7;
116 | -webkit-transition: opacity 0.1s ease;
117 | transition: opacity 0.1s ease;
118 | }
119 | .ui.message > .close.icon:hover {
120 | opacity: 1;
121 | }
122 |
123 | /* First / Last Element */
124 | .ui.message > :first-child {
125 | margin-top: 0em;
126 | }
127 | .ui.message > :last-child {
128 | margin-bottom: 0em;
129 | }
130 |
131 |
132 | /*******************************
133 | Coupling
134 | *******************************/
135 |
136 | .ui.dropdown .menu > .message {
137 | margin: 0px -1px;
138 | }
139 |
140 |
141 | /*******************************
142 | States
143 | *******************************/
144 |
145 |
146 | /*--------------
147 | Visible
148 | ---------------*/
149 |
150 | .ui.visible.visible.visible.visible.message {
151 | display: block;
152 | }
153 | .ui.icon.visible.visible.visible.visible.message {
154 | display: -webkit-box;
155 | display: -ms-flexbox;
156 | display: flex;
157 | }
158 |
159 | /*--------------
160 | Hidden
161 | ---------------*/
162 |
163 | .ui.hidden.hidden.hidden.hidden.message {
164 | display: none;
165 | }
166 |
167 |
168 | /*******************************
169 | Variations
170 | *******************************/
171 |
172 |
173 | /*--------------
174 | Compact
175 | ---------------*/
176 |
177 | .ui.compact.message {
178 | display: inline-block;
179 | }
180 | .ui.compact.icon.message {
181 | display: -webkit-inline-box;
182 | display: -ms-inline-flexbox;
183 | display: inline-flex;
184 | }
185 |
186 | /*--------------
187 | Attached
188 | ---------------*/
189 |
190 | .ui.attached.message {
191 | margin-bottom: -1px;
192 | border-radius: 0.28571429rem 0.28571429rem 0em 0em;
193 | -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;
194 | box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset;
195 | margin-left: -1px;
196 | margin-right: -1px;
197 | }
198 | .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
199 | margin-top: -1px;
200 | border-radius: 0em;
201 | }
202 | .ui.bottom.attached.message {
203 | margin-top: -1px;
204 | border-radius: 0em 0em 0.28571429rem 0.28571429rem;
205 | -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
206 | box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
207 | }
208 | .ui.bottom.attached.message:not(:last-child) {
209 | margin-bottom: 1em;
210 | }
211 | .ui.attached.icon.message {
212 | width: auto;
213 | }
214 |
215 | /*--------------
216 | Icon
217 | ---------------*/
218 |
219 | .ui.icon.message {
220 | display: -webkit-box;
221 | display: -ms-flexbox;
222 | display: flex;
223 | width: 100%;
224 | -webkit-box-align: center;
225 | -ms-flex-align: center;
226 | align-items: center;
227 | }
228 | .ui.icon.message > .icon:not(.close) {
229 | display: block;
230 | -webkit-box-flex: 0;
231 | -ms-flex: 0 0 auto;
232 | flex: 0 0 auto;
233 | width: auto;
234 | line-height: 1;
235 | vertical-align: middle;
236 | font-size: 3em;
237 | opacity: 0.8;
238 | }
239 | .ui.icon.message > .content {
240 | display: block;
241 | -webkit-box-flex: 1;
242 | -ms-flex: 1 1 auto;
243 | flex: 1 1 auto;
244 | vertical-align: middle;
245 | }
246 | .ui.icon.message .icon:not(.close) + .content {
247 | padding-left: 0rem;
248 | }
249 | .ui.icon.message .circular.icon {
250 | width: 1em;
251 | }
252 |
253 | /*--------------
254 | Floating
255 | ---------------*/
256 |
257 | .ui.floating.message {
258 | -webkit-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);
259 | 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);
260 | }
261 |
262 | /*--------------
263 | Colors
264 | ---------------*/
265 |
266 | .ui.black.message {
267 | background-color: #1B1C1D;
268 | color: rgba(255, 255, 255, 0.9);
269 | }
270 |
271 | /*--------------
272 | Types
273 | ---------------*/
274 |
275 |
276 | /* Positive */
277 | .ui.positive.message {
278 | background-color: #FCFFF5;
279 | color: #2C662D;
280 | }
281 | .ui.positive.message,
282 | .ui.attached.positive.message {
283 | -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
284 | box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
285 | }
286 | .ui.positive.message .header {
287 | color: #1A531B;
288 | }
289 |
290 | /* Negative */
291 | .ui.negative.message {
292 | background-color: #FFF6F6;
293 | color: #9F3A38;
294 | }
295 | .ui.negative.message,
296 | .ui.attached.negative.message {
297 | -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
298 | box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
299 | }
300 | .ui.negative.message .header {
301 | color: #912D2B;
302 | }
303 |
304 | /* Info */
305 | .ui.info.message {
306 | background-color: #F8FFFF;
307 | color: #276F86;
308 | }
309 | .ui.info.message,
310 | .ui.attached.info.message {
311 | -webkit-box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
312 | box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
313 | }
314 | .ui.info.message .header {
315 | color: #0E566C;
316 | }
317 |
318 | /* Warning */
319 | .ui.warning.message {
320 | background-color: #FFFAF3;
321 | color: #573A08;
322 | }
323 | .ui.warning.message,
324 | .ui.attached.warning.message {
325 | -webkit-box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
326 | box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
327 | }
328 | .ui.warning.message .header {
329 | color: #794B02;
330 | }
331 |
332 | /* Error */
333 | .ui.error.message {
334 | background-color: #FFF6F6;
335 | color: #9F3A38;
336 | }
337 | .ui.error.message,
338 | .ui.attached.error.message {
339 | -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
340 | box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
341 | }
342 | .ui.error.message .header {
343 | color: #912D2B;
344 | }
345 |
346 | /* Success */
347 | .ui.success.message {
348 | background-color: #FCFFF5;
349 | color: #2C662D;
350 | }
351 | .ui.success.message,
352 | .ui.attached.success.message {
353 | -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
354 | box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
355 | }
356 | .ui.success.message .header {
357 | color: #1A531B;
358 | }
359 |
360 | /* Colors */
361 | .ui.inverted.message,
362 | .ui.black.message {
363 | background-color: #1B1C1D;
364 | color: rgba(255, 255, 255, 0.9);
365 | }
366 | .ui.red.message {
367 | background-color: #FFE8E6;
368 | color: #DB2828;
369 | -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
370 | box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
371 | }
372 | .ui.red.message .header {
373 | color: #c82121;
374 | }
375 | .ui.orange.message {
376 | background-color: #FFEDDE;
377 | color: #F2711C;
378 | -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
379 | box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
380 | }
381 | .ui.orange.message .header {
382 | color: #e7640d;
383 | }
384 | .ui.yellow.message {
385 | background-color: #FFF8DB;
386 | color: #B58105;
387 | -webkit-box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
388 | box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
389 | }
390 | .ui.yellow.message .header {
391 | color: #9c6f04;
392 | }
393 | .ui.olive.message {
394 | background-color: #FBFDEF;
395 | color: #8ABC1E;
396 | -webkit-box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
397 | box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
398 | }
399 | .ui.olive.message .header {
400 | color: #7aa61a;
401 | }
402 | .ui.green.message {
403 | background-color: #E5F9E7;
404 | color: #1EBC30;
405 | -webkit-box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
406 | box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
407 | }
408 | .ui.green.message .header {
409 | color: #1aa62a;
410 | }
411 | .ui.teal.message {
412 | background-color: #E1F7F7;
413 | color: #10A3A3;
414 | -webkit-box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
415 | box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
416 | }
417 | .ui.teal.message .header {
418 | color: #0e8c8c;
419 | }
420 | .ui.blue.message {
421 | background-color: #DFF0FF;
422 | color: #2185D0;
423 | -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
424 | box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
425 | }
426 | .ui.blue.message .header {
427 | color: #1e77ba;
428 | }
429 | .ui.violet.message {
430 | background-color: #EAE7FF;
431 | color: #6435C9;
432 | -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
433 | box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
434 | }
435 | .ui.violet.message .header {
436 | color: #5a30b5;
437 | }
438 | .ui.purple.message {
439 | background-color: #F6E7FF;
440 | color: #A333C8;
441 | -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
442 | box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
443 | }
444 | .ui.purple.message .header {
445 | color: #922eb4;
446 | }
447 | .ui.pink.message {
448 | background-color: #FFE3FB;
449 | color: #E03997;
450 | -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
451 | box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
452 | }
453 | .ui.pink.message .header {
454 | color: #dd238b;
455 | }
456 | .ui.brown.message {
457 | background-color: #F1E2D3;
458 | color: #A5673F;
459 | -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
460 | box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
461 | }
462 | .ui.brown.message .header {
463 | color: #935b38;
464 | }
465 |
466 | /*--------------
467 | Sizes
468 | ---------------*/
469 |
470 | .ui.mini.message {
471 | font-size: 0.78571429em;
472 | }
473 | .ui.tiny.message {
474 | font-size: 0.85714286em;
475 | }
476 | .ui.small.message {
477 | font-size: 0.92857143em;
478 | }
479 | .ui.message {
480 | font-size: 1em;
481 | }
482 | .ui.large.message {
483 | font-size: 1.14285714em;
484 | }
485 | .ui.big.message {
486 | font-size: 1.28571429em;
487 | }
488 | .ui.huge.message {
489 | font-size: 1.42857143em;
490 | }
491 | .ui.massive.message {
492 | font-size: 1.71428571em;
493 | }
494 |
495 |
496 | /*******************************
497 | Theme Overrides
498 | *******************************/
499 |
500 |
501 |
502 | /*******************************
503 | Site Overrides
504 | *******************************/
505 |
506 |
--------------------------------------------------------------------------------
/scss/elements/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'button';
2 | @import 'container';
3 | @import 'divider';
4 | @import 'flag';
5 | @import 'header';
6 | @import 'icon';
7 | @import 'image';
8 | @import 'input';
9 | @import 'label';
10 | @import 'list';
11 | @import 'loader';
12 | @import 'placeholder';
13 | @import 'rail';
14 | @import 'reveal';
15 | @import 'segment';
16 | @import 'step';
17 |
--------------------------------------------------------------------------------
/scss/elements/_container.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Container
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Container
14 | *******************************/
15 |
16 |
17 | /* All Sizes */
18 | .ui.container {
19 | display: block;
20 | max-width: 100% !important;
21 | }
22 |
23 | /* Mobile */
24 | @media only screen and (max-width: 767px) {
25 | .ui.container {
26 | width: auto !important;
27 | margin-left: 1em !important;
28 | margin-right: 1em !important;
29 | }
30 | .ui.grid.container {
31 | width: auto !important;
32 | }
33 | .ui.relaxed.grid.container {
34 | width: auto !important;
35 | }
36 | .ui.very.relaxed.grid.container {
37 | width: auto !important;
38 | }
39 | }
40 |
41 | /* Tablet */
42 | @media only screen and (min-width: 768px) and (max-width: 991px) {
43 | .ui.container {
44 | width: 723px;
45 | margin-left: auto !important;
46 | margin-right: auto !important;
47 | }
48 | .ui.grid.container {
49 | width: calc( 723px + 2rem ) !important;
50 | }
51 | .ui.relaxed.grid.container {
52 | width: calc( 723px + 3rem ) !important;
53 | }
54 | .ui.very.relaxed.grid.container {
55 | width: calc( 723px + 5rem ) !important;
56 | }
57 | }
58 |
59 | /* Small Monitor */
60 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
61 | .ui.container {
62 | width: 933px;
63 | margin-left: auto !important;
64 | margin-right: auto !important;
65 | }
66 | .ui.grid.container {
67 | width: calc( 933px + 2rem ) !important;
68 | }
69 | .ui.relaxed.grid.container {
70 | width: calc( 933px + 3rem ) !important;
71 | }
72 | .ui.very.relaxed.grid.container {
73 | width: calc( 933px + 5rem ) !important;
74 | }
75 | }
76 |
77 | /* Large Monitor */
78 | @media only screen and (min-width: 1200px) {
79 | .ui.container {
80 | width: 1127px;
81 | margin-left: auto !important;
82 | margin-right: auto !important;
83 | }
84 | .ui.grid.container {
85 | width: calc( 1127px + 2rem ) !important;
86 | }
87 | .ui.relaxed.grid.container {
88 | width: calc( 1127px + 3rem ) !important;
89 | }
90 | .ui.very.relaxed.grid.container {
91 | width: calc( 1127px + 5rem ) !important;
92 | }
93 | }
94 |
95 |
96 | /*******************************
97 | Types
98 | *******************************/
99 |
100 |
101 | /* Text Container */
102 | .ui.text.container {
103 | font-family: $font-family;
104 | max-width: 700px !important;
105 | line-height: 1.5;
106 | }
107 | .ui.text.container {
108 | font-size: 1.14285714rem;
109 | }
110 |
111 | /* Fluid */
112 | .ui.fluid.container {
113 | width: 100%;
114 | }
115 |
116 |
117 | /*******************************
118 | Variations
119 | *******************************/
120 |
121 | .ui[class*="left aligned"].container {
122 | text-align: left;
123 | }
124 | .ui[class*="center aligned"].container {
125 | text-align: center;
126 | }
127 | .ui[class*="right aligned"].container {
128 | text-align: right;
129 | }
130 | .ui.justified.container {
131 | text-align: justify;
132 | -webkit-hyphens: auto;
133 | -ms-hyphens: auto;
134 | hyphens: auto;
135 | }
136 |
137 |
138 | /*******************************
139 | Theme Overrides
140 | *******************************/
141 |
142 |
143 |
144 | /*******************************
145 | Site Overrides
146 | *******************************/
147 |
148 |
--------------------------------------------------------------------------------
/scss/elements/_divider.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Divider
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Divider
14 | *******************************/
15 |
16 | .ui.divider {
17 | margin: 1rem 0rem;
18 | line-height: 1;
19 | height: 0em;
20 | font-weight: bold;
21 | text-transform: uppercase;
22 | letter-spacing: 0.05em;
23 | color: rgba(0, 0, 0, 0.85);
24 | -webkit-user-select: none;
25 | -moz-user-select: none;
26 | -ms-user-select: none;
27 | user-select: none;
28 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
29 | }
30 |
31 | /*--------------
32 | Basic
33 | ---------------*/
34 |
35 | .ui.divider:not(.vertical):not(.horizontal) {
36 | border-top: 1px solid rgba(34, 36, 38, 0.15);
37 | border-bottom: 1px solid rgba(255, 255, 255, 0.1);
38 | }
39 |
40 | /*--------------
41 | Coupling
42 | ---------------*/
43 |
44 |
45 | /* Allow divider between each column row */
46 | .ui.grid > .column + .divider,
47 | .ui.grid > .row > .column + .divider {
48 | left: auto;
49 | }
50 |
51 | /*--------------
52 | Horizontal
53 | ---------------*/
54 |
55 | .ui.horizontal.divider {
56 | display: table;
57 | white-space: nowrap;
58 | height: auto;
59 | margin: '';
60 | line-height: 1;
61 | text-align: center;
62 | }
63 | .ui.horizontal.divider:before,
64 | .ui.horizontal.divider:after {
65 | content: '';
66 | display: table-cell;
67 | position: relative;
68 | top: 50%;
69 | width: 50%;
70 | background-repeat: no-repeat;
71 | }
72 | .ui.horizontal.divider:before {
73 | background-position: right 1em top 50%;
74 | }
75 | .ui.horizontal.divider:after {
76 | background-position: left 1em top 50%;
77 | }
78 |
79 | /*--------------
80 | Vertical
81 | ---------------*/
82 |
83 | .ui.vertical.divider {
84 | position: absolute;
85 | z-index: 2;
86 | top: 50%;
87 | left: 50%;
88 | margin: 0rem;
89 | padding: 0em;
90 | width: auto;
91 | height: 50%;
92 | line-height: 0em;
93 | text-align: center;
94 | -webkit-transform: translateX(-50%);
95 | transform: translateX(-50%);
96 | }
97 | .ui.vertical.divider:before,
98 | .ui.vertical.divider:after {
99 | position: absolute;
100 | left: 50%;
101 | content: '';
102 | z-index: 3;
103 | border-left: 1px solid rgba(34, 36, 38, 0.15);
104 | border-right: 1px solid rgba(255, 255, 255, 0.1);
105 | width: 0%;
106 | height: calc(100% - 1rem );
107 | }
108 | .ui.vertical.divider:before {
109 | top: -100%;
110 | }
111 | .ui.vertical.divider:after {
112 | top: auto;
113 | bottom: 0px;
114 | }
115 |
116 | /* Inside grid */
117 | @media only screen and (max-width: 767px) {
118 | .ui.stackable.grid .ui.vertical.divider,
119 | .ui.grid .stackable.row .ui.vertical.divider {
120 | display: table;
121 | white-space: nowrap;
122 | height: auto;
123 | margin: '';
124 | overflow: hidden;
125 | line-height: 1;
126 | text-align: center;
127 | position: static;
128 | top: 0;
129 | left: 0;
130 | -webkit-transform: none;
131 | transform: none;
132 | }
133 | .ui.stackable.grid .ui.vertical.divider:before,
134 | .ui.grid .stackable.row .ui.vertical.divider:before,
135 | .ui.stackable.grid .ui.vertical.divider:after,
136 | .ui.grid .stackable.row .ui.vertical.divider:after {
137 | position: static;
138 | left: 0;
139 | border-left: none;
140 | border-right: none;
141 | content: '';
142 | display: table-cell;
143 | position: relative;
144 | top: 50%;
145 | width: 50%;
146 | background-repeat: no-repeat;
147 | }
148 | .ui.stackable.grid .ui.vertical.divider:before,
149 | .ui.grid .stackable.row .ui.vertical.divider:before {
150 | background-position: right 1em top 50%;
151 | }
152 | .ui.stackable.grid .ui.vertical.divider:after,
153 | .ui.grid .stackable.row .ui.vertical.divider:after {
154 | background-position: left 1em top 50%;
155 | }
156 | }
157 |
158 | /*--------------
159 | Icon
160 | ---------------*/
161 |
162 | .ui.divider > .icon {
163 | margin: 0rem;
164 | font-size: 1rem;
165 | height: 1em;
166 | vertical-align: middle;
167 | }
168 |
169 |
170 | /*******************************
171 | Variations
172 | *******************************/
173 |
174 |
175 | /*--------------
176 | Hidden
177 | ---------------*/
178 |
179 | .ui.hidden.divider {
180 | border-color: transparent !important;
181 | }
182 | .ui.hidden.divider:before,
183 | .ui.hidden.divider:after {
184 | display: none;
185 | }
186 |
187 | /*--------------
188 | Inverted
189 | ---------------*/
190 |
191 | .ui.divider.inverted,
192 | .ui.vertical.inverted.divider,
193 | .ui.horizontal.inverted.divider {
194 | color: #FFFFFF;
195 | }
196 | .ui.divider.inverted,
197 | .ui.divider.inverted:after,
198 | .ui.divider.inverted:before {
199 | border-top-color: rgba(34, 36, 38, 0.15) !important;
200 | border-left-color: rgba(34, 36, 38, 0.15) !important;
201 | border-bottom-color: rgba(255, 255, 255, 0.15) !important;
202 | border-right-color: rgba(255, 255, 255, 0.15) !important;
203 | }
204 |
205 | /*--------------
206 | Fitted
207 | ---------------*/
208 |
209 | .ui.fitted.divider {
210 | margin: 0em;
211 | }
212 |
213 | /*--------------
214 | Clearing
215 | ---------------*/
216 |
217 | .ui.clearing.divider {
218 | clear: both;
219 | }
220 |
221 | /*--------------
222 | Section
223 | ---------------*/
224 |
225 | .ui.section.divider {
226 | margin-top: 2rem;
227 | margin-bottom: 2rem;
228 | }
229 |
230 | /*--------------
231 | Sizes
232 | ---------------*/
233 |
234 | .ui.divider {
235 | font-size: 1rem;
236 | }
237 |
238 |
239 | /*******************************
240 | Theme Overrides
241 | *******************************/
242 |
243 | .ui.horizontal.divider:before,
244 | .ui.horizontal.divider:after {
245 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
246 | }
247 | @media only screen and (max-width: 767px) {
248 | .ui.stackable.grid .ui.vertical.divider:before,
249 | .ui.grid .stackable.row .ui.vertical.divider:before,
250 | .ui.stackable.grid .ui.vertical.divider:after,
251 | .ui.grid .stackable.row .ui.vertical.divider:after {
252 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
253 | }
254 | }
255 |
256 |
257 | /*******************************
258 | Site Overrides
259 | *******************************/
260 |
261 |
--------------------------------------------------------------------------------
/scss/elements/_image.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Image
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Image
14 | *******************************/
15 |
16 | .ui.image {
17 | position: relative;
18 | display: inline-block;
19 | vertical-align: middle;
20 | max-width: 100%;
21 | background-color: transparent;
22 | }
23 | img.ui.image {
24 | display: block;
25 | }
26 | .ui.image svg,
27 | .ui.image img {
28 | display: block;
29 | max-width: 100%;
30 | height: auto;
31 | }
32 |
33 |
34 | /*******************************
35 | States
36 | *******************************/
37 |
38 | .ui.hidden.images,
39 | .ui.hidden.image {
40 | display: none;
41 | }
42 | .ui.hidden.transition.images,
43 | .ui.hidden.transition.image {
44 | display: block;
45 | visibility: hidden;
46 | }
47 | .ui.images > .hidden.transition {
48 | display: inline-block;
49 | visibility: hidden;
50 | }
51 | .ui.disabled.images,
52 | .ui.disabled.image {
53 | cursor: default;
54 | opacity: 0.45;
55 | }
56 |
57 |
58 | /*******************************
59 | Variations
60 | *******************************/
61 |
62 |
63 | /*--------------
64 | Inline
65 | ---------------*/
66 |
67 | .ui.inline.image,
68 | .ui.inline.image svg,
69 | .ui.inline.image img {
70 | display: inline-block;
71 | }
72 |
73 | /*------------------
74 | Vertical Aligned
75 | -------------------*/
76 |
77 | .ui.top.aligned.images .image,
78 | .ui.top.aligned.image,
79 | .ui.top.aligned.image svg,
80 | .ui.top.aligned.image img {
81 | display: inline-block;
82 | vertical-align: top;
83 | }
84 | .ui.middle.aligned.images .image,
85 | .ui.middle.aligned.image,
86 | .ui.middle.aligned.image svg,
87 | .ui.middle.aligned.image img {
88 | display: inline-block;
89 | vertical-align: middle;
90 | }
91 | .ui.bottom.aligned.images .image,
92 | .ui.bottom.aligned.image,
93 | .ui.bottom.aligned.image svg,
94 | .ui.bottom.aligned.image img {
95 | display: inline-block;
96 | vertical-align: bottom;
97 | }
98 |
99 | /*--------------
100 | Rounded
101 | ---------------*/
102 |
103 | .ui.rounded.images .image,
104 | .ui.rounded.image,
105 | .ui.rounded.images .image > *,
106 | .ui.rounded.image > * {
107 | border-radius: 0.3125em;
108 | }
109 |
110 | /*--------------
111 | Bordered
112 | ---------------*/
113 |
114 | .ui.bordered.images .image,
115 | .ui.bordered.images img,
116 | .ui.bordered.images svg,
117 | .ui.bordered.image img,
118 | .ui.bordered.image svg,
119 | img.ui.bordered.image {
120 | border: 1px solid rgba(0, 0, 0, 0.1);
121 | }
122 |
123 | /*--------------
124 | Circular
125 | ---------------*/
126 |
127 | .ui.circular.images,
128 | .ui.circular.image {
129 | overflow: hidden;
130 | }
131 | .ui.circular.images .image,
132 | .ui.circular.image,
133 | .ui.circular.images .image > *,
134 | .ui.circular.image > * {
135 | border-radius: 500rem;
136 | }
137 |
138 | /*--------------
139 | Fluid
140 | ---------------*/
141 |
142 | .ui.fluid.images,
143 | .ui.fluid.image,
144 | .ui.fluid.images img,
145 | .ui.fluid.images svg,
146 | .ui.fluid.image svg,
147 | .ui.fluid.image img {
148 | display: block;
149 | width: 100%;
150 | height: auto;
151 | }
152 |
153 | /*--------------
154 | Avatar
155 | ---------------*/
156 |
157 | .ui.avatar.images .image,
158 | .ui.avatar.images img,
159 | .ui.avatar.images svg,
160 | .ui.avatar.image img,
161 | .ui.avatar.image svg,
162 | .ui.avatar.image {
163 | margin-right: 0.25em;
164 | display: inline-block;
165 | width: 2em;
166 | height: 2em;
167 | border-radius: 500rem;
168 | }
169 |
170 | /*-------------------
171 | Spaced
172 | --------------------*/
173 |
174 | .ui.spaced.image {
175 | display: inline-block !important;
176 | margin-left: 0.5em;
177 | margin-right: 0.5em;
178 | }
179 | .ui[class*="left spaced"].image {
180 | margin-left: 0.5em;
181 | margin-right: 0em;
182 | }
183 | .ui[class*="right spaced"].image {
184 | margin-left: 0em;
185 | margin-right: 0.5em;
186 | }
187 |
188 | /*-------------------
189 | Floated
190 | --------------------*/
191 |
192 | .ui.floated.image,
193 | .ui.floated.images {
194 | float: left;
195 | margin-right: 1em;
196 | margin-bottom: 1em;
197 | }
198 | .ui.right.floated.images,
199 | .ui.right.floated.image {
200 | float: right;
201 | margin-right: 0em;
202 | margin-bottom: 1em;
203 | margin-left: 1em;
204 | }
205 | .ui.floated.images:last-child,
206 | .ui.floated.image:last-child {
207 | margin-bottom: 0em;
208 | }
209 | .ui.centered.images,
210 | .ui.centered.image {
211 | margin-left: auto;
212 | margin-right: auto;
213 | }
214 |
215 | /*--------------
216 | Sizes
217 | ---------------*/
218 |
219 | .ui.mini.images .image,
220 | .ui.mini.images img,
221 | .ui.mini.images svg,
222 | .ui.mini.image {
223 | width: 35px;
224 | height: auto;
225 | font-size: 0.78571429rem;
226 | }
227 | .ui.tiny.images .image,
228 | .ui.tiny.images img,
229 | .ui.tiny.images svg,
230 | .ui.tiny.image {
231 | width: 80px;
232 | height: auto;
233 | font-size: 0.85714286rem;
234 | }
235 | .ui.small.images .image,
236 | .ui.small.images img,
237 | .ui.small.images svg,
238 | .ui.small.image {
239 | width: 150px;
240 | height: auto;
241 | font-size: 0.92857143rem;
242 | }
243 | .ui.medium.images .image,
244 | .ui.medium.images img,
245 | .ui.medium.images svg,
246 | .ui.medium.image {
247 | width: 300px;
248 | height: auto;
249 | font-size: 1rem;
250 | }
251 | .ui.large.images .image,
252 | .ui.large.images img,
253 | .ui.large.images svg,
254 | .ui.large.image {
255 | width: 450px;
256 | height: auto;
257 | font-size: 1.14285714rem;
258 | }
259 | .ui.big.images .image,
260 | .ui.big.images img,
261 | .ui.big.images svg,
262 | .ui.big.image {
263 | width: 600px;
264 | height: auto;
265 | font-size: 1.28571429rem;
266 | }
267 | .ui.huge.images .image,
268 | .ui.huge.images img,
269 | .ui.huge.images svg,
270 | .ui.huge.image {
271 | width: 800px;
272 | height: auto;
273 | font-size: 1.42857143rem;
274 | }
275 | .ui.massive.images .image,
276 | .ui.massive.images img,
277 | .ui.massive.images svg,
278 | .ui.massive.image {
279 | width: 960px;
280 | height: auto;
281 | font-size: 1.71428571rem;
282 | }
283 |
284 |
285 | /*******************************
286 | Groups
287 | *******************************/
288 |
289 | .ui.images {
290 | font-size: 0em;
291 | margin: 0em -0.25rem 0rem;
292 | }
293 | .ui.images .image,
294 | .ui.images > img,
295 | .ui.images > svg {
296 | display: inline-block;
297 | margin: 0em 0.25rem 0.5rem;
298 | }
299 |
300 |
301 | /*******************************
302 | Theme Overrides
303 | *******************************/
304 |
305 |
306 |
307 | /*******************************
308 | Site Overrides
309 | *******************************/
310 |
311 |
--------------------------------------------------------------------------------
/scss/elements/_input.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Input
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Standard
14 | *******************************/
15 |
16 |
17 | /*--------------------
18 | Inputs
19 | ---------------------*/
20 |
21 | .ui.input {
22 | position: relative;
23 | font-weight: normal;
24 | font-style: normal;
25 | display: -webkit-inline-box;
26 | display: -ms-inline-flexbox;
27 | display: inline-flex;
28 | color: rgba(0, 0, 0, 0.87);
29 | }
30 | .ui.input > input {
31 | margin: 0em;
32 | max-width: 100%;
33 | -webkit-box-flex: 1;
34 | -ms-flex: 1 0 auto;
35 | flex: 1 0 auto;
36 | outline: none;
37 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
38 | text-align: left;
39 | line-height: 1.21428571em;
40 | font-family: $font-family;
41 | padding: 0.67857143em 1em;
42 | background: #FFFFFF;
43 | border: 1px solid rgba(34, 36, 38, 0.15);
44 | color: rgba(0, 0, 0, 0.87);
45 | border-radius: 0.28571429rem;
46 | -webkit-transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
47 | transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
48 | transition: box-shadow 0.1s ease, border-color 0.1s ease;
49 | transition: box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
50 | -webkit-box-shadow: none;
51 | box-shadow: none;
52 | }
53 |
54 | /*--------------------
55 | Placeholder
56 | ---------------------*/
57 |
58 |
59 | /* browsers require these rules separate */
60 | .ui.input > input::-webkit-input-placeholder {
61 | color: rgba(191, 191, 191, 0.87);
62 | }
63 | .ui.input > input::-moz-placeholder {
64 | color: rgba(191, 191, 191, 0.87);
65 | }
66 | .ui.input > input:-ms-input-placeholder {
67 | color: rgba(191, 191, 191, 0.87);
68 | }
69 |
70 |
71 | /*******************************
72 | States
73 | *******************************/
74 |
75 |
76 | /*--------------------
77 | Disabled
78 | ---------------------*/
79 |
80 | .ui.disabled.input,
81 | .ui.input:not(.disabled) input[disabled] {
82 | opacity: 0.45;
83 | }
84 | .ui.disabled.input > input,
85 | .ui.input:not(.disabled) input[disabled] {
86 | pointer-events: none;
87 | }
88 |
89 | /*--------------------
90 | Active
91 | ---------------------*/
92 |
93 | .ui.input > input:active,
94 | .ui.input.down input {
95 | border-color: rgba(0, 0, 0, 0.3);
96 | background: #FAFAFA;
97 | color: rgba(0, 0, 0, 0.87);
98 | -webkit-box-shadow: none;
99 | box-shadow: none;
100 | }
101 |
102 | /*--------------------
103 | Loading
104 | ---------------------*/
105 |
106 | .ui.loading.loading.input > i.icon:before {
107 | position: absolute;
108 | content: '';
109 | top: 50%;
110 | left: 50%;
111 | margin: -0.64285714em 0em 0em -0.64285714em;
112 | width: 1.28571429em;
113 | height: 1.28571429em;
114 | border-radius: 500rem;
115 | border: 0.2em solid rgba(0, 0, 0, 0.1);
116 | }
117 | .ui.loading.loading.input > i.icon:after {
118 | position: absolute;
119 | content: '';
120 | top: 50%;
121 | left: 50%;
122 | margin: -0.64285714em 0em 0em -0.64285714em;
123 | width: 1.28571429em;
124 | height: 1.28571429em;
125 | -webkit-animation: button-spin 0.6s linear;
126 | animation: button-spin 0.6s linear;
127 | -webkit-animation-iteration-count: infinite;
128 | animation-iteration-count: infinite;
129 | border-radius: 500rem;
130 | border-color: #767676 transparent transparent;
131 | border-style: solid;
132 | border-width: 0.2em;
133 | -webkit-box-shadow: 0px 0px 0px 1px transparent;
134 | box-shadow: 0px 0px 0px 1px transparent;
135 | }
136 |
137 | /*--------------------
138 | Focus
139 | ---------------------*/
140 |
141 | .ui.input.focus > input,
142 | .ui.input > input:focus {
143 | border-color: #85B7D9;
144 | background: #FFFFFF;
145 | color: rgba(0, 0, 0, 0.8);
146 | -webkit-box-shadow: none;
147 | box-shadow: none;
148 | }
149 | .ui.input.focus > input::-webkit-input-placeholder,
150 | .ui.input > input:focus::-webkit-input-placeholder {
151 | color: rgba(115, 115, 115, 0.87);
152 | }
153 | .ui.input.focus > input::-moz-placeholder,
154 | .ui.input > input:focus::-moz-placeholder {
155 | color: rgba(115, 115, 115, 0.87);
156 | }
157 | .ui.input.focus > input:-ms-input-placeholder,
158 | .ui.input > input:focus:-ms-input-placeholder {
159 | color: rgba(115, 115, 115, 0.87);
160 | }
161 |
162 | /*--------------------
163 | Error
164 | ---------------------*/
165 |
166 | .ui.input.error > input {
167 | background-color: #FFF6F6;
168 | border-color: #E0B4B4;
169 | color: #9F3A38;
170 | -webkit-box-shadow: none;
171 | box-shadow: none;
172 | }
173 |
174 | /* Error Placeholder */
175 | .ui.input.error > input::-webkit-input-placeholder {
176 | color: #e7bdbc;
177 | }
178 | .ui.input.error > input::-moz-placeholder {
179 | color: #e7bdbc;
180 | }
181 | .ui.input.error > input:-ms-input-placeholder {
182 | color: #e7bdbc !important;
183 | }
184 |
185 | /* Focused Error Placeholder */
186 | .ui.input.error > input:focus::-webkit-input-placeholder {
187 | color: #da9796;
188 | }
189 | .ui.input.error > input:focus::-moz-placeholder {
190 | color: #da9796;
191 | }
192 | .ui.input.error > input:focus:-ms-input-placeholder {
193 | color: #da9796 !important;
194 | }
195 |
196 |
197 | /*******************************
198 | Variations
199 | *******************************/
200 |
201 |
202 | /*--------------------
203 | Transparent
204 | ---------------------*/
205 |
206 | .ui.transparent.input > input {
207 | border-color: transparent !important;
208 | background-color: transparent !important;
209 | padding: 0em !important;
210 | -webkit-box-shadow: none !important;
211 | box-shadow: none !important;
212 | border-radius: 0px !important;
213 | }
214 |
215 | /* Transparent Icon */
216 | .ui.transparent.icon.input > i.icon {
217 | width: 1.1em;
218 | }
219 | .ui.transparent.icon.input > input {
220 | padding-left: 0em !important;
221 | padding-right: 2em !important;
222 | }
223 | .ui.transparent[class*="left icon"].input > input {
224 | padding-left: 2em !important;
225 | padding-right: 0em !important;
226 | }
227 |
228 | /* Transparent Inverted */
229 | .ui.transparent.inverted.input {
230 | color: #FFFFFF;
231 | }
232 | .ui.transparent.inverted.input > input {
233 | color: inherit;
234 | }
235 | .ui.transparent.inverted.input > input::-webkit-input-placeholder {
236 | color: rgba(255, 255, 255, 0.5);
237 | }
238 | .ui.transparent.inverted.input > input::-moz-placeholder {
239 | color: rgba(255, 255, 255, 0.5);
240 | }
241 | .ui.transparent.inverted.input > input:-ms-input-placeholder {
242 | color: rgba(255, 255, 255, 0.5);
243 | }
244 |
245 | /*--------------------
246 | Icon
247 | ---------------------*/
248 |
249 | .ui.icon.input > i.icon {
250 | cursor: default;
251 | position: absolute;
252 | line-height: 1;
253 | text-align: center;
254 | top: 0px;
255 | right: 0px;
256 | margin: 0em;
257 | height: 100%;
258 | width: 2.67142857em;
259 | opacity: 0.5;
260 | border-radius: 0em 0.28571429rem 0.28571429rem 0em;
261 | -webkit-transition: opacity 0.3s ease;
262 | transition: opacity 0.3s ease;
263 | }
264 | .ui.icon.input > i.icon:not(.link) {
265 | pointer-events: none;
266 | }
267 | .ui.icon.input > input {
268 | padding-right: 2.67142857em !important;
269 | }
270 | .ui.icon.input > i.icon:before,
271 | .ui.icon.input > i.icon:after {
272 | left: 0;
273 | position: absolute;
274 | text-align: center;
275 | top: 50%;
276 | width: 100%;
277 | margin-top: -0.5em;
278 | }
279 | .ui.icon.input > i.link.icon {
280 | cursor: pointer;
281 | }
282 | .ui.icon.input > i.circular.icon {
283 | top: 0.35em;
284 | right: 0.5em;
285 | }
286 |
287 | /* Left Icon Input */
288 | .ui[class*="left icon"].input > i.icon {
289 | right: auto;
290 | left: 1px;
291 | border-radius: 0.28571429rem 0em 0em 0.28571429rem;
292 | }
293 | .ui[class*="left icon"].input > i.circular.icon {
294 | right: auto;
295 | left: 0.5em;
296 | }
297 | .ui[class*="left icon"].input > input {
298 | padding-left: 2.67142857em !important;
299 | padding-right: 1em !important;
300 | }
301 |
302 | /* Focus */
303 | .ui.icon.input > input:focus ~ i.icon {
304 | opacity: 1;
305 | }
306 |
307 | /*--------------------
308 | Labeled
309 | ---------------------*/
310 |
311 |
312 | /* Adjacent Label */
313 | .ui.labeled.input > .label {
314 | -webkit-box-flex: 0;
315 | -ms-flex: 0 0 auto;
316 | flex: 0 0 auto;
317 | margin: 0;
318 | font-size: 1em;
319 | }
320 | .ui.labeled.input > .label:not(.corner) {
321 | padding-top: 0.78571429em;
322 | padding-bottom: 0.78571429em;
323 | }
324 |
325 | /* Regular Label on Left */
326 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
327 | border-top-right-radius: 0px;
328 | border-bottom-right-radius: 0px;
329 | }
330 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
331 | border-top-left-radius: 0px;
332 | border-bottom-left-radius: 0px;
333 | border-left-color: transparent;
334 | }
335 | .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
336 | border-left-color: #85B7D9;
337 | }
338 |
339 | /* Regular Label on Right */
340 | .ui[class*="right labeled"].input > input {
341 | border-top-right-radius: 0px !important;
342 | border-bottom-right-radius: 0px !important;
343 | border-right-color: transparent !important;
344 | }
345 | .ui[class*="right labeled"].input > input + .label {
346 | border-top-left-radius: 0px;
347 | border-bottom-left-radius: 0px;
348 | }
349 | .ui[class*="right labeled"].input > input:focus {
350 | border-right-color: #85B7D9 !important;
351 | }
352 |
353 | /* Corner Label */
354 | .ui.labeled.input .corner.label {
355 | top: 1px;
356 | right: 1px;
357 | font-size: 0.64285714em;
358 | border-radius: 0em 0.28571429rem 0em 0em;
359 | }
360 |
361 | /* Spacing with corner label */
362 | .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
363 | padding-right: 2.5em !important;
364 | }
365 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
366 | padding-right: 3.25em !important;
367 | }
368 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
369 | margin-right: 1.25em;
370 | }
371 |
372 | /* Left Labeled */
373 | .ui[class*="left corner labeled"].labeled.input > input {
374 | padding-left: 2.5em !important;
375 | }
376 | .ui[class*="left corner labeled"].icon.input > input {
377 | padding-left: 3.25em !important;
378 | }
379 | .ui[class*="left corner labeled"].icon.input > .icon {
380 | margin-left: 1.25em;
381 | }
382 |
383 | /* Corner Label Position */
384 | .ui.input > .ui.corner.label {
385 | top: 1px;
386 | right: 1px;
387 | }
388 | .ui.input > .ui.left.corner.label {
389 | right: auto;
390 | left: 1px;
391 | }
392 |
393 | /*--------------------
394 | Action
395 | ---------------------*/
396 |
397 | .ui.action.input > .button,
398 | .ui.action.input > .buttons {
399 | display: -webkit-box;
400 | display: -ms-flexbox;
401 | display: flex;
402 | -webkit-box-align: center;
403 | -ms-flex-align: center;
404 | align-items: center;
405 | -webkit-box-flex: 0;
406 | -ms-flex: 0 0 auto;
407 | flex: 0 0 auto;
408 | }
409 | .ui.action.input > .button,
410 | .ui.action.input > .buttons > .button {
411 | padding-top: 0.78571429em;
412 | padding-bottom: 0.78571429em;
413 | margin: 0;
414 | }
415 |
416 | /* Button on Right */
417 | .ui.action.input:not([class*="left action"]) > input {
418 | border-top-right-radius: 0px !important;
419 | border-bottom-right-radius: 0px !important;
420 | border-right-color: transparent !important;
421 | }
422 | .ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child),
423 | .ui.action.input:not([class*="left action"]) > .button:not(:first-child),
424 | .ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button {
425 | border-radius: 0px;
426 | }
427 | .ui.action.input:not([class*="left action"]) > .dropdown:last-child,
428 | .ui.action.input:not([class*="left action"]) > .button:last-child,
429 | .ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
430 | border-radius: 0px 0.28571429rem 0.28571429rem 0px;
431 | }
432 |
433 | /* Input Focus */
434 | .ui.action.input:not([class*="left action"]) > input:focus {
435 | border-right-color: #85B7D9 !important;
436 | }
437 |
438 | /* Button on Left */
439 | .ui[class*="left action"].input > input {
440 | border-top-left-radius: 0px !important;
441 | border-bottom-left-radius: 0px !important;
442 | border-left-color: transparent !important;
443 | }
444 | .ui[class*="left action"].input > .dropdown,
445 | .ui[class*="left action"].input > .button,
446 | .ui[class*="left action"].input > .buttons > .button {
447 | border-radius: 0px;
448 | }
449 | .ui[class*="left action"].input > .dropdown:first-child,
450 | .ui[class*="left action"].input > .button:first-child,
451 | .ui[class*="left action"].input > .buttons:first-child > .button {
452 | border-radius: 0.28571429rem 0px 0px 0.28571429rem;
453 | }
454 |
455 | /* Input Focus */
456 | .ui[class*="left action"].input > input:focus {
457 | border-left-color: #85B7D9 !important;
458 | }
459 |
460 | /*--------------------
461 | Inverted
462 | ---------------------*/
463 |
464 |
465 | /* Standard */
466 | .ui.inverted.input > input {
467 | border: none;
468 | }
469 |
470 | /*--------------------
471 | Fluid
472 | ---------------------*/
473 |
474 | .ui.fluid.input {
475 | display: -webkit-box;
476 | display: -ms-flexbox;
477 | display: flex;
478 | }
479 | .ui.fluid.input > input {
480 | width: 0px !important;
481 | }
482 |
483 | /*--------------------
484 | Size
485 | ---------------------*/
486 |
487 | .ui.mini.input {
488 | font-size: 0.78571429em;
489 | }
490 | .ui.small.input {
491 | font-size: 0.92857143em;
492 | }
493 | .ui.input {
494 | font-size: 1em;
495 | }
496 | .ui.large.input {
497 | font-size: 1.14285714em;
498 | }
499 | .ui.big.input {
500 | font-size: 1.28571429em;
501 | }
502 | .ui.huge.input {
503 | font-size: 1.42857143em;
504 | }
505 | .ui.massive.input {
506 | font-size: 1.71428571em;
507 | }
508 |
509 |
510 | /*******************************
511 | Theme Overrides
512 | *******************************/
513 |
514 |
515 |
516 | /*******************************
517 | Site Overrides
518 | *******************************/
519 |
520 |
--------------------------------------------------------------------------------
/scss/elements/_loader.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Loader
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Loader
14 | *******************************/
15 |
16 |
17 | /* Standard Size */
18 | .ui.loader {
19 | display: none;
20 | position: absolute;
21 | top: 50%;
22 | left: 50%;
23 | margin: 0px;
24 | text-align: center;
25 | z-index: 1000;
26 | -webkit-transform: translateX(-50%) translateY(-50%);
27 | transform: translateX(-50%) translateY(-50%);
28 | }
29 |
30 | /* Static Shape */
31 | .ui.loader:before {
32 | position: absolute;
33 | content: '';
34 | top: 0%;
35 | left: 50%;
36 | width: 100%;
37 | height: 100%;
38 | border-radius: 500rem;
39 | border: 0.2em solid rgba(0, 0, 0, 0.1);
40 | }
41 |
42 | /* Active Shape */
43 | .ui.loader:after {
44 | position: absolute;
45 | content: '';
46 | top: 0%;
47 | left: 50%;
48 | width: 100%;
49 | height: 100%;
50 | -webkit-animation: loader 0.6s linear;
51 | animation: loader 0.6s linear;
52 | -webkit-animation-iteration-count: infinite;
53 | animation-iteration-count: infinite;
54 | border-radius: 500rem;
55 | border-color: #767676 transparent transparent;
56 | border-style: solid;
57 | border-width: 0.2em;
58 | -webkit-box-shadow: 0px 0px 0px 1px transparent;
59 | box-shadow: 0px 0px 0px 1px transparent;
60 | }
61 |
62 | /* Active Animation */
63 | @-webkit-keyframes loader {
64 | from {
65 | -webkit-transform: rotate(0deg);
66 | transform: rotate(0deg);
67 | }
68 | to {
69 | -webkit-transform: rotate(360deg);
70 | transform: rotate(360deg);
71 | }
72 | }
73 | @keyframes loader {
74 | from {
75 | -webkit-transform: rotate(0deg);
76 | transform: rotate(0deg);
77 | }
78 | to {
79 | -webkit-transform: rotate(360deg);
80 | transform: rotate(360deg);
81 | }
82 | }
83 |
84 | /* Sizes */
85 | .ui.mini.loader:before,
86 | .ui.mini.loader:after {
87 | width: 1rem;
88 | height: 1rem;
89 | margin: 0em 0em 0em -0.5rem;
90 | }
91 | .ui.tiny.loader:before,
92 | .ui.tiny.loader:after {
93 | width: 1.14285714rem;
94 | height: 1.14285714rem;
95 | margin: 0em 0em 0em -0.57142857rem;
96 | }
97 | .ui.small.loader:before,
98 | .ui.small.loader:after {
99 | width: 1.71428571rem;
100 | height: 1.71428571rem;
101 | margin: 0em 0em 0em -0.85714286rem;
102 | }
103 | .ui.loader:before,
104 | .ui.loader:after {
105 | width: 2.28571429rem;
106 | height: 2.28571429rem;
107 | margin: 0em 0em 0em -1.14285714rem;
108 | }
109 | .ui.large.loader:before,
110 | .ui.large.loader:after {
111 | width: 3.42857143rem;
112 | height: 3.42857143rem;
113 | margin: 0em 0em 0em -1.71428571rem;
114 | }
115 | .ui.big.loader:before,
116 | .ui.big.loader:after {
117 | width: 3.71428571rem;
118 | height: 3.71428571rem;
119 | margin: 0em 0em 0em -1.85714286rem;
120 | }
121 | .ui.huge.loader:before,
122 | .ui.huge.loader:after {
123 | width: 4.14285714rem;
124 | height: 4.14285714rem;
125 | margin: 0em 0em 0em -2.07142857rem;
126 | }
127 | .ui.massive.loader:before,
128 | .ui.massive.loader:after {
129 | width: 4.57142857rem;
130 | height: 4.57142857rem;
131 | margin: 0em 0em 0em -2.28571429rem;
132 | }
133 |
134 | /*-------------------
135 | Coupling
136 | --------------------*/
137 |
138 |
139 | /* Show inside active dimmer */
140 | .ui.dimmer .loader {
141 | display: block;
142 | }
143 |
144 | /* Black Dimmer */
145 | .ui.dimmer .ui.loader {
146 | color: rgba(255, 255, 255, 0.9);
147 | }
148 | .ui.dimmer .ui.loader:before {
149 | border-color: rgba(255, 255, 255, 0.15);
150 | }
151 | .ui.dimmer .ui.loader:after {
152 | border-color: #FFFFFF transparent transparent;
153 | }
154 |
155 | /* White Dimmer (Inverted) */
156 | .ui.inverted.dimmer .ui.loader {
157 | color: rgba(0, 0, 0, 0.87);
158 | }
159 | .ui.inverted.dimmer .ui.loader:before {
160 | border-color: rgba(0, 0, 0, 0.1);
161 | }
162 | .ui.inverted.dimmer .ui.loader:after {
163 | border-color: #767676 transparent transparent;
164 | }
165 |
166 |
167 | /*******************************
168 | Types
169 | *******************************/
170 |
171 |
172 | /*-------------------
173 | Text
174 | --------------------*/
175 |
176 | .ui.text.loader {
177 | width: auto !important;
178 | height: auto !important;
179 | text-align: center;
180 | font-style: normal;
181 | }
182 |
183 |
184 | /*******************************
185 | States
186 | *******************************/
187 |
188 | .ui.indeterminate.loader:after {
189 | animation-direction: reverse;
190 | -webkit-animation-duration: 1.2s;
191 | animation-duration: 1.2s;
192 | }
193 | .ui.loader.active,
194 | .ui.loader.visible {
195 | display: block;
196 | }
197 | .ui.loader.disabled,
198 | .ui.loader.hidden {
199 | display: none;
200 | }
201 |
202 |
203 | /*******************************
204 | Variations
205 | *******************************/
206 |
207 |
208 | /*-------------------
209 | Sizes
210 | --------------------*/
211 |
212 |
213 | /* Loader */
214 | .ui.inverted.dimmer .ui.mini.loader,
215 | .ui.mini.loader {
216 | width: 1rem;
217 | height: 1rem;
218 | font-size: 0.78571429em;
219 | }
220 | .ui.inverted.dimmer .ui.tiny.loader,
221 | .ui.tiny.loader {
222 | width: 1.14285714rem;
223 | height: 1.14285714rem;
224 | font-size: 0.85714286em;
225 | }
226 | .ui.inverted.dimmer .ui.small.loader,
227 | .ui.small.loader {
228 | width: 1.71428571rem;
229 | height: 1.71428571rem;
230 | font-size: 0.92857143em;
231 | }
232 | .ui.inverted.dimmer .ui.loader,
233 | .ui.loader {
234 | width: 2.28571429rem;
235 | height: 2.28571429rem;
236 | font-size: 1em;
237 | }
238 | .ui.inverted.dimmer .ui.large.loader,
239 | .ui.large.loader {
240 | width: 3.42857143rem;
241 | height: 3.42857143rem;
242 | font-size: 1.14285714em;
243 | }
244 | .ui.inverted.dimmer .ui.big.loader,
245 | .ui.big.loader {
246 | width: 3.71428571rem;
247 | height: 3.71428571rem;
248 | font-size: 1.28571429em;
249 | }
250 | .ui.inverted.dimmer .ui.huge.loader,
251 | .ui.huge.loader {
252 | width: 4.14285714rem;
253 | height: 4.14285714rem;
254 | font-size: 1.42857143em;
255 | }
256 | .ui.inverted.dimmer .ui.massive.loader,
257 | .ui.massive.loader {
258 | width: 4.57142857rem;
259 | height: 4.57142857rem;
260 | font-size: 1.71428571em;
261 | }
262 |
263 | /* Text Loader */
264 | .ui.mini.text.loader {
265 | min-width: 1rem;
266 | padding-top: 1.78571429rem;
267 | }
268 | .ui.tiny.text.loader {
269 | min-width: 1.14285714rem;
270 | padding-top: 1.92857143rem;
271 | }
272 | .ui.small.text.loader {
273 | min-width: 1.71428571rem;
274 | padding-top: 2.5rem;
275 | }
276 | .ui.text.loader {
277 | min-width: 2.28571429rem;
278 | padding-top: 3.07142857rem;
279 | }
280 | .ui.large.text.loader {
281 | min-width: 3.42857143rem;
282 | padding-top: 4.21428571rem;
283 | }
284 | .ui.big.text.loader {
285 | min-width: 3.71428571rem;
286 | padding-top: 4.5rem;
287 | }
288 | .ui.huge.text.loader {
289 | min-width: 4.14285714rem;
290 | padding-top: 4.92857143rem;
291 | }
292 | .ui.massive.text.loader {
293 | min-width: 4.57142857rem;
294 | padding-top: 5.35714286rem;
295 | }
296 |
297 | /*-------------------
298 | Inverted
299 | --------------------*/
300 |
301 | .ui.inverted.loader {
302 | color: rgba(255, 255, 255, 0.9);
303 | }
304 | .ui.inverted.loader:before {
305 | border-color: rgba(255, 255, 255, 0.15);
306 | }
307 | .ui.inverted.loader:after {
308 | border-top-color: #FFFFFF;
309 | }
310 |
311 | /*-------------------
312 | Inline
313 | --------------------*/
314 |
315 | .ui.inline.loader {
316 | position: relative;
317 | vertical-align: middle;
318 | margin: 0em;
319 | left: 0em;
320 | top: 0em;
321 | -webkit-transform: none;
322 | transform: none;
323 | }
324 | .ui.inline.loader.active,
325 | .ui.inline.loader.visible {
326 | display: inline-block;
327 | }
328 |
329 | /* Centered Inline */
330 | .ui.centered.inline.loader.active,
331 | .ui.centered.inline.loader.visible {
332 | display: block;
333 | margin-left: auto;
334 | margin-right: auto;
335 | }
336 |
337 |
338 | /*******************************
339 | Theme Overrides
340 | *******************************/
341 |
342 |
343 |
344 | /*******************************
345 | Site Overrides
346 | *******************************/
347 |
348 |
--------------------------------------------------------------------------------
/scss/elements/_placeholder.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Loader
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 | /*-------------------
12 | Content
13 | --------------------*/
14 |
15 | .ui.placeholder {
16 | position: static;
17 | overflow: hidden;
18 | -webkit-animation: placeholderShimmer 2s linear;
19 | animation: placeholderShimmer 2s linear;
20 | -webkit-animation-iteration-count: infinite;
21 | animation-iteration-count: infinite;
22 | background-color: #FFFFFF;
23 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.08)), color-stop(15%, rgba(0, 0, 0, 0.15)), color-stop(30%, rgba(0, 0, 0, 0.08)));
24 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
25 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
26 | background-size: 1200px 100%;
27 | max-width: 30rem;
28 | }
29 | @-webkit-keyframes placeholderShimmer {
30 | 0% {
31 | background-position: -1200px 0;
32 | }
33 | 100% {
34 | background-position: 1200px 0;
35 | }
36 | }
37 | @keyframes placeholderShimmer {
38 | 0% {
39 | background-position: -1200px 0;
40 | }
41 | 100% {
42 | background-position: 1200px 0;
43 | }
44 | }
45 | .ui.placeholder + .ui.placeholder {
46 | margin-top: 2rem;
47 | }
48 | .ui.placeholder + .ui.placeholder {
49 | -webkit-animation-delay: 0.15s;
50 | animation-delay: 0.15s;
51 | }
52 | .ui.placeholder + .ui.placeholder + .ui.placeholder {
53 | -webkit-animation-delay: 0.3s;
54 | animation-delay: 0.3s;
55 | }
56 | .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
57 | -webkit-animation-delay: 0.45s;
58 | animation-delay: 0.45s;
59 | }
60 | .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
61 | -webkit-animation-delay: 0.6s;
62 | animation-delay: 0.6s;
63 | }
64 | .ui.placeholder,
65 | .ui.placeholder > :before,
66 | .ui.placeholder .image.header:after,
67 | .ui.placeholder .line,
68 | .ui.placeholder .line:after {
69 | background-color: #FFFFFF;
70 | }
71 |
72 | /* Image */
73 | .ui.placeholder .image:not(.header):not(.ui) {
74 | height: 100px;
75 | }
76 | .ui.placeholder .square.image:not(.header) {
77 | height: 0px;
78 | overflow: hidden;
79 |
80 | /* 1/1 aspect ratio */
81 | padding-top: 100%;
82 | }
83 | .ui.placeholder .rectangular.image:not(.header) {
84 | height: 0px;
85 | overflow: hidden;
86 |
87 | /* 4/3 aspect ratio */
88 | padding-top: 75%;
89 | }
90 |
91 | /* Lines */
92 | .ui.placeholder .line {
93 | position: relative;
94 | height: 0.85714286em;
95 | }
96 | .ui.placeholder .line:before,
97 | .ui.placeholder .line:after {
98 | top: 100%;
99 | position: absolute;
100 | content: '';
101 | background-color: inherit;
102 | }
103 | .ui.placeholder .line:before {
104 | left: 0px;
105 | }
106 | .ui.placeholder .line:after {
107 | right: 0px;
108 | }
109 |
110 | /* Any Lines */
111 | .ui.placeholder .line {
112 | margin-bottom: 0.5em;
113 | }
114 | .ui.placeholder .line:before,
115 | .ui.placeholder .line:after {
116 | height: 0.5em;
117 | }
118 | .ui.placeholder .line:not(:first-child) {
119 | margin-top: 0.5em;
120 | }
121 |
122 | /* Header Image + 2 Lines */
123 | .ui.placeholder .header {
124 | position: relative;
125 | overflow: hidden;
126 | }
127 |
128 | /* Line Outdent */
129 | .ui.placeholder .line:nth-child(1):after {
130 | width: 0%;
131 | }
132 | .ui.placeholder .line:nth-child(2):after {
133 | width: 50%;
134 | }
135 | .ui.placeholder .line:nth-child(3):after {
136 | width: 10%;
137 | }
138 | .ui.placeholder .line:nth-child(4):after {
139 | width: 35%;
140 | }
141 | .ui.placeholder .line:nth-child(5):after {
142 | width: 65%;
143 | }
144 |
145 | /* Header Line 1 & 2*/
146 | .ui.placeholder .header .line {
147 | margin-bottom: 0.64285714em;
148 | }
149 | .ui.placeholder .header .line:before,
150 | .ui.placeholder .header .line:after {
151 | height: 0.64285714em;
152 | }
153 | .ui.placeholder .header .line:not(:first-child) {
154 | margin-top: 0.64285714em;
155 | }
156 | .ui.placeholder .header .line:after {
157 | width: 20%;
158 | }
159 | .ui.placeholder .header .line:nth-child(2):after {
160 | width: 60%;
161 | }
162 | /* Image Header */
163 | .ui.placeholder .image.header .line {
164 | margin-left: 3em;
165 | }
166 | .ui.placeholder .image.header .line:before {
167 | width: 0.71428571rem;
168 | }
169 | .ui.placeholder .image.header:after {
170 | display: block;
171 | height: 0.85714286em;
172 | content: '';
173 | margin-left: 3em;
174 | }
175 |
176 | /* Spacing */
177 | .ui.placeholder .image .line:first-child,
178 | .ui.placeholder .paragraph .line:first-child,
179 | .ui.placeholder .header .line:first-child {
180 | height: 0.01px;
181 | }
182 | .ui.placeholder .image:not(:first-child):before,
183 | .ui.placeholder .paragraph:not(:first-child):before,
184 | .ui.placeholder .header:not(:first-child):before {
185 | height: 1.42857143em;
186 | content: '';
187 | display: block;
188 | }
189 |
190 | /* Inverted Content Loader */
191 | .ui.inverted.placeholder {
192 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.08)), color-stop(15%, rgba(255, 255, 255, 0.14)), color-stop(30%, rgba(255, 255, 255, 0.08)));
193 | background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
194 | background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
195 | }
196 | .ui.inverted.placeholder,
197 | .ui.inverted.placeholder > :before,
198 | .ui.inverted.placeholder .image.header:after,
199 | .ui.inverted.placeholder .line,
200 | .ui.inverted.placeholder .line:after {
201 | background-color: #1B1C1D;
202 | }
203 |
204 |
205 | /*******************************
206 | Variations
207 | *******************************/
208 |
209 |
210 | /*-------------------
211 | Sizes
212 | --------------------*/
213 |
214 | .ui.placeholder .full.line.line.line:after {
215 | width: 0%;
216 | }
217 | .ui.placeholder .very.long.line.line.line:after {
218 | width: 10%;
219 | }
220 | .ui.placeholder .long.line.line.line:after {
221 | width: 35%;
222 | }
223 | .ui.placeholder .medium.line.line.line:after {
224 | width: 50%;
225 | }
226 | .ui.placeholder .short.line.line.line:after {
227 | width: 65%;
228 | }
229 | .ui.placeholder .very.short.line.line.line:after {
230 | width: 80%;
231 | }
232 |
233 | /*-------------------
234 | Fluid
235 | --------------------*/
236 |
237 | .ui.fluid.placeholder {
238 | max-width: none;
239 | }
240 |
--------------------------------------------------------------------------------
/scss/elements/_rail.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Rail
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Rails
14 | *******************************/
15 |
16 | .ui.rail {
17 | position: absolute;
18 | top: 0%;
19 | width: 300px;
20 | height: 100%;
21 | }
22 | .ui.left.rail {
23 | left: auto;
24 | right: 100%;
25 | padding: 0em 2rem 0em 0em;
26 | margin: 0em 2rem 0em 0em;
27 | }
28 | .ui.right.rail {
29 | left: 100%;
30 | right: auto;
31 | padding: 0em 0em 0em 2rem;
32 | margin: 0em 0em 0em 2rem;
33 | }
34 |
35 |
36 | /*******************************
37 | Variations
38 | *******************************/
39 |
40 |
41 | /*--------------
42 | Internal
43 | ---------------*/
44 |
45 | .ui.left.internal.rail {
46 | left: 0%;
47 | right: auto;
48 | padding: 0em 0em 0em 2rem;
49 | margin: 0em 0em 0em 2rem;
50 | }
51 | .ui.right.internal.rail {
52 | left: auto;
53 | right: 0%;
54 | padding: 0em 2rem 0em 0em;
55 | margin: 0em 2rem 0em 0em;
56 | }
57 |
58 | /*--------------
59 | Dividing
60 | ---------------*/
61 |
62 | .ui.dividing.rail {
63 | width: 302.5px;
64 | }
65 | .ui.left.dividing.rail {
66 | padding: 0em 2.5rem 0em 0em;
67 | margin: 0em 2.5rem 0em 0em;
68 | border-right: 1px solid rgba(34, 36, 38, 0.15);
69 | }
70 | .ui.right.dividing.rail {
71 | border-left: 1px solid rgba(34, 36, 38, 0.15);
72 | padding: 0em 0em 0em 2.5rem;
73 | margin: 0em 0em 0em 2.5rem;
74 | }
75 |
76 | /*--------------
77 | Distance
78 | ---------------*/
79 |
80 | .ui.close.rail {
81 | width: calc( 300px + 1em );
82 | }
83 | .ui.close.left.rail {
84 | padding: 0em 1em 0em 0em;
85 | margin: 0em 1em 0em 0em;
86 | }
87 | .ui.close.right.rail {
88 | padding: 0em 0em 0em 1em;
89 | margin: 0em 0em 0em 1em;
90 | }
91 | .ui.very.close.rail {
92 | width: calc( 300px + 0.5em );
93 | }
94 | .ui.very.close.left.rail {
95 | padding: 0em 0.5em 0em 0em;
96 | margin: 0em 0.5em 0em 0em;
97 | }
98 | .ui.very.close.right.rail {
99 | padding: 0em 0em 0em 0.5em;
100 | margin: 0em 0em 0em 0.5em;
101 | }
102 |
103 | /*--------------
104 | Attached
105 | ---------------*/
106 |
107 | .ui.attached.left.rail,
108 | .ui.attached.right.rail {
109 | padding: 0em;
110 | margin: 0em;
111 | }
112 |
113 | /*--------------
114 | Sizing
115 | ---------------*/
116 |
117 | .ui.mini.rail {
118 | font-size: 0.78571429rem;
119 | }
120 | .ui.tiny.rail {
121 | font-size: 0.85714286rem;
122 | }
123 | .ui.small.rail {
124 | font-size: 0.92857143rem;
125 | }
126 | .ui.rail {
127 | font-size: 1rem;
128 | }
129 | .ui.large.rail {
130 | font-size: 1.14285714rem;
131 | }
132 | .ui.big.rail {
133 | font-size: 1.28571429rem;
134 | }
135 | .ui.huge.rail {
136 | font-size: 1.42857143rem;
137 | }
138 | .ui.massive.rail {
139 | font-size: 1.71428571rem;
140 | }
141 |
142 |
143 | /*******************************
144 | Theme Overrides
145 | *******************************/
146 |
147 |
148 |
149 | /*******************************
150 | Site Overrides
151 | *******************************/
152 |
153 |
--------------------------------------------------------------------------------
/scss/elements/_reveal.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Reveal
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Reveal
14 | *******************************/
15 |
16 | .ui.reveal {
17 | display: inherit;
18 | position: relative !important;
19 | font-size: 0em !important;
20 | }
21 | .ui.reveal > .visible.content {
22 | position: absolute !important;
23 | top: 0em !important;
24 | left: 0em !important;
25 | z-index: 3 !important;
26 | -webkit-transition: all 0.5s ease 0.1s;
27 | transition: all 0.5s ease 0.1s;
28 | }
29 | .ui.reveal > .hidden.content {
30 | position: relative !important;
31 | z-index: 2 !important;
32 | }
33 |
34 | /* Make sure hovered element is on top of other reveal */
35 | .ui.active.reveal .visible.content,
36 | .ui.reveal:hover .visible.content {
37 | z-index: 4 !important;
38 | }
39 |
40 |
41 | /*******************************
42 | Types
43 | *******************************/
44 |
45 |
46 | /*--------------
47 | Slide
48 | ---------------*/
49 |
50 | .ui.slide.reveal {
51 | position: relative !important;
52 | overflow: hidden !important;
53 | white-space: nowrap;
54 | }
55 | .ui.slide.reveal > .content {
56 | display: block;
57 | width: 100%;
58 | white-space: normal;
59 | float: left;
60 | margin: 0em;
61 | -webkit-transition: -webkit-transform 0.5s ease 0.1s;
62 | transition: -webkit-transform 0.5s ease 0.1s;
63 | transition: transform 0.5s ease 0.1s;
64 | transition: transform 0.5s ease 0.1s, -webkit-transform 0.5s ease 0.1s;
65 | }
66 | .ui.slide.reveal > .visible.content {
67 | position: relative !important;
68 | }
69 | .ui.slide.reveal > .hidden.content {
70 | position: absolute !important;
71 | left: 0% !important;
72 | width: 100% !important;
73 | -webkit-transform: translateX(100%) !important;
74 | transform: translateX(100%) !important;
75 | }
76 | .ui.slide.active.reveal > .visible.content,
77 | .ui.slide.reveal:hover > .visible.content {
78 | -webkit-transform: translateX(-100%) !important;
79 | transform: translateX(-100%) !important;
80 | }
81 | .ui.slide.active.reveal > .hidden.content,
82 | .ui.slide.reveal:hover > .hidden.content {
83 | -webkit-transform: translateX(0%) !important;
84 | transform: translateX(0%) !important;
85 | }
86 | .ui.slide.right.reveal > .visible.content {
87 | -webkit-transform: translateX(0%) !important;
88 | transform: translateX(0%) !important;
89 | }
90 | .ui.slide.right.reveal > .hidden.content {
91 | -webkit-transform: translateX(-100%) !important;
92 | transform: translateX(-100%) !important;
93 | }
94 | .ui.slide.right.active.reveal > .visible.content,
95 | .ui.slide.right.reveal:hover > .visible.content {
96 | -webkit-transform: translateX(100%) !important;
97 | transform: translateX(100%) !important;
98 | }
99 | .ui.slide.right.active.reveal > .hidden.content,
100 | .ui.slide.right.reveal:hover > .hidden.content {
101 | -webkit-transform: translateX(0%) !important;
102 | transform: translateX(0%) !important;
103 | }
104 | .ui.slide.up.reveal > .hidden.content {
105 | -webkit-transform: translateY(100%) !important;
106 | transform: translateY(100%) !important;
107 | }
108 | .ui.slide.up.active.reveal > .visible.content,
109 | .ui.slide.up.reveal:hover > .visible.content {
110 | -webkit-transform: translateY(-100%) !important;
111 | transform: translateY(-100%) !important;
112 | }
113 | .ui.slide.up.active.reveal > .hidden.content,
114 | .ui.slide.up.reveal:hover > .hidden.content {
115 | -webkit-transform: translateY(0%) !important;
116 | transform: translateY(0%) !important;
117 | }
118 | .ui.slide.down.reveal > .hidden.content {
119 | -webkit-transform: translateY(-100%) !important;
120 | transform: translateY(-100%) !important;
121 | }
122 | .ui.slide.down.active.reveal > .visible.content,
123 | .ui.slide.down.reveal:hover > .visible.content {
124 | -webkit-transform: translateY(100%) !important;
125 | transform: translateY(100%) !important;
126 | }
127 | .ui.slide.down.active.reveal > .hidden.content,
128 | .ui.slide.down.reveal:hover > .hidden.content {
129 | -webkit-transform: translateY(0%) !important;
130 | transform: translateY(0%) !important;
131 | }
132 |
133 | /*--------------
134 | Fade
135 | ---------------*/
136 |
137 | .ui.fade.reveal > .visible.content {
138 | opacity: 1;
139 | }
140 | .ui.fade.active.reveal > .visible.content,
141 | .ui.fade.reveal:hover > .visible.content {
142 | opacity: 0;
143 | }
144 |
145 | /*--------------
146 | Move
147 | ---------------*/
148 |
149 | .ui.move.reveal {
150 | position: relative !important;
151 | overflow: hidden !important;
152 | white-space: nowrap;
153 | }
154 | .ui.move.reveal > .content {
155 | display: block;
156 | float: left;
157 | white-space: normal;
158 | margin: 0em;
159 | -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
160 | transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
161 | transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
162 | transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
163 | }
164 | .ui.move.reveal > .visible.content {
165 | position: relative !important;
166 | }
167 | .ui.move.reveal > .hidden.content {
168 | position: absolute !important;
169 | left: 0% !important;
170 | width: 100% !important;
171 | }
172 | .ui.move.active.reveal > .visible.content,
173 | .ui.move.reveal:hover > .visible.content {
174 | -webkit-transform: translateX(-100%) !important;
175 | transform: translateX(-100%) !important;
176 | }
177 | .ui.move.right.active.reveal > .visible.content,
178 | .ui.move.right.reveal:hover > .visible.content {
179 | -webkit-transform: translateX(100%) !important;
180 | transform: translateX(100%) !important;
181 | }
182 | .ui.move.up.active.reveal > .visible.content,
183 | .ui.move.up.reveal:hover > .visible.content {
184 | -webkit-transform: translateY(-100%) !important;
185 | transform: translateY(-100%) !important;
186 | }
187 | .ui.move.down.active.reveal > .visible.content,
188 | .ui.move.down.reveal:hover > .visible.content {
189 | -webkit-transform: translateY(100%) !important;
190 | transform: translateY(100%) !important;
191 | }
192 |
193 | /*--------------
194 | Rotate
195 | ---------------*/
196 |
197 | .ui.rotate.reveal > .visible.content {
198 | -webkit-transition-duration: 0.5s;
199 | transition-duration: 0.5s;
200 | -webkit-transform: rotate(0deg);
201 | transform: rotate(0deg);
202 | }
203 | .ui.rotate.reveal > .visible.content,
204 | .ui.rotate.right.reveal > .visible.content {
205 | -webkit-transform-origin: bottom right;
206 | transform-origin: bottom right;
207 | }
208 | .ui.rotate.active.reveal > .visible.content,
209 | .ui.rotate.reveal:hover > .visible.content,
210 | .ui.rotate.right.active.reveal > .visible.content,
211 | .ui.rotate.right.reveal:hover > .visible.content {
212 | -webkit-transform: rotate(110deg);
213 | transform: rotate(110deg);
214 | }
215 | .ui.rotate.left.reveal > .visible.content {
216 | -webkit-transform-origin: bottom left;
217 | transform-origin: bottom left;
218 | }
219 | .ui.rotate.left.active.reveal > .visible.content,
220 | .ui.rotate.left.reveal:hover > .visible.content {
221 | -webkit-transform: rotate(-110deg);
222 | transform: rotate(-110deg);
223 | }
224 |
225 |
226 | /*******************************
227 | States
228 | *******************************/
229 |
230 | .ui.disabled.reveal:hover > .visible.visible.content {
231 | position: static !important;
232 | display: block !important;
233 | opacity: 1 !important;
234 | top: 0 !important;
235 | left: 0 !important;
236 | right: auto !important;
237 | bottom: auto !important;
238 | -webkit-transform: none !important;
239 | transform: none !important;
240 | }
241 | .ui.disabled.reveal:hover > .hidden.hidden.content {
242 | display: none !important;
243 | }
244 |
245 |
246 | /*******************************
247 | Coupling
248 | *******************************/
249 |
250 | .ui.reveal > .ui.ribbon.label {
251 | z-index: 5;
252 | }
253 |
254 |
255 | /*******************************
256 | Variations
257 | *******************************/
258 |
259 |
260 | /*--------------
261 | Visible
262 | ---------------*/
263 |
264 | .ui.visible.reveal {
265 | overflow: visible;
266 | }
267 |
268 | /*--------------
269 | Instant
270 | ---------------*/
271 |
272 | .ui.instant.reveal > .content {
273 | -webkit-transition-delay: 0s !important;
274 | transition-delay: 0s !important;
275 | }
276 |
277 | /*--------------
278 | Sizing
279 | ---------------*/
280 |
281 | .ui.reveal > .content {
282 | font-size: 1rem !important;
283 | }
284 |
285 |
286 | /*******************************
287 | Theme Overrides
288 | *******************************/
289 |
290 |
291 |
292 | /*******************************
293 | Site Overrides
294 | *******************************/
295 |
296 |
--------------------------------------------------------------------------------
/scss/globals/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 | @import 'reset';
3 | @import 'site';
--------------------------------------------------------------------------------
/scss/globals/_reset.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Reset
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Reset
14 | *******************************/
15 |
16 |
17 | /* Border-Box */
18 | *,
19 | *:before,
20 | *:after {
21 | -webkit-box-sizing: inherit;
22 | box-sizing: inherit;
23 | }
24 | html {
25 | -webkit-box-sizing: border-box;
26 | box-sizing: border-box;
27 | }
28 |
29 | /* iPad Input Shadows */
30 | input[type="text"],
31 | input[type="email"],
32 | input[type="search"],
33 | input[type="password"] {
34 | -webkit-appearance: none;
35 | -moz-appearance: none;
36 |
37 | /* mobile firefox too! */
38 | }
39 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
40 |
41 | /* Document
42 | ========================================================================== */
43 | /**
44 | * 1. Correct the line height in all browsers.
45 | * 2. Prevent adjustments of font size after orientation changes in
46 | * IE on Windows Phone and in iOS.
47 | */
48 | html {
49 | line-height: 1.15;
50 |
51 | /* 1 */
52 | -ms-text-size-adjust: 100%;
53 |
54 | /* 2 */
55 | -webkit-text-size-adjust: 100%;
56 |
57 | /* 2 */
58 | }
59 |
60 | /* Sections
61 | ========================================================================== */
62 | /**
63 | * Remove the margin in all browsers (opinionated).
64 | */
65 | body {
66 | margin: 0;
67 | }
68 | /**
69 | * Add the correct display in IE 9-.
70 | */
71 | article,
72 | aside,
73 | footer,
74 | header,
75 | nav,
76 | section {
77 | display: block;
78 | }
79 | /**
80 | * Correct the font size and margin on `h1` elements within `section` and
81 | * `article` contexts in Chrome, Firefox, and Safari.
82 | */
83 | h1 {
84 | font-size: 2em;
85 | margin: 0.67em 0;
86 | }
87 |
88 | /* Grouping content
89 | ========================================================================== */
90 | /**
91 | * Add the correct display in IE 9-.
92 | * 1. Add the correct display in IE.
93 | */
94 | figcaption,
95 | figure,
96 | main {
97 |
98 | /* 1 */
99 | display: block;
100 | }
101 | /**
102 | * Add the correct margin in IE 8.
103 | */
104 | figure {
105 | margin: 1em 40px;
106 | }
107 | /**
108 | * 1. Add the correct box sizing in Firefox.
109 | * 2. Show the overflow in Edge and IE.
110 | */
111 | hr {
112 | -webkit-box-sizing: content-box;
113 | box-sizing: content-box;
114 |
115 | /* 1 */
116 | height: 0;
117 |
118 | /* 1 */
119 | overflow: visible;
120 |
121 | /* 2 */
122 | }
123 | /**
124 | * 1. Correct the inheritance and scaling of font size in all browsers.
125 | * 2. Correct the odd `em` font sizing in all browsers.
126 | */
127 | pre {
128 | font-family: monospace, monospace;
129 |
130 | /* 1 */
131 | font-size: 1em;
132 |
133 | /* 2 */
134 | }
135 |
136 | /* Text-level semantics
137 | ========================================================================== */
138 | /**
139 | * 1. Remove the gray background on active links in IE 10.
140 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
141 | */
142 | a {
143 | background-color: transparent;
144 |
145 | /* 1 */
146 | -webkit-text-decoration-skip: objects;
147 |
148 | /* 2 */
149 | }
150 | /**
151 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
152 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
153 | */
154 | abbr[title] {
155 | border-bottom: none;
156 |
157 | /* 1 */
158 | text-decoration: underline;
159 |
160 | /* 2 */
161 | -webkit-text-decoration: underline dotted;
162 | text-decoration: underline dotted;
163 |
164 | /* 2 */
165 | }
166 | /**
167 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
168 | */
169 | b,
170 | strong {
171 | font-weight: inherit;
172 | }
173 | /**
174 | * Add the correct font weight in Chrome, Edge, and Safari.
175 | */
176 | b,
177 | strong {
178 | font-weight: bolder;
179 | }
180 | /**
181 | * 1. Correct the inheritance and scaling of font size in all browsers.
182 | * 2. Correct the odd `em` font sizing in all browsers.
183 | */
184 | code,
185 | kbd,
186 | samp {
187 | font-family: monospace, monospace;
188 |
189 | /* 1 */
190 | font-size: 1em;
191 |
192 | /* 2 */
193 | }
194 | /**
195 | * Add the correct font style in Android 4.3-.
196 | */
197 | dfn {
198 | font-style: italic;
199 | }
200 | /**
201 | * Add the correct background and color in IE 9-.
202 | */
203 | mark {
204 | background-color: #ff0;
205 | color: #000;
206 | }
207 | /**
208 | * Add the correct font size in all browsers.
209 | */
210 | small {
211 | font-size: 80%;
212 | }
213 | /**
214 | * Prevent `sub` and `sup` elements from affecting the line height in
215 | * all browsers.
216 | */
217 | sub,
218 | sup {
219 | font-size: 75%;
220 | line-height: 0;
221 | position: relative;
222 | vertical-align: baseline;
223 | }
224 | sub {
225 | bottom: -0.25em;
226 | }
227 | sup {
228 | top: -0.5em;
229 | }
230 |
231 | /* Embedded content
232 | ========================================================================== */
233 | /**
234 | * Add the correct display in IE 9-.
235 | */
236 | audio,
237 | video {
238 | display: inline-block;
239 | }
240 | /**
241 | * Add the correct display in iOS 4-7.
242 | */
243 | audio:not([controls]) {
244 | display: none;
245 | height: 0;
246 | }
247 | /**
248 | * Remove the border on images inside links in IE 10-.
249 | */
250 | img {
251 | border-style: none;
252 | }
253 | /**
254 | * Hide the overflow in IE.
255 | */
256 | svg:not(:root) {
257 | overflow: hidden;
258 | }
259 |
260 | /* Forms
261 | ========================================================================== */
262 | /**
263 | * 1. Change the font styles in all browsers (opinionated).
264 | * 2. Remove the margin in Firefox and Safari.
265 | */
266 | button,
267 | input,
268 | optgroup,
269 | select,
270 | textarea {
271 | font-family: sans-serif;
272 |
273 | /* 1 */
274 | font-size: 100%;
275 |
276 | /* 1 */
277 | line-height: 1.15;
278 |
279 | /* 1 */
280 | margin: 0;
281 |
282 | /* 2 */
283 | }
284 | /**
285 | * Show the overflow in IE.
286 | * 1. Show the overflow in Edge.
287 | */
288 | button,
289 | input {
290 |
291 | /* 1 */
292 | overflow: visible;
293 | }
294 | /**
295 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
296 | * 1. Remove the inheritance of text transform in Firefox.
297 | */
298 | button,
299 | select {
300 |
301 | /* 1 */
302 | text-transform: none;
303 | }
304 | /**
305 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
306 | * controls in Android 4.
307 | * 2. Correct the inability to style clickable types in iOS and Safari.
308 | */
309 | button,
310 | html [type="button"],
311 | [type="reset"],
312 | [type="submit"] {
313 | -webkit-appearance: button;
314 |
315 | /* 2 */
316 | }
317 | /**
318 | * Remove the inner border and padding in Firefox.
319 | */
320 | button::-moz-focus-inner,
321 | [type="button"]::-moz-focus-inner,
322 | [type="reset"]::-moz-focus-inner,
323 | [type="submit"]::-moz-focus-inner {
324 | border-style: none;
325 | padding: 0;
326 | }
327 | /**
328 | * Restore the focus styles unset by the previous rule.
329 | */
330 | button:-moz-focusring,
331 | [type="button"]:-moz-focusring,
332 | [type="reset"]:-moz-focusring,
333 | [type="submit"]:-moz-focusring {
334 | outline: 1px dotted ButtonText;
335 | }
336 | /**
337 | * Correct the padding in Firefox.
338 | */
339 | fieldset {
340 | padding: 0.35em 0.75em 0.625em;
341 | }
342 | /**
343 | * 1. Correct the text wrapping in Edge and IE.
344 | * 2. Correct the color inheritance from `fieldset` elements in IE.
345 | * 3. Remove the padding so developers are not caught out when they zero out
346 | * `fieldset` elements in all browsers.
347 | */
348 | legend {
349 | -webkit-box-sizing: border-box;
350 | box-sizing: border-box;
351 |
352 | /* 1 */
353 | color: inherit;
354 |
355 | /* 2 */
356 | display: table;
357 |
358 | /* 1 */
359 | max-width: 100%;
360 |
361 | /* 1 */
362 | padding: 0;
363 |
364 | /* 3 */
365 | white-space: normal;
366 |
367 | /* 1 */
368 | }
369 | /**
370 | * 1. Add the correct display in IE 9-.
371 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
372 | */
373 | progress {
374 | display: inline-block;
375 |
376 | /* 1 */
377 | vertical-align: baseline;
378 |
379 | /* 2 */
380 | }
381 | /**
382 | * Remove the default vertical scrollbar in IE.
383 | */
384 | textarea {
385 | overflow: auto;
386 | }
387 | /**
388 | * 1. Add the correct box sizing in IE 10-.
389 | * 2. Remove the padding in IE 10-.
390 | */
391 | [type="checkbox"],
392 | [type="radio"] {
393 | -webkit-box-sizing: border-box;
394 | box-sizing: border-box;
395 |
396 | /* 1 */
397 | padding: 0;
398 |
399 | /* 2 */
400 | }
401 | /**
402 | * Correct the cursor style of increment and decrement buttons in Chrome.
403 | */
404 | [type="number"]::-webkit-inner-spin-button,
405 | [type="number"]::-webkit-outer-spin-button {
406 | height: auto;
407 | }
408 | /**
409 | * 1. Correct the odd appearance in Chrome and Safari.
410 | * 2. Correct the outline style in Safari.
411 | */
412 | [type="search"] {
413 | -webkit-appearance: textfield;
414 |
415 | /* 1 */
416 | outline-offset: -2px;
417 |
418 | /* 2 */
419 | }
420 | /**
421 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
422 | */
423 | [type="search"]::-webkit-search-cancel-button,
424 | [type="search"]::-webkit-search-decoration {
425 | -webkit-appearance: none;
426 | }
427 | /**
428 | * 1. Correct the inability to style clickable types in iOS and Safari.
429 | * 2. Change font properties to `inherit` in Safari.
430 | */
431 | ::-webkit-file-upload-button {
432 | -webkit-appearance: button;
433 |
434 | /* 1 */
435 | font: inherit;
436 |
437 | /* 2 */
438 | }
439 |
440 | /* Interactive
441 | ========================================================================== */
442 | /*
443 | * Add the correct display in IE 9-.
444 | * 1. Add the correct display in Edge, IE, and Firefox.
445 | */
446 | details,
447 | menu {
448 | display: block;
449 | }
450 | /*
451 | * Add the correct display in all browsers.
452 | */
453 | summary {
454 | display: list-item;
455 | }
456 |
457 | /* Scripting
458 | ========================================================================== */
459 | /**
460 | * Add the correct display in IE 9-.
461 | */
462 | canvas {
463 | display: inline-block;
464 | }
465 | /**
466 | * Add the correct display in IE.
467 | */
468 | template {
469 | display: none;
470 | }
471 |
472 | /* Hidden
473 | ========================================================================== */
474 | /**
475 | * Add the correct display in IE 10-.
476 | */
477 | [hidden] {
478 | display: none;
479 | }
480 |
481 |
482 | /*******************************
483 | Site Overrides
484 | *******************************/
485 |
486 |
--------------------------------------------------------------------------------
/scss/globals/_site.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Site
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Page
14 | *******************************/
15 |
16 | @if $import-google-fonts {
17 | @import url($font-url);
18 | }
19 | html,
20 | body {
21 | height: 100%;
22 | }
23 | html {
24 | font-size: 14px;
25 | }
26 | body {
27 | margin: 0px;
28 | padding: 0px;
29 | overflow-x: hidden;
30 | min-width: 320px;
31 | background: #FFFFFF;
32 | font-family: $font-family;
33 | font-size: 14px;
34 | line-height: 1.4285em;
35 | color: rgba(0, 0, 0, 0.87);
36 | font-smoothing: antialiased;
37 | }
38 |
39 |
40 | /*******************************
41 | Headers
42 | *******************************/
43 |
44 | h1,
45 | h2,
46 | h3,
47 | h4,
48 | h5 {
49 | font-family: $font-family;
50 | line-height: 1.28571429em;
51 | margin: calc(2rem - 0.14285714em ) 0em 1rem;
52 | font-weight: bold;
53 | padding: 0em;
54 | }
55 | h1 {
56 | min-height: 1rem;
57 | font-size: 2rem;
58 | }
59 | h2 {
60 | font-size: 1.71428571rem;
61 | }
62 | h3 {
63 | font-size: 1.28571429rem;
64 | }
65 | h4 {
66 | font-size: 1.07142857rem;
67 | }
68 | h5 {
69 | font-size: 1rem;
70 | }
71 | h1:first-child,
72 | h2:first-child,
73 | h3:first-child,
74 | h4:first-child,
75 | h5:first-child {
76 | margin-top: 0em;
77 | }
78 | h1:last-child,
79 | h2:last-child,
80 | h3:last-child,
81 | h4:last-child,
82 | h5:last-child {
83 | margin-bottom: 0em;
84 | }
85 |
86 |
87 | /*******************************
88 | Text
89 | *******************************/
90 |
91 | p {
92 | margin: 0em 0em 1em;
93 | line-height: 1.4285em;
94 | }
95 | p:first-child {
96 | margin-top: 0em;
97 | }
98 | p:last-child {
99 | margin-bottom: 0em;
100 | }
101 |
102 | /*-------------------
103 | Links
104 | --------------------*/
105 |
106 | a {
107 | color: #4183C4;
108 | text-decoration: none;
109 | }
110 | a:hover {
111 | color: #1e70bf;
112 | text-decoration: none;
113 | }
114 |
115 |
116 | /*******************************
117 | Scrollbars
118 | *******************************/
119 |
120 |
121 |
122 | /*******************************
123 | Highlighting
124 | *******************************/
125 |
126 |
127 | /* Site */
128 | ::-webkit-selection {
129 | background-color: #CCE2FF;
130 | color: rgba(0, 0, 0, 0.87);
131 | }
132 | ::-moz-selection {
133 | background-color: #CCE2FF;
134 | color: rgba(0, 0, 0, 0.87);
135 | }
136 | ::selection {
137 | background-color: #CCE2FF;
138 | color: rgba(0, 0, 0, 0.87);
139 | }
140 |
141 | /* Form */
142 | textarea::-webkit-selection,
143 | input::-webkit-selection {
144 | background-color: rgba(100, 100, 100, 0.4);
145 | color: rgba(0, 0, 0, 0.87);
146 | }
147 | textarea::-moz-selection,
148 | input::-moz-selection {
149 | background-color: rgba(100, 100, 100, 0.4);
150 | color: rgba(0, 0, 0, 0.87);
151 | }
152 | textarea::selection,
153 | input::selection {
154 | background-color: rgba(100, 100, 100, 0.4);
155 | color: rgba(0, 0, 0, 0.87);
156 | }
157 |
158 | @if $use-custom-scrollbars {
159 | /* Force Simple Scrollbars */
160 | body ::-webkit-scrollbar {
161 | -webkit-appearance: none;
162 | width: 10px;
163 | height: 10px;
164 | }
165 | body ::-webkit-scrollbar-track {
166 | background: rgba(0, 0, 0, 0.1);
167 | border-radius: 0px;
168 | }
169 | body ::-webkit-scrollbar-thumb {
170 | cursor: pointer;
171 | border-radius: 5px;
172 | background: rgba(0, 0, 0, 0.25);
173 | -webkit-transition: color 0.2s ease;
174 | transition: color 0.2s ease;
175 | }
176 | body ::-webkit-scrollbar-thumb:window-inactive {
177 | background: rgba(0, 0, 0, 0.15);
178 | }
179 | body ::-webkit-scrollbar-thumb:hover {
180 | background: rgba(128, 135, 139, 0.8);
181 | }
182 |
183 | /* Inverted UI */
184 | body .ui.inverted::-webkit-scrollbar-track {
185 | background: rgba(255, 255, 255, 0.1);
186 | }
187 | body .ui.inverted::-webkit-scrollbar-thumb {
188 | background: rgba(255, 255, 255, 0.25);
189 | }
190 | body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
191 | background: rgba(255, 255, 255, 0.15);
192 | }
193 | body .ui.inverted::-webkit-scrollbar-thumb:hover {
194 | background: rgba(255, 255, 255, 0.35);
195 | }
196 | }
197 |
198 |
199 | /*******************************
200 | Global Overrides
201 | *******************************/
202 |
203 |
204 |
205 | /*******************************
206 | Site Overrides
207 | *******************************/
208 |
209 |
--------------------------------------------------------------------------------
/scss/globals/_variables.scss:
--------------------------------------------------------------------------------
1 | $import-google-fonts: true !default;
2 | $font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
3 | $font-name: 'Lato' !default;
4 | $font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
5 | $use-custom-scrollbars: true !default;
6 | $icons-font-path: '../../icons' !default;
7 | $flags-image-path: '../../images' !default;
8 |
--------------------------------------------------------------------------------
/scss/modules/_accordion.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Accordion
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Accordion
14 | *******************************/
15 |
16 | .ui.accordion,
17 | .ui.accordion .accordion {
18 | max-width: 100%;
19 | }
20 | .ui.accordion .accordion {
21 | margin: 1em 0em 0em;
22 | padding: 0em;
23 | }
24 |
25 | /* Title */
26 | .ui.accordion .title,
27 | .ui.accordion .accordion .title {
28 | cursor: pointer;
29 | }
30 |
31 | /* Default Styling */
32 | .ui.accordion .title:not(.ui) {
33 | padding: 0.5em 0em;
34 | font-family: $font-family;
35 | font-size: 1em;
36 | color: rgba(0, 0, 0, 0.87);
37 | }
38 |
39 | /* Content */
40 | .ui.accordion .title ~ .content,
41 | .ui.accordion .accordion .title ~ .content {
42 | display: none;
43 | }
44 |
45 | /* Default Styling */
46 | .ui.accordion:not(.styled) .title ~ .content:not(.ui),
47 | .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
48 | margin: '';
49 | padding: 0.5em 0em 1em;
50 | }
51 | .ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
52 | padding-bottom: 0em;
53 | }
54 |
55 | /* Arrow */
56 | .ui.accordion .title .dropdown.icon,
57 | .ui.accordion .accordion .title .dropdown.icon {
58 | display: inline-block;
59 | float: none;
60 | opacity: 1;
61 | width: 1.25em;
62 | height: 1em;
63 | margin: 0em 0.25rem 0em 0rem;
64 | padding: 0em;
65 | font-size: 1em;
66 | -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
67 | transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
68 | transition: transform 0.1s ease, opacity 0.1s ease;
69 | transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
70 | vertical-align: baseline;
71 | -webkit-transform: none;
72 | transform: none;
73 | }
74 |
75 | /*--------------
76 | Coupling
77 | ---------------*/
78 |
79 |
80 | /* Menu */
81 | .ui.accordion.menu .item .title {
82 | display: block;
83 | padding: 0em;
84 | }
85 | .ui.accordion.menu .item .title > .dropdown.icon {
86 | float: right;
87 | margin: 0.21425em 0em 0em 1em;
88 | -webkit-transform: rotate(180deg);
89 | transform: rotate(180deg);
90 | }
91 |
92 | /* Header */
93 | .ui.accordion .ui.header .dropdown.icon {
94 | font-size: 1em;
95 | margin: 0em 0.25rem 0em 0rem;
96 | }
97 |
98 |
99 | /*******************************
100 | States
101 | *******************************/
102 |
103 | .ui.accordion .active.title .dropdown.icon,
104 | .ui.accordion .accordion .active.title .dropdown.icon {
105 | -webkit-transform: rotate(90deg);
106 | transform: rotate(90deg);
107 | }
108 | .ui.accordion.menu .item .active.title > .dropdown.icon {
109 | -webkit-transform: rotate(90deg);
110 | transform: rotate(90deg);
111 | }
112 |
113 |
114 | /*******************************
115 | Types
116 | *******************************/
117 |
118 |
119 | /*--------------
120 | Styled
121 | ---------------*/
122 |
123 | .ui.styled.accordion {
124 | width: 600px;
125 | }
126 | .ui.styled.accordion,
127 | .ui.styled.accordion .accordion {
128 | border-radius: 0.28571429rem;
129 | background: #FFFFFF;
130 | -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15);
131 | box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15);
132 | }
133 | .ui.styled.accordion .title,
134 | .ui.styled.accordion .accordion .title {
135 | margin: 0em;
136 | padding: 0.75em 1em;
137 | color: rgba(0, 0, 0, 0.4);
138 | font-weight: bold;
139 | border-top: 1px solid rgba(34, 36, 38, 0.15);
140 | -webkit-transition: background 0.1s ease, color 0.1s ease;
141 | transition: background 0.1s ease, color 0.1s ease;
142 | }
143 | .ui.styled.accordion > .title:first-child,
144 | .ui.styled.accordion .accordion .title:first-child {
145 | border-top: none;
146 | }
147 |
148 | /* Content */
149 | .ui.styled.accordion .content,
150 | .ui.styled.accordion .accordion .content {
151 | margin: 0em;
152 | padding: 0.5em 1em 1.5em;
153 | }
154 | .ui.styled.accordion .accordion .content {
155 | padding: 0em;
156 | padding: 0.5em 1em 1.5em;
157 | }
158 |
159 | /* Hover */
160 | .ui.styled.accordion .title:hover,
161 | .ui.styled.accordion .active.title,
162 | .ui.styled.accordion .accordion .title:hover,
163 | .ui.styled.accordion .accordion .active.title {
164 | background: transparent;
165 | color: rgba(0, 0, 0, 0.87);
166 | }
167 | .ui.styled.accordion .accordion .title:hover,
168 | .ui.styled.accordion .accordion .active.title {
169 | background: transparent;
170 | color: rgba(0, 0, 0, 0.87);
171 | }
172 |
173 | /* Active */
174 | .ui.styled.accordion .active.title {
175 | background: transparent;
176 | color: rgba(0, 0, 0, 0.95);
177 | }
178 | .ui.styled.accordion .accordion .active.title {
179 | background: transparent;
180 | color: rgba(0, 0, 0, 0.95);
181 | }
182 |
183 |
184 | /*******************************
185 | States
186 | *******************************/
187 |
188 |
189 | /*--------------
190 | Active
191 | ---------------*/
192 |
193 | .ui.accordion .active.content,
194 | .ui.accordion .accordion .active.content {
195 | display: block;
196 | }
197 |
198 |
199 | /*******************************
200 | Variations
201 | *******************************/
202 |
203 |
204 | /*--------------
205 | Fluid
206 | ---------------*/
207 |
208 | .ui.fluid.accordion,
209 | .ui.fluid.accordion .accordion {
210 | width: 100%;
211 | }
212 |
213 | /*--------------
214 | Inverted
215 | ---------------*/
216 |
217 | .ui.inverted.accordion .title:not(.ui) {
218 | color: rgba(255, 255, 255, 0.9);
219 | }
220 |
221 |
222 | /*******************************
223 | Theme Overrides
224 | *******************************/
225 |
226 | @font-face {
227 | font-family: 'Accordion';
228 | 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');
229 | font-weight: normal;
230 | font-style: normal;
231 | }
232 |
233 | /* Dropdown Icon */
234 | .ui.accordion .title .dropdown.icon,
235 | .ui.accordion .accordion .title .dropdown.icon {
236 | font-family: Accordion;
237 | line-height: 1;
238 | -webkit-backface-visibility: hidden;
239 | backface-visibility: hidden;
240 | font-weight: normal;
241 | font-style: normal;
242 | text-align: center;
243 | }
244 | .ui.accordion .title .dropdown.icon:before,
245 | .ui.accordion .accordion .title .dropdown.icon:before {
246 | content: '\f0da' /*rtl:'\f0d9'*/;
247 | }
248 |
249 |
250 | /*******************************
251 | User Overrides
252 | *******************************/
253 |
254 |
--------------------------------------------------------------------------------
/scss/modules/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'accordion';
2 | @import 'checkbox';
3 | @import 'dimmer';
4 | @import 'dropdown';
5 | @import 'embed';
6 | @import 'modal';
7 | @import 'nag';
8 | @import 'popup';
9 | @import 'progress';
10 | @import 'rating';
11 | @import 'search';
12 | @import 'shape';
13 | @import 'sidebar';
14 | @import 'sticky';
15 | @import 'tab';
16 | @import 'transition';
17 | @import 'video';
18 |
--------------------------------------------------------------------------------
/scss/modules/_dimmer.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Dimmer
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Dimmer
14 | *******************************/
15 |
16 | .dimmable:not(body) {
17 | position: relative;
18 | }
19 | .ui.dimmer {
20 | display: none;
21 | position: absolute;
22 | top: 0em !important;
23 | left: 0em !important;
24 | width: 100%;
25 | height: 100%;
26 | text-align: center;
27 | vertical-align: middle;
28 | padding: 1em;
29 | background-color: rgba(0, 0, 0, 0.85);
30 | opacity: 0;
31 | line-height: 1;
32 | -webkit-animation-fill-mode: both;
33 | animation-fill-mode: both;
34 | -webkit-animation-duration: 0.5s;
35 | animation-duration: 0.5s;
36 | -webkit-transition: background-color 0.5s linear;
37 | transition: background-color 0.5s linear;
38 | -webkit-box-orient: vertical;
39 | -webkit-box-direction: normal;
40 | -ms-flex-direction: column;
41 | flex-direction: column;
42 | -webkit-box-align: center;
43 | -ms-flex-align: center;
44 | align-items: center;
45 | -webkit-box-pack: center;
46 | -ms-flex-pack: center;
47 | justify-content: center;
48 | -webkit-user-select: none;
49 | -moz-user-select: none;
50 | -ms-user-select: none;
51 | user-select: none;
52 | will-change: opacity;
53 | z-index: 1000;
54 | }
55 |
56 | /* Dimmer Content */
57 | .ui.dimmer > .content {
58 | -webkit-user-select: text;
59 | -moz-user-select: text;
60 | -ms-user-select: text;
61 | user-select: text;
62 | color: #FFFFFF;
63 | }
64 |
65 | /* Loose Coupling */
66 | .ui.segment > .ui.dimmer {
67 | border-radius: inherit !important;
68 | }
69 |
70 | @if $use-custom-scrollbars {
71 | /* Scrollbars */
72 | .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
73 | background: rgba(255, 255, 255, 0.1);
74 | }
75 | .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
76 | background: rgba(255, 255, 255, 0.25);
77 | }
78 | .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
79 | background: rgba(255, 255, 255, 0.15);
80 | }
81 | .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
82 | background: rgba(255, 255, 255, 0.35);
83 | }
84 | }
85 |
86 |
87 | /*******************************
88 | States
89 | *******************************/
90 |
91 |
92 | /* Animating */
93 | .animating.dimmable:not(body),
94 | .dimmed.dimmable:not(body) {
95 | overflow: hidden;
96 | }
97 |
98 | /* Animating / Active / Visible */
99 | .dimmed.dimmable > .ui.animating.dimmer,
100 | .dimmed.dimmable > .ui.visible.dimmer,
101 | .ui.active.dimmer {
102 | display: -webkit-box;
103 | display: -ms-flexbox;
104 | display: flex;
105 | opacity: 1;
106 | }
107 |
108 | /* Disabled */
109 | .ui.disabled.dimmer {
110 | width: 0 !important;
111 | height: 0 !important;
112 | }
113 |
114 |
115 | /*******************************
116 | Variations
117 | *******************************/
118 |
119 |
120 | /*--------------
121 | Legacy
122 | ---------------*/
123 |
124 |
125 | /* Animating / Active / Visible */
126 | .dimmed.dimmable > .ui.animating.legacy.dimmer,
127 | .dimmed.dimmable > .ui.visible.legacy.dimmer,
128 | .ui.active.legacy.dimmer {
129 | display: block;
130 | }
131 |
132 | /*--------------
133 | Alignment
134 | ---------------*/
135 |
136 | .ui[class*="top aligned"].dimmer {
137 | -webkit-box-pack: start;
138 | -ms-flex-pack: start;
139 | justify-content: flex-start;
140 | }
141 | .ui[class*="bottom aligned"].dimmer {
142 | -webkit-box-pack: end;
143 | -ms-flex-pack: end;
144 | justify-content: flex-end;
145 | }
146 |
147 | /*--------------
148 | Page
149 | ---------------*/
150 |
151 | .ui.page.dimmer {
152 | position: fixed;
153 | -webkit-transform-style: '';
154 | transform-style: '';
155 | -webkit-perspective: 2000px;
156 | perspective: 2000px;
157 | -webkit-transform-origin: center center;
158 | transform-origin: center center;
159 | }
160 | body.animating.in.dimmable,
161 | body.dimmed.dimmable {
162 | overflow: hidden;
163 | }
164 | body.dimmable > .dimmer {
165 | position: fixed;
166 | }
167 |
168 | /*--------------
169 | Blurring
170 | ---------------*/
171 |
172 | .blurring.dimmable > :not(.dimmer) {
173 | -webkit-filter: blur(0px) grayscale(0);
174 | filter: blur(0px) grayscale(0);
175 | -webkit-transition: 800ms -webkit-filter ease;
176 | transition: 800ms -webkit-filter ease;
177 | transition: 800ms filter ease;
178 | transition: 800ms filter ease, 800ms -webkit-filter ease;
179 | }
180 | .blurring.dimmed.dimmable > :not(.dimmer) {
181 | -webkit-filter: blur(5px) grayscale(0.7);
182 | filter: blur(5px) grayscale(0.7);
183 | }
184 |
185 | /* Dimmer Color */
186 | .blurring.dimmable > .dimmer {
187 | background-color: rgba(0, 0, 0, 0.6);
188 | }
189 | .blurring.dimmable > .inverted.dimmer {
190 | background-color: rgba(255, 255, 255, 0.6);
191 | }
192 |
193 | /*--------------
194 | Aligned
195 | ---------------*/
196 |
197 | .ui.dimmer > .top.aligned.content > * {
198 | vertical-align: top;
199 | }
200 | .ui.dimmer > .bottom.aligned.content > * {
201 | vertical-align: bottom;
202 | }
203 |
204 | /*--------------
205 | Inverted
206 | ---------------*/
207 |
208 | .ui.inverted.dimmer {
209 | background-color: rgba(255, 255, 255, 0.85);
210 | }
211 | .ui.inverted.dimmer > .content > * {
212 | color: #FFFFFF;
213 | }
214 |
215 | /*--------------
216 | Simple
217 | ---------------*/
218 |
219 |
220 | /* Displays without javascript */
221 | .ui.simple.dimmer {
222 | display: block;
223 | overflow: hidden;
224 | opacity: 1;
225 | width: 0%;
226 | height: 0%;
227 | z-index: -100;
228 | background-color: rgba(0, 0, 0, 0);
229 | }
230 | .dimmed.dimmable > .ui.simple.dimmer {
231 | overflow: visible;
232 | opacity: 1;
233 | width: 100%;
234 | height: 100%;
235 | background-color: rgba(0, 0, 0, 0.85);
236 | z-index: 1;
237 | }
238 | .ui.simple.inverted.dimmer {
239 | background-color: rgba(255, 255, 255, 0);
240 | }
241 | .dimmed.dimmable > .ui.simple.inverted.dimmer {
242 | background-color: rgba(255, 255, 255, 0.85);
243 | }
244 |
245 |
246 | /*******************************
247 | Theme Overrides
248 | *******************************/
249 |
250 |
251 |
252 | /*******************************
253 | User Overrides
254 | *******************************/
255 |
256 |
--------------------------------------------------------------------------------
/scss/modules/_embed.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Video
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Types
14 | *******************************/
15 |
16 | .ui.embed {
17 | position: relative;
18 | max-width: 100%;
19 | height: 0px;
20 | overflow: hidden;
21 | background: #DCDDDE;
22 | padding-bottom: 56.25%;
23 | }
24 |
25 | /*-----------------
26 | Embedded Content
27 | ------------------*/
28 |
29 | .ui.embed iframe,
30 | .ui.embed embed,
31 | .ui.embed object {
32 | position: absolute;
33 | border: none;
34 | width: 100%;
35 | height: 100%;
36 | top: 0px;
37 | left: 0px;
38 | margin: 0em;
39 | padding: 0em;
40 | }
41 |
42 | /*-----------------
43 | Embed
44 | ------------------*/
45 |
46 | .ui.embed > .embed {
47 | display: none;
48 | }
49 |
50 | /*--------------
51 | Placeholder
52 | ---------------*/
53 |
54 | .ui.embed > .placeholder {
55 | position: absolute;
56 | cursor: pointer;
57 | top: 0px;
58 | left: 0px;
59 | display: block;
60 | width: 100%;
61 | height: 100%;
62 | background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
63 | }
64 |
65 | /*--------------
66 | Icon
67 | ---------------*/
68 |
69 | .ui.embed > .icon {
70 | cursor: pointer;
71 | position: absolute;
72 | top: 0px;
73 | left: 0px;
74 | width: 100%;
75 | height: 100%;
76 | z-index: 2;
77 | }
78 | .ui.embed > .icon:after {
79 | position: absolute;
80 | top: 0%;
81 | left: 0%;
82 | width: 100%;
83 | height: 100%;
84 | z-index: 3;
85 | content: '';
86 | background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
87 | background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
88 | opacity: 0.5;
89 | -webkit-transition: opacity 0.5s ease;
90 | transition: opacity 0.5s ease;
91 | }
92 | .ui.embed > .icon:before {
93 | position: absolute;
94 | top: 50%;
95 | left: 50%;
96 | z-index: 4;
97 | -webkit-transform: translateX(-50%) translateY(-50%);
98 | transform: translateX(-50%) translateY(-50%);
99 | color: #FFFFFF;
100 | font-size: 6rem;
101 | text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2);
102 | -webkit-transition: opacity 0.5s ease, color 0.5s ease;
103 | transition: opacity 0.5s ease, color 0.5s ease;
104 | z-index: 10;
105 | }
106 |
107 |
108 | /*******************************
109 | States
110 | *******************************/
111 |
112 |
113 | /*--------------
114 | Hover
115 | ---------------*/
116 |
117 | .ui.embed .icon:hover:after {
118 | background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
119 | background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
120 | opacity: 1;
121 | }
122 | .ui.embed .icon:hover:before {
123 | color: #FFFFFF;
124 | }
125 |
126 | /*--------------
127 | Active
128 | ---------------*/
129 |
130 | .ui.active.embed > .icon,
131 | .ui.active.embed > .placeholder {
132 | display: none;
133 | }
134 | .ui.active.embed > .embed {
135 | display: block;
136 | }
137 |
138 |
139 | /*******************************
140 | Video Overrides
141 | *******************************/
142 |
143 |
144 |
145 | /*******************************
146 | Site Overrides
147 | *******************************/
148 |
149 |
150 |
151 | /*******************************
152 | Variations
153 | *******************************/
154 |
155 | .ui.square.embed {
156 | padding-bottom: 100%;
157 | }
158 | .ui[class*="4:3"].embed {
159 | padding-bottom: 75%;
160 | }
161 | .ui[class*="16:9"].embed {
162 | padding-bottom: 56.25%;
163 | }
164 | .ui[class*="21:9"].embed {
165 | padding-bottom: 42.85714286%;
166 | }
167 |
--------------------------------------------------------------------------------
/scss/modules/_modal.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Modal
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Modal
14 | *******************************/
15 |
16 | .ui.modal {
17 | position: absolute;
18 | display: none;
19 | z-index: 1001;
20 | text-align: left;
21 | background: #FFFFFF;
22 | border: none;
23 | -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
24 | box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
25 | -webkit-transform-origin: 50% 25%;
26 | transform-origin: 50% 25%;
27 | -webkit-box-flex: 0;
28 | -ms-flex: 0 0 auto;
29 | flex: 0 0 auto;
30 | border-radius: 0.28571429rem;
31 | -webkit-user-select: text;
32 | -moz-user-select: text;
33 | -ms-user-select: text;
34 | user-select: text;
35 | will-change: top, left, margin, transform, opacity;
36 | }
37 | .ui.modal > :first-child:not(.icon),
38 | .ui.modal > .icon:first-child + * {
39 | border-top-left-radius: 0.28571429rem;
40 | border-top-right-radius: 0.28571429rem;
41 | }
42 | .ui.modal > :last-child {
43 | border-bottom-left-radius: 0.28571429rem;
44 | border-bottom-right-radius: 0.28571429rem;
45 | }
46 |
47 |
48 | /*******************************
49 | Content
50 | *******************************/
51 |
52 |
53 | /*--------------
54 | Close
55 | ---------------*/
56 |
57 | .ui.modal > .close {
58 | cursor: pointer;
59 | position: absolute;
60 | top: -2.5rem;
61 | right: -2.5rem;
62 | z-index: 1;
63 | opacity: 0.8;
64 | font-size: 1.25em;
65 | color: #FFFFFF;
66 | width: 2.25rem;
67 | height: 2.25rem;
68 | padding: 0.625rem 0rem 0rem 0rem;
69 | }
70 | .ui.modal > .close:hover {
71 | opacity: 1;
72 | }
73 |
74 | /*--------------
75 | Header
76 | ---------------*/
77 |
78 | .ui.modal > .header {
79 | display: block;
80 | font-family: $font-family;
81 | background: #FFFFFF;
82 | margin: 0em;
83 | padding: 1.25rem 1.5rem;
84 | -webkit-box-shadow: none;
85 | box-shadow: none;
86 | color: rgba(0, 0, 0, 0.85);
87 | border-bottom: 1px solid rgba(34, 36, 38, 0.15);
88 | }
89 | .ui.modal > .header:not(.ui) {
90 | font-size: 1.42857143rem;
91 | line-height: 1.28571429em;
92 | font-weight: bold;
93 | }
94 |
95 | /*--------------
96 | Content
97 | ---------------*/
98 |
99 | .ui.modal > .content {
100 | display: block;
101 | width: 100%;
102 | font-size: 1em;
103 | line-height: 1.4;
104 | padding: 1.5rem;
105 | background: #FFFFFF;
106 | }
107 | .ui.modal > .image.content {
108 | display: -webkit-box;
109 | display: -ms-flexbox;
110 | display: flex;
111 | -webkit-box-orient: horizontal;
112 | -webkit-box-direction: normal;
113 | -ms-flex-direction: row;
114 | flex-direction: row;
115 | }
116 |
117 | /* Image */
118 | .ui.modal > .content > .image {
119 | display: block;
120 | -webkit-box-flex: 0;
121 | -ms-flex: 0 1 auto;
122 | flex: 0 1 auto;
123 | width: '';
124 | -ms-flex-item-align: top;
125 | align-self: top;
126 | }
127 | .ui.modal > [class*="top aligned"] {
128 | -ms-flex-item-align: top;
129 | align-self: top;
130 | }
131 | .ui.modal > [class*="middle aligned"] {
132 | -ms-flex-item-align: middle;
133 | align-self: middle;
134 | }
135 | .ui.modal > [class*="stretched"] {
136 | -ms-flex-item-align: stretch;
137 | align-self: stretch;
138 | }
139 |
140 | /* Description */
141 | .ui.modal > .content > .description {
142 | display: block;
143 | -webkit-box-flex: 1;
144 | -ms-flex: 1 0 auto;
145 | flex: 1 0 auto;
146 | min-width: 0px;
147 | -ms-flex-item-align: top;
148 | align-self: top;
149 | }
150 | .ui.modal > .content > .icon + .description,
151 | .ui.modal > .content > .image + .description {
152 | -webkit-box-flex: 0;
153 | -ms-flex: 0 1 auto;
154 | flex: 0 1 auto;
155 | min-width: '';
156 | width: auto;
157 | padding-left: 2em;
158 | }
159 | /*rtl:ignore*/
160 | .ui.modal > .content > .image > i.icon {
161 | margin: 0em;
162 | opacity: 1;
163 | width: auto;
164 | line-height: 1;
165 | font-size: 8rem;
166 | }
167 |
168 | /*--------------
169 | Actions
170 | ---------------*/
171 |
172 | .ui.modal > .actions {
173 | background: #F9FAFB;
174 | padding: 1rem 1rem;
175 | border-top: 1px solid rgba(34, 36, 38, 0.15);
176 | text-align: right;
177 | }
178 | .ui.modal .actions > .button {
179 | margin-left: 0.75em;
180 | }
181 |
182 | /*-------------------
183 | Responsive
184 | --------------------*/
185 |
186 |
187 | /* Modal Width */
188 | @media only screen and (max-width: 767px) {
189 | .ui.modal {
190 | width: 95%;
191 | margin: 0em 0em 0em 0em;
192 | }
193 | }
194 | @media only screen and (min-width: 768px) {
195 | .ui.modal {
196 | width: 88%;
197 | margin: 0em 0em 0em 0em;
198 | }
199 | }
200 | @media only screen and (min-width: 992px) {
201 | .ui.modal {
202 | width: 850px;
203 | margin: 0em 0em 0em 0em;
204 | }
205 | }
206 | @media only screen and (min-width: 1200px) {
207 | .ui.modal {
208 | width: 900px;
209 | margin: 0em 0em 0em 0em;
210 | }
211 | }
212 | @media only screen and (min-width: 1920px) {
213 | .ui.modal {
214 | width: 950px;
215 | margin: 0em 0em 0em 0em;
216 | }
217 | }
218 |
219 | /* Tablet and Mobile */
220 | @media only screen and (max-width: 991px) {
221 | .ui.modal > .header {
222 | padding-right: 2.25rem;
223 | }
224 | .ui.modal > .close {
225 | top: 1.0535rem;
226 | right: 1rem;
227 | color: rgba(0, 0, 0, 0.87);
228 | }
229 | }
230 |
231 | /* Mobile */
232 | @media only screen and (max-width: 767px) {
233 | .ui.modal > .header {
234 | padding: 0.75rem 1rem !important;
235 | padding-right: 2.25rem !important;
236 | }
237 | .ui.modal > .content {
238 | display: block;
239 | padding: 1rem !important;
240 | }
241 | .ui.modal > .close {
242 | top: 0.5rem !important;
243 | right: 0.5rem !important;
244 | }
245 | /*rtl:ignore*/
246 | .ui.modal .image.content {
247 | -webkit-box-orient: vertical;
248 | -webkit-box-direction: normal;
249 | -ms-flex-direction: column;
250 | flex-direction: column;
251 | }
252 | .ui.modal .content > .image {
253 | display: block;
254 | max-width: 100%;
255 | margin: 0em auto !important;
256 | text-align: center;
257 | padding: 0rem 0rem 1rem !important;
258 | }
259 | .ui.modal > .content > .image > i.icon {
260 | font-size: 5rem;
261 | text-align: center;
262 | }
263 | /*rtl:ignore*/
264 | .ui.modal .content > .description {
265 | display: block;
266 | width: 100% !important;
267 | margin: 0em !important;
268 | padding: 1rem 0rem !important;
269 | -webkit-box-shadow: none;
270 | box-shadow: none;
271 | }
272 |
273 | /* Let Buttons Stack */
274 | .ui.modal > .actions {
275 | padding: 1rem 1rem 0rem !important;
276 | }
277 | .ui.modal .actions > .buttons,
278 | .ui.modal .actions > .button {
279 | margin-bottom: 1rem;
280 | }
281 | }
282 |
283 | /*--------------
284 | Coupling
285 | ---------------*/
286 |
287 | .ui.inverted.dimmer > .ui.modal {
288 | -webkit-box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
289 | box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
290 | }
291 |
292 |
293 | /*******************************
294 | Types
295 | *******************************/
296 |
297 | .ui.basic.modal {
298 | background-color: transparent;
299 | border: none;
300 | border-radius: 0em;
301 | -webkit-box-shadow: none !important;
302 | box-shadow: none !important;
303 | color: #FFFFFF;
304 | }
305 | .ui.basic.modal > .header,
306 | .ui.basic.modal > .content,
307 | .ui.basic.modal > .actions {
308 | background-color: transparent;
309 | }
310 | .ui.basic.modal > .header {
311 | color: #FFFFFF;
312 | }
313 | .ui.basic.modal > .close {
314 | top: 1rem;
315 | right: 1.5rem;
316 | }
317 | .ui.inverted.dimmer > .basic.modal {
318 | color: rgba(0, 0, 0, 0.87);
319 | }
320 | .ui.inverted.dimmer > .ui.basic.modal > .header {
321 | color: rgba(0, 0, 0, 0.85);
322 | }
323 |
324 | /* Resort to margin positioning if legacy */
325 | .ui.legacy.modal,
326 | .ui.legacy.page.dimmer > .ui.modal {
327 | top: 50%;
328 | left: 50%;
329 | }
330 | .ui.legacy.page.dimmer > .ui.scrolling.modal,
331 | .ui.page.dimmer > .ui.scrolling.legacy.modal,
332 | .ui.top.aligned.legacy.page.dimmer > .ui.modal,
333 | .ui.top.aligned.dimmer > .ui.legacy.modal {
334 | top: auto;
335 | }
336 |
337 | /* Tablet and Mobile */
338 | @media only screen and (max-width: 991px) {
339 | .ui.basic.modal > .close {
340 | color: #FFFFFF;
341 | }
342 | }
343 |
344 |
345 | /*******************************
346 | States
347 | *******************************/
348 |
349 | .ui.loading.modal {
350 | display: block;
351 | visibility: hidden;
352 | z-index: -1;
353 | }
354 | .ui.active.modal {
355 | display: block;
356 | }
357 |
358 |
359 | /*******************************
360 | Variations
361 | *******************************/
362 |
363 |
364 | /*--------------
365 | Top Aligned
366 | ---------------*/
367 |
368 |
369 | /* Top Aligned Modal */
370 | .modals.dimmer[class*="top aligned"] .modal {
371 | margin: 5vh auto;
372 | }
373 | @media only screen and (max-width: 767px) {
374 | .modals.dimmer[class*="top aligned"] .modal {
375 | margin: 1rem auto;
376 | }
377 | }
378 |
379 | /* Legacy Top Aligned */
380 | .legacy.modals.dimmer[class*="top aligned"] {
381 | padding-top: 5vh;
382 | }
383 | @media only screen and (max-width: 767px) {
384 | .legacy.modals.dimmer[class*="top aligned"] {
385 | padding-top: 1rem;
386 | }
387 | }
388 |
389 | /*--------------
390 | Scrolling
391 | ---------------*/
392 |
393 |
394 | /* Scrolling Dimmer */
395 | .scrolling.dimmable.dimmed {
396 | overflow: hidden;
397 | }
398 | .scrolling.dimmable > .dimmer {
399 | -webkit-box-pack: start;
400 | -ms-flex-pack: start;
401 | justify-content: flex-start;
402 | }
403 | .scrolling.dimmable.dimmed > .dimmer {
404 | overflow: auto;
405 | -webkit-overflow-scrolling: touch;
406 | }
407 | .scrolling.dimmable > .dimmer {
408 | position: fixed;
409 | }
410 | .modals.dimmer .ui.scrolling.modal {
411 | margin: 1rem auto;
412 | }
413 |
414 | /* Undetached Scrolling */
415 | .scrolling.undetached.dimmable.dimmed {
416 | overflow: auto;
417 | -webkit-overflow-scrolling: touch;
418 | }
419 | .scrolling.undetached.dimmable.dimmed > .dimmer {
420 | overflow: hidden;
421 | }
422 | .scrolling.undetached.dimmable .ui.scrolling.modal {
423 | position: absolute;
424 | left: 50%;
425 | margin-top: 1rem !important;
426 | }
427 |
428 | /* Scrolling Content */
429 | .ui.modal .scrolling.content {
430 | max-height: calc(80vh - 10em);
431 | overflow: auto;
432 | }
433 |
434 | /*--------------
435 | Full Screen
436 | ---------------*/
437 |
438 | .ui.fullscreen.modal {
439 | width: 95% !important;
440 | margin: 1em auto;
441 | }
442 | .ui.fullscreen.modal > .header {
443 | padding-right: 2.25rem;
444 | }
445 | .ui.fullscreen.modal > .close {
446 | top: 1.0535rem;
447 | right: 1rem;
448 | color: rgba(0, 0, 0, 0.87);
449 | }
450 |
451 | /*--------------
452 | Size
453 | ---------------*/
454 |
455 | .ui.modal {
456 | font-size: 1rem;
457 | }
458 |
459 | /* Mini */
460 | .ui.mini.modal > .header:not(.ui) {
461 | font-size: 1.3em;
462 | }
463 |
464 | /* Mini Modal Width */
465 | @media only screen and (max-width: 767px) {
466 | .ui.mini.modal {
467 | width: 95%;
468 | margin: 0em 0em 0em 0em;
469 | }
470 | }
471 | @media only screen and (min-width: 768px) {
472 | .ui.mini.modal {
473 | width: 35.2%;
474 | margin: 0em 0em 0em 0em;
475 | }
476 | }
477 | @media only screen and (min-width: 992px) {
478 | .ui.mini.modal {
479 | width: 340px;
480 | margin: 0em 0em 0em 0em;
481 | }
482 | }
483 | @media only screen and (min-width: 1200px) {
484 | .ui.mini.modal {
485 | width: 360px;
486 | margin: 0em 0em 0em 0em;
487 | }
488 | }
489 | @media only screen and (min-width: 1920px) {
490 | .ui.mini.modal {
491 | width: 380px;
492 | margin: 0em 0em 0em 0em;
493 | }
494 | }
495 |
496 | /* mini */
497 | .ui.small.modal > .header:not(.ui) {
498 | font-size: 1.3em;
499 | }
500 |
501 | /* Tiny Modal Width */
502 | @media only screen and (max-width: 767px) {
503 | .ui.tiny.modal {
504 | width: 95%;
505 | margin: 0em 0em 0em 0em;
506 | }
507 | }
508 | @media only screen and (min-width: 768px) {
509 | .ui.tiny.modal {
510 | width: 52.8%;
511 | margin: 0em 0em 0em 0em;
512 | }
513 | }
514 | @media only screen and (min-width: 992px) {
515 | .ui.tiny.modal {
516 | width: 510px;
517 | margin: 0em 0em 0em 0em;
518 | }
519 | }
520 | @media only screen and (min-width: 1200px) {
521 | .ui.tiny.modal {
522 | width: 540px;
523 | margin: 0em 0em 0em 0em;
524 | }
525 | }
526 | @media only screen and (min-width: 1920px) {
527 | .ui.tiny.modal {
528 | width: 570px;
529 | margin: 0em 0em 0em 0em;
530 | }
531 | }
532 |
533 | /* Small */
534 | .ui.small.modal > .header:not(.ui) {
535 | font-size: 1.3em;
536 | }
537 |
538 | /* Small Modal Width */
539 | @media only screen and (max-width: 767px) {
540 | .ui.small.modal {
541 | width: 95%;
542 | margin: 0em 0em 0em 0em;
543 | }
544 | }
545 | @media only screen and (min-width: 768px) {
546 | .ui.small.modal {
547 | width: 70.4%;
548 | margin: 0em 0em 0em 0em;
549 | }
550 | }
551 | @media only screen and (min-width: 992px) {
552 | .ui.small.modal {
553 | width: 680px;
554 | margin: 0em 0em 0em 0em;
555 | }
556 | }
557 | @media only screen and (min-width: 1200px) {
558 | .ui.small.modal {
559 | width: 720px;
560 | margin: 0em 0em 0em 0em;
561 | }
562 | }
563 | @media only screen and (min-width: 1920px) {
564 | .ui.small.modal {
565 | width: 760px;
566 | margin: 0em 0em 0em 0em;
567 | }
568 | }
569 |
570 | /* Large Modal Width */
571 | .ui.large.modal > .header {
572 | font-size: 1.6em;
573 | }
574 | @media only screen and (max-width: 767px) {
575 | .ui.large.modal {
576 | width: 95%;
577 | margin: 0em 0em 0em 0em;
578 | }
579 | }
580 | @media only screen and (min-width: 768px) {
581 | .ui.large.modal {
582 | width: 88%;
583 | margin: 0em 0em 0em 0em;
584 | }
585 | }
586 | @media only screen and (min-width: 992px) {
587 | .ui.large.modal {
588 | width: 1020px;
589 | margin: 0em 0em 0em 0em;
590 | }
591 | }
592 | @media only screen and (min-width: 1200px) {
593 | .ui.large.modal {
594 | width: 1080px;
595 | margin: 0em 0em 0em 0em;
596 | }
597 | }
598 | @media only screen and (min-width: 1920px) {
599 | .ui.large.modal {
600 | width: 1140px;
601 | margin: 0em 0em 0em 0em;
602 | }
603 | }
604 |
605 |
606 | /*******************************
607 | Theme Overrides
608 | *******************************/
609 |
610 |
611 |
612 | /*******************************
613 | Site Overrides
614 | *******************************/
615 |
616 |
--------------------------------------------------------------------------------
/scss/modules/_nag.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Nag
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Nag
14 | *******************************/
15 |
16 | .ui.nag {
17 | display: none;
18 | opacity: 0.95;
19 | position: relative;
20 | top: 0em;
21 | left: 0px;
22 | z-index: 999;
23 | min-height: 0em;
24 | width: 100%;
25 | margin: 0em;
26 | padding: 0.75em 1em;
27 | background: #555555;
28 | -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
29 | box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
30 | font-size: 1rem;
31 | text-align: center;
32 | color: rgba(0, 0, 0, 0.87);
33 | border-radius: 0em 0em 0.28571429rem 0.28571429rem;
34 | -webkit-transition: 0.2s background ease;
35 | transition: 0.2s background ease;
36 | }
37 | a.ui.nag {
38 | cursor: pointer;
39 | }
40 | .ui.nag > .title {
41 | display: inline-block;
42 | margin: 0em 0.5em;
43 | color: #FFFFFF;
44 | }
45 | .ui.nag > .close.icon {
46 | cursor: pointer;
47 | opacity: 0.4;
48 | position: absolute;
49 | top: 50%;
50 | right: 1em;
51 | font-size: 1em;
52 | margin: -0.5em 0em 0em;
53 | color: #FFFFFF;
54 | -webkit-transition: opacity 0.2s ease;
55 | transition: opacity 0.2s ease;
56 | }
57 |
58 |
59 | /*******************************
60 | States
61 | *******************************/
62 |
63 |
64 | /* Hover */
65 | .ui.nag:hover {
66 | background: #555555;
67 | opacity: 1;
68 | }
69 | .ui.nag .close:hover {
70 | opacity: 1;
71 | }
72 |
73 |
74 | /*******************************
75 | Variations
76 | *******************************/
77 |
78 |
79 | /*--------------
80 | Static
81 | ---------------*/
82 |
83 | .ui.overlay.nag {
84 | position: absolute;
85 | display: block;
86 | }
87 |
88 | /*--------------
89 | Fixed
90 | ---------------*/
91 |
92 | .ui.fixed.nag {
93 | position: fixed;
94 | }
95 |
96 | /*--------------
97 | Bottom
98 | ---------------*/
99 |
100 | .ui.bottom.nags,
101 | .ui.bottom.nag {
102 | border-radius: 0.28571429rem 0.28571429rem 0em 0em;
103 | top: auto;
104 | bottom: 0em;
105 | }
106 |
107 | /*--------------
108 | White
109 | ---------------*/
110 |
111 | .ui.inverted.nags .nag,
112 | .ui.inverted.nag {
113 | background-color: #F3F4F5;
114 | color: rgba(0, 0, 0, 0.85);
115 | }
116 | .ui.inverted.nags .nag .close,
117 | .ui.inverted.nags .nag .title,
118 | .ui.inverted.nag .close,
119 | .ui.inverted.nag .title {
120 | color: rgba(0, 0, 0, 0.4);
121 | }
122 |
123 |
124 | /*******************************
125 | Groups
126 | *******************************/
127 |
128 | .ui.nags .nag {
129 | border-radius: 0em !important;
130 | }
131 | .ui.nags .nag:last-child {
132 | border-radius: 0em 0em 0.28571429rem 0.28571429rem;
133 | }
134 | .ui.bottom.nags .nag:last-child {
135 | border-radius: 0.28571429rem 0.28571429rem 0em 0em;
136 | }
137 |
138 |
139 | /*******************************
140 | Theme Overrides
141 | *******************************/
142 |
143 |
144 |
145 | /*******************************
146 | User Overrides
147 | *******************************/
148 |
149 |
--------------------------------------------------------------------------------
/scss/modules/_progress.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Progress Bar
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Progress
14 | *******************************/
15 |
16 | .ui.progress {
17 | position: relative;
18 | display: block;
19 | max-width: 100%;
20 | border: none;
21 | margin: 1em 0em 2.5em;
22 | -webkit-box-shadow: none;
23 | box-shadow: none;
24 | background: rgba(0, 0, 0, 0.1);
25 | padding: 0em;
26 | border-radius: 0.28571429rem;
27 | }
28 | .ui.progress:first-child {
29 | margin: 0em 0em 2.5em;
30 | }
31 | .ui.progress:last-child {
32 | margin: 0em 0em 1.5em;
33 | }
34 |
35 |
36 | /*******************************
37 | Content
38 | *******************************/
39 |
40 |
41 | /* Activity Bar */
42 | .ui.progress .bar {
43 | display: block;
44 | line-height: 1;
45 | position: relative;
46 | width: 0%;
47 | min-width: 2em;
48 | background: #888888;
49 | border-radius: 0.28571429rem;
50 | -webkit-transition: width 0.1s ease, background-color 0.1s ease;
51 | transition: width 0.1s ease, background-color 0.1s ease;
52 | }
53 |
54 | /* Percent Complete */
55 | .ui.progress .bar > .progress {
56 | white-space: nowrap;
57 | position: absolute;
58 | width: auto;
59 | font-size: 0.92857143em;
60 | top: 50%;
61 | right: 0.5em;
62 | left: auto;
63 | bottom: auto;
64 | color: rgba(255, 255, 255, 0.7);
65 | text-shadow: none;
66 | margin-top: -0.5em;
67 | font-weight: bold;
68 | text-align: left;
69 | }
70 |
71 | /* Label */
72 | .ui.progress > .label {
73 | position: absolute;
74 | width: 100%;
75 | font-size: 1em;
76 | top: 100%;
77 | right: auto;
78 | left: 0%;
79 | bottom: auto;
80 | color: rgba(0, 0, 0, 0.87);
81 | font-weight: bold;
82 | text-shadow: none;
83 | margin-top: 0.2em;
84 | text-align: center;
85 | -webkit-transition: color 0.4s ease;
86 | transition: color 0.4s ease;
87 | }
88 |
89 |
90 | /*******************************
91 | Types
92 | *******************************/
93 |
94 |
95 | /* Indicating */
96 | .ui.indicating.progress[data-percent^="1"] .bar,
97 | .ui.indicating.progress[data-percent^="2"] .bar {
98 | background-color: #D95C5C;
99 | }
100 | .ui.indicating.progress[data-percent^="3"] .bar {
101 | background-color: #EFBC72;
102 | }
103 | .ui.indicating.progress[data-percent^="4"] .bar,
104 | .ui.indicating.progress[data-percent^="5"] .bar {
105 | background-color: #E6BB48;
106 | }
107 | .ui.indicating.progress[data-percent^="6"] .bar {
108 | background-color: #DDC928;
109 | }
110 | .ui.indicating.progress[data-percent^="7"] .bar,
111 | .ui.indicating.progress[data-percent^="8"] .bar {
112 | background-color: #B4D95C;
113 | }
114 | .ui.indicating.progress[data-percent^="9"] .bar,
115 | .ui.indicating.progress[data-percent^="100"] .bar {
116 | background-color: #66DA81;
117 | }
118 |
119 | /* Indicating Label */
120 | .ui.indicating.progress[data-percent^="1"] .label,
121 | .ui.indicating.progress[data-percent^="2"] .label {
122 | color: rgba(0, 0, 0, 0.87);
123 | }
124 | .ui.indicating.progress[data-percent^="3"] .label {
125 | color: rgba(0, 0, 0, 0.87);
126 | }
127 | .ui.indicating.progress[data-percent^="4"] .label,
128 | .ui.indicating.progress[data-percent^="5"] .label {
129 | color: rgba(0, 0, 0, 0.87);
130 | }
131 | .ui.indicating.progress[data-percent^="6"] .label {
132 | color: rgba(0, 0, 0, 0.87);
133 | }
134 | .ui.indicating.progress[data-percent^="7"] .label,
135 | .ui.indicating.progress[data-percent^="8"] .label {
136 | color: rgba(0, 0, 0, 0.87);
137 | }
138 | .ui.indicating.progress[data-percent^="9"] .label,
139 | .ui.indicating.progress[data-percent^="100"] .label {
140 | color: rgba(0, 0, 0, 0.87);
141 | }
142 |
143 | /* Single Digits */
144 | .ui.indicating.progress[data-percent="1"] .bar,
145 | .ui.indicating.progress[data-percent="2"] .bar,
146 | .ui.indicating.progress[data-percent="3"] .bar,
147 | .ui.indicating.progress[data-percent="4"] .bar,
148 | .ui.indicating.progress[data-percent="5"] .bar,
149 | .ui.indicating.progress[data-percent="6"] .bar,
150 | .ui.indicating.progress[data-percent="7"] .bar,
151 | .ui.indicating.progress[data-percent="8"] .bar,
152 | .ui.indicating.progress[data-percent="9"] .bar {
153 | background-color: #D95C5C;
154 | }
155 | .ui.indicating.progress[data-percent="1"] .label,
156 | .ui.indicating.progress[data-percent="2"] .label,
157 | .ui.indicating.progress[data-percent="3"] .label,
158 | .ui.indicating.progress[data-percent="4"] .label,
159 | .ui.indicating.progress[data-percent="5"] .label,
160 | .ui.indicating.progress[data-percent="6"] .label,
161 | .ui.indicating.progress[data-percent="7"] .label,
162 | .ui.indicating.progress[data-percent="8"] .label,
163 | .ui.indicating.progress[data-percent="9"] .label {
164 | color: rgba(0, 0, 0, 0.87);
165 | }
166 |
167 | /* Indicating Success */
168 | .ui.indicating.progress.success .label {
169 | color: #1A531B;
170 | }
171 |
172 |
173 | /*******************************
174 | States
175 | *******************************/
176 |
177 |
178 | /*--------------
179 | Success
180 | ---------------*/
181 |
182 | .ui.progress.success .bar {
183 | background-color: #21BA45 !important;
184 | }
185 | .ui.progress.success .bar,
186 | .ui.progress.success .bar::after {
187 | -webkit-animation: none !important;
188 | animation: none !important;
189 | }
190 | .ui.progress.success > .label {
191 | color: #1A531B;
192 | }
193 |
194 | /*--------------
195 | Warning
196 | ---------------*/
197 |
198 | .ui.progress.warning .bar {
199 | background-color: #F2C037 !important;
200 | }
201 | .ui.progress.warning .bar,
202 | .ui.progress.warning .bar::after {
203 | -webkit-animation: none !important;
204 | animation: none !important;
205 | }
206 | .ui.progress.warning > .label {
207 | color: #794B02;
208 | }
209 |
210 | /*--------------
211 | Error
212 | ---------------*/
213 |
214 | .ui.progress.error .bar {
215 | background-color: #DB2828 !important;
216 | }
217 | .ui.progress.error .bar,
218 | .ui.progress.error .bar::after {
219 | -webkit-animation: none !important;
220 | animation: none !important;
221 | }
222 | .ui.progress.error > .label {
223 | color: #912D2B;
224 | }
225 |
226 | /*--------------
227 | Active
228 | ---------------*/
229 |
230 | .ui.active.progress .bar {
231 | position: relative;
232 | min-width: 2em;
233 | }
234 | .ui.active.progress .bar::after {
235 | content: '';
236 | opacity: 0;
237 | position: absolute;
238 | top: 0px;
239 | left: 0px;
240 | right: 0px;
241 | bottom: 0px;
242 | background: #FFFFFF;
243 | border-radius: 0.28571429rem;
244 | -webkit-animation: progress-active 2s ease infinite;
245 | animation: progress-active 2s ease infinite;
246 | }
247 | @-webkit-keyframes progress-active {
248 | 0% {
249 | opacity: 0.3;
250 | width: 0;
251 | }
252 | 100% {
253 | opacity: 0;
254 | width: 100%;
255 | }
256 | }
257 | @keyframes progress-active {
258 | 0% {
259 | opacity: 0.3;
260 | width: 0;
261 | }
262 | 100% {
263 | opacity: 0;
264 | width: 100%;
265 | }
266 | }
267 |
268 | /*--------------
269 | Disabled
270 | ---------------*/
271 |
272 | .ui.disabled.progress {
273 | opacity: 0.35;
274 | }
275 | .ui.disabled.progress .bar,
276 | .ui.disabled.progress .bar::after {
277 | -webkit-animation: none !important;
278 | animation: none !important;
279 | }
280 |
281 |
282 | /*******************************
283 | Variations
284 | *******************************/
285 |
286 |
287 | /*--------------
288 | Inverted
289 | ---------------*/
290 |
291 | .ui.inverted.progress {
292 | background: rgba(255, 255, 255, 0.08);
293 | border: none;
294 | }
295 | .ui.inverted.progress .bar {
296 | background: #888888;
297 | }
298 | .ui.inverted.progress .bar > .progress {
299 | color: #F9FAFB;
300 | }
301 | .ui.inverted.progress > .label {
302 | color: #FFFFFF;
303 | }
304 | .ui.inverted.progress.success > .label {
305 | color: #21BA45;
306 | }
307 | .ui.inverted.progress.warning > .label {
308 | color: #F2C037;
309 | }
310 | .ui.inverted.progress.error > .label {
311 | color: #DB2828;
312 | }
313 |
314 | /*--------------
315 | Attached
316 | ---------------*/
317 |
318 |
319 | /* bottom attached */
320 | .ui.progress.attached {
321 | background: transparent;
322 | position: relative;
323 | border: none;
324 | margin: 0em;
325 | }
326 | .ui.progress.attached,
327 | .ui.progress.attached .bar {
328 | display: block;
329 | height: 0.2rem;
330 | padding: 0px;
331 | overflow: hidden;
332 | border-radius: 0em 0em 0.28571429rem 0.28571429rem;
333 | }
334 | .ui.progress.attached .bar {
335 | border-radius: 0em;
336 | }
337 |
338 | /* top attached */
339 | .ui.progress.top.attached,
340 | .ui.progress.top.attached .bar {
341 | top: 0px;
342 | border-radius: 0.28571429rem 0.28571429rem 0em 0em;
343 | }
344 | .ui.progress.top.attached .bar {
345 | border-radius: 0em;
346 | }
347 |
348 | /* Coupling */
349 | .ui.segment > .ui.attached.progress,
350 | .ui.card > .ui.attached.progress {
351 | position: absolute;
352 | top: auto;
353 | left: 0;
354 | bottom: 100%;
355 | width: 100%;
356 | }
357 | .ui.segment > .ui.bottom.attached.progress,
358 | .ui.card > .ui.bottom.attached.progress {
359 | top: 100%;
360 | bottom: auto;
361 | }
362 |
363 | /*--------------
364 | Colors
365 | ---------------*/
366 |
367 |
368 | /* Red */
369 | .ui.red.progress .bar {
370 | background-color: #DB2828;
371 | }
372 | .ui.red.inverted.progress .bar {
373 | background-color: #FF695E;
374 | }
375 |
376 | /* Orange */
377 | .ui.orange.progress .bar {
378 | background-color: #F2711C;
379 | }
380 | .ui.orange.inverted.progress .bar {
381 | background-color: #FF851B;
382 | }
383 |
384 | /* Yellow */
385 | .ui.yellow.progress .bar {
386 | background-color: #FBBD08;
387 | }
388 | .ui.yellow.inverted.progress .bar {
389 | background-color: #FFE21F;
390 | }
391 |
392 | /* Olive */
393 | .ui.olive.progress .bar {
394 | background-color: #B5CC18;
395 | }
396 | .ui.olive.inverted.progress .bar {
397 | background-color: #D9E778;
398 | }
399 |
400 | /* Green */
401 | .ui.green.progress .bar {
402 | background-color: #21BA45;
403 | }
404 | .ui.green.inverted.progress .bar {
405 | background-color: #2ECC40;
406 | }
407 |
408 | /* Teal */
409 | .ui.teal.progress .bar {
410 | background-color: #00B5AD;
411 | }
412 | .ui.teal.inverted.progress .bar {
413 | background-color: #6DFFFF;
414 | }
415 |
416 | /* Blue */
417 | .ui.blue.progress .bar {
418 | background-color: #2185D0;
419 | }
420 | .ui.blue.inverted.progress .bar {
421 | background-color: #54C8FF;
422 | }
423 |
424 | /* Violet */
425 | .ui.violet.progress .bar {
426 | background-color: #6435C9;
427 | }
428 | .ui.violet.inverted.progress .bar {
429 | background-color: #A291FB;
430 | }
431 |
432 | /* Purple */
433 | .ui.purple.progress .bar {
434 | background-color: #A333C8;
435 | }
436 | .ui.purple.inverted.progress .bar {
437 | background-color: #DC73FF;
438 | }
439 |
440 | /* Pink */
441 | .ui.pink.progress .bar {
442 | background-color: #E03997;
443 | }
444 | .ui.pink.inverted.progress .bar {
445 | background-color: #FF8EDF;
446 | }
447 |
448 | /* Brown */
449 | .ui.brown.progress .bar {
450 | background-color: #A5673F;
451 | }
452 | .ui.brown.inverted.progress .bar {
453 | background-color: #D67C1C;
454 | }
455 |
456 | /* Grey */
457 | .ui.grey.progress .bar {
458 | background-color: #767676;
459 | }
460 | .ui.grey.inverted.progress .bar {
461 | background-color: #DCDDDE;
462 | }
463 |
464 | /* Black */
465 | .ui.black.progress .bar {
466 | background-color: #1B1C1D;
467 | }
468 | .ui.black.inverted.progress .bar {
469 | background-color: #545454;
470 | }
471 |
472 | /*--------------
473 | Sizes
474 | ---------------*/
475 |
476 | .ui.tiny.progress {
477 | font-size: 0.85714286rem;
478 | }
479 | .ui.tiny.progress .bar {
480 | height: 0.5em;
481 | }
482 | .ui.small.progress {
483 | font-size: 0.92857143rem;
484 | }
485 | .ui.small.progress .bar {
486 | height: 1em;
487 | }
488 | .ui.progress {
489 | font-size: 1rem;
490 | }
491 | .ui.progress .bar {
492 | height: 1.75em;
493 | }
494 | .ui.large.progress {
495 | font-size: 1.14285714rem;
496 | }
497 | .ui.large.progress .bar {
498 | height: 2.5em;
499 | }
500 | .ui.big.progress {
501 | font-size: 1.28571429rem;
502 | }
503 | .ui.big.progress .bar {
504 | height: 3.5em;
505 | }
506 |
507 |
508 | /*******************************
509 | Progress
510 | *******************************/
511 |
512 |
513 |
514 | /*******************************
515 | Site Overrides
516 | *******************************/
517 |
518 |
--------------------------------------------------------------------------------
/scss/modules/_search.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Search
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Search
14 | *******************************/
15 |
16 | .ui.search {
17 | position: relative;
18 | }
19 | .ui.search > .prompt {
20 | margin: 0em;
21 | outline: none;
22 | -webkit-appearance: none;
23 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
24 | text-shadow: none;
25 | font-style: normal;
26 | font-weight: normal;
27 | line-height: 1.21428571em;
28 | padding: 0.67857143em 1em;
29 | font-size: 1em;
30 | background: #FFFFFF;
31 | border: 1px solid rgba(34, 36, 38, 0.15);
32 | color: rgba(0, 0, 0, 0.87);
33 | -webkit-box-shadow: 0em 0em 0em 0em transparent inset;
34 | box-shadow: 0em 0em 0em 0em transparent inset;
35 | -webkit-transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
36 | transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
37 | transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
38 | transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
39 | }
40 | .ui.search .prompt {
41 | border-radius: 500rem;
42 | }
43 |
44 | /*--------------
45 | Icon
46 | ---------------*/
47 |
48 | .ui.search .prompt ~ .search.icon {
49 | cursor: pointer;
50 | }
51 |
52 | /*--------------
53 | Results
54 | ---------------*/
55 |
56 | .ui.search > .results {
57 | display: none;
58 | position: absolute;
59 | top: 100%;
60 | left: 0%;
61 | -webkit-transform-origin: center top;
62 | transform-origin: center top;
63 | white-space: normal;
64 | text-align: left;
65 | text-transform: none;
66 | background: #FFFFFF;
67 | margin-top: 0.5em;
68 | width: 18em;
69 | border-radius: 0.28571429rem;
70 | -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
71 | box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
72 | border: 1px solid #D4D4D5;
73 | z-index: 998;
74 | }
75 | .ui.search > .results > :first-child {
76 | border-radius: 0.28571429rem 0.28571429rem 0em 0em;
77 | }
78 | .ui.search > .results > :last-child {
79 | border-radius: 0em 0em 0.28571429rem 0.28571429rem;
80 | }
81 |
82 | /*--------------
83 | Result
84 | ---------------*/
85 |
86 | .ui.search > .results .result {
87 | cursor: pointer;
88 | display: block;
89 | overflow: hidden;
90 | font-size: 1em;
91 | padding: 0.85714286em 1.14285714em;
92 | color: rgba(0, 0, 0, 0.87);
93 | line-height: 1.33;
94 | border-bottom: 1px solid rgba(34, 36, 38, 0.1);
95 | }
96 | .ui.search > .results .result:last-child {
97 | border-bottom: none !important;
98 | }
99 |
100 | /* Image */
101 | .ui.search > .results .result .image {
102 | float: right;
103 | overflow: hidden;
104 | background: none;
105 | width: 5em;
106 | height: 3em;
107 | border-radius: 0.25em;
108 | }
109 | .ui.search > .results .result .image img {
110 | display: block;
111 | width: auto;
112 | height: 100%;
113 | }
114 |
115 | /*--------------
116 | Info
117 | ---------------*/
118 |
119 | .ui.search > .results .result .image + .content {
120 | margin: 0em 6em 0em 0em;
121 | }
122 | .ui.search > .results .result .title {
123 | margin: -0.14285714em 0em 0em;
124 | font-family: $font-family;
125 | font-weight: bold;
126 | font-size: 1em;
127 | color: rgba(0, 0, 0, 0.85);
128 | }
129 | .ui.search > .results .result .description {
130 | margin-top: 0;
131 | font-size: 0.92857143em;
132 | color: rgba(0, 0, 0, 0.4);
133 | }
134 | .ui.search > .results .result .price {
135 | float: right;
136 | color: #21BA45;
137 | }
138 |
139 | /*--------------
140 | Message
141 | ---------------*/
142 |
143 | .ui.search > .results > .message {
144 | padding: 1em 1em;
145 | }
146 | .ui.search > .results > .message .header {
147 | font-family: $font-family;
148 | font-size: 1rem;
149 | font-weight: bold;
150 | color: rgba(0, 0, 0, 0.87);
151 | }
152 | .ui.search > .results > .message .description {
153 | margin-top: 0.25rem;
154 | font-size: 1em;
155 | color: rgba(0, 0, 0, 0.87);
156 | }
157 |
158 | /* View All Results */
159 | .ui.search > .results > .action {
160 | display: block;
161 | border-top: none;
162 | background: #F3F4F5;
163 | padding: 0.92857143em 1em;
164 | color: rgba(0, 0, 0, 0.87);
165 | font-weight: bold;
166 | text-align: center;
167 | }
168 |
169 |
170 | /*******************************
171 | States
172 | *******************************/
173 |
174 |
175 | /*--------------------
176 | Focus
177 | ---------------------*/
178 |
179 | .ui.search > .prompt:focus {
180 | border-color: rgba(34, 36, 38, 0.35);
181 | background: #FFFFFF;
182 | color: rgba(0, 0, 0, 0.95);
183 | }
184 |
185 | /*--------------------
186 | Loading
187 | ---------------------*/
188 |
189 | .ui.loading.search .input > i.icon:before {
190 | position: absolute;
191 | content: '';
192 | top: 50%;
193 | left: 50%;
194 | margin: -0.64285714em 0em 0em -0.64285714em;
195 | width: 1.28571429em;
196 | height: 1.28571429em;
197 | border-radius: 500rem;
198 | border: 0.2em solid rgba(0, 0, 0, 0.1);
199 | }
200 | .ui.loading.search .input > i.icon:after {
201 | position: absolute;
202 | content: '';
203 | top: 50%;
204 | left: 50%;
205 | margin: -0.64285714em 0em 0em -0.64285714em;
206 | width: 1.28571429em;
207 | height: 1.28571429em;
208 | -webkit-animation: button-spin 0.6s linear;
209 | animation: button-spin 0.6s linear;
210 | -webkit-animation-iteration-count: infinite;
211 | animation-iteration-count: infinite;
212 | border-radius: 500rem;
213 | border-color: #767676 transparent transparent;
214 | border-style: solid;
215 | border-width: 0.2em;
216 | -webkit-box-shadow: 0px 0px 0px 1px transparent;
217 | box-shadow: 0px 0px 0px 1px transparent;
218 | }
219 |
220 | /*--------------
221 | Hover
222 | ---------------*/
223 |
224 | .ui.search > .results .result:hover,
225 | .ui.category.search > .results .category .result:hover {
226 | background: #F9FAFB;
227 | }
228 | .ui.search .action:hover {
229 | background: #E0E0E0;
230 | }
231 |
232 | /*--------------
233 | Active
234 | ---------------*/
235 |
236 | .ui.category.search > .results .category.active {
237 | background: #F3F4F5;
238 | }
239 | .ui.category.search > .results .category.active > .name {
240 | color: rgba(0, 0, 0, 0.87);
241 | }
242 | .ui.search > .results .result.active,
243 | .ui.category.search > .results .category .result.active {
244 | position: relative;
245 | border-left-color: rgba(34, 36, 38, 0.1);
246 | background: #F3F4F5;
247 | -webkit-box-shadow: none;
248 | box-shadow: none;
249 | }
250 | .ui.search > .results .result.active .title {
251 | color: rgba(0, 0, 0, 0.85);
252 | }
253 | .ui.search > .results .result.active .description {
254 | color: rgba(0, 0, 0, 0.85);
255 | }
256 |
257 | /*--------------------
258 | Disabled
259 | ----------------------*/
260 |
261 |
262 | /* Disabled */
263 | .ui.disabled.search {
264 | cursor: default;
265 | pointer-events: none;
266 | opacity: 0.45;
267 | }
268 |
269 |
270 | /*******************************
271 | Types
272 | *******************************/
273 |
274 |
275 | /*--------------
276 | Selection
277 | ---------------*/
278 |
279 | .ui.search.selection .prompt {
280 | border-radius: 0.28571429rem;
281 | }
282 |
283 | /* Remove input */
284 | .ui.search.selection > .icon.input > .remove.icon {
285 | pointer-events: none;
286 | position: absolute;
287 | left: auto;
288 | opacity: 0;
289 | color: '';
290 | top: 0em;
291 | right: 0em;
292 | -webkit-transition: color 0.1s ease, opacity 0.1s ease;
293 | transition: color 0.1s ease, opacity 0.1s ease;
294 | }
295 | .ui.search.selection > .icon.input > .active.remove.icon {
296 | cursor: pointer;
297 | opacity: 0.8;
298 | pointer-events: auto;
299 | }
300 | .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
301 | right: 1.85714em;
302 | }
303 | .ui.search.selection > .icon.input > .remove.icon:hover {
304 | opacity: 1;
305 | color: #DB2828;
306 | }
307 |
308 | /*--------------
309 | Category
310 | ---------------*/
311 |
312 | .ui.category.search .results {
313 | width: 28em;
314 | }
315 | .ui.category.search .results.animating,
316 | .ui.category.search .results.visible {
317 | display: table;
318 | }
319 |
320 | /* Category */
321 | .ui.category.search > .results .category {
322 | display: table-row;
323 | background: #F3F4F5;
324 | -webkit-box-shadow: none;
325 | box-shadow: none;
326 | -webkit-transition: background 0.1s ease, border-color 0.1s ease;
327 | transition: background 0.1s ease, border-color 0.1s ease;
328 | }
329 |
330 | /* Last Category */
331 | .ui.category.search > .results .category:last-child {
332 | border-bottom: none;
333 | }
334 |
335 | /* First / Last */
336 | .ui.category.search > .results .category:first-child .name + .result {
337 | border-radius: 0em 0.28571429rem 0em 0em;
338 | }
339 | .ui.category.search > .results .category:last-child .result:last-child {
340 | border-radius: 0em 0em 0.28571429rem 0em;
341 | }
342 |
343 | /* Category Result Name */
344 | .ui.category.search > .results .category > .name {
345 | display: table-cell;
346 | text-overflow: ellipsis;
347 | width: 100px;
348 | white-space: nowrap;
349 | background: transparent;
350 | font-family: $font-family;
351 | font-size: 1em;
352 | padding: 0.4em 1em;
353 | font-weight: bold;
354 | color: rgba(0, 0, 0, 0.4);
355 | border-bottom: 1px solid rgba(34, 36, 38, 0.1);
356 | }
357 |
358 | /* Category Result */
359 | .ui.category.search > .results .category .results {
360 | display: table-cell;
361 | background: #FFFFFF;
362 | border-left: 1px solid rgba(34, 36, 38, 0.15);
363 | border-bottom: 1px solid rgba(34, 36, 38, 0.1);
364 | }
365 | .ui.category.search > .results .category .result {
366 | border-bottom: 1px solid rgba(34, 36, 38, 0.1);
367 | -webkit-transition: background 0.1s ease, border-color 0.1s ease;
368 | transition: background 0.1s ease, border-color 0.1s ease;
369 | padding: 0.85714286em 1.14285714em;
370 | }
371 |
372 |
373 | /*******************************
374 | Variations
375 | *******************************/
376 |
377 |
378 | /*-------------------
379 | Left / Right
380 | --------------------*/
381 |
382 | .ui[class*="left aligned"].search > .results {
383 | right: auto;
384 | left: 0%;
385 | }
386 | .ui[class*="right aligned"].search > .results {
387 | right: 0%;
388 | left: auto;
389 | }
390 |
391 | /*--------------
392 | Fluid
393 | ---------------*/
394 |
395 | .ui.fluid.search .results {
396 | width: 100%;
397 | }
398 |
399 | /*--------------
400 | Sizes
401 | ---------------*/
402 |
403 | .ui.mini.search {
404 | font-size: 0.78571429em;
405 | }
406 | .ui.small.search {
407 | font-size: 0.92857143em;
408 | }
409 | .ui.search {
410 | font-size: 1em;
411 | }
412 | .ui.large.search {
413 | font-size: 1.14285714em;
414 | }
415 | .ui.big.search {
416 | font-size: 1.28571429em;
417 | }
418 | .ui.huge.search {
419 | font-size: 1.42857143em;
420 | }
421 | .ui.massive.search {
422 | font-size: 1.71428571em;
423 | }
424 |
425 | /*--------------
426 | Mobile
427 | ---------------*/
428 |
429 | @media only screen and (max-width: 767px) {
430 | .ui.search .results {
431 | max-width: calc(100vw - 2rem);
432 | }
433 | }
434 |
435 |
436 | /*******************************
437 | Theme Overrides
438 | *******************************/
439 |
440 |
441 |
442 | /*******************************
443 | Site Overrides
444 | *******************************/
445 |
446 |
--------------------------------------------------------------------------------
/scss/modules/_shape.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Shape
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Shape
14 | *******************************/
15 |
16 | .ui.shape {
17 | position: relative;
18 | vertical-align: top;
19 | display: inline-block;
20 | -webkit-perspective: 2000px;
21 | perspective: 2000px;
22 | -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
23 | transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
24 | transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
25 | transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
26 | }
27 | .ui.shape .sides {
28 | -webkit-transform-style: preserve-3d;
29 | transform-style: preserve-3d;
30 | }
31 | .ui.shape .side {
32 | opacity: 1;
33 | width: 100%;
34 | margin: 0em !important;
35 | -webkit-backface-visibility: hidden;
36 | backface-visibility: hidden;
37 | }
38 | .ui.shape .side {
39 | display: none;
40 | }
41 | .ui.shape .side * {
42 | -webkit-backface-visibility: visible !important;
43 | backface-visibility: visible !important;
44 | }
45 |
46 |
47 | /*******************************
48 | Types
49 | *******************************/
50 |
51 | .ui.cube.shape .side {
52 | min-width: 15em;
53 | height: 15em;
54 | padding: 2em;
55 | background-color: #E6E6E6;
56 | color: rgba(0, 0, 0, 0.87);
57 | -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
58 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
59 | }
60 | .ui.cube.shape .side > .content {
61 | width: 100%;
62 | height: 100%;
63 | display: table;
64 | text-align: center;
65 | -webkit-user-select: text;
66 | -moz-user-select: text;
67 | -ms-user-select: text;
68 | user-select: text;
69 | }
70 | .ui.cube.shape .side > .content > div {
71 | display: table-cell;
72 | vertical-align: middle;
73 | font-size: 2em;
74 | }
75 |
76 |
77 | /*******************************
78 | Variations
79 | *******************************/
80 |
81 | .ui.text.shape.animating .sides {
82 | position: static;
83 | }
84 | .ui.text.shape .side {
85 | white-space: nowrap;
86 | }
87 | .ui.text.shape .side > * {
88 | white-space: normal;
89 | }
90 |
91 |
92 | /*******************************
93 | States
94 | *******************************/
95 |
96 |
97 | /*--------------
98 | Loading
99 | ---------------*/
100 |
101 | .ui.loading.shape {
102 | position: absolute;
103 | top: -9999px;
104 | left: -9999px;
105 | }
106 |
107 | /*--------------
108 | Animating
109 | ---------------*/
110 |
111 | .ui.shape .animating.side {
112 | position: absolute;
113 | top: 0px;
114 | left: 0px;
115 | display: block;
116 | z-index: 100;
117 | }
118 | .ui.shape .hidden.side {
119 | opacity: 0.6;
120 | }
121 |
122 | /*--------------
123 | CSS
124 | ---------------*/
125 |
126 | .ui.shape.animating .sides {
127 | position: absolute;
128 | }
129 | .ui.shape.animating .sides {
130 | -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
131 | transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
132 | transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
133 | transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
134 | }
135 | .ui.shape.animating .side {
136 | -webkit-transition: opacity 0.6s ease-in-out;
137 | transition: opacity 0.6s ease-in-out;
138 | }
139 |
140 | /*--------------
141 | Active
142 | ---------------*/
143 |
144 | .ui.shape .active.side {
145 | display: block;
146 | }
147 |
148 |
149 | /*******************************
150 | Theme Overrides
151 | *******************************/
152 |
153 |
154 |
155 | /*******************************
156 | User Overrides
157 | *******************************/
158 |
159 |
--------------------------------------------------------------------------------
/scss/modules/_sticky.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Sticky
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Sticky
14 | *******************************/
15 |
16 | .ui.sticky {
17 | position: static;
18 | -webkit-transition: none;
19 | transition: none;
20 | z-index: 800;
21 | }
22 |
23 |
24 | /*******************************
25 | States
26 | *******************************/
27 |
28 |
29 | /* Bound */
30 | .ui.sticky.bound {
31 | position: absolute;
32 | left: auto;
33 | right: auto;
34 | }
35 |
36 | /* Fixed */
37 | .ui.sticky.fixed {
38 | position: fixed;
39 | left: auto;
40 | right: auto;
41 | }
42 |
43 | /* Bound/Fixed Position */
44 | .ui.sticky.bound.top,
45 | .ui.sticky.fixed.top {
46 | top: 0px;
47 | bottom: auto;
48 | }
49 | .ui.sticky.bound.bottom,
50 | .ui.sticky.fixed.bottom {
51 | top: auto;
52 | bottom: 0px;
53 | }
54 |
55 |
56 | /*******************************
57 | Types
58 | *******************************/
59 |
60 | .ui.native.sticky {
61 | position: -webkit-sticky;
62 | position: -moz-sticky;
63 | position: -ms-sticky;
64 | position: -o-sticky;
65 | position: sticky;
66 | }
67 |
68 |
69 | /*******************************
70 | Theme Overrides
71 | *******************************/
72 |
73 |
74 |
75 | /*******************************
76 | Site Overrides
77 | *******************************/
78 |
79 |
--------------------------------------------------------------------------------
/scss/modules/_tab.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Tab
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | UI Tabs
14 | *******************************/
15 |
16 | .ui.tab {
17 | display: none;
18 | }
19 |
20 |
21 | /*******************************
22 | States
23 | *******************************/
24 |
25 |
26 | /*--------------------
27 | Active
28 | ---------------------*/
29 |
30 | .ui.tab.active,
31 | .ui.tab.open {
32 | display: block;
33 | }
34 |
35 | /*--------------------
36 | Loading
37 | ---------------------*/
38 |
39 | .ui.tab.loading {
40 | position: relative;
41 | overflow: hidden;
42 | display: block;
43 | min-height: 250px;
44 | }
45 | .ui.tab.loading * {
46 | position: relative !important;
47 | left: -10000px !important;
48 | }
49 | .ui.tab.loading:before,
50 | .ui.tab.loading.segment:before {
51 | position: absolute;
52 | content: '';
53 | top: 100px;
54 | left: 50%;
55 | margin: -1.25em 0em 0em -1.25em;
56 | width: 2.5em;
57 | height: 2.5em;
58 | border-radius: 500rem;
59 | border: 0.2em solid rgba(0, 0, 0, 0.1);
60 | }
61 | .ui.tab.loading:after,
62 | .ui.tab.loading.segment:after {
63 | position: absolute;
64 | content: '';
65 | top: 100px;
66 | left: 50%;
67 | margin: -1.25em 0em 0em -1.25em;
68 | width: 2.5em;
69 | height: 2.5em;
70 | -webkit-animation: button-spin 0.6s linear;
71 | animation: button-spin 0.6s linear;
72 | -webkit-animation-iteration-count: infinite;
73 | animation-iteration-count: infinite;
74 | border-radius: 500rem;
75 | border-color: #767676 transparent transparent;
76 | border-style: solid;
77 | border-width: 0.2em;
78 | -webkit-box-shadow: 0px 0px 0px 1px transparent;
79 | box-shadow: 0px 0px 0px 1px transparent;
80 | }
81 |
82 |
83 | /*******************************
84 | Tab Overrides
85 | *******************************/
86 |
87 |
88 |
89 | /*******************************
90 | User Overrides
91 | *******************************/
92 |
93 |
--------------------------------------------------------------------------------
/scss/modules/_video.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 1.12.3 - Video
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Copyright 2014 Contributors
7 | * Released under the MIT license
8 | * http://opensource.org/licenses/MIT
9 | *
10 | */
11 |
12 |
13 | /*******************************
14 | Video
15 | *******************************/
16 |
17 | .ui.video {
18 | background-color: #dddddd;
19 | position: relative;
20 | max-width: 100%;
21 | padding-bottom: 56.25%;
22 | height: 0px;
23 | overflow: hidden;
24 | }
25 |
26 | /*--------------
27 | Content
28 | ---------------*/
29 |
30 |
31 | /* Placeholder Image */
32 | .ui.video .placeholder {
33 | background-color: #333333;
34 | }
35 |
36 | /* Play Icon Overlay */
37 | .ui.video .play {
38 | cursor: pointer;
39 | position: absolute;
40 | top: 0px;
41 | left: 0px;
42 | z-index: 10;
43 | width: 100%;
44 | height: 100%;
45 | opacity: 0.8;
46 | -webkit-transition: opacity 0.3s;
47 | transition: opacity 0.3s;
48 | }
49 | .ui.video .play.icon:before {
50 | position: absolute;
51 | top: 50%;
52 | left: 50%;
53 | z-index: 11;
54 | background: rgba(0, 0, 0, 0.3);
55 | width: 8rem;
56 | height: 8rem;
57 | line-height: 8rem;
58 | border-radius: 500rem;
59 | color: #ffffff;
60 | font-size: 8rem;
61 | text-shadow: none;
62 | -webkit-transform: translateX(-50%) translateY(-50%);
63 | -ms-transform: translateX(-50%) translateY(-50%);
64 | transform: translateX(-50%) translateY(-50%);
65 | }
66 | .ui.video .placeholder {
67 | position: absolute;
68 | top: 0px;
69 | left: 0px;
70 | display: block;
71 | width: 100%;
72 | height: 100%;
73 | }
74 |
75 | /* IFrame Embed */
76 | .ui.video .embed iframe,
77 | .ui.video .embed embed,
78 | .ui.video .embed object {
79 | position: absolute;
80 | border: none;
81 | width: 100%;
82 | height: 100%;
83 | top: 0px;
84 | left: 0px;
85 | margin: 0em;
86 | padding: 0em;
87 | }
88 |
89 |
90 | /*******************************
91 | States
92 | *******************************/
93 |
94 |
95 | /*--------------
96 | Hover
97 | ---------------*/
98 |
99 | .ui.video .play:hover {
100 | opacity: 1;
101 | }
102 |
103 | /*--------------
104 | Active
105 | ---------------*/
106 |
107 | .ui.video.active .play,
108 | .ui.video.active .placeholder {
109 | display: none;
110 | }
111 | .ui.video.active .embed {
112 | display: inline;
113 | }
114 |
115 |
116 | /*******************************
117 | Video Overrides
118 | *******************************/
119 |
120 |
121 |
122 | /*******************************
123 | Site Overrides
124 | *******************************/
125 |
126 |
--------------------------------------------------------------------------------
/scss/views/_ad.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Ad
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Copyright 2013 Contributors
7 | * Released under the MIT license
8 | * http://opensource.org/licenses/MIT
9 | *
10 | */
11 |
12 |
13 | /*******************************
14 | Advertisement
15 | *******************************/
16 |
17 | .ui.ad {
18 | display: block;
19 | overflow: hidden;
20 | margin: 1em 0em;
21 | }
22 | .ui.ad:first-child {
23 | margin: 0em;
24 | }
25 | .ui.ad:last-child {
26 | margin: 0em;
27 | }
28 | .ui.ad iframe {
29 | margin: 0em;
30 | padding: 0em;
31 | border: none;
32 | overflow: hidden;
33 | }
34 |
35 | /*--------------
36 | Common
37 | ---------------*/
38 |
39 |
40 | /* Leaderboard */
41 | .ui.leaderboard.ad {
42 | width: 728px;
43 | height: 90px;
44 | }
45 |
46 | /* Medium Rectangle */
47 | .ui[class*="medium rectangle"].ad {
48 | width: 300px;
49 | height: 250px;
50 | }
51 |
52 | /* Large Rectangle */
53 | .ui[class*="large rectangle"].ad {
54 | width: 336px;
55 | height: 280px;
56 | }
57 |
58 | /* Half Page */
59 | .ui[class*="half page"].ad {
60 | width: 300px;
61 | height: 600px;
62 | }
63 |
64 | /*--------------
65 | Square
66 | ---------------*/
67 |
68 |
69 | /* Square */
70 | .ui.square.ad {
71 | width: 250px;
72 | height: 250px;
73 | }
74 |
75 | /* Small Square */
76 | .ui[class*="small square"].ad {
77 | width: 200px;
78 | height: 200px;
79 | }
80 |
81 | /*--------------
82 | Rectangle
83 | ---------------*/
84 |
85 |
86 | /* Small Rectangle */
87 | .ui[class*="small rectangle"].ad {
88 | width: 180px;
89 | height: 150px;
90 | }
91 |
92 | /* Vertical Rectangle */
93 | .ui[class*="vertical rectangle"].ad {
94 | width: 240px;
95 | height: 400px;
96 | }
97 |
98 | /*--------------
99 | Button
100 | ---------------*/
101 |
102 | .ui.button.ad {
103 | width: 120px;
104 | height: 90px;
105 | }
106 | .ui[class*="square button"].ad {
107 | width: 125px;
108 | height: 125px;
109 | }
110 | .ui[class*="small button"].ad {
111 | width: 120px;
112 | height: 60px;
113 | }
114 |
115 | /*--------------
116 | Skyscrapers
117 | ---------------*/
118 |
119 |
120 | /* Skyscraper */
121 | .ui.skyscraper.ad {
122 | width: 120px;
123 | height: 600px;
124 | }
125 |
126 | /* Wide Skyscraper */
127 | .ui[class*="wide skyscraper"].ad {
128 | width: 160px;
129 | }
130 |
131 | /*--------------
132 | Banners
133 | ---------------*/
134 |
135 |
136 | /* Banner */
137 | .ui.banner.ad {
138 | width: 468px;
139 | height: 60px;
140 | }
141 |
142 | /* Vertical Banner */
143 | .ui[class*="vertical banner"].ad {
144 | width: 120px;
145 | height: 240px;
146 | }
147 |
148 | /* Top Banner */
149 | .ui[class*="top banner"].ad {
150 | width: 930px;
151 | height: 180px;
152 | }
153 |
154 | /* Half Banner */
155 | .ui[class*="half banner"].ad {
156 | width: 234px;
157 | height: 60px;
158 | }
159 |
160 | /*--------------
161 | Boards
162 | ---------------*/
163 |
164 |
165 | /* Leaderboard */
166 | .ui[class*="large leaderboard"].ad {
167 | width: 970px;
168 | height: 90px;
169 | }
170 |
171 | /* Billboard */
172 | .ui.billboard.ad {
173 | width: 970px;
174 | height: 250px;
175 | }
176 |
177 | /*--------------
178 | Panorama
179 | ---------------*/
180 |
181 |
182 | /* Panorama */
183 | .ui.panorama.ad {
184 | width: 980px;
185 | height: 120px;
186 | }
187 |
188 | /*--------------
189 | Netboard
190 | ---------------*/
191 |
192 |
193 | /* Netboard */
194 | .ui.netboard.ad {
195 | width: 580px;
196 | height: 400px;
197 | }
198 |
199 | /*--------------
200 | Mobile
201 | ---------------*/
202 |
203 |
204 | /* Large Mobile Banner */
205 | .ui[class*="large mobile banner"].ad {
206 | width: 320px;
207 | height: 100px;
208 | }
209 |
210 | /* Mobile Leaderboard */
211 | .ui[class*="mobile leaderboard"].ad {
212 | width: 320px;
213 | height: 50px;
214 | }
215 |
216 |
217 | /*******************************
218 | Types
219 | *******************************/
220 |
221 |
222 | /* Mobile Sizes */
223 | .ui.mobile.ad {
224 | display: none;
225 | }
226 | @media only screen and (max-width: 767px) {
227 | .ui.mobile.ad {
228 | display: block;
229 | }
230 | }
231 |
232 |
233 | /*******************************
234 | Variations
235 | *******************************/
236 |
237 | .ui.centered.ad {
238 | margin-left: auto;
239 | margin-right: auto;
240 | }
241 | .ui.test.ad {
242 | position: relative;
243 | background: #545454;
244 | }
245 | .ui.test.ad:after {
246 | position: absolute;
247 | top: 50%;
248 | left: 50%;
249 | width: 100%;
250 | text-align: center;
251 | -webkit-transform: translateX(-50%) translateY(-50%);
252 | transform: translateX(-50%) translateY(-50%);
253 | content: 'Ad';
254 | color: #FFFFFF;
255 | font-size: 1em;
256 | font-weight: bold;
257 | }
258 | .ui.mobile.test.ad:after {
259 | font-size: 0.85714286em;
260 | }
261 | .ui.test.ad[data-text]:after {
262 | content: attr(data-text);
263 | }
264 |
265 |
266 | /*******************************
267 | Theme Overrides
268 | *******************************/
269 |
270 |
271 |
272 | /*******************************
273 | User Variable Overrides
274 | *******************************/
275 |
276 |
--------------------------------------------------------------------------------
/scss/views/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'ad';
2 | @import 'card';
3 | @import 'comment';
4 | @import 'feed';
5 | @import 'item';
6 | @import 'statistic';
7 |
--------------------------------------------------------------------------------
/scss/views/_comment.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Comment
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Standard
14 | *******************************/
15 |
16 |
17 | /*--------------
18 | Comments
19 | ---------------*/
20 |
21 | .ui.comments {
22 | margin: 1.5em 0em;
23 | max-width: 650px;
24 | }
25 | .ui.comments:first-child {
26 | margin-top: 0em;
27 | }
28 | .ui.comments:last-child {
29 | margin-bottom: 0em;
30 | }
31 |
32 | /*--------------
33 | Comment
34 | ---------------*/
35 |
36 | .ui.comments .comment {
37 | position: relative;
38 | background: none;
39 | margin: 0.5em 0em 0em;
40 | padding: 0.5em 0em 0em;
41 | border: none;
42 | border-top: none;
43 | line-height: 1.2;
44 | }
45 | .ui.comments .comment:first-child {
46 | margin-top: 0em;
47 | padding-top: 0em;
48 | }
49 |
50 | /*--------------------
51 | Nested Comments
52 | ---------------------*/
53 |
54 | .ui.comments .comment .comments {
55 | margin: 0em 0em 0.5em 0.5em;
56 | padding: 1em 0em 1em 1em;
57 | }
58 | .ui.comments .comment .comments:before {
59 | position: absolute;
60 | top: 0px;
61 | left: 0px;
62 | }
63 | .ui.comments .comment .comments .comment {
64 | border: none;
65 | border-top: none;
66 | background: none;
67 | }
68 |
69 | /*--------------
70 | Avatar
71 | ---------------*/
72 |
73 | .ui.comments .comment .avatar {
74 | display: block;
75 | width: 2.5em;
76 | height: auto;
77 | float: left;
78 | margin: 0.2em 0em 0em;
79 | }
80 | .ui.comments .comment img.avatar,
81 | .ui.comments .comment .avatar img {
82 | display: block;
83 | margin: 0em auto;
84 | width: 100%;
85 | height: 100%;
86 | border-radius: 0.25rem;
87 | }
88 |
89 | /*--------------
90 | Content
91 | ---------------*/
92 |
93 | .ui.comments .comment > .content {
94 | display: block;
95 | }
96 |
97 | /* If there is an avatar move content over */
98 | .ui.comments .comment > .avatar ~ .content {
99 | margin-left: 3.5em;
100 | }
101 |
102 | /*--------------
103 | Author
104 | ---------------*/
105 |
106 | .ui.comments .comment .author {
107 | font-size: 1em;
108 | color: rgba(0, 0, 0, 0.87);
109 | font-weight: bold;
110 | }
111 | .ui.comments .comment a.author {
112 | cursor: pointer;
113 | }
114 | .ui.comments .comment a.author:hover {
115 | color: #1e70bf;
116 | }
117 |
118 | /*--------------
119 | Metadata
120 | ---------------*/
121 |
122 | .ui.comments .comment .metadata {
123 | display: inline-block;
124 | margin-left: 0.5em;
125 | color: rgba(0, 0, 0, 0.4);
126 | font-size: 0.875em;
127 | }
128 | .ui.comments .comment .metadata > * {
129 | display: inline-block;
130 | margin: 0em 0.5em 0em 0em;
131 | }
132 | .ui.comments .comment .metadata > :last-child {
133 | margin-right: 0em;
134 | }
135 |
136 | /*--------------------
137 | Comment Text
138 | ---------------------*/
139 |
140 | .ui.comments .comment .text {
141 | margin: 0.25em 0em 0.5em;
142 | font-size: 1em;
143 | word-wrap: break-word;
144 | color: rgba(0, 0, 0, 0.87);
145 | line-height: 1.3;
146 | }
147 |
148 | /*--------------------
149 | User Actions
150 | ---------------------*/
151 |
152 | .ui.comments .comment .actions {
153 | font-size: 0.875em;
154 | }
155 | .ui.comments .comment .actions a {
156 | cursor: pointer;
157 | display: inline-block;
158 | margin: 0em 0.75em 0em 0em;
159 | color: rgba(0, 0, 0, 0.4);
160 | }
161 | .ui.comments .comment .actions a:last-child {
162 | margin-right: 0em;
163 | }
164 | .ui.comments .comment .actions a.active,
165 | .ui.comments .comment .actions a:hover {
166 | color: rgba(0, 0, 0, 0.8);
167 | }
168 |
169 | /*--------------------
170 | Reply Form
171 | ---------------------*/
172 |
173 | .ui.comments > .reply.form {
174 | margin-top: 1em;
175 | }
176 | .ui.comments .comment .reply.form {
177 | width: 100%;
178 | margin-top: 1em;
179 | }
180 | .ui.comments .reply.form textarea {
181 | font-size: 1em;
182 | height: 12em;
183 | }
184 |
185 |
186 | /*******************************
187 | State
188 | *******************************/
189 |
190 | .ui.collapsed.comments,
191 | .ui.comments .collapsed.comments,
192 | .ui.comments .collapsed.comment {
193 | display: none;
194 | }
195 |
196 |
197 | /*******************************
198 | Variations
199 | *******************************/
200 |
201 |
202 | /*--------------------
203 | Threaded
204 | ---------------------*/
205 |
206 | .ui.threaded.comments .comment .comments {
207 | margin: -1.5em 0 -1em 1.25em;
208 | padding: 3em 0em 2em 2.25em;
209 | -webkit-box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15);
210 | box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15);
211 | }
212 |
213 | /*--------------------
214 | Minimal
215 | ---------------------*/
216 |
217 | .ui.minimal.comments .comment .actions {
218 | opacity: 0;
219 | position: absolute;
220 | top: 0px;
221 | right: 0px;
222 | left: auto;
223 | -webkit-transition: opacity 0.2s ease;
224 | transition: opacity 0.2s ease;
225 | -webkit-transition-delay: 0.1s;
226 | transition-delay: 0.1s;
227 | }
228 | .ui.minimal.comments .comment > .content:hover > .actions {
229 | opacity: 1;
230 | }
231 |
232 | /*-------------------
233 | Sizes
234 | --------------------*/
235 |
236 | .ui.mini.comments {
237 | font-size: 0.78571429rem;
238 | }
239 | .ui.tiny.comments {
240 | font-size: 0.85714286rem;
241 | }
242 | .ui.small.comments {
243 | font-size: 0.92857143rem;
244 | }
245 | .ui.comments {
246 | font-size: 1rem;
247 | }
248 | .ui.large.comments {
249 | font-size: 1.14285714rem;
250 | }
251 | .ui.big.comments {
252 | font-size: 1.28571429rem;
253 | }
254 | .ui.huge.comments {
255 | font-size: 1.42857143rem;
256 | }
257 | .ui.massive.comments {
258 | font-size: 1.71428571rem;
259 | }
260 |
261 |
262 | /*******************************
263 | Theme Overrides
264 | *******************************/
265 |
266 |
267 |
268 | /*******************************
269 | User Variable Overrides
270 | *******************************/
271 |
272 |
--------------------------------------------------------------------------------
/scss/views/_feed.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Feed
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Activity Feed
14 | *******************************/
15 |
16 | .ui.feed {
17 | margin: 1em 0em;
18 | }
19 | .ui.feed:first-child {
20 | margin-top: 0em;
21 | }
22 | .ui.feed:last-child {
23 | margin-bottom: 0em;
24 | }
25 |
26 |
27 | /*******************************
28 | Content
29 | *******************************/
30 |
31 |
32 | /* Event */
33 | .ui.feed > .event {
34 | display: -webkit-box;
35 | display: -ms-flexbox;
36 | display: flex;
37 | -webkit-box-orient: horizontal;
38 | -webkit-box-direction: normal;
39 | -ms-flex-direction: row;
40 | flex-direction: row;
41 | width: 100%;
42 | padding: 0.21428571rem 0em;
43 | margin: 0em;
44 | background: none;
45 | border-top: none;
46 | }
47 | .ui.feed > .event:first-child {
48 | border-top: 0px;
49 | padding-top: 0em;
50 | }
51 | .ui.feed > .event:last-child {
52 | padding-bottom: 0em;
53 | }
54 |
55 | /* Event Label */
56 | .ui.feed > .event > .label {
57 | display: block;
58 | -webkit-box-flex: 0;
59 | -ms-flex: 0 0 auto;
60 | flex: 0 0 auto;
61 | width: 2.5em;
62 | height: auto;
63 | -ms-flex-item-align: stretch;
64 | align-self: stretch;
65 | text-align: left;
66 | }
67 | .ui.feed > .event > .label .icon {
68 | opacity: 1;
69 | font-size: 1.5em;
70 | width: 100%;
71 | padding: 0.25em;
72 | background: none;
73 | border: none;
74 | border-radius: none;
75 | color: rgba(0, 0, 0, 0.6);
76 | }
77 | .ui.feed > .event > .label img {
78 | width: 100%;
79 | height: auto;
80 | border-radius: 500rem;
81 | }
82 | .ui.feed > .event > .label + .content {
83 | margin: 0.5em 0em 0.35714286em 1.14285714em;
84 | }
85 |
86 | /*--------------
87 | Content
88 | ---------------*/
89 |
90 |
91 | /* Content */
92 | .ui.feed > .event > .content {
93 | display: block;
94 | -webkit-box-flex: 1;
95 | -ms-flex: 1 1 auto;
96 | flex: 1 1 auto;
97 | -ms-flex-item-align: stretch;
98 | align-self: stretch;
99 | text-align: left;
100 | word-wrap: break-word;
101 | }
102 | .ui.feed > .event:last-child > .content {
103 | padding-bottom: 0em;
104 | }
105 |
106 | /* Link */
107 | .ui.feed > .event > .content a {
108 | cursor: pointer;
109 | }
110 |
111 | /*--------------
112 | Date
113 | ---------------*/
114 |
115 | .ui.feed > .event > .content .date {
116 | margin: -0.5rem 0em 0em;
117 | padding: 0em;
118 | font-weight: normal;
119 | font-size: 1em;
120 | font-style: normal;
121 | color: rgba(0, 0, 0, 0.4);
122 | }
123 |
124 | /*--------------
125 | Summary
126 | ---------------*/
127 |
128 | .ui.feed > .event > .content .summary {
129 | margin: 0em;
130 | font-size: 1em;
131 | font-weight: bold;
132 | color: rgba(0, 0, 0, 0.87);
133 | }
134 |
135 | /* Summary Image */
136 | .ui.feed > .event > .content .summary img {
137 | display: inline-block;
138 | width: auto;
139 | height: 10em;
140 | margin: -0.25em 0.25em 0em 0em;
141 | border-radius: 0.25em;
142 | vertical-align: middle;
143 | }
144 |
145 | /*--------------
146 | User
147 | ---------------*/
148 |
149 | .ui.feed > .event > .content .user {
150 | display: inline-block;
151 | font-weight: bold;
152 | margin-right: 0em;
153 | vertical-align: baseline;
154 | }
155 | .ui.feed > .event > .content .user img {
156 | margin: -0.25em 0.25em 0em 0em;
157 | width: auto;
158 | height: 10em;
159 | vertical-align: middle;
160 | }
161 |
162 | /*--------------
163 | Inline Date
164 | ---------------*/
165 |
166 |
167 | /* Date inside Summary */
168 | .ui.feed > .event > .content .summary > .date {
169 | display: inline-block;
170 | float: none;
171 | font-weight: normal;
172 | font-size: 0.85714286em;
173 | font-style: normal;
174 | margin: 0em 0em 0em 0.5em;
175 | padding: 0em;
176 | color: rgba(0, 0, 0, 0.4);
177 | }
178 |
179 | /*--------------
180 | Extra Summary
181 | ---------------*/
182 |
183 | .ui.feed > .event > .content .extra {
184 | margin: 0.5em 0em 0em;
185 | background: none;
186 | padding: 0em;
187 | color: rgba(0, 0, 0, 0.87);
188 | }
189 |
190 | /* Images */
191 | .ui.feed > .event > .content .extra.images img {
192 | display: inline-block;
193 | margin: 0em 0.25em 0em 0em;
194 | width: 6em;
195 | }
196 |
197 | /* Text */
198 | .ui.feed > .event > .content .extra.text {
199 | padding: 0em;
200 | border-left: none;
201 | font-size: 1em;
202 | max-width: 500px;
203 | line-height: 1.4285em;
204 | }
205 |
206 | /*--------------
207 | Meta
208 | ---------------*/
209 |
210 | .ui.feed > .event > .content .meta {
211 | display: inline-block;
212 | font-size: 0.85714286em;
213 | margin: 0.5em 0em 0em;
214 | background: none;
215 | border: none;
216 | border-radius: 0;
217 | -webkit-box-shadow: none;
218 | box-shadow: none;
219 | padding: 0em;
220 | color: rgba(0, 0, 0, 0.6);
221 | }
222 | .ui.feed > .event > .content .meta > * {
223 | position: relative;
224 | margin-left: 0.75em;
225 | }
226 | .ui.feed > .event > .content .meta > *:after {
227 | content: '';
228 | color: rgba(0, 0, 0, 0.2);
229 | top: 0em;
230 | left: -1em;
231 | opacity: 1;
232 | position: absolute;
233 | vertical-align: top;
234 | }
235 | .ui.feed > .event > .content .meta .like {
236 | color: '';
237 | -webkit-transition: 0.2s color ease;
238 | transition: 0.2s color ease;
239 | }
240 | .ui.feed > .event > .content .meta .like:hover .icon {
241 | color: #FF2733;
242 | }
243 | .ui.feed > .event > .content .meta .active.like .icon {
244 | color: #EF404A;
245 | }
246 |
247 | /* First element */
248 | .ui.feed > .event > .content .meta > :first-child {
249 | margin-left: 0em;
250 | }
251 | .ui.feed > .event > .content .meta > :first-child::after {
252 | display: none;
253 | }
254 |
255 | /* Action */
256 | .ui.feed > .event > .content .meta a,
257 | .ui.feed > .event > .content .meta > .icon {
258 | cursor: pointer;
259 | opacity: 1;
260 | color: rgba(0, 0, 0, 0.5);
261 | -webkit-transition: color 0.1s ease;
262 | transition: color 0.1s ease;
263 | }
264 | .ui.feed > .event > .content .meta a:hover,
265 | .ui.feed > .event > .content .meta a:hover .icon,
266 | .ui.feed > .event > .content .meta > .icon:hover {
267 | color: rgba(0, 0, 0, 0.95);
268 | }
269 |
270 |
271 | /*******************************
272 | Variations
273 | *******************************/
274 |
275 | .ui.small.feed {
276 | font-size: 0.92857143rem;
277 | }
278 | .ui.feed {
279 | font-size: 1rem;
280 | }
281 | .ui.large.feed {
282 | font-size: 1.14285714rem;
283 | }
284 |
285 |
286 | /*******************************
287 | Theme Overrides
288 | *******************************/
289 |
290 |
291 |
292 | /*******************************
293 | User Variable Overrides
294 | *******************************/
295 |
296 |
--------------------------------------------------------------------------------
/scss/views/_item.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.4.2 - Item
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Standard
14 | *******************************/
15 |
16 |
17 | /*--------------
18 | Item
19 | ---------------*/
20 |
21 | .ui.items > .item {
22 | display: -webkit-box;
23 | display: -ms-flexbox;
24 | display: flex;
25 | margin: 1em 0em;
26 | width: 100%;
27 | min-height: 0px;
28 | background: transparent;
29 | padding: 0em;
30 | border: none;
31 | border-radius: 0rem;
32 | -webkit-box-shadow: none;
33 | box-shadow: none;
34 | -webkit-transition: -webkit-box-shadow 0.1s ease;
35 | transition: -webkit-box-shadow 0.1s ease;
36 | transition: box-shadow 0.1s ease;
37 | transition: box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
38 | z-index: '';
39 | }
40 | .ui.items > .item a {
41 | cursor: pointer;
42 | }
43 |
44 | /*--------------
45 | Items
46 | ---------------*/
47 |
48 | .ui.items {
49 | margin: 1.5em 0em;
50 | }
51 | .ui.items:first-child {
52 | margin-top: 0em !important;
53 | }
54 | .ui.items:last-child {
55 | margin-bottom: 0em !important;
56 | }
57 |
58 | /*--------------
59 | Item
60 | ---------------*/
61 |
62 | .ui.items > .item:after {
63 | display: block;
64 | content: ' ';
65 | height: 0px;
66 | clear: both;
67 | overflow: hidden;
68 | visibility: hidden;
69 | }
70 | .ui.items > .item:first-child {
71 | margin-top: 0em;
72 | }
73 | .ui.items > .item:last-child {
74 | margin-bottom: 0em;
75 | }
76 |
77 | /*--------------
78 | Images
79 | ---------------*/
80 |
81 | .ui.items > .item > .image {
82 | position: relative;
83 | -webkit-box-flex: 0;
84 | -ms-flex: 0 0 auto;
85 | flex: 0 0 auto;
86 | display: block;
87 | float: none;
88 | margin: 0em;
89 | padding: 0em;
90 | max-height: '';
91 | -ms-flex-item-align: top;
92 | align-self: top;
93 | }
94 | .ui.items > .item > .image > img {
95 | display: block;
96 | width: 100%;
97 | height: auto;
98 | border-radius: 0.125rem;
99 | border: none;
100 | }
101 | .ui.items > .item > .image:only-child > img {
102 | border-radius: 0rem;
103 | }
104 |
105 | /*--------------
106 | Content
107 | ---------------*/
108 |
109 | .ui.items > .item > .content {
110 | display: block;
111 | -webkit-box-flex: 1;
112 | -ms-flex: 1 1 auto;
113 | flex: 1 1 auto;
114 | background: none;
115 | margin: 0em;
116 | padding: 0em;
117 | -webkit-box-shadow: none;
118 | box-shadow: none;
119 | font-size: 1em;
120 | border: none;
121 | border-radius: 0em;
122 | }
123 | .ui.items > .item > .content:after {
124 | display: block;
125 | content: ' ';
126 | height: 0px;
127 | clear: both;
128 | overflow: hidden;
129 | visibility: hidden;
130 | }
131 | .ui.items > .item > .image + .content {
132 | min-width: 0;
133 | width: auto;
134 | display: block;
135 | margin-left: 0em;
136 | -ms-flex-item-align: top;
137 | align-self: top;
138 | padding-left: 1.5em;
139 | }
140 | .ui.items > .item > .content > .header {
141 | display: inline-block;
142 | margin: -0.21425em 0em 0em;
143 | font-family: $font-family;
144 | font-weight: bold;
145 | color: rgba(0, 0, 0, 0.85);
146 | }
147 |
148 | /* Default Header Size */
149 | .ui.items > .item > .content > .header:not(.ui) {
150 | font-size: 1.28571429em;
151 | }
152 |
153 | /*--------------
154 | Floated
155 | ---------------*/
156 |
157 | .ui.items > .item [class*="left floated"] {
158 | float: left;
159 | }
160 | .ui.items > .item [class*="right floated"] {
161 | float: right;
162 | }
163 |
164 | /*--------------
165 | Content Image
166 | ---------------*/
167 |
168 | .ui.items > .item .content img {
169 | -ms-flex-item-align: middle;
170 | align-self: middle;
171 | width: '';
172 | }
173 | .ui.items > .item img.avatar,
174 | .ui.items > .item .avatar img {
175 | width: '';
176 | height: '';
177 | border-radius: 500rem;
178 | }
179 |
180 | /*--------------
181 | Description
182 | ---------------*/
183 |
184 | .ui.items > .item > .content > .description {
185 | margin-top: 0.6em;
186 | max-width: auto;
187 | font-size: 1em;
188 | line-height: 1.4285em;
189 | color: rgba(0, 0, 0, 0.87);
190 | }
191 |
192 | /*--------------
193 | Paragraph
194 | ---------------*/
195 |
196 | .ui.items > .item > .content p {
197 | margin: 0em 0em 0.5em;
198 | }
199 | .ui.items > .item > .content p:last-child {
200 | margin-bottom: 0em;
201 | }
202 |
203 | /*--------------
204 | Meta
205 | ---------------*/
206 |
207 | .ui.items > .item .meta {
208 | margin: 0.5em 0em 0.5em;
209 | font-size: 1em;
210 | line-height: 1em;
211 | color: rgba(0, 0, 0, 0.6);
212 | }
213 | .ui.items > .item .meta * {
214 | margin-right: 0.3em;
215 | }
216 | .ui.items > .item .meta :last-child {
217 | margin-right: 0em;
218 | }
219 | .ui.items > .item .meta [class*="right floated"] {
220 | margin-right: 0em;
221 | margin-left: 0.3em;
222 | }
223 |
224 | /*--------------
225 | Links
226 | ---------------*/
227 |
228 |
229 | /* Generic */
230 | .ui.items > .item > .content a:not(.ui) {
231 | color: '';
232 | -webkit-transition: color 0.1s ease;
233 | transition: color 0.1s ease;
234 | }
235 | .ui.items > .item > .content a:not(.ui):hover {
236 | color: '';
237 | }
238 |
239 | /* Header */
240 | .ui.items > .item > .content > a.header {
241 | color: rgba(0, 0, 0, 0.85);
242 | }
243 | .ui.items > .item > .content > a.header:hover {
244 | color: #1e70bf;
245 | }
246 |
247 | /* Meta */
248 | .ui.items > .item .meta > a:not(.ui) {
249 | color: rgba(0, 0, 0, 0.4);
250 | }
251 | .ui.items > .item .meta > a:not(.ui):hover {
252 | color: rgba(0, 0, 0, 0.87);
253 | }
254 |
255 | /*--------------
256 | Labels
257 | ---------------*/
258 |
259 |
260 | /*-----Star----- */
261 |
262 |
263 | /* Icon */
264 | .ui.items > .item > .content .favorite.icon {
265 | cursor: pointer;
266 | opacity: 0.75;
267 | -webkit-transition: color 0.1s ease;
268 | transition: color 0.1s ease;
269 | }
270 | .ui.items > .item > .content .favorite.icon:hover {
271 | opacity: 1;
272 | color: #FFB70A;
273 | }
274 | .ui.items > .item > .content .active.favorite.icon {
275 | color: #FFE623;
276 | }
277 |
278 | /*-----Like----- */
279 |
280 |
281 | /* Icon */
282 | .ui.items > .item > .content .like.icon {
283 | cursor: pointer;
284 | opacity: 0.75;
285 | -webkit-transition: color 0.1s ease;
286 | transition: color 0.1s ease;
287 | }
288 | .ui.items > .item > .content .like.icon:hover {
289 | opacity: 1;
290 | color: #FF2733;
291 | }
292 | .ui.items > .item > .content .active.like.icon {
293 | color: #FF2733;
294 | }
295 |
296 | /*----------------
297 | Extra Content
298 | -----------------*/
299 |
300 | .ui.items > .item .extra {
301 | display: block;
302 | position: relative;
303 | background: none;
304 | margin: 0.5rem 0em 0em;
305 | width: 100%;
306 | padding: 0em 0em 0em;
307 | top: 0em;
308 | left: 0em;
309 | color: rgba(0, 0, 0, 0.4);
310 | -webkit-box-shadow: none;
311 | box-shadow: none;
312 | -webkit-transition: color 0.1s ease;
313 | transition: color 0.1s ease;
314 | border-top: none;
315 | }
316 | .ui.items > .item .extra > * {
317 | margin: 0.25rem 0.5rem 0.25rem 0em;
318 | }
319 | .ui.items > .item .extra > [class*="right floated"] {
320 | margin: 0.25rem 0em 0.25rem 0.5rem;
321 | }
322 | .ui.items > .item .extra:after {
323 | display: block;
324 | content: ' ';
325 | height: 0px;
326 | clear: both;
327 | overflow: hidden;
328 | visibility: hidden;
329 | }
330 |
331 |
332 | /*******************************
333 | Responsive
334 | *******************************/
335 |
336 |
337 | /* Default Image Width */
338 | .ui.items > .item > .image:not(.ui) {
339 | width: 175px;
340 | }
341 |
342 | /* Tablet Only */
343 | @media only screen and (min-width: 768px) and (max-width: 991px) {
344 | .ui.items > .item {
345 | margin: 1em 0em;
346 | }
347 | .ui.items > .item > .image:not(.ui) {
348 | width: 150px;
349 | }
350 | .ui.items > .item > .image + .content {
351 | display: block;
352 | padding: 0em 0em 0em 1em;
353 | }
354 | }
355 |
356 | /* Mobile Only */
357 | @media only screen and (max-width: 767px) {
358 | .ui.items:not(.unstackable) > .item {
359 | -webkit-box-orient: vertical;
360 | -webkit-box-direction: normal;
361 | -ms-flex-direction: column;
362 | flex-direction: column;
363 | margin: 2em 0em;
364 | }
365 | .ui.items:not(.unstackable) > .item > .image {
366 | display: block;
367 | margin-left: auto;
368 | margin-right: auto;
369 | }
370 | .ui.items:not(.unstackable) > .item > .image,
371 | .ui.items:not(.unstackable) > .item > .image > img {
372 | max-width: 100% !important;
373 | width: auto !important;
374 | max-height: 250px !important;
375 | }
376 | .ui.items:not(.unstackable) > .item > .image + .content {
377 | display: block;
378 | padding: 1.5em 0em 0em;
379 | }
380 | }
381 |
382 |
383 | /*******************************
384 | Variations
385 | *******************************/
386 |
387 |
388 | /*-------------------
389 | Aligned
390 | --------------------*/
391 |
392 | .ui.items > .item > .image + [class*="top aligned"].content {
393 | -ms-flex-item-align: start;
394 | align-self: flex-start;
395 | }
396 | .ui.items > .item > .image + [class*="middle aligned"].content {
397 | -ms-flex-item-align: center;
398 | align-self: center;
399 | }
400 | .ui.items > .item > .image + [class*="bottom aligned"].content {
401 | -ms-flex-item-align: end;
402 | align-self: flex-end;
403 | }
404 |
405 | /*--------------
406 | Relaxed
407 | ---------------*/
408 |
409 | .ui.relaxed.items > .item {
410 | margin: 1.5em 0em;
411 | }
412 | .ui[class*="very relaxed"].items > .item {
413 | margin: 2em 0em;
414 | }
415 |
416 | /*-------------------
417 | Divided
418 | --------------------*/
419 |
420 | .ui.divided.items > .item {
421 | border-top: 1px solid rgba(34, 36, 38, 0.15);
422 | margin: 0em;
423 | padding: 1em 0em;
424 | }
425 | .ui.divided.items > .item:first-child {
426 | border-top: none;
427 | margin-top: 0em !important;
428 | padding-top: 0em !important;
429 | }
430 | .ui.divided.items > .item:last-child {
431 | margin-bottom: 0em !important;
432 | padding-bottom: 0em !important;
433 | }
434 |
435 | /* Relaxed Divided */
436 | .ui.relaxed.divided.items > .item {
437 | margin: 0em;
438 | padding: 1.5em 0em;
439 | }
440 | .ui[class*="very relaxed"].divided.items > .item {
441 | margin: 0em;
442 | padding: 2em 0em;
443 | }
444 |
445 | /*-------------------
446 | Link
447 | --------------------*/
448 |
449 | .ui.items a.item:hover,
450 | .ui.link.items > .item:hover {
451 | cursor: pointer;
452 | }
453 | .ui.items a.item:hover .content .header,
454 | .ui.link.items > .item:hover .content .header {
455 | color: #1e70bf;
456 | }
457 |
458 | /*--------------
459 | Size
460 | ---------------*/
461 |
462 | .ui.items > .item {
463 | font-size: 1em;
464 | }
465 |
466 | /*---------------
467 | Unstackable
468 | ----------------*/
469 |
470 | @media only screen and (max-width: 767px) {
471 | .ui.unstackable.items > .item > .image,
472 | .ui.unstackable.items > .item > .image > img {
473 | width: 125px !important;
474 | }
475 | }
476 |
477 |
478 | /*******************************
479 | Theme Overrides
480 | *******************************/
481 |
482 |
483 |
484 | /*******************************
485 | User Variable Overrides
486 | *******************************/
487 |
488 |
--------------------------------------------------------------------------------
/semantic-ui.js:
--------------------------------------------------------------------------------
1 | require('./js/api');
2 | require('./js/colorize');
3 | require('./js/form');
4 | require('./js/state');
5 | require('./js/visibility');
6 | require('./js/visit');
7 | require('./js/site');
8 | require('./js/accordion');
9 | require('./js/checkbox');
10 | require('./js/dimmer');
11 | require('./js/dropdown');
12 | require('./js/embed');
13 | require('./js/modal');
14 | require('./js/nag');
15 | require('./js/popup');
16 | require('./js/progress');
17 | require('./js/rating');
18 | require('./js/search');
19 | require('./js/shape');
20 | require('./js/sidebar');
21 | require('./js/sticky');
22 | require('./js/tab');
23 | require('./js/transition');
24 |
--------------------------------------------------------------------------------
/semantic-ui.scss:
--------------------------------------------------------------------------------
1 | @import 'scss/globals/all';
2 | @import 'scss/elements/all';
3 | @import 'scss/collections/all';
4 | @import 'scss/views/all';
5 | @import 'scss/modules/all';
--------------------------------------------------------------------------------