├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gulpfile.js ├── package.json ├── src ├── aigis │ ├── aigis_assets │ │ ├── css │ │ │ ├── highlight │ │ │ │ └── okadia.css │ │ │ └── theme.css │ │ └── images │ │ │ └── dummy.jpg │ ├── aigis_config.yml │ └── template_ejs │ │ ├── components.ejs │ │ ├── index.ejs │ │ └── sidemenu.ejs ├── css │ ├── basis-core.styl │ ├── basis.styl │ ├── core │ │ ├── abstract │ │ │ ├── alert.styl │ │ │ ├── balloon.styl │ │ │ ├── btn.styl │ │ │ ├── card.styl │ │ │ ├── checkbox.styl │ │ │ ├── container.styl │ │ │ ├── drawer.styl │ │ │ ├── flex-media.styl │ │ │ ├── form-control.styl │ │ │ ├── hamburger-btn.styl │ │ │ ├── hero.styl │ │ │ ├── ib-row.styl │ │ │ ├── ic.styl │ │ │ ├── input-group.styl │ │ │ ├── media.styl │ │ │ ├── navbar.styl │ │ │ ├── page-effect.styl │ │ │ ├── pagination.styl │ │ │ ├── radio.styl │ │ │ ├── row.styl │ │ │ ├── select.styl │ │ │ ├── spinner-circle.styl │ │ │ ├── spinner-dots.styl │ │ │ └── spinner-pulse.styl │ │ ├── core.styl │ │ ├── function │ │ │ ├── color.styl │ │ │ ├── gcd.styl │ │ │ ├── hash-search.styl │ │ │ ├── is-int.styl │ │ │ ├── is-length.styl │ │ │ ├── is-null.styl │ │ │ ├── px2rem.styl │ │ │ ├── rem2px.styl │ │ │ ├── sanitize-animation-name.styl │ │ │ ├── size-prefix.styl │ │ │ ├── space.styl │ │ │ ├── strip-unit.styl │ │ │ └── vertical-rhythm.styl │ │ ├── mixin │ │ │ ├── animate.styl │ │ │ ├── background.styl │ │ │ ├── balloon-triangle.styl │ │ │ ├── balloon.styl │ │ │ ├── circle.styl │ │ │ ├── clearfix.styl │ │ │ ├── event.styl │ │ │ ├── form-control-base.styl │ │ │ ├── ghost.styl │ │ │ ├── list.styl │ │ │ ├── margin.styl │ │ │ ├── overlay.styl │ │ │ ├── padding.styl │ │ │ ├── position.styl │ │ │ ├── responsive.styl │ │ │ ├── square.styl │ │ │ ├── transition.styl │ │ │ ├── triangle.styl │ │ │ └── typography.styl │ │ └── variable │ │ │ ├── animate.styl │ │ │ ├── border-radius.styl │ │ │ ├── color.styl │ │ │ ├── font.styl │ │ │ ├── responsive.styl │ │ │ └── typography.styl │ ├── foundation │ │ └── base.styl │ ├── object │ │ ├── component │ │ │ ├── alert.styl │ │ │ ├── balloon.styl │ │ │ ├── breadcrumbs.styl │ │ │ ├── btn.styl │ │ │ ├── card.styl │ │ │ ├── checkbox.styl │ │ │ ├── container.styl │ │ │ ├── copyright.styl │ │ │ ├── drawer.styl │ │ │ ├── entries.styl │ │ │ ├── entry.styl │ │ │ ├── flex-media.styl │ │ │ ├── form-control.styl │ │ │ ├── hamburger-btn.styl │ │ │ ├── hero.styl │ │ │ ├── ic.styl │ │ │ ├── input-group.styl │ │ │ ├── media.styl │ │ │ ├── meta.styl │ │ │ ├── navbar.styl │ │ │ ├── page-effect.styl │ │ │ ├── page-header.styl │ │ │ ├── pagination.styl │ │ │ ├── radio.styl │ │ │ ├── row.styl │ │ │ ├── section.styl │ │ │ ├── select.styl │ │ │ ├── site-branding.styl │ │ │ ├── spinner-circle.styl │ │ │ ├── spinner-dots.styl │ │ │ └── spinner-pulse.styl │ │ └── utility │ │ │ ├── animate.styl │ │ │ ├── clearfix.styl │ │ │ ├── hidden.styl │ │ │ ├── img.styl │ │ │ ├── pull.styl │ │ │ ├── text.styl │ │ │ └── visible.styl │ └── plugin │ │ └── basis-ie9 │ │ ├── basis-ie9.styl │ │ └── object │ │ └── component │ │ ├── flex-media.styl │ │ ├── input-group.styl │ │ ├── media.styl │ │ ├── navbar.styl │ │ └── row.styl ├── font │ ├── basis.eot │ ├── basis.svg │ ├── basis.ttf │ └── basis.woff └── js │ ├── basis.js │ ├── drawer.js │ ├── navbar.js │ ├── page-effect.js │ └── select.js ├── tests ├── api │ └── api.styl └── tests.styl └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{json, yml}] 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | dist/ 4 | release/ 5 | *.log 6 | tests/tests.css 7 | basis.zip 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | tests/tests.css 2 | dist/aigis 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - '6' 5 | branches: 6 | only: 7 | - master 8 | - develop 9 | - "/v\\d+\\.\\d+\\.\\d+?.*/" 10 | env: 11 | global: 12 | - GIT_COMMITTER_NAME=travis-ci 13 | - GIT_COMMITTER_EMAIL=inc@2inc.org 14 | - GIT_AUTHOR_NAME=travis-ci 15 | - GIT_AUTHOR_EMAIL=inc@2inc.org 16 | - secure: kJS266orZqY/ClRbkj+WVrkaG3v/2k59ih+5D4V6vykb7kkBXoGm/INlVxoRk/1GpvysPlYAoS5/86lZh+0F3kFueVALRo0bgBbHXbBiupoGb0cy0LnJAfOyrDmX7B0TibwmHycmAaDWzfzJN/x3C+p1azEyZNpAQ4ctMSFXYdsimO4OVxzLWrT55N91YmgDGZhMMdn5n4cgRLFFMkDSdWqv5x2SybIsBuZQ3depLtLOzNNhSpjrmgsgida12ODZk0Lz7utwTflwLUuSpSCbbP0U+mj27BTKOJkJwhyUOYkRDj3fhxO5JTzrJGjSG19sOP1M9bJVFvqBxEJi3vqeGSHYdEwzwbFqkdJBdJzbdI51hSqz78QmGfPA3aBgnhd83BjENMFpvzrho3E2kBa4OOe3BiEPalx0ioR1Mj/ssUgxNKnB8ShPiJ7n9f3CG3+wxlVU6LdZ7pRoTfV0dlWc2RzS6tKqxCRk8zL31vkjGdOiINJHZ3PnU1A8HimHQ5q9FT/i5fdR6eCxQDFGB9NF5LCpFvzkQNjSm9WTsopctpH7Q2NXaHPMZFfgvzIgN/CIKGC6PvwWJcBxRdmNLYFAlUZ2dOBdV011JPQkcEpzRZwISNfhefrp1+CBnPq345kcc/8VLgvqFPrJxP7ko++IrwUdaP+vT2vxk3Q+QKWOTYU= 17 | script: 18 | - yarn run gulp build 19 | before_deploy: 20 | - yarn run gulp zip 21 | deploy: 22 | provider: releases 23 | api_key: 24 | secure: A8qPo5Z1dJjkIFFUtTzOnzTwOXHKWy0TgZ8PTpty8tKAPtacjppFKmprCuOJdZzkfV9nd4Fp1/e0Fw9354Zz6g1rVxVj6Wvz40U89/PR7tahAi/V+qpRudoNltS1X1VJ435my60KBpDaMQGpftKWTjQ4V+JJCm4Nc4Nq6ZXzIQQ2T7gTsKp42XKo+mrx3LxkL22kNWY+IbG+saLPnck7CzD+Rn+CjIm6ZCly95tjMxsFHN5H3HFJtrm8WEsB3PzVnKS8v7mYds/n0iWaLVnn4pYedozbF5IyjW39QizFlbpKUrWDMj5Szl4b+21B+QPL+73xOeFg3PWdiuSKHgoDUPtcKwmBUqhK5jU1DbttvyUf+MAy7oRqrPUu/G15wnwgatPKdYvZqNGhZGbX1GutQ9GOOgNMuH4AiRtOSCKKp1QKn025rCA4ppQPk4/tWqgVfsRqjC1jtYWt303Qd3u1R9XPu8/mwa3qlCEAqknir0jXAO4bBFZkLf3pH6GxVacHcN10xFRjqg+ny1TUBRlhXgcqSWIT7MIsx+JFRv1+o/PV+91PP09+HQsoB+8W8zxcR4xIaTuQgg9qEGjT1PsaLcX/SxKvtnZBEB4w1DQd4hAr+CN6LYAPPsbVsx/dEr1VYc4nVsmPyeQ96EFMugy23w4SiWYvA3WCPaXYenXoEl0= 25 | file: basis.zip 26 | on: 27 | tags: true 28 | repo: getbasis/basis 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #Changelog 2 | 3 | ## March 30, 2017 v6.4.0 4 | * Added `_pagination()` 5 | * Added `._c-pagination` 6 | 7 | ## March 3, 2017 v6.3.0 8 | * Update btn, alert, balloon and card padding. 9 | * Added `_ib-row()`. This is inline-block base abstract. 10 | 11 | ## February 25, 2017 v6.2.1 12 | * Bug fix for npm publish 13 | 14 | ## February 25, 2017 v6.2.0 15 | * Update for npm publish 16 | * Update `_font-path` 17 | 18 | ## February 22, 2017 v6.1.2 19 | * Fix bug that `._c-select--block` is not reflected. 20 | 21 | ## February 20, 2017 v6.1.1 22 | * Update `._c-checkbox` 23 | * Update `._c-radio` 24 | * Fix bug that background-color of `_page-effect()` is not reflected. 25 | 26 | ## February 20, 2017 v6.1.0 27 | * Added styleguide. 28 | * Update `._c-checkbox` and `_checkbox()` 29 | * Update `._c-radio` and `_radio()` 30 | * Update `._c-form-control` and `_form-control()` 31 | * Update `._c-input-group` and `_input-group()` 32 | * Update `._c-select` and `_select()` 33 | 34 | ## February 14, 2017 v6.0.2 35 | * Fix line-height of Form elements for normalize.css. 36 | * Refactoring grid margin calculation. 37 | * Fix zip task bug. 38 | * Fix normalize.css importing bug. 39 | 40 | ## February 7, 2017 v6.0.0 41 | * Refactoring 42 | * Removed placeholder layer. 43 | * Removed variables for backward compatibility. 44 | * Using yarn 45 | 46 | ## December 21, 2016 v4.3.2 47 | * Fix page-effect.js bug #12 48 | * Added plumber 49 | 50 | ## December 18, 2016 v4.3.1 51 | * Updated default heading size and margin. 52 | * Updated default html elements margin. 53 | 54 | ## December 15, 2016 v4.3.0 55 | * Added `._c-entry` component. 56 | * Added `._c-section` component. 57 | * Added `._c-page-header` component. 58 | * Added `._c-entries` component. 59 | * Added `._c-breadcrumbs` component. 60 | * Added `._c-meta` component. 61 | 62 | ## December 14, 2016 v4.2.1 63 | * Fix #9 64 | * Fix #10 65 | 66 | ## December 13, 2016 v4.2.0 67 | * Added basis.js 68 | * `._c-navbar` for IE9 69 | 70 | ## December 6, 2016 v4.1.1 71 | * Fixed `_space()` bug. 72 | 73 | ## December 6, 2016 v4.1.0 74 | * Added navbar components. Menu add-on is deprecated. 75 | 76 | ## December 1, 2016 v4.0.0 77 | * Refactoring 78 | * Removed the elements mixin and merged to the block elements. 79 | * Added balloon components. Balloon add-on is deprecated. 80 | * Added card components. Card add-on is deprecated. 81 | * Added hamburger button components. Hamburger button add-on is deprecated. 82 | * Added spinner components. Spinner add-on is deprecated. 83 | * Added drawer components. Drawer add-on is deprecated. 84 | * Added page-effect components. Page Effect add-on is deprecated. 85 | 86 | ## November 22, 2016 v3.0.0 87 | * Refactoring 88 | * Changed prefix of variable, mixin and placeholder. `bs-` to `_`. 89 | * Added some mixins. 90 | * Added some functions. 91 | * Removed global variables for the components. 92 | 93 | ## October 17, 2016 v2.0.1 94 | * Replace normalize.css to normalize-styl 95 | 96 | ## October 2, 2016 v2.0.0 97 | * Update `._c-checkbox` 98 | * Update `._c-radio` 99 | * Add `._c-select` 100 | * Change gulp task name `stylus` to `css` 101 | 102 | ## September 22, 2016 v1.0.6 103 | * Refactoring `._c-flex-media` for IE9. 104 | * Refactoring `._c-row__col--fit` for IE9. 105 | * Refactoring `._c-media` for IE9. 106 | 107 | ## September 19, 2016 v1.0.5 108 | * Fix a bs-padding bug 109 | 110 | ## August 22, 2016 v1.0.4 111 | * Fix readme 112 | * Fix `._c-row` margin bug #1 113 | 114 | ## August 17, 2016 v1.0.3 115 | * Refactoring variable names 116 | 117 | ## August 17, 2016 v1.0.2 118 | * Fix color functions 119 | 120 | ## August 17, 2016 v1.0.1 121 | * Some fixes 122 | 123 | ## August 17, 2016 v1.0.0 124 | * Release 125 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Takashi Kitajima 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Basis 2 | A lightweight responsive Stylus/CSS framework based on flexible box. 3 | 4 | Basis 5 | 6 | * Document: http://getbasis.github.io/ 7 | * GitHub: https://github.com/getbasis/basis/ 8 | * Release: https://github.com/getbasis/basis/releases/ 9 | 10 | ## Why it's awesome? 11 | 12 | * Basis isn't about a UI framework. Basis provides only basic frame of components. So you build a responsive web page quickly and easy to overwrite with your Stylus or CSS. 13 | * CSS architecture of Basis is [FLOCSS](https://github.com/hiloki/flocss). So it is possible a modular approach. 14 | * Basis has incorporated the concept of vertical rhythm. So you can be a good-balanced design. 15 | * Basis has many mixins. Usufule mixins and abstract mixin of compornents. 16 | 17 | ## Demo ( HTML5 Templates ) 18 | * integrity: http://getbasis.github.io/integrity/ 19 | * improve: http://getbasis.github.io/improve/ 20 | * affinity: http://getbasis.github.io/affinity/ 21 | 22 | ## Get started 23 | 24 | ### Using Yarn 25 | 26 | Installs Basis 27 | ``` 28 | $ yarn install getbasis 29 | ``` 30 | 31 | Imports Basis. your Stylus. 32 | ``` 33 | /* If you want to use Basis classes */ 34 | @import node_modules/getbasis/src/css/basis; 35 | 36 | /* If you want to use Basis mixins only */ 37 | @import node_modules/getbasis/src/css/basis-core; 38 | ``` 39 | 40 | Imports JavaScripts ( Require jQuery ) 41 | ``` 42 | import 'node_modules/getbasis/src/js/basis.js'; 43 | ``` 44 | 45 | ### Download from GitHub 46 | 47 | Downloads the basis from https://github.com/getbasis/basis/releases 48 | 49 | Imports Basis your Stylus. 50 | ``` 51 | /* If you want to use Basis classes */ 52 | @import basis/src/css/basis; 53 | 54 | /* If you want to use Basis mixins only */ 55 | @import basis/src/css/basis-core; 56 | ``` 57 | 58 | or Just this link. 59 | ``` 60 | 61 | ``` 62 | 63 | Loads JavaScripts 64 | ``` 65 | 69 | 70 | ``` 71 | 72 | ### Sample for using Basis classes 73 | ``` 74 | Btn 75 | ``` 76 | 77 | ### Sample for using Basis abstracts 78 | ``` 79 | .c-btn { 80 | @include _c-btn({ 81 | background-color: #fff, 82 | border: 1px solid #ddd, 83 | }); 84 | 85 | &--block { 86 | display: block; 87 | } 88 | } 89 | ``` 90 | ``` 91 | Btn 92 | ``` 93 | 94 | ### Option 95 | 96 | Support IE9 ( Not perfect ) 97 | 98 | ```html 99 | 102 | ``` 103 | 104 | And support IE8 ( Not perfect ) 105 | 106 | ```html 107 | 110 | ``` 111 | 112 | ## Browser support 113 | Modern Browser and IE10+ 114 | 115 | ## How to contribute 116 | 117 | Please make an issue if there is a problem and needs. 118 | Please don't make the new issue if the issue of the same content already exists. 119 | If you can coding, please give me a pull request. 120 | But, please do not send in the master branch. 121 | Pull request sent to the master branch doesn't merge. 122 | 123 | ## License 124 | 125 | MIT License 126 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Import node modules 5 | */ 6 | var gulp = require('gulp'); 7 | var stylus = require('gulp-stylus'); 8 | var rename = require('gulp-rename'); 9 | var postcss = require('gulp-postcss'); 10 | var autoprefixer = require('autoprefixer'); 11 | var cssnano = require('cssnano'); 12 | var zip = require('gulp-zip'); 13 | var uglify = require('gulp-uglify'); 14 | var rollup = require('gulp-rollup'); 15 | var nodeResolve = require('rollup-plugin-node-resolve'); 16 | var commonjs = require('rollup-plugin-commonjs'); 17 | var babel = require('rollup-plugin-babel'); 18 | var plumber = require('gulp-plumber'); 19 | var aigis = require('gulp-aigis'); 20 | var browserSync = require('browser-sync'); 21 | 22 | var dir = { 23 | src: { 24 | css : 'src/css', 25 | js : 'src/js', 26 | font : 'src/font', 27 | aigis: 'src/aigis' 28 | }, 29 | dist: { 30 | css : 'dist/css', 31 | js : 'dist/js', 32 | font : 'dist/font', 33 | aigis: 'dist/aigis' 34 | } 35 | }; 36 | 37 | /** 38 | * Stylus to CSS 39 | */ 40 | gulp.task('css', function() { 41 | return gulp.src( 42 | [ 43 | dir.src.css + '/basis.styl', 44 | dir.src.css + '/plugin/basis-ie9/basis-ie9.styl' 45 | ], 46 | {base: dir.src.css} 47 | ) 48 | .pipe(plumber()) 49 | .pipe(stylus({ 50 | 'resolve url': true, 51 | include: 'node_modules/normalize-styl' 52 | })) 53 | .pipe(postcss([ 54 | autoprefixer({ 55 | browsers: ['last 2 versions'], 56 | cascade: false 57 | }) 58 | ])) 59 | .pipe(gulp.dest(dir.dist.css)) 60 | .pipe(postcss([cssnano()])) 61 | .pipe(rename({ suffix: '.min' })) 62 | .pipe(gulp.dest(dir.dist.css)); 63 | }); 64 | 65 | /** 66 | * Build javascript 67 | */ 68 | gulp.task('js', function() { 69 | gulp.src(dir.src.js + '/**/*.js') 70 | .pipe(plumber()) 71 | .pipe(rollup({ 72 | allowRealFiles: true, 73 | entry: dir.src.js + '/basis.js', 74 | format: 'iife', 75 | external: ['jquery'], 76 | globals: { 77 | jquery: "jQuery" 78 | }, 79 | plugins: [ 80 | nodeResolve({ jsnext: true }), 81 | commonjs(), 82 | babel({ 83 | presets: ['es2015-rollup'], 84 | babelrc: false 85 | }) 86 | ] 87 | })) 88 | .pipe(gulp.dest(dir.dist.js)) 89 | .on('end', function() { 90 | gulp.src([dir.dist.js + '/basis.js']) 91 | .pipe(uglify()) 92 | .pipe(rename({suffix: '.min'})) 93 | .pipe(gulp.dest(dir.dist.js)); 94 | }); 95 | }); 96 | 97 | /** 98 | * Build font 99 | */ 100 | gulp.task('font', function() { 101 | return gulp.src(dir.src.font + '/*') 102 | .pipe(gulp.dest(dir.dist.font)); 103 | }); 104 | 105 | /** 106 | * Styleguide 107 | */ 108 | gulp.task('aigis:update', function() { 109 | return _aigis(); 110 | }); 111 | gulp.task('aigis:build', ['build'], function() { 112 | return _aigis(); 113 | }); 114 | function _aigis() { 115 | return gulp.src(dir.src.aigis + '/aigis_config.yml') 116 | .pipe(aigis()) 117 | } 118 | 119 | /** 120 | * Auto Build 121 | */ 122 | gulp.task('watch', function() { 123 | gulp.watch([dir.src.css + '/**/*.styl'], ['css']); 124 | gulp.watch([dir.src.js + '/**/*.js'], ['js']); 125 | gulp.watch( 126 | [ 127 | dir.src.css + '/**/*.styl', 128 | dir.src.js + '/**/*.js' 129 | ], 130 | ['aigis:update'] 131 | ); 132 | }); 133 | 134 | /** 135 | * Build 136 | */ 137 | gulp.task('build', ['css', 'js', 'font']); 138 | 139 | /** 140 | * Browsersync 141 | */ 142 | gulp.task('server', ['aigis:build'], function() { 143 | browserSync.init( { 144 | server: { 145 | baseDir: dir.dist.aigis + '/' 146 | }, 147 | files: [ 148 | dir.dist.aigis + '/index.html' 149 | ] 150 | }); 151 | }); 152 | 153 | /** 154 | * Creates the zip file 155 | */ 156 | gulp.task('zip', function() { 157 | return gulp.src( 158 | [ 159 | '**', 160 | '.editorconfig', 161 | '.gitignore', 162 | '!node_modules', 163 | '!node_modules/**', 164 | '!basis.zip' 165 | ] 166 | , {base: './'} 167 | ) 168 | .pipe(zip('basis.zip')) 169 | .pipe(gulp.dest('./')); 170 | }); 171 | 172 | /** 173 | * Stylus tests 174 | */ 175 | gulp.task('test', function() { 176 | return gulp.src('./tests/tests.styl') 177 | .pipe(plumber()) 178 | .pipe(stylus({ 179 | 'resolve url nocheck': true 180 | })) 181 | .pipe(gulp.dest('./tests')); 182 | }); 183 | 184 | gulp.task('default', ['watch', 'server']); 185 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "getbasis", 3 | "version": "6.4.0", 4 | "main": "src/css/basis.styl", 5 | "author": "inc2734", 6 | "contributors": [ 7 | "Toro_Unit", 8 | "segayuu" 9 | ], 10 | "keywords": [ 11 | "css", 12 | "stylus", 13 | "mobile-first", 14 | "responsive", 15 | "front-end", 16 | "framework", 17 | "web" 18 | ], 19 | "license": "MIT", 20 | "homepage": "https://getbasis.github.io/", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/getbasis/basis" 24 | }, 25 | "files": [ 26 | "src", 27 | "dist", 28 | "tests", 29 | "package.json", 30 | "gulpfile.js", 31 | "LICENSE", 32 | "README.md", 33 | "yarn.lock" 34 | ], 35 | "devDependencies": { 36 | "autoprefixer": "^6.7.7", 37 | "babel-preset-es2015-rollup": "^3.0.0", 38 | "browser-sync": "^2.18.8", 39 | "cssnano": "^3.10.0", 40 | "gulp": "^3.9.1", 41 | "gulp-aigis": "^1.3.0", 42 | "gulp-plumber": "^1.1.0", 43 | "gulp-postcss": "^6.4.0", 44 | "gulp-rename": "^1.2.2", 45 | "gulp-rollup": "^2.11.0", 46 | "gulp-stylus": "^2.6.0", 47 | "gulp-uglify": "^2.1.2", 48 | "gulp-zip": "^4.0.0", 49 | "rollup-plugin-babel": "^2.7.1", 50 | "rollup-plugin-commonjs": "^8.0.2", 51 | "rollup-plugin-node-resolve": "^2.0.0" 52 | }, 53 | "scripts": { 54 | "gulp": "gulp", 55 | "test": "gulp test && cat tests/tests.css", 56 | "prepublish": "gulp build", 57 | "build": "gulp build", 58 | "start": "gulp" 59 | }, 60 | "dependencies": { 61 | "html5shiv": "^3.7.3", 62 | "normalize-styl": "^4.1.1" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/aigis/aigis_assets/css/highlight/okadia.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+abap+actionscript+apacheconf+apl+applescript+asciidoc+aspnet+autoit+autohotkey+bash+basic+batch+c+brainfuck+bro+bison+csharp+cpp+coffeescript+ruby+css-extras+d+dart+diff+docker+eiffel+elixir+erlang+fsharp+fortran+gherkin+git+glsl+go+groovy+haml+handlebars+haskell+haxe+http+icon+inform7+ini+j+jade+java+json+julia+keyman+kotlin+latex+less+lolcode+lua+makefile+markdown+matlab+mel+mizar+monkey+nasm+nginx+nim+nix+nsis+objectivec+ocaml+oz+parigp+parser+pascal+perl+php+php-extras+powershell+processing+prolog+protobuf+puppet+pure+python+q+qore+r+jsx+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+sql+stylus+swift+tcl+textile+twig+typescript+verilog+vhdl+vim+wiki+yaml */ 2 | /** 3 | * okaidia theme for JavaScript, CSS and HTML 4 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 5 | * @author ocodia 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #f8f8f2; 11 | background: none; 12 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | /* Code blocks */ 32 | pre[class*="language-"] { 33 | padding: 1em; 34 | margin: .5em 0; 35 | overflow: auto; 36 | border-radius: 0.3em; 37 | } 38 | 39 | :not(pre) > code[class*="language-"], 40 | pre[class*="language-"] { 41 | background: #272822; 42 | } 43 | 44 | /* Inline code */ 45 | :not(pre) > code[class*="language-"] { 46 | padding: .1em; 47 | border-radius: .3em; 48 | white-space: normal; 49 | } 50 | 51 | .token.comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: slategray; 56 | } 57 | 58 | .token.punctuation { 59 | color: #f8f8f2; 60 | } 61 | 62 | .namespace { 63 | opacity: .7; 64 | } 65 | 66 | .token.property, 67 | .token.tag, 68 | .token.constant, 69 | .token.symbol, 70 | .token.deleted { 71 | color: #f92672; 72 | } 73 | 74 | .token.boolean, 75 | .token.number { 76 | color: #ae81ff; 77 | } 78 | 79 | .token.selector, 80 | .token.attr-name, 81 | .token.string, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted { 85 | color: #a6e22e; 86 | } 87 | 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string, 93 | .token.variable { 94 | color: #f8f8f2; 95 | } 96 | 97 | .token.atrule, 98 | .token.attr-value, 99 | .token.function { 100 | color: #e6db74; 101 | } 102 | 103 | .token.keyword { 104 | color: #66d9ef; 105 | } 106 | 107 | .token.regex, 108 | .token.important { 109 | color: #fd971f; 110 | } 111 | 112 | .token.important, 113 | .token.bold { 114 | font-weight: bold; 115 | } 116 | .token.italic { 117 | font-style: italic; 118 | } 119 | 120 | .token.entity { 121 | cursor: help; 122 | } 123 | 124 | -------------------------------------------------------------------------------- /src/aigis/aigis_assets/css/theme.css: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Paragraph 4 | category: body 5 | --- 6 | 7 | ```html 8 |

9 | The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 10 |

11 | ``` 12 | 13 | */ 14 | 15 | /* 16 | --- 17 | name: Heading 18 | category: body 19 | --- 20 | 21 | ```html 22 |

Heading1

23 |

Heading2

24 |

Heading3

25 |

Heading4

26 |
Heading5
27 |
Heading6
28 | ``` 29 | 30 | */ 31 | 32 | 33 | /* 34 | --- 35 | name: Header 36 | category: layout/header 37 | tag: 38 | - deprecated 39 | --- 40 | 41 | ```html 42 |
43 | Styleguide 44 |
45 | ``` 46 | 47 | */ 48 | .aigis-header { 49 | line-height: 1.5em; 50 | padding-left: 10px; 51 | font-size: 22px; 52 | font-weight: 600; 53 | color: #33331a; 54 | padding: 10px; 55 | margin-top: 10px; 56 | margin-bottom: 20px; } 57 | .aigis-header a { 58 | text-decoration: none; 59 | color: inherit; } 60 | 61 | /* 62 | --- 63 | name: Footer 64 | category: layout/footer 65 | tag: latest 66 | --- 67 | 68 | ```html 69 | 70 | ``` 71 | 72 | */ 73 | .aigis-footer { 74 | padding-top: 2rem; 75 | padding-bottom: 2rem; 76 | margin-top: 2rem; 77 | line-height: 1.75; 78 | color: #7a7a7a; 79 | border-top: 1px solid #eee; 80 | text-align: center; 81 | font-size: 16px; } 82 | 83 | /* 84 | --- 85 | name: Preview 86 | category: body 87 | tag: latest 88 | --- 89 | 90 | ```html 91 |
92 | Button 93 | 94 |
95 | ``` 96 | 97 | */ 98 | .aigis-codeblock, .aigis-preview { 99 | position: relative; 100 | margin: 0; 101 | overflow: scroll; } 102 | .aigis-preview { 103 | background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAF0lEQVR4AWP4DwVvoWCgBGAMmMQACQAAuK72AWHjK4wAAAAASUVORK5CYII=' ); 104 | } 105 | .aigis-preview + pre { 106 | margin-top: 0; 107 | } 108 | 109 | .ex-ag-btn { 110 | -webkit-appearance: none; 111 | display: inline-block; 112 | border: none; 113 | background-color: #3DB680; 114 | color: #fff; 115 | padding: 10px 20px; 116 | text-align: center; 117 | line-height: 40px; 118 | min-width: 200px; 119 | font-size: 20px; 120 | box-sizing: border-box; } 121 | .ex-ag-btn--primary { 122 | color: black; 123 | background-color: #FFEA3A; } 124 | 125 | 126 | /* 127 | --- 128 | name: Codeblock 129 | category: body 130 | tag: latest 131 | --- 132 | 133 | ```html 134 | 
<div class="aigis-header">
  hoge
</div>

135 |
136 | ``` 137 | 138 | */ 139 | .aigis-module > pre { 140 | background-color: #272822; 141 | color: #f8f8f2; 142 | font-size: 14px; 143 | position: relative; 144 | padding: 0.5em; 145 | border-radius: 3px; 146 | margin: 0 auto 3em; 147 | overflow: scroll; 148 | border: 1px solid #A0A0A0; } 149 | 150 | .aigis-preview { 151 | border: 1px solid #A0A0A0; 152 | border-radius: 3px; 153 | border-radius: 3px 3px 0 0; 154 | padding: 20px 10px; 155 | padding: 16px; 156 | margin: 0; 157 | margin-top: 10px; } 158 | 159 | .aigis-preview + pre { 160 | border-radius: 0 0 3px 3px; 161 | border-top: none; 162 | margin-top: 0; } 163 | 164 | /* 165 | --- 166 | name: Sidemenu 167 | category: layout/sidemenu 168 | tag: latest 169 | --- 170 | 171 | ```html 172 |
173 |
174 | Styleguide 175 |
176 |

Category

177 | 180 |

Tag

181 | 184 |

All Colors

185 |
186 | ``` 187 | 188 | */ 189 | .aigis-sidemenu { 190 | position: fixed; 191 | top: 0; 192 | bottom: 0; 193 | left: 0; 194 | width: 280px; 195 | box-sizing: border-box; 196 | background-color: #f9faf9; 197 | color: #33331a; 198 | overflow-x: scroll; 199 | height: 100%; } 200 | .aigis-sidemenu__heading { 201 | font-size: 20px; 202 | margin: 12px 0; 203 | color: #33331a; 204 | font-weight: normal; 205 | padding-left: 10px; 206 | line-height: 1em; } 207 | .aigis-sidemenu__heading a { 208 | color: inherit; 209 | text-decoration: none; } 210 | 211 | .aigis-preview .aigis-sidemenu { 212 | position: relative; 213 | } 214 | 215 | /* 216 | --- 217 | name: Category list 218 | category: layout/sidemenu 219 | tag: latest 220 | --- 221 | 222 | ```html 223 |

Category

224 | 234 | ``` 235 | 236 | */ 237 | .aigis-categoryList ul { 238 | padding: 3px 10px; 239 | font-size: 14px; } 240 | .aigis-categoryList li a{ 241 | display: block; 242 | position: relative; 243 | padding: 3px 10px 3px 10px; 244 | color: #454545; 245 | text-overflow: ellipsis; 246 | overflow: hidden; 247 | white-space: nowrap; 248 | border-radius: 0px; 249 | outline: none; 250 | text-decoration: none; } 251 | 252 | .aigis-categoryList li:hover a[href]:hover{ 253 | box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.1); 254 | background-color: #5D5D5D; 255 | color: #fff; } 256 | .aigis-categoryList li[data-path-depth] a:before { 257 | content: "└"; 258 | margin-right: 10px; } 259 | .aigis-categoryList li[data-path-depth="1"] a:before { 260 | margin-left: 1em; } 261 | .aigis-categoryList li[data-path-depth="2"] a:before { 262 | margin-left: 2em; } 263 | .aigis-categoryList li[data-path-depth="3"] a:before { 264 | margin-left: 3em; } 265 | .aigis-categoryList li[data-path-depth="4"] a:before { 266 | margin-left: 4em; } 267 | .aigis-categoryList li[data-path-depth] [data-tree-current] { 268 | background-color: #8C8C8C; 269 | color: #fff; 270 | } 271 | 272 | /* 273 | --- 274 | name: Tag list 275 | category: layout/sidemenu 276 | tag: latest 277 | --- 278 | 279 | ```html 280 | 284 | ``` 285 | 286 | */ 287 | .aigis-tags { 288 | padding: 10px; 289 | padding-left: 0; 290 | margin: 0; } 291 | .aigis-tags__item { 292 | display: inline-block; 293 | border-radius: 1px; 294 | margin: 5px 0; 295 | margin-right: 5px; 296 | font-size: 12px; 297 | padding: 3px 5px; 298 | background-color: #454545; 299 | color: #fff; 300 | text-decoration: none; } 301 | .aigis-tags__item--deprecated { 302 | background-color: #ff4f4f; 303 | color: #fff; } 304 | .aigis-tags__item--latest { 305 | background-color: #00c655; 306 | color: #fff; } 307 | .aigis-tags.aigis-tagList { 308 | padding-left: 10px; } 309 | 310 | /* 311 | --- 312 | name: Module list 313 | category: body 314 | tag: latest 315 | --- 316 | 317 | ```html 318 | 335 | ``` 336 | 337 | */ 338 | .aigis-moduleList { 339 | line-height: 1.6; 340 | font-size: 16px; } 341 | .aigis-moduleList__item a { 342 | color: #08f; 343 | text-decoration: none; } 344 | .aigis-moduleList__item a:hover { 345 | text-decoration: underline; } 346 | 347 | .aigis-module__heading { 348 | padding-bottom: 0.3em; 349 | font-size: 1.75em; 350 | line-height: 1.225; 351 | border-bottom: 1px solid #eee; 352 | position: relative; } 353 | .aigis-module__heading:hover a { 354 | position: relative; } 355 | .aigis-module__heading:hover a:before { 356 | content: "\00a7"; 357 | position: absolute; 358 | right: 100%; 359 | bottom: 5px; 360 | font-size: 20px; 361 | color: #000; 362 | padding-right: 5px; 363 | padding-left: 5px; } 364 | 365 | /* 366 | --- 367 | name: File path 368 | category: body 369 | --- 370 | 371 | ```html 372 |
373 | /aigis_assets/css/theme.css 374 |
375 | ``` 376 | 377 | */ 378 | 379 | .aigis-module__filepath { 380 | display: block; 381 | text-align: right; 382 | margin-top: -15px; 383 | font-size: 12px; 384 | color: #ADADAD; } 385 | 386 | /* 387 | --- 388 | name: Color palette 389 | category: layout/special 390 | tag: special 391 | --- 392 | 393 | ```html 394 |
395 |

colors

396 |
#428b1c
397 |
#55b5db
398 |
#5B594B
399 |
#6272a4
400 |
#666
401 |
#66d9ef
402 |
#66D9EF
403 |
#6be5fd
404 |
#728fcb
405 |
#75715E
406 |
407 | ``` 408 | 409 | */ 410 | .aigis-colorPalette { 411 | margin-top: 5px; } 412 | .aigis-colorPalette__color { 413 | display: inline-block; 414 | vertical-align: middle; 415 | height: 40px; 416 | width: 50%; 417 | margin-right: 5px; } 418 | .aigis-colorPalette__label { 419 | display: inline-block; 420 | vertical-align: middle; 421 | line-height: 40px; } 422 | 423 | body { 424 | margin: 0; 425 | padding: 0; 426 | font-family: "Helvetica Neue",Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"; 427 | font-size: 1rem; } 428 | 429 | .aigis-module > ul code, .aigis-module > p code, .aigis-contents__body > ul code, .aigis-contents__body > p code, .aigis-contents__body > h2 code, .aigis-contents__body > h3 code { 430 | color: #666; 431 | background-color: #f7f7f7; 432 | padding: 0 3px; 433 | font-size: 0.8em; 434 | border-radius: 3px; } 435 | 436 | .aigis-container { 437 | box-sizing: border-box; 438 | width: auto; 439 | min-width: 960px; 440 | margin-right: auto; } 441 | .aigis-container:after { 442 | content: ""; 443 | display: table; 444 | clear: both; } 445 | 446 | .aigis-contents { 447 | box-sizing: border-box; 448 | padding-right: 10px; 449 | padding-left: 280px; 450 | margin: 0 auto; 451 | font-size: 16px; } 452 | .aigis-contents__body { 453 | color: #33331a; 454 | max-width: 960px; 455 | min-width: 600px; 456 | padding: 20px 20px; 457 | margin: 0 auto; } 458 | .aigis-contents__body > *:first-child { 459 | margin-top: 0; } 460 | .aigis-contents__body > ul { 461 | font-size: 16px; } 462 | .aigis-contents__body > p { 463 | margin-bottom: 1em; } 464 | .aigis-contents__body > h2 { 465 | font-size: 30px; } 466 | .aigis-contents__body > h3 { 467 | font-size: 24px; } 468 | -------------------------------------------------------------------------------- /src/aigis/aigis_assets/images/dummy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getbasis/basis/34437d65b4e1de65330ed99c656516e87e65292b/src/aigis/aigis_assets/images/dummy.jpg -------------------------------------------------------------------------------- /src/aigis/aigis_config.yml: -------------------------------------------------------------------------------- 1 | # The directory containing the source files to parse recursively 2 | source: 3 | - ../css 4 | 5 | # The directory that aigis will build to 6 | dest: ../../dist/aigis 7 | 8 | # The assets needed to build the docs 9 | # You may put doc related assets here too: images, css, etc. 10 | dependencies: 11 | - ./aigis_assets 12 | - ../../dist/css 13 | - ../../dist/js 14 | - ../../dist/font 15 | 16 | # The directory containing the tempalte files to generate pages 17 | # It must contain 'layout.xxx' and 'index.xxx' (.ejs or .jade or .hbs) 18 | template_dir: ./template_ejs 19 | template_engine: ejs 20 | 21 | index: ../../README.md 22 | -------------------------------------------------------------------------------- /src/aigis/template_ejs/components.ejs: -------------------------------------------------------------------------------- 1 | <% if(components.length) { %> 2 | 10 |
<% components.forEach(function(component) { %> 11 |
12 |

13 | <%- component.config.name %> 14 |

15 |
16 | <%- component.sourcePath %> 17 |
18 | 23 | <%- component.html %> 24 |
<% }) %> 25 |
26 | <% } else { %> 27 | <%- html %> 28 | <% } %> 29 | -------------------------------------------------------------------------------- /src/aigis/template_ejs/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | <%- include('sidemenu') %> 13 |
14 |
15 | <%- include('components') %> 16 | 17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/aigis/template_ejs/sidemenu.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | <%- config.name %> 4 |
5 |

Category

6 | 9 |

Tag

10 | 15 |

All Colors

16 |
17 | -------------------------------------------------------------------------------- /src/css/basis-core.styl: -------------------------------------------------------------------------------- 1 | @import 'core/*'; 2 | @import 'core/function/*'; 3 | @import 'core/variable/*'; 4 | @import 'core/mixin/*'; 5 | @import 'core/abstract/*'; 6 | -------------------------------------------------------------------------------- /src/css/basis.styl: -------------------------------------------------------------------------------- 1 | /*! 2 | * Name: Basis v6.4.0 3 | * Description: A lightweight responsive Stylus/CSS framework based on flexible box. 4 | * Author: Takashi Kitajima ( inc2734 ) 5 | * Author URL: http://2inc.org 6 | * GitHub Repository: https://github.com/getbasis/basis 7 | * License: MIT 8 | */ 9 | 10 | @import 'core/*'; 11 | @import 'core/function/*'; 12 | @import 'core/variable/*'; 13 | @import 'core/mixin/*'; 14 | @import 'core/abstract/*'; 15 | 16 | @import 'normalize'; 17 | @import 'foundation/*'; 18 | 19 | @import 'object/component/*'; 20 | @import 'object/utility/*'; 21 | -------------------------------------------------------------------------------- /src/css/core/abstract/alert.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Alert 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-alert { 7 | // _alert({ 8 | // background-color: null, 9 | // border: null, 10 | // padding: _space(.75), 11 | // }); 12 | // } 13 | // 14 | // 17 | // 18 | 19 | _alert(params = {}) { 20 | params = merge( 21 | { 22 | background-color: null, 23 | border: null, 24 | padding: _space(.75), 25 | }, 26 | params 27 | ); 28 | 29 | background-color = params['background-color']; 30 | border = params['border']; 31 | padding = params['padding']; 32 | 33 | display: block; 34 | 35 | if (! _is-null(background-color)) { 36 | background-color: background-color; 37 | } 38 | 39 | if (! _is-null(border)) { 40 | border: border; 41 | } 42 | 43 | if (! _is-null(padding)) { 44 | padding: padding; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/css/core/abstract/balloon.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Balloon (Top) 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-balloon-top { 7 | // _balloon-top({ 8 | // background-color: null, 9 | // border-color: null, 10 | // border-size: null, 11 | // triangle-size: 10px, 12 | // padding: _space(.75), 13 | // }); 14 | // } 15 | // 16 | //
17 | // ... 18 | //
19 | // 20 | 21 | _balloon-top(params = {}) { 22 | _balloon(top, params); 23 | } 24 | 25 | // 26 | // Balloon (Right) 27 | // 28 | // @param hash params properties for decoration 29 | // 30 | // .c-balloon-right { 31 | // _balloon-right({ 32 | // background-color: null, 33 | // border-color: null, 34 | // border-size: null, 35 | // triangle-size: 10px, 36 | // padding: _space(.75), 37 | // }); 38 | // } 39 | // 40 | //
41 | // ... 42 | //
43 | // 44 | 45 | _balloon-right(params = {}) { 46 | _balloon(right, params); 47 | } 48 | 49 | // 50 | // Balloon (Bottom) 51 | // 52 | // @param hash params properties for decoration 53 | // 54 | // .c-balloon-bottom { 55 | // _balloon-bottom({ 56 | // background-color: null, 57 | // border-color: null, 58 | // border-size: null, 59 | // triangle-size: 10px, 60 | // padding: _space(.75), 61 | // }); 62 | // } 63 | // 64 | //
65 | // ... 66 | //
67 | // 68 | 69 | _balloon-bottom(params = {}) { 70 | _balloon(bottom, params); 71 | } 72 | 73 | // 74 | // Balloon (Left) 75 | // 76 | // @param hash params properties for decoration 77 | // 78 | // .c-balloon-left { 79 | // _balloon-left({ 80 | // background-color: null, 81 | // border-color: null, 82 | // border-size: null, 83 | // triangle-size: 10px, 84 | // padding: _space(.75), 85 | // }); 86 | // } 87 | // 88 | //
89 | // ... 90 | //
91 | // 92 | 93 | _balloon-left(params = {}) { 94 | _balloon(left, params); 95 | } 96 | -------------------------------------------------------------------------------- /src/css/core/abstract/btn.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Button 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-btn { 7 | // _btn({ 8 | // background-color: null, 9 | // border: null, 10 | // padding: _space(.5) _space(1), 11 | // }); 12 | // } 13 | // 14 | // btn 15 | // 16 | 17 | _btn(params = {}) { 18 | params = merge( 19 | { 20 | background-color: null, 21 | border: null, 22 | padding: _space(.5) _space(1), 23 | }, 24 | params 25 | ); 26 | 27 | background-color = params['background-color']; 28 | border = params['border']; 29 | padding = params['padding']; 30 | 31 | display: inline-block; 32 | cursor: pointer; 33 | line-height: 1; 34 | overflow: hidden; 35 | text-align: center; 36 | text-decoration: none; 37 | vertical-align: middle; 38 | white-space: nowrap; 39 | 40 | if (! _is-null(background-color)) { 41 | background-color: background-color; 42 | } 43 | 44 | if (! _is-null(border)) { 45 | border: border; 46 | } 47 | 48 | if (! _is-null(padding)) { 49 | padding: padding; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/css/core/abstract/card.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Card 3 | // 4 | // @param hash $params properties for decoration 5 | // 6 | // .c-card { 7 | // @include _card({ 8 | // background-color: null, 9 | // padding: _space(.75), 10 | // }); 11 | // } 12 | // 13 | //
14 | //
15 | // 16 | //
17 | //
18 | // ... 19 | //
20 | //
21 | // 22 | 23 | _card(params = {}) { 24 | params = merge( 25 | { 26 | background-color: null, 27 | padding: _space(.75), 28 | }, 29 | params 30 | ); 31 | 32 | background-color = params['background-color']; 33 | padding = params['padding']; 34 | 35 | display: flex; 36 | flex-direction: column; 37 | 38 | if (! _is-null(background-color)) { 39 | background-color: background-color; 40 | } 41 | 42 | &__figure { 43 | > img { 44 | vertical-align: top; 45 | width: 100%; 46 | } 47 | } 48 | 49 | &__body { 50 | flex: 1 0 auto; 51 | 52 | if (! _is-null(padding)) { 53 | padding: padding; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/css/core/abstract/checkbox.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Checkbox 3 | // 4 | // .c-checkbox { 5 | // _checkbox({ 6 | // size: _base-font-size-px, 7 | // border-radius: _border-radius, 8 | // }); 9 | // } 10 | // 11 | // 18 | // 19 | 20 | _checkbox() { 21 | params = merge( 22 | { 23 | size: _base-font-size-px, 24 | border-radius: _border-radius, 25 | }, 26 | params 27 | ); 28 | 29 | z-index = 1; 30 | border-radius = params['border-radius']; 31 | size = params['size']; 32 | 33 | position: relative; 34 | display: inline-block; 35 | _square(size); 36 | 37 | > [type="checkbox"], 38 | &__control, 39 | &__control::before, 40 | &__control::after { 41 | _position(absolute, 0, null, null, 0); 42 | display: block; 43 | _square(size); 44 | } 45 | 46 | > [type="checkbox"] { 47 | z-index: z-index; 48 | cursor: pointer; 49 | opacity: 0 !important; 50 | outline: 0; 51 | 52 | &:checked ~ ^[0]__control::after { 53 | opacity: 1; 54 | } 55 | } 56 | 57 | &__control { 58 | z-index: (z-index - 1); 59 | 60 | &::before { 61 | content: ''; 62 | background-color: #fff; 63 | border: 1px solid _light(_color-gray); 64 | border-radius: border-radius; 65 | } 66 | 67 | &::after { 68 | _ic(); 69 | content: "\e901"; 70 | opacity: 0; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/css/core/abstract/container.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Container (Fluid) 3 | // 4 | // .c-container-fluid { 5 | // _container-fluid(); 6 | // } 7 | // 8 | //
9 | // ... 10 | //
11 | // 12 | 13 | _container-fluid() { 14 | } 15 | 16 | // 17 | // Container max-width 18 | // @var length 19 | // 20 | _container-max-width ?= 1200px; 21 | 22 | // 23 | // Container 24 | // 25 | // .c-container { 26 | // _container(); 27 | // } 28 | // 29 | //
30 | // ... 31 | //
32 | // 33 | 34 | _container() { 35 | margin-right: auto; 36 | margin-left: auto; 37 | 38 | +_media-lg-only() { 39 | max-width: _px2rem(_container-max-width); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/css/core/abstract/drawer.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Drawer 3 | // 4 | // @param hash $params properties for decoration 5 | // 6 | // .c-drawer { 7 | // _drawer({ 8 | // background-color: _light(_color-black), 9 | // width: (_base-line-height * 10), 10 | // max-width: 80%, 11 | // }); 12 | // } 13 | // 14 | // import BasisDrawer from 'node_modules/getbasis/src/js/drawer.js'; 15 | // new BasisDrawer(); 16 | // 17 | //
18 | // 32 | //
33 | // 34 | // 39 | // 40 | 41 | _drawer(params = {}) { 42 | params = merge( 43 | { 44 | background-color: _light(_color-black), 45 | width: (_base-line-height * 10), 46 | max-width: 80%, 47 | }, 48 | params 49 | ); 50 | 51 | background-color = params['background-color']; 52 | width = params['width']; 53 | max-width = params['max-width']; 54 | 55 | position: relative; 56 | 57 | &__body { 58 | _position(absolute, 0, null, 0, -100%, 10); 59 | _transition(left); 60 | width: width; 61 | max-width: max-width; 62 | background-color: background-color; 63 | overflow-y: auto; 64 | 65 | &[aria-hidden="false"] { 66 | left: 0; 67 | } 68 | } 69 | 70 | &__submenu { 71 | height: 0; 72 | overflow: hidden; 73 | 74 | &[aria-hidden="false"] { 75 | height: auto; 76 | overflow: visible; 77 | } 78 | } 79 | 80 | &__toggle { 81 | cursor: pointer; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/css/core/abstract/flex-media.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Flexible Media 3 | // 4 | // .c-flex-media { 5 | // _flex-media(); 6 | // } 7 | // 8 | //
9 | //
10 | // 11 | //
12 | //
13 | // ... 14 | //
15 | //
16 | // 17 | 18 | _flex-media() { 19 | +_media-min(md) { 20 | display: flex; 21 | } 22 | 23 | &__figure { 24 | _background-image-cover(); 25 | flex: none; 26 | 27 | > img { 28 | width: 100%; 29 | 30 | +_media-min(md) { 31 | width: auto; 32 | } 33 | } 34 | 35 | > * { 36 | +_media-min(md) { 37 | vertical-align: top; 38 | margin-top: _between-lines; 39 | } 40 | } 41 | } 42 | 43 | &__body { 44 | flex: 1; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/css/core/abstract/form-control.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Form Control 3 | // 4 | // .c-form-control { 5 | // _form-control(); 6 | // } 7 | // 8 | // 9 | // 10 | 11 | _form-control() { 12 | _form-control-base-border(); 13 | _form-control-base-padding(); 14 | 15 | textarea& { 16 | height: auto; 17 | width: 100%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/css/core/abstract/hamburger-btn.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Hamburger Button 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-hamburger-btn { 7 | // _hamburger-btn({ 8 | // height: 16px, 9 | // width: 22px, 10 | // bar-height: 2px, 11 | // color: _color-text, 12 | // }); 13 | // } 14 | // 15 | // 20 | // 21 | 22 | _hamburger-btn(params = {}) { 23 | params = merge( 24 | { 25 | height: 16px, 26 | width: 22px, 27 | bar-height: 2px, 28 | color: _color-text, 29 | }, 30 | params 31 | ); 32 | 33 | height = params['height']; 34 | width = params['width']; 35 | bar-height = params['bar-height']; 36 | color = params['color']; 37 | 38 | position: relative; 39 | display: inline-block; 40 | box-sizing: content-box; 41 | cursor: pointer; 42 | height: height; 43 | width: width; 44 | 45 | &__bar { 46 | _position(absolute, null, 0, null, 0); 47 | display: block; 48 | background-color: color; 49 | height: bar-height; 50 | _transition(transform); 51 | 52 | &:nth-child(1) { 53 | top: 0; 54 | } 55 | 56 | &:nth-child(2) { 57 | top: (height / 2 - bar-height / 2); 58 | } 59 | 60 | &:nth-child(3) { 61 | top: (height - bar-height); 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/css/core/abstract/hero.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Hero 3 | // 4 | // .c-hero { 5 | // _hero(); 6 | // } 7 | // 8 | //
9 | //
10 | // ... 11 | //
12 | //
13 | // ... 14 | //
15 | //
16 | // ... 17 | //
18 | //
19 | // 20 | 21 | _hero() { 22 | display: flex; 23 | flex-direction: row; 24 | flex-wrap: wrap; 25 | position: relative; 26 | 27 | &__header { 28 | _hero__col(); 29 | align-self: flex-start; 30 | } 31 | 32 | &__content { 33 | _hero__col(); 34 | align-self: center; 35 | } 36 | 37 | &__footer { 38 | _hero__col(); 39 | align-self: flex-end; 40 | } 41 | } 42 | 43 | _hero__col() { 44 | flex: 0 1 100%; 45 | max-width: 100%; 46 | position: relative; 47 | } 48 | -------------------------------------------------------------------------------- /src/css/core/abstract/ib-row.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Grid System (Inline Block Base) 3 | // 4 | // .c-row { 5 | // _ib-row(); 6 | // &__col { 7 | // _ib-row__col(); 8 | // &--1-3 { 9 | // _ib-row__col(1, 3); 10 | // } 11 | // &--offset-1-3 { 12 | // _ib-row__col--offset(1, 3); 13 | // } 14 | // } 15 | // } 16 | // 17 | //
18 | //
19 | // ... 20 | //
21 | //
22 | // 23 | 24 | _ib-row() { 25 | display: block; 26 | font-size: 0; 27 | } 28 | 29 | // 30 | // Setting column width 31 | // 32 | // @param int columns molecule column size 33 | // @param int max-columns denominator column size 34 | // 35 | _ib-row__col(columns = null, max-columns = null) { 36 | display: inline-block; 37 | font-size: _base-font-size; 38 | text-align: left; 39 | vertical-align: top; 40 | 41 | if (! _is-null(columns) && ! _is-null(max-columns)) { 42 | width = percentage(columns / max-columns); 43 | _ib-row__col--width(width); 44 | } else { 45 | _ib-row__col--width(100%); 46 | } 47 | } 48 | 49 | // 50 | // Setting column width 51 | // 52 | // @param length width 53 | // 54 | _ib-row__col--width(width) { 55 | if (width == 'auto') { 56 | width: auto; 57 | } else { 58 | width: width; 59 | } 60 | } 61 | 62 | // 63 | // Setting column offset 64 | // 65 | // @param int columns molecule offset size 66 | // @param int max-columns denominator offset size 67 | // 68 | _ib-row__col--offset(columns = null, max-columns = null) { 69 | _row__col--offset(columns, max-columns); 70 | } 71 | 72 | // 73 | // Adding margin for the column 74 | // 75 | // @param int coefficient 76 | // 77 | _ib-row__col--margin(coefficient) { 78 | _row__col--margin(coefficient); 79 | } 80 | 81 | // 82 | // Adding margin for the row 83 | // 84 | // @param int coefficient 85 | // 86 | _ib-row--margin(coefficient) { 87 | _row--margin(coefficient); 88 | } 89 | -------------------------------------------------------------------------------- /src/css/core/abstract/ic.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Icon Font 3 | // 4 | // .c-ic { 5 | // @include _ic(); 6 | // } 7 | // 8 | 9 | _ic() { 10 | font-family: 'basis'; 11 | speak: none; 12 | font-style: normal; 13 | font-weight: normal; 14 | font-variant: normal; 15 | text-transform: none; 16 | line-height: 1; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } 20 | -------------------------------------------------------------------------------- /src/css/core/abstract/input-group.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Input Group 3 | // 4 | // .c-input-group { 5 | // _input-group(); 6 | // } 7 | // 8 | //
9 | //
@
10 | //
11 | // 12 | //
13 | // 14 | //
15 | // 16 | 17 | _input-group() { 18 | display: flex; 19 | flex-wrap: nowrap; 20 | border-radius: _border-radius; 21 | 22 | > :first-child { 23 | position: relative; 24 | border-radius: _border-radius 0 0 _border-radius; 25 | border-right: none; 26 | } 27 | 28 | > :nth-last-child(2) { 29 | position: relative; 30 | z-index: 1; 31 | } 32 | 33 | > :last-child { 34 | position: relative; 35 | z-index: 0; 36 | left: -1px; 37 | border-radius: 0 _border-radius _border-radius 0; 38 | 39 | &:hover, &:active, &:focus { 40 | z-index: 1; 41 | } 42 | } 43 | 44 | &__addon { 45 | border: 1px solid _form-control-border-color; 46 | _form-control-base-padding(); 47 | flex: none; 48 | } 49 | 50 | &__field { 51 | display: flex; 52 | flex: 1; 53 | 54 | > input[type='email'], 55 | > input[type='number'], 56 | > input[type='password'], 57 | > input[type='search'], 58 | > input[type='tel'], 59 | > input[type='text'], 60 | > input[type='url'] { 61 | _form-control(); 62 | border-radius: 0; 63 | flex: 1; 64 | width: 100%; 65 | } 66 | } 67 | 68 | &__btn { 69 | _btn({ 70 | background-color: #fff, 71 | }); 72 | _form-control-base-border(); 73 | _form-control-base-padding(); 74 | color: _color-text; 75 | flex: none; 76 | overflow: visible; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/css/core/abstract/media.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Media 3 | // 4 | // .c-media { 5 | // _media(); 6 | // } 7 | // 8 | //
9 | //
10 | // 11 | //
12 | //
13 | // ... 14 | //
15 | //
16 | // 17 | 18 | _media() { 19 | display: flex; 20 | 21 | &__figure { 22 | flex: none; 23 | _background-image-cover(); 24 | 25 | > * { 26 | vertical-align: top; 27 | margin-top: _between-lines; 28 | } 29 | } 30 | 31 | &__body { 32 | flex: 1; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/css/core/abstract/navbar.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Navbar 3 | // 4 | // .c-navbar { 5 | // _navbar(); 6 | // } 7 | // 8 | // import BasisNavbar from 'node_modules/getbasis/src/js/navbar.js'; 9 | // new BasisNavbar(); 10 | // 11 | // 24 | // 25 | 26 | _navbar() { 27 | _list-unstyled(); 28 | display: flex; 29 | flex-direction: row; 30 | flex-wrap: nowrap; 31 | 32 | &__item { 33 | position: relative; 34 | display: flex; 35 | flex: 1; 36 | 37 | > a { 38 | display: flex; 39 | width: 100%; 40 | align-items: center; 41 | justify-content: center; 42 | text-align: center; 43 | text-decoration: none; 44 | } 45 | 46 | > [data-c="navbar__submenu"] { 47 | _position(absolute, 100%, null, null, 0); 48 | } 49 | } 50 | 51 | &__subitem { 52 | position: relative; 53 | 54 | > a { 55 | display: block; 56 | text-decoration: none; 57 | } 58 | 59 | > [data-c="navbar__submenu"] { 60 | _position(absolute, 0, null, null, 100%); 61 | } 62 | } 63 | 64 | &__submenu { 65 | _list-unstyled(); 66 | min-width: 200px; 67 | opacity: 0; 68 | visibility: hidden; 69 | _transition(opacity); 70 | 71 | &[aria-hidden="false"] { 72 | visibility: visible; 73 | opacity: 1; 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/css/core/abstract/page-effect.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Page Effect 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-page-effect { 7 | // _page-effect({ 8 | // duration: .2s, 9 | // background-color: #fff, 10 | // }); 11 | // } 12 | // 13 | // import BasisPageEffect from 'node_modules/getbasis/src/js/page-effect.js'; 14 | // new BasisPageEffect(); 15 | // 16 | //
17 | //
18 | // Loading... 19 | //
20 | //
21 | // 22 | 23 | _page-effect-z-index ?= 1000000; 24 | 25 | _page-effect(params = {}) { 26 | params = merge( 27 | { 28 | duration: .2s, // Must be the same as js location duration time. 29 | background-color: #fff, 30 | }, 31 | params 32 | ); 33 | 34 | duration = params['duration']; 35 | background-color = params['background-color']; 36 | 37 | fadein-animation-name = _sanitize-animation-name(_page-effect-fadein- + join('-', values(params))); 38 | fadeout-animation-name = _sanitize-animation-name(_page-effect-fadeout- + join('-', values(params))); 39 | 40 | _position(fixed, 0, 0, 0, 0, _page-effect-z-index); 41 | background-color: background-color; 42 | 43 | &[data-page-effect="fadein"][aria-hidden="true"] { 44 | opacity: 0; 45 | z-index: -1; 46 | animation: fadein-animation-name (duration + 0.2) ease-in 0s; 47 | } 48 | 49 | &[data-page-effect="fadeout"][aria-hidden="false"] { 50 | opacity: 1; 51 | z-index: _page-effect-z-index; 52 | animation: fadeout-animation-name duration ease-in 0s; 53 | } 54 | 55 | @keyframes fadein-animation-name { 56 | 0% { 57 | z-index: _page-effect-z-index; 58 | opacity: 1; 59 | } 60 | 100% { 61 | opacity: 0; 62 | } 63 | } 64 | 65 | @keyframes fadeout-animation-name { 66 | 0% { 67 | z-index: _page-effect-z-index; 68 | opacity: 0; 69 | } 70 | 100% { 71 | opacity: 1; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/css/core/abstract/pagination.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination 3 | // 4 | // .c-pagination { 5 | // _pagination(); 6 | // } 7 | // 8 | //
9 | // 1 10 | // 2 11 | // 12 | // 99 13 | // 100 14 | //
15 | // 16 | 17 | _pagination() { 18 | &__item, 19 | &__item-link, 20 | &__item-ellipsis { 21 | display: inline-block; 22 | line-height: 1; 23 | text-decoration: none; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/core/abstract/radio.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Radio 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-radio { 7 | // _radio({ 8 | // size: _base-font-size-px, 9 | // }); 10 | // } 11 | // 12 | // 19 | // 20 | 21 | _radio(params = {}) { 22 | params = merge( 23 | { 24 | size: _base-font-size-px, 25 | }, 26 | params 27 | ); 28 | 29 | z-index: 1; 30 | size = params['size']; 31 | 32 | position: relative; 33 | display: inline-block; 34 | _square(size); 35 | 36 | > [type="radio"], 37 | &__control, 38 | &__control::before { 39 | _position(absolute, 0, null, null, 0); 40 | display: block; 41 | _square(size, 100%); 42 | } 43 | 44 | > [type="radio"] { 45 | z-index: z-index; 46 | cursor: pointer; 47 | opacity: 0 !important; 48 | outline: 0; 49 | 50 | &:checked ~ ^[0]__control::after { 51 | opacity: 1; 52 | } 53 | } 54 | 55 | &__control { 56 | z-index: (z-index - 1); 57 | 58 | &::before { 59 | content: ''; 60 | background-color: #fff; 61 | border: 1px solid _light(_color-gray); 62 | } 63 | 64 | &::after { 65 | _position(absolute, 50%, null, null, 50%); 66 | transform: translate(-50%, -50%); 67 | content: ''; 68 | display: block; 69 | background-color: _color-text; 70 | _square((size / 2), 100%); 71 | opacity: 0; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/css/core/abstract/row.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Grid System 3 | // 4 | // .c-row { 5 | // _row(); 6 | // &__col { 7 | // _row__col(); 8 | // &--1-3 { 9 | // _row__col(1, 3); 10 | // } 11 | // &--offset-1-3 { 12 | // _row__col--offset(1, 3); 13 | // } 14 | // } 15 | // } 16 | // 17 | //
18 | //
19 | // ... 20 | //
21 | //
22 | // 23 | 24 | _row() { 25 | display: flex; 26 | flex-wrap: wrap; 27 | } 28 | 29 | // 30 | // Setting column width 31 | // 32 | // @param int columns molecule column size 33 | // @param int max-columns denominator column size 34 | // 35 | _row__col(columns = null, max-columns = null) { 36 | if (columns != null && max-columns != null) { 37 | width = percentage(columns / max-columns); 38 | _row__col--width(width); 39 | } else { 40 | _row__col--width(1); 41 | } 42 | } 43 | 44 | // 45 | // Setting column width 46 | // 47 | // @param length width 48 | // 49 | _row__col--width(width) { 50 | if (width == auto) { 51 | flex: auto; 52 | max-width: 100%; 53 | } else if (width == 1) { 54 | flex: 1; 55 | max-width: 100%; 56 | } else { 57 | flex: 0 1 width; 58 | max-width: width; 59 | } 60 | } 61 | 62 | // 63 | // Setting column offset 64 | // 65 | // @param int columns molecule offset size 66 | // @param int max-columns denominator offset size 67 | // 68 | _row__col--offset(columns = null, max-columns = null) { 69 | if (columns != null && max-columns != null) { 70 | margin-left: percentage(columns / max-columns); 71 | } 72 | if (columns == 0) { 73 | margin-left: 0; 74 | } 75 | } 76 | 77 | // 78 | // Adding margin for the column 79 | // 80 | // @param int coefficient 81 | // 82 | _row__col--margin(coefficient) { 83 | _padding-right(coefficient / 2); 84 | _padding-left(coefficient / 2); 85 | _margin-bottom(coefficient); 86 | } 87 | 88 | // 89 | // Adding margin for the row 90 | // 91 | // @param int coefficient 92 | // 93 | _row--margin(coefficient) { 94 | _margin-right(coefficient / 2 * -1); 95 | _margin-left(coefficient / 2 * -1); 96 | _margin-bottom(coefficient * -1); 97 | } 98 | -------------------------------------------------------------------------------- /src/css/core/abstract/select.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Select 3 | // 4 | // .c-select { 5 | // _select(); 6 | // } 7 | // 8 | // import BasisSelect from 'node_modules/getbasis/src/js/select.js'; 9 | // new BasisSelect(); 10 | // 11 | // 12 | // 16 | // 17 | // 18 | // 19 | 20 | _select() { 21 | position: relative; 22 | display: inline-block; 23 | overflow: hidden; 24 | background-color: #fff; 25 | _form-control-base-border(); 26 | 27 | &::before { 28 | _position(absolute, 50%, (_between-lines * 2), null, null, 1); 29 | transform: translateY(-50%); 30 | _ic(); 31 | content: "\e902"; 32 | } 33 | 34 | > select, 35 | &__label { 36 | _form-control-base-padding(); 37 | _padding-right(1.5); 38 | } 39 | 40 | > select { 41 | _position(relative, null, null, null, null, 1); 42 | opacity: 0 !important; 43 | margin: 0; 44 | appearance: none; 45 | border: none; 46 | outline: 0; 47 | } 48 | 49 | &__label { 50 | _position(absolute, 0, 0, 0, 0, 0); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/css/core/abstract/spinner-circle.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Spinner (Circle) 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-spinner-circle { 7 | // _spinner-circle({ 8 | // size: 20px, 9 | // color: _light(_color-gray), 10 | // border-size: 3px, 11 | // delay: 0s, 12 | // duration: 2s, 13 | // }); 14 | // } 15 | // 16 | // 17 | // 18 | 19 | _spinner-circle(params = {}) { 20 | params = merge( 21 | { 22 | size: 20px, 23 | color: _light(_color-gray), 24 | border-size: 3px, 25 | delay: 0s, 26 | duration: 2s, 27 | }, 28 | params 29 | ); 30 | 31 | size = params['size']; 32 | color = params['color']; 33 | border-size = params['border-size']; 34 | delay = params['delay']; 35 | duration = params['duration']; 36 | 37 | animation-name = _sanitize-animation-name(_spinner-circle- + join('-', values(params))); 38 | 39 | display: inline-block; 40 | _circle(size); 41 | border: border-size solid color; 42 | border-top-color: _dark(color); 43 | animation: animation-name duration linear delay infinite; 44 | 45 | @keyframes animation-name { 46 | 0% { 47 | transform: rotate(0deg); 48 | } 49 | 100% { 50 | transform: rotate(360deg); 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/css/core/abstract/spinner-dots.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Spinner (Dots) 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-spinner-dots { 7 | // _spinner-dots({ 8 | // size: 10px, 9 | // color: _color-gray, 10 | // delay: 0s, 11 | // duration: 2s, 12 | // scale: 1.3, 13 | // }); 14 | // } 15 | // 16 | // 21 | // 22 | 23 | _spinner-dots(params = {}) { 24 | params = merge( 25 | { 26 | size: 10px, 27 | color: _color-gray, 28 | delay: 0s, 29 | duration: 2s, 30 | scale: 1.3, 31 | }, 32 | params 33 | ); 34 | 35 | size = params['size']; 36 | color = params['color']; 37 | delay = params['delay']; 38 | duration = params['duration']; 39 | scale = params['scale']; 40 | 41 | animation-name = _sanitize-animation-name(_spinner-dots- + join('-', values(params))); 42 | 43 | display: inline-block; 44 | font-size: 0; 45 | 46 | &__dot { 47 | _circle(size); 48 | display: inline-block; 49 | background-color: color; 50 | animation: animation-name duration ease-in delay infinite; 51 | 52 | &:nth-child(2) { 53 | animation-delay: .1s; 54 | } 55 | 56 | &:nth-child(3) { 57 | animation-delay: .2s; 58 | } 59 | 60 | @keyframes animation-name { 61 | 0% { 62 | transform: scale(1); 63 | } 64 | 10% { 65 | transform: scale(scale); 66 | } 67 | 20% { 68 | transform: scale(1); 69 | } 70 | 100% { 71 | transform: scale(1); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/css/core/abstract/spinner-pulse.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Spinner (Pulse) 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-spinner-pulse { 7 | // _spinner-pulse({ 8 | // height: 16px, 9 | // width: 5px, 10 | // color: _color-gray, 11 | // delay: 0s, 12 | // duration: 2s, 13 | // scale: 1.3, 14 | // }); 15 | // } 16 | // 17 | // 22 | // 23 | 24 | _spinner-pulse(params = {}) { 25 | params = merge( 26 | { 27 | height: 16px, 28 | width: 5px, 29 | color: _color-gray, 30 | delay: 0s, 31 | duration: 2s, 32 | scale: 1.4, 33 | }, 34 | params 35 | ); 36 | 37 | height = params['height']; 38 | width = params['width']; 39 | color = params['color']; 40 | delay = params['delay']; 41 | duration = params['duration']; 42 | scale = params['scale']; 43 | 44 | animation-name = _sanitize-animation-name(_spinner-pulse- + join('-', values(params))); 45 | 46 | display: inline-flex; 47 | justify-content: space-between; 48 | 49 | &__bar { 50 | height: height; 51 | width: width; 52 | display: block; 53 | background-color: color; 54 | animation: animation-name duration ease-in delay infinite; 55 | 56 | &:nth-child(2) { 57 | animation-delay: .1s; 58 | } 59 | 60 | &:nth-child(3) { 61 | animation-delay: .2s; 62 | } 63 | 64 | @keyframes animation-name { 65 | 0% { 66 | transform: scaleY(1); 67 | } 68 | 10% { 69 | transform: scaleY(scale); 70 | } 71 | 20% { 72 | transform: scaleY(1); 73 | } 74 | 100% { 75 | transform: scaleY(1); 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/css/core/core.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Prefix of basis classes 3 | // @type string 4 | // 5 | _prefix ?= '_'; 6 | -------------------------------------------------------------------------------- /src/css/core/function/color.styl: -------------------------------------------------------------------------------- 1 | // 2 | // A little brighten 3 | // 4 | // @param hex hex 5 | // @return hex 6 | // 7 | _light(hex) { 8 | return lightness(hex, (lightness(hex) + 20%)); 9 | } 10 | 11 | // 12 | // Brighten 13 | // 14 | // @param hex hex 15 | // @return hex 16 | // 17 | _lighter(hex) { 18 | return lightness(hex, (lightness(hex) + 33.5%)); 19 | } 20 | 21 | // 22 | // To very brighten 23 | // 24 | // @param hex hex 25 | // @return hex 26 | // 27 | _lightest(hex) { 28 | return lightness(hex, (lightness(hex) + 37%)); 29 | } 30 | 31 | // 32 | // A little darken 33 | // 34 | // @param hex hex 35 | // @return hex 36 | // 37 | _dark(hex) { 38 | return darken(hex, (lightness(hex) - 20%)); 39 | } 40 | 41 | // 42 | // Darken 43 | // 44 | // @param hex hex 45 | // @return hex 46 | // 47 | _darker(hex) { 48 | return darken(hex, (lightness(hex) - 33.5%)); 49 | } 50 | 51 | // 52 | // To very darken 53 | // 54 | // @param hex hex 55 | // @return hex 56 | // 57 | _darkest(hex) { 58 | return darken(hex, (lightness(hex) - 37%)); 59 | } 60 | -------------------------------------------------------------------------------- /src/css/core/function/gcd.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return greatest common divisor 3 | // 4 | // @param int a The number to be divided 5 | // @param int b The number to divide 6 | // @return int The number of the remainder 7 | // 8 | _gcd(a, b) { 9 | if (b == 0) { 10 | return a; 11 | } 12 | return _gcd(b, a % b); 13 | } 14 | -------------------------------------------------------------------------------- /src/css/core/function/hash-search.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return matched key in the hash 3 | // 4 | // @param string key 5 | // @param hash hash 6 | // @return mixed|null 7 | // 8 | _hash-search(key, hash) { 9 | for _key, _value in hash { 10 | if (_key == key) { 11 | return _key; 12 | } 13 | } 14 | return null; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/core/function/is-int.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Checks for a valid int 3 | // 4 | // @param mixed value 5 | // @return bool 6 | // 7 | _is-int(value) { 8 | if ('unit' == typeof(value) && '' == unit(value)) { 9 | return true; 10 | } 11 | 12 | return false; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/core/function/is-length.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Checks for a valid CSS length 3 | // 4 | // @param mixed value 5 | // @return bool 6 | // 7 | _is-length(value) { 8 | if ('unit' == typeof(value) && ('' != unit(value) || 0 == value)) { 9 | return true; 10 | } 11 | 12 | return false; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/core/function/is-null.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Checks for a valid null 3 | // 4 | // @param mixed value 5 | // @return bool 6 | // 7 | _is-null(value) { 8 | if (value == null) { 9 | return true; 10 | } 11 | 12 | return false; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/core/function/px2rem.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return rem from px 3 | // 4 | // @param px px 5 | // @param px base-font-size-px 6 | // @return rem 7 | // 8 | _px2rem(px, base-font-size-px = _base-font-size-px) { 9 | return unit(px / base-font-size-px, 'rem'); 10 | } 11 | -------------------------------------------------------------------------------- /src/css/core/function/rem2px.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return px from rem 3 | // 4 | // @param rem rem 5 | // @param px base-font-size-px 6 | // @return px 7 | // 8 | _rem2px(rem, base-font-size-px = _base-font-size-px) { 9 | return _strip-unit(rem) * base-font-size-px; 10 | } 11 | -------------------------------------------------------------------------------- /src/css/core/function/sanitize-animation-name.styl: -------------------------------------------------------------------------------- 1 | // 2 | // @param string name 3 | // @return string 4 | // 5 | _sanitize-animation-name(name) { 6 | name = replace('[\.\(\)\,]', '-', name); 7 | return name; 8 | } 9 | -------------------------------------------------------------------------------- /src/css/core/function/size-prefix.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return prefix for the device size 3 | // 4 | // @param string size sm|md|lg 5 | // @return string 6 | // 7 | _size-prefix(size) { 8 | prefix = '-'; 9 | 10 | if (size != 'sm') { 11 | prefix = '--' + size; 12 | } 13 | 14 | return prefix; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/core/function/space.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return the margin conforming to the rhythm 3 | // When coefficient is lenght return it as is 4 | // 5 | // @param int|length coefficient 6 | // @return length 7 | // 8 | _space(coefficient) { 9 | if (0 == coefficient) { 10 | return 0; 11 | } 12 | if ('' != unit(coefficient)) { 13 | return coefficient; 14 | } 15 | margin = (_base-line-height * coefficient); 16 | add-margin = (_base-line-height * (_margin-coefficient - 1)); 17 | space = (margin + add-margin); 18 | if (0 == space) { 19 | return 0; 20 | } 21 | return space; 22 | } 23 | -------------------------------------------------------------------------------- /src/css/core/function/strip-unit.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return numeric value that doesn't have the unit. 3 | // 4 | // @param length value numeric value 5 | // @return int 6 | // 7 | _strip-unit(value) { 8 | return remove-unit(value); 9 | } 10 | -------------------------------------------------------------------------------- /src/css/core/function/vertical-rhythm.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Return line height ( px ) for vertical rhythum 3 | // 4 | // @param px font-size 5 | // @param int coefficient 6 | // @return int 7 | // 8 | _vertical-rhythm(font-size, coefficient = 1) { 9 | between-lines = _strip-unit(_rem2px(_between-lines)); 10 | base-line-height = _strip-unit(_rem2px(_base-line-height)); 11 | base-font-size = _strip-unit(_rem2px(_base-font-size)); 12 | font-size = _strip-unit(font-size); 13 | 14 | line-height = font-size + (between-lines * coefficient); 15 | 16 | if (line-height < font-size + (between-lines * 2)) { 17 | return _vertical-rhythm(font-size, (coefficient + 1)); 18 | } else { 19 | if (font-size % base-font-size == 0 && font-size > base-font-size) { 20 | return line-height - (between-lines / 2); 21 | } 22 | return line-height; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/css/core/mixin/animate.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Bounce vertical 3 | // 4 | // @param length px bounce size 5 | // @param second|milisecond delay: 0 animate time 6 | // 7 | _bounce-vertical(px, delay = 0) { 8 | keyframe-name = _sanitize-animation-name(_bounce-vertical- + px); 9 | position: relative; 10 | animation: keyframe-name delay; 11 | 12 | @keyframes {keyframe-name} { 13 | 0% { top: (px * -1); } 14 | 25% { top: px; } 15 | 50% { top: (px / 2 * -1); } 16 | 75% { top: (px / 2); } 17 | 100% { top: 0; } 18 | } 19 | } 20 | 21 | // 22 | // Shake vertical 23 | // 24 | _shake-vertical() { 25 | _bounce-vertical(4px, .5s); 26 | } 27 | 28 | // 29 | // Vibrate vertical 30 | // 31 | _vibrate-vertical() { 32 | _bounce-vertical(2px, .2s); 33 | } 34 | 35 | // 36 | // Bounce horizontal 37 | // 38 | // @param length px bounce size 39 | // @param second|milisecond delay: 0 animate time 40 | // 41 | _bounce-horizontal(px, delay = 0) { 42 | keyframe-name = _bounce-horizontal- + px; 43 | position: relative; 44 | animation: keyframe-name delay; 45 | 46 | @keyframes {keyframe-name} { 47 | 0% { left: (px * -1); } 48 | 25% { left: px; } 49 | 50% { left: (px / 2 * -1); } 50 | 75% { left: (px / 2); } 51 | 100% { left: 0; } 52 | } 53 | } 54 | 55 | // 56 | // Shake horizontal 57 | // 58 | _shake-horizontal() { 59 | _bounce-horizontal(4px, .5s); 60 | } 61 | 62 | // 63 | // Vibrate horizontal 64 | // 65 | _vibrate-horizontal() { 66 | _bounce-horizontal(2px, .2s); 67 | } 68 | 69 | // 70 | // Bounce scale 71 | // 72 | // @param float px bounce size 73 | // @param second|milisecond delay: 0 animate time 74 | // 75 | _bounce-scale(float, delay = 0) { 76 | suffix = _strip-unit(percentage(float)); 77 | keyframe-name = _bounce-scale- + suffix; 78 | animation: keyframe-name delay ease-out; 79 | 80 | @keyframes {keyframe-name} { 81 | 0% { transform: scale(1); } 82 | 25% { transform: scale(float); } 83 | 50% { transform: scale(1); } 84 | 75% { transform: scale((1 + (float - 1) / 2)); } 85 | 100% { transform: scale(1); } 86 | } 87 | } 88 | 89 | // 90 | // Shake scale 91 | // 92 | _shake-scale() { 93 | _bounce-scale(1.2, .5s); 94 | } 95 | 96 | // 97 | // Vibrate scale 98 | // 99 | _vibrate-scale() { 100 | _bounce-scale(1.1, .2s); 101 | } 102 | 103 | // 104 | // Extend the underline from the center. 105 | // This mixin use the pseudo-elements. 106 | // 107 | _extend-underline() { 108 | _position(absolute, null, null, 0, 50%); 109 | display: block; 110 | content: ''; 111 | width: 0; 112 | height: 1px; 113 | transition: width _transition-duration _transition-function-timing; 114 | transform: translateX(-50%); 115 | background-color: _color-text; 116 | } 117 | -------------------------------------------------------------------------------- /src/css/core/mixin/background.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Background image cover + centering 3 | // 4 | _background-image-cover() { 5 | background-size: cover; 6 | background-position: 50% 50%; 7 | background-repeat: no-repeat; 8 | } 9 | 10 | // 11 | // Background image fixed 12 | // 13 | _background-image-fixed() { 14 | background-attachment: fixed; 15 | } 16 | -------------------------------------------------------------------------------- /src/css/core/mixin/balloon-triangle.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Generate balloon triangle 3 | // 4 | // @param string position 5 | // @param length size triangle size 6 | // @param hex background-color 7 | // @param length border-size 8 | // @param hex border-color 9 | // 10 | _balloon-triangle(position, size, background-color, border-size = 0, border-color = transparent) { 11 | before = size * -1; 12 | after = before; 13 | if (0 < border-size) { 14 | after = after + border-size + 1; 15 | } 16 | 17 | &::before, &::after { 18 | content: ''; 19 | display: block; 20 | 21 | if ('top' == position || 'bottom' == position) { 22 | margin-left: ((size / 2) * -1); 23 | } else if ('right' == position || 'left' == position) { 24 | margin-top: ((size / 2) * -1); 25 | } 26 | } 27 | 28 | &::before { 29 | if ('top' == position) { 30 | _position(absolute, before, null, null, 50%); 31 | _triangle-top(size, size, border-color); 32 | } else if ('right' == position) { 33 | _position(absolute, 50%, before, null, null); 34 | _triangle-right(size, size, border-color); 35 | } else if ('bottom' == position) { 36 | _position(absolute, null, null, before, 50%); 37 | _triangle-bottom(size, size, border-color); 38 | } else if ('left' == position) { 39 | _position(absolute, 50%, null, null, before); 40 | _triangle-left(size, size, border-color); 41 | } 42 | } 43 | 44 | &::after { 45 | if ('top' == position) { 46 | _position(absolute, after, null, null, 50%); 47 | _triangle-top(size, size, background-color); 48 | } else if ('right' == position) { 49 | _position(absolute, 50%, after, null, null); 50 | _triangle-right(size, size, background-color); 51 | } else if ('bottom' == position) { 52 | _position(absolute, null, null, after, 50%); 53 | _triangle-bottom(size, size, background-color); 54 | } else if ('left' == position) { 55 | _position(absolute, 50%, null, null, after); 56 | _triangle-left(size, size, background-color); 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/css/core/mixin/balloon.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Generate balloon 3 | // 4 | // @param string angle position of arrow 5 | // @param hash params properties for decoration 6 | // 7 | _balloon(angle, params = {}) { 8 | params = merge( 9 | { 10 | background-color: null, 11 | border-color: null, 12 | border-size: null, 13 | triangle-size: 10px, 14 | padding: _space(.75), 15 | }, 16 | params 17 | ); 18 | 19 | background-color = params['background-color']; 20 | border-color = params['border-color']; 21 | border-size = params['border-size']; 22 | triangle-size = params['triangle-size']; 23 | padding = params['padding']; 24 | 25 | position: relative; 26 | 27 | if (! _is-null(border-size)) { 28 | background-color: background-color; 29 | } 30 | 31 | if (! _is-null(border-size) && ! _is-null(border-color)) { 32 | border: border-size solid border-color; 33 | } 34 | 35 | if (! _is-null(padding)) { 36 | padding: padding; 37 | } 38 | 39 | _balloon-triangle( 40 | angle, 41 | triangle-size, 42 | background-color, 43 | border-size, 44 | border-color 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/css/core/mixin/circle.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Creating circle 3 | // 4 | // @param length size 5 | // 6 | _circle(size) { 7 | border-radius: 100%; 8 | height: size; 9 | width: size; 10 | overflow: hidden; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/core/mixin/clearfix.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Clearfix helper 3 | // 4 | // .clerfix { 5 | // _clearfix(); 6 | // } 7 | // 8 | //
9 | // 10 | // .... 11 | //
12 | // 13 | 14 | _clearfix() { 15 | &:before, &:after { 16 | content: " "; 17 | display: table; 18 | } 19 | 20 | &:after { 21 | clear: both; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/css/core/mixin/event.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Hover event helper 3 | // 4 | // img { 5 | // +_hover() { 6 | // opacity: .8; 7 | // } 8 | // } 9 | // 10 | 11 | _hover() { 12 | &:hover, &:focus { 13 | {block}; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/css/core/mixin/form-control-base.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Form Control border color 3 | // @var hex 4 | // 5 | _form-control-border-color ?= _light(_color-gray); 6 | 7 | // 8 | // Form Control border color when hover 9 | // @var hex 10 | // 11 | _form-control-border-color-hover ?= _color-gray; 12 | 13 | // 14 | // Form Control border color when focus 15 | // @var hex 16 | // 17 | _form-control-border-color-focus ?= #85B7D9; 18 | 19 | // 20 | // Sets padding for form controls 21 | // 22 | _form-control-base-padding() { 23 | _padding(.25, .5); 24 | } 25 | 26 | // 27 | // Sets border for form controls 28 | // 29 | _form-control-base-border() { 30 | border: 1px solid _form-control-border-color; 31 | border-radius: _border-radius; 32 | outline: 0; 33 | _transition(border); 34 | 35 | &:hover { 36 | border-color: _form-control-border-color-hover; 37 | } 38 | 39 | &:active, 40 | &:focus, 41 | &[aria-selected="true"] { 42 | border-color: _form-control-border-color-focus; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/css/core/mixin/ghost.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Ghost style 3 | // 4 | // @param hash params properties for decoration 5 | // 6 | // .c-btn-ghost { 7 | // _btn(); 8 | // _ghost({ 9 | // border-size: 1px, 10 | // color: #fff, 11 | // }); 12 | // } 13 | // 14 | // btn 15 | // 16 | 17 | _ghost(params = {}) { 18 | params = merge( 19 | { 20 | border-size : 1px, 21 | color : #fff, 22 | }, 23 | params 24 | ); 25 | 26 | background-color: transparent !important; 27 | border: params['border-size'] solid params['color']; 28 | color: params['color']; 29 | } 30 | -------------------------------------------------------------------------------- /src/css/core/mixin/list.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Unstyled list 3 | // 4 | _list-unstyled() { 5 | list-style: none; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | // 11 | // Inline list 12 | // 13 | _list-inline() { 14 | _list-unstyled(); 15 | 16 | > li { 17 | display: inline-block; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/css/core/mixin/margin.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Sets margin 3 | // 4 | // @param int coefficient-1 5 | // @param int coefficient-2 6 | // @param int coefficient-3 7 | // @param int coefficient-4 8 | // 9 | _margin(coefficient-1, coefficient-2 = null, coefficient-3 = null, coefficient-4 = null) { 10 | if (_is-null(coefficient-2) && _is-null(coefficient-3) && _is-null(coefficient-4)) { 11 | margin = _space(coefficient-1); 12 | margin: margin; 13 | } else if (_is-null(coefficient-3) && _is-null(coefficient-4)) { 14 | margin-vertical = _space(coefficient-1); 15 | margin-horizontal = _space(coefficient-2); 16 | margin: margin-vertical margin-horizontal; 17 | } else if (_is-null(coefficient-4)) { 18 | margin-top = _space(coefficient-1); 19 | margin-horizontal = _space(coefficient-2); 20 | margin-bottom = _space(coefficient-3); 21 | margin: margin-top margin-horizontal margin-bottom; 22 | } else { 23 | margin-top = _space(coefficient-1); 24 | margin-right = _space(coefficient-2); 25 | margin-bottom = _space(coefficient-3); 26 | margin-left = _space(coefficient-4); 27 | margin: margin-top margin-right margin-bottom margin-left; 28 | } 29 | } 30 | 31 | // 32 | // Sets margin-top 33 | // 34 | // @param int coefficient 35 | // 36 | _margin-top(coefficient) { 37 | margin-top: _space(coefficient); 38 | } 39 | 40 | // 41 | // Sets margin-right 42 | // 43 | // @param int coefficient 44 | // 45 | _margin-right(coefficient) { 46 | margin-right: _space(coefficient); 47 | } 48 | 49 | // 50 | // Sets margin-bottom 51 | // 52 | // @param int coefficient 53 | // 54 | _margin-bottom(coefficient) { 55 | margin-bottom: _space(coefficient); 56 | } 57 | 58 | // 59 | // Sets margin-left 60 | // 61 | // @param int coefficient 62 | // 63 | _margin-left(coefficient) { 64 | margin-left: _space(coefficient); 65 | } 66 | -------------------------------------------------------------------------------- /src/css/core/mixin/overlay.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Overlay 3 | // 4 | // @param hex hex 5 | // @param int opacity 6 | // 7 | _overlay(hex, opacity = 1) { 8 | position: relative; 9 | 10 | &::before { 11 | _position(absolute, 0, 0, 0, 0); 12 | content: ''; 13 | 14 | if (1 == opacity) { 15 | background-color: hex; 16 | } else { 17 | background-color: rgba(hex, opacity); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/css/core/mixin/padding.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Setspadding 3 | // 4 | // @param int coefficient-1 5 | // @param int coefficient-2 6 | // @param int coefficient-3 7 | // @param int coefficient-4 8 | // 9 | _padding(coefficient-1, coefficient-2 = null, coefficient-3 = null, coefficient-4 = null) { 10 | if (_is-null(coefficient-2) && _is-null(coefficient-3) && _is-null(coefficient-4)) { 11 | padding = _space(coefficient-1); 12 | padding: padding; 13 | } else if (_is-null(coefficient-3) && _is-null(coefficient-4)) { 14 | padding-vertical = _space(coefficient-1); 15 | padding-horizontal = _space(coefficient-2); 16 | padding: padding-vertical padding-horizontal; 17 | } else if (_is-null(coefficient-4)) { 18 | padding-top = _space(coefficient-1); 19 | padding-horizontal = _space(coefficient-2); 20 | padding-bottom = _space(coefficient-3); 21 | padding: padding-top padding-horizontal padding-bottom; 22 | } else { 23 | padding-top = _space(coefficient-1); 24 | padding-right = _space(coefficient-2); 25 | padding-bottom = _space(coefficient-3); 26 | padding-left = _space(coefficient-4); 27 | padding: padding-top padding-right padding-bottom padding-left; 28 | } 29 | } 30 | 31 | // 32 | // Retrun padding-top 33 | // 34 | // @param int coefficient 35 | // 36 | _padding-top(coefficient) { 37 | padding-top: _space(coefficient); 38 | } 39 | 40 | // 41 | // Retrun padding-right 42 | // 43 | // @param int coefficient 44 | // 45 | _padding-right(coefficient) { 46 | padding-right: _space(coefficient); 47 | } 48 | 49 | // 50 | // Retrun padding-bottom 51 | // 52 | // @param int coefficient 53 | // 54 | _padding-bottom(coefficient) { 55 | padding-bottom: _space(coefficient); 56 | } 57 | 58 | // 59 | // Retrun padding-left 60 | // 61 | // @param int coefficient 62 | // 63 | _padding-left(coefficient) { 64 | padding-left: _space(coefficient); 65 | } 66 | -------------------------------------------------------------------------------- /src/css/core/mixin/position.styl: -------------------------------------------------------------------------------- 1 | // 2 | // The position shorthand 3 | // 4 | // @param string position 5 | // @param length top 6 | // @param length right 7 | // @param length bottom 8 | // @param length left 9 | // @param int z-index 10 | // 11 | _position(position, top = null, right = null, bottom = null, left = null, z-index = null) { 12 | position: position; 13 | 14 | if (_is-length(top)) { 15 | top: top; 16 | } 17 | 18 | if (_is-length(right)) { 19 | right: right; 20 | } 21 | 22 | if (_is-length(bottom)) { 23 | bottom: bottom; 24 | } 25 | 26 | if (_is-length(left)) { 27 | left: left; 28 | } 29 | 30 | if (_is-int(z-index)) { 31 | z-index: _strip-unit(z-index); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/css/core/mixin/responsive.styl: -------------------------------------------------------------------------------- 1 | // 2 | // min-width media query 3 | // 4 | // @param size|length min width 5 | // 6 | _media-min(min) { 7 | size = _hash-search(min, _sizes); 8 | if (min == 'sm') { 9 | {block}; 10 | } else if (size != null) { 11 | @media (min-width: _sizes[min]) { 12 | {block}; 13 | } 14 | } else if (min == _sizes.sm) { 15 | {block}; 16 | } else { 17 | @media (min-width: min) { 18 | {block}; 19 | } 20 | } 21 | } 22 | 23 | // 24 | // max-width media query 25 | // 26 | // @param size|length max width 27 | // 28 | _media-max(max) { 29 | size = _hash-search(max, _sizes); 30 | if (size != null) { 31 | @media (max-width: _sizes-max[max]) { 32 | {block}; 33 | } 34 | } else { 35 | @media (max-width: max) { 36 | {block}; 37 | } 38 | } 39 | } 40 | 41 | // 42 | // Media query for smartphone size 43 | // 44 | _media-sm-only() { 45 | +_media-max(_sizes-max.sm) { 46 | {block}; 47 | } 48 | } 49 | 50 | // 51 | // Media query for tablet size 52 | // 53 | _media-md-only() { 54 | @media (min-width: _sizes.md) and (max-width: _sizes-max.md) { 55 | {block}; 56 | } 57 | } 58 | 59 | // 60 | // Media query for pc size 61 | // 62 | _media-lg-only() { 63 | +_media-min(_sizes.lg) { 64 | {block}; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/css/core/mixin/square.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Creating square 3 | // 4 | // @param length size 5 | // @param length border-radius 6 | // 7 | _square(size, border-radius = null) { 8 | height: size; 9 | width: size; 10 | 11 | if (_is-length(border-radius)) { 12 | border-radius: border-radius; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/css/core/mixin/transition.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Transition helper 3 | // 4 | // @param string property 5 | // 6 | // a { 7 | // _transition(all); 8 | // color: #f00; 9 | // &:hover { 10 | // color: #f9c; 11 | // } 12 | // } 13 | // 14 | _transition(property = all) { 15 | transition: property _transition-duration _transition-function-timing; 16 | } 17 | 18 | // 19 | // Transition helper 20 | // 21 | // a { 22 | // _transition-all(); 23 | // color: #f00; 24 | // &:hover { 25 | // color: #f9c; 26 | // } 27 | // } 28 | // 29 | _transition-all() { 30 | transition: all _transition-duration _transition-function-timing; 31 | } 32 | 33 | // 34 | // Transition helper 35 | // 36 | // .c-progress-bar { 37 | // _transition-size(); 38 | // height: 10px; 39 | // width: 10px; 40 | // &:hover { 41 | // width: 20px; 42 | // } 43 | // } 44 | // 45 | _transition-size() { 46 | transition: width _transition-duration _transition-function-timing, 47 | height _transition-duration _transition-function-timing; 48 | } 49 | 50 | // 51 | // Transition helper 52 | // 53 | // img { 54 | // _transition-opacity(); 55 | // opacity: 1; 56 | // &:hover { 57 | // opacity: .8; 58 | // } 59 | // } 60 | // 61 | _transition-opacity() { 62 | transition: opacity _transition-duration _transition-function-timing; 63 | backface-visibility: hidden; 64 | } 65 | -------------------------------------------------------------------------------- /src/css/core/mixin/triangle.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Generate top triangle style 3 | // 4 | // @param length width 5 | // @param length height 6 | // @param hex color 7 | // 8 | // .c-triangle-top { 9 | // _triangle-top(10px, 10px, #000); 10 | // } 11 | // 12 | _triangle-top(width, height, color) { 13 | _square(0); 14 | border-style: solid; 15 | border-width: 0 (width / 2) height (width / 2); 16 | border-color: transparent transparent color transparent; 17 | } 18 | 19 | // 20 | // Generate right triangle style 21 | // 22 | // @param length width 23 | // @param length height 24 | // @param hex color 25 | // 26 | // .c-triangle-right { 27 | // _triangle-right(10px, 10px, #000); 28 | // } 29 | // 30 | _triangle-right(width, height, color) { 31 | _square(0); 32 | border-style: solid; 33 | border-width: (height / 2) 0 (height / 2) width; 34 | border-color: transparent transparent transparent color; 35 | } 36 | 37 | // 38 | // Generate bottom triangle style 39 | // 40 | // @param length width 41 | // @param length height 42 | // @param hex color 43 | // 44 | // .c-triangle-bottom { 45 | // _triangle-bottom(10px, 10px, #000); 46 | // } 47 | // 48 | _triangle-bottom(width, height, color) { 49 | _square(0); 50 | border-style: solid; 51 | border-width: height (width / 2) 0 (width / 2); 52 | border-color: color transparent transparent transparent; 53 | } 54 | 55 | // 56 | // Generate left triangle style 57 | // 58 | // @param length width 59 | // @param length height 60 | // @param hex color 61 | // 62 | // .c-triangle-left { 63 | // _triangle-left(10px, 10px, #000); 64 | // } 65 | // 66 | _triangle-left(width, height, color) { 67 | _square(0); 68 | border-style: solid; 69 | border-width: (height / 2) width (height / 2) 0; 70 | border-color: transparent color transparent transparent; 71 | } 72 | -------------------------------------------------------------------------------- /src/css/core/mixin/typography.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Sets px and rem font-sizes 3 | // 4 | // @param rem|px font-size 5 | // 6 | _font-size(font-size) { 7 | unit = unit(font-size); 8 | if (unit == 'px') { 9 | font-size: font-size; 10 | font-size: _px2rem(font-size); 11 | } else if (unit == 'rem') { 12 | font-size: _rem2px(font-size); 13 | font-size: font-size; 14 | } else { 15 | font-size: font-size; 16 | } 17 | } 18 | 19 | // 20 | // Sets line-height for vertical rhythum 21 | // 22 | // @param rem|px font-size font size 23 | // 24 | _line-height(font-size) { 25 | unit = unit(font-size); 26 | px = font-size; 27 | if (unit == 'rem') { 28 | px = _rem2px(font-size); 29 | } 30 | line-height: (_vertical-rhythm(px) / _strip-unit(px)); 31 | } 32 | 33 | // 34 | // Sets px and rem font-sizes and line-height for vertical rhythum 35 | // 36 | // @param rem|px font-size 37 | // 38 | // h1 { 39 | // _font-size-line-height(1.5rem); 40 | // } 41 | // 42 | _font-size-line-height(font-size) { 43 | unit = unit(font-size); 44 | rem = font-size; 45 | if (unit == 'px') { 46 | rem = _px2rem(font-size); 47 | } 48 | _font-size(rem); 49 | _line-height(rem); 50 | } 51 | -------------------------------------------------------------------------------- /src/css/core/variable/animate.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Animation time 3 | // @type second|milisecond 4 | // 5 | _transition-duration ?= .1s; 6 | 7 | // 8 | // Transition function timing 9 | // @type string 10 | // @see http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp 11 | // 12 | _transition-function-timing ?= ease-out; 13 | -------------------------------------------------------------------------------- /src/css/core/variable/border-radius.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Border radius 3 | // @type length 4 | // 5 | _border-radius ?= 3px; 6 | -------------------------------------------------------------------------------- /src/css/core/variable/color.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Default text color 3 | // @type hex 4 | // 5 | _color-text ?= #333; 6 | 7 | // 8 | // Default black color 9 | // @type hex 10 | // 11 | _color-black ?= #111; 12 | 13 | // 14 | // Default gray color 15 | // @type hex 16 | // 17 | _color-gray ?= #999; 18 | 19 | // 20 | // Default red color 21 | // @type hex 22 | // 23 | _color-red ?= #e74c3c; 24 | -------------------------------------------------------------------------------- /src/css/core/variable/font.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Font path 3 | // @type string 4 | // 5 | _font-path ?= '../font'; 6 | 7 | @font-face { 8 | font-family: 'basis'; 9 | src: url(_font-path + '/basis.eot'); 10 | src: url(_font-path + '/basis.eot#iefix') format('embedded-opentype'), 11 | url(_font-path + '/basis.ttf') format('truetype'), 12 | url(_font-path + '/basis.woff') format('woff'), 13 | url(_font-path + '/basis.svg#basis') format('svg'); 14 | font-weight: normal; 15 | font-style: normal; 16 | } 17 | -------------------------------------------------------------------------------- /src/css/core/variable/responsive.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Default font size 3 | // If html { font-size: 62.5% }, set 10px 4 | // @type px 5 | // 6 | _base-font-size-px ?= 16px; 7 | 8 | // 9 | // Default font size 10 | // @type rem 11 | // 12 | _base-font-size = 1rem; 13 | 14 | // 15 | // Between the character and line of line-height 16 | // @type rem 17 | // 18 | _between-lines ?= (_base-font-size / 4); 19 | 20 | // 21 | // Default line height 22 | // @type rem 23 | // 24 | _base-line-height ?= (_base-font-size + _between-lines * 2); 25 | 26 | // 27 | // Margin coefficient 28 | // @type int 29 | // 30 | _margin-coefficient ?= 1; 31 | 32 | // 33 | // The minimum number of columns 34 | // @type int 35 | // 36 | _min-columns ?= 1; 37 | 38 | // 39 | // The maximum number of columns 40 | // @type int 41 | // 42 | _max-columns ?= 12; 43 | 44 | // 45 | // Array of breakpoints 46 | // @type array 47 | // 48 | _sizes ?= { 49 | sm: 0, 50 | md: (_px2rem(640px) / _px2rem(_base-font-size-px)), 51 | lg: (_px2rem(1024px) / _px2rem(_base-font-size-px)) 52 | }; 53 | 54 | // 55 | // Array of breakpoints 56 | // @type array 57 | // 58 | _sizes-max ?= { 59 | sm: (_sizes.md - (1em / _strip-unit(_base-font-size-px))), 60 | md: (_sizes.lg - (1em / _strip-unit(_base-font-size-px))) 61 | }; 62 | -------------------------------------------------------------------------------- /src/css/core/variable/typography.styl: -------------------------------------------------------------------------------- 1 | // 2 | // HTML element margin coefficient; 3 | // @type int 4 | // 5 | _base-margin-bottom ?= 1; 6 | 7 | // 8 | // Heading element font size scale; 9 | // @type int 10 | // 11 | _h1-font-size-scale ?= 2; 12 | _h2-font-size-scale ?= 2; 13 | _h3-font-size-scale ?= 1.5; 14 | _h4-font-size-scale ?= 1.25; 15 | _h5-font-size-scale ?= 1; 16 | _h6-font-size-scale ?= 1; 17 | 18 | // 19 | // Heading element margin coefficient; 20 | // @type int 21 | // 22 | _h1-margin-top ?= 0; 23 | _h1-margin-bottom ?= _base-margin-bottom; 24 | _h2-margin-top ?= _base-margin-bottom * 2; 25 | _h2-margin-bottom ?= _base-margin-bottom; 26 | _h3-margin-top ?= _base-margin-bottom * 1.5; 27 | _h3-margin-bottom ?= _base-margin-bottom; 28 | _h4-margin-top ?= _base-margin-bottom * 1.25; 29 | _h4-margin-bottom ?= _base-margin-bottom; 30 | _h5-margin-top ?= _base-margin-bottom; 31 | _h5-margin-bottom ?= _base-margin-bottom * .5; 32 | _h6-margin-top ?= _base-margin-bottom; 33 | _h6-margin-bottom ?= _base-margin-bottom * .5; 34 | 35 | // 36 | // Default font family 37 | // @type string 38 | // 39 | _font-family ?= "Helvetica Neue", Helvetica, Arial, sans-serif; 40 | -------------------------------------------------------------------------------- /src/css/foundation/base.styl: -------------------------------------------------------------------------------- 1 | * { 2 | &, &:before, &:after { 3 | box-sizing: border-box; 4 | } 5 | } 6 | 7 | html, body { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | html { 13 | font-size: (_strip-unit(_base-font-size-px) / 16 * 100%); 14 | } 15 | 16 | body { 17 | color: _color-text; 18 | font-family: _font-family; 19 | _font-size-line-height(_base-font-size); 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | code, kbd, pre, samp { 25 | _font-size-line-height(_base-font-size-px - 2); 26 | font-family: '_', monospace; 27 | } 28 | 29 | input, textarea, keygen, select, button { 30 | font-family: _font-family; 31 | } 32 | 33 | input, textarea, optgroup, select, button { 34 | _line-height(_base-font-size); 35 | } 36 | 37 | img { 38 | height: auto; 39 | max-width: 100%; 40 | vertical-align: middle; 41 | } 42 | 43 | p, ul, ol, dl, table, pre, blockquote { 44 | _margin(0, 0, _base-margin-bottom); 45 | } 46 | 47 | figure { 48 | _margin(0, 0, _base-margin-bottom); 49 | } 50 | 51 | h1, h2, h3, h4, h5, h6 { 52 | font-weight: bold; 53 | } 54 | 55 | h1 { 56 | _font-size-line-height(_base-font-size * _h1-font-size-scale); 57 | _margin-top(_h1-margin-top); 58 | _margin-bottom(_h1-margin-bottom); 59 | } 60 | 61 | h2 { 62 | _font-size-line-height(_base-font-size * _h2-font-size-scale); 63 | _margin-top(_h2-margin-top); 64 | _margin-bottom(_h2-margin-bottom); 65 | } 66 | 67 | h3 { 68 | _font-size-line-height(_base-font-size * _h3-font-size-scale); 69 | _margin-top(_h3-margin-top); 70 | _margin-bottom(_h3-margin-bottom); 71 | } 72 | 73 | h4 { 74 | _font-size-line-height(_base-font-size * _h4-font-size-scale); 75 | _margin-top(_h4-margin-top); 76 | _margin-bottom(_h4-margin-bottom); 77 | } 78 | 79 | h5 { 80 | _font-size-line-height(_base-font-size * _h5-font-size-scale); 81 | _margin-top(_h5-margin-top); 82 | _margin-bottom(_h5-margin-bottom); 83 | } 84 | 85 | h6 { 86 | _font-size-line-height(_base-font-size * _h6-font-size-scale); 87 | _margin-top(_h6-margin-top); 88 | _margin-bottom(_h6-margin-bottom); 89 | } 90 | 91 | ol ol, ol ul, ul ol, ul ul { 92 | margin-bottom: 0; 93 | } 94 | 95 | dt { 96 | font-weight: bold; 97 | } 98 | dd { 99 | margin-left: 0; 100 | } 101 | 102 | blockquote { 103 | border-left: (_base-font-size / 2) solid _lighter(_color-gray); 104 | margin-left: 0; 105 | padding: _base-font-size 0 _base-font-size _base-font-size; 106 | 107 | :last-child { 108 | margin-bottom: 0; 109 | } 110 | 111 | footer { 112 | color: _darker(_color-gray); 113 | font-size: 90%; 114 | } 115 | } 116 | 117 | code { 118 | background-color: _lighter(_color-red); 119 | border-radius: _border-radius; 120 | color: _color-red; 121 | padding: 2px 4px; 122 | } 123 | 124 | pre { 125 | background-color: _lightest(_color-gray); 126 | border: 1px solid _lighter(_color-gray); 127 | border-radius: _border-radius; 128 | padding: _base-font-size; 129 | overflow: auto; 130 | 131 | code { 132 | background-color: transparent; 133 | border: none; 134 | color: _color-text; 135 | font-size: 100%; 136 | padding: 0; 137 | } 138 | } 139 | 140 | label { 141 | cursor: pointer; 142 | } 143 | -------------------------------------------------------------------------------- /src/css/object/component/alert.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Alert 4 | category: 5 | - object/component 6 | - object/component/alert 7 | --- 8 | 9 | ```html 10 | 13 | ``` 14 | */ 15 | 16 | .{_prefix}c-alert { 17 | _alert({ 18 | background-color: #fff, 19 | border: 1px solid _light(_color-gray), 20 | }); 21 | 22 | border-radius: _border-radius; 23 | } 24 | -------------------------------------------------------------------------------- /src/css/object/component/balloon.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Balloon (Top) 4 | category: 5 | - object/component 6 | - object/component/balloon 7 | --- 8 | 9 | ```html 10 |
11 | ... 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}c-balloon-top { 17 | _balloon-top({ 18 | background-color: #fff, 19 | border-color: _light(_color-gray), 20 | border-size: 1px, 21 | }); 22 | 23 | border-radius: _border-radius; 24 | } 25 | 26 | /* 27 | --- 28 | name: Balloon (Right) 29 | category: 30 | - object/component 31 | - object/component/balloon 32 | --- 33 | 34 | ```html 35 |
36 | ... 37 |
38 | ``` 39 | */ 40 | 41 | .{_prefix}c-balloon-right { 42 | _balloon-right({ 43 | background-color: #fff, 44 | border-color: _light(_color-gray), 45 | border-size: 1px, 46 | }); 47 | 48 | border-radius: _border-radius; 49 | } 50 | 51 | /* 52 | --- 53 | name: Balloon (Bottom) 54 | category: 55 | - object/component 56 | - object/component/balloon 57 | --- 58 | 59 | ```html 60 |
61 | ... 62 |
63 | ``` 64 | */ 65 | 66 | .{_prefix}c-balloon-bottom { 67 | _balloon-bottom({ 68 | background-color: #fff, 69 | border-color: _light(_color-gray), 70 | border-size: 1px, 71 | }); 72 | 73 | border-radius: _border-radius; 74 | } 75 | 76 | /* 77 | --- 78 | name: Balloon (Left) 79 | category: 80 | - object/component 81 | - object/component/balloon 82 | --- 83 | 84 | ```html 85 |
86 | ... 87 |
88 | ``` 89 | */ 90 | 91 | .{_prefix}c-balloon-left { 92 | _balloon-left({ 93 | background-color: #fff, 94 | border-color: _light(_color-gray), 95 | border-size: 1px, 96 | }); 97 | 98 | border-radius: _border-radius; 99 | } 100 | -------------------------------------------------------------------------------- /src/css/object/component/breadcrumbs.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Breadcrumbs 4 | category: 5 | - object/component 6 | - object/component/breadcrumbs 7 | --- 8 | 9 | ```html 10 |
    11 |
  1. ...
    2. 12 |
  2. ...
    3. 13 |
14 | ``` 15 | */ 16 | 17 | .{_prefix}c-breadcrumbs { 18 | _list-unstyled(); 19 | 20 | &__item { 21 | display: inline; 22 | 23 | &:nth-child(n + 2) { 24 | &::before { 25 | _margin(0, 5px); 26 | _ic(); 27 | content: "\e900"; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/object/component/btn.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Button 4 | category: 5 | - object/component 6 | - object/component/btn 7 | --- 8 | 9 | ```html 10 | btn 11 | ``` 12 | ```html 13 | btn 14 | ``` 15 | ```html 16 | btn 17 | ``` 18 | */ 19 | 20 | .{_prefix}c-btn { 21 | _btn({ 22 | background-color: #fff, 23 | border: 1px solid _light(_color-gray), 24 | }); 25 | 26 | color: _color-text; 27 | 28 | &--block { 29 | display: block; 30 | } 31 | 32 | &--ghost { 33 | _ghost(); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/css/object/component/card.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Card 4 | category: 5 | - object/component 6 | - object/component/card 7 | --- 8 | 9 | ```html 10 |
11 |
12 | 13 |
14 |
15 | ... 16 |
17 |
18 | ... 19 |
20 |
21 | ``` 22 | */ 23 | 24 | .{_prefix}c-card { 25 | _card({ 26 | background-color: #fff, 27 | }); 28 | 29 | box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .1), 30 | 0 1px 1px 0 rgba(0, 0, 0, .05); 31 | 32 | &__action { 33 | border-top: 1px solid _lighter(_color-gray); 34 | _padding(.5, .75); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/css/object/component/checkbox.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Checkbox 4 | category: 5 | - object/component 6 | - object/component/checkbox 7 | --- 8 | 9 | ```html 10 | 17 | ``` 18 | */ 19 | 20 | .{_prefix}c-checkbox { 21 | _checkbox({ 22 | size: _base-font-size-px, 23 | border-radius: _border-radius, 24 | }); 25 | } 26 | -------------------------------------------------------------------------------- /src/css/object/component/container.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Container (Fluid) 4 | category: 5 | - object/component 6 | - object/component/container 7 | --- 8 | 9 | ```html 10 |
11 | ... 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}c-container-fluid { 17 | container-margin = _base-line-height; 18 | 19 | _container-fluid(); 20 | padding-right: (container-margin / 2); 21 | padding-left: (container-margin / 2); 22 | 23 | +_media-min(md) { 24 | padding-right: container-margin; 25 | padding-left: container-margin; 26 | } 27 | } 28 | 29 | /* 30 | --- 31 | name: Container 32 | category: object/component 33 | --- 34 | 35 | ```html 36 |
37 | ... 38 |
39 | ``` 40 | */ 41 | 42 | .{_prefix}c-container { 43 | @extend .{_prefix}c-container-fluid; 44 | _container(); 45 | } 46 | -------------------------------------------------------------------------------- /src/css/object/component/copyright.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Copyright 4 | category: 5 | - object/component 6 | - object/component/copyright 7 | --- 8 | 9 | ```html 10 |
11 | ... 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}c-copyright { 17 | } 18 | -------------------------------------------------------------------------------- /src/css/object/component/drawer.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Drawer 4 | category: 5 | - object/component 6 | - object/component/drawer 7 | --- 8 | 9 | ```html 10 |
11 | 27 |
28 | 29 | 34 | ``` 35 | */ 36 | 37 | .{_prefix}c-drawer { 38 | item-padding-coefficient = 1; 39 | 40 | _drawer(); 41 | 42 | &__menu { 43 | _list-unstyled(); 44 | } 45 | 46 | &__item, &__subitem { 47 | position: relative; 48 | color: #fff; 49 | 50 | > a { 51 | color: #fff; 52 | text-decoration: none; 53 | _transition(background-color); 54 | 55 | +_hover() { 56 | color: #ccc; 57 | } 58 | } 59 | } 60 | 61 | &__item { 62 | _padding(.5, item-padding-coefficient, 0); 63 | } 64 | 65 | &__submenu { 66 | _list-unstyled(); 67 | _margin(0, (item-padding-coefficient * -1), 0, 0); 68 | padding-left: 1em; 69 | } 70 | 71 | &__subitem { 72 | _padding(.5, item-padding-coefficient, 0, 0); 73 | } 74 | 75 | &__toggle { 76 | _position(absolute, _space(.5), 5px, 0); 77 | _square(_base-line-height); 78 | display: flex; 79 | align-items: center; 80 | justify-content: center; 81 | } 82 | 83 | &__body--fixed { 84 | position: fixed; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/css/object/component/entries.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Entries 4 | category: 5 | - object/component 6 | - object/component/entries 7 | --- 8 | 9 | ```html 10 | 15 | ``` 16 | */ 17 | 18 | .{_prefix}c-entries { 19 | _list-unstyled(); 20 | 21 | &__item { 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/css/object/component/entry.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Entry 4 | category: 5 | - object/component 6 | - object/component/entry 7 | --- 8 | 9 | ```html 10 |
11 |
12 |

...

13 |
14 | ... 15 |
16 |
17 |
18 | ``` 19 | */ 20 | 21 | .{_prefix}c-entry { 22 | &__header { 23 | } 24 | 25 | &__title { 26 | } 27 | 28 | &__content { 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/css/object/component/flex-media.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Flexible media 4 | category: 5 | - object/component 6 | - object/component/flex-media 7 | --- 8 | 9 | ```html 10 |
11 |
12 | 13 |
14 |
15 | ... 16 |
17 |
18 | ``` 19 | */ 20 | 21 | .{_prefix}c-flex-media { 22 | _flex-media(); 23 | 24 | &__figure { 25 | _margin(0, 0, .5); 26 | 27 | +_media-min(md) { 28 | _margin(0, 1, 0, 0); 29 | } 30 | } 31 | 32 | &__body { 33 | } 34 | 35 | &--reverse { 36 | .{_prefix}c-flex-media__figure { 37 | +_media-min(md) { 38 | _margin(0, 0, 0, 1); 39 | order: 1; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/css/object/component/form-control.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Form Control 4 | category: 5 | - object/component 6 | - object/component/form-control 7 | --- 8 | 9 | ```html 10 | 11 | ``` 12 | ```html 13 | 14 | ``` 15 | ```html 16 | 17 | ``` 18 | ```html 19 | 20 | ``` 21 | */ 22 | 23 | .{_prefix}c-form-control { 24 | _form-control(); 25 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .035); 26 | 27 | &[disabled] { 28 | background-color: _lighter(_color-gray); 29 | cursor: not-allowed; 30 | } 31 | 32 | &[readonly] { 33 | background-color: _lighter(_color-gray); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/css/object/component/hamburger-btn.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Hamberger Button 4 | category: 5 | - object/component 6 | - object/component/hamberger-btn 7 | --- 8 | 9 | ```html 10 | 15 | ``` 16 | */ 17 | 18 | .{_prefix}c-hamburger-btn { 19 | height = 16px; 20 | bar-height = 2px; 21 | 22 | _hamburger-btn({ 23 | height: height, 24 | bar-height: bar-height, 25 | }); 26 | 27 | &[aria-expanded="true"] > &__bar { 28 | &:nth-child(1), &:nth-child(3) { 29 | top: (height / 2 - bar-height / 2); 30 | } 31 | 32 | &:nth-child(1) { 33 | transform: rotate(45deg); 34 | } 35 | 36 | &:nth-child(2) { 37 | background-color: transparent; 38 | } 39 | 40 | &:nth-child(3) { 41 | transform: rotate(-45deg); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/css/object/component/hero.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Hero 4 | category: 5 | - object/component 6 | - object/component/hero 7 | --- 8 | 9 | ```html 10 |
11 |
12 | ... 13 |
14 |
15 | ... 16 |
17 |
18 | ... 19 |
20 |
21 | ``` 22 | */ 23 | 24 | .{_prefix}c-hero { 25 | _hero(); 26 | 27 | &--full { 28 | height: 100vh; 29 | } 30 | 31 | &--cover { 32 | _background-image-cover(); 33 | } 34 | 35 | &--overlay { 36 | _overlay(#000, .7); 37 | } 38 | 39 | &--fixed { 40 | +_media-lg-only() { 41 | _background-image-fixed(); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/css/object/component/ic.styl: -------------------------------------------------------------------------------- 1 | selector = '[class^="' + _prefix + 'ic-"], [class*=" ' + _prefix + 'ic-"]'; 2 | {selector} { 3 | _ic(); 4 | } 5 | 6 | /* 7 | --- 8 | name: Icon (Angle Right) 9 | category: 10 | - object/component 11 | - object/component/icon-font 12 | --- 13 | 14 | ```html 15 | 16 | ``` 17 | */ 18 | 19 | .{_prefix}ic-angle-right::before { 20 | content: "\e900"; 21 | } 22 | 23 | /* 24 | --- 25 | name: Icon (Check) 26 | category: 27 | - object/component 28 | - object/component/icon-font 29 | --- 30 | 31 | ```html 32 | 33 | ``` 34 | */ 35 | 36 | .{_prefix}ic-check::before { 37 | content: "\e901"; 38 | } 39 | 40 | /* 41 | --- 42 | name: Icon (Angle Down) 43 | category: 44 | - object/component 45 | - object/component/icon-font 46 | --- 47 | 48 | ```html 49 | 50 | ``` 51 | */ 52 | 53 | .{_prefix}ic-angle-down::before { 54 | content: "\e902"; 55 | } 56 | -------------------------------------------------------------------------------- /src/css/object/component/input-group.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Input Group 4 | category: 5 | - object/component 6 | - object/component/input-group 7 | --- 8 | 9 | ```html 10 |
11 |
@
12 |
13 | 14 |
15 | 16 |
17 | ``` 18 | */ 19 | 20 | .{_prefix}c-input-group { 21 | _input-group(); 22 | 23 | &__addon { 24 | background-color: _lighter(_color-gray); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/css/object/component/media.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Media 4 | category: 5 | - object/component 6 | - object/component/media 7 | --- 8 | 9 | ```html 10 |
11 |
12 | 13 |
14 |
15 | ... 16 |
17 |
18 | ``` 19 | */ 20 | 21 | .{_prefix}c-media { 22 | _media(); 23 | 24 | &__figure { 25 | _margin(0, 1, 0, 0); 26 | } 27 | 28 | &__body { 29 | > .{_prefix}c-media { 30 | _margin-top(1); 31 | } 32 | } 33 | 34 | &--middle { 35 | align-items: center; 36 | } 37 | 38 | &--reverse { 39 | .{_prefix}c-media__figure { 40 | _margin(0, 0, 0, 1); 41 | order: 1; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/css/object/component/meta.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Meta 4 | category: 5 | - object/component 6 | - object/component/meta 7 | --- 8 | 9 | ```html 10 | 15 | ``` 16 | */ 17 | 18 | .{_prefix}c-meta { 19 | _list-unstyled(); 20 | _font-size-line-height(_base-font-size-px - 2); 21 | 22 | &, a { 23 | color: _color-gray; 24 | } 25 | 26 | &__item { 27 | display: inline; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/object/component/navbar.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: navbar 4 | category: 5 | - object/component 6 | - object/component/navbar 7 | --- 8 | 9 | ```html 10 | 29 | ``` 30 | ```html 31 | 50 | ``` 51 | */ 52 | 53 | .{_prefix}c-navbar { 54 | _navbar(); 55 | 56 | &--auto { 57 | .{_prefix}c-navbar__item { 58 | flex: 0 1 auto; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/css/object/component/page-effect.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Page Effect 4 | category: 5 | - object/component 6 | - object/component/page-effect 7 | --- 8 | 9 | ```html 10 |
11 |
12 | Loading... 13 |
14 |
15 | ``` 16 | */ 17 | 18 | .{_prefix}c-page-effect { 19 | _page-effect(); 20 | 21 | &__item { 22 | _position(absolute, 50%, null, null, 50%); 23 | transform: translate(-50%, -50%); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/object/component/page-header.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Page Header 4 | category: 5 | - object/component 6 | - object/component/page-header 7 | --- 8 | 9 | ```html 10 |
11 |

...

12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}c-page-header { 17 | _padding(2, 0); 18 | 19 | &__title { 20 | margin: 0; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/object/component/pagination.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Paginatiion 4 | category: 5 | - object/component 6 | - object/component/paginatiion 7 | --- 8 | 9 | ```html 10 |
11 | 1 12 | 2 13 | 14 | 99 15 | 100 16 |
17 | ``` 18 | */ 19 | 20 | .{_prefix}c-pagination { 21 | _pagination(); 22 | } 23 | -------------------------------------------------------------------------------- /src/css/object/component/radio.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Radio 4 | category: 5 | - object/component 6 | - object/component/radio 7 | --- 8 | 9 | ```html 10 | 17 | ``` 18 | */ 19 | 20 | .{_prefix}c-radio { 21 | _radio({ 22 | size: _base-font-size-px, 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /src/css/object/component/row.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Grid System 4 | category: 5 | - object/component 6 | - object/component/grid-system 7 | --- 8 | 9 | ```html 10 |
11 |
12 | 1 13 |
14 |
15 | 2 16 |
17 |
18 | 3 19 |
20 |
21 | ``` 22 | ```html 23 |
24 |
25 | 1 26 |
27 |
28 | 2 29 |
30 |
31 | 3 32 |
33 |
34 | ``` 35 | ```html 36 |
37 |
38 | 1 39 |
40 |
41 | 2 42 |
43 |
44 | 3 45 |
46 |
47 | ``` 48 | ```html 49 |
50 |
51 | 1 52 |
53 |
54 | 2 55 |
56 |
57 | ``` 58 | ```html 59 |
60 |
61 | 1 62 |
63 |
64 | 2 65 |
66 |
67 | ``` 68 | ```html 69 |
70 |
71 | 1 72 |
73 |
74 | 2 75 |
76 |
77 | ``` 78 | ```html 79 |
80 |
81 | 1 82 |
83 |
84 | 2 85 |
86 |
87 | ``` 88 | ```html 89 |
90 |
91 | 1 92 |
93 |
94 | 2 95 |
96 |
97 | ``` 98 | ```html 99 |
100 |
101 | 1 102 |
103 |
104 | 2
105 | 2 106 |
107 |
108 | 3
109 | 3
110 | 3 111 |
112 |
113 | ``` 114 | ```html 115 |
116 |
117 | 1 118 |
119 |
120 | 2
121 | 2 122 |
123 |
124 | 3
125 | 3
126 | 3 127 |
128 |
129 | ``` 130 | ```html 131 |
132 |
133 | 1 134 |
135 |
136 | 2
137 | 2 138 |
139 |
140 | 3
141 | 3
142 | 3 143 |
144 |
145 | ``` 146 | ```html 147 |
148 |
149 | 1 150 |
151 |
152 | 2
153 | 2 154 |
155 |
156 | 3
157 | 3
158 | 3 159 |
160 |
161 | ``` 162 | ```html 163 |
164 |
165 | 1 166 |
167 |
168 | 2 169 |
170 |
171 | 3 172 |
173 |
174 | ``` 175 | ```html 176 |
177 |
178 | 1 179 |
180 |
181 | 2 182 |
183 |
184 | 3 185 |
186 |
187 | ``` 188 | ```html 189 |
190 |
191 | 1 192 |
193 |
194 | 2 195 |
196 |
197 | 3 198 |
199 |
200 | ``` 201 | ```html 202 |
203 |
204 | 1 205 |
206 |
207 | 2 208 |
209 |
210 | 3 211 |
212 |
213 | ``` 214 | ```html 215 |
216 |
217 | 1 218 |
219 |
220 | 2
221 | 2 222 |
223 |
224 | 3
225 | 3
226 | 3 227 |
228 |
229 | ``` 230 | */ 231 | 232 | .{_prefix}c-row { 233 | _row(); 234 | 235 | &__col { 236 | _row__col(null, null); 237 | } 238 | 239 | &--reverse { 240 | flex-direction: row-reverse; 241 | } 242 | 243 | for size, screen-min in _sizes { 244 | +_media-min(screen-min) { 245 | prefix = _size-prefix(size); 246 | 247 | &{prefix}-nowrap { 248 | flex-wrap: nowrap; 249 | } 250 | 251 | &{prefix}-left { 252 | justify-content: flex-start; 253 | } 254 | 255 | &{prefix}-right { 256 | justify-content: flex-end; 257 | } 258 | 259 | &{prefix}-center { 260 | justify-content: center; 261 | } 262 | 263 | &{prefix}-between { 264 | justify-content: space-between; 265 | } 266 | 267 | &{prefix}-around { 268 | justify-content: space-around; 269 | } 270 | 271 | &{prefix}-top { 272 | align-items: flex-start; 273 | } 274 | 275 | &{prefix}-bottom { 276 | align-items: flex-end; 277 | } 278 | 279 | &{prefix}-middle { 280 | align-items: center; 281 | } 282 | 283 | &{prefix}-baseline { 284 | align-items: baseline; 285 | } 286 | 287 | &{prefix}-collapse { 288 | _row--margin(0); 289 | 290 | > .{_prefix}c-row__col { 291 | _row__col--margin(0); 292 | } 293 | } 294 | 295 | &{prefix}-margin { 296 | _row--margin(1); 297 | 298 | > .{_prefix}c-row__col { 299 | _row__col--margin(1); 300 | } 301 | 302 | &-s { 303 | _row--margin(.5); 304 | 305 | > .{_prefix}c-row__col { 306 | _row__col--margin(.5); 307 | } 308 | } 309 | 310 | &-l { 311 | _row--margin(2); 312 | 313 | > .{_prefix}c-row__col { 314 | _row__col--margin(2); 315 | } 316 | } 317 | } 318 | 319 | &{prefix}-fill { 320 | > .{_prefix}c-row__col { 321 | display: flex; 322 | 323 | > * { 324 | _row__col--width(100%); 325 | } 326 | } 327 | } 328 | } 329 | } 330 | } 331 | 332 | for size, screen-min in _sizes { 333 | +_media-min(screen-min) { 334 | prefix = _size-prefix(size); 335 | 336 | for max_columns in range(1, _max-columns) { 337 | for i in range(1, max_columns) { 338 | gcd = _gcd(i, max_columns); 339 | 340 | if (gcd == 1) { 341 | $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd} { 342 | _row__col(i, max_columns); 343 | } 344 | 345 | $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd} { 346 | _row__col--offset(i, max_columns); 347 | } 348 | } 349 | } 350 | } 351 | 352 | $_bs-item{prefix}-full { 353 | _row__col--width(100%); 354 | } 355 | 356 | .{_prefix}c-row__col { 357 | &{prefix}-auto { 358 | _row__col--width(auto); 359 | } 360 | 361 | &{prefix}-justify { 362 | _row__col--width(1); 363 | } 364 | 365 | &{prefix}-offset-0 { 366 | _row__col--offset(0); 367 | } 368 | 369 | &{prefix}-shrink { 370 | flex-grow: 0; 371 | } 372 | 373 | &{prefix}-fit { 374 | flex: 0 1 auto; 375 | } 376 | } 377 | } 378 | } 379 | 380 | .{_prefix}c-row__col { 381 | for size, screen-min in _sizes { 382 | +_media-min(screen-min) { 383 | prefix = _size-prefix(size); 384 | 385 | for max_columns in range(_min-columns, _max-columns) { 386 | for i in range(1, max_columns) { 387 | gcd = _gcd(i, max_columns); 388 | 389 | &{prefix}-{i}-{max_columns} { 390 | if (i != max_columns) { 391 | @extend $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd}; 392 | } else { 393 | @extend $_bs-item{prefix}-full; 394 | } 395 | } 396 | 397 | if (i < max_columns) { 398 | &{prefix}-offset-{i}-{max_columns} { 399 | @extend $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd}; 400 | } 401 | } 402 | } 403 | } 404 | } 405 | } 406 | } 407 | -------------------------------------------------------------------------------- /src/css/object/component/section.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Section 4 | category: 5 | - object/component 6 | - object/component/section 7 | --- 8 | 9 | ```html 10 |
11 |

...

12 |
13 | ... 14 |
15 |
16 | ``` 17 | */ 18 | 19 | .{_prefix}c-section { 20 | _padding(2, 0); 21 | 22 | &__title { 23 | } 24 | 25 | &__content { 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/css/object/component/select.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Select 4 | category: 5 | - object/component 6 | - object/component/select 7 | --- 8 | 9 | ```html 10 | 11 | 16 | 17 | 18 | ``` 19 | */ 20 | 21 | .{_prefix}c-select { 22 | _select(); 23 | 24 | &--block { 25 | display: block; 26 | 27 | > select { 28 | width: 100%; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/object/component/site-branding.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Site Branding 4 | category: 5 | - object/component 6 | - object/component/site-branding 7 | --- 8 | 9 | ```html 10 |
11 |

...

12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}c-site-branding { 17 | &__title { 18 | margin: 0; 19 | _font-size-line-height(_base-font-size * 2); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/object/component/spinner-circle.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Spinner (Circle) 4 | category: 5 | - object/component 6 | - object/component/spinner-circle 7 | --- 8 | 9 | ```html 10 | 11 | ``` 12 | */ 13 | 14 | .{_prefix}c-spinner-circle { 15 | _spinner-circle(); 16 | } 17 | -------------------------------------------------------------------------------- /src/css/object/component/spinner-dots.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Spinner (Dots) 4 | category: 5 | - object/component 6 | - object/component/spinner-dots 7 | --- 8 | 9 | ```html 10 | 15 | ``` 16 | */ 17 | 18 | .{_prefix}c-spinner-dots { 19 | _spinner-dots(); 20 | 21 | &__dot { 22 | margin: 0 4px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/css/object/component/spinner-pulse.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: Spinner (Pulse) 4 | category: 5 | - object/component 6 | - object/component/spinner-pulse 7 | --- 8 | 9 | ```html 10 | 15 | ``` 16 | */ 17 | 18 | .{_prefix}c-spinner-pulse { 19 | _spinner-pulse(); 20 | 21 | &__bar { 22 | margin: 0 3px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/css/object/utility/animate.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-animate 4 | category: 5 | - object/utility 6 | - object/utility/animate 7 | --- 8 | 9 | ```html 10 | 16 |
17 | ``` 18 | */ 19 | 20 | .{_prefix}u-animate { 21 | _transition-all(); 22 | } 23 | 24 | /* 25 | --- 26 | name: ._u-animate-size 27 | category: 28 | - object/utility 29 | - object/utility/animate 30 | --- 31 | 32 | ```html 33 | 38 |
39 | ``` 40 | */ 41 | 42 | .{_prefix}u-animate-size { 43 | _transition-size(); 44 | } 45 | 46 | /* 47 | --- 48 | name: ._u-animate-opacity 49 | category: 50 | - object/utility 51 | - object/utility/animate 52 | --- 53 | 54 | ```html 55 | 60 |
61 | ``` 62 | */ 63 | 64 | .{_prefix}u-animate-opacity { 65 | _transition-opacity(); 66 | } 67 | 68 | /* 69 | --- 70 | name: ._u-animate-shake-vertical 71 | category: 72 | - object/utility 73 | - object/utility/animate 74 | --- 75 | 76 | ```html 77 |
78 | ``` 79 | */ 80 | 81 | .{_prefix}u-animate-shake-vertical { 82 | +_hover() { 83 | _shake-vertical(); 84 | } 85 | } 86 | 87 | /* 88 | --- 89 | name: ._u-animate-vibrate-vertical 90 | category: 91 | - object/utility 92 | - object/utility/animate 93 | --- 94 | 95 | ```html 96 |
97 | ``` 98 | */ 99 | 100 | .{_prefix}u-animate-vibrate-vertical { 101 | +_hover() { 102 | _vibrate-vertical(); 103 | } 104 | } 105 | 106 | /* 107 | --- 108 | name: ._u-animate-shake-horizontal 109 | category: 110 | - object/utility 111 | - object/utility/animate 112 | --- 113 | 114 | ```html 115 |
116 | ``` 117 | */ 118 | 119 | .{_prefix}u-animate-shake-horizontal { 120 | +_hover() { 121 | _shake-horizontal(); 122 | } 123 | } 124 | 125 | /* 126 | --- 127 | name: ._u-animate-vibrate-horizontal 128 | category: 129 | - object/utility 130 | - object/utility/animate 131 | --- 132 | 133 | ```html 134 |
135 | ``` 136 | */ 137 | 138 | .{_prefix}u-animate-vibrate-horizontal { 139 | +_hover() { 140 | _vibrate-horizontal(); 141 | } 142 | } 143 | 144 | /* 145 | --- 146 | name: ._u-animate-shake-scale 147 | category: 148 | - object/utility 149 | - object/utility/animate 150 | --- 151 | 152 | ```html 153 |
154 | ``` 155 | */ 156 | 157 | .{_prefix}u-animate-shake-scale { 158 | +_hover() { 159 | _shake-scale(); 160 | } 161 | } 162 | 163 | /* 164 | --- 165 | name: ._u-animate-vibrate-scale 166 | category: 167 | - object/utility 168 | - object/utility/animate 169 | --- 170 | 171 | ```html 172 |
173 | ``` 174 | */ 175 | 176 | .{_prefix}u-animate-vibrate-scale { 177 | +_hover() { 178 | _vibrate-scale(); 179 | } 180 | } 181 | 182 | /* 183 | --- 184 | name: ._u-animate-extend-underline 185 | category: 186 | - object/utility 187 | - object/utility/animate 188 | --- 189 | 190 | ```html 191 | menu 192 | ``` 193 | */ 194 | 195 | .{_prefix}u-animate-extend-underline { 196 | position: relative; 197 | 198 | &::after { 199 | _extend-underline(); 200 | } 201 | 202 | +_hover() { 203 | &::after { 204 | width: 100%; 205 | } 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /src/css/object/utility/clearfix.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-clearfix 4 | category: 5 | - object/utility 6 | - object/utility/clearfix 7 | --- 8 | 9 | ```html 10 |
11 | 12 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 13 |
14 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 15 | ``` 16 | */ 17 | 18 | .{_prefix}u-clearfix { 19 | _clearfix(); 20 | } 21 | -------------------------------------------------------------------------------- /src/css/object/utility/hidden.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-hidden-sm 4 | category: 5 | - object/utility 6 | - object/utility/hidden 7 | --- 8 | 9 | ```html 10 |
11 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}u-hidden-sm { 17 | +_media-sm-only() { 18 | display: none !important; 19 | } 20 | } 21 | 22 | /* 23 | --- 24 | name: ._u-hidden-md 25 | category: 26 | - object/utility 27 | - object/utility/hidden 28 | --- 29 | 30 | ```html 31 |
32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 |
34 | ``` 35 | */ 36 | 37 | .{_prefix}u-hidden-md { 38 | +_media-md-only() { 39 | display: none !important; 40 | } 41 | } 42 | 43 | /* 44 | --- 45 | name: ._u-hidden-lg 46 | category: 47 | - object/utility 48 | - object/utility/hidden 49 | --- 50 | 51 | ```html 52 |
53 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 54 |
55 | ``` 56 | */ 57 | 58 | .{_prefix}u-hidden-lg { 59 | +_media-lg-only() { 60 | display: none !important; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/css/object/utility/img.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: _u-img-2x 4 | category: 5 | - object/utility 6 | - object/utility/img 7 | --- 8 | 9 | ```html 10 | 11 | ``` 12 | */ 13 | 14 | .{_prefix}u-img-2x { 15 | zoom: 0.5 !important; 16 | } 17 | -------------------------------------------------------------------------------- /src/css/object/utility/pull.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-pull-right 4 | category: 5 | - object/utility 6 | - object/utility/pull 7 | --- 8 | 9 | ```html 10 | 11 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 12 | ``` 13 | */ 14 | 15 | .{_prefix}u-pull-right { 16 | float: right !important; 17 | } 18 | 19 | /* 20 | --- 21 | name: ._u-pull-left 22 | category: 23 | - object/utility 24 | - object/utility/pull 25 | --- 26 | 27 | ```html 28 | 29 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 30 | ``` 31 | */ 32 | 33 | .{_prefix}u-pull-left { 34 | float: left !important; 35 | } 36 | -------------------------------------------------------------------------------- /src/css/object/utility/text.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-text-center 4 | category: 5 | - object/utility 6 | - object/utility/text 7 | --- 8 | 9 | ```html 10 |
11 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}u-text-center { 17 | text-align: center !important; 18 | } 19 | 20 | /* 21 | --- 22 | name: ._u-text-right 23 | category: 24 | - object/utility 25 | - object/utility/text 26 | --- 27 | 28 | ```html 29 |
30 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 31 |
32 | ``` 33 | */ 34 | 35 | .{_prefix}u-text-right { 36 | text-align: right !important; 37 | } 38 | 39 | /* 40 | --- 41 | name: ._u-text-left 42 | category: 43 | - object/utility 44 | - object/utility/text 45 | --- 46 | 47 | ```html 48 |
49 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 50 |
51 | ``` 52 | */ 53 | 54 | .{_prefix}u-text-left { 55 | text-align: left !important; 56 | } 57 | -------------------------------------------------------------------------------- /src/css/object/utility/visible.styl: -------------------------------------------------------------------------------- 1 | /* 2 | --- 3 | name: ._u-visible-sm-inline 4 | category: 5 | - object/utility 6 | - object/utility/visible 7 | --- 8 | 9 | ```html 10 |
11 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 12 |
13 | ``` 14 | */ 15 | 16 | .{_prefix}u-visible-sm-inline { 17 | +_media-sm-only() { 18 | display: inline !important; 19 | } 20 | } 21 | 22 | /* 23 | --- 24 | name: ._u-visible-sm-inline-block 25 | category: 26 | - object/utility 27 | - object/utility/visible 28 | --- 29 | 30 | ```html 31 |
32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 |
34 | ``` 35 | */ 36 | 37 | .{_prefix}u-sm-inline-block { 38 | +_media-sm-only() { 39 | display: inline-block !important; 40 | } 41 | } 42 | 43 | /* 44 | --- 45 | name: ._u-visible-sm-block 46 | category: 47 | - object/utility 48 | - object/utility/visible 49 | --- 50 | 51 | ```html 52 |
53 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 54 |
55 | ``` 56 | */ 57 | 58 | .{_prefix}u-sm-block { 59 | +_media-sm-only() { 60 | display: block !important; 61 | } 62 | } 63 | 64 | /* 65 | --- 66 | name: ._u-visible-sm-flex 67 | category: 68 | - object/utility 69 | - object/utility/visible 70 | --- 71 | 72 | ```html 73 |
74 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 75 |
76 | ``` 77 | */ 78 | 79 | .{_prefix}u-sm-flex { 80 | +_media-sm-only() { 81 | display: flex !important; 82 | } 83 | } 84 | 85 | /* 86 | --- 87 | name: ._u-visible-md-inline 88 | category: 89 | - object/utility 90 | - object/utility/visible 91 | --- 92 | 93 | ```html 94 |
95 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 96 |
97 | ``` 98 | */ 99 | 100 | .{_prefix}u-md-inline { 101 | +_media-md-only() { 102 | display: inline !important; 103 | } 104 | } 105 | 106 | /* 107 | --- 108 | name: ._u-visible-md-inline-block 109 | category: 110 | - object/utility 111 | - object/utility/visible 112 | --- 113 | 114 | ```html 115 |
116 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 117 |
118 | ``` 119 | */ 120 | 121 | .{_prefix}u-md-inline-block { 122 | +_media-md-only() { 123 | display: inline-block !important; 124 | } 125 | } 126 | 127 | /* 128 | --- 129 | name: ._u-visible-md-block 130 | category: 131 | - object/utility 132 | - object/utility/visible 133 | --- 134 | 135 | ```html 136 |
137 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 138 |
139 | ``` 140 | */ 141 | 142 | .{_prefix}u-md-block { 143 | +_media-md-only() { 144 | display: block !important; 145 | } 146 | } 147 | 148 | /* 149 | --- 150 | name: ._u-visible-md-flex 151 | category: 152 | - object/utility 153 | - object/utility/visible 154 | --- 155 | 156 | ```html 157 |
158 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 159 |
160 | ``` 161 | */ 162 | 163 | .{_prefix}u-md-flex { 164 | +_media-md-only() { 165 | display: flex !important; 166 | } 167 | } 168 | 169 | /* 170 | --- 171 | name: ._u-visible-lg-inline 172 | category: 173 | - object/utility 174 | - object/utility/visible 175 | --- 176 | 177 | ```html 178 |
179 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 180 |
181 | ``` 182 | */ 183 | 184 | .{_prefix}u-lg-inline { 185 | +_media-lg-only() { 186 | display: inline !important; 187 | } 188 | } 189 | 190 | /* 191 | --- 192 | name: ._u-visible-lg-inline-block 193 | category: 194 | - object/utility 195 | - object/utility/visible 196 | --- 197 | 198 | ```html 199 |
200 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 201 |
202 | ``` 203 | */ 204 | 205 | .{_prefix}u-lg-inline-block { 206 | +_media-lg-only() { 207 | display: inline-block !important; 208 | } 209 | } 210 | 211 | /* 212 | --- 213 | name: ._u-visible-lg-block 214 | category: 215 | - object/utility 216 | - object/utility/visible 217 | --- 218 | 219 | ```html 220 |
221 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 222 |
223 | ``` 224 | */ 225 | 226 | .{_prefix}u-lg-block { 227 | +_media-lg-only() { 228 | display: block !important; 229 | } 230 | } 231 | 232 | /* 233 | --- 234 | name: ._u-visible-lg-flex 235 | category: 236 | - object/utility 237 | - object/utility/visible 238 | --- 239 | 240 | ```html 241 |
242 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 243 |
244 | ``` 245 | */ 246 | 247 | .{_prefix}u-lg-flex { 248 | +_media-lg-only() { 249 | display: flex !important; 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/basis-ie9.styl: -------------------------------------------------------------------------------- 1 | @import '../../core/*'; 2 | @import '../../core/function/*'; 3 | @import '../../core/variable/*'; 4 | @import '../../core/mixin/*'; 5 | @import '../../core/abstract/*'; 6 | @import 'object/component/*'; 7 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/object/component/flex-media.styl: -------------------------------------------------------------------------------- 1 | .{_prefix}c-flex-media { 2 | +_media-min(md) { 3 | _clearfix(); 4 | } 5 | 6 | &__figure { 7 | +_media-min(md) { 8 | display: block; 9 | float: left; 10 | } 11 | } 12 | 13 | &__body { 14 | +_media-min(md) { 15 | display: block; 16 | overflow: hidden; 17 | } 18 | } 19 | 20 | &--reverse { 21 | +_media-min(md) { 22 | > .{_prefix}c-flex-media__figure { 23 | float: right; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/object/component/input-group.styl: -------------------------------------------------------------------------------- 1 | .{_prefix}c-input-group { 2 | display: table; 3 | width: 100%; 4 | 5 | &__addon, &__field, &__btn { 6 | display: table-cell; 7 | vertical-align: middle; 8 | } 9 | 10 | &__field { 11 | width: 100%; 12 | } 13 | 14 | &__control { 15 | padding-top: 10px; 16 | padding-bottom: 10px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/object/component/media.styl: -------------------------------------------------------------------------------- 1 | .{_prefix}c-media { 2 | _clearfix(); 3 | 4 | &__figure { 5 | display: block; 6 | float: left; 7 | } 8 | 9 | &__body { 10 | display: block; 11 | overflow: hidden; 12 | } 13 | 14 | &--middle { 15 | // Not supported. 16 | } 17 | 18 | &--reverse { 19 | > .{_prefix}c-media__figure { 20 | float: right; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/object/component/navbar.styl: -------------------------------------------------------------------------------- 1 | .{_prefix}c-navbar { 2 | display: table; 3 | table-layout: fixed; 4 | width: 100%; 5 | 6 | &__item { 7 | display: table-cell; 8 | text-align: center; 9 | vertical-align: middle; 10 | 11 | > a { 12 | display: block; 13 | } 14 | } 15 | 16 | &--auto { 17 | table-layout: auto; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/css/plugin/basis-ie9/object/component/row.styl: -------------------------------------------------------------------------------- 1 | .{_prefix}c-row { 2 | display: table; 3 | table-layout: fixed; 4 | width: 100%; 5 | font-size: 0; 6 | 7 | &__col { 8 | font-size: _base-font-size-px; 9 | display: table-cell; 10 | text-align: left; 11 | vertical-align: top; 12 | } 13 | 14 | &--reverse { 15 | direction: rtl; 16 | 17 | > .{_prefix}c-row__col { 18 | direction: ltr; 19 | } 20 | } 21 | 22 | for size, screen-min in _sizes { 23 | +_media-min(screen-min) { 24 | prefix = _size-prefix(size); 25 | 26 | &{prefix}-nowrap { 27 | > .{_prefix}c-row__col { 28 | display: table-cell; 29 | } 30 | } 31 | 32 | &{prefix}-left { 33 | text-align: left; 34 | 35 | > .{_prefix}c-row__col { 36 | display: inline-block; 37 | } 38 | } 39 | 40 | &{prefix}-right { 41 | text-align: right; 42 | 43 | > .{_prefix}c-row__col { 44 | display: inline-block; 45 | } 46 | } 47 | 48 | &{prefix}-center { 49 | text-align: center; 50 | 51 | > .{_prefix}c-row__col { 52 | display: inline-block; 53 | } 54 | } 55 | 56 | &{prefix}-between { 57 | display: block; 58 | text-align: justify; 59 | text-justify: distribute-all-lines; 60 | 61 | &:after { 62 | content: ''; 63 | display: inline-block; 64 | width: 100%; 65 | } 66 | 67 | > .{_prefix}c-row__col { 68 | display: inline-block; 69 | } 70 | } 71 | 72 | &{prefix}-around { 73 | // Not supported. 74 | } 75 | 76 | &{prefix}-top { 77 | > .{_prefix}c-row__col { 78 | display: inline-block; 79 | vertical-align: top; 80 | } 81 | } 82 | 83 | &{prefix}-bottom { 84 | > .{_prefix}c-row__col { 85 | display: inline-block; 86 | vertical-align: bottom; 87 | } 88 | } 89 | 90 | &{prefix}-middle { 91 | > .{_prefix}c-row__col { 92 | display: inline-block; 93 | vertical-align: middle; 94 | } 95 | } 96 | 97 | &{prefix}-baseline { 98 | > .{_prefix}c-row__col { 99 | display: inline-block; 100 | vertical-align: baseline; 101 | } 102 | } 103 | 104 | &{prefix}-collapse { 105 | // Depending on the base style. 106 | } 107 | 108 | &{prefix}-margin { 109 | // Depending on the base style. 110 | &, &-s, &-l { 111 | display: block; 112 | width: auto; 113 | } 114 | } 115 | 116 | &{prefix}-fill { 117 | // Not supported. 118 | > .{_prefix}c-row__col { 119 | display: inline-block; 120 | } 121 | } 122 | } 123 | } 124 | } 125 | 126 | for size, screen-min in _sizes { 127 | +_media-min(screen-min) { 128 | prefix = _size-prefix(size); 129 | 130 | for max_columns in range(1, _max-columns) { 131 | for i in range(1, max_columns) { 132 | gcd = _gcd(i, max_columns); 133 | 134 | if (gcd == 1) { 135 | $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd} { 136 | display: inline-block; 137 | width: percentage(i / max_columns); 138 | } 139 | 140 | $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd} { 141 | // Depending on the base style. 142 | } 143 | } 144 | } 145 | } 146 | 147 | $_bs-item{prefix}-full { 148 | display: inline-block; 149 | width: 100%; 150 | } 151 | 152 | .{_prefix}c-row__col { 153 | &{prefix}-auto { 154 | // Not supported. 155 | } 156 | 157 | &{prefix}-justify { 158 | // Not supported. 159 | } 160 | 161 | &{prefix}-offset-0 { 162 | // Depending on the base style. 163 | } 164 | 165 | &{prefix}-shrink { 166 | // Not supported. 167 | } 168 | 169 | &{prefix}-fit { 170 | display: inline-block; 171 | width: auto; 172 | } 173 | } 174 | } 175 | } 176 | 177 | .{_prefix}c-row__col { 178 | for size, screen-min in _sizes { 179 | +_media-min(screen-min) { 180 | prefix = _size-prefix(size); 181 | 182 | for max_columns in range(_min-columns, _max-columns) { 183 | for i in range(1, max_columns) { 184 | gcd = _gcd(i, max_columns); 185 | 186 | &{prefix}-{i}-{max_columns} { 187 | if (i != max_columns) { 188 | @extend $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd}; 189 | } else { 190 | @extend $_bs-item{prefix}-full; 191 | } 192 | } 193 | 194 | if (i < max_columns) { 195 | &{prefix}-offset-{i}-{max_columns} { 196 | @extend $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd}; 197 | } 198 | } 199 | } 200 | } 201 | } 202 | } 203 | } 204 | -------------------------------------------------------------------------------- /src/font/basis.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getbasis/basis/34437d65b4e1de65330ed99c656516e87e65292b/src/font/basis.eot -------------------------------------------------------------------------------- /src/font/basis.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/font/basis.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getbasis/basis/34437d65b4e1de65330ed99c656516e87e65292b/src/font/basis.ttf -------------------------------------------------------------------------------- /src/font/basis.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/getbasis/basis/34437d65b4e1de65330ed99c656516e87e65292b/src/font/basis.woff -------------------------------------------------------------------------------- /src/js/basis.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import BasisDrawer from './drawer.js'; 4 | new BasisDrawer(); 5 | 6 | import BasisNavbar from './navbar.js'; 7 | new BasisNavbar(); 8 | 9 | import BasisPageEffect from './page-effect.js'; 10 | new BasisPageEffect(); 11 | 12 | import BasisSelect from './select.js'; 13 | new BasisSelect(); 14 | -------------------------------------------------------------------------------- /src/js/drawer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import $ from 'jquery'; 4 | 5 | export default class BasisDrawer { 6 | constructor() { 7 | this.setIdForSubmenu(); 8 | this.setListener(); 9 | } 10 | 11 | setListener() { 12 | const btns = $('[data-c="drawer-btn"][aria-controls]'); 13 | btns.each((i, e) => { 14 | const btn = $(e); 15 | const drawer = $(`#${btn.attr('aria-controls')}`); 16 | const container = drawer.parent('[data-c="drawer"]'); 17 | 18 | container.on('click', (event) => { 19 | this.close(btn); 20 | this.hidden(drawer); 21 | this.close(drawer.find('[data-c="drawer__toggle"]')); 22 | this.hidden(drawer.find('[data-c="drawer__submenu"]')); 23 | }); 24 | 25 | drawer.on('click', (event) => { 26 | event.stopPropagation(); 27 | }); 28 | 29 | btn.on('click', (event) => { 30 | event.preventDefault(); 31 | this.toggleMenu(btn); 32 | event.stopPropagation(); 33 | }); 34 | 35 | $(window).on('resize', (event) => { 36 | this.hidden(drawer); 37 | this.close(btn); 38 | }); 39 | }); 40 | 41 | const toggleBtns = $('[data-c="drawer__toggle"][aria-controls]'); 42 | toggleBtns.each((i, e) => { 43 | const toggleBtn = $(e); 44 | const submenu = $(`#${toggleBtn.attr('aria-controls')}`); 45 | toggleBtn.on('click', (event) => { 46 | event.preventDefault(); 47 | event.stopPropagation(); 48 | this.toggleMenu(toggleBtn); 49 | }); 50 | }); 51 | } 52 | 53 | toggleMenu(btn) { 54 | const menu = $(`#${btn.attr('aria-controls')}`); 55 | if ('false' == btn.attr('aria-expanded')) { 56 | this.open(btn); 57 | this.show(menu); 58 | } else { 59 | this.close(btn); 60 | this.hidden(menu); 61 | this.close(menu.find('[data-c="drawer__toggle"]')); 62 | this.hidden(menu.find('[data-c="drawer__submenu"]')); 63 | } 64 | } 65 | 66 | open(target) { 67 | target.attr('aria-expanded', 'true'); 68 | } 69 | 70 | close(target) { 71 | target.attr('aria-expanded', 'false'); 72 | } 73 | 74 | show(target) { 75 | target.attr('aria-hidden', 'false'); 76 | } 77 | 78 | hidden(target) { 79 | target.attr('aria-hidden', 'true'); 80 | } 81 | 82 | setIdForSubmenu() { 83 | $('[data-c="drawer__submenu"][aria-hidden]').each((i, e) => { 84 | const random = Math.floor((Math.random() * (9999999 - 1000000)) + 1000000); 85 | const time = new Date().getTime(); 86 | const id = `drawer-${time}${random}`; 87 | const submenu = $(e); 88 | const toggleBtn = submenu.siblings('[data-c="drawer__toggle"]'); 89 | if (submenu.length && toggleBtn.length) { 90 | submenu.attr('id', id); 91 | toggleBtn.attr('aria-controls', `${id}`); 92 | } 93 | }); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/js/navbar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import $ from 'jquery'; 4 | 5 | export default class BasisNavbar { 6 | constructor() { 7 | this.items = $('[data-c="navbar__item"][aria-haspopup="true"], [data-c="navbar__subitem"][aria-haspopup="true"]'); 8 | this.setListener(); 9 | } 10 | 11 | setListener() { 12 | this.items.each((i, e) => { 13 | const item = $(e); 14 | item.on('mouseover focus', (event) => { 15 | this.show(item.children('[data-c="navbar__submenu"]')); 16 | }); 17 | 18 | item.on('mouseleave', (event) => { 19 | this.hidden(item.children('[data-c="navbar__submenu"]')); 20 | }); 21 | }); 22 | } 23 | 24 | show(submenu) { 25 | submenu.attr('aria-hidden', 'false'); 26 | } 27 | 28 | hidden(submenu) { 29 | submenu.attr('aria-hidden', 'true'); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/js/page-effect.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import $ from 'jquery'; 4 | 5 | export default class BasisPageEffect { 6 | constructor(params) { 7 | this.params = $.extend({ 8 | duration: 200 9 | }, params); 10 | this.container = $('[data-c="page-effect"]'); 11 | this.pageOutObject = $('[data-page-effect-link="true"], a[href]:not([target="_blank"], [href^="#"], [href*="javascript"], [href*=".jpg"], [href*=".jpeg"], [href*=".gif"], [href*=".png"], [href*=".mov"], [href*=".swf"], [href*=".mp4"], [href*=".flv"], [href*=".avi"], [href*=".mp3"], [href*=".pdf"], [href*=".zip"], [href^="mailto:"], [data-page-effect-link="false"])'); 12 | this.setListener(); 13 | } 14 | 15 | setListener() { 16 | $(window).on('load', (event) => { 17 | this.hide(); 18 | }); 19 | 20 | this.pageOutObject.each((i, e) => { 21 | const link = $(e); 22 | link.on('click', (event) => { 23 | if (event.shiftKey || event.ctrlKey || event.metaKey) { 24 | return; 25 | } 26 | 27 | event.preventDefault(); 28 | this.show(); 29 | const url = link.attr('href'); 30 | this.moveLocation(url); 31 | }); 32 | }); 33 | } 34 | 35 | moveLocation(url) { 36 | setTimeout(() => { 37 | location.href = url 38 | }, this.params['duration']); 39 | } 40 | 41 | hide() { 42 | this.container 43 | .attr('aria-hidden', 'true') 44 | .attr('data-page-effect', 'fadein'); 45 | } 46 | 47 | show() { 48 | this.container 49 | .attr('aria-hidden', 'false') 50 | .attr('data-page-effect', 'fadeout'); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/js/select.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import $ from 'jquery'; 4 | 5 | export default class BasisSelect { 6 | constructor() { 7 | this.select = $('[data-c="select"]'); 8 | this.select.each((i, e) => { 9 | const selectWrapper = $(e); 10 | const select = selectWrapper.find('select'); 11 | const label = selectWrapper.find('[data-c="select__label"]'); 12 | label.text(select.children('option:selected').val()); 13 | 14 | select.on('change', (event) => { 15 | label.text(select.val()); 16 | }); 17 | 18 | select.on('focusin', (event) => { 19 | selectWrapper.attr('aria-selected', 'true'); 20 | }); 21 | 22 | select.on('focusout', (event) => { 23 | selectWrapper.attr('aria-selected', 'false'); 24 | }); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tests/api/api.styl: -------------------------------------------------------------------------------- 1 | _test(message) { 2 | [Test] { 3 | message: message; 4 | {block} 5 | } 6 | } 7 | 8 | _assert-equals(expected, actual) { 9 | if (expected == actual) { 10 | content: 'OK!'; 11 | } else { 12 | content: 'FAILURES! Expected: ' + expected + ' Actual: ' + actual; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tests/tests.styl: -------------------------------------------------------------------------------- 1 | @import '../src/css/basis-core'; 2 | @import 'api/api'; 3 | 4 | +_test('[function] _size-prefix()') { 5 | _assert-equals('-', _size-prefix('sm')); 6 | _assert-equals('--md', _size-prefix('md')); 7 | _assert-equals('--lg', _size-prefix('lg')); 8 | } 9 | 10 | +_test('[function] _gcd()') { 11 | _assert-equals(2, _gcd(2, 12)); 12 | _assert-equals(4, _gcd(4, 12)); 13 | _assert-equals(1, _gcd(1, 12)); 14 | _assert-equals(1, _gcd(5, 12)); 15 | } 16 | 17 | +_test('[function] _px2rem()') { 18 | rem = _px2rem(16px, 16px); 19 | _assert-equals(1rem, rem); 20 | 21 | rem = _px2rem(16px, 10px); 22 | _assert-equals(1.6rem, rem); 23 | } 24 | 25 | +_test('[function] _rem2px()') { 26 | rem = _rem2px(1rem, 16px); 27 | _assert-equals(16px, rem); 28 | 29 | rem = _rem2px(1rem, 10px); 30 | _assert-equals(10px, rem); 31 | } 32 | 33 | +_test('[function] _strip-unit()') { 34 | _assert-equals(1, _strip-unit(1rem)); 35 | _assert-equals(10, _strip-unit(10px)); 36 | } 37 | 38 | +_test('[variable] _transition-duration') { 39 | _assert-equals(_transition-duration, _transition-duration); 40 | } 41 | 42 | +_test('[function] _is-length()') { 43 | _assert-equals(true, _is-length(0)); 44 | _assert-equals(false, _is-length(1)); 45 | _assert-equals(true, _is-length(1px)); 46 | _assert-equals(true, _is-length(1%)); 47 | _assert-equals(false, _is-length('test')); 48 | _assert-equals(false, _is-length('1px')); 49 | } 50 | 51 | +_test('[function] _is-int()') { 52 | _assert-equals(true, _is-int(0)); 53 | _assert-equals(true, _is-int(1)); 54 | _assert-equals(false, _is-int(1px)); 55 | _assert-equals(false, _is-int(1%)); 56 | _assert-equals(false, _is-int('test')); 57 | _assert-equals(false, _is-int('1')); 58 | } 59 | 60 | +_test('[function] _space()') { 61 | _assert-equals(.75rem, _space(.5)); 62 | _assert-equals(1.5rem, _space(1)); 63 | _assert-equals(4.5rem, _space(3)); 64 | _assert-equals(0, _space(0)); 65 | _assert-equals(-1.5rem, _space(-1)); 66 | } 67 | 68 | +_test('[function] _is-null()') { 69 | _assert-equals(false, _is-null('')); 70 | _assert-equals(false, _is-null(false)); 71 | _assert-equals(false, _is-null(0)); 72 | _assert-equals(false, _is-null('null')); 73 | _assert-equals(true, _is-null(null)); 74 | } 75 | 76 | +_test('[function] _vertical-rhythm()') { 77 | _assert-equals(24, _vertical-rhythm(16px)); 78 | } 79 | --------------------------------------------------------------------------------