Unstyled pour les boutons
This commit is contained in:
CreativeJuiz
parent
3b7e87829e
commit
1e31ab50a7
8 changed files with 127 additions and 16 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -165,4 +165,7 @@ pip-log.txt
|
|||
*.cfg
|
||||
|
||||
# parce qu'on s'en fout
|
||||
*.log
|
||||
*.log
|
||||
|
||||
# parce que trop lourd
|
||||
node_modules/
|
||||
|
|
@ -13,7 +13,7 @@ html {
|
|||
/* 1 */
|
||||
-ms-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
-webkit-text-size-adjust: 100%
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -55,7 +55,7 @@ progress,
|
|||
video {
|
||||
display: inline-block;
|
||||
/* 1 */
|
||||
vertical-align: baseline
|
||||
vertical-align: baseline;
|
||||
/* 2 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -213,7 +213,7 @@ textarea {
|
|||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
margin: 0
|
||||
margin: 0;
|
||||
/* 3 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -245,7 +245,7 @@ input[type="reset"],
|
|||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
/* 2 */
|
||||
cursor: pointer
|
||||
cursor: pointer;
|
||||
/* 3 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -281,7 +281,7 @@ input[type="checkbox"],
|
|||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -328,7 +328,7 @@ fieldset {
|
|||
legend {
|
||||
border: 0;
|
||||
/* 1 */
|
||||
padding: 0
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
/**
|
||||
|
|
@ -656,37 +656,46 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.flexbox,
|
||||
.flexbox-h,
|
||||
.flexbox-v {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flexbox-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexitem-fluid {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
.flexitem-medium {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
}
|
||||
.flexitem-last {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-webkit-order: 1;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
|
|
@ -698,21 +707,26 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
/* ==Grids */
|
||||
/* ---------------------------------- */
|
||||
[class*="grid-"] {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-left: -1em;
|
||||
}
|
||||
[class*="grid-"] > * {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -1107,6 +1121,29 @@ button:focus {
|
|||
user-select: none;
|
||||
background-image: none;
|
||||
}
|
||||
/* unstyled forms */
|
||||
button.unstyled,
|
||||
input[type="button"].unstyled,
|
||||
input[type="submit"].unstyled,
|
||||
input[type="reset"].unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
button.unstyled:focus,
|
||||
input[type="button"].unstyled:focus,
|
||||
input[type="submit"].unstyled:focus,
|
||||
input[type="reset"].unstyled:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
/* ---------------------------------- */
|
||||
/* ==visual helpers */
|
||||
/* .. use them with parcimony ! */
|
||||
|
|
@ -1552,6 +1589,8 @@ s,m,l,n = small, medium, large, none
|
|||
border: 0;
|
||||
}
|
||||
.flexbox {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
|
@ -2042,5 +2081,9 @@ img.wp-smiley {
|
|||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=knacss-unminified.css.map */
|
||||
/* ----------------------------- */
|
||||
/* ==own stylesheet */
|
||||
/* ----------------------------- */
|
||||
/* Here should go your own CSS styles */
|
||||
/* You can also link them with a LESS @import */
|
||||
/* @import "my-styles.less"; */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
37
gulpfile.js
Normal file
37
gulpfile.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// Requires
|
||||
var gulp = require('gulp');
|
||||
|
||||
// Include plugins
|
||||
var less = require('gulp-less');
|
||||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var minifycss = require('gulp-minify-css');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
// Common tasks
|
||||
gulp.task('styles', ['styles-less']);
|
||||
gulp.task('doallthethings', ['styles-less']);
|
||||
|
||||
|
||||
// Styles LESS
|
||||
gulp.task('styles-less', function () {
|
||||
return gulp.src('./less/knacss.less')
|
||||
.pipe(less())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'))
|
||||
.pipe(rename('knacss.css'))
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(minifycss({keepBreaks:false,keepSpecialComments:0}))
|
||||
.pipe(sourcemaps.write('.', {includeContent: false}))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
|
||||
});
|
||||
|
||||
// Watcher
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch(['./less/*.less'], ['styles-less']);
|
||||
});
|
||||
|
||||
gulp.task('default', ['doallthethings']);
|
||||
|
|
@ -77,3 +77,27 @@ button:focus {
|
|||
user-select: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* unstyled forms */
|
||||
.unstyled {
|
||||
button&,
|
||||
input[type="button"]&,
|
||||
input[type="submit"]&,
|
||||
input[type="reset"]& {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -19,6 +19,14 @@
|
|||
"url": "https://github.com/raphaelgoetter/KNACSS"
|
||||
},
|
||||
"license": "WTFPL",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "latest",
|
||||
"gulp-rename": "latest",
|
||||
"gulp-less": "latest",
|
||||
"gulp-concat": "latest",
|
||||
"gulp-minify-css": "latest",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-sourcemaps": "latest"
|
||||
},
|
||||
"engines": {}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue