├── .bootstraprc ├── .gitignore ├── .modernizrrc ├── .nvmrc ├── .ruby-version ├── Gemfile ├── Gemfile.lock ├── Gruntfile.js ├── LICENSE ├── README.md ├── config.rb ├── config └── webpack │ ├── development.js │ ├── production.js │ └── shared.js ├── data └── social_icons.yml ├── lib └── helpers.rb ├── package.json ├── source ├── 404.html.erb ├── images │ ├── avatar.png │ ├── icon-caret-down.svg │ ├── icon-required.svg │ ├── icon-search.svg │ ├── icon-success.svg │ ├── icon-tooltip.svg │ └── icon-warning.svg ├── index.html.erb ├── javascripts │ ├── body.js │ ├── body │ │ ├── $_get.js │ │ ├── jquery.custom-file-input.js │ │ ├── maxlength.js │ │ ├── modals.js │ │ ├── open-menu.js │ │ ├── popover.js │ │ ├── scrollTo.js │ │ ├── select2.js │ │ └── tippy.js │ └── head.js ├── layouts │ ├── basic.erb │ ├── layout.erb │ └── primary.erb ├── maintenance.html.erb ├── partials │ ├── _alert.html.erb │ ├── _footer.html.erb │ ├── _header.html.erb │ ├── _nav-responsive.html.erb │ └── _shapes.html.erb ├── reset-password.html.erb ├── shapes │ ├── 404.svg │ ├── icon-caret-down.svg │ ├── maintenance.svg │ ├── marsman-template-negative.svg │ └── marsman-template.svg ├── sign-in.html.erb ├── sign-up.html.erb ├── stylesheets │ ├── application.scss │ ├── base │ │ ├── _buttons.scss │ │ ├── _fonts.scss │ │ ├── _forms.scss │ │ ├── _forms__checkbox.scss │ │ ├── _forms__input-file.scss │ │ ├── _forms__radio.scss │ │ ├── _general.scss │ │ ├── _grid.scss │ │ ├── _icons.scss │ │ └── _tables.scss │ ├── blocks │ │ ├── _actions.scss │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _box.scss │ │ ├── _card-css.scss │ │ ├── _dropdown.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _hero.scss │ │ ├── _main-content.scss │ │ ├── _modals.scss │ │ ├── _nav-inline.scss │ │ ├── _nav-pills.scss │ │ ├── _nav-responsive.scss │ │ ├── _pagination.scss │ │ ├── _pills.scss │ │ ├── _popover.scss │ │ ├── _progress-bar.scss │ │ ├── _select2.scss │ │ ├── _separator.scss │ │ ├── _tooltip.scss │ │ └── _user-info.scss │ ├── layouts │ │ ├── _home.scss │ │ ├── _primary.scss │ │ └── _toolkit.scss │ ├── plugins │ │ └── _tippy.scss │ ├── postcss.config.js │ └── utilities │ │ ├── _helpers.scss │ │ ├── _keyframes.scss │ │ ├── _mixins.scss │ │ ├── _normalize.scss │ │ └── _variables.scss ├── terms-and-conditions.html.erb ├── toolkit.html.erb └── whole-page-text.html.erb └── yarn.lock /.bootstraprc: -------------------------------------------------------------------------------- 1 | { 2 | "bootstrapVersion": 3, 3 | "styles": false, 4 | "scripts": true 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore bundler config 2 | /.bundle 3 | /vendor/bundle 4 | 5 | # Ignore the build directory 6 | /build 7 | 8 | # Ignore cache 9 | /.sass-cache 10 | /.cache 11 | 12 | # Ignore .DS_store file 13 | .DS_Store 14 | 15 | # Ignore SublimeText 16 | *.sublime-workspace 17 | *.sublime-project 18 | 19 | # Ignore node & grunt related files 20 | /node_modules 21 | 22 | # Ignore Project Files 23 | /project_files 24 | 25 | # Webpack output directory 26 | dist 27 | -------------------------------------------------------------------------------- /.modernizrrc: -------------------------------------------------------------------------------- 1 | { 2 | "classPrefix": "", 3 | "options": [ 4 | "addTest", 5 | "atRule", 6 | "domPrefixes", 7 | "hasEvent", 8 | "html5shiv", 9 | "html5printshiv", 10 | "testAllProps", 11 | "testProp", 12 | "testStyles" 13 | ], 14 | "feature-detects": [ 15 | "a/download", 16 | "ambientlight", 17 | "applicationcache", 18 | "audio", 19 | "audio/loop", 20 | "audio/preload", 21 | "audio/webaudio", 22 | "battery", 23 | "battery/lowbattery", 24 | "blob", 25 | "canvas", 26 | "canvas/blending", 27 | "canvas/todataurl", 28 | "canvas/winding", 29 | "canvastext", 30 | "contenteditable", 31 | "contextmenu", 32 | "cookies", 33 | "cors", 34 | "custom-elements", 35 | "crypto", 36 | "crypto/getrandomvalues", 37 | "css/all", 38 | "css/animations", 39 | "css/appearance", 40 | "css/backdropfilter", 41 | "css/backgroundblendmode", 42 | "css/backgroundcliptext", 43 | "css/backgroundposition-shorthand", 44 | "css/backgroundposition-xy", 45 | "css/backgroundrepeat", 46 | "css/backgroundsize", 47 | "css/backgroundsizecover", 48 | "css/borderimage", 49 | "css/borderradius", 50 | "css/boxshadow", 51 | "css/boxsizing", 52 | "css/calc", 53 | "css/checked", 54 | "css/chunit", 55 | "css/columns", 56 | "css/cssgrid", 57 | "css/cubicbezierrange", 58 | "css/displayrunin", 59 | "css/displaytable", 60 | "css/ellipsis", 61 | "css/escape", 62 | "css/exunit", 63 | "css/filters", 64 | "css/flexbox", 65 | "css/flexboxlegacy", 66 | "css/flexboxtweener", 67 | "css/flexwrap", 68 | "css/fontface", 69 | "css/generatedcontent", 70 | "css/gradients", 71 | "css/hairline", 72 | "css/hsla", 73 | "css/hyphens", 74 | "css/invalid", 75 | "css/lastchild", 76 | "css/mask", 77 | "css/mediaqueries", 78 | "css/multiplebgs", 79 | "css/nthchild", 80 | "css/objectfit", 81 | "css/opacity", 82 | "css/overflow-scrolling", 83 | "css/pointerevents", 84 | "css/positionsticky", 85 | "css/pseudoanimations", 86 | "css/pseudotransitions", 87 | "css/reflections", 88 | "css/regions", 89 | "css/remunit", 90 | "css/resize", 91 | "css/rgba", 92 | "css/scrollbars", 93 | "css/scrollsnappoints", 94 | "css/shapes", 95 | "css/siblinggeneral", 96 | "css/subpixelfont", 97 | "css/supports", 98 | "css/target", 99 | "css/textalignlast", 100 | "css/textshadow", 101 | "css/transforms", 102 | "css/transformslevel2", 103 | "css/transforms3d", 104 | "css/transformstylepreserve3d", 105 | "css/transitions", 106 | "css/userselect", 107 | "css/valid", 108 | "css/vhunit", 109 | "css/vmaxunit", 110 | "css/vminunit", 111 | "css/vwunit", 112 | "css/will-change", 113 | "css/wrapflow", 114 | "custom-protocol-handler", 115 | "customevent", 116 | "dart", 117 | "dataview-api", 118 | "dom/classlist", 119 | "dom/createElement-attrs", 120 | "dom/dataset", 121 | "dom/documentfragment", 122 | "dom/hidden", 123 | "dom/microdata", 124 | "dom/mutationObserver", 125 | "dom/passiveeventlisteners", 126 | "elem/bdi", 127 | "elem/datalist", 128 | "elem/details", 129 | "elem/output", 130 | "elem/picture", 131 | "elem/progress-meter", 132 | "elem/ruby", 133 | "elem/template", 134 | "elem/time", 135 | "elem/track", 136 | "elem/unknown", 137 | "emoji", 138 | "es5/array", 139 | "es5/date", 140 | "es5/function", 141 | "es5/object", 142 | "es5/specification", 143 | "es5/strictmode", 144 | "es5/string", 145 | "es5/syntax", 146 | "es5/undefined", 147 | "es6/array", 148 | "es6/collections", 149 | "es6/contains", 150 | "es6/generators", 151 | "es6/math", 152 | "es6/number", 153 | "es6/object", 154 | "es6/promises", 155 | "es6/string", 156 | "event/deviceorientation-motion", 157 | "event/oninput", 158 | "eventlistener", 159 | "exif-orientation", 160 | "file/api", 161 | "file/filesystem", 162 | "flash", 163 | "forms/capture", 164 | "forms/fileinput", 165 | "forms/fileinputdirectory", 166 | "forms/formattribute", 167 | "forms/inputnumber-l10n", 168 | "forms/placeholder", 169 | "forms/requestautocomplete", 170 | "forms/validation", 171 | "fullscreen-api", 172 | "gamepad", 173 | "geolocation", 174 | "hashchange", 175 | "hiddenscroll", 176 | "history", 177 | "htmlimports", 178 | "ie8compat", 179 | "iframe/sandbox", 180 | "iframe/seamless", 181 | "iframe/srcdoc", 182 | "img/apng", 183 | "img/crossorigin", 184 | "img/jpeg2000", 185 | "img/jpegxr", 186 | "img/sizes", 187 | "img/srcset", 188 | "img/webp", 189 | "img/webp-alpha", 190 | "img/webp-animation", 191 | "img/webp-lossless", 192 | "indexeddb", 193 | "indexeddbblob", 194 | "input", 195 | "input/formaction", 196 | "input/formenctype", 197 | "input/formmethod", 198 | "input/formtarget", 199 | "inputsearchevent", 200 | "inputtypes", 201 | "intl", 202 | "json", 203 | "ligatures", 204 | "lists-reversed", 205 | "mathml", 206 | "mediaquery/hovermq", 207 | "mediaquery/pointermq", 208 | "messagechannel", 209 | "network/beacon", 210 | "network/connection", 211 | "network/eventsource", 212 | "network/fetch", 213 | "network/xhr-responsetype", 214 | "network/xhr-responsetype-arraybuffer", 215 | "network/xhr-responsetype-blob", 216 | "network/xhr-responsetype-document", 217 | "network/xhr-responsetype-json", 218 | "network/xhr-responsetype-text", 219 | "network/xhr2", 220 | "notification", 221 | "pagevisibility-api", 222 | "performance", 223 | "pointerevents", 224 | "pointerlock-api", 225 | "postmessage", 226 | "proximity", 227 | "queryselector", 228 | "quota-management-api", 229 | "requestanimationframe", 230 | "script/async", 231 | "script/defer", 232 | "serviceworker", 233 | "speech/speech-recognition", 234 | "speech/speech-synthesis", 235 | "storage/localstorage", 236 | "storage/sessionstorage", 237 | "storage/websqldatabase", 238 | "style/scoped", 239 | "svg", 240 | "svg/asimg", 241 | "svg/clippaths", 242 | "svg/filters", 243 | "svg/foreignobject", 244 | "svg/inline", 245 | "svg/smil", 246 | "templatestrings", 247 | "textarea/maxlength", 248 | "touchevents", 249 | "typed-arrays", 250 | "unicode", 251 | "unicode-range", 252 | "url/bloburls", 253 | "url/data-uri", 254 | "url/parser", 255 | "url/urlsearchparams", 256 | "userdata", 257 | "vibration", 258 | "video", 259 | "video/autoplay", 260 | "video/crossorigin", 261 | "video/loop", 262 | "video/preload", 263 | "vml", 264 | "web-intents", 265 | "webanimations", 266 | "webgl", 267 | "webgl/extensions", 268 | "webrtc/datachannel", 269 | "webrtc/getusermedia", 270 | "webrtc/peerconnection", 271 | "websockets", 272 | "websockets/binary", 273 | "window/framed", 274 | "workers/blobworkers", 275 | "workers/dataworkers", 276 | "workers/sharedworkers", 277 | "workers/transferables", 278 | "workers/webworkers", 279 | "xdomainrequest" 280 | ] 281 | } 282 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/carbon 2 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.3.1 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'faker', '~> 1.7.3' 4 | 5 | #middleman gems 6 | gem 'middleman', '>= 4.0.0' 7 | gem 'middleman-livereload' 8 | gem 'middleman-pry' 9 | # gem 'middleman-email', git: "git@github.com:MarsBased/middleman-email.git" 10 | 11 | gem 'middleman-webpacker' 12 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (5.0.1) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (~> 0.7) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | addressable (2.5.0) 10 | public_suffix (~> 2.0, >= 2.0.2) 11 | backports (3.6.8) 12 | coderay (1.1.1) 13 | coffee-script (2.4.1) 14 | coffee-script-source 15 | execjs 16 | coffee-script-source (1.12.2) 17 | compass-import-once (1.0.5) 18 | sass (>= 3.2, < 3.5) 19 | concurrent-ruby (1.0.4) 20 | contracts (0.13.0) 21 | dotenv (2.2.0) 22 | em-websocket (0.5.1) 23 | eventmachine (>= 0.12.9) 24 | http_parser.rb (~> 0.6.0) 25 | erubis (2.7.0) 26 | eventmachine (1.2.3) 27 | execjs (2.7.0) 28 | faker (1.7.3) 29 | i18n (~> 0.5) 30 | fast_blank (1.0.0) 31 | fastimage (2.1.0) 32 | ffi (1.9.17) 33 | haml (4.0.7) 34 | tilt 35 | hamster (3.0.0) 36 | concurrent-ruby (~> 1.0) 37 | hashie (3.5.4) 38 | http_parser.rb (0.6.0) 39 | i18n (0.7.0) 40 | kramdown (1.13.2) 41 | listen (3.0.8) 42 | rb-fsevent (~> 0.9, >= 0.9.4) 43 | rb-inotify (~> 0.9, >= 0.9.7) 44 | memoist (0.15.0) 45 | method_source (0.8.2) 46 | middleman (4.2.1) 47 | coffee-script (~> 2.2) 48 | compass-import-once (= 1.0.5) 49 | haml (>= 4.0.5) 50 | kramdown (~> 1.2) 51 | middleman-cli (= 4.2.1) 52 | middleman-core (= 4.2.1) 53 | sass (>= 3.4.0, < 4.0) 54 | middleman-cli (4.2.1) 55 | thor (>= 0.17.0, < 2.0) 56 | middleman-core (4.2.1) 57 | activesupport (>= 4.2, < 5.1) 58 | addressable (~> 2.3) 59 | backports (~> 3.6) 60 | bundler (~> 1.1) 61 | contracts (~> 0.13.0) 62 | dotenv 63 | erubis 64 | execjs (~> 2.0) 65 | fast_blank 66 | fastimage (~> 2.0) 67 | hamster (~> 3.0) 68 | hashie (~> 3.4) 69 | i18n (~> 0.7.0) 70 | listen (~> 3.0.0) 71 | memoist (~> 0.14) 72 | padrino-helpers (~> 0.13.0) 73 | parallel 74 | rack (>= 1.4.5, < 3) 75 | sass (>= 3.4) 76 | servolux 77 | tilt (~> 2.0) 78 | uglifier (~> 3.0) 79 | middleman-livereload (3.4.6) 80 | em-websocket (~> 0.5.1) 81 | middleman-core (>= 3.3) 82 | rack-livereload (~> 0.3.15) 83 | middleman-pry (1.0.1) 84 | middleman (>= 3.3, < 5) 85 | pry (~> 0.9) 86 | middleman-webpacker (1.0.0) 87 | middleman-core (>= 4.2.1) 88 | minitest (5.10.1) 89 | padrino-helpers (0.13.3.3) 90 | i18n (~> 0.6, >= 0.6.7) 91 | padrino-support (= 0.13.3.3) 92 | tilt (>= 1.4.1, < 3) 93 | padrino-support (0.13.3.3) 94 | activesupport (>= 3.1) 95 | parallel (1.10.0) 96 | pry (0.10.4) 97 | coderay (~> 1.1.0) 98 | method_source (~> 0.8.1) 99 | slop (~> 3.4) 100 | public_suffix (2.0.5) 101 | rack (2.0.1) 102 | rack-livereload (0.3.16) 103 | rack 104 | rb-fsevent (0.9.8) 105 | rb-inotify (0.9.8) 106 | ffi (>= 0.5.0) 107 | sass (3.4.23) 108 | servolux (0.12.0) 109 | slop (3.6.0) 110 | thor (0.19.4) 111 | thread_safe (0.3.6) 112 | tilt (2.0.6) 113 | tzinfo (1.2.2) 114 | thread_safe (~> 0.1) 115 | uglifier (3.0.4) 116 | execjs (>= 0.3.0, < 3) 117 | 118 | PLATFORMS 119 | ruby 120 | 121 | DEPENDENCIES 122 | faker (~> 1.7.3) 123 | middleman (>= 4.0.0) 124 | middleman-livereload 125 | middleman-pry 126 | middleman-webpacker 127 | 128 | BUNDLED WITH 129 | 1.15.2 130 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt) { 4 | require('load-grunt-tasks')(grunt); 5 | 6 | grunt.initConfig({ 7 | cfg: { 8 | shapesPath: 'source/shapes', 9 | partialsPath: 'source/partials' 10 | }, 11 | 12 | //SVG min 13 | svgmin: { 14 | options: { 15 | plugins: [ 16 | { 17 | removeEmptyAttrs: false 18 | }, { 19 | removeViewBox: false 20 | }, { 21 | //removeUselessStrokeAndFill: true 22 | }, { 23 | removeAttrs: { 24 | attrs: ['xmlns','fill=none'] 25 | } 26 | } 27 | ] 28 | }, 29 | multiple: { 30 | files: [{ 31 | expand: true, 32 | cwd: '<%= cfg.shapesPath %>/', 33 | src: ['**/*.svg'], 34 | dest: '<%= cfg.shapesPath %>/' 35 | }] 36 | } 37 | }, 38 | 39 | // SVG Sprite generator 40 | svgstore: { 41 | dev: { 42 | options: { 43 | prefix : 'shape-', 44 | cleanup: false, 45 | svg: { 46 | viewBox : '0 0 100 100', 47 | xmlns: 'http://www.w3.org/2000/svg', 48 | style: 'display:none' 49 | } 50 | }, 51 | src: '<%= cfg.shapesPath %>/*.svg', 52 | dest: '<%= cfg.partialsPath %>/_shapes.html.erb' 53 | }, 54 | }, 55 | }); 56 | 57 | grunt.registerTask('svg', ['svgmin','svgstore:dev']); 58 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 MarsBased 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MarsMan 2 | 3 | 4 | 5 | Frontend framework for starting new projects. 6 | 7 | Take a look at https://marsman.marsbased.com 8 | 9 | Developed with Middleman (https://middlemanapp.com/). Uses Grunt to automatize SVG inline generation. 10 | 11 | ## MarsMan Installation 12 | 13 | To use MarsMan as a template, init the project with the following command: 14 | 15 | ``` 16 | middleman init new_project -T marsbased/marsman 17 | ``` 18 | 19 | ## Webpack 20 | 21 | MarsMan uses Webpack to compile and handle Javascript, Styles and all static assets through the [middleman-webpack](https://github.com/MarsBased/middleman-webpack) extension, which provides a set of helpers that can be used in the HTML to include these assets. 22 | 23 | Webpack configuration is placed in the `config` folder with the following structure: 24 | * `shared.js` has the configuration options shared by all environments. 25 | * `development.js` has development-specific settings. 26 | * `production.js` has build specific settings. 27 | 28 | Webpack is configured to be able to use ES6 in Javascript files. 29 | 30 | ## Modernizr 31 | 32 | By default a full Modernizr build is included. The activated features and detections can be customized in `.modernizrrc` 33 | 34 | ======= 35 | 36 | # Project README 37 | 38 | ## Development 39 | 40 | ``` 41 | yarn install 42 | bundle install 43 | bundle exec middleman server 44 | ``` 45 | 46 | or 47 | 48 | ``` 49 | yarn install 50 | yarn start 51 | ``` 52 | 53 | To update the SVG shapes, place the needed SVG files inside source/shapes and 54 | call: 55 | 56 | ``` 57 | grunt svg 58 | ``` 59 | 60 | ## Common Errors 61 | 62 | **Q: Webpack compilation fails with an error similar to `Error: ENOENT: no such file or directory, scandir '/Users/cooluser/Documents/middleman-webpack-sample/node_modules/node-sass/vendor'`** 63 | 64 | A: run `npm rebuild node-sass` 65 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'lib/helpers' 2 | helpers Helpers 3 | 4 | set :relative_links, true 5 | 6 | activate :pry 7 | activate :directory_indexes 8 | activate :webpack 9 | 10 | configure :development do 11 | activate :livereload, no_swf: true 12 | end 13 | 14 | ready do 15 | @pages = sitemap.resources.find_all{|p| p.source_file.match(/\.html/) } 16 | @pages.each do |r| 17 | @versions = [] 18 | if @data = r.data['versions'] 19 | @data.split(/[\s,']/).reject(&:empty?).each do |d| 20 | @versions.push(d) 21 | end 22 | end 23 | @versions.each do |version| 24 | @path = r.destination_path.gsub 'index.html', "_#{version}.html" 25 | proxy @path, r.path, :locals => { :versions => version } 26 | end 27 | end 28 | end 29 | 30 | configure :build do 31 | ignore 'shapes/*' 32 | set :environment, 'production' 33 | #set :http_prefix, '/marsman' 34 | end 35 | -------------------------------------------------------------------------------- /config/webpack/development.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const sharedConfig = require('./shared.js'); 3 | 4 | module.exports = merge(sharedConfig, { 5 | devtool: 'sourcemap', 6 | stats: { 7 | errorDetails: true 8 | }, 9 | output: { 10 | pathinfo: true 11 | }, 12 | node: { 13 | console: true 14 | } 15 | }); 16 | -------------------------------------------------------------------------------- /config/webpack/production.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const CompressionPlugin = require('compression-webpack-plugin'); 4 | 5 | const sharedConfig = require('./shared.js'); 6 | 7 | module.exports = merge(sharedConfig, { 8 | output: { 9 | filename: '[name]-[chunkhash].js' 10 | }, 11 | 12 | plugins: [ 13 | new webpack.optimize.UglifyJsPlugin(), 14 | new CompressionPlugin({ 15 | asset: '[path].gz[query]', 16 | algorithm: 'gzip', 17 | test: /\.(js|css|svg|eot|ttf|woff|woff2)$/ 18 | }) 19 | ] 20 | }); 21 | -------------------------------------------------------------------------------- /config/webpack/shared.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | const ManifestPlugin = require('webpack-manifest-plugin'); 4 | const Clean = require('clean-webpack-plugin'); 5 | const { resolve } = require('path'); 6 | const { sync } = require('glob'); 7 | 8 | const isProduction = process.env.NODE_ENV === 'production'; 9 | const publicPath = 'dist'; 10 | 11 | module.exports = { 12 | entry: { 13 | body: './source/javascripts/body.js', 14 | head: './source/javascripts/head.js', 15 | application: './source/stylesheets/application.scss', 16 | images: sync('./source/images/**/*', { nodir: true }), 17 | vendor: ['lodash', 'jquery', 'bootstrap-loader', 'select2'] 18 | }, 19 | 20 | output: { 21 | path: resolve(publicPath), 22 | filename: '[name].bundle.js' 23 | }, 24 | 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.js$/, 29 | exclude: /(node_modules|bower_components)/, 30 | use: { 31 | loader: 'babel-loader', 32 | options: { 33 | presets: [['env']] 34 | } 35 | } 36 | }, 37 | { 38 | test: /\.(scss|sass|css)$/i, 39 | use: 'import-glob-loader', 40 | enforce: 'pre' 41 | }, 42 | { 43 | test: /\.(scss|sass|css)$/i, 44 | use: ExtractTextPlugin.extract({ 45 | fallback: 'style-loader', 46 | use: [ 47 | { 48 | loader: 'css-loader', 49 | options: { 50 | minimize: isProduction 51 | } 52 | }, 53 | { 54 | loader: 'postcss-loader', 55 | options: { 56 | sourceMap: true 57 | } 58 | }, 59 | { 60 | loader: 'sass-loader', 61 | options: { 62 | sourceMap: true, 63 | includePaths: [resolve('node_modules')] 64 | } 65 | } 66 | ] 67 | }) 68 | }, 69 | { 70 | test: /fonts\/.*\.(svg|eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/i, 71 | use: [ 72 | { 73 | loader: 'file-loader', 74 | options: { 75 | publicPath: '', 76 | // can't use 'fonts' because it conflicts with Middleman 77 | name: isProduction ? 'fnt/[name]-[hash].[ext]' : 'fnt/[name].[ext]' 78 | } 79 | } 80 | ] 81 | }, 82 | { 83 | test: /images\/.*\.(jpg|jpeg|png|gif|svg)$/i, 84 | use: [ 85 | { 86 | loader: 'file-loader', 87 | options: { 88 | publicPath: '', 89 | outputPath: 'img/', 90 | context: 'source/images/', 91 | // can't use 'images' because it conflicts with Middleman 92 | name: isProduction ? '[path][name]-[hash].[ext]' : '[path][name].[ext]' 93 | } 94 | } 95 | ] 96 | }, 97 | { 98 | test: require.resolve('jquery'), 99 | use: ['expose-loader?$', 'expose-loader?jQuery'] 100 | }, 101 | { 102 | test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, 103 | loader: 'imports-loader?jQuery=jquery' 104 | }, 105 | { 106 | test: /\.modernizrrc(\.json)?$/, 107 | use: ['modernizr-loader', 'json-loader'] 108 | } 109 | ] 110 | }, 111 | 112 | resolve: { 113 | extensions: ['.js', '.ts', '.sass', '.scss', '.css', '.png', '.svg', '.gif', '.jpeg'], 114 | modules: [resolve('source/javascripts'), 'node_modules'], 115 | alias: { 116 | assets: resolve('source/'), 117 | modernizr$: resolve('.modernizrrc') 118 | } 119 | }, 120 | 121 | resolveLoader: { 122 | modules: ['node_modules'] 123 | }, 124 | 125 | plugins: [ 126 | new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))), 127 | new Clean([publicPath], { 128 | root: resolve() 129 | }), 130 | new ExtractTextPlugin( 131 | isProduction ? '[name].bundle-[hash].css' : '[name].bundle.css' 132 | ), 133 | new webpack.ProvidePlugin({ 134 | $: 'jquery', 135 | jQuery: 'jquery', 136 | 'window.jQuery': 'jquery' 137 | }), 138 | new webpack.optimize.CommonsChunkPlugin({ 139 | names: ['vendor', 'manifest'] 140 | }), 141 | new ManifestPlugin({ 142 | publicPath: '/', 143 | writeToFileEmit: true 144 | }) 145 | ] 146 | }; 147 | -------------------------------------------------------------------------------- /data/social_icons.yml: -------------------------------------------------------------------------------- 1 | - name: envelope 2 | url: mailto:hola@marsbased.com 3 | - name: twitter 4 | url: https://twitter.com/MarsBased 5 | - name: facebook 6 | url: http://facebook.com/marsbased 7 | - name: linkedin 8 | url: http://www.linkedin.com/company/marsbased 9 | - name: instagram 10 | url: http://www.instagram.com/marsbased 11 | - name: google-plus 12 | url: http://plus.google.com/+Marsbased/ 13 | - name: github 14 | url: https://github.com/MarsBased -------------------------------------------------------------------------------- /lib/helpers.rb: -------------------------------------------------------------------------------- 1 | module Helpers 2 | 3 | def active(name, class_name = 'active', reverse = false) 4 | if(class_active = current_page.data.active) 5 | class_active.split(/[\s,']/) 6 | if(reverse) 7 | class_name if(!class_active.include?(name)) 8 | else 9 | class_name if(class_active.include?(name)) 10 | end 11 | end 12 | end 13 | 14 | def version(name, return_value = true, else_value = false ) 15 | names = Array(name) 16 | @c = current_page 17 | @versions = "#{@c.data.version} #{@c.metadata[:locals][:versions]}" 18 | if(names.any? { |n| @versions.split(/[\s,']/).include?(n) }) 19 | return_value 20 | else 21 | else_value if(else_value) 22 | end 23 | end 24 | 25 | def full_url(path) 26 | "#{config[:host]}#{path}" 27 | end 28 | 29 | def svg(name) 30 | content_tag(:svg, class: "shape #{name}") do 31 | content_tag(:use, nil, :'xlink:href' => "#shape-#{name}") 32 | end 33 | end 34 | 35 | end 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marsman-template", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "start": "bundle exec middleman server", 6 | "postinstall": "bundle install" 7 | }, 8 | "devDependencies": { 9 | "clean-webpack-plugin": "^0.1.16", 10 | "css-loader": "^0.26.1", 11 | "expose-loader": "^0.7.1", 12 | "extract-text-webpack-plugin": "^2.0.0-beta", 13 | "grunt": "^1.0.0", 14 | "grunt-svgmin": "^3.0.0", 15 | "grunt-svgstore": "^1.0.0", 16 | "load-grunt-tasks": "^3.5.2", 17 | "node-sass": "^4.5.0", 18 | "sass-loader": "^4.1.1", 19 | "style-loader": "^0.13.1", 20 | "webpack": "^2.3.3" 21 | }, 22 | "dependencies": { 23 | "autoprefixer": "^6.7.7", 24 | "babel-core": "^6.24.0", 25 | "babel-loader": "^6.4.1", 26 | "babel-preset-env": "^1.3.2", 27 | "bootstrap-loader": "^2.1.0", 28 | "bootstrap-sass": "3.3.7", 29 | "compression-webpack-plugin": "^0.3.2", 30 | "file-loader": "^0.11.1", 31 | "font-awesome": "^4.7.0", 32 | "glob": "^7.1.1", 33 | "import-glob-loader": "^1.1.0", 34 | "imports-loader": "^0.7.1", 35 | "jquery": "^3.1.1", 36 | "json-loader": "^0.5.7", 37 | "lodash": "^4.17.4", 38 | "modernizr": "^3.5.0", 39 | "modernizr-loader": "^1.0.1", 40 | "postcss-loader": "^2.0.9", 41 | "postcss-smart-import": "^0.6.10", 42 | "precss": "^1.4.0", 43 | "resolve-url-loader": "^2.1.0", 44 | "select2": "^4.0.3", 45 | "tippy.js": "^3.0.3", 46 | "webpack-manifest-plugin": "^1.1.0", 47 | "webpack-merge": "^4.1.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /source/404.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 3 | layout: primary 4 | body: 404 error 5 | --- 6 | 7 |
8 |
9 |
10 | <%= svg('404') %> 11 |
12 |

Opps! This page couldn’t be found…

13 |
14 | <%= link_to 'Take me back home','/index.html', class:'btn-secondary' %> 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /source/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarsBased/marsman/179f466845af93ba45854995ad52700616ed3e97/source/images/avatar.png -------------------------------------------------------------------------------- /source/images/icon-caret-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-caret-down 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/images/icon-required.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-required 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/images/icon-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-search 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/images/icon-success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-success 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /source/images/icon-tooltip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | tooltip-icon 9 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /source/images/icon-warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-warning 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/index.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to marsman Template 3 | body: home 4 | --- 5 |
6 |
7 |

marsman-template

8 | <%= svg('marsman-template') %> 9 |
10 |
11 |
12 |

Login

13 |
    14 |
  • <%= link_to 'Sign up', '/sign-up.html' %>
    • 15 |
  • <%= link_to 'Sign in', '/sign-in.html' %>
    • 16 |
  • <%= link_to 'Reset Password', '/reset-password.html' %>
    • 17 |
  • <%= link_to 'Terms and conditions', '/terms-and-conditions.html' %>
    • 18 |
19 |

Example pages

20 |
    21 |
  • <%= link_to 'Whole page text', '/whole-page-text.html' %>
    • 22 |
23 |
24 |
25 |

Others

26 |
    27 |
  • <%= link_to 'Toolkit', '/toolkit.html' %>
    • 28 |
  • <%= link_to '404', '/404.html' %>
    • 29 |
  • <%= link_to 'Maintenance', '/maintenance.html' %>
    • 30 |
31 |
32 |
33 |
34 |
35 |
-------------------------------------------------------------------------------- /source/javascripts/body.js: -------------------------------------------------------------------------------- 1 | import './body/jquery.custom-file-input'; 2 | import './body/maxlength'; 3 | import './body/modals'; 4 | import './body/open-menu'; 5 | import './body/popover'; 6 | import './body/scrollTo'; 7 | import './body/select2'; 8 | import './body/tippy'; 9 | -------------------------------------------------------------------------------- /source/javascripts/body/$_get.js: -------------------------------------------------------------------------------- 1 | export function $_GET(param) { 2 | var vars = {}; 3 | window.location.href.replace( location.hash, '' ).replace( 4 | /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp 5 | function( m, key, value ) { // callback 6 | vars[key] = value !== undefined ? value : ''; 7 | } 8 | ); 9 | 10 | if ( param ) { 11 | return vars[param] ? vars[param] : null; 12 | } 13 | return vars; 14 | } 15 | -------------------------------------------------------------------------------- /source/javascripts/body/jquery.custom-file-input.js: -------------------------------------------------------------------------------- 1 | /* 2 | By Osvaldas Valutis, www.osvaldas.info 3 | Available for use under the MIT License 4 | */ 5 | 6 | 'use strict'; 7 | 8 | ;( function( $, window, document, undefined ) 9 | { 10 | 11 | var $inputfile = $( '.input-file' ); 12 | if ( $inputfile.length ) { 13 | $inputfile.each( function(){ 14 | var $input = $( this ), 15 | $label = $input.next( 'label' ), 16 | labelVal = $label.html(); 17 | 18 | $input.on( 'change', function( e ) 19 | { 20 | var fileName = ''; 21 | 22 | if( this.files && this.files.length > 1 ) 23 | fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); 24 | else if( e.target.value ) 25 | fileName = e.target.value.split( '\\' ).pop(); 26 | 27 | if( fileName ) 28 | $label.addClass('active').html( fileName ); 29 | else 30 | $label.removeClass('active').html( labelVal ); 31 | }); 32 | 33 | // Firefox bug fix 34 | $input 35 | .on( 'focus', function(){ $input.addClass( 'has-focus' ); }) 36 | .on( 'blur', function(){ $input.removeClass( 'has-focus' ); }); 37 | }); 38 | } 39 | })( jQuery, window, document ); 40 | -------------------------------------------------------------------------------- /source/javascripts/body/maxlength.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $input = $('textarea[maxlength]'), 5 | spanClass = 'character-counter'; 6 | 7 | function chractersCounter($element) { 8 | var left = $element.attr('maxlength') - $element.val().length; 9 | 10 | if (left < 0) { 11 | left = 0; 12 | } 13 | 14 | $element 15 | .attr('data-characters-counter', left) 16 | .prev('.'+spanClass) 17 | .attr('class', statusCounter(left)+' '+spanClass) 18 | .text(signCounter(left)); 19 | } 20 | 21 | function statusCounter(num){ 22 | if(num >= 20){ 23 | return 'success'; 24 | }else{ 25 | return "warning"; 26 | } 27 | } 28 | 29 | function signCounter(num){ 30 | if(num <= 0){ 31 | return num; 32 | } 33 | return '-'+num; 34 | } 35 | 36 | function createCounter($element){ 37 | $element.before( '' ); 38 | } 39 | 40 | function positionCounter($element){ 41 | var $counter = $element.prev('.'+spanClass), 42 | position = $element.position(), 43 | width = $element.outerWidth(), 44 | height = $element.outerHeight(), 45 | zindex = ($element.css("z-index")) ? "inherit" : $element.css("z-index")+1; 46 | 47 | $counter 48 | .css('top', position.top + height) 49 | .css('left',position.left + width) 50 | .css('z-index', zindex); 51 | } 52 | 53 | function init(){ 54 | $input.each(function(){ 55 | createCounter($(this)); 56 | positionCounter($(this)); 57 | chractersCounter($(this)); 58 | }) 59 | } 60 | 61 | init(); 62 | 63 | $input 64 | .keyup(function () { 65 | chractersCounter($(this)); 66 | }) 67 | .keydown(function() { 68 | chractersCounter($(this)); 69 | }) 70 | .change(function (){ 71 | chractersCounter($(this)); 72 | }); 73 | 74 | $(window).resize(function(){ 75 | $input.each(function(){ 76 | positionCounter($(this)); 77 | }); 78 | }); 79 | 80 | })(); -------------------------------------------------------------------------------- /source/javascripts/body/modals.js: -------------------------------------------------------------------------------- 1 | import { $_GET } from './$_get'; 2 | 3 | (function () { 4 | 'use strict'; 5 | 6 | var $modals = $('.modal'); 7 | 8 | if($modals.length){ 9 | $modals.each(function(){ 10 | $(this).insertAfter('.footer'); 11 | }); 12 | } 13 | 14 | var $target = $('#'+$_GET('modal')); 15 | 16 | if($target.length){ 17 | $target.modal('show'); 18 | } 19 | 20 | })(); 21 | -------------------------------------------------------------------------------- /source/javascripts/body/open-menu.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $button = $('.btn-collapse'); 5 | 6 | $button.on('click',function(){ 7 | $(this).toggleClass('active'); 8 | $('body').toggleClass('open-menu'); 9 | }); 10 | 11 | })(); -------------------------------------------------------------------------------- /source/javascripts/body/popover.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $element = $('[data-toggle="popover"],.popover-icon'); 5 | 6 | $element.each(function(){ 7 | if($(this).data('popover')=='html'){ 8 | $element.click(function(e){ 9 | e.preventDefault(); 10 | }).popover({ 11 | html: true, 12 | container: 'body', 13 | placement: 'auto bottom', 14 | content: $(this).next().html(), 15 | template: '

' 16 | }).addClass('html'); 17 | }else{ 18 | $element.click(function(e){ 19 | e.preventDefault(); 20 | }).popover({ 21 | container: 'body', 22 | placement: 'auto top' 23 | }); 24 | } 25 | }) 26 | 27 | $(document).on('click', function(e) { 28 | $element.each(function() { 29 | //the 'is' for buttons that trigger popups 30 | //the 'has' for icons within a button that triggers a popup 31 | if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 32 | $(this).popover('hide').data('bs.popover').inState.click = false // fix for BS 3.3.6 33 | } 34 | 35 | }); 36 | }); 37 | 38 | 39 | })(); -------------------------------------------------------------------------------- /source/javascripts/body/scrollTo.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var $scrollers = $('html,body,.wrapper'); 5 | 6 | function scrollTo($e){ 7 | var header_position = $('header.header').css('position'); 8 | 9 | if(header_position == 'fixed'){ 10 | $scrollers.animate({ 11 | scrollTop: $e.offset().top - $('.wrapper').offset().top}, 12 | 'slow'); 13 | }else{ 14 | $scrollers.animate({ 15 | scrollTop: $e.offset().top}, 16 | 'slow'); 17 | } 18 | } 19 | 20 | $('a[href*="#"]:not([href="#"])').click(function() { 21 | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 22 | var target = $(this.hash); 23 | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 24 | if (target.length) { 25 | scrollTo(target) 26 | return false; 27 | } 28 | } 29 | }); 30 | 31 | })(); 32 | -------------------------------------------------------------------------------- /source/javascripts/body/select2.js: -------------------------------------------------------------------------------- 1 | import * as _ from 'lodash'; 2 | 3 | (function () { 4 | 'use strict'; 5 | 6 | var $s2 = $('.select2'); 7 | 8 | $s2.each(function(){ 9 | var params = {}, 10 | css; 11 | 12 | if (!$(this).hasClass('search')){ 13 | _.extend(params, {minimumResultsForSearch: Infinity}); 14 | } 15 | if ($(this).hasClass('success')){ 16 | //_.extend(params, {containerCss: ".success"}); 17 | css= 'success'; 18 | } 19 | if ($(this).hasClass('warning')){ 20 | //_.extend(params, {containerCss: ".warning"}); 21 | css = 'warning'; 22 | } 23 | 24 | $(this) 25 | .select2(params) 26 | .next('.select2-container') 27 | .addClass(css); 28 | 29 | $(this).on("select2-open", function() { 30 | $(this).select2('positionDropdown', true); 31 | }); 32 | 33 | }) 34 | 35 | })(); 36 | -------------------------------------------------------------------------------- /source/javascripts/body/tippy.js: -------------------------------------------------------------------------------- 1 | import tippy from 'tippy.js'; 2 | 3 | $(document).ready(function() { 4 | tippy('.tooltip-wrapper-mobile .tooltip-trigger', { 5 | arrow: true, 6 | arrowType: 'skinny' 7 | }); 8 | tippy('.tooltip-wrapper .tooltip-trigger', { 9 | arrow: true, 10 | arrowType: 'skinny', 11 | placement: 'right' 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /source/javascripts/head.js: -------------------------------------------------------------------------------- 1 | import 'modernizr'; 2 | -------------------------------------------------------------------------------- /source/layouts/basic.erb: -------------------------------------------------------------------------------- 1 | <% wrap_layout :layout do %> 2 | <%= partial 'partials/nav-responsive' %> 3 | <%= partial 'partials/header' %> 4 |
5 |
6 |
7 | <%= yield %> 8 |
9 | 10 |
11 | <%= partial 'partials/footer' %> 12 |
13 | <% end %> 14 | 15 | -------------------------------------------------------------------------------- /source/layouts/layout.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | marsman template | <%= current_page.data.title %> 11 | 12 | <%= stylesheet_pack_tag 'application' %> 13 | 14 | <%= javascript_pack_tag 'manifest' %> 15 | <%= javascript_pack_tag 'head' %> 16 | <%= javascript_pack_tag 'vendor' %> 17 | 18 | 19 | 20 | <%= partial "partials/shapes" %> 21 | 22 | <%= yield %> 23 | 24 | <%= javascript_pack_tag 'body' %> 25 | 26 | 27 | -------------------------------------------------------------------------------- /source/layouts/primary.erb: -------------------------------------------------------------------------------- 1 | <% wrap_layout :layout do %> 2 |
3 |
4 |
5 |

marsman-template

6 | <%= link_to svg('marsman-template-negative'), '/index.html' %> 7 |
8 | <%= yield %> 9 |
10 | <%= partial 'partials/footer' %> 11 |
12 | <% end %> 13 | 14 | -------------------------------------------------------------------------------- /source/maintenance.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Maintenance 3 | layout: primary 4 | body: 404 error 5 | --- 6 | 7 |
8 |
9 |
10 | <%= svg('maintenance') %> 11 |
12 |

MarsMan is currently undergoing some maintenance.

13 |

Thank you for your understanding. We will be back in few minutes.

14 |
15 | <%= link_to 'Take me back home', '/index.html', class:'btn-secondary' %> 16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /source/partials/_alert.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/partials/_footer.html.erb: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/partials/_header.html.erb: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 | 9 | 23 |
24 | 25 | 26 | 29 | 47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /source/partials/_nav-responsive.html.erb: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /source/reset-password.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Reset password 3 | layout: primary 4 | versions: error 5 | body: reset-password 6 | --- 7 | 8 |
9 |
10 |
11 |

Reset your password

12 |
13 |
14 |

15 | Enter your email address and we will send you a link to reset your password. 16 |

17 |
18 |
19 | 21 | <% if version('error') %> 22 |
The email entered is not valid.
23 | <% end %> 24 |
25 |

26 | 29 |

30 |
31 |
32 |
33 |
34 | -------------------------------------------------------------------------------- /source/shapes/404.svg: -------------------------------------------------------------------------------- 1 | 404 -------------------------------------------------------------------------------- /source/shapes/icon-caret-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon-caret-down 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /source/shapes/maintenance.svg: -------------------------------------------------------------------------------- 1 | maintenance -------------------------------------------------------------------------------- /source/shapes/marsman-template-negative.svg: -------------------------------------------------------------------------------- 1 | marsman-template-negative -------------------------------------------------------------------------------- /source/shapes/marsman-template.svg: -------------------------------------------------------------------------------- 1 | marsman-template -------------------------------------------------------------------------------- /source/sign-in.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sign in 3 | layout: primary 4 | versions: error 5 | body: sign-in 6 | --- 7 | 8 |
9 |
10 |
11 |

Sign in

12 |

Log in to your account

13 |
14 |
15 |
16 | 18 |
19 |
20 | 22 | <% if version('error') %> 23 |
Wrong password.
24 | <% end %> 25 |
26 |

27 | 30 |

31 |

32 | <%= link_to 'I forgot my password', '/reset-password.html' %> 33 |

34 |
35 |
36 | <%= link_to 'Create an account', '/sign-up.html', 37 | class:'btn-primary-light is-wide' %> 38 |
39 |
40 |
41 | -------------------------------------------------------------------------------- /source/sign-up.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sign up 3 | layout: primary 4 | versions: error 5 | body: sign-in 6 | --- 7 | 8 |
9 |
10 |
11 |

Sign up

12 |

Log in to your account

13 |
14 |
15 |
16 | 19 |
20 |
21 | 24 |
25 |
26 | 28 |
Password must be at least eight characters
29 |
30 |
31 | 33 | 36 | <% if version('error') %> 37 |
You have to accept the terms and conditions
38 | <% end %> 39 |
40 | 43 |
44 |
45 | <%= link_to 'Sign in', '/sign-in.html', class:'btn-primary-light is-wide' %> 46 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /source/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | $fa-font-path: '~font-awesome/fonts'; 2 | 3 | @import "~font-awesome/scss/font-awesome"; 4 | @import 'utilities/variables'; 5 | 6 | @import 'utilities/mixins'; 7 | @import 'utilities/helpers'; 8 | @import 'utilities/keyframes'; 9 | @import 'utilities/normalize'; 10 | 11 | @import 'base/grid'; 12 | @import 'base/fonts'; 13 | @import 'base/buttons'; 14 | @import 'base/forms'; 15 | @import 'base/forms__checkbox'; 16 | @import 'base/forms__radio'; 17 | @import 'base/forms__input-file'; 18 | @import 'base/tables'; 19 | @import 'base/icons'; 20 | @import 'base/general'; 21 | 22 | @import 'plugins/tippy'; 23 | 24 | @import 'blocks/actions'; 25 | @import 'blocks/alert'; 26 | @import 'blocks/badge'; 27 | @import 'blocks/box'; 28 | @import 'blocks/card-css'; 29 | @import 'blocks/dropdown'; 30 | @import 'blocks/footer'; 31 | @import 'blocks/header'; 32 | @import 'blocks/hero'; 33 | @import 'blocks/main-content'; 34 | @import 'blocks/modals'; 35 | @import 'blocks/nav-inline'; 36 | @import 'blocks/nav-pills'; 37 | @import 'blocks/nav-responsive'; 38 | @import 'blocks/pagination'; 39 | @import 'blocks/pills'; 40 | @import 'blocks/popover'; 41 | @import 'blocks/progress-bar'; 42 | @import 'blocks/select2'; 43 | @import 'blocks/separator'; 44 | @import 'blocks/user-info'; 45 | @import 'blocks/tooltip'; 46 | 47 | @import 'layouts/home'; 48 | @import 'layouts/primary'; 49 | @import 'layouts/toolkit'; 50 | -------------------------------------------------------------------------------- /source/stylesheets/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | $btn-line-height: $components-line-height; 2 | $btn-components-padding: $components-padding; 3 | 4 | %btn { 5 | display: inline-block; 6 | vertical-align: middle; 7 | margin-bottom: 0; // For input.btn 8 | font-weight: normal; 9 | text-align: center; 10 | touch-action: manipulation; 11 | cursor: pointer; 12 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 13 | border: 1px solid transparent; 14 | user-select: none; 15 | max-width: 100%; 16 | transition: all .2s ease-out; 17 | 18 | &.is-block{ 19 | width: 100%; 20 | min-width: auto; 21 | margin-bottom: 1em; 22 | } 23 | 24 | &.is-wide{ 25 | min-width: 12em; 26 | } 27 | } 28 | 29 | @mixin button-color($color, $bg, $border: transparent, $color--active: $color, 30 | $bg--active: darken($bg, 15%), $border--active: $border) { 31 | color: $color; 32 | background-color: $bg; 33 | border-color: $border; 34 | 35 | &:hover { 36 | color: $color--active; 37 | background-color: $bg--active; 38 | border-color: $border--active; 39 | outline: 0; 40 | text-decoration: none; 41 | } 42 | 43 | &:focus { 44 | @include focus($bg, .8); 45 | text-decoration: none; 46 | } 47 | 48 | &.disabled, 49 | &[disabled], 50 | fieldset[disabled] & { 51 | cursor: not-allowed; 52 | pointer-events: none; // Future-proof disabling of clicks 53 | opacity: .65; 54 | box-shadow: none; 55 | } 56 | } 57 | 58 | @mixin button-size($padding, $font-size, 59 | $line-height, $border-radius) { 60 | padding: $padding; 61 | font-size: $font-size; 62 | line-height: $line-height; 63 | border-radius: $border-radius; 64 | } 65 | 66 | button{ 67 | color: inherit; 68 | border: 0; 69 | background-color: transparent; 70 | padding: 0; 71 | margin: 0; 72 | appearance: none; 73 | &:hover, 74 | &:focus, 75 | &:active{ 76 | outline: 0; 77 | text-decoration: none; 78 | } 79 | } 80 | 81 | .btn{ 82 | @extend %btn; 83 | &:hover, 84 | &.active, 85 | &:focus{ 86 | text-decoration: none; 87 | } 88 | } 89 | 90 | .btn-primary{ 91 | @extend %btn; 92 | @include button-color(white,$primary); 93 | @include button-size($btn-components-padding, inherit, $btn-line-height, 3px); 94 | } 95 | 96 | .btn-primary-light{ 97 | @extend %btn; 98 | @include button-color($primary,$primary-lighter, transparent, 99 | $primary, lighten($primary, 30%), $primary); 100 | @include button-size($btn-components-padding, inherit, $btn-line-height, 3px); 101 | } 102 | 103 | .btn-secondary{ 104 | @extend %btn; 105 | @include button-color(white, $secondary-light); 106 | @include button-size($btn-components-padding, inherit, $btn-line-height, 3px); 107 | } 108 | 109 | .btn-secondary-light{ 110 | @extend %btn; 111 | @include button-color($secondary-light, $secondary-lighter, transparent, 112 | $secondary-light, lighten($secondary-light, 45%), $secondary-light); 113 | @include button-size($btn-components-padding, inherit, $btn-line-height, 3px); 114 | } 115 | 116 | .btn-icon{ 117 | @extend %btn; 118 | @include button-size($btn-components-padding, 1em, 2.2em, 50%); 119 | color: $font-color; 120 | border: 1px solid $border-color; 121 | width: 2.3em; 122 | height: 2.3em; 123 | opacity: .7; 124 | transform: scale(1); 125 | transition: all .2s ease-out; 126 | position: relative; 127 | 128 | //fix position icon 129 | &::before { 130 | position: absolute; 131 | top: 50%; 132 | left: 50%; 133 | transform: translate(-50%, -50%); 134 | } 135 | 136 | &:hover{ 137 | transform: scale(1.1); 138 | text-decoration: none; 139 | opacity: 1; 140 | } 141 | } 142 | 143 | .btn-collapse{ 144 | $size: 30px; 145 | $color: $secondary-light; 146 | 147 | color: $color; 148 | width: $size + 10px; 149 | height: $size; 150 | cursor: pointer; 151 | outline: 0; 152 | overflow: hidden; 153 | transition: transform ease-in-out 250ms; 154 | top: 20px; 155 | 156 | @media screen and (min-width: $grid-breakpoint){ 157 | display: none; 158 | } 159 | 160 | &.active{ 161 | span{ 162 | border-color: transparent; 163 | transform: translateY(-4px) translateX(-8px); 164 | 165 | &::before{ 166 | transform: rotate(405deg) translateY(-1px) translateX(1px); 167 | } 168 | &::after{ 169 | transform: rotate(315deg) translateY(12px) translateX(-13px); 170 | } 171 | } 172 | } 173 | 174 | span{ 175 | display: block; 176 | width: 25px; 177 | position: relative; 178 | top: 3px; 179 | left: 50%; 180 | border-top: 3px solid; 181 | text-indent: 99999px; 182 | overflow: hidden; 183 | white-space: nowrap; 184 | transition: transform ease-in-out 250ms,border ease-in-out 250ms; 185 | transform: translateX(-50%); 186 | 187 | &::before, 188 | &::after{ 189 | position: absolute; 190 | content: ""; 191 | display: block; 192 | height: 3px; 193 | width: 25px; 194 | background: $color; 195 | transform-origin: 0 0; 196 | top: 0; 197 | transition: transform ease-in-out 450ms; 198 | transform: translateY(5px); 199 | } 200 | &:after{ 201 | transform: translateY(13px); 202 | } 203 | } 204 | } 205 | 206 | -------------------------------------------------------------------------------- /source/stylesheets/base/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700'); 2 | 3 | $font-family-base: 'Karla', sans-serif; 4 | $line-height-base: 1.5; 5 | $fs-base: 1.6rem; 6 | $fs-large: 2rem; 7 | $fs-small: 1.3rem; 8 | $fs-h1: 2.5rem; 9 | $fs-h2: $fs-large; 10 | $fs-h3: $fs-base; 11 | $fs-h4: $fs-base; 12 | $fs-h5: $fs-base; 13 | $fs-h6: $fs-small; 14 | 15 | html { 16 | font-size: 62.5%; /* Now 10px = 1rem! */ 17 | font-smoothing: antialiased; 18 | text-shadow: rgba(0,0,0,.01) 0 0 1px; 19 | } 20 | 21 | body { 22 | font-family: $font-family-base; 23 | font-size: $fs-base; 24 | color: $font-color; 25 | line-height: $line-height-base; 26 | } 27 | 28 | @mixin content-blocks{ 29 | & + p, & + ul, & + ol, & + blockquote, & + .content-block{ 30 | @content; 31 | } 32 | } 33 | 34 | p,ul,ol,blockquote,.content-block{ 35 | margin-top: 0; 36 | margin-bottom: 1.8em; 37 | @include content-blocks{ 38 | margin-top: -.8em; 39 | } 40 | 41 | } 42 | 43 | ul{ 44 | padding-left: 1.1em; 45 | } 46 | 47 | li{ 48 | margin-bottom: .25em; 49 | } 50 | 51 | blockquote { 52 | border-left: 4px solid $primary; 53 | padding-left: 1em; 54 | font-size: $fs-h3; 55 | font-weight: bold; 56 | margin-left: 0; 57 | margin-right: 0; 58 | margin-top: 0; 59 | max-width: 600px 60 | } 61 | 62 | h1,.h1{ 63 | font-size: $fs-h1; 64 | margin-top: 0; 65 | margin-bottom: 1rem; 66 | } 67 | 68 | h2,.h2{ 69 | font-size: $fs-h2; 70 | margin-top: 0; 71 | margin-bottom: 1rem; 72 | } 73 | 74 | h3,.h3{ 75 | font-size: $fs-h3; 76 | margin-top: 0; 77 | margin-bottom: 1rem 78 | } 79 | 80 | h4,.h4{ 81 | font-size: $fs-h3; 82 | margin-top: 0; 83 | margin-bottom: 1rem 84 | } 85 | 86 | h5,.h5{ 87 | font-size: $fs-h3; 88 | margin-top: 0; 89 | margin-bottom: 1rem 90 | } 91 | 92 | h6,.h6{ 93 | font-size: $fs-h3; 94 | margin-top: 0; 95 | margin-bottom: 1rem 96 | } 97 | 98 | //extend sizes 99 | .s1{font-size: $fs-h1;} 100 | .s2{font-size: $fs-h2;} 101 | .s3{font-size: $fs-h3;} 102 | .s4{font-size: $fs-h4;} 103 | .s5{font-size: $fs-h5;} 104 | .s5{font-size: $fs-h6;} 105 | .large{font-size: $fs-large;} 106 | .small{font-size: $fs-small;} 107 | 108 | hgroup{ 109 | @include last-margin; 110 | h1,.s1{ 111 | margin-bottom: .2em; 112 | + *{ 113 | font-weight: normal; 114 | } 115 | } 116 | } -------------------------------------------------------------------------------- /source/stylesheets/base/_forms.scss: -------------------------------------------------------------------------------- 1 | $input-disabled: .3; 2 | $input-border: 1px solid $border-color; 3 | $input-border-readonly: 1px solid #f8f8fa; 4 | $input-border-radius: $border-radius; 5 | $input-padding: .4em 1em; 6 | $input-margin: .5em; 7 | $input-placeholder: $font-color-light; 8 | $input-success: $success; 9 | $input-warning: $warning; 10 | $input-line-height: $components-line-height; 11 | $info-field-fs: $fs-small; 12 | 13 | form { 14 | @include last-margin; 15 | } 16 | 17 | .form-inline { 18 | @extend .columns; 19 | margin-bottom: 1.5em; 20 | 21 | > * { 22 | @media (min-width: $screen-sm) { 23 | margin-bottom: 0; 24 | } 25 | } 26 | 27 | &__title { 28 | @media (min-width: $screen-md) { 29 | width: 50%; 30 | } 31 | @media (min-width: $screen-sm) { 32 | text-align: right; 33 | padding-top: .5em; 34 | } 35 | } 36 | } 37 | 38 | .form-group { 39 | margin-bottom: 1.2em; 40 | @include last-margin; 41 | 42 | &__item { 43 | @include margin-bottom(.5em); 44 | } 45 | 46 | &.warning { 47 | .info-field { 48 | color: $input-warning; 49 | } 50 | } 51 | 52 | &.success { 53 | .info-field { 54 | color: $input-success; 55 | } 56 | } 57 | } 58 | 59 | %input-bg { 60 | background-repeat: no-repeat; 61 | background-size: 1em; 62 | background-position: calc(100% - .5em) center; 63 | padding-right: 2em; 64 | } 65 | 66 | %form-item { 67 | appearance: none; 68 | width: 100%; 69 | max-width: 100%; 70 | display: block; 71 | color: $font-color; 72 | border: $input-border; 73 | border-radius: $input-border-radius; 74 | padding: $input-padding; 75 | transition: background .2s ease-out, border .2s ease-out; 76 | background-image: none; 77 | background-color: white; 78 | margin-bottom: $input-margin; 79 | line-height: $input-line-height; 80 | 81 | &:last-child { 82 | margin-bottom: 0; 83 | } 84 | 85 | &:focus { 86 | @include focus; 87 | } 88 | 89 | &::placeholder { 90 | color: $input-placeholder; 91 | opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 92 | } 93 | 94 | &.inline { 95 | display: inline-block; 96 | width: auto; 97 | & + & { 98 | margin-left: $gutter/2; 99 | } 100 | } 101 | 102 | &:required, 103 | &.required { 104 | @extend %input-bg; 105 | background-image: image-url("icon-required.svg"); 106 | } 107 | 108 | &.success, 109 | .form-group.success & { 110 | @extend %input-bg; 111 | animation: escale10 .5s ease-out; 112 | border: 1px solid $input-success; 113 | background-image: image-url("icon-success.svg"); 114 | 115 | &:focus { 116 | @include focus(rgba($input-success, .4)); 117 | } 118 | } 119 | 120 | &.warning + .info-field { 121 | color: $input-success 122 | } 123 | 124 | &.warning, 125 | .form-group.warning & { 126 | @extend %input-bg; 127 | animation: escale10 .5s ease-out; 128 | border: 1px solid $input-warning; 129 | background-image: image-url("icon-warning.svg"); 130 | 131 | &:focus { 132 | @include focus(rgba($input-warning, .4)); 133 | } 134 | } 135 | 136 | &.warning + .info-field { 137 | color: $input-warning 138 | } 139 | } 140 | 141 | label { 142 | display: block; 143 | max-width: 100%; 144 | line-height: 1.5em; 145 | margin-bottom: $input-margin; 146 | 147 | &.required::after { 148 | content: "*"; 149 | margin-left: .25em; 150 | } 151 | } 152 | 153 | .info-field { 154 | width: 100%; 155 | display: block; 156 | font-size: $info-field-fs; 157 | margin-bottom: $input-margin; 158 | } 159 | 160 | input[disabled] { 161 | opacity: $input-disabled; 162 | pointer-events: none; 163 | 164 | + label { 165 | pointer-events: none; 166 | opacity: $input-disabled; 167 | } 168 | } 169 | 170 | input[readonly] { 171 | border: $input-border-readonly; 172 | pointer-events: none; 173 | 174 | + label { 175 | pointer-events: none; 176 | } 177 | } 178 | 179 | input:not([type="submit"]) { 180 | @extend %form-item; 181 | 182 | &.search { 183 | @extend %input-bg; 184 | background-color: $secondary-lighter; 185 | transition: all .2s ease-out; 186 | background-image: image-url("icon-search.svg"); 187 | margin-bottom: 0; 188 | 189 | &:focus { 190 | background-color: white; 191 | } 192 | } 193 | } 194 | 195 | select { 196 | @extend %form-item; 197 | background-repeat: no-repeat; 198 | background-size: 1em; 199 | background-position: calc(100% - .7em) center; 200 | padding-right: 2em; 201 | background-image: image-url("icon-caret-down.svg") !important; 202 | 203 | &::-ms-expand { 204 | display: none; 205 | } 206 | } 207 | 208 | textarea { 209 | @extend %form-item; 210 | 211 | &[maxlength] { 212 | padding-bottom: 1.5em; 213 | resize: none; 214 | } 215 | } 216 | 217 | .character-counter { 218 | position: absolute; 219 | transform: translate(-100%, -100%); 220 | display: inline-block; 221 | pointer-events: none; 222 | padding: .5em; 223 | 224 | &.success { 225 | color: $input-success; 226 | } 227 | &.warning { 228 | color: $input-warning; 229 | } 230 | } 231 | 232 | .g-recaptcha { 233 | margin-top: .2em; 234 | margin-bottom: .8em; 235 | } 236 | -------------------------------------------------------------------------------- /source/stylesheets/base/_forms__checkbox.scss: -------------------------------------------------------------------------------- 1 | //font awesome dependence 2 | $checkbox--scale: 0.9; 3 | $checkbox--size: 1.35em; 4 | $checkbox__icon: "\f096"; 5 | $checkbox__icon--hover: "\f046"; 6 | $checkbox__icon--checked: "\f14a"; 7 | $checkbox--warning: $warning; 8 | $checkbox--success: $success; 9 | 10 | input[type="checkbox"]{ 11 | @extend .sr-only; 12 | 13 | + label { 14 | display: inline-block; 15 | cursor: pointer; 16 | user-select: none; 17 | padding-right: .5em; 18 | 19 | &:last-child { 20 | padding-right: 0; 21 | } 22 | 23 | &.required::after{ 24 | content: ''; 25 | } 26 | 27 | &.warning{ 28 | color: $checkbox--warning; 29 | } 30 | 31 | &.success{ 32 | color: $checkbox--success; 33 | } 34 | 35 | &::before { 36 | @extend .fa; 37 | content: $checkbox__icon; 38 | display: inline-block; 39 | margin-right: .3em; 40 | vertical-align: middle; 41 | width: 1em; 42 | height: 1em; 43 | font-size: $checkbox--size; 44 | transition: all 0.3s ease-out; 45 | transform: scale(1); 46 | } 47 | 48 | &:hover::before { 49 | transform: scale($checkbox--scale); 50 | } 51 | } 52 | 53 | &:focus{ 54 | + label::before { 55 | transform: scale($checkbox--scale); 56 | } 57 | } 58 | 59 | &:checked{ 60 | + label::before { 61 | content: $checkbox__icon--checked; 62 | border: 0; 63 | transform: scale(1); 64 | } 65 | } 66 | 67 | &.warning, 68 | .form-group.warning & { 69 | & + label{ 70 | color: $checkbox--warning; 71 | 72 | & + .info-field{ 73 | color: $checkbox--warning; 74 | } 75 | } 76 | } 77 | 78 | &.warning + label + .info-field { 79 | color: $checkbox--warning; 80 | } 81 | 82 | &.success, 83 | .form-group.success & { 84 | + label { 85 | color: $checkbox--success; 86 | 87 | & + .info-field { 88 | color: $checkbox--success; 89 | } 90 | } 91 | } 92 | 93 | &.success + label + .info-field { 94 | color: $checkbox--success; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /source/stylesheets/base/_forms__input-file.scss: -------------------------------------------------------------------------------- 1 | .input-file { 2 | $icon-color: $font-color; 3 | 4 | width: 0.1px; 5 | height: 0.1px; 6 | opacity: 0; 7 | overflow: hidden; 8 | position: absolute; 9 | z-index: -1; 10 | 11 | &:focus + label, 12 | & + label:hover{ 13 | @include focus; 14 | } 15 | 16 | & + label{ 17 | @extend %form-item; 18 | @include ellipsis; 19 | color: $input-placeholder; 20 | 21 | &.active{ 22 | color: $icon-color; 23 | } 24 | 25 | &::before { 26 | @extend %icon; 27 | content: $fa-var-paperclip; 28 | color: $icon-color; 29 | font-size: 1.5em; 30 | margin-right: .25em; 31 | vertical-align: baseline; 32 | display: inline-block; 33 | } 34 | 35 | * { 36 | pointer-events: none; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /source/stylesheets/base/_forms__radio.scss: -------------------------------------------------------------------------------- 1 | $radio-scale: 0.9; 2 | $radio-size: 1.2em; 3 | $radio-padding: 2px; 4 | $radio-dot-color: $font-color; 5 | $radio-warning: $warning; 6 | $radio-success: $success; 7 | 8 | input[type="radio"] { 9 | @extend .sr-only; 10 | 11 | + label { 12 | display: inline-block; 13 | padding-right: .5em; 14 | cursor: pointer; 15 | user-select: none; 16 | 17 | &[data-radio-input]::before { 18 | margin-right: 0; 19 | } 20 | 21 | &.required::after{ 22 | content: ''; 23 | } 24 | 25 | &::before { 26 | content: ''; 27 | display: inline-block; 28 | padding: $radio-padding; 29 | width: $radio-size; 30 | height: $radio-size; 31 | margin-right: .5em; 32 | vertical-align: middle; 33 | border: 1px solid; 34 | border-radius: 50%; 35 | transition: all 0.3s ease-out, border-width 0.1s ease-in-out; 36 | transform: scale(1); 37 | background-color: transparent; 38 | background-clip: content-box; 39 | box-sizing: border-box; 40 | position: relative; 41 | top: -0.1em 42 | } 43 | 44 | &:hover::before { 45 | border-width: 2px; 46 | transform: scale($radio-scale); 47 | } 48 | } 49 | 50 | &:focus { 51 | + label::before { 52 | border-width: 2px; 53 | transform: scale($radio-scale); 54 | } 55 | } 56 | 57 | &:checked { 58 | + label::before { 59 | transform: scale(1); 60 | border-width: 2px; 61 | background-color: $radio-dot-color; 62 | } 63 | } 64 | 65 | &.success, 66 | .form-group.success & { 67 | &:checked + label::before { 68 | background-color: $radio-success; 69 | } 70 | 71 | + label{ 72 | color: $radio-success; 73 | 74 | &::before { 75 | background-color: $radio-success; 76 | } 77 | 78 | & + .info-field{ 79 | color: $radio-success; 80 | } 81 | } 82 | 83 | &.success + label + .info-field { 84 | color: $radio-success; 85 | } 86 | } 87 | 88 | &.warning, 89 | .form-group.warning & { 90 | &:checked + label::before { 91 | background-color: $radio-warning; 92 | } 93 | 94 | + label{ 95 | color: $radio-warning; 96 | } 97 | } 98 | 99 | &.warning + label + .info-field { 100 | color: $radio-warning; 101 | } 102 | } 103 | 104 | .radio-input{ 105 | border: 0 !important; 106 | background-image: none !important; 107 | width: auto; 108 | display: inline-block; 109 | padding: .2em !important; 110 | width: 4em; 111 | margin-bottom: 0; 112 | margin-left: -.5em; 113 | line-height: 1; 114 | } 115 | -------------------------------------------------------------------------------- /source/stylesheets/base/_general.scss: -------------------------------------------------------------------------------- 1 | * { box-sizing: border-box; } 2 | 3 | html{ 4 | height: 100%; 5 | } 6 | 7 | body { 8 | background-color: $background-primary; 9 | min-width: 320px; 10 | height: 100%; 11 | overflow-x: hidden; 12 | transition: transform .5s ease-out; 13 | 14 | @media (min-width: $grid-breakpoint){ 15 | padding-left: 0; 16 | padding-right: 0; 17 | } 18 | 19 | &.open-menu{ 20 | @media (max-width: $grid-breakpoint - 1){ 21 | transform: translateX($nav-responsive-width); 22 | } 23 | } 24 | } 25 | 26 | .wrapper{ 27 | position: relative; 28 | padding-left: 0; 29 | top: $header-height-breakpoint; 30 | height: calc(100% - #{$header-height-breakpoint}); 31 | -webkit-overflow-scrolling: touch; 32 | overflow-y: auto; 33 | 34 | @media (min-width: $grid-breakpoint){ 35 | height: auto; 36 | top: initial; 37 | } 38 | } 39 | 40 | ::selection { background: lighten($secondary,70%); } 41 | 42 | a, 43 | .link{ 44 | text-decoration: none; 45 | color: $primary; 46 | &:hover, 47 | &.active, 48 | &:focus{ 49 | outline: 0; 50 | text-decoration: underline; 51 | } 52 | } 53 | 54 | .fa{ 55 | text-decoration: none; 56 | display: inline-block; 57 | &:hover, 58 | &.active, 59 | &:focus{ 60 | outline: 0; 61 | text-decoration: none; 62 | } 63 | } 64 | 65 | img{ 66 | max-width: 100%; 67 | height: auto; 68 | } 69 | 70 | .shape{ 71 | width: 100%; 72 | max-height: 100%; 73 | } 74 | 75 | .list-tabulated { 76 | display: table; 77 | width: 100%; 78 | 79 | &__row{ 80 | display: table-row; 81 | 82 | > * { 83 | display: table-cell; 84 | padding: .75em 0; 85 | border-bottom: 1px solid $secondary-lighter; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /source/stylesheets/base/_grid.scss: -------------------------------------------------------------------------------- 1 | //grid bootstrap based 2 | $grid-gutter-width: $gutter; 3 | $grid-columns: 12; 4 | 5 | $breakpoints: 'xxs','xs','sm','md','lg'; 6 | $screen-xs: 460px; 7 | $screen-sm: 768px; 8 | $screen-md: 992px; 9 | $screen-lg: 1140px; 10 | 11 | $container-xs: 460px; 12 | $container-sm: 768px; 13 | $container-md: 990px; 14 | $container-lg: 1240px; 15 | 16 | $screens: "xxs" false, 17 | "xs" $screen-xs, 18 | "sm" $screen-sm, 19 | "md" $screen-md, 20 | "lg" $screen-lg; 21 | 22 | $grid-breakpoint: $screen-md; 23 | 24 | @mixin clearfix() { 25 | &:before, 26 | &:after { 27 | content: " "; 28 | display: table; 29 | } 30 | &:after { 31 | clear: both; 32 | } 33 | } 34 | 35 | @mixin container-fixed($gutter: $grid-gutter-width) { 36 | width: 100%; 37 | margin-right: auto; 38 | margin-left: auto; 39 | padding-left: $gutter; 40 | padding-right: $gutter; 41 | @include clearfix; 42 | } 43 | 44 | @mixin make-row($gutter: $grid-gutter-width) { 45 | margin-left: ($gutter / -2); 46 | margin-right: ($gutter / -2); 47 | @include clearfix; 48 | } 49 | 50 | @mixin make-column($columns, $gutter: $grid-gutter-width) { 51 | position: relative; 52 | float: left; 53 | width: percentage(($columns / $grid-columns)); 54 | min-height: 1px; 55 | padding-left: ($gutter / 2); 56 | padding-right: ($gutter / 2); 57 | @include last-margin; 58 | } 59 | 60 | @mixin make-clear($columns, $clean: 0 ){ 61 | &:nth-child(#{$columns}n + 1){ 62 | clear: both; 63 | } 64 | @if $clean != 0{ 65 | &:nth-child(#{$clean}n + 1) { 66 | clear: none; 67 | } 68 | } 69 | } 70 | 71 | @mixin make-xs-clear($columns, $clean: 0){ 72 | @include make-clear($columns, $clean); 73 | } 74 | 75 | @mixin make-xxs-column($columns, $gutter: $grid-gutter-width) { 76 | @include make-column ($columns, $gutter); 77 | } 78 | 79 | @mixin make-xxs-column-offset($columns) { 80 | margin-left: percentage(($columns / $grid-columns)); 81 | } 82 | 83 | @mixin make-xxs-column-push($columns) { 84 | left: percentage(($columns / $grid-columns)); 85 | } 86 | 87 | @mixin make-xxs-column-pull($columns) { 88 | right: percentage(($columns / $grid-columns)); 89 | } 90 | 91 | @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { 92 | position: relative; 93 | min-height: 1px; 94 | padding-left: ($gutter / 2); 95 | padding-right: ($gutter / 2); 96 | 97 | @media (min-width: $screen-xs) { 98 | float: left; 99 | width: percentage(($columns / $grid-columns)); 100 | @include last-margin; 101 | } 102 | } 103 | 104 | @mixin make-xs-clear($columns, $clean: 0){ 105 | @media (min-width: $screen-xs) { 106 | @include make-clear($columns, $clean); 107 | } 108 | } 109 | 110 | @mixin make-xs-column-offset($columns) { 111 | @media (min-width: $screen-xs) { 112 | margin-left: percentage(($columns / $grid-columns)); 113 | } 114 | } 115 | 116 | @mixin make-xs-column-push($columns) { 117 | @media (min-width: $screen-xs) { 118 | left: percentage(($columns / $grid-columns)); 119 | } 120 | } 121 | 122 | @mixin make-xs-column-pull($columns) { 123 | @media (min-width: $screen-xs) { 124 | right: percentage(($columns / $grid-columns)); 125 | } 126 | } 127 | 128 | @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { 129 | position: relative; 130 | min-height: 1px; 131 | padding-left: ($gutter / 2); 132 | padding-right: ($gutter / 2); 133 | 134 | @media (min-width: $screen-sm) { 135 | float: left; 136 | width: percentage(($columns / $grid-columns)); 137 | @include last-margin; 138 | } 139 | } 140 | 141 | @mixin make-sm-clear($columns, $clean: 0){ 142 | @media (min-width: $screen-sm) { 143 | @include make-clear($columns, $clean); 144 | } 145 | } 146 | 147 | @mixin make-sm-column-offset($columns) { 148 | @media (min-width: $screen-sm) { 149 | margin-left: percentage(($columns / $grid-columns)); 150 | } 151 | } 152 | 153 | @mixin make-sm-column-push($columns) { 154 | @media (min-width: $screen-sm) { 155 | left: percentage(($columns / $grid-columns)); 156 | } 157 | } 158 | 159 | @mixin make-sm-column-pull($columns) { 160 | @media (min-width: $screen-sm) { 161 | right: percentage(($columns / $grid-columns)); 162 | } 163 | } 164 | 165 | @mixin make-md-column($columns, $gutter: $grid-gutter-width) { 166 | position: relative; 167 | min-height: 1px; 168 | padding-left: ($gutter / 2); 169 | padding-right: ($gutter / 2); 170 | 171 | @media (min-width: $screen-md) { 172 | float: left; 173 | width: percentage(($columns / $grid-columns)); 174 | @include last-margin; 175 | } 176 | } 177 | 178 | @mixin make-md-clear($columns, $clean: 0){ 179 | @media (min-width: $screen-md) { 180 | @include make-clear($columns, $clean); 181 | } 182 | } 183 | 184 | @mixin make-md-column-offset($columns) { 185 | @media (min-width: $screen-md) { 186 | margin-left: percentage(($columns / $grid-columns)); 187 | } 188 | } 189 | 190 | @mixin make-md-column-push($columns) { 191 | @media (min-width: $screen-md) { 192 | left: percentage(($columns / $grid-columns)); 193 | } 194 | } 195 | 196 | @mixin make-md-column-pull($columns) { 197 | @media (min-width: $screen-md) { 198 | right: percentage(($columns / $grid-columns)); 199 | } 200 | } 201 | 202 | @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { 203 | position: relative; 204 | min-height: 1px; 205 | padding-left: ($gutter / 2); 206 | padding-right: ($gutter / 2); 207 | 208 | @media (min-width: $screen-lg) { 209 | float: left; 210 | width: percentage(($columns / $grid-columns)); 211 | @include last-margin; 212 | } 213 | } 214 | 215 | @mixin make-lg-clear($columns, $clean: 0){ 216 | @media (min-width: $screen-lg) { 217 | @include make-clear($columns, $clean); 218 | } 219 | } 220 | 221 | @mixin make-lg-column-offset($columns) { 222 | @media (min-width: $screen-lg) { 223 | margin-left: percentage(($columns / $grid-columns)); 224 | } 225 | } 226 | 227 | @mixin make-lg-column-push($columns) { 228 | @media (min-width: $screen-lg) { 229 | left: percentage(($columns / $grid-columns)); 230 | } 231 | } 232 | 233 | @mixin make-lg-column-pull($columns) { 234 | @media (min-width: $screen-lg) { 235 | right: percentage(($columns / $grid-columns)); 236 | } 237 | } 238 | 239 | @mixin make-grid-columns { 240 | %make-grid-column{ 241 | position: relative; 242 | // Prevent columns from collapsing when empty 243 | min-height: 1px; 244 | // Inner gutter via padding 245 | padding-left: ($grid-gutter-width / 2); 246 | padding-right: ($grid-gutter-width / 2); 247 | } 248 | 249 | @each $bp in $breakpoints { 250 | @for $i from 1 through $grid-columns { 251 | .col-#{$bp}-#{$i}{ 252 | @extend %make-grid-column; 253 | } 254 | } 255 | } 256 | } 257 | 258 | // [converter] This is defined recursively in LESS, but Sass supports real loops 259 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 260 | @for $i from (1 + 1) through $grid-columns { 261 | $list: "#{$list}, .col-#{$class}-#{$i}"; 262 | } 263 | #{$list} { 264 | float: left; 265 | @include last-margin; 266 | } 267 | } 268 | 269 | @mixin calc-grid-column($index, $class, $type) { 270 | @if ($type == width) and ($index > 0) { 271 | .col-#{$class}-#{$index} { 272 | width: percentage(($index / $grid-columns)); 273 | } 274 | } 275 | @if ($type == push) and ($index > 0) { 276 | .col-#{$class}-push-#{$index} { 277 | left: percentage(($index / $grid-columns)); 278 | } 279 | } 280 | @if ($type == push) and ($index == 0) { 281 | .col-#{$class}-push-0 { 282 | left: auto; 283 | } 284 | } 285 | @if ($type == pull) and ($index > 0) { 286 | .col-#{$class}-pull-#{$index} { 287 | right: percentage(($index / $grid-columns)); 288 | } 289 | } 290 | @if ($type == pull) and ($index == 0) { 291 | .col-#{$class}-pull-0 { 292 | right: auto; 293 | } 294 | } 295 | @if ($type == offset) { 296 | .col-#{$class}-offset-#{$index} { 297 | margin-left: percentage(($index / $grid-columns)); 298 | } 299 | } 300 | } 301 | 302 | @mixin loop-grid-columns($columns, $class, $type) { 303 | @for $i from 0 through $columns { 304 | @include calc-grid-column($i, $class, $type); 305 | } 306 | } 307 | 308 | @mixin make-grid($class) { 309 | @include float-grid-columns($class); 310 | @include loop-grid-columns($grid-columns, $class, width); 311 | @include loop-grid-columns($grid-columns, $class, pull); 312 | @include loop-grid-columns($grid-columns, $class, push); 313 | @include loop-grid-columns($grid-columns, $class, offset); 314 | } 315 | 316 | .container { 317 | @include container-fixed; 318 | max-width: 100%; 319 | 320 | @media (min-width: $screen-xs) { 321 | max-width: $container-sm; 322 | } 323 | @media (min-width: $screen-sm) { 324 | max-width: $container-md; 325 | } 326 | @media (min-width: $screen-md) { 327 | max-width: $container-lg; 328 | } 329 | @media (min-width: $screen-lg) { 330 | max-width: $container-lg; 331 | } 332 | } 333 | 334 | .container-xs { 335 | @include container-fixed; 336 | max-width: $container-xs; 337 | } 338 | .container-sm { 339 | @include container-fixed; 340 | max-width: $container-sm; 341 | } 342 | .container-md { 343 | @include container-fixed; 344 | max-width: $container-md; 345 | } 346 | .container-lg { 347 | @include container-fixed; 348 | max-width: $container-lg; 349 | } 350 | 351 | .container-fluid { 352 | @include container-fixed; 353 | } 354 | 355 | // Row 356 | .row { 357 | @include make-row; 358 | } 359 | 360 | // Columns 361 | @include make-grid-columns; 362 | 363 | // Extra Extra small grid 364 | @include make-grid(xxs); 365 | 366 | // Extra small grid 367 | @media (min-width: $screen-xs) { 368 | @include make-grid(xs); 369 | } 370 | 371 | // Small grid 372 | @media (min-width: $screen-sm) { 373 | @include make-grid(sm); 374 | } 375 | 376 | // Medium grid 377 | @media (min-width: $screen-md) { 378 | @include make-grid(md); 379 | } 380 | 381 | // Large grid 382 | @media (min-width: $screen-lg) { 383 | @include make-grid(lg); 384 | } 385 | 386 | .columns { 387 | display: table; 388 | table-layout: fixed; 389 | width: 100%; 390 | 391 | & > * { 392 | display: table-cell; 393 | vertical-align: top; 394 | padding-right: $gutter/2; 395 | padding-left: $gutter/2; 396 | &:first-child { 397 | padding-left: 0 398 | } 399 | &:last-child { 400 | padding-right: 0; 401 | } 402 | } 403 | } 404 | 405 | .clear{ 406 | clear: both; 407 | } 408 | 409 | .clearfix{ 410 | @include clearfix; 411 | } 412 | 413 | @media (max-width: $screen-xs - 1){ 414 | .is-hidden-xxs{ 415 | display: none !important; 416 | } 417 | [class*=is-visible]:not(.is-visible-xxs){ 418 | display: none !important; 419 | } 420 | } 421 | 422 | @media (min-width: $screen-xs) and (max-width: $screen-sm - 1){ 423 | .is-hidden-xs{ 424 | display: none !important; 425 | } 426 | [class*=is-visible]:not(.is-visible-xs){ 427 | display: none !important; 428 | } 429 | } 430 | 431 | @media (min-width: $screen-sm) and (max-width: $screen-md - 1){ 432 | .is-hidden-sm{ 433 | display: none !important; 434 | } 435 | [class*=is-visible]:not(.is-visible-sm){ 436 | display: none !important; 437 | } 438 | } 439 | 440 | @media (min-width: $screen-md) and (max-width: $screen-lg - 1){ 441 | .is-hidden-md{ 442 | display: none !important; 443 | } 444 | [class*=is-visible]:not(.is-visible-md){ 445 | display: none !important; 446 | } 447 | } 448 | 449 | @media (min-width: $screen-lg) { 450 | .is-hidden-lg{ 451 | display: none !important; 452 | } 453 | [class*=is-visible]:not(.is-visible-lg){ 454 | display: none !important; 455 | } 456 | } 457 | -------------------------------------------------------------------------------- /source/stylesheets/base/_icons.scss: -------------------------------------------------------------------------------- 1 | %icon { 2 | @include fa-icon; 3 | text-decoration: none; 4 | vertical-align: middle; 5 | 6 | &:hover{ 7 | text-decoration: none; 8 | } 9 | } 10 | 11 | .icon-loader { 12 | animation-duration: .75s; 13 | color: inherit; 14 | @extend %icon; 15 | @extend .fa-spin; 16 | @extend .fa-spinner; 17 | } 18 | 19 | .icon-edit { 20 | @extend %icon; 21 | @extend .fa-pencil; 22 | } 23 | 24 | .icon-cart { 25 | @extend %icon; 26 | @extend .fa-shopping-cart; 27 | } 28 | 29 | .icon-del { 30 | @extend %icon; 31 | @extend .fa-trash; 32 | } 33 | 34 | .icon-detail { 35 | @extend %icon; 36 | @extend .fa-chevron-right; 37 | } 38 | 39 | .icon-actions { 40 | @extend %icon; 41 | @extend .fa-ellipsis-v; 42 | } 43 | 44 | .icon-close { 45 | @extend %icon; 46 | @extend .fa-times; 47 | } 48 | 49 | .icon-search { 50 | @extend %icon; 51 | @extend .fa-search; 52 | } 53 | 54 | .icon-filter { 55 | @extend %icon; 56 | @extend .fa-filter; 57 | } 58 | 59 | .icon-add { 60 | @extend %icon; 61 | @extend .fa-plus; 62 | } 63 | 64 | .icon-logout { 65 | @extend %icon; 66 | @extend .fa-sign-out; 67 | } 68 | 69 | .icon-caret { 70 | @extend %icon; 71 | @extend .fa-caret-down; 72 | 73 | .dropdown.open .icon { 74 | @extend .fa-caret-up; 75 | } 76 | } 77 | 78 | .icon-on { 79 | @extend %icon; 80 | @extend .fa-toggle-on; 81 | } 82 | 83 | .icon-off { 84 | @extend %icon; 85 | @extend .fa-toggle-off; 86 | } 87 | -------------------------------------------------------------------------------- /source/stylesheets/base/_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | $color: $font-color; 3 | $bg-color: $background-primary; 4 | 5 | font-size: $fs-small; 6 | width: 100%; 7 | border-collapse: separate; 8 | border: 1px solid; 9 | 10 | tr { 11 | &.odd { 12 | background-color: $bg-color; 13 | } 14 | 15 | &.even { 16 | background-color: inherit; 17 | } 18 | 19 | } 20 | 21 | th { 22 | padding: .5em 1em; 23 | text-align: left; 24 | vertical-align: middle; 25 | background-color: $color; 26 | font-weight: normal; 27 | color: white; 28 | } 29 | 30 | td { 31 | padding: 1em; 32 | vertical-align: top; 33 | border-left: 1px solid lighten($color,50%); 34 | border-top: 1px solid lighten($color,50%); 35 | 36 | &:first-child { 37 | border-left: 0; 38 | } 39 | } 40 | } 41 | 42 | 43 | .cell{ 44 | &-select { 45 | padding-right: 0; 46 | padding-bottom: 0; 47 | } 48 | 49 | &-actions{ 50 | white-space: nowrap; 51 | 52 | > * { 53 | margin-left: .5em; 54 | &:first-child{ 55 | margin-left: 0; 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_actions.scss: -------------------------------------------------------------------------------- 1 | .actions { 2 | $margin: .5em; 3 | 4 | text-align: right; 5 | margin-right: -$margin; 6 | margin-left: -$margin; 7 | display: flex; 8 | flex-direction: row; 9 | justify-content: space-between; 10 | flex-wrap: wrap; 11 | align-items: center; 12 | margin-bottom: -$margin; 13 | position: relative; 14 | 15 | > * { 16 | @include last-margin; 17 | margin-left: $margin; 18 | margin-right: $margin; 19 | margin-bottom: $margin; 20 | } 21 | 22 | &.has-buttons { 23 | margin-top: -.25em; 24 | } 25 | 26 | &__item { 27 | display: inline-block; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_alert.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | $padding: .5em 1em; 3 | 4 | border: 1px solid $warning; 5 | background-color: rgba($warning, .04); 6 | color: $warning; 7 | padding: $padding; 8 | border-radius: $border-radius; 9 | margin-bottom: 1em; 10 | 11 | &.dismissible{ 12 | position: relative; 13 | padding-right: 2em; 14 | } 15 | 16 | &.warning{ 17 | background-color: $warning; 18 | color: white; 19 | } 20 | 21 | &.success{ 22 | background-color: $success; 23 | border-color: $success; 24 | color: white; 25 | } 26 | 27 | &__close{ 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | padding: $padding; 32 | color: inherit; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_badge.scss: -------------------------------------------------------------------------------- 1 | .badge { 2 | $margin: .5em; 3 | 4 | white-space: nowrap; 5 | vertical-align: middle; 6 | background-color: $primary; 7 | color: white; 8 | font-size: .9em; 9 | padding: .1em .25em; 10 | display: inline-block; 11 | min-width: 1.5em; 12 | text-align: center; 13 | border-radius: $border-radius; 14 | text-decoration: none; 15 | margin-left: $margin; 16 | margin-right: $margin; 17 | 18 | * > &:last-child { 19 | margin-right: 0; 20 | } 21 | 22 | * > &:first-child { 23 | margin-left: 0; 24 | } 25 | } 26 | 27 | [data-badge] { 28 | position: relative; 29 | padding-right: 3.5em !important; 30 | 31 | &::after{ 32 | @extend .badge; 33 | content: attr(data-badge); 34 | position: absolute; 35 | right: 1em; 36 | top: 50%; 37 | transform: translateY(-50%); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_box.scss: -------------------------------------------------------------------------------- 1 | .box { 2 | $padding: $gutter; 3 | $border-radius: 8px; 4 | 5 | padding: $padding; 6 | background: white; 7 | border: 1px solid $border-color; 8 | border-radius: $border-radius; 9 | margin-bottom: $gutter; 10 | 11 | @include last-margin; 12 | 13 | & > *:first-child { 14 | margin: -#{$padding} -#{$padding} 0; 15 | } 16 | 17 | &__header { 18 | min-height: 7rem; 19 | padding: $padding/2 $padding; 20 | background-color: $background-primary; 21 | border-radius: $border-radius $border-radius 0 0; 22 | border-bottom: 1px solid $border-color; 23 | display: flex; 24 | flex-direction: row; 25 | flex-wrap: wrap; 26 | justify-content: space-between; 27 | align-items: center; 28 | 29 | &.is-center{ 30 | justify-content: center; 31 | text-align: center; 32 | > *{ 33 | width: 100%; 34 | } 35 | } 36 | } 37 | 38 | &__title { 39 | margin: 0; 40 | } 41 | 42 | &__content { 43 | padding: $padding $padding 0; 44 | margin-left: -$padding; 45 | margin-right: -$padding; 46 | margin-bottom: $padding; 47 | position: relative; 48 | @include last-margin; 49 | } 50 | 51 | &__footer { 52 | border-top: 1px solid $border-color; 53 | padding: $padding; 54 | margin-left: -#{$padding}; 55 | margin-right: -#{$padding}; 56 | margin-bottom: -#{$padding} !important; 57 | border-radius: 0 0 $border-radius $border-radius; 58 | @include last-margin; 59 | } 60 | 61 | &__nav { 62 | text-align: right; 63 | > * { 64 | margin-left: .5em; 65 | } 66 | } 67 | 68 | &.is-wide{ 69 | max-width: 940px; 70 | margin-left: auto; 71 | margin-right: auto; 72 | } 73 | 74 | &.is-transparent { 75 | background-color: transparent; 76 | border-color: transparent; 77 | box-shadow: none; 78 | border-radius: 0; 79 | padding-top: 0; 80 | padding-bottom: 0; 81 | 82 | .box__header { 83 | padding-bottom: 0; 84 | border-color: transparent; 85 | } 86 | 87 | .box__footer { 88 | border-color: transparent; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_card-css.scss: -------------------------------------------------------------------------------- 1 | $colors-list: "Primary" $primary, 2 | "Primary light" $primary-light, 3 | "Primary lighter" $primary-lighter, 4 | "Bg primary" $background-primary, 5 | "Secondary" $secondary, 6 | "Secondary light" $secondary-light, 7 | "Secondary lighter" $secondary-lighter, 8 | "Bg secondary" $background-secondary, 9 | "Success" $success, 10 | "Warning" $warning; 11 | 12 | @mixin card-css--color($content, $color){ 13 | .card-css__block{ background-color: $color;} 14 | 15 | .card-css__text{ 16 | &::before{ content: '#{$color}'} 17 | &::after{ content: '#{$content}';} 18 | } 19 | } 20 | 21 | .card-css{ 22 | &__container{ 23 | @include make-row; 24 | margin-bottom: -$gutter; 25 | } 26 | 27 | &__item{ 28 | @include make-xs-column(3); 29 | @include make-xs-clear(4); 30 | @include make-sm-column(4); 31 | @include make-sm-clear(3, 4); 32 | @include make-md-column(3); 33 | @include make-md-clear(4, 3); 34 | @media (max-width: 600px){ 35 | @include make-column(4); 36 | @include make-clear(3, 4); 37 | } 38 | @media (max-width: 480px){ 39 | @include make-column(6); 40 | @include make-clear(2, 3); 41 | } 42 | 43 | margin-bottom: $gutter; 44 | } 45 | 46 | &__content{ 47 | box-shadow: $shadow; 48 | border: 1px solid $border-color; 49 | } 50 | 51 | &__block{ 52 | height: 9rem; 53 | position: relative; 54 | background-color: white; 55 | color: $font-color-light; 56 | } 57 | 58 | &__title{ 59 | color: $font-color; 60 | display: block; 61 | } 62 | 63 | &__subtitle{ 64 | color: $font-color-light; 65 | display: block; 66 | font-size: 1em; 67 | @include ellipsis; 68 | } 69 | 70 | &__text{ 71 | padding: .5rem 1rem; 72 | height: 5rem; 73 | width: 100%; 74 | background-color: white; 75 | border-top: 1px solid $border-color; 76 | font-size: $fs-small; 77 | line-height: 1.4; 78 | display: flex; 79 | flex-direction: column; 80 | flex-wrap: nowrap; 81 | justify-content: center; 82 | align-content: flex-start; 83 | } 84 | 85 | &--colors-list{ 86 | @extend .card-css__item; 87 | 88 | .card-css__text{ 89 | &::before{ 90 | content: 'Title'; 91 | @extend .card-css__title; 92 | text-transform: uppercase; 93 | } 94 | &::after{ 95 | content: 'Subtitle'; 96 | @extend .card-css__subtitle; 97 | } 98 | } 99 | 100 | @each $color in $colors-list { 101 | $i: index($colors-list, $color); 102 | &:nth-child(#{$i}){ 103 | @include card-css--color(nth($color, 1), nth($color, 2)); 104 | } 105 | } 106 | } 107 | 108 | &--typography{ 109 | @extend .card-css__item; 110 | 111 | .card-css__block{ 112 | font-size: 4.1rem; 113 | display: flex; 114 | align-items: center; 115 | justify-content: center; 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | $zindex: 1000; 3 | $bkg: #fff; 4 | $border: lighten($primary,10%); 5 | $padding-top: .4em; 6 | $padding: $padding-top 1em; 7 | $bg-divider: $border; 8 | $link-color: $font-color; 9 | $link-hover-color: $primary; 10 | $link-hover-bkg: $font-color-light; 11 | $link-active-color: $primary; 12 | $link-active-bkg: $bkg ; 13 | $link-disabled-color: $font-color ; 14 | $header-color: $font-color ; 15 | $caret-color: #000 ; 16 | 17 | position: relative; 18 | display: inline-block; 19 | 20 | &:not(.no-icon) > *:first-child { 21 | &::after{ 22 | @include fa-icon; 23 | margin-left: .25em; 24 | content: $fa-var-caret-down; 25 | transition: all .3s ease-out; 26 | opacity: .8 27 | } 28 | 29 | &:hover{ 30 | &::after{ 31 | opacity: 1; 32 | } 33 | } 34 | } 35 | 36 | &.open > *:first-child::after{ 37 | transform: rotate(-180deg) 38 | } 39 | 40 | &-menu { 41 | position: absolute; 42 | top: 100%; 43 | left: 0; 44 | z-index: $zindex; 45 | display: none; 46 | float: left; 47 | min-width: 10em; 48 | padding: $padding-top 0; 49 | margin: .7em 0 0; 50 | list-style: none; 51 | text-align: left; 52 | background-color: $bkg; 53 | border: 1px solid $border; 54 | border-radius: $border-radius; 55 | box-shadow: $shadow; 56 | background-clip: padding-box; 57 | 58 | &::before, 59 | &::after{ 60 | font-size: 10px; 61 | content: ""; 62 | position: absolute; 63 | top: -.9em; 64 | left: 1em; 65 | border-width: 0 1em 1em; 66 | border-style: solid; 67 | border-color: $bkg transparent; 68 | display: block; 69 | width: 0; 70 | } 71 | 72 | &::before{ 73 | margin-top: -1px; 74 | border-color: $border transparent; 75 | } 76 | 77 | .divider { 78 | height: 1px; 79 | margin-top: $padding-top; 80 | margin-bottom: $padding-top; 81 | background-color: $bg-divider; 82 | } 83 | 84 | li{ 85 | margin: 0; 86 | } 87 | 88 | > li { 89 | > a { 90 | display: block; 91 | padding: $padding; 92 | clear: both; 93 | font-weight: normal; 94 | color: $link-color; 95 | white-space: nowrap; // prevent links from randomly breaking onto new lines 96 | &:hover, 97 | &:focus { 98 | text-decoration: none; 99 | color: $link-hover-color; 100 | background-color: $link-hover-bkg; 101 | } 102 | } 103 | } 104 | 105 | > .active > a { 106 | &, 107 | &:hover, 108 | &:focus { 109 | color: $link-active-color; 110 | text-decoration: none; 111 | outline: 0; 112 | background-color: $link-active-bkg; 113 | } 114 | } 115 | 116 | > .disabled > a { 117 | &, 118 | &:hover, 119 | &:focus { 120 | color: $link-disabled-color; 121 | } 122 | 123 | &:hover, 124 | &:focus { 125 | text-decoration: none; 126 | background-color: transparent; 127 | background-image: none; // Remove CSS gradient 128 | //@include reset-filter; 129 | cursor: not-allowed; 130 | } 131 | } 132 | 133 | .open > & { 134 | display: block; 135 | } 136 | 137 | &.is-right { 138 | left: auto; // Reset the default from `.dropdown-menu` 139 | right: 0; 140 | 141 | &::before, 142 | &::after{ 143 | left: auto; 144 | right: 1em; 145 | } 146 | } 147 | 148 | &.is-left { 149 | left: 0; 150 | right: auto; 151 | 152 | &::before, 153 | &::after{ 154 | right: auto; 155 | left: 1em; 156 | } 157 | } 158 | 159 | &.is-center { 160 | left: 50%; 161 | transform: translateX(-50%); 162 | right: auto; 163 | 164 | &::before, 165 | &::after{ 166 | right: auto; 167 | left: 50%; 168 | transform: translateX(-50%); 169 | } 170 | } 171 | 172 | &.is-top{ 173 | top: auto; 174 | bottom: 100%; 175 | margin-bottom: 10px; 176 | &::before, 177 | &::after{ 178 | top: auto; 179 | bottom: -.9em; 180 | border-width: 1em 1em 0; 181 | } 182 | &::before{ 183 | margin-top: 0px; 184 | margin-bottom: -1px; 185 | } 186 | } 187 | } 188 | 189 | &-backdrop { 190 | position: fixed; 191 | left: 0; 192 | right: 0; 193 | bottom: 0; 194 | top: 0; 195 | z-index: ($zindex - 10); 196 | } 197 | 198 | &-header, 199 | &-content { 200 | display: block; 201 | padding: $padding; 202 | white-space: nowrap; // as with > li > a 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | &__main { 3 | padding: 50px 0; 4 | background-color: $background-secondary; 5 | border-top: 1px solid $border-color; 6 | border-bottom: 1px solid $border-color; 7 | } 8 | 9 | &__container { 10 | @extend .container; 11 | } 12 | 13 | &__link-groups { 14 | @include make-sm-column(6,0); 15 | @include make-row(0) 16 | } 17 | 18 | &__link-group { 19 | @include make-sm-column(4); 20 | margin-bottom: 2em; 21 | @media (min-width: $screen-sm){ 22 | margin-bottom: 0; 23 | } 24 | 25 | ul {@extend .list-reset;} 26 | 27 | a {@extend .reset-link;} 28 | } 29 | 30 | &__social { 31 | margin-top: 2em; 32 | @include make-sm-column(6); 33 | @media (min-width: $screen-sm){ 34 | text-align: right; 35 | margin-top: 0; 36 | } 37 | } 38 | 39 | &__social-icons{ 40 | @extend .list-reset; 41 | 42 | li { 43 | display: inline-block; 44 | @media (min-width: $screen-sm){ 45 | margin-left: .5em; 46 | } 47 | } 48 | } 49 | 50 | &__icon { 51 | $icons: 'github','instagram','envelope','medium','linkedin', 52 | 'facebook','google-plus','twitter'; 53 | 54 | @each $icon in $icons { 55 | &--#{$icon} { 56 | @extend .btn-icon; 57 | @extend %icon; 58 | @extend .fa-#{$icon}; 59 | } 60 | } 61 | } 62 | 63 | &__logo { 64 | height: 5rem; 65 | width: 18rem; 66 | display: inline-block; 67 | margin-bottom: 1em; 68 | } 69 | 70 | &__info { 71 | background-color: $background-primary; 72 | padding: 1.5em 0; 73 | } 74 | 75 | &__copyright { 76 | @include make-sm-column(10); 77 | line-height: $fs-h1; 78 | text-align: center; 79 | @media (min-width: $screen-sm) { 80 | text-align: inherit; 81 | } 82 | } 83 | 84 | &__top-page { 85 | @extend .reset-link; 86 | @include make-sm-column(2); 87 | display: block; 88 | text-align: center; 89 | font-size: $fs-h1; 90 | line-height: 1; 91 | @media (min-width: $screen-sm){ 92 | text-align: right; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | $height: $header-height; 3 | $height-bp: $header-height-breakpoint; 4 | $gutter: $gutter; 5 | 6 | display: flex; 7 | background-color: $background-secondary; 8 | min-height: $height-bp; 9 | border-bottom: 1px solid $primary-light; 10 | position: fixed; 11 | top: 0; 12 | width: 100%; 13 | z-index: 10; 14 | 15 | @media (min-width: $grid-breakpoint){ 16 | min-height: $height; 17 | body:not(.fixed) &{ 18 | position: static; 19 | } 20 | } 21 | 22 | &__container { 23 | @include container-fixed; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | } 28 | 29 | &__logo { 30 | height: $height - $gutter; 31 | flex: 1; 32 | text-align: center; 33 | padding-top: .5rem; 34 | padding-bottom: .5rem; 35 | @media (min-width: $grid-breakpoint){ 36 | flex: initial; 37 | margin-right: $gutter; 38 | padding-top: 0; 39 | padding-bottom: 0; 40 | } 41 | 42 | img, svg { 43 | height: 100%; 44 | width: 13rem; 45 | } 46 | } 47 | 48 | &__nav { 49 | flex: 1; 50 | display: flex; 51 | flex-wrap: nowrap; 52 | align-items: center; 53 | min-width: 400px; 54 | @media (max-width: $grid-breakpoint - 1){ 55 | display: none; 56 | } 57 | 58 | > *:not(:last-child) { 59 | margin-right: $gutter; 60 | } 61 | } 62 | 63 | &__actions { 64 | text-align: right; 65 | display: flex; 66 | align-items: center; 67 | 68 | > *:not(:last-child) { 69 | margin-right: $gutter/2; 70 | } 71 | 72 | > *:not(.header__user-info){ 73 | @media (max-width: $grid-breakpoint - 1){ 74 | display: none; 75 | } 76 | } 77 | 78 | input.search { 79 | max-width: 20rem; 80 | min-width: 10rem; 81 | } 82 | } 83 | 84 | &__user-info{ 85 | $size: 3.2rem; 86 | 87 | min-width: 5rem; 88 | 89 | img{ 90 | height: $size; 91 | width: $size; 92 | border-radius: 50%; 93 | background-color: $secondary; 94 | vertical-align: middle; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | height: calc(100vh - 20rem); //header + paddings 3 | display: table; 4 | width: 100%; 5 | text-align: center; 6 | position: relative; 7 | @extend .container; 8 | 9 | .hero__content { 10 | display: table-cell; 11 | vertical-align: middle; 12 | } 13 | 14 | .hero__image { 15 | height: 90px; 16 | width: auto; 17 | @include margin-bottom(50px); 18 | 19 | svg { 20 | opacity: .2; 21 | } 22 | } 23 | 24 | .hero__button { 25 | margin-top: 2em; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_main-content.scss: -------------------------------------------------------------------------------- 1 | .main-content { 2 | $padding: 3rem; 3 | 4 | position: relative; 5 | padding-top: $padding; 6 | padding-bottom: $padding; 7 | 8 | @media (min-width: $grid-breakpoint){ 9 | padding-top: $padding; 10 | } 11 | 12 | &__container { 13 | @extend .container; 14 | } 15 | 16 | &__header { 17 | text-align: center; 18 | 19 | .marsman-template-negative{ 20 | width: 110px; 21 | height: 38px; 22 | margin-bottom: 1.5em; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_modals.scss: -------------------------------------------------------------------------------- 1 | $zindex-modal-background: 1040 !default; 2 | $zindex-modal: 1050 !default; 3 | 4 | $modal-backdrop-bg: black; 5 | $modal-backdrop-opacity: .4; 6 | 7 | $modal-lg: 900px; 8 | $modal-md: 600px; 9 | $modal-sm: 400px; 10 | 11 | @keyframes modal-in { 12 | 0% { 13 | transform: translate(0, -25%); 14 | opacity: 0; 15 | } 16 | 100% { 17 | transform: translate(0, 0); 18 | opacity: 1; 19 | } 20 | } 21 | 22 | .modal-open { 23 | overflow: hidden; 24 | } 25 | 26 | .modal { 27 | display: none; 28 | overflow: hidden; 29 | position: fixed; 30 | top: 0; 31 | right: 0; 32 | bottom: 0; 33 | left: 0; 34 | z-index: $zindex-modal; 35 | -webkit-overflow-scrolling: touch; 36 | 37 | // Prevent Chrome on Windows from adding a focus outline. For details, see 38 | // https://github.com/twbs/bootstrap/pull/10951. 39 | outline: 0; 40 | 41 | &.fade .modal-dialog { 42 | transform: translate(0, -25%); 43 | opacity: 0; 44 | transition: transform 0.3s ease-out, opacity 0.3s ease-out; 45 | } 46 | &.in .modal-dialog { 47 | animation: modal-in .5s; 48 | animation-fill-mode: forwards; 49 | } 50 | } 51 | 52 | .modal-open .modal.in { 53 | overflow-x: hidden; 54 | overflow-y: auto; 55 | display: flex !important; 56 | align-items: center; 57 | flex-direction: column; 58 | justify-content: center; 59 | -ms-flex-pack: center; //Center horizontaly ie 60 | } 61 | 62 | .modal-dialog { 63 | position: relative; 64 | width: auto; 65 | margin: 10px; 66 | max-width: 100%; 67 | max-height: 100%; 68 | height: auto; 69 | margin: 0; 70 | padding: $gutter/2 $gutter/2 0; 71 | 72 | > * { 73 | box-shadow: 0 1px 10px rgba(black, .6); 74 | margin-bottom: $gutter; 75 | } 76 | } 77 | 78 | .modal-backdrop { 79 | position: fixed; 80 | top: 0; 81 | right: 0; 82 | bottom: 0; 83 | left: 0; 84 | z-index: $zindex-modal-background; 85 | background-color: $modal-backdrop-bg; 86 | transition: opacity .1s ease-out; 87 | 88 | &.fade { 89 | opacity: 0; 90 | } 91 | 92 | &.in { 93 | opacity: $modal-backdrop-opacity; 94 | } 95 | } 96 | 97 | // Measure scrollbar width for padding body during modal show/hide 98 | .modal-scrollbar-measure { 99 | position: absolute; 100 | top: -9999px; 101 | width: 50px; 102 | height: 50px; 103 | overflow: scroll; 104 | } 105 | 106 | // Scale up the modal 107 | @media (min-width: $screen-sm) { 108 | // Automatically set modal's width for larger viewports 109 | .modal-dialog { 110 | width: $modal-md; 111 | margin: 30px auto; 112 | } 113 | .modal-content { 114 | box-shadow: 0 16px 33px rgba(0, 0, 0, 0.28); 115 | } 116 | 117 | // Modal sizes 118 | .modal-sm { 119 | width: $modal-sm; 120 | } 121 | } 122 | 123 | @media (min-width: $screen-md) { 124 | .modal-lg { 125 | width: $modal-lg; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_nav-inline.scss: -------------------------------------------------------------------------------- 1 | .nav-inline { 2 | $padding: .5em; 3 | $line-width: calc(100% - #{$padding * 2}); 4 | 5 | @extend .list-reset; 6 | @extend .list-inline; 7 | margin-bottom: 0; 8 | 9 | a { 10 | padding: $padding; 11 | display: inline-block; 12 | position: relative; 13 | color: inherit; 14 | text-decoration: none; 15 | 16 | &::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: .2em; 20 | left: 50%; 21 | transform: translateX(-50%); 22 | width: 0; 23 | height: 1px; 24 | background-color: currentColor; 25 | transition: all .2s ease-out; 26 | } 27 | 28 | &:hover::after { 29 | width: $line-width; 30 | } 31 | } 32 | .active { 33 | color: $primary; 34 | a::after { 35 | width: $line-width; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_nav-pills.scss: -------------------------------------------------------------------------------- 1 | .nav-pills { 2 | margin-bottom: 0; 3 | padding-left: 0; 4 | list-style: none; 5 | @include make-column(12); 6 | @include make-row; 7 | padding-bottom: 2rem; 8 | 9 | > li { 10 | float: left; 11 | position: relative; 12 | display: block; 13 | 14 | > a { 15 | @extend .btn-primary-light; 16 | display: inline; 17 | } 18 | + li { 19 | margin-left: .5rem; 20 | } 21 | 22 | &.active > a { 23 | &, 24 | &:hover, 25 | &:focus { 26 | color: white; 27 | background-color: $primary; 28 | } 29 | } 30 | 31 | &.disabled > a { 32 | color: black; 33 | 34 | &:hover, 35 | &:focus { 36 | color: $primary-light; 37 | text-decoration: none; 38 | background-color: transparent; 39 | cursor: not-allowed; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_nav-responsive.scss: -------------------------------------------------------------------------------- 1 | .nav-responsive { 2 | $bkg: $secondary; 3 | $width: $nav-responsive-width; 4 | 5 | height: 100vh; 6 | width: $width; 7 | position: absolute; 8 | left: -$width; 9 | background: $bkg; 10 | 11 | &__header{ 12 | display: flex; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | padding: 1rem; 17 | min-height: $header-height-breakpoint; 18 | border-bottom: 1px solid rgba($primary,.2); 19 | } 20 | 21 | .pills{ 22 | background-color: transparent; 23 | border-radius: 0; 24 | border: 0; 25 | 26 | &__link { 27 | border: 0; 28 | &.active, 29 | &:hover{ 30 | color: white; 31 | } 32 | &::before{ 33 | left: -.3em; 34 | width: .3em; 35 | } 36 | } 37 | 38 | > *:nth-child(even) { 39 | background-color: rgba(white, .05); 40 | } 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | $color: $font-color; 3 | $border-color: $background-primary; 4 | $hover-bg: $primary; 5 | $hover-color: white; 6 | $active-bg: $primary-light; 7 | $active-color: white; 8 | 9 | display: inline-block; 10 | padding-left: 0; 11 | border-radius: $border-radius; 12 | background-color: $background-secondary; 13 | 14 | > li { 15 | display: inline; // Remove list-style and block-level defaults 16 | a{ 17 | @extend .reset-link; 18 | position: relative; 19 | float: left; // Collapse white-space 20 | padding: .5em 1em; 21 | color: $color; 22 | line-height: 1.2; 23 | text-decoration: none; 24 | border: 1px solid $border-color; 25 | transition: all .2s ease-out; 26 | margin-left: -1px; 27 | 28 | &:hover, 29 | &:focus { 30 | background-color: $hover-bg; 31 | color: $hover-color; 32 | } 33 | 34 | &.is-active{ 35 | background-color: $active-bg; 36 | color: $active-color; 37 | &:hover, &:focus{ 38 | background-color: $hover-bg; 39 | color: $hover-color; 40 | } 41 | } 42 | 43 | &.is-disabled{ 44 | opacity: .5; 45 | } 46 | } 47 | 48 | &:first-child a { 49 | margin-left: 0; 50 | border-top-left-radius: $border-radius; 51 | border-bottom-left-radius: $border-radius; 52 | } 53 | 54 | &:last-child a { 55 | border-top-right-radius: $border-radius; 56 | border-bottom-right-radius: $border-radius; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_pills.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | %pills-state{ 4 | background-repeat: no-repeat; 5 | background-size: 1em; 6 | background-position: calc(100% - 1em) center; 7 | padding-right: 2.9em; 8 | } 9 | 10 | .pills { 11 | $padding: 1em 2em; 12 | $border: 1px solid $border-color; 13 | $bg: white; 14 | $active: $primary; 15 | 16 | margin: 0; 17 | padding: 0; 18 | list-style-type: none; 19 | border-radius: $border-radius; 20 | overflow: hidden; 21 | border: $border; 22 | background-color: $bg; 23 | 24 | a { 25 | @extend .reset-link; 26 | } 27 | 28 | &__item { 29 | display: block; 30 | margin: 0; 31 | } 32 | 33 | &__link { 34 | display: block; 35 | padding: $padding; 36 | border-bottom: $border; 37 | position: relative; 38 | transition: color .4s ease-out; 39 | 40 | &::before { 41 | content: ""; 42 | position: absolute; 43 | top: 0; 44 | bottom: 0; 45 | left: -.5em; 46 | width: .5em; 47 | transition: left .2s ease-out; 48 | background-color: transparent; 49 | } 50 | 51 | .pills__item:last-child & { 52 | border-bottom: 0; 53 | } 54 | 55 | &.active, 56 | &:hover, 57 | &:focus { 58 | outline: 0; 59 | 60 | &::before{ 61 | left: 0; 62 | background-color: currentColor; 63 | } 64 | } 65 | 66 | &.disabled{ 67 | opacity: .2; 68 | cursor: not-allowed; 69 | //pointers-events: none; 70 | } 71 | 72 | &.active { 73 | color: $active; 74 | &::before{ 75 | left: 0; 76 | background-color: $active; 77 | } 78 | } 79 | 80 | &.success{ 81 | @extend %pills-state; 82 | background-image: image-url("icon-success.svg"); 83 | } 84 | 85 | &.warning{ 86 | @extend %pills-state; 87 | background-image: image-url("icon-warning.svg"); 88 | } 89 | } 90 | 91 | &--number { 92 | @extend .pills; 93 | counter-reset: section; 94 | 95 | .pills__link { 96 | position: relative; 97 | padding-left: 2.8em; 98 | 99 | &::after{ 100 | width: 2em; 101 | font-weight: bold; 102 | text-align: right; 103 | content: counter(section)"."; 104 | counter-increment: section; 105 | left: .3em; 106 | top: 1em; 107 | position: absolute; 108 | } 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_popover.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | $max-width: 300px; 3 | $bg: lighten($warning, 36%); 4 | $color: $warning; 5 | $border-color: $warning; 6 | $border-radius: 6px; 7 | $title-bg: $warning; 8 | $title-color: white; 9 | $arrow-color: $bg; 10 | $arrow-width: 10px; 11 | $arrow-outer-width: ($arrow-width + 1); 12 | $arrow-outer-color: $warning; 13 | 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | z-index: 9999; 18 | display: none; 19 | font-size: $fs-base; 20 | line-height: $line-height-base; 21 | max-width: $max-width; 22 | font-weight: normal; 23 | text-align: left; 24 | background-color: $bg; 25 | background-clip: padding-box; 26 | color: $color; 27 | border: 1px solid $border-color; 28 | border-radius: $border-radius; 29 | box-shadow: $shadow; 30 | 31 | // Overrides for proper insertion 32 | white-space: normal; 33 | 34 | // Offset the popover to account for the popover arrow 35 | &.top { margin-top: -$arrow-width; } 36 | &.right { margin-left: $arrow-width; } 37 | &.bottom { margin-top: $arrow-width; } 38 | &.left { margin-left: -$arrow-width; } 39 | 40 | &.html { 41 | $this--bg: white; 42 | $this--width: 10px; 43 | $this--outer-width: ($this--width + 1); 44 | $this--outer-color: $primary; 45 | 46 | @extend .popover; 47 | background-color: $this--bg; 48 | border: 1px solid $this--outer-color; 49 | color: $font-color; 50 | 51 | &.top > .arrow { 52 | left: 50%; 53 | margin-left: -$this--outer-width; 54 | border-bottom-width: 0; 55 | border-top-color: $this--outer-color; 56 | bottom: -$this--outer-width; 57 | &:after { 58 | content: " "; 59 | bottom: 1px; 60 | margin-left: -$this--width; 61 | border-bottom-width: 0; 62 | border-top-color: $this--bg; 63 | } 64 | } 65 | &.right > .arrow { 66 | top: 50%; 67 | left: -$this--outer-width; 68 | margin-top: -$this--outer-width; 69 | border-left-width: 0; 70 | border-right-color: $this--outer-color; 71 | &:after { 72 | content: " "; 73 | left: 1px; 74 | bottom: -$this--width; 75 | border-left-width: 0; 76 | border-right-color: $this--bg; 77 | } 78 | } 79 | &.bottom > .arrow { 80 | left: 50%; 81 | margin-left: -$this--outer-width; 82 | border-top-width: 0; 83 | border-bottom-color: $this--outer-color; 84 | top: -$this--outer-width; 85 | &:after { 86 | content: " "; 87 | top: 1px; 88 | margin-left: -$this--width; 89 | border-top-width: 0; 90 | border-bottom-color: $this--bg; 91 | } 92 | } 93 | 94 | &.left > .arrow { 95 | top: 50%; 96 | right: -$this--outer-width; 97 | margin-top: -$this--outer-width; 98 | border-right-width: 0; 99 | border-left-color: $this--outer-color; 100 | &:after { 101 | content: " "; 102 | right: 1px; 103 | border-right-width: 0; 104 | border-left-color: $this--bg; 105 | bottom: -$this--width; 106 | } 107 | } 108 | } 109 | 110 | &-title { 111 | margin: 0; // reset heading margin 112 | padding: .5em 1em; 113 | color: $title-bg; 114 | background-color: $title-bg; 115 | color: $title-color; 116 | } 117 | 118 | &-content { 119 | padding: .5em 1em; 120 | } 121 | 122 | &-icon { 123 | @extend .reset-link; 124 | @extend %icon; 125 | @extend .fa-question-circle; 126 | vertical-align: top; 127 | font-size: .9em; 128 | color: $warning; 129 | } 130 | 131 | // Arrows 132 | // .arrow is outer, .arrow:after is inner 133 | & > .arrow { 134 | &, 135 | &:after { 136 | position: absolute; 137 | display: block; 138 | width: 0; 139 | height: 0; 140 | border-color: transparent; 141 | border-style: solid; 142 | } 143 | } 144 | 145 | & > .arrow { 146 | border-width: $arrow-outer-width; 147 | } 148 | 149 | & > .arrow:after { 150 | border-width: $arrow-width; 151 | content: ""; 152 | } 153 | 154 | //modifers 155 | &.top > .arrow { 156 | left: 50%; 157 | margin-left: -$arrow-outer-width; 158 | border-bottom-width: 0; 159 | border-top-color: $arrow-outer-color; 160 | bottom: -$arrow-outer-width; 161 | &:after { 162 | content: " "; 163 | bottom: 1px; 164 | margin-left: -$arrow-width; 165 | border-bottom-width: 0; 166 | border-top-color: $arrow-color; 167 | } 168 | } 169 | &.right > .arrow { 170 | top: 50%; 171 | left: -$arrow-outer-width; 172 | margin-top: -$arrow-outer-width; 173 | border-left-width: 0; 174 | border-right-color: $arrow-outer-color; 175 | &:after { 176 | content: " "; 177 | left: 1px; 178 | bottom: -$arrow-width; 179 | border-left-width: 0; 180 | border-right-color: $arrow-color; 181 | } 182 | } 183 | &.bottom > .arrow { 184 | left: 50%; 185 | margin-left: -$arrow-outer-width; 186 | border-top-width: 0; 187 | border-bottom-color: $arrow-outer-color; 188 | top: -$arrow-outer-width; 189 | &:after { 190 | content: " "; 191 | top: 1px; 192 | margin-left: -$arrow-width; 193 | border-top-width: 0; 194 | border-bottom-color: $arrow-color; 195 | } 196 | } 197 | 198 | &.left > .arrow { 199 | top: 50%; 200 | right: -$arrow-outer-width; 201 | margin-top: -$arrow-outer-width; 202 | border-right-width: 0; 203 | border-left-color: $arrow-outer-color; 204 | &:after { 205 | content: " "; 206 | right: 1px; 207 | border-right-width: 0; 208 | border-left-color: $arrow-color; 209 | bottom: -$arrow-width; 210 | } 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | $progress-bar-bg: $secondary-lighter !default; 2 | $progress-bar-border: rgba(#000, .05) !default; 3 | $progress-bar-border-radius: 4px !default; 4 | $progress-bar-color: $primary !default; 5 | $progress-bar-animation: fadeIn !default; 6 | $progress-bar-width: 100% !default; 7 | $progress-bar-max-width: false !default; 8 | $progress-bar-barbershop-color: '%23ffffff' !default; 9 | $progress-bar-barbershop-opacity: 0.2 !default; 10 | 11 | @keyframes progressBarBarber { 12 | 0% { 13 | background-position-x: -40px; 14 | } 15 | 100% { 16 | background-position-x: 0; 17 | } 18 | } 19 | 20 | .progress-bar { 21 | position: relative; 22 | overflow: hidden; 23 | animation: $progress-bar-animation .4s ease-out; 24 | @if $progress-bar-border { 25 | border: 1px solid $progress-bar-border; 26 | } 27 | background-color: $progress-bar-bg; 28 | color: $primary; 29 | height: 1em; 30 | margin: auto; 31 | @if $progress-bar-border-radius { 32 | border-radius: $progress-bar-border-radius; 33 | } 34 | width: $progress-bar-width; 35 | @if $progress-bar-max-width { 36 | max-width: $progress-bar-max-width; 37 | } 38 | 39 | &__loaded { 40 | background-color: currentColor; 41 | position: absolute; 42 | top:0; 43 | bottom: 0; 44 | left: 0; 45 | width: 0; 46 | transition: width .4s ease-out; 47 | background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='"+$progress-bar-barbershop-color+"' fill-opacity='"+$progress-bar-barbershop-opacity+"' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); 48 | animation: progressBarBarber 1s linear infinite; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_select2.scss: -------------------------------------------------------------------------------- 1 | $select2-padding: $components-padding; 2 | $select2-border: $input-border; 3 | $select2-radius: $border-radius; 4 | $select2-bg-color: white !default; 5 | $select2-margin: $input-margin; 6 | $select2-color-active: $primary; 7 | $select2-icon-padding: 2em; 8 | $select2-icon-color: $primary; 9 | $select2-dropdown-max-height: 32px * 7 + 14px; 10 | $select2-dropdown-border: 1px solid $primary; 11 | $select2-search-color: white; 12 | $select2-search-bg-color: lighten($primary, 20%); 13 | $select2-border-readonly: 1px solid #f8f8fa; 14 | 15 | .select2-hidden-accessible { 16 | border: 0 !important; 17 | clip: rect(0 0 0 0) !important; 18 | height: 1px !important; 19 | margin: -1px !important; 20 | overflow: hidden !important; 21 | padding: 0 !important; 22 | position: absolute !important; 23 | width: 1px !important; 24 | } 25 | 26 | .select2.disabled + .select2-container { 27 | @extend .disabled; 28 | 29 | .selection { 30 | box-shadow: none; 31 | } 32 | } 33 | 34 | .select2.readonly + .select2-container { 35 | 36 | .selection { 37 | box-shadow: none; 38 | border: $select2-border-readonly; 39 | } 40 | } 41 | 42 | .select2-container { 43 | @extend %form-item; 44 | width: auto; 45 | max-width: 100%; 46 | display: inline-block; 47 | position: relative; 48 | vertical-align: middle; 49 | background-color: transparent; 50 | padding: 0 !important; 51 | border: 0 !important; 52 | 53 | &--open { 54 | .modal-open & { 55 | z-index: 9999; 56 | } 57 | } 58 | 59 | &.select2 { 60 | width: 100% !important; 61 | } 62 | 63 | .selection { 64 | width: 100%; 65 | display: block; 66 | border: $select2-border; 67 | background-color: $select2-bg-color; 68 | border-radius: $select2-radius; 69 | position: relative; 70 | float: none; 71 | box-shadow: none; 72 | } 73 | 74 | &--open, 75 | &--focus { 76 | .selection { 77 | @include focus; 78 | } 79 | 80 | &.success { 81 | .selection { 82 | @include focus($success); 83 | } 84 | } 85 | 86 | &.warning { 87 | .selection { 88 | @include focus($warning); 89 | } 90 | } 91 | } 92 | 93 | .form-group.success &, 94 | &.success { 95 | .selection { 96 | border-color: $success; 97 | } 98 | } 99 | 100 | .form-group.warning &, 101 | &.warning { 102 | .selection { 103 | border-color: $warning; 104 | } 105 | } 106 | } 107 | 108 | .select2-selection { 109 | outline: 0; 110 | padding: $select2-padding; 111 | padding-right: $select2-icon-padding; 112 | display: block; 113 | 114 | &__arrow { 115 | position: absolute; 116 | top: 50%; 117 | color: $select2-icon-color; 118 | transform: translateY(-50%); 119 | right: 1em; 120 | 121 | b { 122 | @extend .fa; 123 | @extend .fa-caret-down; 124 | font-size: 1em; 125 | line-height: inherit; 126 | } 127 | } 128 | 129 | &__placeholder { 130 | color: $input-placeholder; 131 | } 132 | 133 | &__rendered { 134 | outline: 0 !important; 135 | @include ellipsis; 136 | display: block; 137 | } 138 | 139 | &__clear { 140 | cursor: pointer; 141 | float: left; 142 | margin-right: .5em; 143 | } 144 | } 145 | 146 | .select2-dropdown { 147 | box-sizing: border-box; 148 | display: block; 149 | position: absolute; 150 | margin-top: $select2-margin/2; 151 | margin-bottom: $select2-margin/2; 152 | border-radius: $select2-radius; 153 | z-index: 998; 154 | overflow: hidden; 155 | border: 1px solid $select2-color-active; 156 | background-color: white; 157 | 158 | &--above { 159 | margin-top: -$select2-margin/2; 160 | } 161 | 162 | ul { 163 | @extend .list-reset; 164 | max-height: $select2-dropdown-max-height; 165 | overflow-y: auto; 166 | 167 | li { 168 | cursor: pointer; 169 | padding: $select2-padding; 170 | 171 | &:last-of-type { 172 | margin-bottom: .5em; 173 | } 174 | 175 | &:first-of-type { 176 | margin-top: .5em; 177 | } 178 | } 179 | } 180 | } 181 | 182 | .select2-search { 183 | display: block; 184 | 185 | &--hide { 186 | display: none; 187 | } 188 | 189 | &__field { 190 | box-sizing: border-box !important; 191 | border: 0; 192 | width: 100%; 193 | padding: $select2-padding; 194 | margin: 0; 195 | background-color: $select2-search-bg-color; 196 | color: $select2-search-color; 197 | border-radius: 0; 198 | box-shadow: none; 199 | 200 | &:focus { 201 | box-shadow: none !important; 202 | } 203 | } 204 | } 205 | 206 | .select2-results { 207 | display: block; 208 | 209 | &__options { 210 | margin-bottom: 0; 211 | } 212 | 213 | &__option--highlighted { 214 | color: $select2-color-active; 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_separator.scss: -------------------------------------------------------------------------------- 1 | @mixin separator($color: $secondary-lighter) { 2 | overflow: hidden; 3 | text-align: center; 4 | color: $color; 5 | margin-bottom: 1.5em; 6 | 7 | &__text { 8 | display: inline-block; 9 | vertical-align: middle; 10 | max-width: 90%; 11 | margin: auto; 12 | } 13 | 14 | &:before, 15 | &:after{ 16 | background-color: $color; 17 | content: ""; 18 | display: inline-block; 19 | height: 1px; 20 | position: relative; 21 | vertical-align: middle; 22 | width: 50%; 23 | } 24 | &:after { 25 | left: 0.5em; 26 | margin-right: -50%; 27 | } 28 | &:before { 29 | right: 0.5em; 30 | margin-left: -50%; 31 | } 32 | } 33 | 34 | .separator { 35 | @include separator($secondary-lighter); 36 | } 37 | 38 | .separator--negative { 39 | @include separator(white); 40 | } -------------------------------------------------------------------------------- /source/stylesheets/blocks/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | font-size: 2.4rem; 3 | position: relative; 4 | transition: 0.3s; 5 | height: 0.85em; 6 | width: 0.85em; 7 | &::before { 8 | background-image: image-url('icon-tooltip.svg'); 9 | background-repeat: no-repeat; 10 | content: ''; 11 | position: absolute; 12 | top: 0; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | } 17 | 18 | &-wrapper { 19 | @media (min-width: $screen-sm) { 20 | padding-right: 2em; 21 | position: relative; 22 | } 23 | 24 | .tooltip { 25 | position: absolute; 26 | top: .2em; 27 | right: .1em; 28 | @media (max-width: $screen-sm - 1) { 29 | display: none; 30 | } 31 | } 32 | } 33 | 34 | &-wrapper-mobile { 35 | position: relative; 36 | margin-bottom: 0.5em; 37 | 38 | label { 39 | display: inline !important; 40 | } 41 | 42 | .tooltip { 43 | display: inline-block; 44 | vertical-align: -.25rem; 45 | margin-left: 1rem; 46 | @media (min-width: $screen-sm) { 47 | display: none; 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /source/stylesheets/blocks/_user-info.scss: -------------------------------------------------------------------------------- 1 | $user-info--margin: 1em; 2 | 3 | .user-info{ 4 | 5 | &__item { 6 | display: inline-block; 7 | margin-right: $user-info--margin; 8 | } 9 | 10 | &__name { 11 | @extend .user-info__item; 12 | } 13 | 14 | &__logout { 15 | @extend .reset-link; 16 | @extend .user-info__item; 17 | @extend .fa; 18 | @extend .fa-power-off; 19 | color: $primary; 20 | } 21 | } -------------------------------------------------------------------------------- /source/stylesheets/layouts/_home.scss: -------------------------------------------------------------------------------- 1 | body.home{ 2 | .main-content { 3 | .marsman-template { 4 | padding-top: 1.5em; 5 | padding-bottom: 3em; 6 | width: 100%; 7 | height: auto; 8 | @media (min-width: $screen-sm){ 9 | height: 200px; 10 | } 11 | } 12 | .list-pages{ 13 | max-width: 800px; 14 | margin: auto; 15 | padding-bottom: 3em; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /source/stylesheets/layouts/_primary.scss: -------------------------------------------------------------------------------- 1 | body.primary{ 2 | .wrapper{ 3 | height: 100%; 4 | top: 0; 5 | } 6 | 7 | .main-content { 8 | color: white; 9 | background-repeat: repeat-x; 10 | background-color: $primary; 11 | background-image: linear-gradient(to bottom, $primary 30%, 12 | lighten($primary, 10%) 100%); 13 | } 14 | 15 | .box { 16 | box-shadow: 0 1.6rem 3.3rem rgba(black, .28); 17 | color: $font-color; 18 | } 19 | 20 | .container-xs{ 21 | .box__content{ 22 | max-width: 30rem; 23 | padding-left: 0; 24 | padding-right: 0; 25 | margin-left: auto; 26 | margin-right: auto; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /source/stylesheets/layouts/_toolkit.scss: -------------------------------------------------------------------------------- 1 | body.toolkit{ 2 | padding-top: 4rem; 3 | padding-bottom: 4rem; 4 | 5 | .toolkit{ 6 | &__container{ 7 | @extend .container; 8 | @media (min-width: $screen-sm){ 9 | padding-left: $gutter; 10 | padding-right: $gutter; 11 | } 12 | } 13 | 14 | &__row{ 15 | @media (min-width: $screen-sm ){ 16 | @include make-row($gutter*2) 17 | } 18 | } 19 | 20 | &__item{ 21 | margin-bottom: 4rem; 22 | @media (min-width: $screen-sm ){ 23 | @include make-column(6, $gutter*2); 24 | } 25 | } 26 | 27 | &__block{ 28 | margin-bottom: 4rem; 29 | } 30 | 31 | &__checkboxes { 32 | @extend .toolkit__block; 33 | } 34 | 35 | &__table{ 36 | display: table; 37 | width: 100%; 38 | } 39 | &__cell{ 40 | display: table-cell; 41 | text-align: center; 42 | &:first-of-type{ 43 | text-align: left; 44 | } 45 | &:last-of-type{ 46 | text-align: right; 47 | } 48 | } 49 | } 50 | 51 | .typography{ 52 | &__container{ 53 | display: block; 54 | clear: both; 55 | padding-left: $gutter/2; 56 | padding-right: $gutter/2; 57 | @media (min-width: 500px) and (max-width: $screen-sm - 1){ 58 | clear: none; 59 | margin-left: 25%; 60 | padding-left: $gutter/2; 61 | } 62 | @media (min-width: $screen-sm){ 63 | clear: none; 64 | margin-left: 25%; 65 | padding-left: $gutter/2; 66 | } 67 | } 68 | 69 | &__item{ 70 | @include clearfix; 71 | @include ellipsis; 72 | padding-right: $gutter/2; 73 | text-align: right; 74 | color: $font-color-light; 75 | } 76 | 77 | &__title{ 78 | color: $font-color; 79 | float: left; 80 | margin-right: .3em; 81 | } 82 | 83 | &__h1{ 84 | @extend .typography__item; 85 | @extend .h1; 86 | } 87 | 88 | &__h2{ 89 | @extend .typography__item; 90 | @extend .h2; 91 | } 92 | 93 | &__base{ 94 | @extend .typography__item; 95 | } 96 | 97 | &__small{ 98 | @extend .typography__item; 99 | @extend .small; 100 | } 101 | 102 | } 103 | } -------------------------------------------------------------------------------- /source/stylesheets/plugins/_tippy.scss: -------------------------------------------------------------------------------- 1 | $tooltip--color: #eef2f2; 2 | $label--color: #333; 3 | $z-tooltip: 9; 4 | 5 | .tippy-touch { 6 | cursor: pointer !important; 7 | } 8 | .tippy-notransition { 9 | transition: none !important; 10 | } 11 | .tippy-popper { 12 | max-width: 350px; 13 | -webkit-perspective: 700px; 14 | perspective: 700px; 15 | z-index: $z-tooltip !important; 16 | outline: 0; 17 | transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 18 | pointer-events: none; 19 | line-height: 1.4; 20 | } 21 | .tippy-popper[data-html] { 22 | max-width: 96%; 23 | max-width: calc(100% - 20px); 24 | } 25 | .tippy-popper[x-placement^='top'] .tippy-backdrop { 26 | border-radius: 40% 40% 0 0; 27 | } 28 | .tippy-popper[x-placement^='top'] .tippy-roundarrow { 29 | bottom: -8px; 30 | -webkit-transform-origin: 50% 0; 31 | transform-origin: 50% 0; 32 | } 33 | .tippy-popper[x-placement^='top'] .tippy-roundarrow svg { 34 | position: absolute; 35 | left: 0; 36 | -webkit-transform: rotate(180deg); 37 | transform: rotate(180deg); 38 | } 39 | .tippy-popper[x-placement^='top'] .tippy-arrow { 40 | border-top: 7px solid $tooltip--color; 41 | border-right: 7px solid transparent; 42 | border-left: 7px solid transparent; 43 | bottom: -7px; 44 | margin: 0 6px; 45 | -webkit-transform-origin: 50% 0; 46 | transform-origin: 50% 0; 47 | } 48 | .tippy-popper[x-placement^='top'] .tippy-backdrop { 49 | -webkit-transform-origin: 0 90%; 50 | transform-origin: 0 90%; 51 | } 52 | .tippy-popper[x-placement^='top'] .tippy-backdrop[data-state='visible'] { 53 | -webkit-transform: scale(6) translate(-50%, 25%); 54 | transform: scale(6) translate(-50%, 25%); 55 | opacity: 1; 56 | } 57 | .tippy-popper[x-placement^='top'] .tippy-backdrop[data-state='hidden'] { 58 | -webkit-transform: scale(1) translate(-50%, 25%); 59 | transform: scale(1) translate(-50%, 25%); 60 | opacity: 0; 61 | } 62 | .tippy-popper[x-placement^='top'] 63 | [data-animation='shift-toward'][data-state='visible'] { 64 | opacity: 1; 65 | -webkit-transform: translateY(-10px); 66 | transform: translateY(-10px); 67 | } 68 | .tippy-popper[x-placement^='top'] 69 | [data-animation='shift-toward'][data-state='hidden'] { 70 | opacity: 0; 71 | -webkit-transform: translateY(-20px); 72 | transform: translateY(-20px); 73 | } 74 | .tippy-popper[x-placement^='top'] [data-animation='perspective'] { 75 | -webkit-transform-origin: bottom; 76 | transform-origin: bottom; 77 | } 78 | .tippy-popper[x-placement^='top'] 79 | [data-animation='perspective'][data-state='visible'] { 80 | opacity: 1; 81 | -webkit-transform: translateY(-10px) rotateX(0); 82 | transform: translateY(-10px) rotateX(0); 83 | } 84 | .tippy-popper[x-placement^='top'] 85 | [data-animation='perspective'][data-state='hidden'] { 86 | opacity: 0; 87 | -webkit-transform: translateY(0) rotateX(90deg); 88 | transform: translateY(0) rotateX(90deg); 89 | } 90 | .tippy-popper[x-placement^='top'] 91 | [data-animation='fade'][data-state='visible'] { 92 | opacity: 1; 93 | -webkit-transform: translateY(-10px); 94 | transform: translateY(-10px); 95 | } 96 | .tippy-popper[x-placement^='top'] [data-animation='fade'][data-state='hidden'] { 97 | opacity: 0; 98 | -webkit-transform: translateY(-10px); 99 | transform: translateY(-10px); 100 | } 101 | .tippy-popper[x-placement^='top'] 102 | [data-animation='shift-away'][data-state='visible'] { 103 | opacity: 1; 104 | -webkit-transform: translateY(-10px); 105 | transform: translateY(-10px); 106 | } 107 | .tippy-popper[x-placement^='top'] 108 | [data-animation='shift-away'][data-state='hidden'] { 109 | opacity: 0; 110 | -webkit-transform: translateY(0); 111 | transform: translateY(0); 112 | } 113 | .tippy-popper[x-placement^='top'] 114 | [data-animation='scale'][data-state='visible'] { 115 | opacity: 1; 116 | -webkit-transform: translateY(-10px) scale(1); 117 | transform: translateY(-10px) scale(1); 118 | } 119 | .tippy-popper[x-placement^='top'] 120 | [data-animation='scale'][data-state='hidden'] { 121 | opacity: 0; 122 | -webkit-transform: translateY(0) scale(0); 123 | transform: translateY(0) scale(0); 124 | } 125 | .tippy-popper[x-placement^='bottom'] .tippy-backdrop { 126 | border-radius: 0 0 30% 30%; 127 | } 128 | .tippy-popper[x-placement^='bottom'] .tippy-roundarrow { 129 | top: -8px; 130 | -webkit-transform-origin: 50% 100%; 131 | transform-origin: 50% 100%; 132 | } 133 | .tippy-popper[x-placement^='bottom'] .tippy-roundarrow svg { 134 | position: absolute; 135 | left: 0; 136 | -webkit-transform: rotate(0); 137 | transform: rotate(0); 138 | } 139 | .tippy-popper[x-placement^='bottom'] .tippy-arrow { 140 | border-bottom: 7px solid $tooltip--color; 141 | border-right: 7px solid transparent; 142 | border-left: 7px solid transparent; 143 | top: -7px; 144 | margin: 0 6px; 145 | -webkit-transform-origin: 50% 100%; 146 | transform-origin: 50% 100%; 147 | } 148 | .tippy-popper[x-placement^='bottom'] .tippy-backdrop { 149 | -webkit-transform-origin: 0 -90%; 150 | transform-origin: 0 -90%; 151 | } 152 | .tippy-popper[x-placement^='bottom'] .tippy-backdrop[data-state='visible'] { 153 | -webkit-transform: scale(6) translate(-50%, -125%); 154 | transform: scale(6) translate(-50%, -125%); 155 | opacity: 1; 156 | } 157 | .tippy-popper[x-placement^='bottom'] .tippy-backdrop[data-state='hidden'] { 158 | -webkit-transform: scale(1) translate(-50%, -125%); 159 | transform: scale(1) translate(-50%, -125%); 160 | opacity: 0; 161 | } 162 | .tippy-popper[x-placement^='bottom'] 163 | [data-animation='shift-toward'][data-state='visible'] { 164 | opacity: 1; 165 | -webkit-transform: translateY(10px); 166 | transform: translateY(10px); 167 | } 168 | .tippy-popper[x-placement^='bottom'] 169 | [data-animation='shift-toward'][data-state='hidden'] { 170 | opacity: 0; 171 | -webkit-transform: translateY(20px); 172 | transform: translateY(20px); 173 | } 174 | .tippy-popper[x-placement^='bottom'] [data-animation='perspective'] { 175 | -webkit-transform-origin: top; 176 | transform-origin: top; 177 | } 178 | .tippy-popper[x-placement^='bottom'] 179 | [data-animation='perspective'][data-state='visible'] { 180 | opacity: 1; 181 | -webkit-transform: translateY(10px) rotateX(0); 182 | transform: translateY(10px) rotateX(0); 183 | } 184 | .tippy-popper[x-placement^='bottom'] 185 | [data-animation='perspective'][data-state='hidden'] { 186 | opacity: 0; 187 | -webkit-transform: translateY(0) rotateX(-90deg); 188 | transform: translateY(0) rotateX(-90deg); 189 | } 190 | .tippy-popper[x-placement^='bottom'] 191 | [data-animation='fade'][data-state='visible'] { 192 | opacity: 1; 193 | -webkit-transform: translateY(10px); 194 | transform: translateY(10px); 195 | } 196 | .tippy-popper[x-placement^='bottom'] 197 | [data-animation='fade'][data-state='hidden'] { 198 | opacity: 0; 199 | -webkit-transform: translateY(10px); 200 | transform: translateY(10px); 201 | } 202 | .tippy-popper[x-placement^='bottom'] 203 | [data-animation='shift-away'][data-state='visible'] { 204 | opacity: 1; 205 | -webkit-transform: translateY(10px); 206 | transform: translateY(10px); 207 | } 208 | .tippy-popper[x-placement^='bottom'] 209 | [data-animation='shift-away'][data-state='hidden'] { 210 | opacity: 0; 211 | -webkit-transform: translateY(0); 212 | transform: translateY(0); 213 | } 214 | .tippy-popper[x-placement^='bottom'] 215 | [data-animation='scale'][data-state='visible'] { 216 | opacity: 1; 217 | -webkit-transform: translateY(10px) scale(1); 218 | transform: translateY(10px) scale(1); 219 | } 220 | .tippy-popper[x-placement^='bottom'] 221 | [data-animation='scale'][data-state='hidden'] { 222 | opacity: 0; 223 | -webkit-transform: translateY(0) scale(0); 224 | transform: translateY(0) scale(0); 225 | } 226 | .tippy-popper[x-placement^='left'] .tippy-backdrop { 227 | border-radius: 50% 0 0 50%; 228 | } 229 | .tippy-popper[x-placement^='left'] .tippy-roundarrow { 230 | right: -16px; 231 | -webkit-transform-origin: 33.33333333% 50%; 232 | transform-origin: 33.33333333% 50%; 233 | } 234 | .tippy-popper[x-placement^='left'] .tippy-roundarrow svg { 235 | position: absolute; 236 | left: 0; 237 | -webkit-transform: rotate(90deg); 238 | transform: rotate(90deg); 239 | } 240 | .tippy-popper[x-placement^='left'] .tippy-arrow { 241 | border-left: 7px solid $tooltip--color; 242 | border-top: 7px solid transparent; 243 | border-bottom: 7px solid transparent; 244 | right: -7px; 245 | margin: 3px 0; 246 | -webkit-transform-origin: 0 50%; 247 | transform-origin: 0 50%; 248 | } 249 | .tippy-popper[x-placement^='left'] .tippy-backdrop { 250 | -webkit-transform-origin: 100% 0; 251 | transform-origin: 100% 0; 252 | } 253 | .tippy-popper[x-placement^='left'] .tippy-backdrop[data-state='visible'] { 254 | -webkit-transform: scale(6) translate(40%, -50%); 255 | transform: scale(6) translate(40%, -50%); 256 | opacity: 1; 257 | } 258 | .tippy-popper[x-placement^='left'] .tippy-backdrop[data-state='hidden'] { 259 | -webkit-transform: scale(1.5) translate(40%, -50%); 260 | transform: scale(1.5) translate(40%, -50%); 261 | opacity: 0; 262 | } 263 | .tippy-popper[x-placement^='left'] 264 | [data-animation='shift-toward'][data-state='visible'] { 265 | opacity: 1; 266 | -webkit-transform: translateX(-10px); 267 | transform: translateX(-10px); 268 | } 269 | .tippy-popper[x-placement^='left'] 270 | [data-animation='shift-toward'][data-state='hidden'] { 271 | opacity: 0; 272 | -webkit-transform: translateX(-20px); 273 | transform: translateX(-20px); 274 | } 275 | .tippy-popper[x-placement^='left'] [data-animation='perspective'] { 276 | -webkit-transform-origin: right; 277 | transform-origin: right; 278 | } 279 | .tippy-popper[x-placement^='left'] 280 | [data-animation='perspective'][data-state='visible'] { 281 | opacity: 1; 282 | -webkit-transform: translateX(-10px) rotateY(0); 283 | transform: translateX(-10px) rotateY(0); 284 | } 285 | .tippy-popper[x-placement^='left'] 286 | [data-animation='perspective'][data-state='hidden'] { 287 | opacity: 0; 288 | -webkit-transform: translateX(0) rotateY(-90deg); 289 | transform: translateX(0) rotateY(-90deg); 290 | } 291 | .tippy-popper[x-placement^='left'] 292 | [data-animation='fade'][data-state='visible'] { 293 | opacity: 1; 294 | -webkit-transform: translateX(-10px); 295 | transform: translateX(-10px); 296 | } 297 | .tippy-popper[x-placement^='left'] 298 | [data-animation='fade'][data-state='hidden'] { 299 | opacity: 0; 300 | -webkit-transform: translateX(-10px); 301 | transform: translateX(-10px); 302 | } 303 | .tippy-popper[x-placement^='left'] 304 | [data-animation='shift-away'][data-state='visible'] { 305 | opacity: 1; 306 | -webkit-transform: translateX(-10px); 307 | transform: translateX(-10px); 308 | } 309 | .tippy-popper[x-placement^='left'] 310 | [data-animation='shift-away'][data-state='hidden'] { 311 | opacity: 0; 312 | -webkit-transform: translateX(0); 313 | transform: translateX(0); 314 | } 315 | .tippy-popper[x-placement^='left'] 316 | [data-animation='scale'][data-state='visible'] { 317 | opacity: 1; 318 | -webkit-transform: translateX(-10px) scale(1); 319 | transform: translateX(-10px) scale(1); 320 | } 321 | .tippy-popper[x-placement^='left'] 322 | [data-animation='scale'][data-state='hidden'] { 323 | opacity: 0; 324 | -webkit-transform: translateX(0) scale(0); 325 | transform: translateX(0) scale(0); 326 | } 327 | .tippy-popper[x-placement^='right'] .tippy-backdrop { 328 | border-radius: 0 50% 50% 0; 329 | } 330 | .tippy-popper[x-placement^='right'] .tippy-roundarrow { 331 | left: -16px; 332 | -webkit-transform-origin: 66.66666666% 50%; 333 | transform-origin: 66.66666666% 50%; 334 | } 335 | .tippy-popper[x-placement^='right'] .tippy-roundarrow svg { 336 | position: absolute; 337 | left: 0; 338 | -webkit-transform: rotate(-90deg); 339 | transform: rotate(-90deg); 340 | } 341 | .tippy-popper[x-placement^='right'] .tippy-arrow { 342 | border-right: 7px solid $tooltip--color; 343 | border-top: 6px solid transparent; 344 | border-bottom: 6px solid transparent; 345 | left: -7px; 346 | margin: 3px 0; 347 | -webkit-transform-origin: 100% 50%; 348 | transform-origin: 100% 50%; 349 | } 350 | .tippy-popper[x-placement^='right'] .tippy-backdrop { 351 | -webkit-transform-origin: -100% 0; 352 | transform-origin: -100% 0; 353 | } 354 | .tippy-popper[x-placement^='right'] .tippy-backdrop[data-state='visible'] { 355 | -webkit-transform: scale(6) translate(-140%, -50%); 356 | transform: scale(6) translate(-140%, -50%); 357 | opacity: 1; 358 | } 359 | .tippy-popper[x-placement^='right'] .tippy-backdrop[data-state='hidden'] { 360 | -webkit-transform: scale(1.5) translate(-140%, -50%); 361 | transform: scale(1.5) translate(-140%, -50%); 362 | opacity: 0; 363 | } 364 | .tippy-popper[x-placement^='right'] 365 | [data-animation='shift-toward'][data-state='visible'] { 366 | opacity: 1; 367 | -webkit-transform: translateX(10px); 368 | transform: translateX(10px); 369 | } 370 | .tippy-popper[x-placement^='right'] 371 | [data-animation='shift-toward'][data-state='hidden'] { 372 | opacity: 0; 373 | -webkit-transform: translateX(20px); 374 | transform: translateX(20px); 375 | } 376 | .tippy-popper[x-placement^='right'] [data-animation='perspective'] { 377 | -webkit-transform-origin: left; 378 | transform-origin: left; 379 | } 380 | .tippy-popper[x-placement^='right'] 381 | [data-animation='perspective'][data-state='visible'] { 382 | opacity: 1; 383 | -webkit-transform: translateX(10px) rotateY(0); 384 | transform: translateX(10px) rotateY(0); 385 | } 386 | .tippy-popper[x-placement^='right'] 387 | [data-animation='perspective'][data-state='hidden'] { 388 | opacity: 0; 389 | -webkit-transform: translateX(0) rotateY(90deg); 390 | transform: translateX(0) rotateY(90deg); 391 | } 392 | .tippy-popper[x-placement^='right'] 393 | [data-animation='fade'][data-state='visible'] { 394 | opacity: 1; 395 | -webkit-transform: translateX(10px); 396 | transform: translateX(10px); 397 | } 398 | .tippy-popper[x-placement^='right'] 399 | [data-animation='fade'][data-state='hidden'] { 400 | opacity: 0; 401 | -webkit-transform: translateX(10px); 402 | transform: translateX(10px); 403 | } 404 | .tippy-popper[x-placement^='right'] 405 | [data-animation='shift-away'][data-state='visible'] { 406 | opacity: 1; 407 | -webkit-transform: translateX(10px); 408 | transform: translateX(10px); 409 | } 410 | .tippy-popper[x-placement^='right'] 411 | [data-animation='shift-away'][data-state='hidden'] { 412 | opacity: 0; 413 | -webkit-transform: translateX(0); 414 | transform: translateX(0); 415 | } 416 | .tippy-popper[x-placement^='right'] 417 | [data-animation='scale'][data-state='visible'] { 418 | opacity: 1; 419 | -webkit-transform: translateX(10px) scale(1); 420 | transform: translateX(10px) scale(1); 421 | } 422 | .tippy-popper[x-placement^='right'] 423 | [data-animation='scale'][data-state='hidden'] { 424 | opacity: 0; 425 | -webkit-transform: translateX(0) scale(0); 426 | transform: translateX(0) scale(0); 427 | } 428 | .tippy-tooltip { 429 | position: relative; 430 | background: $tooltip--color; 431 | color: $label--color; 432 | font-size: 1.1rem; 433 | border-radius: 3px; 434 | padding: 0.5rem 1rem; 435 | will-change: transform; 436 | @media (min-width: $grid-breakpoint) { 437 | width: 200px; 438 | } 439 | } 440 | // .tippy-tooltip[data-size='small'] { 441 | // padding: 0.2rem 0.4rem; 442 | // font-size: 0.75rem; 443 | // } 444 | // .tippy-tooltip[data-size='large'] { 445 | // padding: 0.4rem 0.8rem; 446 | // font-size: 1rem; 447 | // } 448 | .tippy-tooltip[data-animatefill] { 449 | overflow: hidden; 450 | background-color: transparent; 451 | } 452 | .tippy-tooltip[data-animatefill] .tippy-content { 453 | transition: -webkit-clip-path cubic-bezier(0.46, 0.1, 0.52, 0.98); 454 | transition: clip-path cubic-bezier(0.46, 0.1, 0.52, 0.98); 455 | transition: clip-path cubic-bezier(0.46, 0.1, 0.52, 0.98), 456 | -webkit-clip-path cubic-bezier(0.46, 0.1, 0.52, 0.98); 457 | } 458 | .tippy-tooltip[data-interactive], 459 | .tippy-tooltip[data-interactive] path { 460 | pointer-events: auto; 461 | } 462 | .tippy-tooltip[data-inertia][data-state='visible'] { 463 | transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); 464 | } 465 | .tippy-tooltip[data-inertia][data-state='hidden'] { 466 | transition-timing-function: ease; 467 | } 468 | .tippy-arrow, 469 | .tippy-roundarrow { 470 | position: absolute; 471 | width: 0; 472 | height: 0; 473 | } 474 | .tippy-roundarrow { 475 | width: 24px; 476 | height: 8px; 477 | fill: $tooltip--color; 478 | pointer-events: none; 479 | } 480 | .tippy-backdrop { 481 | position: absolute; 482 | will-change: transform; 483 | background: $tooltip--color; 484 | border-radius: 50%; 485 | width: 26%; 486 | left: 50%; 487 | top: 50%; 488 | z-index: -1; 489 | transition: all cubic-bezier(0.46, 0.1, 0.52, 0.98); 490 | -webkit-backface-visibility: hidden; 491 | backface-visibility: hidden; 492 | } 493 | .tippy-backdrop:after { 494 | content: ''; 495 | float: left; 496 | padding-top: 100%; 497 | } 498 | body:not(.tippy-touch) 499 | .tippy-tooltip[data-animatefill][data-state='visible'] 500 | .tippy-content { 501 | -webkit-clip-path: ellipse(100% 100% at 50% 50%); 502 | clip-path: ellipse(100% 100% at 50% 50%); 503 | } 504 | body:not(.tippy-touch) 505 | .tippy-tooltip[data-animatefill][data-state='hidden'] 506 | .tippy-content { 507 | -webkit-clip-path: ellipse(5% 50% at 50% 50%); 508 | clip-path: ellipse(5% 50% at 50% 50%); 509 | } 510 | body:not(.tippy-touch) 511 | .tippy-popper[x-placement='right'] 512 | .tippy-tooltip[data-animatefill][data-state='visible'] 513 | .tippy-content { 514 | -webkit-clip-path: ellipse(135% 100% at 0 50%); 515 | clip-path: ellipse(135% 100% at 0 50%); 516 | } 517 | body:not(.tippy-touch) 518 | .tippy-popper[x-placement='right'] 519 | .tippy-tooltip[data-animatefill][data-state='hidden'] 520 | .tippy-content { 521 | -webkit-clip-path: ellipse(40% 100% at 0 50%); 522 | clip-path: ellipse(40% 100% at 0 50%); 523 | } 524 | body:not(.tippy-touch) 525 | .tippy-popper[x-placement='left'] 526 | .tippy-tooltip[data-animatefill][data-state='visible'] 527 | .tippy-content { 528 | -webkit-clip-path: ellipse(135% 100% at 100% 50%); 529 | clip-path: ellipse(135% 100% at 100% 50%); 530 | } 531 | body:not(.tippy-touch) 532 | .tippy-popper[x-placement='left'] 533 | .tippy-tooltip[data-animatefill][data-state='hidden'] 534 | .tippy-content { 535 | -webkit-clip-path: ellipse(40% 100% at 100% 50%); 536 | clip-path: ellipse(40% 100% at 100% 50%); 537 | } 538 | @media (max-width: 360px) { 539 | .tippy-popper { 540 | max-width: 96%; 541 | max-width: calc(100% - 20px); 542 | } 543 | } 544 | -------------------------------------------------------------------------------- /source/stylesheets/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /source/stylesheets/utilities/_helpers.scss: -------------------------------------------------------------------------------- 1 | @mixin last-margin { 2 | > *:last-child { 3 | margin-bottom: 0; 4 | } 5 | } 6 | 7 | @mixin margin-bottom ($margin-bottom: .8em) { 8 | margin-bottom: $margin-bottom; 9 | &:last-child { 10 | margin-bottom: 0; 11 | } 12 | } 13 | 14 | @mixin focus ($color: $secondary, $opacity: .4) { 15 | box-shadow: 0 0 4px rgba($color,$opacity); 16 | outline: none; 17 | } 18 | 19 | @mixin ellipsis { 20 | white-space: nowrap; 21 | overflow: hidden; 22 | text-overflow: ellipsis; 23 | } 24 | 25 | // Helpers 26 | .sr-only { 27 | position: absolute; 28 | width: 1px; 29 | height: 1px; 30 | margin: -1px; 31 | padding: 0; 32 | overflow: hidden; 33 | clip: rect(0,0,0,0); 34 | border: 0; 35 | } 36 | 37 | .reset-link{ 38 | color: inherit; 39 | &:hover, 40 | &.active, 41 | &:focus{ 42 | text-decoration: none; 43 | } 44 | } 45 | 46 | .list-reset{ 47 | margin-left: 0; 48 | margin-right: 0; 49 | padding-left: 0; 50 | padding-right: 0; 51 | list-style: none; 52 | } 53 | 54 | .list-inline{ 55 | > li{ 56 | display: inline-block; 57 | vertical-align: top; 58 | } 59 | 60 | > dt{ 61 | clear: both; 62 | margin-right: 0.3em; 63 | } 64 | 65 | > dt, 66 | > dd{ 67 | float: left; 68 | margin-bottom: 0; 69 | } 70 | } 71 | 72 | .pull-right { 73 | float: right !important; 74 | } 75 | 76 | .pull-left { 77 | float: left !important; 78 | } 79 | 80 | .align-center{ 81 | text-align: center; 82 | } 83 | 84 | .align-right { 85 | text-align: right; 86 | } 87 | 88 | .align-left { 89 | text-align: left; 90 | } 91 | 92 | .vertical-middle { 93 | vertical-align: middle; 94 | } 95 | 96 | .nowrapp { 97 | white-space: nowrap; 98 | } 99 | 100 | .vertical-relative{ 101 | position: relative; 102 | top: 50%; 103 | transform: translateY(-50%); 104 | } 105 | 106 | .hidden{ 107 | display: none; 108 | } 109 | 110 | @each $color in $colors { 111 | .bg-#{nth($color, 1)} { 112 | background-color: nth($color, 2); 113 | @if(nth($color, 3)){ 114 | color: nth($color, 3); 115 | } 116 | } 117 | 118 | .text-#{nth($color, 1)} { 119 | color: nth($color, 2); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /source/stylesheets/utilities/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Keyframes 2 | 3 | @keyframes fadeIn { 4 | 0% { 5 | opacity: 0 6 | } 7 | 100% { 8 | opacity: 1 9 | } 10 | } 11 | 12 | @keyframes fadeOut { 13 | 0%{ 14 | opacity: 1 15 | } 16 | 100%{ 17 | opacity: 0 18 | } 19 | } 20 | 21 | @keyframes shadow { 22 | 0% { 23 | box-shadow: 0; 24 | } 25 | 50% { 26 | box-shadow: 0 2px 6px rgba(black, .12); 27 | } 28 | 100% { 29 | box-shadow: $shadow; 30 | } 31 | } 32 | 33 | @keyframes bottom-down { 34 | 0% { 35 | transform: translateY(0); 36 | } 37 | 100% { 38 | transform: translateY(5px); 39 | } 40 | } 41 | 42 | @keyframes escale10 { 43 | 0% { 44 | transform: scale(1); 45 | } 46 | 60% { 47 | transform: scale(1); 48 | } 49 | 80% { 50 | transform: scale(1.1); 51 | } 52 | 100% { 53 | transform: scale(1); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /source/stylesheets/utilities/_mixins.scss: -------------------------------------------------------------------------------- 1 | @function font-url($font-name) { 2 | $fonts-path: '~assets/fonts/' !default; 3 | @return url(quote($fonts-path + $url)); 4 | } 5 | 6 | @function image-url($url) { 7 | $images-path: '~assets/images/' !default; 8 | @return url(quote($images-path + $url)); 9 | } 10 | -------------------------------------------------------------------------------- /source/stylesheets/utilities/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | // 4 | // 1. Set default font family to sans-serif. 5 | // 2. Prevent iOS text size adjust after orientation change, without disabling 6 | // user zoom. 7 | // 8 | 9 | html { 10 | font-family: sans-serif; // 1 11 | -ms-text-size-adjust: 100%; // 2 12 | -webkit-text-size-adjust: 100%; // 2 13 | } 14 | 15 | // 16 | // Remove default margin. 17 | // 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | // HTML5 display definitions 24 | // ========================================================================== 25 | 26 | // 27 | // Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | // and Firefox. 30 | // Correct `block` display not defined for `main` in IE 11. 31 | // 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | // 50 | // 1. Correct `inline-block` display not defined in IE 8/9. 51 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | // 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; // 1 59 | vertical-align: baseline; // 2 60 | } 61 | 62 | // 63 | // Prevent modern browsers from displaying `audio` without controls. 64 | // Remove excess height in iOS 5 devices. 65 | // 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | // 73 | // Address `[hidden]` styling not present in IE 8/9/10. 74 | // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | // 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | // Links 83 | // ========================================================================== 84 | 85 | // 86 | // Remove the gray background color from active links in IE 10. 87 | // 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | // 94 | // Improve readability when focused and also mouse hovered in all browsers. 95 | // 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | // Text-level semantics 103 | // ========================================================================== 104 | 105 | // 106 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | // 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | // 114 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | // 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | // 123 | // Address styling not present in Safari and Chrome. 124 | // 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | // 131 | // Address variable `h1` font-size and margin within `section` and `article` 132 | // contexts in Firefox 4+, Safari, and Chrome. 133 | // 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | // 141 | // Address styling not present in IE 8/9. 142 | // 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | // 150 | // Address inconsistent and variable font size in all browsers. 151 | // 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | // 158 | // Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | // 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | // Embedded content 178 | // ========================================================================== 179 | 180 | // 181 | // Remove border when inside `a` element in IE 8/9/10. 182 | // 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | // 189 | // Correct overflow not hidden in IE 9/10/11. 190 | // 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | // Grouping content 197 | // ========================================================================== 198 | 199 | // 200 | // Address margin not present in IE 8/9 and Safari. 201 | // 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | // 208 | // Address differences between Firefox and other browsers. 209 | // 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | // 218 | // Contain overflow in all browsers. 219 | // 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | // 226 | // Address odd `em`-unit font size rendering in all browsers. 227 | // 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | // Forms 238 | // ========================================================================== 239 | 240 | // 241 | // Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | // styling of `select`, unless a `border` property is set. 243 | // 244 | 245 | // 246 | // 1. Correct color not being inherited. 247 | // Known issue: affects color of disabled elements. 248 | // 2. Correct font properties not being inherited. 249 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | // 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; // 1 258 | font: inherit; // 2 259 | margin: 0; // 3 260 | } 261 | 262 | // 263 | // Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | // 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | // 271 | // Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | // All other form control elements do not inherit `text-transform` values. 273 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | // Correct `select` style inheritance in Firefox. 275 | // 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | // 283 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | // and `video` controls. 285 | // 2. Correct inability to style clickable `input` types in iOS. 286 | // 3. Improve usability and consistency of cursor style between image-type 287 | // `input` and others. 288 | // 289 | 290 | button, 291 | html input[type="button"], // 1 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; // 2 295 | cursor: pointer; // 3 296 | } 297 | 298 | // 299 | // Re-set default cursor for disabled elements. 300 | // 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | // 308 | // Remove inner padding and border in Firefox 4+. 309 | // 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | // 318 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | // the UA stylesheet. 320 | // 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | // 327 | // It's recommended that you don't attempt to style these elements. 328 | // Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | // 330 | // 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | // 2. Remove excess padding in IE 8/9/10. 332 | // 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; // 1 337 | padding: 0; // 2 338 | } 339 | 340 | // 341 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | // `font-size` values of the `input`, it causes the cursor style of the 343 | // decrement button to change from `default` to `text`. 344 | // 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | // 352 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | // (include `-moz` to future-proof). 355 | // 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; // 1 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; // 2 361 | box-sizing: content-box; 362 | } 363 | 364 | // 365 | // Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | // Safari (but not Chrome) clips the cancel button when the search input has 367 | // padding (and `textfield` appearance). 368 | // 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | // 376 | // Define consistent border, margin, and padding. 377 | // 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | // 386 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | // 389 | 390 | legend { 391 | border: 0; // 1 392 | padding: 0; // 2 393 | } 394 | 395 | // 396 | // Remove default vertical scrollbar in IE 8/9/10/11. 397 | // 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | // 404 | // Don't inherit the `font-weight` (applied by a rule above). 405 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | // 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | // Tables 413 | // ========================================================================== 414 | 415 | // 416 | // Remove most spacing between table cells. 417 | // 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /source/stylesheets/utilities/_variables.scss: -------------------------------------------------------------------------------- 1 | //COLORS 2 | $font-color: #22252A; 3 | $font-color-light: #555A63; 4 | $background-primary: #F9F9F9; 5 | $background-secondary:#FFFFFF; 6 | $primary: #E74C3C; 7 | $primary-light: #F1C3BF; 8 | $primary-lighter: #F9F2F2; 9 | $secondary: #22252A; 10 | $secondary-light: #555A63; 11 | $secondary-lighter: #E6E9EE; 12 | $border-color: #E6E9EE; 13 | $success: #57BC27; 14 | $warning: #F9B13D; 15 | $text-negative: white; 16 | 17 | //name //color //text or false 18 | $colors: "primary" $primary $text-negative, 19 | "primary-light" $primary-light $text-negative, 20 | "primary-lighter" $primary-lighter false, 21 | "secondary" $secondary $text-negative, 22 | "secondary-light" $secondary-light $text-negative, 23 | "secondary-lighter" $secondary-lighter false, 24 | "font-color" $font-color $text-negative, 25 | "font-color-light" $font-color-light $text-negative, 26 | "background-primary" $background-primary false, 27 | "background-secondary" $background-secondary false, 28 | "white" white false, 29 | "black" black $text-negative, 30 | "success" $success $text-negative, 31 | "warning" $warning $text-negative; 32 | 33 | $gutter: 2.4rem; 34 | $header-height: 7rem; 35 | $header-height-breakpoint: 5rem; 36 | $nav-responsive-width: 26rem; 37 | 38 | $components-line-height: normal; 39 | $components-padding: .4em 1em; 40 | 41 | $border-radius: 3px; 42 | $shadow: 0 2px 4px rgba(black, .08); 43 | -------------------------------------------------------------------------------- /source/terms-and-conditions.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Terms and conditions 3 | layout: primary 4 | body: sign-in 5 | terms_date: 31/12/2024 6 | terms_url: https://marsman.marsbased.com 7 | terms_company: marsbased 8 | --- 9 | 10 |
11 |

Terms and Conditions ("Terms")

12 |

13 | Last updated: (<%= current_page.data.terms_date %>) 14 |

15 |

16 | Please read these Terms and Conditions ("Terms", "Terms and Conditions") carefully before using the <%= current_page.data.terms_url %> website (the "Service") operated by <%= current_page.data.terms_company %> ("us", "we", or "our"). 17 |

18 |

19 | Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who access or use the Service. 20 |

21 |

22 | By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms then you may not access the Service. 23 |

24 |

Purchases

25 | <%= simple_format lorem.paragraphs(rand(1..6)) %> 26 |

Content

27 | <%= simple_format lorem.paragraphs(rand(1..6)) %> 28 |

Changes

29 | <%= simple_format lorem.paragraphs(rand(1..6)) %> 30 |

Contact

31 | <%= simple_format lorem.paragraphs(rand(1..6)) %> 32 |
33 | -------------------------------------------------------------------------------- /source/toolkit.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toolkit 3 | versions: error 4 | body: toolkit 5 | --- 6 |
7 |
8 |
9 |

Colors

10 |
11 | <% for i in 1..10 %> 12 |
13 |
14 |
15 |
16 |
17 |
18 | <% end %> 19 |
20 |
21 |
22 |

Buttons

23 |
24 |
25 |

Normal

26 |

28 |

30 |

32 |

34 |

35 |
36 |
37 |

Hover/Active

38 |

40 |

42 |

44 |

46 |

47 |
48 |
49 |

Disabled

50 |

52 |

54 |

56 |

58 |
59 |
60 |
61 |
62 |

Loading icons

63 |
64 |
65 |

Right-sided

66 |

67 | 70 |

71 |

Regular text

72 |
73 |
74 |

Left-sided

75 |

76 | 79 |

80 |

Regular text

81 |
82 |
83 |
84 |
85 |
86 |
87 |

Typography

88 |
89 |
90 |
91 |
Aa
92 |
93 |
Karla
94 |
Google Font
95 |
96 |
97 |
98 |
99 |

100 | h1, 24px 101 | Tousled food truck polaroid 102 |

103 |

104 | h2, 16px 105 | Tousled food truck polaroid 106 |

107 |

108 | Text, inputs, links, 14px 109 | Tousled food truck polaroid 110 |

111 |

112 | Buttons, 12px 113 | Tousled food truck polaroid 114 |

115 |
116 |
117 |

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.

118 |
119 |
120 |

Pills and select

121 |
122 |
123 | 151 |
152 |
153 |
154 | 162 | <% if version('error') %> 163 |
About select2_demo.
164 | <% end %> 165 |
166 |
167 | 177 | <% if version('error') %> 178 |
About select2_demo_search
179 | <% end %> 180 |
181 |
182 | 190 | <% if version('error') %> 191 |
Information about this error.
192 | <% end %> 193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |

202 | Forms 203 |

204 |
205 |
206 |
207 |
208 |

Checkboxes

209 |
210 | 211 | With .form-group__item 212 |
213 | 214 | 215 |
216 |
217 | 218 | 219 |
220 |
221 | 223 | 224 |
225 |

226 | <% if version('error')%> 227 | Correct !! 228 | <% end %> 229 |

230 |
231 |
232 | 233 | 235 | 236 | 238 | 239 | 241 | 242 | <% if version('error')%> 243 | Error !! 244 | <% end %> 245 |
246 |
247 |
248 |

Textarea

249 |
250 | 252 |
Information about this textarea.
253 |
254 |
255 |
256 |

Progress-bar

257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |

Profile picture

265 | <%= image_pack_tag('avatar.png')%> 266 |
267 |
268 |

Alerts

269 | <% partial "partials/alert" do %> 270 | JPEG, PNG, GIF or BMP - 5MB file limit, at least 250x250 pixels. 271 | <% end %> 272 | <% partial "partials/alert", locals:{css: 'warning', dismissible: true} do %> 273 | Something really bad has happened. 274 | <% end %> 275 | <% partial "partials/alert", locals:{css: 'success'} do %> 276 | This is fine and requires notification 277 | <% end %> 278 |
279 |
280 |
281 |
282 |
283 |
284 |

Uploader

285 |
286 |
287 | 288 | 291 | <% if version('error') %> 292 |
Information about this success.
293 | <% end %> 294 | 295 |
296 |
297 |
298 |
299 |
300 |

Inputs

301 |
302 | 303 | 304 |
305 |
306 | 308 |
Information about this success.
309 |
310 |
311 | 313 |
Information about this error.
314 |
315 |

Select2

316 |
317 | 318 | 319 |
320 |
321 |
322 | 325 | 327 | 328 |
329 |
330 | 331 | 333 |
334 |
Information about this success.
335 |
336 |
337 | 339 |
Information about this error.
340 |
341 |
342 |
343 |

Dropdown

344 |
345 |
346 | 349 |
    350 |
  • 351 | Signed in as
    352 | <%= Faker::GameOfThrones.character %> 353 |
    • 354 | 355 |
  • 356 | <%= link_to 'Your profile', '/whole-page-text.html' %> 357 |
    • 358 |
  • 359 | <%= link_to ' Sign out', '/sign-in.html' %> 360 |
    • 361 |
362 |
363 |
364 |
365 |
366 | 367 | Link with no-icon align center 368 | 369 |
    370 |
  • 371 | Signed in as
    372 | <%= Faker::GameOfThrones.character %> 373 |
    • 374 | 375 |
  • 376 | <%= link_to 'Your profile', '/whole-page-text.html' %> 377 |
    • 378 |
  • 379 | <%= link_to ' Sign out', '/sign-in.html' %> 380 |
    • 381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 | -------------------------------------------------------------------------------- /source/whole-page-text.html.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to marsman Template 3 | body: whole-page-test 4 | layout: basic 5 | --- 6 | 7 |
8 |
9 |
10 |

Whole page text

11 |

Some information about MarsBased

12 |
13 |
14 |
15 |

<%= Faker::Lorem.paragraph(10) %>

16 |
17 | <%= Faker::Lorem.paragraph(2) %> 18 |
19 |

<%= Faker::Lorem.paragraph(3) %>

20 |

<%= Faker::ChuckNorris.fact %>

21 |

<%= Faker::Lorem.paragraph(5) %>

22 |
23 |
24 |

<%= Faker::ChuckNorris.fact %>

25 |

<%= Faker::Lorem.paragraph(5) %>

26 |

<%= Faker::Lorem.paragraph(2) %>

27 |

28 |
    29 |
  • <%= Faker::GameOfThrones.character %>
    • 30 |
  • <%= Faker::GameOfThrones.character %>
    • 31 |
  • <%= Faker::GameOfThrones.character %>
    • 32 |
33 |
34 |
35 | <%= image_tag(Faker::LoremPixel.image("600x600", false, 'fashion')) %> 36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------