From 576aeb7c6dc83c69c238095c19aaf0d3758da5c7 Mon Sep 17 00:00:00 2001 From: "MARI L. JOHANNESSEN" Date: Fri, 20 Jan 2017 10:25:25 -0600 Subject: [PATCH] refactor(gulpfile): fixed gulpfile and paths (#2140) * refactor(gulpfile): fixed gulpfile and paths * refactor(gulpfile): fixed lint errors --- .gitignore | 1 + demo/index.js | 2 +- demo/polyfills/array-from.js | 0 demo/polyfills/custom-event.js | 0 demo/polyfills/element-matches.js | 0 demo/polyfills/event-matches.js | 0 demo/polyfills/math-sign.js | 0 demo/polyfills/object-assign.js | 0 demo/polyfills/toggle-class.js | 0 demo/scss/demo.scss | 6 +- demo/views/demo-all.dust | 8 +- demo/views/demo-es5.html | 10 +-- gulpfile.js | 83 +++++-------------- index.js | 20 ----- server.js | 82 +++--------------- src/components/accordion/_accordion.scss | 8 +- src/components/buttons/_button--copy.scss | 8 +- src/components/buttons/_button--danger.scss | 8 +- src/components/buttons/_button--primary.scss | 8 +- .../buttons/_button--secondary.scss | 8 +- src/components/buttons/_button--sets.scss | 8 +- src/components/buttons/_button--small.scss | 2 +- src/components/buttons/_mixins.scss | 2 +- src/components/card/_card.scss | 11 ++- src/components/checkbox/_checkbox.scss | 10 +-- .../_content-switcher--default.scss | 45 ++++++++++ .../content-switcher/_content-switcher.scss | 1 - .../content-switcher/content-switcher.js | 8 +- .../detail-page-header--no-tabs.scss | 10 +-- .../detail-page-header--with-tabs.scss | 10 +-- .../detail-page-header/detail-page-header.js | 2 +- src/components/dropdown/dropdown.scss | 8 +- src/components/fab/fab.scss | 6 +- src/components/file-uploader/file-uploader.js | 23 +++-- .../file-uploader/file-uploader.scss | 2 +- src/components/footer/footer.scss | 6 +- src/components/forms/forms.scss | 8 +- .../inline-left-nav/inline-left-nav.scss | 8 +- src/components/links/links.scss | 8 +- src/components/lists/lists.scss | 8 +- src/components/loading/loading.scss | 6 +- src/components/modals/modals.scss | 27 +++--- src/components/modules/modules.scss | 10 +-- .../notifications/notifications.scss | 10 +-- src/components/number-input/number-input.scss | 8 +- .../overflow-menu/overflow-menu.scss | 8 +- src/components/pagination/pagination.js | 2 +- src/components/pagination/pagination.scss | 14 ++-- .../progress-indicator.scss | 10 +-- src/components/radio/radio.scss | 8 +- .../responsiveTables/responsiveTables.scss | 8 +- src/components/search/search.scss | 10 +-- src/components/select/select.scss | 10 +-- src/components/tabs/tabs.scss | 10 +-- src/components/tags/tags.scss | 8 +- .../taxonomy-item/taxonomy-item.scss | 6 +- src/components/text/text.scss | 8 +- src/components/textarea/textarea.scss | 8 +- src/components/toggle/toggle.scss | 8 +- src/components/tooltips/tooltips.scss | 8 +- .../unified-header/_global-header.scss | 2 +- .../unified-header/_left-nav-new.scss | 2 +- .../unified-header/_left-nav-trigger.scss | 2 +- src/components/unified-header/_topnav.scss | 2 +- .../unified-header/unified-header.scss | 8 +- .../js/mixins/init-component-by-event.js | 3 +- .../js/mixins/init-component-by-launcher.js | 8 +- .../js/mixins/init-component-by-search.js | 2 +- src/globals/scss/styles.scss | 70 ++++++++-------- 69 files changed, 320 insertions(+), 404 deletions(-) mode change 100644 => 100755 demo/polyfills/array-from.js mode change 100644 => 100755 demo/polyfills/custom-event.js mode change 100644 => 100755 demo/polyfills/element-matches.js mode change 100644 => 100755 demo/polyfills/event-matches.js mode change 100644 => 100755 demo/polyfills/math-sign.js mode change 100644 => 100755 demo/polyfills/object-assign.js mode change 100644 => 100755 demo/polyfills/toggle-class.js create mode 100644 src/components/content-switcher/_content-switcher--default.scss diff --git a/.gitignore b/.gitignore index 483ad246ff36..aae868f186f5 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ demo/*.css demo/*.map demo/*.js !demo/index.js +dist # OSX .DS_Store diff --git a/demo/index.js b/demo/index.js index f287a0da923a..c54a02c17e25 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,4 +1,4 @@ -export * from '../consumables/js/es2015'; +export * from '../index'; import ThemeSwitcher from './js/theme-switcher'; import DemoSwitcher from './js/demo-switcher'; diff --git a/demo/polyfills/array-from.js b/demo/polyfills/array-from.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/custom-event.js b/demo/polyfills/custom-event.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/element-matches.js b/demo/polyfills/element-matches.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/event-matches.js b/demo/polyfills/event-matches.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/math-sign.js b/demo/polyfills/math-sign.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/object-assign.js b/demo/polyfills/object-assign.js old mode 100644 new mode 100755 diff --git a/demo/polyfills/toggle-class.js b/demo/polyfills/toggle-class.js old mode 100644 new mode 100755 diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss index abf9043bad36..874a9facf1e5 100644 --- a/demo/scss/demo.scss +++ b/demo/scss/demo.scss @@ -1,10 +1,13 @@ -@import '../../globals/scss/styles'; +@import '../../src/globals/scss/styles'; .demo--container { @include grid-container; box-sizing: border-box; display: flex; + flex-direction: column; + align-items: flex-start; padding: 1rem; + margin-top: 5rem; transition: .2s; background-color: $color__navy-gray-2; @@ -22,6 +25,7 @@ } &.flex-row { + flex-direction: row; flex-wrap: wrap; margin: 0 auto; diff --git a/demo/views/demo-all.dust b/demo/views/demo-all.dust index 775dec31ffcf..b8363e5b40bb 100644 --- a/demo/views/demo-all.dust +++ b/demo/views/demo-all.dust @@ -11,9 +11,7 @@ } - - {header|s} - {detailHeader|s} +
@@ -34,8 +32,8 @@
- - + + diff --git a/demo/views/demo-es5.html b/demo/views/demo-es5.html index 931218aff0af..5fe7b5728791 100644 --- a/demo/views/demo-es5.html +++ b/demo/views/demo-es5.html @@ -37,16 +37,10 @@ - + - - - - - + diff --git a/gulpfile.js b/gulpfile.js index 614709ec19e7..975cf24484de 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,7 +23,6 @@ const babel = require('gulp-babel'); const merge = require('merge-stream'); const gutil = require('gulp-util'); - const Server = require('karma').Server; const cloptions = require('minimist')(process.argv.slice(2), { alias: { @@ -52,12 +51,12 @@ gulp.task('browser-sync', () => { // Use: npm run prebuild gulp.task('clean', () => { return del([ - 'consumables/css/*.css', - 'consumables/js/{es5,umd}/**/*.{js,map}', + 'dist', 'demo/**/*.{js,map}', '!demo/js/demo-switcher.js', '!demo/js/theme-switcher.js', '!demo/index.js', + '!demo/polyfills/*.js', ]); }); @@ -67,13 +66,12 @@ gulp.task('clean', () => { function buildScripts(options) { options = options || {}; - options.target = (options.target || './consumables/js/es5/bluemix-components.js') - .replace(/\.js$/, options.excludePolyfills ? '-without-polyfills.js' : '.js') + options.target = (options.target || './dist/bluemix-components.js') .replace(/\.js$/, options.prod ? '.min.js' : '.js'); return new Promise((resolve, reject) => { webpack({ devtool: 'source-maps', - entry: options.entry || './consumables/js/es2015/index.js', + entry: options.entry || './index.js', output: Object.assign({ path: path.dirname(options.target), filename: path.basename(options.target), @@ -90,14 +88,6 @@ function buildScripts(options) { }, ], }, - externals: options.excludePolyfills ? { - '../polyfills/array-from': 'Array.from', - '../polyfills/custom-event': 'CustomEvent', - './element-matches': 'Element.matches', - '../polyfills/element-matches': 'Element.matches', - '../polyfills/math-sign': 'Math.sign', - '../polyfills/object-assign': 'Object.assign', - } : {}, plugins: options.prod ? [new webpack.optimize.UglifyJsPlugin()] : [], }, (err, stats) => { if (err) { @@ -113,18 +103,10 @@ function buildScripts(options) { }); } -gulp.task('scripts:consumables', () => { - return Promise.all([ - buildScripts(), // Expanded ES5 - buildScripts({ prod: true }), // Minified ES5 - buildScripts({ excludePolyfills: true }), // Expanded ES5 - buildScripts({ excludePolyfills: true, prod: true }), // Minified ES5 - ]); -}); gulp.task('scripts:umd', () => { - const filesMain = './consumables/js/es2015/*.js'; - const filesOthers = './consumables/js/{misc,polyfills}/**/*.js'; + const filesMain = './src/components/**/*.js'; + const filesOthers = './src/globals/js/**/*.js'; const babelOpts = { plugins: ['transform-es2015-modules-umd', 'transform-runtime'], @@ -132,20 +114,25 @@ gulp.task('scripts:umd', () => { const mainStream = gulp.src(filesMain) .pipe(babel(babelOpts)) - .pipe(gulp.dest('./consumables/js/umd/lib')); + .pipe(gulp.dest('./dist/js/umd/lib')); const othersStream = gulp.src(filesOthers) .pipe(babel(babelOpts)) - .pipe(gulp.dest('./consumables/js/umd')); + .pipe(gulp.dest('./dist/js/umd')); return merge(mainStream, othersStream); }); +gulp.task('scripts:consumables', () => { + return Promise.all([ + buildScripts(), // Expanded ES5 + buildScripts({ prod: true }), // Minified ES5 + ]); +}); gulp.task('scripts:dev', () => { return Promise.all([ buildScripts({ - excludePolyfills: cloptions['exclude-polyfills'], // For testing "polyfills excluded" version target: './demo/demo.js', entry: './demo/index.js', }), @@ -158,7 +145,7 @@ gulp.task('scripts:dev', () => { gulp.task('sass:consumables', () => { function buildStyles(prod) { - return gulp.src('globals/scss/styles.scss') + return gulp.src('src/globals/scss/styles.scss') .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: prod ? 'compressed' : 'expanded', @@ -175,7 +162,7 @@ gulp.task('sass:consumables', () => { } })) .pipe(sourcemaps.write()) - .pipe(gulp.dest('consumables/css')) + .pipe(gulp.dest('dist')) .pipe(browserSync.stream()); } @@ -198,35 +185,13 @@ gulp.task('sass:dev', () => { .pipe(browserSync.stream()); }); -// Temporary -// gulp.task('sass:json', () => { -// const src = '_colors.scss'; -// const dest = 'colors.json'; -// const filePath = path.resolve(__dirname, `consumables/scss/global/colors/`); -// const colors = JSON.stringify(scssToJson(`${filePath}/${src}`), null, 2); -// -// fs.writeFile(`${filePath}/${dest}`, colors, (err) => { -// if (err) return console.log(err); -// console.log('colors > colors.json!'); -// }); -// }); - ///////////////////////////// // Lint ///////////////////////////// -// Temporary: gulp-sass-lint does not seem to be using our .sass-lint.yml -// gulp.task('lint:sass', () => { -// return gulp.src('consumables/**/*.scss') -// .pipe(sassLint()) -// .pipe(sassLint.format()) -// .pipe(sassLint.failOnError()); -// }); - -gulp.task('lint:scripts', function () { +gulp.task('lint', function () { return gulp.src([ - 'consumables/js/{es2015,misc,polyfills}/**/*.js', - '!**/examples/**/*.js', + 'src/**/*.js' ]) .pipe(eslint()) .pipe(eslint.format()) @@ -242,8 +207,6 @@ gulp.task('lint:scripts', function () { })); }); -gulp.task('lint', [/*'lint:sass',*/ 'lint:scripts']); - ///////////////////////////// // Test ///////////////////////////// @@ -260,7 +223,7 @@ gulp.task('test', (done) => { ///////////////////////////// gulp.task('jsdoc', function (cb) { - gulp.src('./consumables/js/{es2015,mixins}/**/*.js') + gulp.src('./src/components/**/*.js') .pipe(babel({ plugins: ['transform-class-properties'], babelrc: false, @@ -288,15 +251,15 @@ gulp.task('jsdoc', function (cb) { ////////////////////////////// gulp.task('watch', () => { - gulp.watch('consumables/**/*.html').on('change', browserSync.reload); - gulp.watch(['consumables/js/{es2015,misc,polyfills}/**/*.js'], ['scripts:dev']); - gulp.watch(['consumables/**/*.scss', 'demo/**/*.scss'], ['sass:dev']); + gulp.watch('src/**/**/*.html').on('change', browserSync.reload); + gulp.watch(['src/**/**/*.js'], ['scripts:dev']); + gulp.watch(['src/**/**/*.scss', 'demo/**/*.scss'], ['sass:dev']); }); gulp.task('serve', ['browser-sync', 'watch']); // Use: npm run build -gulp.task('build', ['sass:consumables', 'scripts:consumables', 'scripts:umd']); +gulp.task('build', ['sass:consumables', 'scripts:consumables']); gulp.task('build:dev', ['sass:dev', 'scripts:dev']); gulp.task('default', () => { diff --git a/index.js b/index.js index 46d64ee50755..b072c21a144a 100644 --- a/index.js +++ b/index.js @@ -96,24 +96,12 @@ export { */ Modal, - /** - * Header with taxonomy menu. - * @type HeaderNav - */ - HeaderNav, - /** * Left Navigation Menu * @type LeftNav */ LeftNav, - /** - * Search button in tool bar. - * @type Toolbars - */ - Toolbars, - /** * Spinner indicating loading state. * @type Loading @@ -144,12 +132,6 @@ export { */ ResponsiveTable, - /** - * Data table. - * @type Table - */ - Table, - /** * Detail page header. * @type DetailPageHeader @@ -195,13 +177,11 @@ const init = () => { Tab.init(); OverflowMenu.init(); Modal.init(); - Toolbars.init(); Loading.init(); Dropdown.init(); Card.init(); NumberInput.init(); ResponsiveTable.init(); - Table.init(); DetailPageHeader.init(); LeftNav.init(); InlineLeftNav.init(); diff --git a/server.js b/server.js index ef2ba488d555..4287ea9d92aa 100644 --- a/server.js +++ b/server.js @@ -13,23 +13,15 @@ const port = process.env.PORT || 8080; const htmlFiles = { // Used in getContent() function all: [ - 'consumables/html/**/*.html', - '!consumables/html/**/body.html', - '!consumables/html/**/header.html', - '!consumables/html/components/detail-page-header/**/*.html', - ], - header: 'consumables/html/**/header.html', - detailHeader: 'consumables/html/components/detail-page-header/**/*.html', - baseElements: 'consumables/html/base-elements/**/*.html', - components: 'consumables/html/components/**/*.html', - global: 'consumables/html/global/**/*.html' + 'src/components/**/*.html', + '!src/components/unified-header/*.html', + '!src/components/inline-left-nav/*.html' + ] }; const directoryOrder = [ // Used for allLinks() function - 'consumables/html/base-elements/**/*.html', - 'consumables/html/components/**/*.html', - 'consumables/html/global/**/*.html' + 'src/components/**/*.html', ]; app.engine('dust', adaro.dust()); @@ -37,7 +29,7 @@ app.set('view engine', 'dust'); app.set('views', path.resolve(__dirname, 'demo/views')); app.use(express.static('node_modules')); app.use(express.static('demo')); -app.use(express.static('consumables')); +app.use(express.static('src')); app.use('/docs/js', express.static('docs/js')); const getContent = (glob) => { @@ -63,7 +55,6 @@ const allLinks = globby(directoryOrder) indices.push(i); } } - return path.slice(0, indices[1]); }) .filter((path, index, paths) => { @@ -79,15 +70,11 @@ const allLinks = globby(directoryOrder) app.get('/', (req, res) => { Promise.all([ - getContent(htmlFiles.header), - getContent(htmlFiles.detailHeader), getContent(htmlFiles.all) ]) .then(results => { res.render('demo-all', { - header: results[0], - detailHeader: results[1], - html: results[2] + html: results[0] }); }) .catch((error) => { @@ -97,57 +84,9 @@ app.get('/', (req, res) => { }); app.get('/components/:component', (req, res) => { - const glob = `consumables/html/components/${req.params.component}/**/*.html`; - - if (path.relative('consumables/html/components', glob).substr(0, 2) === '..') { - res.status(404).end(); - } else { - Promise.all([getContent(glob), allLinks]) - .then(results => { - if (typeof results[0] === 'undefined') { - res.status(404).end(); - } else { - res.render('demo-all', { - html: results[0], - links: results[1] - }); - } - }) - .catch((error) => { - console.error(error.stack); // eslint-disable-line no-console - res.status(500).end(); - }); - } -}); - -app.get('/base-elements/:component', (req, res) => { - const glob = `consumables/html/base-elements/${req.params.component}/**/*.html`; - - if (path.relative('consumables/html/base-elements', glob).substr(0, 2) === '..') { - res.status(404).end(); - } else { - Promise.all([getContent(glob), allLinks]) - .then(results => { - if (typeof results[0] === 'undefined') { - res.status(404).end(); - } else { - res.render('demo-all', { - html: results[0], - links: results[1] - }); - } - }) - .catch((error) => { - console.error(error.stack); // eslint-disable-line no-console - res.status(500).end(); - }); - } -}); - -app.get('/global/:component', (req, res) => { - const glob = `consumables/html/global/${req.params.component}/**/*.html`; + const glob = `src/components/${req.params.component}/**/*.html`; - if (path.relative('consumables/html/global', glob).substr(0, 2) === '..') { + if (path.relative('src/components', glob).substr(0, 2) === '..') { res.status(404).end(); } else { Promise.all([getContent(glob), allLinks]) @@ -156,8 +95,7 @@ app.get('/global/:component', (req, res) => { res.status(404).end(); } else { res.render('demo-all', { - html: results[0], - links: results[1] + html: results[0] }); } }) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 190050a9f933..e4b9ac30f792 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -1,7 +1,7 @@ -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @include exports('accordion') { diff --git a/src/components/buttons/_button--copy.scss b/src/components/buttons/_button--copy.scss index 8ba1f4b99528..3b14bf77cc4b 100644 --- a/src/components/buttons/_button--copy.scss +++ b/src/components/buttons/_button--copy.scss @@ -2,10 +2,10 @@ // Primary Button //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @import 'mixins'; @include exports('button--copy') { diff --git a/src/components/buttons/_button--danger.scss b/src/components/buttons/_button--danger.scss index d2844a2c1093..471e8b08edb1 100644 --- a/src/components/buttons/_button--danger.scss +++ b/src/components/buttons/_button--danger.scss @@ -2,10 +2,10 @@ // Danger Button //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @import 'mixins'; @include exports('button--danger') { diff --git a/src/components/buttons/_button--primary.scss b/src/components/buttons/_button--primary.scss index 452a0c2664b4..635da0ba75d6 100644 --- a/src/components/buttons/_button--primary.scss +++ b/src/components/buttons/_button--primary.scss @@ -2,10 +2,10 @@ // Primary Button //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @import 'mixins'; @include exports('button--primary') { diff --git a/src/components/buttons/_button--secondary.scss b/src/components/buttons/_button--secondary.scss index e3d0b94f5fc9..b9402b8d4d3a 100644 --- a/src/components/buttons/_button--secondary.scss +++ b/src/components/buttons/_button--secondary.scss @@ -2,10 +2,10 @@ // Secondary Button //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @import 'mixins'; @include exports('button--secondary') { diff --git a/src/components/buttons/_button--sets.scss b/src/components/buttons/_button--sets.scss index fa4b459a2249..34a62514a105 100644 --- a/src/components/buttons/_button--sets.scss +++ b/src/components/buttons/_button--sets.scss @@ -2,10 +2,10 @@ // Sets of Buttons //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; @import 'mixins'; @include exports('buttons') { diff --git a/src/components/buttons/_button--small.scss b/src/components/buttons/_button--small.scss index 0cb22fe1d2cd..61dc20393b6b 100644 --- a/src/components/buttons/_button--small.scss +++ b/src/components/buttons/_button--small.scss @@ -3,7 +3,7 @@ //----------------------------- // import-once -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/import-once'; @include exports('button--small') { diff --git a/src/components/buttons/_mixins.scss b/src/components/buttons/_mixins.scss index 429685e75b1c..65817a6f7e93 100644 --- a/src/components/buttons/_mixins.scss +++ b/src/components/buttons/_mixins.scss @@ -114,7 +114,7 @@ &:hover, &:focus { - color: $color__btn--text; + color: $text; background-color: $hover-bg; &:disabled { diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index da5115ffc581..ecf28728f101 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -2,14 +2,13 @@ // Card //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/typography'; -@import '../../base-elements/buttons/vars'; -@import '../../base-elements/buttons/mixins'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/typography'; +@import '../buttons/mixins'; @import '../overflow-menu/overflow-menu'; @import 'mixins'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/import-once'; @include exports('card') { diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss index 55e875453ecf..d18212714144 100644 --- a/src/components/checkbox/_checkbox.scss +++ b/src/components/checkbox/_checkbox.scss @@ -2,11 +2,11 @@ // Checkbox //----------------------------- -@import '../../../../globals/scss/colors'; -@import '../../../../globals/scss/layout'; -@import '../../../../globals/scss/typography'; -@import '../../../../globals/scss/helpers'; -@import '../../../../globals/scss/import-once'; +@import '../../globals/scss/colors'; +@import '../../globals/scss/layout'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/helpers'; +@import '../../globals/scss/import-once'; @include exports('checkbox') { diff --git a/src/components/content-switcher/_content-switcher--default.scss b/src/components/content-switcher/_content-switcher--default.scss new file mode 100644 index 000000000000..5419ed2dcfbe --- /dev/null +++ b/src/components/content-switcher/_content-switcher--default.scss @@ -0,0 +1,45 @@ +//------------------------- +// Content Switcher Default +//------------------------- + +@import '../../globals/scss/colors'; +@import '../../globals/scss/typography'; +@import '../../globals/scss/import-once'; +@import 'mixins'; + +@include exports('content-switcher--default') { + +// Container +.bx--content-switcher { + display: flex; +} + +// Default (use with