mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
Initial drop
This commit is contained in:
Tilo Mitra
parent
608018938a
commit
dbb805f448
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
.DS_Store
|
||||
build/
|
||||
node_modules/
|
||||
219
Gruntfile.js
Normal file
219
Gruntfile.js
Normal file
@ -0,0 +1,219 @@
|
||||
var path = require('path'),
|
||||
parserlib = require('parserlib');
|
||||
|
||||
module.exports = function (grunt) {
|
||||
|
||||
// -- Config -------------------------------------------------------------------
|
||||
|
||||
grunt.initConfig({
|
||||
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
// -- Constants ------------------------------------------------------------
|
||||
|
||||
NORMALIZE_LIB: path.join(process.cwd(), '../', 'normalize.css'),
|
||||
BASE_DIR : 'src/base/',
|
||||
PREFIX : '.k',
|
||||
|
||||
COMMENT: '/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */\n',
|
||||
LICENSE: [
|
||||
'/*! normalize.css v1.1.1 | MIT License | git.io/normalize */',
|
||||
'/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */',
|
||||
'\n'
|
||||
].join('\n'),
|
||||
|
||||
// -- CSSMin Config --------------------------------------------------------
|
||||
|
||||
cssmin: {
|
||||
options: {
|
||||
report: 'gzip'
|
||||
},
|
||||
|
||||
base: {
|
||||
files: {
|
||||
'build/base/base-min.css' : ['src/base/css/normalize.css'],
|
||||
'build/base/base-context-min.css': ['src/base/css/normalize-context.css']
|
||||
}
|
||||
},
|
||||
|
||||
forms: {
|
||||
files: {
|
||||
'build/forms/forms-min.css' : ['src/forms/css/*.css'],
|
||||
'build/forms/forms-nr-min.css': ['src/forms/css/forms-core.css',
|
||||
'src/forms/css/forms.css']
|
||||
}
|
||||
},
|
||||
|
||||
grids: {
|
||||
files: {
|
||||
'build/grids/grids-min.css' : ['src/grids/css/*.css'],
|
||||
'build/grids/grids-nr-min.css': ['src/grids/css/cssgrids-base.css',
|
||||
'src/grids/css/cssgrids-units.css']
|
||||
}
|
||||
},
|
||||
|
||||
menus: {
|
||||
files: {
|
||||
'build/menus/menus-min.css' : ['src/menus/css/*.css'],
|
||||
'build/menus/menus-nr-min.css': ['src/menus/css/list-core.css',
|
||||
'src/menus/css/list.css',
|
||||
'src/menus/css/list-paginator.css']
|
||||
}
|
||||
},
|
||||
|
||||
tables: {
|
||||
files: {
|
||||
'build/tables/tables-min.css': ['src/tables/css/*.css']
|
||||
}
|
||||
},
|
||||
|
||||
buttons: {
|
||||
files: {
|
||||
'build/buttons/buttons-min.css': ['src/buttons/css/*.css']
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// -- Main Tasks ---------------------------------------------------------------
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
|
||||
grunt.registerTask('default', ['cssmin']);
|
||||
grunt.registerTask('base', ['cssmin:base']);
|
||||
grunt.registerTask('buttons', ['cssmin:buttons']);
|
||||
grunt.registerTask('forms', ['cssmin:forms']);
|
||||
grunt.registerTask('grids', ['cssmin:grids']);
|
||||
grunt.registerTask('menus', ['cssmin:menus']);
|
||||
grunt.registerTask('tables', ['cssmin:tables']);
|
||||
|
||||
// -- Import Tasks -------------------------------------------------------------
|
||||
|
||||
grunt.registerTask('base-clean', 'Clean Source Tree', function () {
|
||||
var files = grunt.file.expand(grunt.config('BASE_DIR') + 'css/*.css');
|
||||
|
||||
files.forEach(function (file) {
|
||||
grunt.log.writeln('Deleting: '.red + file.cyan);
|
||||
grunt.file['delete'](file);
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask('base-import-css', 'Import Normalize CSS Files', function () {
|
||||
var file = 'normalize.css',
|
||||
src = path.join(grunt.config('NORMALIZE_LIB'), file),
|
||||
dest = path.join(grunt.config('BASE_DIR'), 'css', file);
|
||||
|
||||
if (!grunt.file.exists(src)) {
|
||||
grunt.fail.fatal('Did you clone normalize.css yet?');
|
||||
}
|
||||
|
||||
grunt.log.writeln('Copying: '.green + file.cyan + ' to ' + dest.cyan);
|
||||
grunt.file.write(dest, grunt.config('COMMENT') + grunt.file.read(src));
|
||||
});
|
||||
|
||||
grunt.registerTask('base-import-tests', 'Import Normalize Tests', function () {
|
||||
var file = 'test.html',
|
||||
src = path.join(grunt.config('NORMALIZE_LIB'), file),
|
||||
dest = path.join(grunt.config('BASE_DIR'), 'tests', 'manual', file);
|
||||
|
||||
if (!grunt.file.exists(src)) {
|
||||
grunt.fail.fatal('Did you clone normalize.css yet?');
|
||||
}
|
||||
|
||||
grunt.log.writeln('Copying: '.green + file.cyan + ' to ' + dest.cyan);
|
||||
grunt.file.copy(src, dest);
|
||||
});
|
||||
|
||||
grunt.registerTask('base-create-context', 'Make context version', function () {
|
||||
var context = grunt.config('COMMENT') + grunt.config('LICENSE'),
|
||||
done = this.async(),
|
||||
parser = new parserlib.css.Parser(),
|
||||
raw = grunt.file.read(grunt.config('BASE_DIR') + 'css/normalize.css');
|
||||
|
||||
parser.addListener('startstylesheet', function () {
|
||||
grunt.log.ok('Starting to parse style sheet...');
|
||||
});
|
||||
|
||||
parser.addListener('endstylesheet', function () {
|
||||
var contextFile = path.join(grunt.config('BASE_DIR'), 'css', 'normalize-context.css');
|
||||
|
||||
grunt.log.ok('Finished parsing style sheet...');
|
||||
grunt.file.write(contextFile, context);
|
||||
grunt.log.ok('Done creating context build!');
|
||||
done();
|
||||
});
|
||||
|
||||
// Fired right before CSS properties are parsed for a certain rule. Go
|
||||
// through and add all the selectors to the `css` string.
|
||||
parser.addListener('startrule', function (event) {
|
||||
var prefix = grunt.config('PREFIX');
|
||||
|
||||
event.selectors.forEach(function (selector, i) {
|
||||
var nextSelector = event.selectors[i + 1];
|
||||
|
||||
// If the selector does not contain the html selector, we can go
|
||||
// ahead and prepend .k in front of it.
|
||||
if (selector.text.indexOf('html') === -1) {
|
||||
context += prefix + ' ' + selector.text;
|
||||
} else if (selector.text.indexOf('html') !== -1) {
|
||||
// If it contains `html`, replace the `html` with `.k`. Replace
|
||||
// multiple spaces with a single space. This is for the case
|
||||
// where `html input[type='button']` comes through as
|
||||
// `html input[type='button']`.
|
||||
context += selector.text.replace('html', prefix).replace(/ +/g, ' ');
|
||||
}
|
||||
|
||||
// If theres another selector, add a comma.
|
||||
if (nextSelector) {
|
||||
context += ',\n';
|
||||
} else {
|
||||
// Otherwise, add an opening bracket for properties
|
||||
context += ' {\n';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Fired right after CSS properties are parsed for a certain rule. Add the
|
||||
// closing bracket to end the CSS Rule.
|
||||
parser.addListener('endrule', function (event) {
|
||||
context += '}\n';
|
||||
});
|
||||
|
||||
// Fired for each property that the parser encounters. Add these properties
|
||||
// to the `css` string with 4 spaces.
|
||||
parser.addListener('property', function (event) {
|
||||
// Add 4 spaces tab.
|
||||
context += ' ' + event.property + ': ' + event.value + ';\n';
|
||||
});
|
||||
|
||||
// Do the parsing.
|
||||
parser.parse(raw);
|
||||
|
||||
});
|
||||
|
||||
grunt.registerTask('base-prep', 'Prep Normalize.css import', function () {
|
||||
var normalize = grunt.config('NORMALIZE_LIB');
|
||||
|
||||
grunt.log.write('Looking for Normalize.css'.green);
|
||||
|
||||
if (!grunt.file.exists(normalize)) {
|
||||
grunt.log.writeln('');
|
||||
grunt.fail.fatal('Could not locate Normalize.css repo: ' + normalize + '\nDid you clone it as a sibling of the Kimono');
|
||||
}
|
||||
|
||||
grunt.log.writeln('...OK'.white);
|
||||
});
|
||||
|
||||
grunt.registerTask('base-all', [
|
||||
'base-prep',
|
||||
'base-clean',
|
||||
'base-import',
|
||||
'base-create-context'
|
||||
]);
|
||||
|
||||
grunt.registerTask('base-import', [
|
||||
'base-import-css',
|
||||
'base-import-tests'
|
||||
]);
|
||||
|
||||
};
|
||||
2
HISTORY.md
Normal file
2
HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Kimono Change History
|
||||
=====================
|
||||
52
LICENSE.md
Normal file
52
LICENSE.md
Normal file
@ -0,0 +1,52 @@
|
||||
Software License Agreement (BSD License)
|
||||
========================================
|
||||
|
||||
Copyright 2013 Yahoo! Inc. All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the Yahoo! Inc. nor the
|
||||
names of its contributors may be used to endorse or promote products
|
||||
derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
Normalize.css License
|
||||
=====================
|
||||
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "Kimono",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"parserlib": "~0.2.2",
|
||||
"grunt-contrib-cssmin": "~0.6.0"
|
||||
}
|
||||
}
|
||||
2
src/base/HISTORY.md
Normal file
2
src/base/HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Base Change History
|
||||
===================
|
||||
7
src/base/LICENSE.md
Normal file
7
src/base/LICENSE.md
Normal file
@ -0,0 +1,7 @@
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
27
src/base/README.md
Normal file
27
src/base/README.md
Normal file
@ -0,0 +1,27 @@
|
||||
Base
|
||||
====
|
||||
|
||||
Base comprises of Normalize.css - a modern, HTML5-ready alternative to CSS resets.
|
||||
|
||||
This component is a port of the original Normalize.css project, which can be
|
||||
found at <http://necolas.github.com/normalize.css/>.
|
||||
|
||||
|
||||
Differences
|
||||
-----------
|
||||
|
||||
Changes are minimal. Base uses Normalize v1.1.1.
|
||||
|
||||
- Create a contextual normalize.css (normalize-context.css) toggled off a parent class-name (.k)
|
||||
|
||||
License
|
||||
=======
|
||||
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.NECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
238
src/base/css/normalize-context.css
Normal file
238
src/base/css/normalize-context.css
Normal file
@ -0,0 +1,238 @@
|
||||
/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */
|
||||
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
|
||||
/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */
|
||||
|
||||
.k article,
|
||||
.k aside,
|
||||
.k details,
|
||||
.k figcaption,
|
||||
.k figure,
|
||||
.k footer,
|
||||
.k header,
|
||||
.k hgroup,
|
||||
.k main,
|
||||
.k nav,
|
||||
.k section,
|
||||
.k summary {
|
||||
display: block;
|
||||
}
|
||||
.k audio,
|
||||
.k canvas,
|
||||
.k video {
|
||||
display: inline-block;
|
||||
}
|
||||
.k audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
.k [hidden] {
|
||||
display: none;
|
||||
}
|
||||
.k {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
.k,
|
||||
.k button,
|
||||
.k input,
|
||||
.k select,
|
||||
.k textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.k body {
|
||||
margin: 0;
|
||||
}
|
||||
.k a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
.k a:active,
|
||||
.k a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
.k h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.k h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
.k h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.k h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
.k h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
.k h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
.k abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
.k b,
|
||||
.k strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.k blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
.k dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
.k hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
.k mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
.k p,
|
||||
.k pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.k code,
|
||||
.k kbd,
|
||||
.k pre,
|
||||
.k samp {
|
||||
font-family: monospace , serif;
|
||||
_font-family: 'courier new' , monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
.k pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.k q {
|
||||
quotes: none;
|
||||
}
|
||||
.k q:before,
|
||||
.k q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
.k small {
|
||||
font-size: 80%;
|
||||
}
|
||||
.k sub,
|
||||
.k sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.k sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
.k sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
.k dl,
|
||||
.k menu,
|
||||
.k ol,
|
||||
.k ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.k dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
.k menu,
|
||||
.k ol,
|
||||
.k ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
.k nav ul,
|
||||
.k nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.k img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
.k svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.k figure {
|
||||
margin: 0;
|
||||
}
|
||||
.k form {
|
||||
margin: 0;
|
||||
}
|
||||
.k fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
.k legend {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.k button,
|
||||
.k input,
|
||||
.k select,
|
||||
.k textarea {
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.k button,
|
||||
.k input {
|
||||
line-height: normal;
|
||||
}
|
||||
.k button,
|
||||
.k select {
|
||||
text-transform: none;
|
||||
}
|
||||
.k button,
|
||||
.k input[type="button"],
|
||||
.k input[type="reset"],
|
||||
.k input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
.k button[disabled],
|
||||
.k input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
.k input[type="checkbox"],
|
||||
.k input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
.k input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.k input[type="search"]::-webkit-search-cancel-button,
|
||||
.k input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.k button::-moz-focus-inner,
|
||||
.k input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.k textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
.k table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
534
src/base/css/normalize.css
vendored
Normal file
534
src/base/css/normalize.css
vendored
Normal file
@ -0,0 +1,534 @@
|
||||
/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */
|
||||
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Prevent system color scheme's background color being used in Firefox, IE,
|
||||
* and Opera.
|
||||
* 2. Prevent system color scheme's text color being used in Firefox, IE, and
|
||||
* Opera.
|
||||
* 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 4. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
background: #fff; /* 1 */
|
||||
color: #000; /* 2 */
|
||||
font-size: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 4 */
|
||||
-ms-text-size-adjust: 100%; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
354
src/base/tests/manual/test.html
Normal file
354
src/base/tests/manual/test.html
Normal file
@ -0,0 +1,354 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Normalize CSS</title>
|
||||
<link rel="stylesheet" href="../../css/normalize.css">
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<style>
|
||||
#boxsize button,
|
||||
#boxsize input,
|
||||
#boxsize select,
|
||||
#boxsize textarea {
|
||||
width: 200px;
|
||||
padding: 5px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<section>
|
||||
<h1>Heading 1 (in section)</h1>
|
||||
<h2>Heading 2 (in section)</h2>
|
||||
<h3>Heading 3 (in section)</h3>
|
||||
<h4>Heading 4 (in section)</h4>
|
||||
<h5>Heading 5 (in section)</h5>
|
||||
<h6>Heading 6 (in section)</h6>
|
||||
</section>
|
||||
|
||||
<article>
|
||||
<h1>Heading 1 (in article)</h1>
|
||||
<h2>Heading 2 (in article)</h2>
|
||||
<h3>Heading 3 (in article)</h3>
|
||||
<h4>Heading 4 (in article)</h4>
|
||||
<h5>Heading 5 (in article)</h5>
|
||||
<h6>Heading 6 (in article)</h6>
|
||||
</article>
|
||||
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>Heading 1 (in hgroup)</h1>
|
||||
<h2>Heading 2 (in hgroup)</h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">navigation item #1</a></li>
|
||||
<li><a href="#">navigation item #2</a></li>
|
||||
<li><a href="#">navigation item #3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<h1>Text-level semantics</h1>
|
||||
|
||||
<p hidden>This should be hidden in all browsers, apart from IE6</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
|
||||
<address>Address: somewhere, world</address>
|
||||
|
||||
<hr>
|
||||
|
||||
<hr style="height:4px; border:solid #000; border-width:1px 0;">
|
||||
|
||||
<p>
|
||||
The <a href="#">a element</a> example<br>
|
||||
The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
|
||||
The <b>b element</b> example<br>
|
||||
The <cite>cite element</cite> example<br>
|
||||
The <code>code element</code> example<br>
|
||||
The <del>del element</del> example<br>
|
||||
The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
|
||||
The <em>em element</em> example<br>
|
||||
The <i>i element</i> example<br>
|
||||
The img element <img src="http://lorempixel.com/16/16" alt=""> example<br>
|
||||
The <ins>ins element</ins> example<br>
|
||||
The <kbd>kbd element</kbd> example<br>
|
||||
The <mark>mark element</mark> example<br>
|
||||
The <q>q element <q>inside</q> a q element</q> example<br>
|
||||
The <s>s element</s> example<br>
|
||||
The <samp>samp element</samp> example<br>
|
||||
The <small>small element</small> example<br>
|
||||
The <span>span element</span> example<br>
|
||||
The <strong>strong element</strong> example<br>
|
||||
The <sub>sub element</sub> example<br>
|
||||
The <sup>sup element</sup> example<br>
|
||||
The <u>u element</u> example<br>
|
||||
The <var>var element</var> example
|
||||
</p>
|
||||
|
||||
<h1>Embedded content</h1>
|
||||
|
||||
<h3>audio</h3>
|
||||
|
||||
<audio controls></audio>
|
||||
<audio></audio>
|
||||
|
||||
<h3>img</h3>
|
||||
|
||||
<img src="http://lorempixel.com/100/100" alt="">
|
||||
<a href="#"><img src="http://lorempixel.com/100/100" alt=""></a>
|
||||
|
||||
<h3>svg</h3>
|
||||
|
||||
<svg width="100px" height="100px">
|
||||
<circle cx="100" cy="100" r="100" fill="#ff0000" />
|
||||
</svg>
|
||||
|
||||
<h3>video</h3>
|
||||
|
||||
<video controls></video>
|
||||
<video></video>
|
||||
|
||||
<h1>Interactive content</h1>
|
||||
|
||||
<h3>details / summary</h3>
|
||||
<details>
|
||||
<summary>More info</summary>
|
||||
<p>Additional information</p>
|
||||
<ul>
|
||||
<li>Point 1</li>
|
||||
<li>Point 2</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<h1>Grouping content</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
|
||||
<h3>pre</h3>
|
||||
|
||||
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
|
||||
|
||||
<pre><code><html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main"> <div>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
|
||||
<h3>blockquote</h3>
|
||||
|
||||
<blockquote>
|
||||
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>
|
||||
|
||||
<h3>ordered list</h3>
|
||||
|
||||
<ol>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1
|
||||
<ol>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2
|
||||
<ol>
|
||||
<li>list item 3</li>
|
||||
<li>list item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1</li>
|
||||
</ol>
|
||||
|
||||
<h3>unordered list</h3>
|
||||
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1
|
||||
<ul>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2
|
||||
<ul>
|
||||
<li>list item 3</li>
|
||||
<li>list item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1</li>
|
||||
</ul>
|
||||
|
||||
<h3>description list</h3>
|
||||
|
||||
<dl>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
<dd>Description value</dd>
|
||||
<dt>Description name</dt>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
</dl>
|
||||
|
||||
<h3>figure</h3>
|
||||
|
||||
<figure>
|
||||
<img src="http://lorempixel.com/400/200" alt="">
|
||||
<figcaption>Figcaption content</figcaption>
|
||||
</figure>
|
||||
|
||||
<h1>Tabular data</h1>
|
||||
|
||||
<table>
|
||||
<caption>Jimi Hendrix - albums</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Are You Experienced</td>
|
||||
<td>1967</td>
|
||||
<td>$10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Axis: Bold as Love</td>
|
||||
<td>1967</td>
|
||||
<td>$12.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Electric Ladyland</td>
|
||||
<td>1968</td>
|
||||
<td>$10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Band of Gypsys</td>
|
||||
<td>1970</td>
|
||||
<td>$12.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Forms</h1>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
|
||||
<p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
|
||||
<p><label>Email input <input type="email"></label></p>
|
||||
<p><label>Search input <input type="search"></label></p>
|
||||
<p><label>Tel input <input type="tel"></label></p>
|
||||
<p><label>URL input <input type="url" placeholder="http://"></label></p>
|
||||
<p><label>Password input <input type="password" value="password"></label></p>
|
||||
<p><label>File input <input type="file"></label></p>
|
||||
|
||||
<p><label>Radio input <input type="radio" name="rad"></label></p>
|
||||
<p><label>Checkbox input <input type="checkbox"></label></p>
|
||||
<p><label><input type="radio" name="rad"> Radio input</label></p>
|
||||
<p><label><input type="checkbox"> Checkbox input</label></p>
|
||||
|
||||
<p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
|
||||
<p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Inputs as siblings of labels</legend>
|
||||
<p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
|
||||
<p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
|
||||
<p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
|
||||
<p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
|
||||
<p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
|
||||
<p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
|
||||
<p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
|
||||
<p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>
|
||||
|
||||
<p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
|
||||
<p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
|
||||
<p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
|
||||
<p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>
|
||||
|
||||
<p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
|
||||
<p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Clickable inputs and buttons</legend>
|
||||
<p><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></p>
|
||||
<p><input type="reset" value="Reset (input)"></p>
|
||||
<p><input type="button" value="Button (input)"></p>
|
||||
<p><input type="submit" value="Submit (input)"></p>
|
||||
<p><input type="submit" value="Disabled (input)" disabled></p>
|
||||
|
||||
|
||||
<p><button type="reset">Reset (button)</button></p>
|
||||
<p><button type="button">Button (button)</button></p>
|
||||
<p><button type="submit">Submit (button)</button></p>
|
||||
<p><button type="submit" disabled>Disabled (button)</button></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="boxsize">
|
||||
<legend>box-sizing tests</legend>
|
||||
<div><input type="text" value="text"></div>
|
||||
<div><input type="email" value="email"></div>
|
||||
<div><input type="search" value="search"></div>
|
||||
<div><input type="url" value="http://example.com"></div>
|
||||
<div><input type="password" value="password"></div>
|
||||
|
||||
<div><input type="color" value="#000000"></div>
|
||||
<div><input type="number" value="5"></div>
|
||||
<div><input type="range" value="10"></div>
|
||||
<div><input type="date" value="1970-01-01"></div>
|
||||
<div><input type="month" value="1970-01"></div>
|
||||
<div><input type="week" value="1970-W01"></div>
|
||||
<div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
|
||||
<div><input type="datetime-local" value="1970-01-01T00:00"></div>
|
||||
|
||||
<div><input type="radio"></div>
|
||||
<div><input type="checkbox"></div>
|
||||
|
||||
<div><select><option>Option 01</option><option>Option 02</option></select></div>
|
||||
<div><textarea cols="30" rows="5">Textarea text</textarea></div>
|
||||
|
||||
<div><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></div>
|
||||
<div><input type="reset" value="Reset (input)"></div>
|
||||
<div><input type="button" value="Button (input)"></div>
|
||||
<div><input type="submit" value="Submit (input)"></div>
|
||||
|
||||
<div><button type="reset">Reset (button)</button></div>
|
||||
<div><button type="button">Button (button)</button></div>
|
||||
<div><button type="submit">Submit (button)</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
src/buttons/css/button-core.css
Normal file
27
src/buttons/css/button-core.css
Normal file
@ -0,0 +1,27 @@
|
||||
.k-button {
|
||||
/* Structure */
|
||||
display: inline-block;
|
||||
*display: inline; /*IE 6/7*/
|
||||
zoom: 1;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Firefox: Get rid of the inner focus border */
|
||||
.k-button::-moz-focus-inner{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
81
src/buttons/css/button.css
Normal file
81
src/buttons/css/button.css
Normal file
@ -0,0 +1,81 @@
|
||||
.k-button {
|
||||
font-size: 100%;
|
||||
*font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
|
||||
*overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
|
||||
padding: 0.5em 1.5em 0.5em;
|
||||
color: #444; /* rgba not supported (IE 8) */
|
||||
color: rgba(0, 0, 0, 0.80); /* rgba supported */
|
||||
*color: #444; /* IE 6 & 7 */
|
||||
border: 1px solid #999; /*IE 6/7/8*/
|
||||
border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
|
||||
background-color: #E6E6E6;
|
||||
text-decoration: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Transitions */
|
||||
-webkit-transition: 0.1s linear -webkit-box-shadow;
|
||||
-moz-transition: 0.1s linear -moz-box-shadow;
|
||||
-ms-transition: 0.1s linear box-shadow;
|
||||
-o-transition: 0.1s linear box-shadow;
|
||||
transition: 0.1s linear box-shadow;
|
||||
}
|
||||
|
||||
|
||||
.k-button-hover,
|
||||
.k-button:hover {
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0);
|
||||
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05)));
|
||||
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
|
||||
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05));
|
||||
background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
|
||||
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05));
|
||||
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05));
|
||||
}
|
||||
|
||||
.k-button-active,
|
||||
.k-button:active {
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
|
||||
-moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
|
||||
}
|
||||
|
||||
.k-button[disabled],
|
||||
.k-button-disabled,
|
||||
.k-button-disabled:hover,
|
||||
.k-button-disabled:active {
|
||||
border: none;
|
||||
background-image: none;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
filter: alpha(opacity=40);
|
||||
-khtml-opacity: 0.40;
|
||||
-moz-opacity: 0.40;
|
||||
opacity: 0.40;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.k-button-hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Firefox: Get rid of the inner focus border */
|
||||
.k-button::-moz-focus-inner{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Sam */
|
||||
.k-button-primary,
|
||||
.k-button-selected,
|
||||
a.k-button-primary,
|
||||
a.k-button-selected {
|
||||
background-color: rgb(0, 120, 231);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.k-button:-moz-focusring {
|
||||
outline-color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
120
src/buttons/tests/manual/button.html
Normal file
120
src/buttons/tests/manual/button.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Button Manual Tests</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base/base-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons/buttons-min.css">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.k-button-green {
|
||||
text-transform: uppercase;
|
||||
font-weight:bold;
|
||||
color: white;
|
||||
padding: 0.8em 2.5em;
|
||||
background: #16bb51;
|
||||
border-radius: 6px;
|
||||
text-shadow: 0 1px 1px rgb(22, 116, 29);
|
||||
}
|
||||
|
||||
.k-button-red {
|
||||
background: red;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgb(170, 46, 23);
|
||||
border: 3px solid rgb(131, 2, 2);
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
.k-button-yellow {
|
||||
background: rgb(255, 236, 15);
|
||||
color: rgb(146, 128, 32);
|
||||
border: 1px solid rgb(201, 189, 52);
|
||||
text-shadow: -1px 1px 1px white;
|
||||
}
|
||||
|
||||
.k-button-wedding:hover {
|
||||
background: #555;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.k-button-wedding:active {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Regular Buttons</h2>
|
||||
<button class="k-button">A Regular Button</button>
|
||||
<a class="k-button" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Disabled Buttons</h2>
|
||||
<button class="k-button k-button-disabled">A Regular Button</button>
|
||||
<a class="k-button k-button-disabled" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Active Buttons</h2>
|
||||
<button class="k-button k-button-active">A Regular Button</button>
|
||||
<a class="k-button k-button-active" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Primary/Selected Buttons</h2>
|
||||
<button class="k-button k-button-primary">A Regular Button</button>
|
||||
<a class="k-button k-button-primary" href="#">An anchor Button</a>
|
||||
|
||||
|
||||
<h2>Customizing Buttons</h2>
|
||||
<p>
|
||||
<button class="k-button k-button-green">A Custom Button</button>
|
||||
<a class="k-button k-button-green" href="#">An anchor Button</a>
|
||||
</p>
|
||||
<p>
|
||||
<button class="k-button k-button-red">Another custom Button</button>
|
||||
<a class="k-button k-button-red" href="#">Custom Button</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="k-button k-button-yellow">Another custom Button</button>
|
||||
<a class="k-button k-button-yellow" href="#">Custom Button</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="k-button k-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
Start Playing Movie
|
||||
</button>
|
||||
|
||||
<a class="k-button k-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
Start Playing Movie
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation <a href="#">ullamco laboris nisi ut aliquip</a> ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat <a href="#">nulla pariatur</a>. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
2
src/forms/HISTORY.md
Normal file
2
src/forms/HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Forms Change History
|
||||
====================
|
||||
40
src/forms/LICENSE.md
Normal file
40
src/forms/LICENSE.md
Normal file
@ -0,0 +1,40 @@
|
||||
Software License Agreement (BSD License)
|
||||
========================================
|
||||
|
||||
Copyright 2012 Yahoo! Inc. All rights reserved.
|
||||
-----------------------------------------------
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
* Neither the name of the Yahoo! Inc. nor the
|
||||
names of its contributors may be used to endorse or promote products
|
||||
derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
Normalize.css License
|
||||
=====================
|
||||
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
-------------------------------------------------
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
4
src/forms/README.md
Normal file
4
src/forms/README.md
Normal file
@ -0,0 +1,4 @@
|
||||
Forms
|
||||
=====
|
||||
|
||||
Super simple CSS for HTML Form Elements.
|
||||
155
src/forms/css/forms-core.css
Normal file
155
src/forms/css/forms-core.css
Normal file
@ -0,0 +1,155 @@
|
||||
/*! Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */
|
||||
/* This page lists core form styles adopted from Normalize.css. */
|
||||
/*! Copyright (c) Nicolas Gallagher and Jonathan Neal */
|
||||
|
||||
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* This page has Normalize.css form-specific style rules applied to a .k-form context */
|
||||
|
||||
/* ==========
|
||||
Forms Core
|
||||
=========*/
|
||||
|
||||
/*
|
||||
* Corrects margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.k-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
.k-form fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 6/7/8/9.
|
||||
* 2. Corrects text not wrapping in Firefox 3.
|
||||
* 3. Corrects alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.k-form legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font size not being inherited in all browsers.
|
||||
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improves appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input,
|
||||
.k-form select,
|
||||
.k-form textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
.k-form button,
|
||||
.k-form input[type="button"], /* 1 */
|
||||
.k-form input[type="reset"],
|
||||
.k-form input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
.k-form button[disabled],
|
||||
.k-form input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to content-box in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
* 3. Removes excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
.k-form input[type="checkbox"],
|
||||
.k-form input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
.k-form input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
.k-form input[type="search"]::-webkit-search-cancel-button,
|
||||
.k-form input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
.k-form button::-moz-focus-inner,
|
||||
.k-form input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
.k-form textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
31
src/forms/css/forms-responsive.css
Normal file
31
src/forms/css/forms-responsive.css
Normal file
@ -0,0 +1,31 @@
|
||||
@media only screen and (max-width : 480px) {
|
||||
.k-form button[type='submit'] {
|
||||
margin: 0.7em 0 0;
|
||||
}
|
||||
|
||||
.k-form input[type='text'], .k-form button, .k-form label {
|
||||
margin-bottom: 0.3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-group input[type='text'] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.k-form-aligned .k-control-group label {
|
||||
margin-bottom: 0.3em;
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.k-form-aligned .k-controls {
|
||||
margin: 1.5em 0 0 0;
|
||||
}
|
||||
|
||||
.k-form .k-help-inline {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */
|
||||
}
|
||||
}
|
||||
167
src/forms/css/forms.css
Normal file
167
src/forms/css/forms.css
Normal file
@ -0,0 +1,167 @@
|
||||
.k-form input,
|
||||
.k-form select {
|
||||
padding: 0.5em 0.6em;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 0.8em;
|
||||
box-shadow: inset 0 1px 3px #ddd;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: 0.3s linear border;
|
||||
-moz-transition: 0.3s linear border;
|
||||
-ms-transition: 0.3s linear border;
|
||||
-o-transition: 0.3s linear border;
|
||||
transition: 0.3s linear border;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.k-form input:focus,
|
||||
.k-form select:focus {
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
border-color: #129FEA;
|
||||
}
|
||||
.k-form .k-checkbox,
|
||||
.k-form .k-radio {
|
||||
margin: 0.5em 0;
|
||||
display: block;
|
||||
}
|
||||
.k-form input[disabled],
|
||||
.k-form select[disabled],
|
||||
.k-form textarea[disabled],
|
||||
.k-form input[readonly],
|
||||
.k-form select[readonly],
|
||||
.k-form textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: #eaeded;
|
||||
color: #cad2d3;
|
||||
border-color: transparent;
|
||||
}
|
||||
.k-form input:focus:invalid,
|
||||
.k-form textarea:focus:invalid,
|
||||
.k-form select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border: 1px solid #ee5f5b;
|
||||
}
|
||||
.k-form input:focus:invalid:focus,
|
||||
.k-form textarea:focus:invalid:focus,
|
||||
.k-form select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
}
|
||||
.k-form select {
|
||||
border: 1px solid #ccc;
|
||||
background-color: white;
|
||||
}
|
||||
.k-form select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
.k-form label {
|
||||
margin: 0.5em 0 0.2em;
|
||||
color: #999;
|
||||
font-size:90%;
|
||||
}
|
||||
.k-form fieldset {
|
||||
margin: 0;
|
||||
padding: 0.35em 0 0.75em;
|
||||
border: 0;
|
||||
}
|
||||
.k-form legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.3em 0;
|
||||
margin-bottom: 0.3em;
|
||||
font-size: 125%;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.k-form.k-form-stacked input[type='text'],
|
||||
.k-form.k-form-stacked select,
|
||||
.k-form.k-form-stacked label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-form-aligned input,
|
||||
.k-form-aligned textarea,
|
||||
.k-form-aligned select,
|
||||
.k-form-aligned .k-help-inline {
|
||||
display: inline-block;
|
||||
*display: inline; /* IE7 inline-block hack */
|
||||
*zoom: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* aligned Forms */
|
||||
.k-form-aligned .k-control-group {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.k-form-aligned .k-control-group label {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
.k-form-aligned .k-controls {
|
||||
margin: 1.5em 0 0 10em;
|
||||
}
|
||||
|
||||
/* Rounded Inputs */
|
||||
.k-form .k-input-rounded {
|
||||
border-radius: 20px;
|
||||
padding-left:1em;
|
||||
}
|
||||
|
||||
/* Grouped Inputs */
|
||||
.k-form .k-group fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.k-form .k-group input {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.k-form .k-group input:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.k-form .k-group input:first-child {
|
||||
top: 1px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.k-form .k-group input:last-child {
|
||||
top: -2px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.k-form .k-group button {
|
||||
margin: 0.35em 0;
|
||||
}
|
||||
|
||||
.k-form .k-input-1 {
|
||||
width: 100%;
|
||||
}
|
||||
.k-form .k-input-2-3 {
|
||||
width: 66%;
|
||||
}
|
||||
.k-form .k-input-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.k-form .k-input-1-3 {
|
||||
width: 33%;
|
||||
}
|
||||
.k-form .k-input-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* Inline help for forms */
|
||||
.k-form .k-help-inline {
|
||||
display: inline-block;
|
||||
padding-left: 0.3em;
|
||||
color: #666;
|
||||
vertical-align: middle;
|
||||
font-size: 90%;
|
||||
}
|
||||
343
src/forms/tests/manual/index.html
Normal file
343
src/forms/tests/manual/index.html
Normal file
@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="viewport" content="width = device-width">
|
||||
<title>Forms CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids-responsive/grids-responsive-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/forms/forms-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons/buttons-min.css">
|
||||
|
||||
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../css/forms.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/forms-responsive.css"> -->
|
||||
<style>
|
||||
body {
|
||||
color: #333;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: black;
|
||||
min-height: 80px;
|
||||
margin: 0;
|
||||
color:white;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.header h2 {
|
||||
font-weight:300;
|
||||
color: #666;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
|
||||
"Helvetica Neue", sans-serif;
|
||||
font-weight: 300;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.content {
|
||||
padding:0 30px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
color:#2B474F;
|
||||
margin:50px 0 20px 0;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: #61B842;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="k-skin-sam">
|
||||
|
||||
<div class="header y-u-1">
|
||||
|
||||
<h1 class="k-u-1">Kimono Forms CSS</h1>
|
||||
<h2 class="k-u">Simple styling for HTML Form elements.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<p>
|
||||
CSSForm is a YUI module that makes it easy to display good looking forms on your website.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<h2>Default Form</h2>
|
||||
|
||||
<form class="k-form">
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
<input type="text" placeholder="Email">
|
||||
<input type="password" placeholder="Password">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="k-button">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Multi-Column Form (with YUI Grids)</h2>
|
||||
|
||||
<p>
|
||||
Multi-column forms such as the one below can be created by pulling down YUI Grids.
|
||||
</p>
|
||||
|
||||
<form class="k-form k-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<div class='k-g-r'>
|
||||
<div class='k-u-1-3'>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='k-u-1-3'>
|
||||
<label>Last Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='k-u-1-3'>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
|
||||
<div class='k-u-1-3'>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class='k-u-1-3'>
|
||||
<label>State</label>
|
||||
<select class='k-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="k-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='k-button'>Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Stacked Form</h2>
|
||||
|
||||
<p>
|
||||
Apply stacked label styling to any form by applying the <code>k-form-stacked</code> classname.
|
||||
</p>
|
||||
<form class="k-form k-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
<label>Last Name</label>
|
||||
<input type="text">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
<aside class='k-help-inline'>This is a required field.</aside>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
<label>State</label>
|
||||
<select class='k-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
<label class="k-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='k-button notice'>Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Aligned Form</h2>
|
||||
|
||||
<p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p>
|
||||
|
||||
<form class="k-form k-form-aligned">
|
||||
<fieldset>
|
||||
<div class="k-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<label>Password</label>
|
||||
<input type="password" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="k-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="k-controls">
|
||||
<label class="k-checkbox">
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<button type="submit" class="k-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Grouped Inputs</h2>
|
||||
|
||||
<p>Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.</p>
|
||||
|
||||
<form class="k-form">
|
||||
<fieldset class='k-group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Username'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Password'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Email'>
|
||||
</fieldset>
|
||||
<fieldset class='k-group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='Another Group'>
|
||||
<input type="text" class="k-input-1-3" placeholder='More Stuff'>
|
||||
<button type="submit" class="k-button k-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Input Sizing</h2>
|
||||
|
||||
<p>You can take advantage of YUI Grids and the <code>k-input-block</code> class to create fluid width inputs in practically any size that you want.</p>
|
||||
|
||||
<form class="k-form">
|
||||
<input class="k-input-1" type="text" placeholder=".k-input-1"><br/>
|
||||
<input class="k-input-2-3" type="text" placeholder=".k-input-2-3"><br/>
|
||||
<input class="k-input-1-2" type="text" placeholder=".k-input-1-2"><br/>
|
||||
<input class="k-input-1-3" type="text" placeholder=".k-input-1-3"><br/>
|
||||
<input class="k-input-1-4" type="text" placeholder=".k-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
<div class="k-g sizing">
|
||||
<form class="k-form">
|
||||
<div class="k-u-1-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-4">
|
||||
</div>
|
||||
<div class="k-u-3-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-3-4">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
</div>
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-8">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-8">
|
||||
</div>
|
||||
<div class="k-u-1-8">
|
||||
<input class="v" type="text" placeholder=".k-u-1-8">
|
||||
</div>
|
||||
<div class="k-u-1-4">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-4">
|
||||
</div>
|
||||
<div class="k-u-1-2">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="k-u-1-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1-5">
|
||||
</div>
|
||||
<div class="k-u-2-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-2-5">
|
||||
</div>
|
||||
<div class="k-u-2-5">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="k-u-1">
|
||||
<input class="k-input-1" type="text" placeholder=".k-u-1">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
<p>Add the required attribute to any form control.</p>
|
||||
<form class="k-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
<p>Add the disabled attribute to any form control.</p>
|
||||
<form class="k-form">
|
||||
<input class="k-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</form>
|
||||
|
||||
<h2>Rounded Form</h2>
|
||||
<p>Add the k-input-rounded classname to any form control.</p>
|
||||
|
||||
<form class="k-form">
|
||||
<input type="text" class="k-input-rounded">
|
||||
<button type="submit" class='k-button'>Search</button>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
<form class="k-form">
|
||||
<select class='k-input-medium'>
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
|
||||
|
||||
<select multiple="multiple" class="k-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
<form class="k-form">
|
||||
<label class="k-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
|
||||
<label class="k-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one..
|
||||
</label>
|
||||
<label class="k-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
..Or this one!
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
</body>
|
||||
</html>
|
||||
2
src/grids/HISTORY.md
Normal file
2
src/grids/HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Grids Change History
|
||||
====================
|
||||
9
src/grids/README.md
Normal file
9
src/grids/README.md
Normal file
@ -0,0 +1,9 @@
|
||||
Grids
|
||||
=====
|
||||
|
||||
This foundational grid provides a simple system for layout out content. The
|
||||
basic components are "grids" and "units". A "grid" (k-g) contains one or
|
||||
more "units" (k-u). The type of "unit" chosen describes how it should be
|
||||
sized (e.g. "k-u-1-2" takes up half the grid, "k-u-1-3" takes up
|
||||
one-third, et cetera). The only constrains for Kimono Grids are that all "units"
|
||||
are children of a "grid".
|
||||
24
src/grids/css/cssgrids-base.css
Normal file
24
src/grids/css/cssgrids-base.css
Normal file
@ -0,0 +1,24 @@
|
||||
.k-g {
|
||||
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
|
||||
*letter-spacing: normal; /* reset IE < 8 */
|
||||
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
|
||||
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
|
||||
}
|
||||
|
||||
/* Opera as of 12 on Windows needs word-spacing.
|
||||
The ".opera-only" selector is used to prevent actual prefocus styling
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.k-g {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.k-u {
|
||||
display: inline-block;
|
||||
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
54
src/grids/css/cssgrids-responsive-base.css
Normal file
54
src/grids/css/cssgrids-responsive-base.css
Normal file
@ -0,0 +1,54 @@
|
||||
.k-g-r {
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
*word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
/* Opera as of 12 on Windows needs word-spacing.
|
||||
The ".opera-only" selector is used to prevent actual prefocus styling
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.k-g-r {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.k-g-r img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width:980px) {
|
||||
.k-visible-phone {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-tablet {
|
||||
display: none;
|
||||
}
|
||||
.k-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
.k-g-r > [class ^= "k-u"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
.k-g-r > [class ^= "k-u"] {
|
||||
width: 100%;
|
||||
}
|
||||
.k-hidden-phone {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width:768px) and (max-width:979px) {
|
||||
.k-hidden-tablet {
|
||||
display: none;
|
||||
}
|
||||
.k-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
147
src/grids/css/cssgrids-units.css
Normal file
147
src/grids/css/cssgrids-units.css
Normal file
@ -0,0 +1,147 @@
|
||||
.k-u-1,
|
||||
.k-u-1-2,
|
||||
.k-u-1-3,
|
||||
.k-u-2-3,
|
||||
.k-u-1-4,
|
||||
.k-u-3-4,
|
||||
.k-u-1-5,
|
||||
.k-u-2-5,
|
||||
.k-u-3-5,
|
||||
.k-u-4-5,
|
||||
.k-u-1-6,
|
||||
.k-u-5-6,
|
||||
.k-u-1-8,
|
||||
.k-u-3-8,
|
||||
.k-u-5-8,
|
||||
.k-u-7-8,
|
||||
.k-u-1-12,
|
||||
.k-u-5-12,
|
||||
.k-u-7-12,
|
||||
.k-u-11-12,
|
||||
.k-u-1-24,
|
||||
.k-u-5-24,
|
||||
.k-u-7-24,
|
||||
.k-u-11-24,
|
||||
.k-u-13-24,
|
||||
.k-u-17-24,
|
||||
.k-u-19-24,
|
||||
.k-u-23-24 {
|
||||
display: inline-block;
|
||||
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.k-u-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-u-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.k-u-1-3 {
|
||||
width: 33.33333%;
|
||||
}
|
||||
|
||||
.k-u-2-3 {
|
||||
width: 66.66666%;
|
||||
}
|
||||
|
||||
.k-u-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.k-u-3-4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.k-u-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.k-u-2-5 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.k-u-3-5 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.k-u-4-5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.k-u-1-6 {
|
||||
width: 16.656%;
|
||||
}
|
||||
|
||||
.k-u-5-6 {
|
||||
width: 83.33%;
|
||||
}
|
||||
|
||||
.k-u-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.k-u-3-8 {
|
||||
width: 37.5%;
|
||||
}
|
||||
|
||||
.k-u-5-8 {
|
||||
width: 62.5%;
|
||||
}
|
||||
|
||||
.k-u-7-8 {
|
||||
width: 87.5%;
|
||||
}
|
||||
|
||||
.k-u-1-12 {
|
||||
width: 8.3333%;
|
||||
}
|
||||
|
||||
.k-u-5-12 {
|
||||
width: 41.6666%;
|
||||
}
|
||||
|
||||
.k-u-7-12 {
|
||||
width: 58.3333%;
|
||||
}
|
||||
|
||||
.k-u-11-12 {
|
||||
width: 91.6666%;
|
||||
}
|
||||
|
||||
.k-u-1-24 {
|
||||
width: 4.1666%;
|
||||
}
|
||||
|
||||
.k-u-5-24 {
|
||||
width: 20.8333%;
|
||||
}
|
||||
|
||||
.k-u-7-24 {
|
||||
width: 29.1666%;
|
||||
}
|
||||
|
||||
.k-u-11-24 {
|
||||
width: 45.8333%;
|
||||
}
|
||||
|
||||
.k-u-13-24 {
|
||||
width: 54.1666%;
|
||||
}
|
||||
|
||||
.k-u-17-24 {
|
||||
width: 70.8333%;
|
||||
}
|
||||
|
||||
.k-u-19-24 {
|
||||
width: 79.1666%;
|
||||
}
|
||||
|
||||
.k-u-23-24 {
|
||||
width: 95.8333%;
|
||||
}
|
||||
175
src/grids/tests/manual/responsive.html
Normal file
175
src/grids/tests/manual/responsive.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids/grids-min.css">
|
||||
<title>Responsive Grids Test</title>
|
||||
</head>
|
||||
<body class="k-g-r">
|
||||
|
||||
<div class="header k-u-1">
|
||||
|
||||
<h1 class="k-u-1">Kimono Responsive Grids</h1>
|
||||
<h2 class="k-u">An example of making your Kimono Grids behave responsively.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='k-g'>
|
||||
<h1 class="k-u-1 centered">How does it work?</h1>
|
||||
<div class='k-u-1'>
|
||||
<div class='cell'>
|
||||
<p>Kimono Responsive Grids builds on top of the existing Kimono Grids implementation. It adds a single new class name called <code>.k-g-r</code>. You can use this instead of using <code>.k-g</code> as you normally do. All elements with a class name of <code>.k-u-*-*</code> will automatically become responsive if they are direct descendents of a <code>.k-g-r.</code></p>
|
||||
|
||||
<h2>The HTML</h2>
|
||||
<p>The first gist shows how regular Kimono grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>k-g</code> with <code>k-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p>
|
||||
<script src="https://gist.github.com/3955432.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="k-u-1 centered">Features.</h1>
|
||||
<div class="k-u-1">
|
||||
<div class="cell">
|
||||
<ul>
|
||||
<li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
|
||||
<li>Collapses elements to 100% if smaller than a certain width (767px by default)</li>
|
||||
<li>Adjusts images to fit on smaller screens</li>
|
||||
<li>Works with as many columns as you want (or as few)</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="k-g-r">
|
||||
<h1 class="k-u-1 centered">Example.</h1>
|
||||
<div class="k-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Fast</h3>
|
||||
<p>YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="k-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Complete</h3>
|
||||
<p>YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="k-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Industrial Strength</h3>
|
||||
<p>A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="k-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Free and Open</h3>
|
||||
<p>YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="k-u-1 centered">
|
||||
<img class="k-u" src="http://lorempixel.com/800/400/" alt="test image">
|
||||
</div>
|
||||
|
||||
<div class="k-u-2-5">
|
||||
<div class="cell">
|
||||
<h3>Two-Fifth Column</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis. Duis nulla dolor, suscipit in venenatis vitae, auctor eu nibh. Proin lobortis arcu nec tellus vehicula vitae pellentesque nisi molestie. Aenean felis ligula, hendrerit id dictum sed, ornare nec leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non lectus et quam porttitor dignissim vitae ac odio. Aenean mattis dui porta lacus egestas ultricies. Mauris vel dolor libero, sit amet rhoncus nibh.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="k-u-3-5">
|
||||
<div class="cell">
|
||||
<h3>Three-Fifth Column</h3>
|
||||
<p>Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl, vitae luctus velit vulputate vel. Aliquam sed sodales orci. Proin varius placerat magna tristique tincidunt. Morbi non dignissim felis. Proin bibendum libero nec felis eleifend porttitor. Morbi auctor venenatis justo, molestie luctus mi pulvinar nec. Pellentesque vitae ornare lacus. Nulla hendrerit tempor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus facilisis cursus. Integer in lacinia dui. Phasellus ullamcorper, sem at congue pretium, velit sapien ornare mi, eu eleifend risus sapien ac eros.</p>
|
||||
|
||||
<p>Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam viverra, augue et sollicitudin dignissim, lectus tellus imperdiet lectus, a tempor ipsum mauris vitae augue. Nullam vel nulla a purus cursus consequat. Nulla orci elit, malesuada nec egestas non, ornare quis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<h1 class="k-u-1 centered">Grids on mobile</h1>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='k-g'>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='k-g-r'>
|
||||
<h1 class="k-u-1 centered">Helper Classes</h1>
|
||||
<div class="k-u-1 k-hidden-phone">
|
||||
<div class="cell">
|
||||
<h4>No Phones Allowed</h4>
|
||||
<p>Should be hidden on phones</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1 k-hidden-tablet">
|
||||
<div class="cell">
|
||||
<h4>No Tablets Allowed</h4>
|
||||
<p>Should be hidden on tablets</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-u-1 k-hidden-desktop">
|
||||
<div class="cell">
|
||||
<h4>No big screens allowed.</h4>
|
||||
<p>Should be hidden on desktops/laptops</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
2
src/menus/HISTORY.md
Normal file
2
src/menus/HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Menus Change History
|
||||
====================
|
||||
4
src/menus/README.md
Normal file
4
src/menus/README.md
Normal file
@ -0,0 +1,4 @@
|
||||
Menus
|
||||
=====
|
||||
|
||||
Super simple CSS for HTML Menus.
|
||||
111
src/menus/css/list-core.css
Normal file
111
src/menus/css/list-core.css
Normal file
@ -0,0 +1,111 @@
|
||||
.k-menu ul {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.k-menu.k-menu-open {
|
||||
visibility: visible;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.k-menu ul {
|
||||
left: -10000px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: -10000px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.k-menu > ul { position: relative; }
|
||||
|
||||
.k-menu-open > ul {
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.k-menu li { position: relative; }
|
||||
|
||||
.k-menu a, .k-menu .k-menu-heading {
|
||||
display: block;
|
||||
color: inherit;
|
||||
line-height: 1.5em;
|
||||
padding: 5px 20px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.k-menu.k-menu-horizontal > .k-menu-heading {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.k-menu.k-menu-horizontal > ul {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.k-menu li a { padding: 5px 20px; }
|
||||
|
||||
.k-menu-can-have-children > .k-menu-label:after {
|
||||
content: '\25B8';
|
||||
float: right;
|
||||
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */
|
||||
margin-right: -20px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.k-menu-can-have-children > .k-menu-label {
|
||||
padding-right:30px;
|
||||
}
|
||||
|
||||
.k-menu-separator {
|
||||
background-color: #dfdfdf;
|
||||
display: block;
|
||||
height: 1px;
|
||||
font-size: 0;
|
||||
margin: 7px 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.k-menu-hidden { display: none; }
|
||||
|
||||
/* FIXED MENU */
|
||||
.k-menu-fixed {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* HORIZONTAL MENU CODE */
|
||||
|
||||
/* Initial menus should be inline-block so that they are horizontal */
|
||||
.k-menu-horizontal li {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Submenus should still be display:block; */
|
||||
.k-menu-horizontal li li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Content after should be down arrow */
|
||||
.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label:after {
|
||||
content: "\25BE";
|
||||
}
|
||||
/*Add extra padding to elements that have the arrow so that the hover looks nice */
|
||||
.k-menu-horizontal > .k-menu-children > .k-menu-can-have-children > .k-menu-label {
|
||||
padding-right:30px;
|
||||
}
|
||||
|
||||
31
src/menus/css/list-paginator.css
Normal file
31
src/menus/css/list-paginator.css
Normal file
@ -0,0 +1,31 @@
|
||||
.k-paginator {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.k-paginator li {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
/* IE 7 inline-block hack */
|
||||
*zoom: 1;
|
||||
margin: 0 -0.35em 0 0;
|
||||
}
|
||||
.k-paginator .k-button {
|
||||
border-radius: 0;
|
||||
padding: 0.8em 1.4em;
|
||||
vertical-align: top;
|
||||
height: 1.1em;
|
||||
}
|
||||
.k-paginator .k-button:focus {
|
||||
outline-style: none;
|
||||
}
|
||||
.k-paginator .prev, .k-paginator .next {
|
||||
color: #C0C1C3;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0, 0.45);
|
||||
}
|
||||
.k-paginator .prev {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.k-paginator .next {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
14
src/menus/css/list-responsive.css
Normal file
14
src/menus/css/list-responsive.css
Normal file
@ -0,0 +1,14 @@
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.k-menu-horizontal {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.k-menu-children li {
|
||||
display: block;
|
||||
border-bottom:1px solid block;
|
||||
}
|
||||
|
||||
}
|
||||
83
src/menus/css/list.css
Normal file
83
src/menus/css/list.css
Normal file
@ -0,0 +1,83 @@
|
||||
/* MAIN MENU STYLING */
|
||||
|
||||
.k-menu.k-menu-open,
|
||||
.k-menu.k-menu-horizontal li .k-menu-children {
|
||||
background: #ffffff; /* Old browsers */
|
||||
border-radius: 3px;
|
||||
border: 1px solid #b7b7b7;
|
||||
}
|
||||
|
||||
/* remove borders for horizontal menus */
|
||||
.k-menu.k-menu-horizontal, .k-menu.k-menu-horizontal .k-menu-heading {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* LINK STYLES */
|
||||
|
||||
.k-menu a {
|
||||
border: 1px solid transparent;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
}
|
||||
|
||||
.k-menu a,
|
||||
.k-menu .k-menu-can-have-children > li:after {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-can-have-children > li:hover:after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* HOVER STATES */
|
||||
.k-menu li a:hover {
|
||||
background: #46b9e3;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* DISABLED STATES */
|
||||
.k-menu li.k-menu-disabled a:hover {
|
||||
background: #fff;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-disabled > a {
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.k-menu .k-menu-disabled > a,
|
||||
.k-menu .k-menu-can-have-children.k-menu-disabled > a:after {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
/* HEADINGS */
|
||||
.k-menu .k-menu-heading {
|
||||
color: #565d64;
|
||||
text-transform: uppercase;
|
||||
font-size:90%;
|
||||
margin-top:0.5em;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #dfdfdf;
|
||||
}
|
||||
|
||||
/* ACTIVE MENU ITEM */
|
||||
.k-menu .k-menu-selected a {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* FIXED MENU */
|
||||
.k-menu.k-menu-open.k-menu-fixed {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
}
|
||||
208
src/menus/tests/manual/list.html
Normal file
208
src/menus/tests/manual/list.html
Normal file
@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="viewport" content="width = device-width">
|
||||
<title>List CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base/base-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons/buttons-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/menus/menus-min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: black;
|
||||
min-height: 80px;
|
||||
margin: 0;
|
||||
color:white;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.header h2 {
|
||||
font-weight:300;
|
||||
color: #666;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding:0 30px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
color:#2B474F;
|
||||
margin:50px 0 20px 0;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#menu-1 {
|
||||
width:120px;
|
||||
}
|
||||
|
||||
#vertical-menu1, #vertical-menu2, #vertical-menu3 {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
#vertical-menu3 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.k-menu {
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="k-skin-sam">
|
||||
|
||||
<div class="header y-u-1">
|
||||
|
||||
<h1 class="k-u-1">Kimono List CSS</h1>
|
||||
<h2 class="k-u">Simple styling for HTML List elements.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<p>
|
||||
<code>gallerycss-csslist</code> is a YUI Gallery module that makes it easy to display good looking lists on your website.
|
||||
</p>
|
||||
|
||||
<h2>Horizontal Menu</h2>
|
||||
|
||||
<p>
|
||||
You can mark the active list element by adding the <code>.k-menu-selected</code> class to the list element.
|
||||
</p>
|
||||
|
||||
<div class="k-menu k-menu-open k-menu-horizontal">
|
||||
<a href="#" class="k-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="k-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="k-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Vertical Menu</h2>
|
||||
|
||||
<div id="vertical-menu1" class="k-menu k-menu-open">
|
||||
<a href="#" class="k-menu-heading">Site Title</a>
|
||||
<ul>
|
||||
<li class="k-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="k-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="k-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="vertical-menu1" class="k-menu k-menu-open">
|
||||
<ul>
|
||||
<li class="k-menu-heading">Site Title</li>
|
||||
<li class="k-menu-selected"><a href="#">Home</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li class="k-menu-heading">Yahoo! Sites</li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li class="k-menu-disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Add Dropdowns to Menus</h2>
|
||||
|
||||
<p>
|
||||
Adding dropdowns to menus requires the use of JavaScript. The <code>Y.Menu</code> module adds dropdown functionality and the ability to create JavaScript menus. It uses <code>csslist</code> to style these menus, so they look identical.
|
||||
</p>
|
||||
|
||||
|
||||
<div id="horizontal-menu">
|
||||
<a href="#" class="k-menu-heading">Site Title</a>
|
||||
<ul id="std-menu-items">
|
||||
<li class="k-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
<li>
|
||||
<a href="#">Other</a>
|
||||
<ul>
|
||||
<li class="k-menu-heading">More from Yahoo!</li>
|
||||
<li class="k-menu-separator"></li>
|
||||
<li><a href="#">Autos</a></li>
|
||||
<li><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Answers</a></li>
|
||||
<li>
|
||||
<a href="#">Even More</a>
|
||||
<ul>
|
||||
<li><a href="#">Horoscopes</a></li>
|
||||
<li><a href="#">Games</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">OMG</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Fixed Menus</h2>
|
||||
|
||||
<p>
|
||||
Fixed menus can be created by adding the <code>k-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="k-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
|
||||
</p>
|
||||
|
||||
<div id="fixed-menu" class="k-menu k-menu-horizontal k-menu-fixed">
|
||||
<ul>
|
||||
<li class="k-menu-selected"><a href="#">Flickr</a></li>
|
||||
<li><a href="#">Messenger</a></li>
|
||||
<li><a href="#">Sports</a></li>
|
||||
<li><a href="#">Finance</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<script src="../../../../../yui3/build/yui/yui.js"></script>
|
||||
<script>
|
||||
var Y = YUI({
|
||||
fetchCSS: false,
|
||||
classNamePrefix: 'k'
|
||||
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
|
||||
|
||||
//Y.config.classNamePrefix = 'k';
|
||||
|
||||
var horizontalMenu = new Y.Menu({
|
||||
container: '#horizontal-menu',
|
||||
sourceNode: '#std-menu-items',
|
||||
orientation: 'horizontal',
|
||||
hideOnOutsideClick: false
|
||||
});
|
||||
|
||||
horizontalMenu.render();
|
||||
horizontalMenu.show();
|
||||
|
||||
|
||||
Y.one('#showFixedMenuBtn').on('tap', function (e) {
|
||||
var fixedMenu = Y.one('#fixed-menu');
|
||||
fixedMenu.toggleClass('k-menu-open');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2
src/tables/HISTORY.md
Normal file
2
src/tables/HISTORY.md
Normal file
@ -0,0 +1,2 @@
|
||||
Tables Change History
|
||||
=====================
|
||||
4
src/tables/README.md
Normal file
4
src/tables/README.md
Normal file
@ -0,0 +1,4 @@
|
||||
Tables
|
||||
======
|
||||
|
||||
Super simple CSS for your `<table>`s.
|
||||
82
src/tables/css/tables.css
Normal file
82
src/tables/css/tables.css
Normal file
@ -0,0 +1,82 @@
|
||||
/*
|
||||
* CSS TABLES
|
||||
* ==========
|
||||
* Simple CSS for HTML Tables
|
||||
* Author: tilomitra
|
||||
*/
|
||||
|
||||
/* foundational CSS */
|
||||
.k-table {
|
||||
/* Remove spacing between table cells (from Normalize.css) */
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid #cbcbcb;
|
||||
}
|
||||
|
||||
.k-table caption {
|
||||
color: #000;
|
||||
font: italic 85%/1 arial, sans-serif;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.k-table td,
|
||||
.k-table th {
|
||||
border-left: 1px solid #cbcbcb;/* inner column border */
|
||||
border-width: 0 0 0 1px;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
overflow: visible; /*to make ths where the title is really long work*/
|
||||
padding: 6px 12px; /* cell padding */
|
||||
}
|
||||
.k-table td:first-child,
|
||||
.k-table th:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.k-table thead {
|
||||
background: #e0e0e0;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
striping:
|
||||
even - #fff (white)
|
||||
odd - #edf5ff (light blue)
|
||||
*/
|
||||
.k-table td {
|
||||
background-color: transparent;
|
||||
}
|
||||
.k-table-odd td {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* nth-child selector for modern browsers */
|
||||
.k-table-striped tr:nth-child(2n-1) td {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* BORDERED TABLES */
|
||||
.k-table-bordered td {
|
||||
border-bottom:1px solid #cbcbcb;
|
||||
}
|
||||
.k-table-bordered tbody > tr:last-child td,
|
||||
.k-table-horizontal tbody > tr:last-child td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* HORIZONTAL BORDERED TABLES */
|
||||
|
||||
.k-table-horizontal td,
|
||||
.k-table-horizontal th {
|
||||
border-width: 0 0 1px 0;
|
||||
border-bottom:1px solid #cbcbcb;
|
||||
}
|
||||
.k-table-horizontal tbody > tr:last-child td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
289
src/tables/tests/manual/index.html
Normal file
289
src/tables/tests/manual/index.html
Normal file
@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/tables/tables-min.css">
|
||||
<style>
|
||||
body {
|
||||
padding:30px;
|
||||
font-size:14px;
|
||||
width:600px;
|
||||
}
|
||||
table {
|
||||
width:480px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="intro">
|
||||
<h1>gallerycss-csstables</h1>
|
||||
<h2>
|
||||
Simple CSS for HTML Tables
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<h2>Default Table</h2>
|
||||
|
||||
<p>Add the <code>k-table</code> classname to a table to style an HTML table similar to how a YUI 3 Datatable would be styled. This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.</p>
|
||||
<table class="k-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Bordered Table</h2>
|
||||
<p>To add horizontal and vertical borders to all cells, add the <code>k-table-bordered</code> classname to the <code>table</code> element.</p>
|
||||
<table class="k-table k-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Table with Horizontal Borders</h2>
|
||||
<p>If you prefer to just have horizontal lines, add the <code>k-table-horizontal</code> classname to the <code>table</code> element.</p>
|
||||
<table class="k-table k-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Striped Table</h2>
|
||||
<p>Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>k-table-odd</code> class name to every other <code>tr</code> element changes the background of the row and creates a zebra-styled effect.</p>
|
||||
<table class="k-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class='k-table-odd'>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class='k-table-odd'>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h3>Nth Child Selector Styling</h3>
|
||||
<p>Here's a striped table that's zebra-styled using <code>nth-child</code> selectors.</p>
|
||||
<table class="k-table k-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h2>Simple Table with plain header</h2>
|
||||
<p>To remove the styled header, simply add the <code>k-thead-simple</code> class name to the <code>thead</code> element. You can mix and match this with other table class names mentioned above.</p>
|
||||
<table class="k-table k-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user