├── .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'; --------------------------------------------------------------------------------