├── classic └── source │ ├── index.js │ └── scss │ ├── app.scss │ ├── _sd-ui.scss │ └── _settings.scss ├── dark └── source │ ├── index.js │ └── scss │ ├── app.scss │ ├── _sd-ui.scss │ └── _settings.scss ├── gradient └── source │ ├── index.js │ └── scss │ ├── app.scss │ ├── _settings.scss │ └── _sd-ui.scss ├── advanced-bootstrap ├── source │ ├── index.js │ └── scss │ │ ├── app.scss │ │ ├── _sd-ui.scss │ │ └── _settings.scss └── index.html ├── .meta ├── webpack.dev.config.js ├── webpack.prod.config.js └── webpack.base.config.js ├── .gitignore ├── LICENSE ├── package.json └── README.md /classic/source/index.js: -------------------------------------------------------------------------------- 1 | require('motion-ui/dist/motion-ui.css'); 2 | require('./scss/app.scss'); 3 | window.jQuery = require('jquery/dist/jquery.min.js'); 4 | require('foundation/dist/foundation.min.js'); 5 | require('motion-ui/dist/motion-ui.js'); 6 | -------------------------------------------------------------------------------- /dark/source/index.js: -------------------------------------------------------------------------------- 1 | require('motion-ui/dist/motion-ui.css'); 2 | require('./scss/app.scss'); 3 | window.jQuery = require('jquery/dist/jquery.min.js'); 4 | require('foundation/dist/foundation.min.js'); 5 | require('motion-ui/dist/motion-ui.js'); 6 | -------------------------------------------------------------------------------- /gradient/source/index.js: -------------------------------------------------------------------------------- 1 | require('motion-ui/dist/motion-ui.css'); 2 | require('./scss/app.scss'); 3 | window.jQuery = require('jquery/dist/jquery.min.js'); 4 | require('foundation/dist/foundation.min.js'); 5 | require('motion-ui/dist/motion-ui.js'); 6 | -------------------------------------------------------------------------------- /advanced-bootstrap/source/index.js: -------------------------------------------------------------------------------- 1 | require('motion-ui/dist/motion-ui.css'); 2 | require('./scss/app.scss'); 3 | window.jQuery = require('jquery/dist/jquery.min.js'); 4 | require('foundation/dist/foundation.min.js'); 5 | require('motion-ui/dist/motion-ui.js'); 6 | -------------------------------------------------------------------------------- /.meta/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | var config = require('./webpack.base.config'); 2 | 3 | config.devtool = 'eval-source-map'; 4 | 5 | config.devServer = { 6 | noInfo: false, 7 | contentBase: config.__themeRoot 8 | }; 9 | 10 | config.output.publicPath = 'dist/'; 11 | 12 | module.exports = config; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .AppleDouble 3 | .LSOverride 4 | Icon 5 | .DocumentRevisions-V100 6 | .fseventsd 7 | .Spotlight-V100 8 | .TemporaryItems 9 | .Trashes 10 | .VolumeIcon.icns 11 | .AppleDB 12 | .AppleDesktop 13 | Network Trash Folder 14 | Temporary Items 15 | .apdisk 16 | 17 | *.iml 18 | .idea/ 19 | .idea_modules/ 20 | 21 | logs 22 | *.log 23 | npm-debug.log* 24 | 25 | node_modules 26 | .sass-cache/ 27 | *.css.map 28 | -------------------------------------------------------------------------------- /.meta/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var config = require('./webpack.base.config'); 3 | 4 | config.plugins = (config.plugins || []).concat([ 5 | new webpack.DefinePlugin({ 6 | 'process.env': { 7 | NODE_ENV: '"production"' 8 | } 9 | }), 10 | // This minifies not only JavaScript, but also 11 | // the templates (with html-minifier) and CSS (with cssnano)! 12 | new webpack.optimize.UglifyJsPlugin({ 13 | compress: { 14 | warnings: false 15 | } 16 | }), 17 | new webpack.optimize.OccurenceOrderPlugin() 18 | ]); 19 | 20 | module.exports = config; 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 SD Web Design 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 | -------------------------------------------------------------------------------- /classic/source/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import "settings"; 2 | @import "foundation"; 3 | 4 | /// include all modules of foundation 5 | @include foundation-everything; 6 | 7 | /// or use just particular mouldes 8 | // @include foundation-global-styles; 9 | // @include foundation-grid; 10 | // @include foundation-typography; 11 | // @include foundation-button; 12 | // @include foundation-forms; 13 | // @include foundation-visibility-classes; 14 | // @include foundation-float-classes; 15 | // @include foundation-accordion; 16 | // @include foundation-accordion-menu; 17 | // @include foundation-badge; 18 | // @include foundation-breadcrumbs; 19 | // @include foundation-button-group; 20 | // @include foundation-callout; 21 | // @include foundation-close-button; 22 | // @include foundation-drilldown-menu; 23 | // @include foundation-dropdown; 24 | // @include foundation-dropdown-menu; 25 | // @include foundation-flex-video; 26 | // @include foundation-label; 27 | // @include foundation-media-object; 28 | // @include foundation-menu; 29 | // @include foundation-off-canvas; 30 | // @include foundation-orbit; 31 | // @include foundation-pagination; 32 | // @include foundation-progress-bar; 33 | // @include foundation-slider; 34 | // @include foundation-sticky; 35 | // @include foundation-reveal; 36 | // @include foundation-switch; 37 | // @include foundation-table; 38 | // @include foundation-tabs; 39 | // @include foundation-thumbnail; 40 | // @include foundation-title-bar; 41 | // @include foundation-tooltip; 42 | // @include foundation-top-bar; 43 | 44 | @import "sd-ui"; -------------------------------------------------------------------------------- /dark/source/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import "settings"; 2 | @import "foundation"; 3 | 4 | /// include all modules of foundation 5 | @include foundation-everything; 6 | 7 | /// or use just particular mouldes 8 | // @include foundation-global-styles; 9 | // @include foundation-grid; 10 | // @include foundation-typography; 11 | // @include foundation-button; 12 | // @include foundation-forms; 13 | // @include foundation-visibility-classes; 14 | // @include foundation-float-classes; 15 | // @include foundation-accordion; 16 | // @include foundation-accordion-menu; 17 | // @include foundation-badge; 18 | // @include foundation-breadcrumbs; 19 | // @include foundation-button-group; 20 | // @include foundation-callout; 21 | // @include foundation-close-button; 22 | // @include foundation-drilldown-menu; 23 | // @include foundation-dropdown; 24 | // @include foundation-dropdown-menu; 25 | // @include foundation-flex-video; 26 | // @include foundation-label; 27 | // @include foundation-media-object; 28 | // @include foundation-menu; 29 | // @include foundation-off-canvas; 30 | // @include foundation-orbit; 31 | // @include foundation-pagination; 32 | // @include foundation-progress-bar; 33 | // @include foundation-slider; 34 | // @include foundation-sticky; 35 | // @include foundation-reveal; 36 | // @include foundation-switch; 37 | // @include foundation-table; 38 | // @include foundation-tabs; 39 | // @include foundation-thumbnail; 40 | // @include foundation-title-bar; 41 | // @include foundation-tooltip; 42 | // @include foundation-top-bar; 43 | 44 | @import "sd-ui"; -------------------------------------------------------------------------------- /gradient/source/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import "settings"; 2 | @import "foundation"; 3 | 4 | /// include all modules of foundation 5 | @include foundation-everything; 6 | 7 | /// or use just particular mouldes 8 | // @include foundation-global-styles; 9 | // @include foundation-grid; 10 | // @include foundation-typography; 11 | // @include foundation-button; 12 | // @include foundation-forms; 13 | // @include foundation-visibility-classes; 14 | // @include foundation-float-classes; 15 | // @include foundation-accordion; 16 | // @include foundation-accordion-menu; 17 | // @include foundation-badge; 18 | // @include foundation-breadcrumbs; 19 | // @include foundation-button-group; 20 | // @include foundation-callout; 21 | // @include foundation-close-button; 22 | // @include foundation-drilldown-menu; 23 | // @include foundation-dropdown; 24 | // @include foundation-dropdown-menu; 25 | // @include foundation-flex-video; 26 | // @include foundation-label; 27 | // @include foundation-media-object; 28 | // @include foundation-menu; 29 | // @include foundation-off-canvas; 30 | // @include foundation-orbit; 31 | // @include foundation-pagination; 32 | // @include foundation-progress-bar; 33 | // @include foundation-slider; 34 | // @include foundation-sticky; 35 | // @include foundation-reveal; 36 | // @include foundation-switch; 37 | // @include foundation-table; 38 | // @include foundation-tabs; 39 | // @include foundation-thumbnail; 40 | // @include foundation-title-bar; 41 | // @include foundation-tooltip; 42 | // @include foundation-top-bar; 43 | 44 | @import "sd-ui"; -------------------------------------------------------------------------------- /advanced-bootstrap/source/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import "settings"; 2 | @import "foundation"; 3 | 4 | /// include all modules of foundation 5 | @include foundation-everything; 6 | 7 | /// or use just particular mouldes 8 | // @include foundation-global-styles; 9 | // @include foundation-grid; 10 | // @include foundation-typography; 11 | // @include foundation-button; 12 | // @include foundation-forms; 13 | // @include foundation-visibility-classes; 14 | // @include foundation-float-classes; 15 | // @include foundation-accordion; 16 | // @include foundation-accordion-menu; 17 | // @include foundation-badge; 18 | // @include foundation-breadcrumbs; 19 | // @include foundation-button-group; 20 | // @include foundation-callout; 21 | // @include foundation-close-button; 22 | // @include foundation-drilldown-menu; 23 | // @include foundation-dropdown; 24 | // @include foundation-dropdown-menu; 25 | // @include foundation-flex-video; 26 | // @include foundation-label; 27 | // @include foundation-media-object; 28 | // @include foundation-menu; 29 | // @include foundation-off-canvas; 30 | // @include foundation-orbit; 31 | // @include foundation-pagination; 32 | // @include foundation-progress-bar; 33 | // @include foundation-slider; 34 | // @include foundation-sticky; 35 | // @include foundation-reveal; 36 | // @include foundation-switch; 37 | // @include foundation-table; 38 | // @include foundation-tabs; 39 | // @include foundation-thumbnail; 40 | // @include foundation-title-bar; 41 | // @include foundation-tooltip; 42 | // @include foundation-top-bar; 43 | 44 | @import "sd-ui"; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "foundation-themes", 3 | "version": "1.0.0", 4 | "description": "Free themes for the most advanced responsive front-end framework in the world.", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --progress --hide-modules --config .meta/webpack.dev.config.js", 8 | "build": "webpack --progress --hide-modules --display-error-details --config .meta/webpack.prod.config.js", 9 | "start": "webpack-dev-server --hide-modules --inline --display-error-details --config .meta/webpack.dev.config.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/es-di/foundation-themes.git" 14 | }, 15 | "keywords": [ 16 | "foundation", 17 | "themes", 18 | "scss", 19 | "js", 20 | "templates" 21 | ], 22 | "author": "SD Web Design", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/es-di/foundation-themes/issues" 26 | }, 27 | "homepage": "https://github.com/es-di/foundation-themes#readme", 28 | "dependencies": { 29 | "css-loader": "^0.25.0", 30 | "extract-text-webpack-plugin": "^1.0.1", 31 | "file-loader": "^0.9.0", 32 | "foundation-sites": "^6.2.3", 33 | "jquery": "^2.2.0", 34 | "motion-ui": "^1.2.2", 35 | "node-sass": "^3.10.0", 36 | "postcss-loader": "^0.13.0", 37 | "sass-loader": "^4.0.2", 38 | "style-loader": "^0.13.1", 39 | "url-loader": "^0.5.7", 40 | "webpack": "^1.13.0", 41 | "what-input": "^4.0.1" 42 | }, 43 | "devDependencies": { 44 | "webpack-dev-server": "^1.16.1", 45 | "yarn": "^0.15.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SD UI Foundation Themes 2 | 3 | [Free themes](http://es-di.com/foundation/) for the most advanced responsive front-end framework in the world - ZURB Foundation 6. 4 | SD UI themes are made for people to create their projects even faster with Foundation. 5 | 6 | [![SD UI Foundation Logo](http://es-di.com/wp-content/themes/sd-com/static/img/foundation/foundation-girl-github.png)](http://es-di.com/foundation) 7 | 8 | ## List of themes 9 | - [Classic](http://es-di.com/sdcontent/foundation/classic/) - Clean light-blue theme 10 | - [Dark](http://es-di.com/sdcontent/foundation/dark/) - Clean Dark UI 11 | - [Gradient](http://es-di.com/sdcontent/foundation/gradient/) - Clean blue theme with gradients 12 | - Coming soon... 13 | 14 | ## Usage 15 | Replace the default Foundation CSS and JS files with the files from `theme-name/dist/`. Installation is complete, enjoy! 16 | 17 | Advanced usage 18 | -------------- 19 | You can easily customize themes for you own goals. For themes building we use node + npm (yarn) + [webpack](https://webpack.github.io/). 20 | To start you should perform several steps: 21 | 22 | 1. Install [node](https://nodejs.org/en/download/package-manager/) and [npm](https://github.com/npm/npm) 23 | 24 | 2. Install required npm packages 25 | * You can use default packages manager - [npm](https://github.com/npm/npm) 26 | ` npm i ` - for development mode; 27 | ` npm i --production ` - for production 28 | * Or brand new [yarn](https://github.com/yarnpkg/yarn/) from Facebook developers. 29 | ` npm i -g yarn ` - install yarn; 30 | ` yarn ` - for development mode; 31 | ` yarn --prod ` - for production 32 | 33 | 3. Start webpack development server. Specify option `--theme=name` to build theme you want, 34 | classic one is built by default. 35 | ` npm start -- --theme=dark ` 36 | 37 | 4. Build final source 38 | ` npm run build -- --theme=classic ` 39 | -------------------------------------------------------------------------------- /.meta/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | var autoprefixer = require('autoprefixer'); 4 | var fs = require('fs'); 5 | var node_modules_path = path.resolve(__dirname, "../node_modules"); 6 | 7 | var root = path.join(__dirname, ".."); 8 | 9 | function getThemeName() { 10 | function dir_exists(d) { 11 | try { 12 | return fs.statSync(d).isDirectory() 13 | } catch (er) { 14 | return false 15 | } 16 | } 17 | var theme; 18 | process.argv.forEach(function(val, index, array) { 19 | var re = new RegExp("^--theme="); 20 | if (!re.test(val)) { 21 | return false; 22 | } 23 | theme = val.replace('--theme=', ''); 24 | if (!dir_exists(path.join(root, theme))) { 25 | console.log('\033[91m Error! Please, specify right theme to build.\033[0m For example: \r\n ' + 26 | '\033[92m npm run build -- --theme=dark \033[0m'); 27 | process.exit(0); 28 | } 29 | }); 30 | return theme; 31 | } 32 | 33 | var THEME = getThemeName() || 'classic'; 34 | 35 | console.log("Theme \"" + THEME + "\" is building"); 36 | 37 | var themeRoot = path.join(root, THEME); 38 | 39 | module.exports = { 40 | __themeRoot: themeRoot, // private var is used in dev config 41 | 42 | entry: './index.js', 43 | context: path.join(themeRoot, '/source/'), 44 | output: { 45 | path: path.join(themeRoot, 'dist'), 46 | filename: 'foundation.js' 47 | }, 48 | resolve: { 49 | alias: { 50 | 'foundation': path.join(__dirname, '../node_modules/foundation-sites') 51 | } 52 | }, 53 | resolveLoader: { 54 | modulesDirectories: [ 55 | path.join(__dirname, '../node_modules') 56 | ] 57 | }, 58 | module: { 59 | loaders: [ 60 | //{ 61 | // test: /\.(js6|es6)$/, 62 | // loader: 'babel', 63 | // // make sure to exclude 3rd party code in node_modules 64 | // exclude: /node_modules/, 65 | // query: { 66 | // presets: ['es2015'] 67 | // } 68 | //}, 69 | { 70 | test: /\.css$/, 71 | loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") 72 | }, 73 | { 74 | test: /\.sass$/, 75 | loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!postcss-loader!sass?precision=8&indentedSyntax") 76 | }, 77 | { 78 | test: /\.scss$/, 79 | loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!postcss-loader!sass?precision=8") 80 | }, 81 | //{ 82 | // test: /\.css$/, 83 | // loader: 'style-loader!css-loader?root=' + themeRoot + '&sourceMap!postcss-loader!sass-loader?sourceMap&sourceMapContents&precision=8&indentedSyntax' 84 | //}, 85 | //{ 86 | // test: /\.sass$/, 87 | // loader: 'style-loader!css-loader?root=' + themeRoot + '&sourceMap!postcss-loader!sass-loader?sourceMap&sourceMapContents&precision=8&indentedSyntax' 88 | //}, 89 | //{ 90 | // test: /\.scss$/, 91 | // loader: 'style-loader!css-loader?root=' + themeRoot + '&sourceMap!postcss-loader!sass-loader?sourceMap&sourceMapContents&precision=8&indentedSyntax' 92 | //}, 93 | { 94 | // edit this for additional asset file types 95 | test: /\.(png|jpe?g|gif)$/i, 96 | loaders: ['url-loader?limit=30000!image?bypassOnDebug=false&optimizationLevel=7&interlaced=false&progressive=true'], 97 | }, 98 | { 99 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 100 | loader: "url-loader?limit=10000&mimetype=application/font-woff" 101 | }, 102 | { 103 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 104 | loader: "file-loader" 105 | } 106 | 107 | ] 108 | }, 109 | postcss: [ 110 | autoprefixer({browsers: ['last 2 version', 'ie >= 9', 'Opera 12']}) 111 | ], 112 | plugins: [ 113 | new ExtractTextPlugin("foundation.css") 114 | ], 115 | sassLoader: { 116 | includePaths: [ 117 | path.resolve(node_modules_path, "foundation-sites/scss") 118 | ] 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /classic/source/scss/_sd-ui.scss: -------------------------------------------------------------------------------- 1 | // SD UI Classic Theme Foundation 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Custom Classes 7 | // 2. Typography 8 | // 3. Accordion 9 | // 4. Breadcrumbs 10 | // 5. Buttons 11 | // 6. Drilldown 12 | // 7. Dropdown Menu 13 | // 8. Menu 14 | // 9. Orbit 15 | // 10. Switch 16 | // 11. Table 17 | // 12. Tabs 18 | // 13. Top Bar 19 | 20 | 21 | // 1. Custom Classes 22 | // --------- 23 | 24 | $blockquote-bg: #f9f9f9; 25 | 26 | @media screen { 27 | * { 28 | outline: none; 29 | } 30 | } 31 | 32 | .boxed { 33 | border: 0; 34 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 0px 0px 1px rgba(0, 0, 0, 0.05); 35 | } 36 | 37 | .highlighted { 38 | color: $primary-color; 39 | } 40 | 41 | // 2. Typography 42 | // --------- 43 | 44 | blockquote { 45 | background: $blockquote-bg; 46 | } 47 | 48 | p { 49 | &.primary { 50 | color: $primary-color; 51 | } 52 | &.secondary { 53 | color: $secondary-color; 54 | } 55 | &.success { 56 | color: $success-color; 57 | } 58 | &.warning { 59 | color: $warning-color; 60 | } 61 | &.alert { 62 | color: $alert-color; 63 | } 64 | 65 | } 66 | 67 | dl { 68 | dd { 69 | margin-bottom: $paragraph-margin-bottom; 70 | } 71 | } 72 | 73 | .inline-block { 74 | display: inline-block; 75 | } 76 | 77 | // 3. Accordion 78 | // --------- 79 | 80 | .accordion { 81 | border-bottom-width: 0; 82 | .accordion-item { 83 | background: $white; 84 | &.is-active { 85 | background: #fafdff; 86 | .accordion-title { 87 | color: $black; 88 | } 89 | } 90 | } 91 | .accordion-content { 92 | color: $body-font-color; 93 | } 94 | :last-child > .accordion-title { 95 | border-bottom-width: 1px; 96 | } 97 | .accordion-title { 98 | font-size: 1rem; 99 | } 100 | } 101 | 102 | // 4. Breadcrumbs 103 | // --------- 104 | 105 | .breadcrumbs { 106 | padding: 0.5rem 1rem; 107 | border-radius: $global-radius; 108 | border: 1px solid $light-gray; 109 | background: whitesmoke; 110 | } 111 | 112 | // 4. Buttons 113 | // --------- 114 | 115 | .button, button, input[type="submit"] { 116 | &.white { 117 | @include button-style($white, scale-color($white, $lightness: -3%), #333333); 118 | border: 1px solid $light-gray; 119 | font-weight: normal; 120 | } 121 | &.dark { 122 | @include button-style($dark-gray, scale-color($dark-gray, $lightness: -8%), $white); 123 | } 124 | } 125 | 126 | // 6. Drilldown 127 | // --------- 128 | 129 | .is-drilldown { 130 | border-bottom: 1px solid $light-gray; 131 | border-radius: 0 0 $global-radius $global-radius; 132 | } 133 | 134 | .js-drilldown-back::before, 135 | .js-drilldown-back>a:before { 136 | margin-top: -0.25rem; 137 | padding: 0; 138 | } 139 | 140 | // 7. Dropdown Menu 141 | // --------- 142 | 143 | .dropdown.menu { 144 | .has-submenu.is-down-arrow > a::after, 145 | >li.is-dropdown-submenu-parent>a:after { 146 | right: 8px; 147 | } 148 | .submenu { 149 | box-shadow: 0 3px 10px rgba(0,0,0,0.05); 150 | } 151 | &.vertical > li.opens-right > .is-dropdown-submenu { 152 | right: auto; 153 | left: 100%; 154 | top:-1px; 155 | } 156 | } 157 | 158 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 159 | border-color: transparent transparent transparent $white; 160 | } 161 | 162 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 163 | border-color: transparent transparent transparent $white; 164 | } 165 | 166 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after { 167 | border-color: transparent $white transparent transparent; 168 | } 169 | 170 | 171 | .input-group { 172 | .input-group-label { 173 | border-radius: $global-radius 0 0 $global-radius; 174 | } 175 | .input-group-field { 176 | border-radius: 0; 177 | } 178 | .input-group-button .button { 179 | border-radius: 0 $global-radius $global-radius 0; 180 | margin: 0; 181 | } 182 | } 183 | 184 | // 8. Menu 185 | // --------- 186 | 187 | .menu { 188 | border: 1px solid $light-gray; 189 | border-radius: $global-radius; 190 | * { 191 | outline: none; 192 | } 193 | > li { 194 | border-right: 1px solid $light-gray; 195 | &:last-child { 196 | border-bottom: none; 197 | border-right: none; 198 | } 199 | > a > i { 200 | vertical-align: top; 201 | } 202 | a:hover { 203 | background: lighten($light-gray, 5%); 204 | } 205 | &:first-child > a { 206 | border-radius: $global-radius 0 0 $global-radius; 207 | } 208 | &:last-child > a { 209 | border-radius: 0 $global-radius $global-radius 0; 210 | } 211 | &.active > a { 212 | background: lighten($light-gray, 5%); 213 | color: $black; 214 | } 215 | } 216 | &.vertical { 217 | //display: block; 218 | > li { 219 | border-right: 0; 220 | border-bottom: 1px solid $light-gray; 221 | &:last-child { 222 | border-bottom: none; 223 | } 224 | } 225 | &.nested { 226 | background: #fff; 227 | border-width: 1px 0 0 0; 228 | } 229 | > li:first-child > a { 230 | border-radius: $global-radius $global-radius 0 0; 231 | } 232 | > li:last-child > a { 233 | border-radius: 0 0 $global-radius $global-radius; 234 | } 235 | } 236 | } 237 | 238 | .unstyled-menu { 239 | @include menu-base; 240 | } 241 | 242 | // 9. Orbit 243 | // --------- 244 | 245 | @media screen { 246 | .orbit * { 247 | outline: none; 248 | } 249 | } 250 | .orbit { 251 | &.bullets-inside { 252 | .orbit-caption { 253 | padding-bottom: 2.5rem; 254 | } 255 | .orbit-bullets { 256 | position: absolute; 257 | width: 100%; 258 | text-align: center; 259 | bottom: 0; 260 | button { 261 | background-color:#fff; 262 | opacity: 0.35; 263 | transition: opacity 0.3s ease-out; 264 | &.is-active { 265 | opacity: 0.9; 266 | &:hover { 267 | opacity: 0.9; 268 | } 269 | } 270 | &:hover { 271 | opacity: 0.25; 272 | } 273 | } 274 | } 275 | } 276 | } 277 | 278 | // 10. Switch 279 | // --------- 280 | 281 | .switch { 282 | .switch-paddle { 283 | border-radius: 1rem; 284 | &::after { 285 | border-radius: 0.75rem; 286 | } 287 | } 288 | &.tiny { 289 | .switch-paddle { 290 | border-radius: 0.75rem; 291 | &::after { 292 | border-radius: 0.5rem; 293 | } 294 | } 295 | } 296 | &.small { 297 | .switch-paddle { 298 | border-radius: 0.875rem; 299 | &::after { 300 | border-radius: 0.625rem; 301 | } 302 | } 303 | } 304 | &.large { 305 | .switch-paddle { 306 | border-radius: 1.25rem; 307 | &::after { 308 | border-radius: 1.25rem; 309 | } 310 | } 311 | } 312 | } 313 | 314 | // 11. Table 315 | // --------- 316 | 317 | table { 318 | tbody tr { 319 | &:nth-child(even) { 320 | background: none; 321 | } 322 | &.primary { 323 | background: lighten($primary-color, +45%); 324 | } 325 | &.success { 326 | background: lighten($success-color, +55%); 327 | } 328 | &.warning { 329 | background: lighten($warning-color, 45%); 330 | } 331 | &.alert { 332 | background: lighten($alert-color, +35%); 333 | } 334 | } 335 | } 336 | 337 | // 12. Tabs 338 | // --------- 339 | 340 | .tabs { 341 | border-width: 0 0 1px 0; 342 | .tabs-title { 343 | border-top-left-radius: $global-radius; 344 | border-top-right-radius: $global-radius; 345 | > a { 346 | font-size: 1rem; 347 | } 348 | &.is-active { 349 | > a { 350 | color: $dark-gray; 351 | } 352 | border: 1px solid $light-gray; 353 | border-bottom-width: 0; 354 | margin-bottom: -1px; 355 | } 356 | } 357 | } 358 | 359 | // 13. Top Bar 360 | // --------- 361 | 362 | .title-bar { 363 | background: darken($primary-color, 3%); 364 | &.dark-blue { 365 | background: darken($primary-color, 20%); 366 | } 367 | } 368 | 369 | .top-bar { 370 | color: #fff; 371 | border-bottom: 1px solid darken($primary-color, 10%); 372 | ul { 373 | background: transparent; 374 | } 375 | .top-bar-inner { 376 | padding: 0.3rem 0 0.2rem 1rem; 377 | } 378 | .top-bar-text { 379 | padding: 0; 380 | @include breakpoint(medium up) { 381 | line-height: 2.5rem; 382 | } 383 | } 384 | .menu { 385 | border: 0; 386 | border-radius: 0; 387 | //display: block; 388 | * { 389 | outline: none; 390 | } 391 | > li { 392 | border-right: 0; 393 | a { 394 | color: #fff; 395 | padding: 1rem; 396 | &:hover { 397 | background: darken($primary-color, 8%); 398 | } 399 | } 400 | &.menu-text { 401 | padding:1rem; 402 | } 403 | &:first-child > a { 404 | border-radius: 0; 405 | } 406 | &:last-child > a { 407 | border-radius: 0; 408 | } 409 | &.active > a { 410 | background: darken($primary-color, 8%); 411 | 412 | } 413 | } 414 | &.dropdown { 415 | .submenu { 416 | &.first-sub { 417 | left: 0; 418 | } 419 | background:darken($primary-color, 3%); 420 | border: 1px solid darken($primary-color, 10%); 421 | li { 422 | border-color: darken($primary-color, 10%); 423 | } 424 | } 425 | .has-submenu.is-down-arrow > a::after, 426 | >li.is-dropdown-submenu-parent>a:after { 427 | border-color: $white transparent transparent; 428 | } 429 | .has-submenu.is-right-arrow > a::after { 430 | border-color: transparent transparent transparent $white; 431 | } 432 | } 433 | } 434 | input, button.white { 435 | border: 0; 436 | display: inline-block; 437 | margin-bottom: 0; 438 | 439 | } 440 | input { 441 | margin-right: 2rem; 442 | } 443 | &.dark-blue { 444 | background: darken($primary-color, 20%); 445 | border-bottom: 1px solid darken($primary-color, 27%); 446 | .menu { 447 | > li { 448 | a { 449 | &:hover { 450 | background: darken($primary-color, 25%); 451 | } 452 | } 453 | &.active > a { 454 | background: darken($primary-color, 25%); 455 | } 456 | } 457 | &.dropdown { 458 | .submenu { 459 | background:darken($primary-color, 20%); 460 | border:1px solid darken($primary-color, 27%); 461 | li { 462 | border-color: darken($primary-color, 27%); 463 | } 464 | } 465 | } 466 | } 467 | } 468 | } 469 | -------------------------------------------------------------------------------- /dark/source/scss/_sd-ui.scss: -------------------------------------------------------------------------------- 1 | // SD UI Dark Theme Foundation 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Custom Classes 7 | // 2. Typography 8 | // 3. Accordion 9 | // 4. Breadcrumbs 10 | // 5. Buttons 11 | // 6. Callout 12 | // 7. Drilldown 13 | // 8. Dropdown Menu 14 | // 9. Menu 15 | // 10. Orbit 16 | // 11. Switch 17 | // 12. Table 18 | // 13. Tabs 19 | // 14. Top Bar 20 | 21 | 22 | // 1. Custom Classes 23 | // --------- 24 | 25 | $blockquote-bg: #242424; 26 | $blue-color: #65b9fc; 27 | $top-bar-bg: #1e1e1e; 28 | 29 | @media screen { 30 | * { 31 | outline: none; 32 | } 33 | } 34 | 35 | hr { 36 | border-color: $dark-gray; 37 | } 38 | 39 | .boxed { 40 | border: 0; 41 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 0px 0px 1px rgba(0, 0, 0, 0.05); 42 | } 43 | 44 | .highlighted { 45 | color: $white; 46 | } 47 | 48 | // 2. Typography 49 | // --------- 50 | 51 | blockquote { 52 | background: $blockquote-bg; 53 | cite { 54 | color: $medium-gray; 55 | } 56 | } 57 | 58 | p { 59 | &.primary { 60 | color: $primary-color; 61 | } 62 | &.secondary { 63 | color: $secondary-color; 64 | } 65 | &.success { 66 | color: $success-color; 67 | } 68 | &.warning { 69 | color: $warning-color; 70 | } 71 | &.alert { 72 | color: $alert-color; 73 | } 74 | 75 | } 76 | 77 | .subheader { 78 | color: #656565; 79 | } 80 | 81 | dl { 82 | dd { 83 | margin-bottom: $paragraph-margin-bottom; 84 | } 85 | } 86 | 87 | .inline-block { 88 | display: inline-block; 89 | } 90 | 91 | select { 92 | color: $body-font-color; 93 | } 94 | 95 | // 3. Accordion 96 | // --------- 97 | 98 | .accordion { 99 | border-bottom-width: 0; 100 | .accordion-item { 101 | background: $black; 102 | &.is-active { 103 | background: $body-background; 104 | .accordion-title { 105 | color: $medium-gray; 106 | } 107 | } 108 | } 109 | :last-child > .accordion-title { 110 | border-bottom-width: 1px; 111 | } 112 | .accordion-title { 113 | font-size: 1rem; 114 | } 115 | } 116 | 117 | // 4. Breadcrumbs 118 | // --------- 119 | 120 | .breadcrumbs { 121 | padding: 0.5rem 1rem; 122 | border-radius: $global-radius; 123 | border: 1px solid $black; 124 | background: #242424; 125 | } 126 | 127 | // 5. Buttons 128 | // --------- 129 | 130 | .button, button, input[type="submit"] { 131 | &.blue { 132 | @include button-style($blue-color, scale-color($blue-color, $lightness: -8%), $white); 133 | border: 0; 134 | font-weight: normal; 135 | } 136 | &.dark { 137 | @include button-style($dark-gray, scale-color($dark-gray, $lightness: -15%), $white); 138 | } 139 | &.black { 140 | @include button-style($black, $black, $white); 141 | &:hover { 142 | color: darken($white, 5%); 143 | } 144 | } 145 | &.dropdown::after { 146 | border-color: $body-font-color transparent transparent; 147 | } 148 | &.success,&.warning,&.alert, 149 | &.secondary { 150 | color: #fff; 151 | } 152 | } 153 | 154 | // 6. Callout 155 | // --------- 156 | .callout { 157 | color: $white; 158 | &.primary { 159 | color: $dark-gray; 160 | } 161 | } 162 | 163 | // 7. Drilldown 164 | // --------- 165 | 166 | .is-drilldown { 167 | border-bottom: 1px solid $black; 168 | border-radius: 0 0 $global-radius $global-radius; 169 | } 170 | 171 | .js-drilldown-back::before, 172 | .js-drilldown-back>a:before { 173 | margin-top: -0.25rem; 174 | padding: 0; 175 | } 176 | 177 | // 8. Dropdown Menu 178 | // --------- 179 | 180 | .dropdown.menu { 181 | .has-submenu.is-down-arrow > a::after, 182 | >li.is-dropdown-submenu-parent>a:after { 183 | right: 8px; 184 | } 185 | .submenu { 186 | box-shadow: 0 3px 10px rgba(0,0,0,0.05); 187 | } 188 | &.vertical > li.opens-right > .is-dropdown-submenu { 189 | right: auto; 190 | left: 100%; 191 | top:-1px; 192 | } 193 | } 194 | 195 | .input-group { 196 | .input-group-label { 197 | border-color: #333; 198 | border-radius: $global-radius 0 0 $global-radius; 199 | background: $black; 200 | color: $medium-gray; 201 | } 202 | .input-group-field { 203 | border-radius: 0; 204 | } 205 | .input-group-button .button { 206 | border-radius: 0 $global-radius $global-radius 0; 207 | margin: 0; 208 | } 209 | } 210 | 211 | // 9. Menu 212 | // --------- 213 | 214 | .menu { 215 | border: 1px solid $black; 216 | border-radius: $global-radius; 217 | background: #1e1e1e; 218 | //display: inline-block; 219 | * { 220 | outline: none; 221 | } 222 | > li { 223 | border-right: 1px solid $black; 224 | &:last-child { 225 | border-bottom: none; 226 | border-right: none; 227 | } 228 | > a > i { 229 | vertical-align: top; 230 | } 231 | a:hover { 232 | background: $body-background; 233 | } 234 | &:first-child > a { 235 | border-radius: $global-radius 0 0 $global-radius; 236 | } 237 | &:last-child > a { 238 | border-radius: 0 $global-radius $global-radius 0; 239 | } 240 | &.active > a { 241 | background: $body-background; 242 | } 243 | } 244 | &.vertical { 245 | //display: block; 246 | > li { 247 | border-right: 0; 248 | border-bottom: 1px solid $black; 249 | &:last-child { 250 | border-bottom: none; 251 | } 252 | } 253 | &.nested { 254 | background: #1e1e1e; 255 | border-width: 1px 0 0 0; 256 | } 257 | > li:first-child > a { 258 | border-radius: $global-radius $global-radius 0 0; 259 | } 260 | > li:last-child > a { 261 | border-radius: 0 0 $global-radius $global-radius; 262 | } 263 | } 264 | } 265 | 266 | .unstyled-menu { 267 | @include menu-base; 268 | } 269 | 270 | // 10. Orbit 271 | // --------- 272 | 273 | @media screen { 274 | .orbit * { 275 | outline: none; 276 | } 277 | } 278 | .orbit { 279 | &.bullets-inside { 280 | .orbit-caption { 281 | padding-bottom: 2.5rem; 282 | } 283 | .orbit-bullets { 284 | position: absolute; 285 | width: 100%; 286 | text-align: center; 287 | bottom: 0; 288 | button { 289 | background-color:#fff; 290 | opacity: 0.35; 291 | transition: opacity 0.3s ease-out; 292 | &.is-active { 293 | opacity: 0.9; 294 | &:hover { 295 | opacity: 0.9; 296 | } 297 | } 298 | &:hover { 299 | opacity: 0.25; 300 | } 301 | } 302 | } 303 | } 304 | } 305 | 306 | // 11. Switch 307 | // --------- 308 | 309 | .switch-active { 310 | left: 14%; 311 | } 312 | .switch { 313 | .switch-paddle { 314 | border-radius: 1rem; 315 | color: $black; 316 | &::after { 317 | border-radius: 0.75rem; 318 | } 319 | } 320 | &.tiny { 321 | .switch-paddle { 322 | border-radius: 0.75rem; 323 | &::after { 324 | border-radius: 0.5rem; 325 | } 326 | } 327 | } 328 | &.small { 329 | .switch-paddle { 330 | border-radius: 0.875rem; 331 | &::after { 332 | border-radius: 0.625rem; 333 | } 334 | } 335 | } 336 | &.large { 337 | .switch-paddle { 338 | border-radius: 1.25rem; 339 | &::after { 340 | border-radius: 1.25rem; 341 | } 342 | } 343 | } 344 | } 345 | 346 | input:checked ~ .switch-paddle::after { 347 | background: $success-color; 348 | } 349 | 350 | // 12. Table 351 | // --------- 352 | 353 | table { 354 | tbody tr { 355 | &:nth-child(even) { 356 | background: none; 357 | } 358 | &.primary { 359 | background: #333; 360 | } 361 | &.success { 362 | background: darken($success-color,10%); 363 | color: #fff; 364 | } 365 | &.warning { 366 | background: rgba($warning-color,0.8); 367 | color: #fff; 368 | } 369 | &.alert { 370 | background: rgba($alert-color,0.8); 371 | color: #fff; 372 | } 373 | } 374 | } 375 | 376 | // 13. Tabs 377 | // --------- 378 | 379 | .tabs { 380 | border-width: 0 0 1px 0; 381 | .tabs-title { 382 | border-top-left-radius: $global-radius; 383 | border-top-right-radius: $global-radius; 384 | > a { 385 | font-size: 1rem; 386 | } 387 | &.is-active { 388 | > a { 389 | color: $medium-gray; 390 | } 391 | border: 1px solid $dark-gray; 392 | border-bottom-width: 0; 393 | margin-bottom: -1px; 394 | } 395 | } 396 | } 397 | 398 | // 14. Top Bar 399 | // --------- 400 | 401 | .title-bar { 402 | background: $top-bar-bg; 403 | &.black { 404 | background: $black; 405 | } 406 | } 407 | 408 | .top-bar { 409 | color: $body-font-color; 410 | background: $top-bar-bg; 411 | ul { 412 | background: transparent; 413 | } 414 | .top-bar-inner { 415 | padding: 0.3rem 0 0.2rem 1rem; 416 | } 417 | .top-bar-text { 418 | padding: 0; 419 | @include breakpoint(medium up) { 420 | line-height: 2.5rem; 421 | } 422 | } 423 | .menu { 424 | border: 0; 425 | border-radius: 0; 426 | //display: block; 427 | * { 428 | outline: none; 429 | } 430 | > li { 431 | border-right: 0; 432 | a { 433 | color: #fff; 434 | padding: 1rem; 435 | &:hover { 436 | background: darken($top-bar-bg, 3%); 437 | } 438 | } 439 | &.menu-text { 440 | padding:1rem; 441 | } 442 | &:first-child > a { 443 | border-radius: 0; 444 | } 445 | &:last-child > a { 446 | border-radius: 0; 447 | } 448 | &.active > a { 449 | background: darken($top-bar-bg, 3%); 450 | 451 | } 452 | } 453 | &.dropdown { 454 | .submenu { 455 | &.first-sub { 456 | left: 0; 457 | } 458 | background: #1e1e1e; 459 | border: 1px solid $black; 460 | box-shadow: 0 3px 3px rgba(0,0,0,0.3); 461 | li { 462 | border-color: $black; 463 | } 464 | } 465 | .has-submenu.is-down-arrow > a::after { 466 | border-color: $white transparent transparent; 467 | top: 20px; 468 | } 469 | .has-submenu.is-right-arrow > a::after { 470 | border-color: transparent transparent transparent $white; 471 | } 472 | } 473 | } 474 | input { 475 | display: inline-block; 476 | margin-bottom: 0; 477 | background: rgba(0,0,0,0.2); 478 | margin-right: 2rem; 479 | } 480 | .button { 481 | border: 0; 482 | } 483 | &.black { 484 | background: #000; 485 | .menu { 486 | > li { 487 | a { 488 | &:hover { 489 | background: lighten($black,2%); 490 | } 491 | } 492 | &.active > a { 493 | background: lighten($black,2%); 494 | } 495 | } 496 | &.dropdown { 497 | .submenu { 498 | background: $black; 499 | border: 1px solid lighten($black,5%); 500 | li { 501 | border-color: lighten($black,5%); 502 | } 503 | } 504 | } 505 | } 506 | } 507 | } -------------------------------------------------------------------------------- /advanced-bootstrap/source/scss/_sd-ui.scss: -------------------------------------------------------------------------------- 1 | // SD UI Advanced Bootstrap Theme (Foundation) 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 0. Mixins & additional variables 7 | // 1. Custom Classes 8 | // 2. Typography 9 | // 3. Accordion 10 | // 4. Breadcrumbs 11 | // 5. Buttons 12 | // 6. Callout 13 | // 7. Drilldown 14 | // 8. Dropdown Menu 15 | // 9. Forms 16 | // 10. Menu 17 | // 11. Orbit 18 | // 12. Pagination 19 | // 13. Switch 20 | // 14. Table 21 | // 15. Tabs 22 | // 16. Top Bar 23 | 24 | // 0. Mixins & additional variables 25 | // --------- 26 | 27 | $info-color: #46b8da; 28 | $blockquote-bg: #f9f9f9; 29 | 30 | 31 | // 1. Custom Classes 32 | // --------- 33 | 34 | @media screen { 35 | * { 36 | outline: none; 37 | } 38 | } 39 | 40 | .highlighted { 41 | color: $primary-color; 42 | } 43 | 44 | 45 | // 2. Typography 46 | // --------- 47 | 48 | body { 49 | -webkit-font-smoothing: subpixel-antialiased; 50 | font-size: rem-calc(14); 51 | } 52 | 53 | blockquote { 54 | background: $blockquote-bg; 55 | } 56 | 57 | code { 58 | border-radius: $global-radius; 59 | } 60 | 61 | p { 62 | &.primary { 63 | color: $primary-color; 64 | } 65 | &.secondary { 66 | color: $secondary-color; 67 | } 68 | &.success { 69 | color: $success-color; 70 | } 71 | &.warning { 72 | color: $warning-color; 73 | } 74 | &.alert { 75 | color: $alert-color; 76 | } 77 | 78 | } 79 | 80 | dl { 81 | dd { 82 | margin-bottom: $paragraph-margin-bottom; 83 | } 84 | } 85 | 86 | .subheader { 87 | font-weight: normal; 88 | } 89 | 90 | .inline-block { 91 | display: inline-block; 92 | } 93 | 94 | // 3. Accordion 95 | // --------- 96 | 97 | .accordion { 98 | border-bottom-width: 0; 99 | .accordion-item { 100 | background: $white; 101 | &.is-active { 102 | background: #fafdff; 103 | .accordion-title { 104 | color: $black; 105 | } 106 | } 107 | } 108 | .accordion-content { 109 | color: $body-font-color; 110 | } 111 | :last-child > .accordion-title { 112 | border-bottom-width: 1px; 113 | } 114 | .accordion-title { 115 | font-size: 1rem; 116 | } 117 | } 118 | 119 | // 4. Breadcrumbs 120 | // --------- 121 | 122 | .breadcrumbs { 123 | padding: 0.5rem rem-calc(15); 124 | border-radius: $global-radius; 125 | border-width: 0; 126 | background: #f5f5f5; 127 | font-size: rem-calc(14); 128 | line-height: rem-calc(20); 129 | li { 130 | color: #777; 131 | } 132 | } 133 | 134 | // 5. Buttons 135 | // --------- 136 | 137 | .button { 138 | border: 1px solid #ccc; 139 | background: #fff; 140 | line-height: rem-calc(20); 141 | &.primary { 142 | background: $primary-color; 143 | border-color: darken($primary-color, +8%); 144 | color: #fff; 145 | &:hover, &:focus { 146 | color: #fff; 147 | } 148 | } 149 | &.white { 150 | @include button-style($white, scale-color($white, $lightness: -3%), #333333); 151 | border: 1px solid $light-gray; 152 | font-weight: normal; 153 | } 154 | &.dark { 155 | @include button-style($dark-gray, scale-color($dark-gray, $lightness: -8%), $white); 156 | border-color: darken($dark-gray,5%); 157 | } 158 | &.info { 159 | color: $white; 160 | background: $info-color; 161 | border-color: darken($info-color, +8%); 162 | &:hover, &:focus { 163 | color: $white; 164 | background: #31b0d5; 165 | border-color: #269abc; 166 | } 167 | } 168 | &.success { 169 | color: $white; 170 | border-color: #4cae4c; 171 | &:hover, &:focus { 172 | color: $white; 173 | border-color: darken(#4cae4c, +4%); 174 | } 175 | } 176 | &.warning { 177 | color: $white; 178 | border-color: #eea236; 179 | &:hover, &:focus { 180 | color: $white; 181 | border-color: darken(#eea236, +4%); 182 | } 183 | } 184 | &.alert { 185 | color: $white; 186 | border-color: #d43f3a; 187 | &:hover, &:focus { 188 | color: $white; 189 | border-color: darken(#d43f3a, +4%); 190 | } 191 | } 192 | &.hollow { 193 | background: transparent; 194 | &:hover { 195 | background: transparent; 196 | } 197 | } 198 | } 199 | 200 | .button.dropdown { 201 | &:after { 202 | border-color: #333 transparent transparent; 203 | top: .6em; 204 | } 205 | } 206 | 207 | 208 | // 6. Callout 209 | // --------- 210 | 211 | .callout { 212 | color: $body-font-color; 213 | &.info, &.primary { 214 | border-color: #bce8f1; 215 | background: #d9edf7; 216 | color: #31708f; 217 | a { 218 | color: darken(#31708f, +7%); 219 | } 220 | } 221 | &.success { 222 | border-color: #d6e9c6; 223 | background: #dff0d8; 224 | color: #3c763d; 225 | a { 226 | color: darken(#3c763d, +7%); 227 | } 228 | } 229 | &.warning { 230 | border-color: #faebcc; 231 | background: #fcf8e3; 232 | color: #8a6d3b; 233 | a { 234 | color: darken(#8a6d3b, +7%); 235 | } 236 | } 237 | &.alert { 238 | border-color: #ebccd1; 239 | background: #f2dede; 240 | color: #a94442; 241 | a { 242 | color: darken(#a94442, +7%); 243 | } 244 | } 245 | } 246 | 247 | // 7. Drilldown 248 | // --------- 249 | 250 | .is-drilldown { 251 | border-bottom: 1px solid $light-gray; 252 | border-radius: 0 0 $global-radius $global-radius; 253 | } 254 | 255 | .js-drilldown-back::before, 256 | .js-drilldown-back>a:before { 257 | margin-top: -0.25rem; 258 | padding: 0; 259 | } 260 | 261 | // 8. Dropdown Menu 262 | // --------- 263 | 264 | .dropdown.menu { 265 | .has-submenu.is-down-arrow > a::after, 266 | >li.is-dropdown-submenu-parent>a:after { 267 | right: 8px; 268 | } 269 | .submenu { 270 | box-shadow: 0 3px 10px rgba(0,0,0,0.05); 271 | } 272 | &.vertical > li.opens-right > .is-dropdown-submenu { 273 | right: auto; 274 | left: 100%; 275 | top:-1px; 276 | } 277 | } 278 | 279 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 280 | border-color: transparent transparent transparent #777; 281 | } 282 | 283 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 284 | border-color: transparent transparent transparent #777; 285 | border-width: 4px; 286 | } 287 | 288 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after { 289 | border-color: transparent #777 transparent transparent; 290 | } 291 | 292 | 293 | .input-group { 294 | .input-group-label { 295 | border-radius: $global-radius 0 0 $global-radius; 296 | } 297 | .input-group-field { 298 | border-radius: 0; 299 | } 300 | .input-group-button .button { 301 | border-radius: 0 $global-radius $global-radius 0; 302 | margin: 0; 303 | } 304 | } 305 | 306 | // 9. Forms 307 | // --------- 308 | select, .input-group-field { 309 | height: rem-calc(34) !important; 310 | } 311 | 312 | [type=color], [type=date], [type=datetime-local], [type=datetime], 313 | [type=email], [type=month], [type=number], [type=password], 314 | [type=search], [type=tel], [type=text], 315 | [type=time], [type=url], [type=week] { 316 | height: rem-calc(34) !important; 317 | } 318 | 319 | // 10. Menu 320 | // --------- 321 | 322 | .menu { 323 | border: 1px solid $light-gray; 324 | border-radius: $global-radius; 325 | * { 326 | outline: none; 327 | } 328 | > li { 329 | border-right: 1px solid $light-gray; 330 | &:last-child { 331 | border-bottom: none; 332 | border-right: none; 333 | } 334 | a { 335 | color: #333; 336 | } 337 | > a > i { 338 | vertical-align: top; 339 | } 340 | a:hover { 341 | background: lighten($light-gray, 5%); 342 | } 343 | &:first-child > a { 344 | border-radius: $global-radius 0 0 $global-radius; 345 | } 346 | &:last-child > a { 347 | border-radius: 0 $global-radius $global-radius 0; 348 | } 349 | &.active > a { 350 | background: lighten($light-gray, 5%); 351 | color: $black; 352 | } 353 | } 354 | &.vertical { 355 | //display: block; 356 | > li { 357 | border-right: 0; 358 | border-bottom: 1px solid $light-gray; 359 | &:last-child { 360 | border-bottom: none; 361 | } 362 | } 363 | &.nested { 364 | background: #fff; 365 | border-width: 1px 0 0 0; 366 | } 367 | > li:first-child > a { 368 | border-radius: $global-radius $global-radius 0 0; 369 | } 370 | > li:last-child > a { 371 | border-radius: 0 0 $global-radius $global-radius; 372 | } 373 | } 374 | } 375 | 376 | .menu-icon::after { 377 | height: 1px; 378 | } 379 | 380 | .unstyled-menu { 381 | @include menu-base; 382 | } 383 | 384 | // 11. Orbit 385 | // --------- 386 | 387 | @media screen { 388 | .orbit * { 389 | outline: none; 390 | } 391 | } 392 | .orbit { 393 | .orbit-previous, .orbit-next { 394 | opacity: 0; 395 | transition: opacity 0.25s ease-out; 396 | font-size: rem-calc(40); 397 | } 398 | &:hover { 399 | .orbit-previous, .orbit-next { 400 | background: transparent; 401 | opacity: 0.7; 402 | &:hover { 403 | background: transparent; 404 | opacity: 1; 405 | } 406 | } 407 | } 408 | &.bullets-inside { 409 | .orbit-caption { 410 | padding-bottom: 2.5rem; 411 | } 412 | .orbit-bullets { 413 | position: absolute; 414 | width: 100%; 415 | text-align: center; 416 | bottom: 0; 417 | button { 418 | background: transparent; 419 | border: 1px solid $white; 420 | opacity: 1; 421 | transition: opacity 0.3s ease-out; 422 | &.is-active { 423 | opacity: 1; 424 | background-color:#fff; 425 | &:hover { 426 | opacity: 1; 427 | } 428 | } 429 | &:hover { 430 | opacity: 1; 431 | } 432 | } 433 | } 434 | } 435 | } 436 | 437 | // 12. Pagination 438 | // --------- 439 | .pagination { 440 | border: 1px solid #ddd; 441 | border-radius:$global-radius; 442 | display: inline-block; 443 | li { 444 | border-radius: 0; 445 | margin-right: -4px; 446 | border-right: 1px solid #ddd; 447 | &:last-child { 448 | border: 0; 449 | margin-right: -1px; 450 | } 451 | &.pagination-previous { 452 | border-top-left-radius: $global-radius; 453 | border-bottom-left-radius: $global-radius; 454 | } 455 | &.pagination-next { 456 | border-top-right-radius: $global-radius; 457 | border-bottom-right-radius: $global-radius; 458 | } 459 | a { 460 | border-radius: 0; 461 | padding: rem-calc(5) rem-calc(13); 462 | } 463 | &.current, &.disabled { 464 | padding: rem-calc(5) rem-calc(13); 465 | } 466 | &.current { 467 | background: $primary-color; 468 | color: $white; 469 | margin-left: -1px; 470 | border:0; 471 | &:hover { 472 | background: $primary-color; 473 | color: $white; 474 | } 475 | } 476 | &.ellipsis { 477 | border: 0; 478 | } 479 | } 480 | 481 | } 482 | 483 | // 13. Switch 484 | // --------- 485 | 486 | .switch { 487 | .switch-paddle { 488 | border-radius: 1rem; 489 | &::after { 490 | border-radius: 0.75rem; 491 | } 492 | } 493 | &.tiny { 494 | .switch-paddle { 495 | border-radius: 0.75rem; 496 | &::after { 497 | border-radius: 0.5rem; 498 | } 499 | } 500 | } 501 | &.small { 502 | .switch-paddle { 503 | border-radius: 0.875rem; 504 | &::after { 505 | border-radius: 0.625rem; 506 | } 507 | } 508 | } 509 | &.large { 510 | .switch-paddle { 511 | border-radius: 1.25rem; 512 | &::after { 513 | border-radius: 1.25rem; 514 | } 515 | } 516 | } 517 | } 518 | 519 | // 14. Table 520 | // --------- 521 | 522 | table { 523 | thead { 524 | border-bottom: 2px solid #f2f2f2; 525 | } 526 | tbody tr { 527 | border: 1px solid #f2f2f2; 528 | &:nth-child(even) { 529 | background: none; 530 | } 531 | &.primary { 532 | background: #d9edf7; 533 | } 534 | &.success { 535 | background: #dff0d8; 536 | } 537 | &.warning { 538 | background: #fcf8e3; 539 | } 540 | &.alert { 541 | background: #f2dede; 542 | } 543 | } 544 | } 545 | 546 | // 15. Tabs 547 | // --------- 548 | 549 | .tabs { 550 | border-width: 0 0 1px 0; 551 | .tabs-title { 552 | border-top-left-radius: $global-radius; 553 | border-top-right-radius: $global-radius; 554 | > a { 555 | padding: 1rem 1.5rem; 556 | font-size: rem-calc(14); 557 | border-radius: $global-radius $global-radius 0 0; 558 | } 559 | &.is-active { 560 | > a { 561 | color: $dark-gray; 562 | } 563 | border: 1px solid $light-gray; 564 | border-bottom-width: 0; 565 | margin-bottom: -1px; 566 | } 567 | } 568 | } 569 | 570 | .tabs-content { 571 | border-radius: 0 0 $global-radius $global-radius; 572 | border: 0; 573 | } 574 | 575 | // 16. Top Bar 576 | // --------- 577 | 578 | .title-bar { 579 | border-bottom: 1px solid #e7e7e7; 580 | color: #777; 581 | background: #f8f8f8; 582 | } 583 | 584 | .top-bar { 585 | color: #777; 586 | border-bottom: 1px solid #e7e7e7; 587 | ul { 588 | background: transparent; 589 | } 590 | .top-bar-inner { 591 | padding: 0.5rem 0 0 1rem; 592 | } 593 | .top-bar-text { 594 | padding: 0; 595 | @include breakpoint(medium up) { 596 | line-height: rem-calc(34); 597 | } 598 | } 599 | .menu { 600 | border: 0; 601 | border-radius: 0; 602 | * { 603 | outline: none; 604 | } 605 | > li { 606 | border-right: 0; 607 | a { 608 | color: #777; 609 | padding: rem-calc(17); 610 | font-size: rem-calc(14); 611 | &:hover { 612 | color: #555; 613 | } 614 | } 615 | &.menu-text { 616 | padding:rem-calc(15); 617 | font-size: rem-calc(18); 618 | font-weight: normal; 619 | } 620 | &:first-child > a { 621 | border-radius: 0; 622 | } 623 | &:last-child > a { 624 | border-radius: 0; 625 | } 626 | &.active > a { 627 | background: #e7e7e7; 628 | } 629 | } 630 | &.dropdown { 631 | .submenu { 632 | &.first-sub { 633 | left: 0; 634 | } 635 | background:$white; 636 | border: 1px solid rgba(0,0,0,.15); 637 | box-shadow: 0 6px 12px rgba(0,0,0,.175); 638 | border-bottom-left-radius: $global-radius; 639 | border-bottom-right-radius: $global-radius; 640 | padding: rem-calc(5) 0; 641 | a { 642 | color: #333; 643 | padding: rem-calc(3) rem-calc(20); 644 | line-height: rem-calc(20); 645 | } 646 | li { 647 | border: 0; 648 | } 649 | } 650 | .has-submenu.is-down-arrow > a::after, 651 | >li.is-dropdown-submenu-parent>a:after { 652 | border-color: #777 transparent transparent; 653 | border-width: 4px; 654 | margin-top: -2px; 655 | } 656 | .has-submenu.is-right-arrow > a::after { 657 | border-color: transparent transparent transparent #777; 658 | } 659 | } 660 | } 661 | input, button.white { 662 | display: inline-block; 663 | margin-bottom: 0; 664 | } 665 | input { 666 | margin-right: 2rem; 667 | } 668 | .button { 669 | margin-left: 0.5rem; 670 | } 671 | } 672 | 673 | .menu-icon:after { 674 | background: #777; 675 | box-shadow: 0 7px 0 #777,0 14px 0 #777; 676 | } 677 | 678 | .title-bar { 679 | .title-bar-title { 680 | font-weight: normal; 681 | } 682 | } -------------------------------------------------------------------------------- /advanced-bootstrap/source/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Off-canvas 29 | // 24. Orbit 30 | // 25. Pagination 31 | // 26. Progress Bar 32 | // 27. Reveal 33 | // 28. Slider 34 | // 29. Switch 35 | // 30. Table 36 | // 31. Tabs 37 | // 32. Thumbnail 38 | // 33. Tooltip 39 | // 34. Top Bar 40 | 41 | @import 'util/util'; 42 | 43 | // 1. Global 44 | // --------- 45 | 46 | $global-width: rem-calc(1200); 47 | $global-font-size: 100%; 48 | $global-lineheight: 1.5; 49 | $foundation-palette: ( 50 | primary: #337ab7, 51 | secondary: #888, 52 | success: #5cb85c, 53 | warning: #f0ad4e, 54 | alert: #d9534f, 55 | ); 56 | $primary-color: #337ab7; 57 | $secondary-color: #888; 58 | $success-color: #5cb85c; 59 | $warning-color: #f0ad4e; 60 | $alert-color: #d9534f; 61 | $light-gray: #ddd; 62 | $medium-gray: #cacaca; 63 | $dark-gray: #444444; 64 | $black: #0a0a0a; 65 | $white: #ffffff; 66 | $body-background: $white; 67 | $body-font-color: $black; 68 | $body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 69 | $body-antialiased: true; 70 | $text-direction: ltr; 71 | $global-margin: 1rem; 72 | $global-padding: 1rem; 73 | $global-margin: 1rem; 74 | $global-weight-normal: normal; 75 | $global-weight-bold: bold; 76 | $global-radius: 4px; 77 | $global-text-direction: ltr; 78 | $rem-base: 16px; 79 | 80 | // 2. Breakpoints 81 | // -------------- 82 | 83 | $breakpoints: ( 84 | small: 0, 85 | medium: 640px, 86 | large: 1024px, 87 | xlarge: 1200px, 88 | xxlarge: 1440px, 89 | ); 90 | $breakpoint-classes: (small medium large); 91 | 92 | // 3. The Grid 93 | // ----------- 94 | 95 | $grid-row-width: $global-width; 96 | $grid-column-count: 12; 97 | $grid-column-gutter: 30px; 98 | $block-grid-max: 6; 99 | 100 | // 4. Base Typography 101 | // ------------------ 102 | 103 | $header-font-family: $body-font-family; 104 | $header-font-weight: 500; 105 | $header-font-style: normal; 106 | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 107 | $header-sizes: ( 108 | small: ( 109 | 'h1': 24, 110 | 'h2': 20, 111 | 'h3': 19, 112 | 'h4': 18, 113 | 'h5': 17, 114 | 'h6': 16, 115 | ), 116 | medium: ( 117 | 'h1': 36, 118 | 'h2': 30, 119 | 'h3': 24, 120 | 'h4': 18, 121 | 'h5': 14, 122 | 'h6': 12, 123 | ), 124 | ); 125 | $header-color: inherit; 126 | $header-lineheight: 1.4; 127 | $header-margin-bottom: 0.5rem; 128 | $header-text-rendering: optimizeLegibility; 129 | $small-font-size: 80%; 130 | $header-small-font-color: $medium-gray; 131 | $paragraph-lineheight: 1.6; 132 | $paragraph-margin-bottom: 1rem; 133 | $paragraph-text-rendering: optimizeLegibility; 134 | $code-color: $black; 135 | $code-font-family: $font-family-monospace; 136 | $code-font-weight: $global-weight-normal; 137 | $code-background: $light-gray; 138 | $code-border: 0; 139 | $code-padding: rem-calc(2 5 1); 140 | $anchor-color: $primary-color; 141 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 142 | $anchor-text-decoration: none; 143 | $anchor-text-decoration-hover: none; 144 | $hr-width: $global-width; 145 | $hr-border: 1px solid $light-gray; 146 | $hr-margin: rem-calc(20) auto; 147 | $list-lineheight: $paragraph-lineheight; 148 | $list-margin-bottom: $paragraph-margin-bottom; 149 | $list-style-type: disc; 150 | $list-style-position: outside; 151 | $list-side-margin: 1.25rem; 152 | $list-nested-side-margin: 1.25rem; 153 | $defnlist-margin-bottom: 1rem; 154 | $defnlist-term-weight: $global-weight-bold; 155 | $defnlist-term-margin-bottom: 0.25rem; 156 | $blockquote-color: $dark-gray; 157 | $blockquote-padding: rem-calc(16 20 16 19); 158 | $blockquote-border: 3px solid $light-gray; 159 | $cite-font-size: rem-calc(13); 160 | $cite-color: $dark-gray; 161 | $keystroke-font: $font-family-monospace; 162 | $keystroke-color: $black; 163 | $keystroke-background: $light-gray; 164 | $keystroke-padding: rem-calc(2 4 0); 165 | $keystroke-radius: $global-radius; 166 | $abbr-underline: 1px dotted $black; 167 | 168 | // 5. Typography Helpers 169 | // --------------------- 170 | 171 | $lead-font-size: $global-font-size * 1.25; 172 | $lead-lineheight: 1.6; 173 | $subheader-lineheight: 1.4; 174 | $subheader-color: $dark-gray; 175 | $subheader-font-weight: $global-weight-normal; 176 | $subheader-margin-top: 0.2rem; 177 | $subheader-margin-bottom: 0.5rem; 178 | $stat-font-size: 2.5rem; 179 | 180 | // 6. Abide 181 | // -------- 182 | 183 | $abide-inputs: true; 184 | $abide-labels: true; 185 | $input-background-invalid: $alert-color; 186 | $form-label-color-invalid: $alert-color; 187 | $input-error-color: $alert-color; 188 | $input-error-font-size: rem-calc(12); 189 | $input-error-font-weight: $global-weight-bold; 190 | 191 | // 7. Accordion 192 | // ------------ 193 | 194 | $accordion-background: $white; 195 | $accordion-plusminus: true; 196 | $accordion-item-color: foreground($accordion-background, $primary-color); 197 | $accordion-item-background-hover: #fafdff; 198 | $accordion-item-padding: 1.25rem 1rem; 199 | $accordion-content-background: $white; 200 | $accordion-content-border: 1px solid $light-gray; 201 | $accordion-content-color: foreground($accordion-background, $primary-color); 202 | $accordion-content-padding: 1rem; 203 | 204 | // 8. Accordion Menu 205 | // ----------------- 206 | 207 | $accordionmenu-arrows: true; 208 | 209 | // 9. Badge 210 | // -------- 211 | 212 | $badge-background: $primary-color; 213 | $badge-color: foreground($badge-background); 214 | $badge-padding: 0.3em; 215 | $badge-minwidth: 2.1em; 216 | $badge-font-size: 0.6rem; 217 | 218 | // 10. Breadcrumbs 219 | // --------------- 220 | 221 | $breadcrumbs-margin: 0 0 $global-margin 0; 222 | $breadcrumbs-item-font-size: rem-calc(11); 223 | $breadcrumbs-item-color: $primary-color; 224 | $breadcrumbs-item-color-current: $black; 225 | $breadcrumbs-item-color-disabled: $medium-gray; 226 | $breadcrumbs-item-margin: 0.75rem; 227 | $breadcrumbs-item-uppercase: true; 228 | $breadcrumbs-item-slash: true; 229 | 230 | // 11. Button 231 | // ---------- 232 | 233 | $button-padding: 0.43em 0.86em; 234 | $button-margin: 0 $global-margin $global-margin 0; 235 | $button-fill: solid; 236 | $button-background: #ffffff; 237 | $button-background-hover: #e6e6e6; 238 | $button-color: #333; 239 | $button-color-alt: #000; 240 | $button-radius: $global-radius; 241 | $button-sizes: ( 242 | tiny: 0.6rem, 243 | small: 0.75rem, 244 | default: rem-calc(14), 245 | large: 1.25rem, 246 | ); 247 | $button-opacity-disabled: 0.25; 248 | 249 | // 12. Button Group 250 | // ---------------- 251 | 252 | $buttongroup-margin: 1rem; 253 | $buttongroup-spacing: 1px; 254 | $buttongroup-child-selector: '.button'; 255 | $buttongroup-expand-max: 6; 256 | 257 | // 13. Callout 258 | // ----------- 259 | 260 | $callout-background: $white; 261 | $callout-background-fade: 0%; 262 | $callout-border: 1px solid #e8e8e8; 263 | $callout-margin: 0 0 1rem 0; 264 | $callout-padding: 1rem; 265 | $callout-font-color: $white; 266 | $callout-font-color-alt: $body-background; 267 | $callout-radius: $global-radius; 268 | $callout-link-tint: 30%; 269 | 270 | // 14. Close Button 271 | // ---------------- 272 | 273 | $closebutton-position: right top; 274 | $closebutton-offset-horizontal: 1rem; 275 | $closebutton-offset-vertical: 0.5rem; 276 | $closebutton-size: 2em; 277 | $closebutton-lineheight: 1; 278 | $closebutton-color: $dark-gray; 279 | $closebutton-color-hover: $black; 280 | 281 | // 15. Drilldown 282 | // ------------- 283 | 284 | $drilldown-transition: transform 0.15s linear; 285 | $drilldown-arrows: true; 286 | 287 | // 16. Dropdown 288 | // ------------ 289 | 290 | $dropdown-padding: 1rem; 291 | $dropdown-border: 1px solid $light-gray; 292 | $dropdown-font-size: 16rem; 293 | $dropdown-width: 300px; 294 | $dropdown-radius: $global-radius; 295 | $dropdown-sizes: ( 296 | tiny: 100px, 297 | small: 200px, 298 | large: 400px, 299 | ); 300 | 301 | // 17. Dropdown Menu 302 | // ----------------- 303 | 304 | $dropdownmenu-arrows: true; 305 | $dropdownmenu-min-width: 200px; 306 | $dropdownmenu-background: $white; 307 | $dropdown-border: 1px solid $light-gray; 308 | 309 | // 18. Flex Video 310 | // -------------- 311 | 312 | $flexvideo-padding-top: rem-calc(25); 313 | $flexvideo-margin-bottom: rem-calc(16); 314 | $flexvideo-ratio: 4 by 3; 315 | $flexvideo-ratio-widescreen: 16 by 9; 316 | 317 | // 19. Forms 318 | // --------- 319 | 320 | $fieldset-border: 1px solid $light-gray; 321 | $fieldset-padding: rem-calc(20); 322 | $fieldset-margin: rem-calc(18 0); 323 | $legend-padding: rem-calc(0 3); 324 | $form-spacing: rem-calc(16); 325 | $helptext-color: #333; 326 | $helptext-font-size: rem-calc(13); 327 | $helptext-font-style: italic; 328 | $input-prefix-color: $black; 329 | $input-prefix-background: $light-gray; 330 | $input-prefix-border: 1px solid $medium-gray; 331 | $input-prefix-padding: 1rem; 332 | $form-label-color: $black; 333 | $form-label-font-size: rem-calc(14); 334 | $form-label-font-weight: $global-weight-normal; 335 | $form-label-line-height: 1.8; 336 | $select-background: #fafafa; 337 | $select-triangle-color: #333; 338 | $select-radius: $global-radius; 339 | $input-color: $dark-gray; 340 | $input-font-family: inherit; 341 | $input-font-size: rem-calc(14); 342 | $input-background: $white; 343 | $input-background-focus: $white; 344 | $input-background-disabled: $light-gray; 345 | $input-border: 1px solid $medium-gray; 346 | $input-border-focus: 1px solid lighten($primary-color, +10%); 347 | $input-shadow: inset 0 1px 1px rgba(0,0,0,.075); 348 | $input-shadow-focus: 0 0 3px $medium-gray; 349 | $input-cursor-disabled: default; 350 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 351 | $input-number-spinners: true; 352 | $input-radius: $global-radius; 353 | 354 | // 20. Label 355 | // --------- 356 | 357 | $label-background: $primary-color; 358 | $label-color: foreground($label-background); 359 | $label-font-size: 0.8rem; 360 | $label-padding: 0.33333rem 0.5rem; 361 | $label-radius: $global-radius; 362 | 363 | // 21. Media Object 364 | // ---------------- 365 | 366 | $mediaobject-margin-bottom: $global-margin; 367 | $mediaobject-section-padding: $global-padding; 368 | $mediaobject-image-width-stacked: 100%; 369 | 370 | // 22. Menu 371 | // -------- 372 | 373 | $menu-margin: 0; 374 | $menu-margin-nested: 1rem; 375 | $menu-item-padding: 0.85rem 1rem; 376 | $menu-icon-spacing: 0.25rem; 377 | $menu-expand-max: 6; 378 | 379 | // 23. Off-canvas 380 | // -------------- 381 | 382 | $offcanvas-size: 250px; 383 | $offcanvas-background: $light-gray; 384 | $offcanvas-zindex: -1; 385 | $offcanvas-transition-length: 0.5s; 386 | $offcanvas-transition-timing: ease; 387 | $offcanvas-exit-background: rgba($white, 0.25); 388 | $maincontent-class: 'off-canvas-content'; 389 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 390 | 391 | // 24. Orbit 392 | // --------- 393 | 394 | $orbit-bullet-background: $medium-gray; 395 | $orbit-bullet-background-active: $primary-color; 396 | $orbit-bullet-diameter: 0.625rem; 397 | $orbit-bullet-margin: 0.1rem; 398 | $orbit-bullet-margin-top: 0.8rem; 399 | $orbit-bullet-margin-bottom: 0.8rem; 400 | $orbit-caption-background: rgba($black, 0.5); 401 | $orbit-caption-padding: 1rem; 402 | $orbit-control-background-hover: rgba($black, 0.5); 403 | $orbit-control-padding: 1rem; 404 | $orbit-control-zindex: 10; 405 | 406 | // 25. Pagination 407 | // -------------- 408 | 409 | $pagination-font-size: rem-calc(14); 410 | $pagination-margin-bottom: $global-margin; 411 | $pagination-item-color: $primary-color; 412 | $pagination-item-padding: rem-calc(3 10); 413 | $pagination-item-spacing: rem-calc(0); 414 | $pagination-radius: $global-radius; 415 | $pagination-item-background-hover: lighten($light-gray, 5%); 416 | $pagination-item-background-current: lighten($light-gray, 5%); 417 | $pagination-item-color-current: $black; 418 | $pagination-item-color-disabled: $medium-gray; 419 | $pagination-ellipsis-color: $black; 420 | $pagination-mobile-items: false; 421 | $pagination-arrows: true; 422 | 423 | // 26. Progress Bar 424 | // ---------------- 425 | 426 | $progress-height: 1rem; 427 | $progress-background: $medium-gray; 428 | $progress-margin-bottom: $global-margin; 429 | $progress-meter-background: $primary-color; 430 | $progress-radius: $global-radius; 431 | 432 | // 27. Reveal 433 | // ---------- 434 | 435 | $reveal-background: $white; 436 | $reveal-width: 600px; 437 | $reveal-max-width: $global-width; 438 | $reveal-offset: rem-calc(100); 439 | $reveal-padding: $global-padding; 440 | $reveal-border: 1px solid $medium-gray; 441 | $reveal-radius: $global-radius; 442 | $reveal-zindex: 1005; 443 | $reveal-overlay-background: rgba($black, 0.6); 444 | 445 | // 28. Slider 446 | // ---------- 447 | 448 | $slider-height: 0.5rem; 449 | $slider-width-vertical: $slider-height; 450 | $slider-background: $light-gray; 451 | $slider-fill-background: $medium-gray; 452 | $slider-handle-height: 1.4rem; 453 | $slider-handle-width: 1.4rem; 454 | $slider-handle-background: $primary-color; 455 | $slider-opacity-disabled: 0.25; 456 | $slider-radius: $global-radius; 457 | $slider-transition: all 0.2s ease-in-out; 458 | 459 | // 29. Switch 460 | // ---------- 461 | 462 | $switch-background: $medium-gray; 463 | $switch-background-active: $primary-color; 464 | $switch-height: 2rem; 465 | $switch-height-tiny: 1.5rem; 466 | $switch-height-small: 1.75rem; 467 | $switch-height-large: 2.5rem; 468 | $switch-radius: 1rem; 469 | $switch-margin: $global-margin; 470 | $switch-paddle-background: $white; 471 | $switch-paddle-offset: 0.25rem; 472 | $switch-paddle-radius: 0.75rem; 473 | $switch-paddle-transition: all 0.25s ease-out; 474 | 475 | // 30. Table 476 | // --------- 477 | 478 | $table-background: $white; 479 | $table-color-scale: 5%; 480 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 481 | $table-padding: rem-calc(10 10 10); 482 | $table-hover-scale: 2%; 483 | $table-row-hover: darken($table-background, $table-hover-scale); 484 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 485 | $table-striped-background: $white; 486 | $table-stripe: even; 487 | $table-head-background: $white; 488 | $table-foot-background: $white; 489 | $table-head-font-color: $body-font-color; 490 | $show-header-for-stacked: false; 491 | 492 | // 31. Tabs 493 | // -------- 494 | 495 | $tab-margin: 0; 496 | $tab-background: $white; 497 | $tab-background-active: $white; 498 | $tab-border: $light-gray; 499 | $tab-item-color: foreground($tab-background, $primary-color); 500 | $tab-item-background-hover: $white; 501 | $tab-item-padding: 1.25rem 1.5rem; 502 | $tab-expand-max: 6; 503 | $tab-content-background: $white; 504 | $tab-content-border: $light-gray; 505 | $tab-content-color: foreground($tab-background, $primary-color); 506 | $tab-content-padding: 1rem 1rem 0.5rem; 507 | 508 | // 32. Thumbnail 509 | // ------------- 510 | 511 | $thumbnail-border: solid 4px $white; 512 | $thumbnail-margin-bottom: $global-margin; 513 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 514 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 515 | $thumbnail-transition: box-shadow 200ms ease-out; 516 | $thumbnail-radius: $global-radius; 517 | 518 | // 33. Tooltip 519 | // ----------- 520 | 521 | $tooltip-background-color: $black; 522 | $tooltip-color: $white; 523 | $tooltip-padding: 0.75rem; 524 | $tooltip-font-size: $small-font-size; 525 | $tooltip-pip-width: 0.75rem; 526 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 527 | $tooltip-pip-offset: 1.25rem; 528 | $tooltip-radius: $global-radius; 529 | 530 | // 34. Top Bar 531 | // ----------- 532 | 533 | $topbar-padding: 0; 534 | $topbar-background: #f8f8f8; 535 | $topbar-link-color: #777; 536 | $topbar-input-width: 200px; 537 | 538 | -------------------------------------------------------------------------------- /gradient/source/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Off-canvas 29 | // 24. Orbit 30 | // 25. Pagination 31 | // 26. Progress Bar 32 | // 27. Reveal 33 | // 28. Slider 34 | // 29. Switch 35 | // 30. Table 36 | // 31. Tabs 37 | // 32. Thumbnail 38 | // 33. Tooltip 39 | // 34. Top Bar 40 | 41 | @import 'util/util'; 42 | 43 | // 1. Global 44 | // --------- 45 | 46 | $global-width: rem-calc(1200); 47 | $global-font-size: 100%; 48 | $global-lineheight: 1.5; 49 | $foundation-palette: ( 50 | primary: #03a0f9, 51 | secondary: #888, 52 | success: #94ce2e, 53 | warning: #f2b617, 54 | alert: #fc733d, 55 | ); 56 | $primary-color: #03a0f9; 57 | $secondary-color: #888; 58 | $success-color: #94ce2e; 59 | $warning-color: #f2b617; 60 | $alert-color: #fc733d; 61 | $light-gray: #e8e8e8; 62 | $medium-gray: #cacaca; 63 | $dark-gray: #444444; 64 | $black: #0a0a0a; 65 | $white: #fefefe; 66 | $body-background: $white; 67 | $body-font-color: $black; 68 | $body-font-family: Roboto, Arial, sans-serif; 69 | $body-antialiased: true; 70 | $text-direction: ltr; 71 | $global-margin: 1rem; 72 | $global-padding: 1rem; 73 | $global-margin: 1rem; 74 | $global-weight-normal: normal; 75 | $global-weight-bold: bold; 76 | $global-radius: 4px; 77 | $global-text-direction: ltr; 78 | $rem-base: 16px; 79 | 80 | // 2. Breakpoints 81 | // -------------- 82 | 83 | $breakpoints: ( 84 | small: 0, 85 | medium: 640px, 86 | large: 1024px, 87 | xlarge: 1200px, 88 | xxlarge: 1440px, 89 | ); 90 | $breakpoint-classes: (small medium large); 91 | 92 | // 3. The Grid 93 | // ----------- 94 | 95 | $grid-row-width: $global-width; 96 | $grid-column-count: 12; 97 | $grid-column-gutter: 30px; 98 | $block-grid-max: 6; 99 | 100 | // 4. Base Typography 101 | // ------------------ 102 | 103 | $header-font-family: $body-font-family; 104 | $header-font-weight: 300; 105 | $header-font-style: normal; 106 | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 107 | $header-sizes: ( 108 | small: ( 109 | 'h1': 24, 110 | 'h2': 20, 111 | 'h3': 19, 112 | 'h4': 18, 113 | 'h5': 17, 114 | 'h6': 16, 115 | ), 116 | medium: ( 117 | 'h1': 48, 118 | 'h2': 40, 119 | 'h3': 31, 120 | 'h4': 25, 121 | 'h5': 20, 122 | 'h6': 16, 123 | ), 124 | ); 125 | $header-color: inherit; 126 | $header-lineheight: 1.4; 127 | $header-margin-bottom: 0.5rem; 128 | $header-text-rendering: optimizeLegibility; 129 | $small-font-size: 80%; 130 | $header-small-font-color: $medium-gray; 131 | $paragraph-lineheight: 1.6; 132 | $paragraph-margin-bottom: 1rem; 133 | $paragraph-text-rendering: optimizeLegibility; 134 | $code-color: $black; 135 | $code-font-family: $font-family-monospace; 136 | $code-font-weight: $global-weight-normal; 137 | $code-background: $light-gray; 138 | $code-border: 0; 139 | $code-padding: rem-calc(2 5 1); 140 | $anchor-color: $primary-color; 141 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 142 | $anchor-text-decoration: none; 143 | $anchor-text-decoration-hover: none; 144 | $hr-width: $global-width; 145 | $hr-border: 1px solid $light-gray; 146 | $hr-margin: rem-calc(20) auto; 147 | $list-lineheight: $paragraph-lineheight; 148 | $list-margin-bottom: $paragraph-margin-bottom; 149 | $list-style-type: disc; 150 | $list-style-position: outside; 151 | $list-side-margin: 1.25rem; 152 | $list-nested-side-margin: 1.25rem; 153 | $defnlist-margin-bottom: 1rem; 154 | $defnlist-term-weight: $global-weight-bold; 155 | $defnlist-term-margin-bottom: 0.25rem; 156 | $blockquote-color: $dark-gray; 157 | $blockquote-padding: rem-calc(16 20 16 19); 158 | $blockquote-border: 3px solid $light-gray; 159 | $cite-font-size: rem-calc(13); 160 | $cite-color: $dark-gray; 161 | $keystroke-font: $font-family-monospace; 162 | $keystroke-color: $black; 163 | $keystroke-background: $light-gray; 164 | $keystroke-padding: rem-calc(2 4 0); 165 | $keystroke-radius: $global-radius; 166 | $abbr-underline: 1px dotted $black; 167 | 168 | // 5. Typography Helpers 169 | // --------------------- 170 | 171 | $lead-font-size: $global-font-size * 1.25; 172 | $lead-lineheight: 1.6; 173 | $subheader-lineheight: 1.4; 174 | $subheader-color: $dark-gray; 175 | $subheader-font-weight: $global-weight-normal; 176 | $subheader-margin-top: 0.2rem; 177 | $subheader-margin-bottom: 0.5rem; 178 | $stat-font-size: 2.5rem; 179 | 180 | // 6. Abide 181 | // -------- 182 | 183 | $abide-inputs: true; 184 | $abide-labels: true; 185 | $input-background-invalid: $alert-color; 186 | $form-label-color-invalid: $alert-color; 187 | $input-error-color: $alert-color; 188 | $input-error-font-size: rem-calc(12); 189 | $input-error-font-weight: $global-weight-bold; 190 | 191 | // 7. Accordion 192 | // ------------ 193 | 194 | $accordion-background: $white; 195 | $accordion-plusminus: true; 196 | $accordion-item-color: foreground($accordion-background, $primary-color); 197 | $accordion-item-background-hover: #fafdff; 198 | $accordion-item-padding: 1.25rem 1rem; 199 | $accordion-content-background: $white; 200 | $accordion-content-border: 1px solid $light-gray; 201 | $accordion-content-color: foreground($accordion-background, $primary-color); 202 | $accordion-content-padding: 1rem; 203 | 204 | // 8. Accordion Menu 205 | // ----------------- 206 | 207 | $accordionmenu-arrows: true; 208 | 209 | // 9. Badge 210 | // -------- 211 | 212 | $badge-background: $primary-color; 213 | $badge-color: foreground($badge-background); 214 | $badge-padding: 0.3em; 215 | $badge-minwidth: 2.1em; 216 | $badge-font-size: 0.6rem; 217 | 218 | // 10. Breadcrumbs 219 | // --------------- 220 | 221 | $breadcrumbs-margin: 0 0 $global-margin 0; 222 | $breadcrumbs-item-font-size: rem-calc(11); 223 | $breadcrumbs-item-color: $primary-color; 224 | $breadcrumbs-item-color-current: $black; 225 | $breadcrumbs-item-color-disabled: $medium-gray; 226 | $breadcrumbs-item-margin: 0.75rem; 227 | $breadcrumbs-item-uppercase: true; 228 | $breadcrumbs-item-slash: true; 229 | 230 | // 11. Button 231 | // ---------- 232 | 233 | $button-padding: 0.8em 1em; 234 | $button-margin: 0 $global-margin $global-margin 0; 235 | $button-fill: solid; 236 | $button-background: $primary-color; 237 | $button-background-hover: scale-color($button-background, $lightness: -5%); 238 | $button-color: #fff; 239 | $button-color-alt: #000; 240 | $button-radius: $global-radius; 241 | $button-sizes: ( 242 | tiny: 0.6rem, 243 | small: 0.75rem, 244 | default: 0.9rem, 245 | large: 1.25rem, 246 | ); 247 | $button-opacity-disabled: 0.25; 248 | 249 | // 12. Button Group 250 | // ---------------- 251 | 252 | $buttongroup-margin: 1rem; 253 | $buttongroup-spacing: 1px; 254 | $buttongroup-child-selector: '.button'; 255 | $buttongroup-expand-max: 6; 256 | 257 | // 13. Callout 258 | // ----------- 259 | 260 | $callout-background: $white; 261 | $callout-background-fade: 0%; 262 | $callout-border: 1px solid #e8e8e8; 263 | $callout-margin: 0 0 1rem 0; 264 | $callout-padding: 1rem; 265 | $callout-font-color: $white; 266 | $callout-font-color-alt: $body-background; 267 | $callout-radius: $global-radius; 268 | $callout-link-tint: 30%; 269 | 270 | // 14. Close Button 271 | // ---------------- 272 | 273 | $closebutton-position: right top; 274 | $closebutton-offset-horizontal: 1rem; 275 | $closebutton-offset-vertical: 0.5rem; 276 | $closebutton-size: 2em; 277 | $closebutton-lineheight: 1; 278 | $closebutton-color: $dark-gray; 279 | $closebutton-color-hover: $black; 280 | 281 | // 15. Drilldown 282 | // ------------- 283 | 284 | $drilldown-transition: transform 0.15s linear; 285 | $drilldown-arrows: true; 286 | 287 | // 16. Dropdown 288 | // ------------ 289 | 290 | $dropdown-padding: 1rem; 291 | $dropdown-border: 1px solid $light-gray; 292 | $dropdown-font-size: 16rem; 293 | $dropdown-width: 300px; 294 | $dropdown-radius: $global-radius; 295 | $dropdown-sizes: ( 296 | tiny: 100px, 297 | small: 200px, 298 | large: 400px, 299 | ); 300 | 301 | // 17. Dropdown Menu 302 | // ----------------- 303 | 304 | $dropdownmenu-arrows: true; 305 | $dropdownmenu-min-width: 200px; 306 | $dropdownmenu-background: $white; 307 | $dropdown-border: 1px solid $light-gray; 308 | 309 | // 18. Flex Video 310 | // -------------- 311 | 312 | $flexvideo-padding-top: rem-calc(25); 313 | $flexvideo-margin-bottom: rem-calc(16); 314 | $flexvideo-ratio: 4 by 3; 315 | $flexvideo-ratio-widescreen: 16 by 9; 316 | 317 | // 19. Forms 318 | // --------- 319 | 320 | $fieldset-border: 1px solid $light-gray; 321 | $fieldset-padding: rem-calc(20); 322 | $fieldset-margin: rem-calc(18 0); 323 | $legend-padding: rem-calc(0 3); 324 | $form-spacing: rem-calc(16); 325 | $helptext-color: #333; 326 | $helptext-font-size: rem-calc(13); 327 | $helptext-font-style: italic; 328 | $input-prefix-color: $black; 329 | $input-prefix-background: $light-gray; 330 | $input-prefix-border: 1px solid $medium-gray; 331 | $input-prefix-padding: 1rem; 332 | $form-label-color: $black; 333 | $form-label-font-size: rem-calc(14); 334 | $form-label-font-weight: $global-weight-normal; 335 | $form-label-line-height: 1.8; 336 | $select-background: #fafafa; 337 | $select-triangle-color: #333; 338 | $select-radius: $global-radius; 339 | $input-color: $dark-gray; 340 | $input-font-family: inherit; 341 | $input-font-size: rem-calc(16); 342 | $input-background: $white; 343 | $input-background-focus: $white; 344 | $input-background-disabled: $light-gray; 345 | $input-border: 1px solid $medium-gray; 346 | $input-border-focus: 1px solid $primary-color; 347 | $input-shadow: none; 348 | $input-shadow-focus: 0 0 3px $medium-gray; 349 | $input-cursor-disabled: default; 350 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 351 | $input-number-spinners: true; 352 | $input-radius: $global-radius; 353 | 354 | // 20. Label 355 | // --------- 356 | 357 | $label-background: $primary-color; 358 | $label-color: foreground($label-background); 359 | $label-font-size: 0.8rem; 360 | $label-padding: 0.33333rem 0.5rem; 361 | $label-radius: $global-radius; 362 | 363 | // 21. Media Object 364 | // ---------------- 365 | 366 | $mediaobject-margin-bottom: $global-margin; 367 | $mediaobject-section-padding: $global-padding; 368 | $mediaobject-image-width-stacked: 100%; 369 | 370 | // 22. Menu 371 | // -------- 372 | 373 | $menu-margin: 0; 374 | $menu-margin-nested: 1rem; 375 | $menu-item-padding: 0.85rem 1rem; 376 | $menu-icon-spacing: 0.25rem; 377 | $menu-expand-max: 6; 378 | 379 | // 23. Off-canvas 380 | // -------------- 381 | 382 | $offcanvas-size: 250px; 383 | $offcanvas-background: $light-gray; 384 | $offcanvas-zindex: -1; 385 | $offcanvas-transition-length: 0.5s; 386 | $offcanvas-transition-timing: ease; 387 | $offcanvas-exit-background: rgba($white, 0.25); 388 | $maincontent-class: 'off-canvas-content'; 389 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 390 | 391 | // 24. Orbit 392 | // --------- 393 | 394 | $orbit-bullet-background: $medium-gray; 395 | $orbit-bullet-background-active: $primary-color; 396 | $orbit-bullet-diameter: 0.625rem; 397 | $orbit-bullet-margin: 0.1rem; 398 | $orbit-bullet-margin-top: 0.8rem; 399 | $orbit-bullet-margin-bottom: 0.8rem; 400 | $orbit-caption-background: rgba($black, 0.5); 401 | $orbit-caption-padding: 1rem; 402 | $orbit-control-background-hover: rgba($black, 0.5); 403 | $orbit-control-padding: 1rem; 404 | $orbit-control-zindex: 10; 405 | 406 | // 25. Pagination 407 | // -------------- 408 | 409 | $pagination-font-size: rem-calc(14); 410 | $pagination-margin-bottom: $global-margin; 411 | $pagination-item-color: $primary-color; 412 | $pagination-item-padding: rem-calc(3 10); 413 | $pagination-item-spacing: rem-calc(1); 414 | $pagination-radius: $global-radius; 415 | $pagination-item-background-hover: lighten($light-gray, 5%); 416 | $pagination-item-background-current: lighten($light-gray, 5%); 417 | $pagination-item-color-current: $black; 418 | $pagination-item-color-disabled: $medium-gray; 419 | $pagination-ellipsis-color: $black; 420 | $pagination-mobile-items: false; 421 | $pagination-arrows: true; 422 | 423 | // 26. Progress Bar 424 | // ---------------- 425 | 426 | $progress-height: 1rem; 427 | $progress-background: $medium-gray; 428 | $progress-margin-bottom: $global-margin; 429 | $progress-meter-background: $primary-color; 430 | $progress-radius: $global-radius; 431 | 432 | // 27. Reveal 433 | // ---------- 434 | 435 | $reveal-background: $white; 436 | $reveal-width: 600px; 437 | $reveal-max-width: $global-width; 438 | $reveal-offset: rem-calc(100); 439 | $reveal-padding: $global-padding; 440 | $reveal-border: 1px solid $medium-gray; 441 | $reveal-radius: $global-radius; 442 | $reveal-zindex: 1005; 443 | $reveal-overlay-background: rgba($black, 0.6); 444 | 445 | // 28. Slider 446 | // ---------- 447 | 448 | $slider-height: 0.5rem; 449 | $slider-width-vertical: $slider-height; 450 | $slider-background: $light-gray; 451 | $slider-fill-background: $medium-gray; 452 | $slider-handle-height: 1.4rem; 453 | $slider-handle-width: 1.4rem; 454 | $slider-handle-background: $primary-color; 455 | $slider-opacity-disabled: 0.25; 456 | $slider-radius: $global-radius; 457 | $slider-transition: all 0.2s ease-in-out; 458 | 459 | // 29. Switch 460 | // ---------- 461 | 462 | $switch-background: $medium-gray; 463 | $switch-background-active: $primary-color; 464 | $switch-height: 2rem; 465 | $switch-height-tiny: 1.5rem; 466 | $switch-height-small: 1.75rem; 467 | $switch-height-large: 2.5rem; 468 | $switch-radius: 1rem; 469 | $switch-margin: $global-margin; 470 | $switch-paddle-background: $white; 471 | $switch-paddle-offset: 0.25rem; 472 | $switch-paddle-radius: 0.75rem; 473 | $switch-paddle-transition: all 0.25s ease-out; 474 | 475 | // 30. Table 476 | // --------- 477 | 478 | $table-background: $white; 479 | $table-color-scale: 5%; 480 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 481 | $table-padding: rem-calc(8 10 10); 482 | $table-hover-scale: 2%; 483 | $table-row-hover: darken($table-background, $table-hover-scale); 484 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 485 | $table-striped-background: smart-scale($table-background, $table-color-scale); 486 | $table-stripe: even; 487 | $table-head-background: smart-scale($table-background, $table-color-scale / 2); 488 | $table-foot-background: smart-scale($table-background, $table-color-scale); 489 | $table-head-font-color: $body-font-color; 490 | $show-header-for-stacked: false; 491 | 492 | // 31. Tabs 493 | // -------- 494 | 495 | $tab-margin: 0; 496 | $tab-background: $white; 497 | $tab-background-active: $white; 498 | $tab-border: $light-gray; 499 | $tab-item-color: foreground($tab-background, $primary-color); 500 | $tab-item-background-hover: $white; 501 | $tab-item-padding: 1.25rem 1.5rem; 502 | $tab-expand-max: 6; 503 | $tab-content-background: $white; 504 | $tab-content-border: $light-gray; 505 | $tab-content-color: foreground($tab-background, $primary-color); 506 | $tab-content-padding: 1rem 1rem 0.5rem; 507 | 508 | // 32. Thumbnail 509 | // ------------- 510 | 511 | $thumbnail-border: solid 4px $white; 512 | $thumbnail-margin-bottom: $global-margin; 513 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 514 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 515 | $thumbnail-transition: box-shadow 200ms ease-out; 516 | $thumbnail-radius: $global-radius; 517 | 518 | // 33. Tooltip 519 | // ----------- 520 | 521 | $tooltip-background-color: $black; 522 | $tooltip-color: $white; 523 | $tooltip-padding: 0.75rem; 524 | $tooltip-font-size: $small-font-size; 525 | $tooltip-pip-width: 0.75rem; 526 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 527 | $tooltip-pip-offset: 1.25rem; 528 | $tooltip-radius: $global-radius; 529 | 530 | // 34. Top Bar 531 | // ----------- 532 | 533 | $topbar-padding: 0; 534 | $topbar-background: darken($primary-color, 3%); 535 | $topbar-link-color: #fff; 536 | $topbar-input-width: 200px; 537 | 538 | -------------------------------------------------------------------------------- /dark/source/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Off-canvas 29 | // 24. Orbit 30 | // 25. Pagination 31 | // 26. Progress Bar 32 | // 27. Reveal 33 | // 28. Slider 34 | // 29. Switch 35 | // 30. Table 36 | // 31. Tabs 37 | // 32. Thumbnail 38 | // 33. Tooltip 39 | // 34. Top Bar 40 | 41 | @import 'util/util'; 42 | 43 | // 1. Global 44 | // --------- 45 | 46 | $global-width: rem-calc(1200); 47 | $global-font-size: 100%; 48 | $global-lineheight: 1.5; 49 | $foundation-palette: ( 50 | primary: #fff, 51 | secondary: #888, 52 | success: #13c25c, 53 | warning: #ffae00, 54 | alert: #ec5840, 55 | ); 56 | $primary-color: #fff; 57 | $secondary-color: #888; 58 | $success-color: #13c25c; 59 | $warning-color: #ffae00; 60 | $alert-color: #ec5840; 61 | $light-gray: #ccc; 62 | $medium-gray: #cacaca; 63 | $dark-gray: #333; 64 | $black: #0a0a0a; 65 | $white: #fefefe; 66 | $body-background: #121212; 67 | $body-font-color: #a5a5a5; 68 | $body-font-family: Roboto, Arial, sans-serif; 69 | $body-antialiased: true; 70 | $text-direction: ltr; 71 | $global-margin: 1rem; 72 | $global-padding: 1rem; 73 | $global-margin: 1rem; 74 | $global-weight-normal: normal; 75 | $global-weight-bold: bold; 76 | $global-radius: 2px; 77 | $global-text-direction: ltr; 78 | $rem-base: 16px; 79 | 80 | // 2. Breakpoints 81 | // -------------- 82 | 83 | $breakpoints: ( 84 | small: 0, 85 | medium: 640px, 86 | large: 1024px, 87 | xlarge: 1200px, 88 | xxlarge: 1440px, 89 | ); 90 | $breakpoint-classes: (small medium large); 91 | 92 | // 3. The Grid 93 | // ----------- 94 | 95 | $grid-row-width: $global-width; 96 | $grid-column-count: 12; 97 | $grid-column-gutter: 30px; 98 | $block-grid-max: 6; 99 | 100 | // 4. Base Typography 101 | // ------------------ 102 | 103 | $header-font-family: $body-font-family; 104 | $header-font-weight: $global-weight-normal; 105 | $header-font-style: normal; 106 | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 107 | $header-sizes: ( 108 | small: ( 109 | 'h1': 24, 110 | 'h2': 20, 111 | 'h3': 19, 112 | 'h4': 18, 113 | 'h5': 17, 114 | 'h6': 16, 115 | ), 116 | medium: ( 117 | 'h1': 48, 118 | 'h2': 40, 119 | 'h3': 31, 120 | 'h4': 25, 121 | 'h5': 20, 122 | 'h6': 16, 123 | ), 124 | ); 125 | $header-color: inherit; 126 | $header-lineheight: 1.4; 127 | $header-margin-bottom: 0.5rem; 128 | $header-text-rendering: optimizeLegibility; 129 | $small-font-size: 80%; 130 | $header-small-font-color: $medium-gray; 131 | $paragraph-lineheight: 1.6; 132 | $paragraph-margin-bottom: 1rem; 133 | $paragraph-text-rendering: optimizeLegibility; 134 | $code-color: $black; 135 | $code-font-family: $font-family-monospace; 136 | $code-font-weight: $global-weight-normal; 137 | $code-background: $light-gray; 138 | $code-border: 1px solid $medium-gray; 139 | $code-padding: rem-calc(2 5 1); 140 | $anchor-color: $primary-color; 141 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 142 | $anchor-text-decoration: none; 143 | $anchor-text-decoration-hover: none; 144 | $hr-width: $global-width; 145 | $hr-border: 1px solid $dark-gray; 146 | $hr-margin: rem-calc(20) auto; 147 | $list-lineheight: $paragraph-lineheight; 148 | $list-margin-bottom: $paragraph-margin-bottom; 149 | $list-style-type: disc; 150 | $list-style-position: outside; 151 | $list-side-margin: 1.25rem; 152 | $list-nested-side-margin: 1.25rem; 153 | $defnlist-margin-bottom: 1rem; 154 | $defnlist-term-weight: $global-weight-bold; 155 | $defnlist-term-margin-bottom: 0.25rem; 156 | $blockquote-color: #fff; 157 | $blockquote-padding: rem-calc(16 20 16 19); 158 | $blockquote-border: 3px solid #444; 159 | $cite-font-size: rem-calc(13); 160 | $cite-color: $dark-gray; 161 | $keystroke-font: $font-family-monospace; 162 | $keystroke-color: $black; 163 | $keystroke-background: $light-gray; 164 | $keystroke-padding: rem-calc(2 4 0); 165 | $keystroke-radius: $global-radius; 166 | $abbr-underline: 1px dotted $black; 167 | 168 | // 5. Typography Helpers 169 | // --------------------- 170 | 171 | $lead-font-size: $global-font-size * 1.25; 172 | $lead-lineheight: 1.6; 173 | $subheader-lineheight: 1.4; 174 | $subheader-color: $dark-gray; 175 | $subheader-font-weight: $global-weight-normal; 176 | $subheader-margin-top: 0.2rem; 177 | $subheader-margin-bottom: 0.5rem; 178 | $stat-font-size: 2.5rem; 179 | 180 | // 6. Abide 181 | // -------- 182 | 183 | $abide-inputs: true; 184 | $abide-labels: true; 185 | $input-background-invalid: $alert-color; 186 | $form-label-color-invalid: $alert-color; 187 | $input-error-color: $alert-color; 188 | $input-error-font-size: rem-calc(12); 189 | $input-error-font-weight: $global-weight-bold; 190 | 191 | // 7. Accordion 192 | // ------------ 193 | 194 | $accordion-background: $black; 195 | $accordion-plusminus: true; 196 | $accordion-item-color: foreground($accordion-background, $primary-color); 197 | $accordion-item-background-hover: $body-background; 198 | $accordion-item-padding: 1.25rem 1rem; 199 | $accordion-content-background: $body-background; 200 | $accordion-content-border: 1px solid $black; 201 | $accordion-content-color: foreground($accordion-background, $primary-color); 202 | $accordion-content-padding: 1rem; 203 | 204 | // 8. Accordion Menu 205 | // ----------------- 206 | 207 | $accordionmenu-arrows: true; 208 | 209 | // 9. Badge 210 | // -------- 211 | 212 | $badge-background: $primary-color; 213 | $badge-color: foreground($badge-background); 214 | $badge-padding: 0.3em; 215 | $badge-minwidth: 2.1em; 216 | $badge-font-size: 0.6rem; 217 | 218 | // 10. Breadcrumbs 219 | // --------------- 220 | 221 | $breadcrumbs-margin: 0 0 $global-margin 0; 222 | $breadcrumbs-item-font-size: rem-calc(11); 223 | $breadcrumbs-item-color: $primary-color; 224 | $breadcrumbs-item-color-current: $primary-color; 225 | $breadcrumbs-item-color-disabled: #666; 226 | $breadcrumbs-item-margin: 0.75rem; 227 | $breadcrumbs-item-uppercase: true; 228 | $breadcrumbs-item-slash: true; 229 | 230 | // 11. Button 231 | // ---------- 232 | 233 | $button-padding: 0.8em 1em; 234 | $button-margin: 0 $global-margin $global-margin 0; 235 | $button-fill: solid; 236 | $button-background: $primary-color; 237 | $button-background-hover: scale-color($button-background, $lightness: -15%); 238 | $button-color: #333; 239 | $button-color-alt: #000; 240 | $button-radius: $global-radius; 241 | $button-sizes: ( 242 | tiny: 0.6rem, 243 | small: 0.75rem, 244 | default: 0.9rem, 245 | large: 1.25rem, 246 | ); 247 | $button-opacity-disabled: 0.25; 248 | 249 | // 12. Button Group 250 | // ---------------- 251 | 252 | $buttongroup-margin: 1rem; 253 | $buttongroup-spacing: 1px; 254 | $buttongroup-child-selector: '.button'; 255 | $buttongroup-expand-max: 6; 256 | 257 | // 13. Callout 258 | // ----------- 259 | 260 | $callout-background: #242424; 261 | $callout-background-fade: 0%; 262 | $callout-border: 1px solid #000; 263 | $callout-margin: 0 0 1rem 0; 264 | $callout-padding: 1rem; 265 | $callout-font-color: $body-font-color; 266 | $callout-font-color-alt: $body-background; 267 | $callout-radius: $global-radius; 268 | $callout-link-tint: 30%; 269 | 270 | // 14. Close Button 271 | // ---------------- 272 | 273 | $closebutton-position: right top; 274 | $closebutton-offset-horizontal: 1rem; 275 | $closebutton-offset-vertical: 0.5rem; 276 | $closebutton-size: 2em; 277 | $closebutton-lineheight: 1; 278 | $closebutton-color: $dark-gray; 279 | $closebutton-color-hover: $black; 280 | 281 | // 15. Drilldown 282 | // ------------- 283 | 284 | $drilldown-transition: transform 0.15s linear; 285 | $drilldown-arrows: true; 286 | 287 | // 16. Dropdown 288 | // ------------ 289 | 290 | $dropdown-padding: 1rem; 291 | $dropdown-border: 1px solid $dark-gray; 292 | $dropdown-font-size: 16rem; 293 | $dropdown-width: 300px; 294 | $dropdown-radius: $global-radius; 295 | $dropdown-sizes: ( 296 | tiny: 100px, 297 | small: 200px, 298 | large: 400px, 299 | ); 300 | 301 | // 17. Dropdown Menu 302 | // ----------------- 303 | 304 | $dropdownmenu-arrows: true; 305 | $dropdownmenu-min-width: 200px; 306 | $dropdownmenu-background: #1e1e1e; 307 | $dropdown-border: 1px solid $black; 308 | 309 | // 18. Flex Video 310 | // -------------- 311 | 312 | $flexvideo-padding-top: rem-calc(25); 313 | $flexvideo-margin-bottom: rem-calc(16); 314 | $flexvideo-ratio: 4 by 3; 315 | $flexvideo-ratio-widescreen: 16 by 9; 316 | 317 | // 19. Forms 318 | // --------- 319 | 320 | $fieldset-border: 1px solid $dark-gray; 321 | $fieldset-padding: rem-calc(20); 322 | $fieldset-margin: rem-calc(18 0); 323 | $legend-padding: rem-calc(0 3); 324 | $form-spacing: rem-calc(16); 325 | $helptext-color: #777; 326 | $helptext-font-size: rem-calc(13); 327 | $helptext-font-style: italic; 328 | $input-prefix-color: $medium-gray; 329 | $input-prefix-background: $light-gray; 330 | $input-prefix-border: 1px solid $medium-gray; 331 | $input-prefix-padding: 1rem; 332 | $form-label-color: $medium-gray; 333 | $form-label-font-size: rem-calc(14); 334 | $form-label-font-weight: $global-weight-normal; 335 | $form-label-line-height: 1.8; 336 | $select-background: #1e1e1e; 337 | $select-triangle-color: $medium-gray; 338 | $select-radius: $global-radius; 339 | $input-color: $white; 340 | $input-font-family: inherit; 341 | $input-font-size: rem-calc(16); 342 | $input-background: #1e1e1e; 343 | $input-background-focus: #1e1e1e; 344 | $input-background-disabled: $black; 345 | $input-border: 1px solid $dark-gray; 346 | $input-border-focus: 1px solid #555; 347 | $input-shadow: none; 348 | $input-shadow-focus: 0; 349 | $input-cursor-disabled: default; 350 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 351 | $input-number-spinners: true; 352 | $input-radius: $global-radius; 353 | 354 | // 20. Label 355 | // --------- 356 | 357 | $label-background: $dark-gray; 358 | $label-color: foreground($label-background); 359 | $label-font-size: 0.8rem; 360 | $label-padding: 0.33333rem 0.5rem; 361 | $label-radius: $global-radius; 362 | 363 | // 21. Media Object 364 | // ---------------- 365 | 366 | $mediaobject-margin-bottom: $global-margin; 367 | $mediaobject-section-padding: $global-padding; 368 | $mediaobject-image-width-stacked: 100%; 369 | 370 | // 22. Menu 371 | // -------- 372 | 373 | $menu-margin: 0; 374 | $menu-margin-nested: 1rem; 375 | $menu-item-padding: 0.85rem 1rem; 376 | $menu-icon-spacing: 0.25rem; 377 | $menu-expand-max: 6; 378 | 379 | // 23. Off-canvas 380 | // -------------- 381 | 382 | $offcanvas-size: 250px; 383 | $offcanvas-background: $light-gray; 384 | $offcanvas-zindex: -1; 385 | $offcanvas-transition-length: 0.5s; 386 | $offcanvas-transition-timing: ease; 387 | $offcanvas-exit-background: rgba($white, 0.25); 388 | $maincontent-class: 'off-canvas-content'; 389 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 390 | 391 | // 24. Orbit 392 | // --------- 393 | 394 | $orbit-bullet-background: $medium-gray; 395 | $orbit-bullet-background-active: $dark-gray; 396 | $orbit-bullet-diameter: 0.625rem; 397 | $orbit-bullet-margin: 0.1rem; 398 | $orbit-bullet-margin-top: 0.8rem; 399 | $orbit-bullet-margin-bottom: 0.8rem; 400 | $orbit-caption-background: rgba($black, 0.5); 401 | $orbit-caption-padding: 1rem; 402 | $orbit-control-background-hover: rgba($black, 0.5); 403 | $orbit-control-padding: 1rem; 404 | $orbit-control-zindex: 10; 405 | 406 | // 25. Pagination 407 | // -------------- 408 | 409 | $pagination-font-size: rem-calc(14); 410 | $pagination-margin-bottom: $global-margin; 411 | $pagination-item-color: $primary-color; 412 | $pagination-item-padding: rem-calc(3 10); 413 | $pagination-item-spacing: rem-calc(1); 414 | $pagination-radius: $global-radius; 415 | $pagination-item-background-hover: $dark-gray; 416 | $pagination-item-background-current: $dark-gray; 417 | $pagination-item-color-current: $medium-gray; 418 | $pagination-item-color-disabled: $medium-gray; 419 | $pagination-ellipsis-color: $black; 420 | $pagination-mobile-items: false; 421 | $pagination-arrows: true; 422 | 423 | // 26. Progress Bar 424 | // ---------------- 425 | 426 | $progress-height: 1rem; 427 | $progress-background: $medium-gray; 428 | $progress-margin-bottom: $global-margin; 429 | $progress-meter-background: $primary-color; 430 | $progress-radius: $global-radius; 431 | 432 | // 27. Reveal 433 | // ---------- 434 | 435 | $reveal-background: $white; 436 | $reveal-width: 600px; 437 | $reveal-max-width: $global-width; 438 | $reveal-offset: rem-calc(100); 439 | $reveal-padding: $global-padding; 440 | $reveal-border: 1px solid $medium-gray; 441 | $reveal-radius: $global-radius; 442 | $reveal-zindex: 1005; 443 | $reveal-overlay-background: rgba($black, 0.6); 444 | 445 | // 28. Slider 446 | // ---------- 447 | 448 | $slider-height: 0.5rem; 449 | $slider-width-vertical: $slider-height; 450 | $slider-background: $light-gray; 451 | $slider-fill-background: $medium-gray; 452 | $slider-handle-height: 1.4rem; 453 | $slider-handle-width: 1.4rem; 454 | $slider-handle-background: $primary-color; 455 | $slider-opacity-disabled: 0.25; 456 | $slider-radius: $global-radius; 457 | $slider-transition: all 0.2s ease-in-out; 458 | 459 | // 29. Switch 460 | // ---------- 461 | 462 | $switch-background: $medium-gray; 463 | $switch-background-active: $primary-color; 464 | $switch-height: 2rem; 465 | $switch-height-tiny: 1.5rem; 466 | $switch-height-small: 1.75rem; 467 | $switch-height-large: 2.5rem; 468 | $switch-radius: 1rem; 469 | $switch-margin: $global-margin; 470 | $switch-paddle-background: $secondary-color; 471 | $switch-paddle-offset: 0.25rem; 472 | $switch-paddle-radius: 0.75rem; 473 | $switch-paddle-transition: all 0.25s ease-out; 474 | 475 | // 30. Table 476 | // --------- 477 | 478 | $table-background: $body-background; 479 | $table-color-scale: 5%; 480 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 481 | $table-padding: rem-calc(8 10 10); 482 | $table-hover-scale: 2%; 483 | $table-row-hover: darken($table-background, $table-hover-scale); 484 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 485 | $table-striped-background: smart-scale($table-background, $table-color-scale); 486 | $table-stripe: even; 487 | $table-head-background: smart-scale($table-background, $table-color-scale / 2); 488 | $table-foot-background: smart-scale($table-background, $table-color-scale); 489 | $table-head-font-color: $body-font-color; 490 | $show-header-for-stacked: false; 491 | 492 | // 31. Tabs 493 | // -------- 494 | 495 | $tab-margin: 0; 496 | $tab-background: $body-background; 497 | $tab-background-active: $body-background; 498 | $tab-border: $dark-gray; 499 | $tab-item-color: foreground($tab-background, $primary-color); 500 | $tab-item-background-hover: $body-background ; 501 | $tab-item-padding: 1.25rem 1.5rem; 502 | $tab-expand-max: 6; 503 | $tab-content-background: $body-background; 504 | $tab-content-border: $dark-gray; 505 | $tab-content-color: foreground($tab-background, $primary-color); 506 | $tab-content-padding: 1rem 1rem 0.5rem; 507 | 508 | // 32. Thumbnail 509 | // ------------- 510 | 511 | $thumbnail-border: solid 4px $white; 512 | $thumbnail-margin-bottom: $global-margin; 513 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 514 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 515 | $thumbnail-transition: box-shadow 200ms ease-out; 516 | $thumbnail-radius: $global-radius; 517 | 518 | // 33. Tooltip 519 | // ----------- 520 | 521 | $tooltip-background-color: $black; 522 | $tooltip-color: $white; 523 | $tooltip-padding: 0.75rem; 524 | $tooltip-font-size: $small-font-size; 525 | $tooltip-pip-width: 0.75rem; 526 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 527 | $tooltip-pip-offset: 1.25rem; 528 | $tooltip-radius: $global-radius; 529 | 530 | // 34. Top Bar 531 | // ----------- 532 | 533 | $topbar-padding: 0; 534 | $topbar-background: #1e1e1e; 535 | $topbar-link-color: #fff; 536 | $topbar-input-width: 200px; 537 | 538 | -------------------------------------------------------------------------------- /classic/source/scss/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Off-canvas 29 | // 24. Orbit 30 | // 25. Pagination 31 | // 26. Progress Bar 32 | // 27. Reveal 33 | // 28. Slider 34 | // 29. Switch 35 | // 30. Table 36 | // 31. Tabs 37 | // 32. Thumbnail 38 | // 33. Tooltip 39 | // 34. Top Bar 40 | 41 | @import 'util/util'; 42 | 43 | // 1. Global 44 | // --------- 45 | 46 | $global-width: rem-calc(1200); 47 | $global-font-size: 100%; 48 | $global-lineheight: 1.5; 49 | $foundation-palette: ( 50 | primary: #03a0f9, 51 | secondary: #888, 52 | success: #13c25c, 53 | warning: #ffae00, 54 | alert: #ec5840, 55 | ); 56 | $primary-color: #03a0f9; 57 | $secondary-color: #888; 58 | $success-color: #13c25c; 59 | $warning-color: #ffae00; 60 | $alert-color: #ec5840; 61 | $light-gray: #e8e8e8; 62 | $medium-gray: #cacaca; 63 | $dark-gray: #444444; 64 | $black: #0a0a0a; 65 | $white: #fefefe; 66 | $body-background: $white; 67 | $body-font-color: $black; 68 | $body-font-family: Roboto, Arial, sans-serif; 69 | $body-antialiased: true; 70 | $text-direction: ltr; 71 | $global-margin: 1rem; 72 | $global-padding: 1rem; 73 | $global-margin: 1rem; 74 | $global-weight-normal: normal; 75 | $global-weight-bold: bold; 76 | $global-radius: 2px; 77 | $global-text-direction: ltr; 78 | $rem-base: 16px; 79 | 80 | // 2. Breakpoints 81 | // -------------- 82 | 83 | $breakpoints: ( 84 | small: 0, 85 | medium: 640px, 86 | large: 1024px, 87 | xlarge: 1200px, 88 | xxlarge: 1440px, 89 | ); 90 | $breakpoint-classes: (small medium large); 91 | 92 | // 3. The Grid 93 | // ----------- 94 | 95 | $grid-row-width: $global-width; 96 | $grid-column-count: 12; 97 | $grid-column-gutter: 30px; 98 | $block-grid-max: 6; 99 | 100 | // 4. Base Typography 101 | // ------------------ 102 | 103 | $header-font-family: $body-font-family; 104 | $header-font-weight: $global-weight-normal; 105 | $header-font-style: normal; 106 | $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 107 | $header-sizes: ( 108 | small: ( 109 | 'h1': 24, 110 | 'h2': 20, 111 | 'h3': 19, 112 | 'h4': 18, 113 | 'h5': 17, 114 | 'h6': 16, 115 | ), 116 | medium: ( 117 | 'h1': 48, 118 | 'h2': 40, 119 | 'h3': 31, 120 | 'h4': 25, 121 | 'h5': 20, 122 | 'h6': 16, 123 | ), 124 | ); 125 | $header-color: inherit; 126 | $header-lineheight: 1.4; 127 | $header-margin-bottom: 0.5rem; 128 | $header-text-rendering: optimizeLegibility; 129 | $small-font-size: 80%; 130 | $header-small-font-color: $medium-gray; 131 | $paragraph-lineheight: 1.6; 132 | $paragraph-margin-bottom: 1rem; 133 | $paragraph-text-rendering: optimizeLegibility; 134 | $code-color: $black; 135 | $code-font-family: $font-family-monospace; 136 | $code-font-weight: $global-weight-normal; 137 | $code-background: $light-gray; 138 | $code-border: 1px solid $medium-gray; 139 | $code-padding: rem-calc(2 5 1); 140 | $anchor-color: $primary-color; 141 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 142 | $anchor-text-decoration: none; 143 | $anchor-text-decoration-hover: none; 144 | $hr-width: $global-width; 145 | $hr-border: 1px solid $light-gray; 146 | $hr-margin: rem-calc(20) auto; 147 | $list-lineheight: $paragraph-lineheight; 148 | $list-margin-bottom: $paragraph-margin-bottom; 149 | $list-style-type: disc; 150 | $list-style-position: outside; 151 | $list-side-margin: 1.25rem; 152 | $list-nested-side-margin: 1.25rem; 153 | $defnlist-margin-bottom: 1rem; 154 | $defnlist-term-weight: $global-weight-bold; 155 | $defnlist-term-margin-bottom: 0.25rem; 156 | $blockquote-color: $dark-gray; 157 | $blockquote-padding: rem-calc(16 20 16 19); 158 | $blockquote-border: 3px solid $light-gray; 159 | $cite-font-size: rem-calc(13); 160 | $cite-color: $dark-gray; 161 | $keystroke-font: $font-family-monospace; 162 | $keystroke-color: $black; 163 | $keystroke-background: $light-gray; 164 | $keystroke-padding: rem-calc(2 4 0); 165 | $keystroke-radius: $global-radius; 166 | $abbr-underline: 1px dotted $black; 167 | 168 | // 5. Typography Helpers 169 | // --------------------- 170 | 171 | $lead-font-size: $global-font-size * 1.25; 172 | $lead-lineheight: 1.6; 173 | $subheader-lineheight: 1.4; 174 | $subheader-color: $dark-gray; 175 | $subheader-font-weight: $global-weight-normal; 176 | $subheader-margin-top: 0.2rem; 177 | $subheader-margin-bottom: 0.5rem; 178 | $stat-font-size: 2.5rem; 179 | 180 | // 6. Abide 181 | // -------- 182 | 183 | $abide-inputs: true; 184 | $abide-labels: true; 185 | $input-background-invalid: $alert-color; 186 | $form-label-color-invalid: $alert-color; 187 | $input-error-color: $alert-color; 188 | $input-error-font-size: rem-calc(12); 189 | $input-error-font-weight: $global-weight-bold; 190 | 191 | // 7. Accordion 192 | // ------------ 193 | 194 | $accordion-background: $white; 195 | $accordion-plusminus: true; 196 | $accordion-item-color: foreground($accordion-background, $primary-color); 197 | $accordion-item-background-hover: #fafdff; 198 | $accordion-item-padding: 1.25rem 1rem; 199 | $accordion-content-background: $white; 200 | $accordion-content-border: 1px solid $light-gray; 201 | $accordion-content-color: foreground($accordion-background, $primary-color); 202 | $accordion-content-padding: 1rem; 203 | 204 | // 8. Accordion Menu 205 | // ----------------- 206 | 207 | $accordionmenu-arrows: true; 208 | 209 | // 9. Badge 210 | // -------- 211 | 212 | $badge-background: $primary-color; 213 | $badge-color: foreground($badge-background); 214 | $badge-padding: 0.3em; 215 | $badge-minwidth: 2.1em; 216 | $badge-font-size: 0.6rem; 217 | 218 | // 10. Breadcrumbs 219 | // --------------- 220 | 221 | $breadcrumbs-margin: 0 0 $global-margin 0; 222 | $breadcrumbs-item-font-size: rem-calc(11); 223 | $breadcrumbs-item-color: $primary-color; 224 | $breadcrumbs-item-color-current: $black; 225 | $breadcrumbs-item-color-disabled: $medium-gray; 226 | $breadcrumbs-item-margin: 0.75rem; 227 | $breadcrumbs-item-uppercase: true; 228 | $breadcrumbs-item-slash: true; 229 | 230 | // 11. Button 231 | // ---------- 232 | 233 | $button-padding: 0.8em 1em; 234 | $button-margin: 0 $global-margin $global-margin 0; 235 | $button-fill: solid; 236 | $button-background: $primary-color; 237 | $button-background-hover: scale-color($button-background, $lightness: -15%); 238 | $button-color: #fff; 239 | $button-color-alt: #000; 240 | $button-radius: $global-radius; 241 | $button-sizes: ( 242 | tiny: 0.6rem, 243 | small: 0.75rem, 244 | default: 0.9rem, 245 | large: 1.25rem, 246 | ); 247 | $button-opacity-disabled: 0.25; 248 | 249 | // 12. Button Group 250 | // ---------------- 251 | 252 | $buttongroup-margin: 1rem; 253 | $buttongroup-spacing: 1px; 254 | $buttongroup-child-selector: '.button'; 255 | $buttongroup-expand-max: 6; 256 | 257 | // 13. Callout 258 | // ----------- 259 | 260 | $callout-background: $white; 261 | $callout-background-fade: 92%; 262 | $callout-border: 1px solid #e8e8e8; 263 | $callout-margin: 0 0 1rem 0; 264 | $callout-padding: 1rem; 265 | $callout-font-color: $body-font-color; 266 | $callout-font-color-alt: $body-background; 267 | $callout-radius: $global-radius; 268 | $callout-link-tint: 30%; 269 | 270 | // 14. Close Button 271 | // ---------------- 272 | 273 | $closebutton-position: right top; 274 | $closebutton-offset-horizontal: 1rem; 275 | $closebutton-offset-vertical: 0.5rem; 276 | $closebutton-size: 2em; 277 | $closebutton-lineheight: 1; 278 | $closebutton-color: $dark-gray; 279 | $closebutton-color-hover: $black; 280 | 281 | // 15. Drilldown 282 | // ------------- 283 | 284 | $drilldown-transition: transform 0.15s linear; 285 | $drilldown-arrows: true; 286 | 287 | // 16. Dropdown 288 | // ------------ 289 | 290 | $dropdown-padding: 1rem; 291 | $dropdown-border: 1px solid $light-gray; 292 | $dropdown-font-size: 16rem; 293 | $dropdown-width: 300px; 294 | $dropdown-radius: $global-radius; 295 | $dropdown-sizes: ( 296 | tiny: 100px, 297 | small: 200px, 298 | large: 400px, 299 | ); 300 | 301 | // 17. Dropdown Menu 302 | // ----------------- 303 | 304 | $dropdownmenu-arrows: true; 305 | $dropdownmenu-min-width: 200px; 306 | $dropdownmenu-background: $white; 307 | $dropdown-border: 1px solid $light-gray; 308 | 309 | // 18. Flex Video 310 | // -------------- 311 | 312 | $flexvideo-padding-top: rem-calc(25); 313 | $flexvideo-margin-bottom: rem-calc(16); 314 | $flexvideo-ratio: 4 by 3; 315 | $flexvideo-ratio-widescreen: 16 by 9; 316 | 317 | // 19. Forms 318 | // --------- 319 | 320 | $fieldset-border: 1px solid $light-gray; 321 | $fieldset-padding: rem-calc(20); 322 | $fieldset-margin: rem-calc(18 0); 323 | $legend-padding: rem-calc(0 3); 324 | $form-spacing: rem-calc(16); 325 | $helptext-color: #333; 326 | $helptext-font-size: rem-calc(13); 327 | $helptext-font-style: italic; 328 | $input-prefix-color: $black; 329 | $input-prefix-background: $light-gray; 330 | $input-prefix-border: 1px solid $medium-gray; 331 | $input-prefix-padding: 1rem; 332 | $form-label-color: $black; 333 | $form-label-font-size: rem-calc(14); 334 | $form-label-font-weight: $global-weight-normal; 335 | $form-label-line-height: 1.8; 336 | $select-background: #fafafa; 337 | $select-triangle-color: #333; 338 | $select-radius: $global-radius; 339 | $input-color: $dark-gray; 340 | $input-font-family: inherit; 341 | $input-font-size: rem-calc(16); 342 | $input-background: $white; 343 | $input-background-focus: $white; 344 | $input-background-disabled: $light-gray; 345 | $input-border: 1px solid $medium-gray; 346 | $input-border-focus: 1px solid $primary-color; 347 | $input-shadow: none; 348 | $input-shadow-focus: 0 0 3px $medium-gray; 349 | $input-cursor-disabled: default; 350 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 351 | $input-number-spinners: true; 352 | $input-radius: $global-radius; 353 | 354 | // 20. Label 355 | // --------- 356 | 357 | $label-background: $primary-color; 358 | $label-color: foreground($label-background); 359 | $label-font-size: 0.8rem; 360 | $label-padding: 0.33333rem 0.5rem; 361 | $label-radius: $global-radius; 362 | 363 | // 21. Media Object 364 | // ---------------- 365 | 366 | $mediaobject-margin-bottom: $global-margin; 367 | $mediaobject-section-padding: $global-padding; 368 | $mediaobject-image-width-stacked: 100%; 369 | 370 | // 22. Menu 371 | // -------- 372 | 373 | $menu-margin: 0; 374 | $menu-margin-nested: 1rem; 375 | $menu-item-padding: 0.85rem 1rem; 376 | $menu-icon-spacing: 0.25rem; 377 | $menu-expand-max: 6; 378 | 379 | // 23. Off-canvas 380 | // -------------- 381 | 382 | $offcanvas-size: 250px; 383 | $offcanvas-background: $light-gray; 384 | $offcanvas-zindex: -1; 385 | $offcanvas-transition-length: 0.5s; 386 | $offcanvas-transition-timing: ease; 387 | $offcanvas-exit-background: rgba($white, 0.25); 388 | $maincontent-class: 'off-canvas-content'; 389 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 390 | 391 | // 24. Orbit 392 | // --------- 393 | 394 | $orbit-bullet-background: $medium-gray; 395 | $orbit-bullet-background-active: $dark-gray; 396 | $orbit-bullet-diameter: 0.625rem; 397 | $orbit-bullet-margin: 0.1rem; 398 | $orbit-bullet-margin-top: 0.8rem; 399 | $orbit-bullet-margin-bottom: 0.8rem; 400 | $orbit-caption-background: rgba($black, 0.5); 401 | $orbit-caption-padding: 1rem; 402 | $orbit-control-background-hover: rgba($black, 0.5); 403 | $orbit-control-padding: 1rem; 404 | $orbit-control-zindex: 10; 405 | 406 | // 25. Pagination 407 | // -------------- 408 | 409 | $pagination-font-size: rem-calc(14); 410 | $pagination-margin-bottom: $global-margin; 411 | $pagination-item-color: $primary-color; 412 | $pagination-item-padding: rem-calc(3 10); 413 | $pagination-item-spacing: rem-calc(1); 414 | $pagination-radius: $global-radius; 415 | $pagination-item-background-hover: lighten($light-gray, 5%); 416 | $pagination-item-background-current: lighten($light-gray, 5%); 417 | $pagination-item-color-current: $black; 418 | $pagination-item-color-disabled: $medium-gray; 419 | $pagination-ellipsis-color: $black; 420 | $pagination-mobile-items: false; 421 | $pagination-arrows: true; 422 | 423 | // 26. Progress Bar 424 | // ---------------- 425 | 426 | $progress-height: 1rem; 427 | $progress-background: $medium-gray; 428 | $progress-margin-bottom: $global-margin; 429 | $progress-meter-background: $primary-color; 430 | $progress-radius: $global-radius; 431 | 432 | // 27. Reveal 433 | // ---------- 434 | 435 | $reveal-background: $white; 436 | $reveal-width: 600px; 437 | $reveal-max-width: $global-width; 438 | $reveal-offset: rem-calc(100); 439 | $reveal-padding: $global-padding; 440 | $reveal-border: 1px solid $medium-gray; 441 | $reveal-radius: $global-radius; 442 | $reveal-zindex: 1005; 443 | $reveal-overlay-background: rgba($black, 0.6); 444 | 445 | // 28. Slider 446 | // ---------- 447 | 448 | $slider-height: 0.5rem; 449 | $slider-width-vertical: $slider-height; 450 | $slider-background: $light-gray; 451 | $slider-fill-background: $medium-gray; 452 | $slider-handle-height: 1.4rem; 453 | $slider-handle-width: 1.4rem; 454 | $slider-handle-background: $primary-color; 455 | $slider-opacity-disabled: 0.25; 456 | $slider-radius: $global-radius; 457 | $slider-transition: all 0.2s ease-in-out; 458 | 459 | // 29. Switch 460 | // ---------- 461 | 462 | $switch-background: $medium-gray; 463 | $switch-background-active: $primary-color; 464 | $switch-height: 2rem; 465 | $switch-height-tiny: 1.5rem; 466 | $switch-height-small: 1.75rem; 467 | $switch-height-large: 2.5rem; 468 | $switch-radius: 1rem; 469 | $switch-margin: $global-margin; 470 | $switch-paddle-background: $white; 471 | $switch-paddle-offset: 0.25rem; 472 | $switch-paddle-radius: 0.75rem; 473 | $switch-paddle-transition: all 0.25s ease-out; 474 | 475 | // 30. Table 476 | // --------- 477 | 478 | $table-background: $white; 479 | $table-color-scale: 5%; 480 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 481 | $table-padding: rem-calc(8 10 10); 482 | $table-hover-scale: 2%; 483 | $table-row-hover: darken($table-background, $table-hover-scale); 484 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 485 | $table-striped-background: smart-scale($table-background, $table-color-scale); 486 | $table-stripe: even; 487 | $table-head-background: smart-scale($table-background, $table-color-scale / 2); 488 | $table-foot-background: smart-scale($table-background, $table-color-scale); 489 | $table-head-font-color: $body-font-color; 490 | $show-header-for-stacked: false; 491 | 492 | // 31. Tabs 493 | // -------- 494 | 495 | $tab-margin: 0; 496 | $tab-background: $white; 497 | $tab-background-active: $white; 498 | $tab-border: $light-gray; 499 | $tab-item-color: foreground($tab-background, $primary-color); 500 | $tab-item-background-hover: $white; 501 | $tab-item-padding: 1.25rem 1.5rem; 502 | $tab-expand-max: 6; 503 | $tab-content-background: $white; 504 | $tab-content-border: $light-gray; 505 | $tab-content-color: foreground($tab-background, $primary-color); 506 | $tab-content-padding: 1rem 1rem 0.5rem; 507 | 508 | // 32. Thumbnail 509 | // ------------- 510 | 511 | $thumbnail-border: solid 4px $white; 512 | $thumbnail-margin-bottom: $global-margin; 513 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 514 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 515 | $thumbnail-transition: box-shadow 200ms ease-out; 516 | $thumbnail-radius: $global-radius; 517 | 518 | // 33. Tooltip 519 | // ----------- 520 | 521 | $tooltip-background-color: $black; 522 | $tooltip-color: $white; 523 | $tooltip-padding: 0.75rem; 524 | $tooltip-font-size: $small-font-size; 525 | $tooltip-pip-width: 0.75rem; 526 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 527 | $tooltip-pip-offset: 1.25rem; 528 | $tooltip-radius: $global-radius; 529 | 530 | // 34. Top Bar 531 | // ----------- 532 | 533 | $topbar-padding: 0; 534 | $topbar-background: darken($primary-color, 3%); 535 | $topbar-link-color: #fff; 536 | $topbar-input-width: 200px; 537 | 538 | -------------------------------------------------------------------------------- /gradient/source/scss/_sd-ui.scss: -------------------------------------------------------------------------------- 1 | // SD UI Gradient Theme Foundation 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 0. Mixins & additional variables 7 | // 1. Custom Classes 8 | // 2. Typography 9 | // 3. Accordion 10 | // 4. Breadcrumbs 11 | // 5. Buttons 12 | // 6. Callout 13 | // 7. Drilldown 14 | // 8. Dropdown Menu 15 | // 9. Menu 16 | // 10. Orbit 17 | // 11. Switch 18 | // 12. Table 19 | // 13. Tabs 20 | // 14. Top Bar 21 | 22 | // 0. Mixins & additional variables 23 | // --------- 24 | 25 | $gradient-light-grey-color: #f6f6f6; 26 | $gradient-primary-color: darken($primary-color,8%); 27 | $gradient-success-color: darken($success-color,8%); 28 | $gradient-alert-color: darken($alert-color,10%); 29 | 30 | $blockquote-bg: #f9f9f9; 31 | 32 | @mixin sd-linear-gradient($gradient-color1, $gradient-color2) { 33 | background-image: -webkit-linear-gradient(top, $gradient-color1, $gradient-color2); 34 | background-image: -moz-linear-gradient(top, $gradient-color1, $gradient-color2); 35 | background-image: -o-linear-gradient(top, $gradient-color1, $gradient-color2); 36 | background-image: linear-gradient(to bottom, $gradient-color1, $gradient-color2); 37 | } 38 | 39 | @mixin sd-linear-angle-gradient($gradient-color1, $gradient-color2) { 40 | background-image: -webkit-linear-gradient(135deg, $gradient-color1, $gradient-color2); 41 | background-image: -moz-linear-gradient(135deg, $gradient-color1, $gradient-color2); 42 | background-image: -o-linear-gradient(135deg, $gradient-color1, $gradient-color2); 43 | background-image: linear-gradient(135deg, $gradient-color1, $gradient-color2); 44 | } 45 | 46 | 47 | // 1. Custom Classes 48 | // --------- 49 | 50 | @media screen { 51 | * { 52 | outline: none; 53 | } 54 | } 55 | 56 | .highlighted { 57 | color: $primary-color; 58 | background: linear-gradient(135deg, darken($primary-color,7%) 0%, lighten($primary-color,7%), darken($primary-color,7%) 100%); 59 | -webkit-background-clip: text; 60 | -webkit-text-fill-color: transparent; 61 | } 62 | 63 | 64 | .gradient { 65 | @include sd-linear-gradient($primary-color, $gradient-primary-color); 66 | } 67 | 68 | .angle-gradient { 69 | @include sd-linear-angle-gradient($primary-color, $gradient-primary-color); 70 | } 71 | 72 | // 2. Typography 73 | // --------- 74 | 75 | blockquote { 76 | background: $blockquote-bg; 77 | } 78 | 79 | code { 80 | border-radius: $global-radius; 81 | } 82 | 83 | p { 84 | &.primary { 85 | color: $primary-color; 86 | } 87 | &.secondary { 88 | color: $secondary-color; 89 | } 90 | &.success { 91 | color: $success-color; 92 | } 93 | &.warning { 94 | color: $warning-color; 95 | } 96 | &.alert { 97 | color: $alert-color; 98 | } 99 | 100 | } 101 | 102 | dl { 103 | dd { 104 | margin-bottom: $paragraph-margin-bottom; 105 | } 106 | } 107 | 108 | .subheader { 109 | font-weight: 300; 110 | } 111 | 112 | .inline-block { 113 | display: inline-block; 114 | } 115 | 116 | // 3. Accordion 117 | // --------- 118 | 119 | .accordion { 120 | border-bottom-width: 0; 121 | .accordion-item { 122 | background: $white; 123 | &.is-active { 124 | background: #fafdff; 125 | .accordion-title { 126 | color: $black; 127 | } 128 | } 129 | } 130 | .accordion-content { 131 | color: $body-font-color; 132 | } 133 | :last-child > .accordion-title { 134 | border-bottom-width: 1px; 135 | } 136 | .accordion-title { 137 | font-size: 1rem; 138 | } 139 | } 140 | 141 | // 4. Breadcrumbs 142 | // --------- 143 | 144 | .breadcrumbs { 145 | padding: 0.5rem 1rem; 146 | border-radius: $global-radius; 147 | border: 1px solid #f1f1f1; 148 | @include sd-linear-gradient($white, #f9f9f9); 149 | } 150 | 151 | // 4. Buttons 152 | // --------- 153 | 154 | .button { 155 | border: 1px solid darken($primary-color,5%); 156 | @include sd-linear-gradient($primary-color, $gradient-primary-color); 157 | &:hover { 158 | @include sd-linear-angle-gradient($primary-color, $gradient-primary-color); 159 | } 160 | &.secondary { 161 | border-color: darken($secondary-color,5%); 162 | @include sd-linear-gradient($secondary-color, darken($secondary-color,10%)); 163 | &:hover { 164 | @include sd-linear-angle-gradient($secondary-color, darken($secondary-color,10%)); 165 | } 166 | } 167 | &.dark { 168 | @include sd-linear-gradient($dark-gray, darken($dark-gray,10%)); 169 | &:hover { 170 | @include sd-linear-angle-gradient($dark-gray, darken($dark-gray,10%)); 171 | } 172 | } 173 | &.white { 174 | @include sd-linear-gradient($white, $gradient-light-grey-color); 175 | &:hover { 176 | @include sd-linear-angle-gradient($white, $gradient-light-grey-color); 177 | } 178 | } 179 | &.success { 180 | border-color: darken($success-color,5%); 181 | @include sd-linear-gradient($success-color, $gradient-success-color); 182 | &:hover { 183 | @include sd-linear-angle-gradient($success-color, $gradient-success-color); 184 | } 185 | } 186 | &.warning { 187 | border-color: darken($warning-color,5%); 188 | @include sd-linear-gradient($warning-color, $alert-color); 189 | &:hover { 190 | @include sd-linear-angle-gradient($warning-color, $alert-color); 191 | } 192 | } 193 | &.alert { 194 | border-color: darken($alert-color,5%); 195 | @include sd-linear-gradient($alert-color, $gradient-alert-color); 196 | &:hover { 197 | @include sd-linear-angle-gradient($alert-color, $gradient-alert-color); 198 | } 199 | } 200 | } 201 | 202 | .button, button, input[type="submit"] { 203 | &.white { 204 | @include button-style($white, scale-color($white, $lightness: -3%), #333333); 205 | border: 1px solid $light-gray; 206 | font-weight: normal; 207 | } 208 | &.dark { 209 | @include button-style($dark-gray, scale-color($dark-gray, $lightness: -8%), $white); 210 | border-color: darken($dark-gray,5%); 211 | } 212 | &.alert { 213 | color: $white; 214 | &:hover { 215 | color: $white; 216 | } 217 | } 218 | &.hollow { 219 | background: transparent; 220 | &:hover { 221 | background: transparent; 222 | } 223 | } 224 | } 225 | 226 | 227 | // 6. Callout 228 | // --------- 229 | 230 | .callout { 231 | color: $body-font-color; 232 | @include sd-linear-gradient($white , $gradient-light-grey-color); 233 | &.angle-gradient { 234 | @include sd-linear-angle-gradient($white , $gradient-light-grey-color); 235 | } 236 | &.primary { 237 | @include sd-linear-gradient($primary-color, $gradient-primary-color); 238 | border-color: darken($primary-color,6%); 239 | color: $white; 240 | &.angle-gradient { 241 | @include sd-linear-angle-gradient($primary-color, $gradient-primary-color); 242 | } 243 | } 244 | &.success { 245 | @include sd-linear-gradient($success-color, $gradient-success-color); 246 | border-color: darken($success-color,6%); 247 | color: $white; 248 | &.angle-gradient { 249 | @include sd-linear-angle-gradient($success-color, $gradient-success-color); 250 | } 251 | } 252 | &.secondary { 253 | @include sd-linear-gradient($secondary-color, darken($secondary-color,10%)); 254 | border-color: darken($secondary-color,6%); 255 | color: $white; 256 | &.angle-gradient { 257 | @include sd-linear-angle-gradient($secondary-color, darken($secondary-color,10%)); 258 | } 259 | } 260 | &.warning { 261 | @include sd-linear-gradient($warning-color, $alert-color); 262 | border-color: darken($warning-color,6%); 263 | color: $white; 264 | &.angle-gradient { 265 | @include sd-linear-angle-gradient($warning-color, $alert-color); 266 | } 267 | } 268 | &.alert { 269 | @include sd-linear-gradient($alert-color, $gradient-alert-color); 270 | border-color: darken($alert-color,6%); 271 | color: $white; 272 | &.angle-gradient { 273 | @include sd-linear-angle-gradient($alert-color, $gradient-alert-color); 274 | } 275 | } 276 | } 277 | 278 | // 7. Drilldown 279 | // --------- 280 | 281 | .is-drilldown { 282 | border-bottom: 1px solid $light-gray; 283 | border-radius: 0 0 $global-radius $global-radius; 284 | } 285 | 286 | .js-drilldown-back::before, 287 | .js-drilldown-back>a:before { 288 | margin-top: -0.25rem; 289 | padding: 0; 290 | } 291 | 292 | // 8. Dropdown Menu 293 | // --------- 294 | 295 | .dropdown.menu { 296 | .has-submenu.is-down-arrow > a::after, 297 | >li.is-dropdown-submenu-parent>a:after { 298 | right: 8px; 299 | } 300 | .submenu { 301 | box-shadow: 0 3px 10px rgba(0,0,0,0.05); 302 | } 303 | &.vertical > li.opens-right > .is-dropdown-submenu { 304 | right: auto; 305 | left: 100%; 306 | top:-1px; 307 | } 308 | } 309 | 310 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 311 | border-color: transparent transparent transparent $white; 312 | } 313 | 314 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after { 315 | border-color: transparent transparent transparent $white; 316 | } 317 | 318 | .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after { 319 | border-color: transparent $white transparent transparent; 320 | } 321 | 322 | 323 | .input-group { 324 | .input-group-label { 325 | border-radius: $global-radius 0 0 $global-radius; 326 | } 327 | .input-group-field { 328 | border-radius: 0; 329 | } 330 | .input-group-button .button { 331 | border-radius: 0 $global-radius $global-radius 0; 332 | margin: 0; 333 | } 334 | } 335 | 336 | // 9. Menu 337 | // --------- 338 | 339 | .menu { 340 | border: 1px solid $light-gray; 341 | border-radius: $global-radius; 342 | @include sd-linear-gradient($white, #f9f9f9); 343 | * { 344 | outline: none; 345 | } 346 | > li { 347 | border-right: 1px solid $light-gray; 348 | &:last-child { 349 | border-bottom: none; 350 | border-right: none; 351 | } 352 | > a > i { 353 | vertical-align: top; 354 | } 355 | a:hover { 356 | background: lighten($light-gray, 5%); 357 | } 358 | &:first-child > a { 359 | border-radius: $global-radius 0 0 $global-radius; 360 | } 361 | &:last-child > a { 362 | border-radius: 0 $global-radius $global-radius 0; 363 | } 364 | &.active > a { 365 | background: lighten($light-gray, 5%); 366 | color: $black; 367 | } 368 | } 369 | &.vertical { 370 | //display: block; 371 | > li { 372 | border-right: 0; 373 | border-bottom: 1px solid $light-gray; 374 | &:last-child { 375 | border-bottom: none; 376 | } 377 | } 378 | &.nested { 379 | background: #fff; 380 | border-width: 1px 0 0 0; 381 | } 382 | > li:first-child > a { 383 | border-radius: $global-radius $global-radius 0 0; 384 | } 385 | > li:last-child > a { 386 | border-radius: 0 0 $global-radius $global-radius; 387 | } 388 | } 389 | } 390 | 391 | .menu-icon::after { 392 | height: 1px; 393 | } 394 | 395 | .unstyled-menu { 396 | @include menu-base; 397 | } 398 | 399 | // 10. Orbit 400 | // --------- 401 | 402 | @media screen { 403 | .orbit * { 404 | outline: none; 405 | } 406 | } 407 | .orbit { 408 | .orbit-previous, .orbit-next { 409 | opacity: 0; 410 | transition: opacity 0.25s ease-out; 411 | } 412 | &:hover { 413 | .orbit-previous, .orbit-next { 414 | background: transparent; 415 | opacity: 0.7; 416 | &:hover { 417 | background: transparent; 418 | opacity: 1; 419 | } 420 | } 421 | } 422 | &.bullets-inside { 423 | .orbit-caption { 424 | padding-bottom: 2.5rem; 425 | } 426 | .orbit-bullets { 427 | position: absolute; 428 | width: 100%; 429 | text-align: center; 430 | bottom: 0; 431 | button { 432 | background-color:#fff; 433 | opacity: 0.35; 434 | transition: opacity 0.3s ease-out; 435 | &.is-active { 436 | opacity: 0.9; 437 | &:hover { 438 | opacity: 0.9; 439 | } 440 | } 441 | &:hover { 442 | opacity: 0.25; 443 | } 444 | } 445 | } 446 | } 447 | } 448 | 449 | // 11. Switch 450 | // --------- 451 | 452 | .switch { 453 | .switch-paddle { 454 | border-radius: 1rem; 455 | &::after { 456 | border-radius: 0.75rem; 457 | } 458 | } 459 | &.tiny { 460 | .switch-paddle { 461 | border-radius: 0.75rem; 462 | &::after { 463 | border-radius: 0.5rem; 464 | } 465 | } 466 | } 467 | &.small { 468 | .switch-paddle { 469 | border-radius: 0.875rem; 470 | &::after { 471 | border-radius: 0.625rem; 472 | } 473 | } 474 | } 475 | &.large { 476 | .switch-paddle { 477 | border-radius: 1.25rem; 478 | &::after { 479 | border-radius: 1.25rem; 480 | } 481 | } 482 | } 483 | } 484 | 485 | // 12. Table 486 | // --------- 487 | 488 | table { 489 | tbody tr { 490 | &:nth-child(even) { 491 | background: none; 492 | } 493 | &.primary { 494 | background: lighten($primary-color, +35%); 495 | } 496 | &.success { 497 | background: lighten($success-color, +35%); 498 | } 499 | &.warning { 500 | background: lighten($warning-color, +35%); 501 | } 502 | &.alert { 503 | background: lighten($alert-color, +30%); 504 | } 505 | } 506 | } 507 | 508 | // 13. Tabs 509 | // --------- 510 | 511 | .tabs { 512 | border-width: 0 0 1px 0; 513 | .tabs-title { 514 | border-top-left-radius: $global-radius; 515 | border-top-right-radius: $global-radius; 516 | > a { 517 | font-size: 1rem; 518 | border-radius: $global-radius $global-radius 0 0; 519 | } 520 | &.is-active { 521 | > a { 522 | color: $dark-gray; 523 | } 524 | border: 1px solid $light-gray; 525 | border-bottom-width: 0; 526 | margin-bottom: -1px; 527 | } 528 | } 529 | } 530 | 531 | .tabs-content { 532 | border-radius: 0 0 $global-radius $global-radius; 533 | } 534 | 535 | // 14. Top Bar 536 | // --------- 537 | 538 | .title-bar { 539 | @include sd-linear-gradient($primary-color, $gradient-primary-color); 540 | border-bottom: 1px solid darken($primary-color, 15%); 541 | } 542 | 543 | .top-bar { 544 | color: #fff; 545 | border-bottom: 1px solid darken($primary-color, 15%); 546 | @include sd-linear-gradient($primary-color, $gradient-primary-color); 547 | ul { 548 | background: transparent; 549 | } 550 | .top-bar-inner { 551 | padding: 0.3rem 0 0.2rem 1rem; 552 | } 553 | .top-bar-text { 554 | padding: 0; 555 | @include breakpoint(medium up) { 556 | line-height: 2.5rem; 557 | } 558 | } 559 | .menu { 560 | border: 0; 561 | border-radius: 0; 562 | * { 563 | outline: none; 564 | } 565 | > li { 566 | border-right: 0; 567 | a { 568 | color: #fff; 569 | padding: 1rem; 570 | &:hover { 571 | background: darken($primary-color, 12%); 572 | } 573 | } 574 | &.menu-text { 575 | padding:1rem; 576 | } 577 | &:first-child > a { 578 | border-radius: 0; 579 | } 580 | &:last-child > a { 581 | border-radius: 0; 582 | } 583 | &.active > a { 584 | background: darken($primary-color, 12%); 585 | } 586 | } 587 | &.dropdown { 588 | .submenu { 589 | &.first-sub { 590 | left: 0; 591 | } 592 | background:$gradient-primary-color; 593 | border: 1px solid darken($primary-color, 15%); 594 | li { 595 | border-color: darken($primary-color, 15%); 596 | } 597 | } 598 | .has-submenu.is-down-arrow > a::after, 599 | >li.is-dropdown-submenu-parent>a:after { 600 | border-color: $white transparent transparent; 601 | } 602 | .has-submenu.is-right-arrow > a::after { 603 | border-color: transparent transparent transparent $white; 604 | } 605 | } 606 | } 607 | input, button.white { 608 | border: 0; 609 | display: inline-block; 610 | margin-bottom: 0; 611 | 612 | } 613 | input { 614 | margin-right: 2rem; 615 | &:active, &:focus { 616 | border: 0; 617 | } 618 | } 619 | } -------------------------------------------------------------------------------- /advanced-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SD UI: Advanced Bootstrap | Foundation 6 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 41 |
42 |
43 | 55 |
56 |
57 |
58 | 59 |
 
60 | 61 |
62 |
63 |

Advanced Bootstrap

64 |

Foundation 6 Theme

65 |
66 |
67 |
68 |
69 |
70 | 71 |

Top Bar  

72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 99 |
100 | 101 |
102 |
103 |
    104 |
    • 105 |
  • 106 | 107 |
    • 108 |
109 |
110 |
111 |
112 |
113 |
Custom text
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |

 

124 |
125 |
126 |
127 |
    128 |
  • Site Title | 129 | Description 130 |
    • 131 |
132 |
133 |
134 | 151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |

Title Bar  

160 |
161 |
162 | 163 | Foundation 164 |
165 |
166 | 167 |
168 |
169 | 170 |
171 |
172 | 173 | 174 |
175 |
176 |
177 |

Horizontal Menu  

178 | 192 |
193 |
194 |

Vertical Menu  

195 | 202 |
203 |
204 |

Drilldown Menu  

205 | 219 |
220 |
221 | 222 |
223 |
224 |
225 |

Pagination  

226 | 236 |
237 |
238 |

Breadcrumbs  

239 | 240 | 250 |
251 |
252 | 253 |
254 |
255 |
256 |

Orbit Slider

257 |
258 |
259 |

Bullets inside  

260 |
261 |
    262 | 264 | 265 |
  • 266 | Space 268 |
    Space, the final frontier.
    269 |
    • 270 |
  • 271 | Space 273 |
    Lets Rocket!
    274 |
    • 275 |
  • 276 | Space 278 |
    Encapsulating
    279 |
    • 280 |
  • 281 | Space 283 |
    Outta This World
    284 |
    • 285 |
286 | 287 | 295 |
296 |
297 |
298 |

Bullets outside  

299 |
300 |
    301 | 303 | 304 |
  • 305 | Space 307 |
    Space, the final frontier.
    308 |
    • 309 |
  • 310 | Space 312 |
    Lets Rocket!
    313 |
    • 314 |
  • 315 | Space 317 |
    Encapsulating
    318 |
    • 319 |
  • 320 | Space 322 |
    Outta This World
    323 |
    • 324 |
325 | 326 | 334 |
335 |
336 |
337 |
338 |
339 | 340 |
341 | 342 |
343 |
344 |

Buttons

345 |

The theme has many easy to use button styles that you can customize or override to fit your 346 | needs.

347 | 348 | 349 |
350 |
351 |

Coloring  

352 | Button 353 | Primary Button 354 | Info 355 | Success 356 | Alert 357 | Warning 358 | Disabled 359 |
360 | 361 |
362 |

Hollow Style  

363 | 364 | 365 | 366 | 367 | 368 |
369 |
370 | 371 |
372 |
373 |

Sizing  

374 | Tiny 375 | Small 376 | Basic 377 | Large 378 | Expanded 379 |
380 | 381 |
382 |

Switch  

383 |
384 | 385 | 388 |
389 |
390 | 391 | 396 |
397 |
398 |
399 |

Dropdown Buttons  

400 | 401 |
402 |
403 |
404 |
405 | 406 |
407 | 408 |
409 |
410 |

Typography

411 |
412 |
413 |

Heading 1  

414 |

Heading 2

415 |

Heading 3

416 |

Heading 4

417 |
Heading 5
418 |
Heading 6
419 |
420 |
421 |

Paragraph Styles  

422 |

Standard text

423 |

Primary text - just add class 424 | .primary 425 |

426 |

Secondary text - just add class 427 | .secondary 428 |

429 |

Success text - just add class 430 | .success 431 |

432 |

Warning text - just add class 433 | .warning 434 |

435 |

Alert text - just add class 436 | .alert 437 |

438 |
439 |
440 |

Text styling  

441 |

Standart text with link.

442 |

443 | This line of text is meant to be treated as fine print. 444 |

445 |

The following snippet of text is rendered as bold text.

446 |

The following snippet of text is rendered as italicized text.

447 |
448 | 449 |
450 |
451 |
452 | 453 |
454 | 455 |
456 |
457 |

Unordered List  

458 | 471 |
472 | 473 | 474 |
475 |

Ordered List  

476 |
    477 |
  1. List item
    2. 478 |
  2. List item 479 |
      480 |
    • Nested list item
      • 481 |
    • Nested list item
      • 482 |
    • Nested list item
      • 483 |
    484 |
    3. 485 |
  3. List item
    4. 486 |
  4. List item
    5. 487 |
  5. List item
    6. 488 |
489 |
490 | 491 |
492 |

Definition List  

493 |
494 |
Time
495 |
The indefinite continued progress of existence and events in the past, present, and future regarded as a 496 | whole. 497 |
498 |
Space
499 |
A continuous area or expanse that is free, available, or unoccupied.
500 |
501 |
502 |
503 | 504 |
505 | 506 |
507 |
508 |

Blockquotes  

509 |
510 | Great things in business are never done by one person. They're done by a team of people. 511 | Steve Jobs 512 |
513 |
514 |
515 | 516 |
517 | 518 |
519 |
520 |

Tables  

521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 |
Table HeaderTable HeaderTable HeaderTable Header
Regular Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
Regular Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
Regular Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
Primary Table RowThis is longer content Donec id elit non mi porta gravida at eget metus.Content Content
Success Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
Warning Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
Alert Table RowThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Content
575 |
576 |
577 | 578 |
579 | 580 |
581 |
582 |

Tabs  

583 | 588 |
589 |
590 |

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie 591 | magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

592 |
593 |
594 |

Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est 595 | bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh 596 | porttitor.

597 |
598 |
599 |

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation 600 | +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table 601 | craft beer twee.

602 |
603 |
604 |
605 | 606 |
607 |

Accordion  

608 | 622 |
623 |
624 | 625 |
626 | 627 |
628 |
629 |

Forms  

630 |
631 |
632 |

Input Fields, Select Boxes and Textarea

633 |
634 |
635 |
636 | 637 | 638 |
639 |
640 |
641 |
642 | 643 | 644 |
645 |
646 | 647 | 648 |
649 |
650 | 651 | 652 |
653 | 654 |
655 | 656 |
657 |
658 | 659 | 665 |
666 |
667 | 668 |
669 | $ 670 | 671 | 672 |
673 |
674 |
675 | 676 |
677 |
678 | 679 | 680 |
681 |
682 |
683 | SubmitCancel 684 |
685 | 686 |
687 |

Checkboxes and Radio Buttons

688 |
689 |
690 |
691 | 693 | 696 |
697 |
698 | 699 |
700 |
701 | 702 | 703 |
704 |
705 | 706 |
707 |
708 |
709 | Check these out 710 | 711 | 712 |
713 |
714 |
715 |
716 |
717 |
718 |
719 |
720 |
721 | 722 |
723 |
724 |

Callouts

725 |
726 |
727 |

Coloring  

728 |
729 |
730 |
731 |

Default Callout

732 |

Sample Text

733 | 734 |
735 |
736 |
737 |
738 |
739 |
740 |

Success Callout

741 |
742 |
743 |
744 |
745 |

Info Callout

746 |
747 |
748 |
749 |
750 |
751 |
752 |

Alert Callout

753 |
754 |
755 |
756 |
757 |

Warning Callout

758 |
759 |
760 |
761 |
762 |
763 |

Making Closable  

764 |
765 |

This a friendly message.

766 |

And when you're done with me, I close using a Motion UI animation.

767 | 770 |
771 |
772 |

This is Important!

773 |

But when you're done reading it, click the close button in the corner to dismiss this 774 | alert.

775 | 778 |
779 |
780 |
781 |
782 |
783 | 784 |
785 |
786 | Made by SD Web Design

787 |
788 | 789 |
790 | 
 791 | <div class="top-bar">
 792 |     <div class="row column">
 793 |         <div class="top-bar-left">
 794 |             <ul class="dropdown menu" data-dropdown-menu>
 795 |                 <li class="menu-text">Site Title</li>
 796 |                 <li>
 797 |                     <a href="#">One</a>
 798 |                     <ul class="menu vertical">
 799 |                         <li><a href="#">One</a>
 800 |                             <ul class="menu vertical">
 801 |                                 <li><a href="#">One</a></li>
 802 |                                 <li><a href="#">Two</a></li>
 803 |                                 <li><a href="#">Three</a></li>
 804 |                                 <li><a href="#">Three</a></li>
 805 |                             </ul>
 806 |                         </li>
 807 |                         <li><a href="#">Two</a></li>
 808 |                         <li><a href="#">Three</a></li>
 809 |                     </ul>
 810 |                 </li>
 811 |                 <li><a href="#">Two</a></li>
 812 |                 <li><a href="#">Three</a></li>
 813 |             </ul>
 814 |         </div>
 815 | 
 816 |         <div class="top-bar-right">
 817 |             <div class="top-bar-inner">
 818 |                 <ul class="menu">
 819 |                     <li><input type="search" placeholder="Search"></li>
 820 |                     <li>
 821 |                         <button type="button" class="button white">Search</button>
 822 |                     </li>
 823 |                 </ul>
 824 |             </div>
 825 |         </div>
 826 |         <div class="top-bar-right">
 827 |             <div class="top-bar-inner">
 828 |                 <div class="top-bar-text"> Custom text</div>
 829 |             </div>
 830 |         </div>
 831 |     </div>
 832 | </div>
 833 |
834 | 837 |
838 | 839 |
840 | 
 841 | <div class="top-bar ">
 842 |     <div class="row column">
 843 |         <div class="top-bar-left">
 844 |             <ul class="dropdown menu" data-dropdown-menu>
 845 |                 <li class="menu-text">Site Title |
 846 |                     <small>Description</small>
 847 |                 </li>
 848 |             </ul>
 849 |         </div>
 850 |         <div class="top-bar-right">
 851 |             <ul class="dropdown menu" data-dropdown-menu>
 852 |                 <li>
 853 |                     <a href="#">One</a>
 854 |                     <ul class="menu vertical" >
 855 |                         <li><a href="#">One</a></li>
 856 |                         <li><a href="#">Two</a></li>
 857 |                         <li><a href="#">Three</a></li>
 858 |                     </ul>
 859 |                 </li>
 860 |                 <li><a href="#">Two</a></li>
 861 |                 <li><a href="#">Three</a></li>
 862 |                 <li><a href="#">Four</a></li>
 863 |                 <li><a href="#">Five</a></li>
 864 |                 <li><a href="#">Six</a></li>
 865 |                 <li><a href="#">Seven</a></li>
 866 |                 <li><a href="#">Nine</a></li>
 867 |             </ul>
 868 |         </div>
 869 |     </div>
 870 | </div>
 871 |
872 | 875 |
876 | 877 | 878 |
879 | 
 880 | <div class="title-bar">
 881 |     <div class="title-bar-left">
 882 |         <button class="menu-icon" type="button"></button>
 883 |         <span class="title-bar-title">Foundation</span>
 884 |     </div>
 885 |     <div class="title-bar-right">
 886 |         <button class="menu-icon" type="button"></button>
 887 |     </div>
 888 | </div>
 889 |
890 | 893 |
894 | 895 | 896 |
897 | 
 898 | <div class="title-bar ">
 899 |     <div class="title-bar-left">
 900 |         <button class="menu-icon" type="button"></button>
 901 |         <span class="title-bar-title">Foundation</span>
 902 |     </div>
 903 |     <div class="title-bar-right">
 904 |         <button class="menu-icon" type="button"></button>
 905 |     </div>
 906 | </div>
 907 |
908 | 911 |
912 | 913 |
914 | 
 915 | <ul class="dropdown menu inline-block" data-dropdown-menu>
 916 |     <li>
 917 |         <a href="#">Item 1</a>
 918 |         <ul class="menu">
 919 |             <li><a href="#">Item 1A</a></li>
 920 |             <li><a href="#">Item 1B</a></li>
 921 |             <li><a href="#">Item 1C</a></li>
 922 |             <li><a href="#">Item 1D</a></li>
 923 |         </ul>
 924 |     </li>
 925 |     <li><a href="#">Item 2</a></li>
 926 |     <li><a href="#">Item 3</a></li>
 927 |     <li><a href="#">Item 4</a></li>
 928 | </ul>
 929 |
930 | 933 |
934 | 935 |
936 | 
 937 | <ul class="menu vertical" style="max-width: 280px">
 938 |     <li><a href="#"><i class="fa fa-home"></i>  Home</a></li>
 939 |     <li><a href="#"><i class="fa fa-book"></i>  Library</a></li>
 940 |     <li><a href="#"><i class="fa fa-pencil"></i>  Applications</a></li>
 941 |     <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
 942 |     <li><a href="#"><i class="fa fa-comments-o"></i>  Support</a></li>
 943 | </ul>
 944 |
945 | 948 |
949 | 950 |
951 | 
 952 | <ul class="vertical menu" data-drilldown style="max-width: 280px">
 953 |     <li>
 954 |         <a href="#Item-1">Item 1</a>
 955 |         <ul class="vertical menu" >
 956 |             <li><a href="#Item-1A">Item 1A</a></li>
 957 |             <li><a href="#Item-1A">Item 1B</a></li>
 958 |             <li><a href="#Item-1A">Item 1C</a></li>
 959 |         </ul>
 960 |     </li>
 961 |     <li><a href="#Item-2">Item 2</a></li>
 962 |     <li><a href="#Item-2">Item 3</a></li>
 963 |     <li><a href="#Item-2">Item 4</a></li>
 964 |     <li><a href="#Item-2">Item 5</a></li>
 965 | </ul>
 966 |
967 | 970 |
971 | 972 |
973 | 
 974 | <ul class="pagination" role="navigation" aria-label="Pagination">
 975 |     <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
 976 |     <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
 977 |     <li><a href="#" aria-label="Page 2">2</a></li>
 978 |     <li><a href="#" aria-label="Page 3">3</a></li>
 979 |     <li><a href="#" aria-label="Page 4">4</a></li>
 980 |     <li class="ellipsis" aria-hidden="true"></li>
 981 |     <li><a href="#" aria-label="Page 12">12</a></li>
 982 |     <li><a href="#" aria-label="Page 13">13</a></li>
 983 |     <li class="pagination-next"><a href="#" aria-label="Next page">Next <span
 984 |             class="show-for-sr">page</span></a></li>
 985 | </ul>
 986 |
987 | 990 |
991 | 992 |
993 | 
 994 | <nav aria-label="You are here:" role="navigation">
 995 |     <ul class="breadcrumbs">
 996 |         <li><a href="#">Home</a></li>
 997 |         <li><a href="#">Features</a></li>
 998 |         <li class="disabled">Gene Splicing</li>
 999 |         <li>
1000 |             <span class="show-for-sr">Current: </span> Cloning
1001 |         </li>
1002 |     </ul>
1003 | </nav>
1004 |
1005 | 1008 |
1009 | 1010 |
1011 | 
1012 | <div class="orbit bullets-inside" role="region" aria-label="Favorite Space Pictures" data-orbit>
1013 |     <ul class="orbit-container">
1014 |         <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎
1015 |         </button>
1016 |         <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
1017 |         <li class="is-active orbit-slide">
1018 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg"
1019 |                  alt="Space">
1020 |             <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
1021 |         </li>
1022 |         <li class="orbit-slide">
1023 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/03.jpg"
1024 |                  alt="Space">
1025 |             <figcaption class="orbit-caption">Lets Rocket!</figcaption>
1026 |         </li>
1027 |         <li class="orbit-slide">
1028 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/04.jpg"
1029 |                  alt="Space">
1030 |             <figcaption class="orbit-caption">Encapsulating</figcaption>
1031 |         </li>
1032 |         <li class="orbit-slide">
1033 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/02.jpg"
1034 |                  alt="Space">
1035 |             <figcaption class="orbit-caption">Outta This World</figcaption>
1036 |         </li>
1037 |     </ul>
1038 | 
1039 |     <nav class="orbit-bullets">
1040 |         <button class="is-active" data-slide="0"><span
1041 |                 class="show-for-sr">First slide details.</span><span
1042 |                 class="show-for-sr">Current Slide</span></button>
1043 |         <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
1044 |         <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
1045 |         <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
1046 |     </nav>
1047 | </div>
1048 |
1049 | 1052 |
1053 | 1054 |
1055 | 
1056 | <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
1057 |     <ul class="orbit-container">
1058 |         <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎
1059 |         </button>
1060 |         <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
1061 |         <li class="is-active orbit-slide">
1062 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg"
1063 |                  alt="Space">
1064 |             <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
1065 |         </li>
1066 |         <li class="orbit-slide">
1067 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/03.jpg"
1068 |                  alt="Space">
1069 |             <figcaption class="orbit-caption">Lets Rocket!</figcaption>
1070 |         </li>
1071 |         <li class="orbit-slide">
1072 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/04.jpg"
1073 |                  alt="Space">
1074 |             <figcaption class="orbit-caption">Encapsulating</figcaption>
1075 |         </li>
1076 |         <li class="orbit-slide">
1077 |             <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/02.jpg"
1078 |                  alt="Space">
1079 |             <figcaption class="orbit-caption">Outta This World</figcaption>
1080 |         </li>
1081 |     </ul>
1082 | 
1083 |     <nav class="orbit-bullets">
1084 |         <button class="is-active" data-slide="0"><span
1085 |                 class="show-for-sr">First slide details.</span><span
1086 |                 class="show-for-sr">Current Slide</span></button>
1087 |         <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
1088 |         <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
1089 |         <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
1090 |     </nav>
1091 | </div>
1092 |
1093 | 1096 |
1097 | 1098 |
1099 | 
1100 | <a href="#" class="medium button">Button</a>
1101 | <a href="#" class="medium primary button">Primary Button</a>
1102 | <a href="#" class="medium info button">Info</a>>
1103 | <a class="success button" href="#">Success</a>
1104 | <a class="alert button" href="#">Alert</a>
1105 | <a class="warning button" href="#">Warning</a>
1106 | <a class="disabled button" href="#">Disabled</a>
1107 |
1108 | 1111 |
1112 | 1113 |
1114 | 
1115 | <button class="primary hollow button" href="#">Primary</button>
1116 | <button class="secondary hollow button" href="#">Secondary</button>
1117 | <button class="success hollow button" href="#">Success</button>
1118 | <button class="alert hollow button" href="#">Alert</button>
1119 | <button class="warning hollow button" href="#">Warning</button>
1120 |
1121 | 1124 |
1125 | 1126 |
1127 | 
1128 | <a class="tiny button" href="#">Tiny</a>
1129 | <a class="small button" href="#">Small</a>
1130 | <a class="button" href="#">Basic</a>
1131 | <a class="large button" href="#">Large</a>
1132 | <a class="expanded button" href="#">Expanded</a>
1133 |
1134 | 1137 |
1138 | 1139 |
1140 | 
1141 | <div class="switch">
1142 |     <input class="switch-input" checked id="exampleSwitch" type="checkbox" name="exampleSwitch">
1143 |     <label class="switch-paddle" for="exampleSwitch">
1144 |         <span class="show-for-sr">Download Kittens</span>
1145 |     </label>
1146 | </div>
1147 | 
1148 | <div class="switch large">
1149 |     <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
1150 |     <label class="switch-paddle" for="yes-no">
1151 |         <span class="switch-active" aria-hidden="true">Yes</span>
1152 |         <span class="switch-inactive" aria-hidden="true">No</span>
1153 |     </label>
1154 | </div>
1155 |
1156 | 1159 |
1160 | 1161 |
1162 | 
1163 | <button class="dropdown button">Dropdown Button</button>
1164 |
1165 | 1168 |
1169 | 1170 |
1171 | 
1172 | <h1>Heading 1</h1>
1173 | <h2>Heading 2</h2>
1174 | <h3>Heading 3</h3>
1175 | <h4>Heading 4</h4>
1176 | <h5>Heading 5</h5>
1177 | <h6>Heading 6</h6>
1178 |
1179 | 1182 |
1183 | 1184 |
1185 | 
1186 | <p>Standard text</p>
1187 | <p class="primary">Primary text - just add class <code>
1188 |     <small>.primary</small>
1189 | </code></p>
1190 | <p class="secondary">Secondary text - just add class <code>
1191 |     <small>.secondary</small>
1192 | </code></p>
1193 | <p class="success">Success text - just add class <code>
1194 |     <small>.success</small>
1195 | </code></p>
1196 | <p class="warning">Warning text - just add class <code>
1197 |     <small>.warning</small>
1198 | </code></p>
1199 | <p class="alert">Alert text - just add class <code>
1200 |     <small>.alert</small>
1201 | </code></p>
1202 |
1203 | 1206 |
1207 | 1208 |
1209 | 
1210 | <p>Standart text with <a href="#">link</a>.</p>
1211 | <p>
1212 |     <small>This line of text is meant to be treated as fine print.</small>
1213 | </p>
1214 | <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
1215 | <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
1216 |
1217 | 1220 |
1221 | 1222 |
1223 | 
1224 | <ul>
1225 |     <li>List item</li>
1226 |     <li>List item
1227 |         <ul>
1228 |             <li>Nested list item</li>
1229 |             <li>Nested list item</li>
1230 |             <li>Nested list item</li>
1231 |         </ul>
1232 |     </li>
1233 |     <li>List item</li>
1234 |     <li>List item</li>
1235 |     <li>List item</li>
1236 | </ul>
1237 |
1238 | 1241 |
1242 | 1243 |
1244 | 
1245 | <ol>
1246 |     <li>List item</li>
1247 |     <li>List item
1248 |         <ul>
1249 |             <li>Nested list item</li>
1250 |             <li>Nested list item</li>
1251 |             <li>Nested list item</li>
1252 |         </ul>
1253 |     </li>
1254 |     <li>List item</li>
1255 |     <li>List item</li>
1256 |     <li>List item</li>
1257 | </ol>
1258 |
1259 | 1262 |
1263 | 1264 |
1265 | 
1266 | <dl>
1267 |     <dt>Time</dt>
1268 |     <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a
1269 |         whole.
1270 |     </dd>
1271 |     <dt>Space</dt>
1272 |     <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
1273 | </dl>
1274 |
1275 | 1278 |
1279 | 1280 |
1281 | 
1282 | <blockquote>
1283 |     Great things in business are never done by one person. They're done by a team of people.
1284 |     <cite title="Source Title">Steve Jobs</cite>
1285 | </blockquote>
1286 |
1287 | 1290 |
1291 | 1292 |
1293 | 
1294 | <table width="100%">
1295 |     <thead>
1296 |     <tr>
1297 |         <th width="200">Table Header</th>
1298 |         <th>Table Header</th>
1299 |         <th width="150">Table Header</th>
1300 |         <th width="150">Table Header</th>
1301 |     </tr>
1302 |     </thead>
1303 |     <tbody>
1304 |     <tr>
1305 |         <td>Regular Table Row</td>
1306 |         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
1307 |         <td>Content </td>
1308 |         <td>Content </td>
1309 |     </tr>
1310 |     <tr class="primary">
1311 |         <td>Primary Table Row</td>
1312 |         <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
1313 |         <td>Content </td>
1314 |         <td>Content </td>
1315 |     </tr>
1316 |     <tr class="success">
1317 |         <td>Success Table Row</td>
1318 |         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
1319 |         <td>Content </td>
1320 |         <td>Content </td>
1321 |     </tr>
1322 |     <tr class="warning">
1323 |         <td>Warning Table Row</td>
1324 |         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
1325 |         <td>Content </td>
1326 |         <td>Content </td>
1327 |     </tr>
1328 |     <tr class="alert">
1329 |         <td>Alert Table Row</td>
1330 |         <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
1331 |         <td>Content </td>
1332 |         <td>Content </td>
1333 |     </tr>
1334 |     </tbody>
1335 | </table>
1336 |
1337 | 1340 |
1341 | 1342 |
1343 | 
1344 | <ul class="tabs" data-tabs id="example-tabs">
1345 |     <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
1346 |     <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
1347 |     <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
1348 | </ul>
1349 | <div class="tabs-content" data-tabs-content="example-tabs">
1350 |     <div class="tabs-panel is-active" id="panel1">
1351 |         <p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie
1352 |             magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
1353 |     </div>
1354 |     <div class="tabs-panel" id="panel2">
1355 |         <p>Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est
1356 |             bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh
1357 |             porttitor.</p>
1358 |     </div>
1359 |     <div class="tabs-panel" id="panel3">
1360 |         <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
1361 |             +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
1362 |             craft beer twee. </p>
1363 |     </div>
1364 | </div>
1365 |
1366 | 1369 |
1370 | 1371 |
1372 | 
1373 | <ul class="accordion" data-accordion>
1374 |     <li class="accordion-item is-active" data-accordion-item>
1375 |         <a href="#" class="accordion-title">Accordion 1</a>
1376 |         <div class="accordion-content" data-tab-content>
1377 |             I would start in the open state, due to using the `is-active` state class.
1378 |         </div>
1379 |     </li>
1380 |     <li class="accordion-item " data-accordion-item>
1381 |         <a href="#" class="accordion-title">Accordion 2</a>
1382 |         <div class="accordion-content" data-tab-content>
1383 |             I would start in the open state, due to using the `is-active` state class.
1384 |         </div>
1385 |     </li>
1386 | </ul>
1387 |
1388 | 1391 |
1392 | 1393 |
1394 | 
1395 | <div class="row">
1396 |     <div class="large-8 medium-8 columns">
1397 |         <h4>Input Fields, Select Boxes and Textarea</h4>
1398 |         <form>
1399 |             <div class="row">
1400 |                 <div class="large-12 columns">
1401 |                     <label>Input Label</label>
1402 |                     <input type="text" placeholder="large-12.columns"/>
1403 |                 </div>
1404 |             </div>
1405 |             <div class="row">
1406 |                 <div class="large-4 medium-4 columns">
1407 |                     <label>Input Label</label>
1408 |                     <input type="text" placeholder="large-4.columns"/>
1409 |                 </div>
1410 |                 <div class="large-4 medium-4 columns">
1411 |                     <label>Input Label</label>
1412 |                     <input type="text" placeholder="large-4.columns"/>
1413 |                 </div>
1414 |                 <div class="large-4 medium-4 columns">
1415 |                     <label>Input Label</label>
1416 |                     <input type="text" placeholder="large-4.columns"/>
1417 |                 </div>
1418 | 
1419 |             </div>
1420 | 
1421 |             <div class="row">
1422 |                 <div class="large-6 columns">
1423 |                     <label>Select Box</label>
1424 |                     <select>
1425 |                         <option value="husker">Husker</option>
1426 |                         <option value="starbuck">Starbuck</option>
1427 |                         <option value="hotdog">Hot Dog</option>
1428 |                         <option value="apollo">Apollo</option>
1429 |                     </select>
1430 |                 </div>
1431 |                 <div class="large-6 columns">
1432 |                     <label>Inline Label</label>
1433 |                     <div class="input-group">
1434 |                         <span class="input-group-label">$</span>
1435 |                         <input class="input-group-field" type="number">
1436 | 
1437 |                     </div>
1438 |                 </div>
1439 |             </div>
1440 | 
1441 |             <div class="row">
1442 |                 <div class="large-12 columns">
1443 |                     <label>Textarea Label</label>
1444 |                     <textarea placeholder="small-12.columns"></textarea>
1445 |                 </div>
1446 |             </div>
1447 |         </form>
1448 |         <a class="button">Submit</a><a class="button white">Cancel</a>
1449 |     </div>
1450 | 
1451 |     <div class="large-4 medium-4 columns">
1452 |         <h4>Checkboxes and Radio Buttons</h4>
1453 |         <form>
1454 |             <div class="row">
1455 |                 <div class="large-12 columns">
1456 |                     <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio
1457 |                     1</label>
1458 |                     <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label
1459 |                         for="pokemonBlue">Radio
1460 |                     2</label>
1461 |                 </div>
1462 |             </div>
1463 | 
1464 |             <div class="row">
1465 |                 <div class="large-12 columns">
1466 |                     <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
1467 |                     <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
1468 |                 </div>
1469 |             </div>
1470 | 
1471 |             <div class="row">
1472 |                 <div class="large-12 columns">
1473 |                     <fieldset class="fieldset">
1474 |                         <legend>Check these out</legend>
1475 |                         <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
1476 |                         <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
1477 |                     </fieldset>
1478 |                 </div>
1479 |             </div>
1480 |         </form>
1481 |     </div>
1482 | </div>
1483 |
1484 | 1487 |
1488 | 1489 |
1490 | 
1491 | <div class="row">
1492 |     <div class="columns">
1493 |         <div class="callout">
1494 |             <h5>Default Callout</h5>
1495 |             <p>Sample Text</p>
1496 |             <span></span>
1497 |         </div>
1498 |     </div>
1499 | </div>
1500 | <div class="row">
1501 |     <div class="large-6 medium-6 columns">
1502 |         <div class="success callout">
1503 |             <p>Success Callout</p>
1504 |         </div>
1505 |     </div>
1506 |     <div class="large-6 medium-6 columns">
1507 |         <div class="primary callout">
1508 |             <p>Primary Callout</p>
1509 |         </div>
1510 |     </div>
1511 | </div>
1512 | <div class="row">
1513 |     <div class="large-4 medium-4 columns">
1514 |         <div class="alert callout">
1515 |             <p>Alert Callout</p>
1516 |         </div>
1517 |     </div>
1518 |     <div class="large-4 medium-4 columns">
1519 |         <div class="warning callout">
1520 |             <p>Warning Callout</p>
1521 |         </div>
1522 |     </div>
1523 |     <div class="large-4 medium-4 columns">
1524 |         <div class="secondary callout">
1525 |             <p>Secondary Callout</p>
1526 |         </div>
1527 |     </div>
1528 | </div>
1529 |
1530 | 1533 |
1534 | 1535 |
1536 | 
1537 | <div class="success callout" data-closable="slide-out-right">
1538 |     <h5>This a friendly message.</h5>
1539 |     <p>And when you're done with me, I close using a Motion UI animation.</p>
1540 |     <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
1541 |         <span aria-hidden="true">×</span>
1542 |     </button>
1543 | </div>
1544 | <div class="alert callout" data-closable>
1545 |     <h5>This is Important!</h5>
1546 |     <p>But when you're done reading it, click the close button in the corner to dismiss this
1547 |         alert.</p>
1548 |     <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
1549 |         <span aria-hidden="true">×</span>
1550 |     </button>
1551 | </div>
1552 |
1553 | 1556 |
1557 | 1558 | 1559 | 1564 | 1565 | --------------------------------------------------------------------------------