Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Commit

Permalink
fix: #16 : add visual feedback for :focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wikiki
Wikiki committed May 12, 2018
1 parent 937d400 commit 000fc55
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 51 deletions.
50 changes: 23 additions & 27 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ var postcss = require('gulp-postcss');
var rollup = require('gulp-better-rollup');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var spawn = require('child_process').spawn;
var minify = require('gulp-babel-minify');

Expand Down Expand Up @@ -49,17 +48,19 @@ var distJsFile = package.name + '.min.js';

// Uses Sass compiler to process styles, adds vendor prefixes, minifies, then
// outputs file to the appropriate location.
gulp.task('build:styles', ['build:styles:copy'], function() {
return gulp.src([paths.bulma + bulmaSassFile, paths.src + mainSassFile])
.pipe(concat(globalSassFile))
.pipe(sass({
style: 'compressed',
includePaths: [paths.bulma]
}))
.pipe(concat(distCssFile))
.pipe(postcss([autoprefixer({browsers: ['last 2 versions']})]))
.pipe(cleancss())
.pipe(gulp.dest(paths.dest));
gulp.task('build:styles', function() {
runSequence('build:styles:copy',function() {
return gulp.src([paths.bulma + bulmaSassFile, paths.src + mainSassFile])
.pipe(concat(globalSassFile))
.pipe(sass({
style: 'compressed',
includePaths: [paths.bulma]
}))
.pipe(postcss([autoprefixer({browsers: ['last 2 versions']})]))
.pipe(cleancss())
.pipe(concat(distCssFile))
.pipe(gulp.dest(paths.dest));
});
});

// Copy original sass file to dist
Expand All @@ -69,12 +70,11 @@ var distJsFile = package.name + '.min.js';
.pipe(gulp.dest(paths.dest));
});

gulp.task('clean:styles', function(callback) {
gulp.task('clean:styles', function() {
del([
paths.dest + mainSassFile,
paths.dest + distCssFile
]);
callback();
});

/**
Expand All @@ -87,51 +87,47 @@ gulp.task('clean:styles', function(callback) {
// appropriate location.
gulp.task('build:scripts', function() {
return gulp
.src([paths.src + paths.jsPattern])
.pipe(sourcemaps.init({
loadMaps: true
}))
.src([paths.src + mainJsFile])
.pipe(rollup({
plugins: [babel({
babelrc: false,
sourceMaps: true,
sourceMaps: false,
exclude: 'node_modules/**',
presets: [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": gutil.env.babelTarget ? gutil.env.babelTarget : ["last 2 versions"]
"browsers": gutil.env.babelTarget ? gutil.env.babelTarget : ['last 2 versions']
}
}]
]
})]
}, {
format: gutil.env.jsFormat ? gutil.env.jsFormat : 'iife',
format: 'umd',
name: camelCase(package.name)
}
))
).on('error', function(err) {
gutil.log(gutil.colors.red('[Error]'), err.toString())
}))
.pipe(concat(globalJsFile))
.pipe(gulp.dest(paths.dest))
.pipe(concat(distJsFile))
.pipe(minify().on('error', function(err) {
gutil.log(gutil.colors.red('[Error]'), err.toString())
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dest));
});

gulp.task('clean:scripts', function(callback) {
gulp.task('clean:scripts', function() {
del([
paths.dest + mainJsFile,
paths.dest + distJsFile
]);
callback();
});

// Deletes the entire dist directory.
gulp.task('clean', ['clean:scripts', 'clean:styles'], function(callback) {
gulp.task('clean', function() {
del(paths.dest);
callback();
});

/**
Expand Down
79 changes: 55 additions & 24 deletions src/extension.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ $switch-paddle-background: $white !default
$switch-paddle-background-active: $primary !default
$switch-paddle-offset: 0.25rem !default
$switch-paddle-transition: all 0.25s ease-out !default
$switch-focus: 1px dotted $grey-light !default

=switch-size($size)
$switch-height: $size * 1.5
Expand All @@ -23,7 +24,8 @@ $switch-paddle-transition: all 0.25s ease-out !default
padding-top: .2rem
cursor: pointer

&::before
&::before,
&:before
position: absolute
display: block
top: 0
Expand All @@ -35,8 +37,8 @@ $switch-paddle-transition: all 0.25s ease-out !default
background: $switch-background
content: ''


&::after
&::after,
&:after
display: block
position: absolute
top: ( $switch-height / 2 ) - ( $paddle-height / 2 )
Expand All @@ -53,53 +55,65 @@ $switch-paddle-transition: all 0.25s ease-out !default
+ label
padding-left: 0
padding-right: $switch-width + .5
&::before
&::before,
&:before
left: auto
right: 0
&::after
&::after,
&:after
left: auto
right: $switch-paddle-offset

&:checked
+ label
&::before
&::before,
&:before
background: $switch-background-active
&::after
left: $paddle-active-offest
&.is-rtl
+ label
&::after
&::after,
&:after
left: auto
right: $paddle-active-offest

&.is-outlined
+ label
&::before
&::before,
&:before
background-color: transparent
border-color: $switch-background
&::after
&::after,
&:after
background: $switch-background
&:checked
+ label
&::before
&::before,
&:before
background-color: transparent
border-color: $switch-background-active
&::after
&::after,
&:after
background: $switch-paddle-background-active

&.is-thin
+ label
&::before
&::before,
&:before
top: $switch-height / 2.75
height: $switch-height / 4
&::after
&::after,
&:after
box-shadow: 0px 0px 3px $grey

&.is-rounded
+ label
&::before
&::before,
&:before
border-radius: $radius-large * 4
&::after
&::after,
&:after
border-radius: 50%


Expand All @@ -110,13 +124,23 @@ $switch-paddle-transition: all 0.25s ease-out !default
position: absolute
opacity: 0

&:focus
+ label
&::before,
&:before,
&::after,
&:after
outline: $switch-focus

&[disabled]
cursor: not-allowed
+ label
opacity: 0.5
&::before
&::before,
&:before
opacity: 0.5
&::after
&::after,
&:after
opacity: 0.5
&:hover
cursor: not-allowed
Expand All @@ -135,29 +159,36 @@ $switch-paddle-transition: all 0.25s ease-out !default
&.is-#{$name}
&:checked
+ label
&::before
&::before,
&:before
background: $color
&.is-outlined
&:checked
+ label
&::before
&::before,
&:before
background-color: transparent
border-color: $color !important
&::after
&::after,
&:after
background: $color
&.is-thin
&.is-outlined
+ label
&::after
&::after,
&:after
box-shadow: none
&.is-unchecked-#{$name}
+ label
&::before
&::before,
&:before
background: $color
&.is-outlined
+ label
&::before
&::before,
&:before
background-color: transparent
border-color: $color !important
&::after
&::after,
&:after
background: $color

0 comments on commit 000fc55

Please sign in to comment.