diff --git a/README.md b/README.md index 6c56eaa..2f0fff9 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ A minimal, responsive CSS framework to get you started. ## Components - **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,183 bytes -- **grid**: coming soon -- **button**: coming soon +- **button**: button styles `GZIPPED SIZE`: 439 bytes - **form**: coming soon -- **table**: coming soon +- **grid**: coming soon - **nav**: coming soon +- **table**: coming soon \ No newline at end of file diff --git a/css/mini-base-button.css b/css/mini-base-button.css new file mode 100644 index 0000000..5c3ac03 --- /dev/null +++ b/css/mini-base-button.css @@ -0,0 +1,268 @@ +/* Base */ +/* Button */ +html { + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 1em; + line-height: 1.5; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } + +body { + margin: 0; + color: #222; + background-color: #eee; } + +article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { + display: block; } + +h1, h2, h3, h4, h5, h6, hr { + line-height: 1.3; + margin: 0.7em 0; + font-weight: 500; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, hr small { + color: #484848; + font-weight: 200; } + +h1 { + font-size: 2em; } + +h2 { + font-size: 1.5em; } + +h3 { + font-size: 1.15em; } + +h4 { + font-size: 1em; } + +h5 { + font-size: 0.8em; } + +h6 { + font-size: 0.7em; } + +small { + font-size: 75%; } + +p, pre { + margin: 0 0 0.6em; } + +ul, ol { + margin-top: 0; + margin-bottom: 0.6em; } + ul ul, ul ol, ol ul, ol ol { + margin-bottom: 0; } + +hr { + box-sizing: content-box; + height: 0; + border: 0; + border-top: 1px solid #c8c8c8; } + +code, pre, kbd, samp { + font-family: monospace; + font-size: 1em; } + +code, pre { + padding: 2px 4px; + background-color: #d8d8d8; + border-radius: 4px; } + +kbd { + padding: 2px 4px; + color: #eee; + background-color: #2b2b2b; + border-radius: 4px; } + +pre { + display: block; + word-break: break-all; + word-wrap: break-word; } + pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; } + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; + color: #2678b3; } + a:active, a:hover { + outline-width: 0; + color: #3793d5; } + a:visited { + color: #1d5c89; } + a:visited:active, a:visited:hover { + color: #2678b3; } + +figure { + margin: 1em 40px; } + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } + +b, strong { + font-weight: inherit; } + +b, strong { + font-weight: bolder; } + +dfn { + font-style: italic; } + +mark { + background-color: #ffff33; + color: #222; } + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +[hidden], .hidden, template { + display: none; } + +audio, video { + display: inline-block; } + +audio:not([controls]) { + display: none; + height: 0; } + +img { + border-style: none; } + +svg:not(:root) { + overflow: hidden; } + +button, input, optgroup, select, textarea { + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 100%; + line-height: 1.3; + margin: 0; } + +button, input, hr { + overflow: visible; } + +button, select { + text-transform: none; } + +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; } + button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +fieldset { + border: 1px solid #c8c8c8; + border-radius: 4px; + margin: 0 2px; + padding: 0.35em 0.65em 0.75em; } + +[type="checkbox"], [type="radio"], legend { + box-sizing: border-box; + padding: 0; } + +legend { + color: inherit; + display: table; + max-width: 100%; + white-space: normal; } + +progress { + display: inline-block; + vertical-align: baseline; } + +textarea { + overflow: auto; } + +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { + height: auto; } + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } + +.btn { + border-radius: 4px; + cursor: pointer; + display: inline-block; + margin: 2px 0; + padding: 6px 12px; + color: #2a2a2a; + background: #dbdbdb; + border: 1px solid #b9b9b9; } + .btn:hover, .btn:active, .btn:focus { + background: #c2c2c2; + border-color: #a0a0a0; } + .btn.disabled, .btn[disabled], .btnfieldset[disabled] { + cursor: not-allowed; + opacity: .65; } + +.btn.btn-b { + color: #eee; + background: #3370bb; + border: 1px solid #2d70af; } + .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus { + background: #285893; + border-color: #235686; } + +.btn.btn-g { + color: #eee; + background: #4caf50; + border: 1px solid #3cb941; } + .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus { + background: #3d8b40; + border-color: #309233; } + +.btn.btn-c { + color: #eee; + background: #38a6e8; + border: 1px solid #2dbdde; } + .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus { + background: #198ed4; + border-color: #1d9dbb; } + +.btn.btn-y { + color: #eee; + background: #edc637; + border: 1px solid #d1bc24; } + .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus { + background: #ddb214; + border-color: #a5951d; } + +.btn.btn-r { + color: #eee; + background: #be2e2a; + border: 1px solid #ae342f; } + .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus { + background: #942421; + border-color: #862824; } + +.btn.btn-lg { + padding: 9px 15px; + font-size: 135%; } + +.btn.btn-sm { + padding: 4px 8px; + font-size: 80%; } diff --git a/css/mini-base-button.min.css b/css/mini-base-button.min.css new file mode 100644 index 0000000..95b2430 --- /dev/null +++ b/css/mini-base-button.min.css @@ -0,0 +1 @@ +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%} \ No newline at end of file diff --git a/css/mini-base.css b/css/mini-base.css index e2ddcb9..b29a0af 100644 --- a/css/mini-base.css +++ b/css/mini-base.css @@ -1,3 +1,5 @@ +/* Base */ +/* Button */ html { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 1em; diff --git a/css/mini-button.css b/css/mini-button.css new file mode 100644 index 0000000..acedc52 --- /dev/null +++ b/css/mini-button.css @@ -0,0 +1,65 @@ +/* Base */ +/* Button */ +.btn { + border-radius: 4px; + cursor: pointer; + display: inline-block; + margin: 2px 0; + padding: 6px 12px; + color: #2a2a2a; + background: #dbdbdb; + border: 1px solid #b9b9b9; } + .btn:hover, .btn:active, .btn:focus { + background: #c2c2c2; + border-color: #a0a0a0; } + .btn.disabled, .btn[disabled], .btnfieldset[disabled] { + cursor: not-allowed; + opacity: .65; } + +.btn.btn-b { + color: #eee; + background: #3370bb; + border: 1px solid #2d70af; } + .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus { + background: #285893; + border-color: #235686; } + +.btn.btn-g { + color: #eee; + background: #4caf50; + border: 1px solid #3cb941; } + .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus { + background: #3d8b40; + border-color: #309233; } + +.btn.btn-c { + color: #eee; + background: #38a6e8; + border: 1px solid #2dbdde; } + .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus { + background: #198ed4; + border-color: #1d9dbb; } + +.btn.btn-y { + color: #eee; + background: #edc637; + border: 1px solid #d1bc24; } + .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus { + background: #ddb214; + border-color: #a5951d; } + +.btn.btn-r { + color: #eee; + background: #be2e2a; + border: 1px solid #ae342f; } + .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus { + background: #942421; + border-color: #862824; } + +.btn.btn-lg { + padding: 9px 15px; + font-size: 135%; } + +.btn.btn-sm { + padding: 4px 8px; + font-size: 80%; } diff --git a/css/mini-button.min.css b/css/mini-button.min.css new file mode 100644 index 0000000..3387e3d --- /dev/null +++ b/css/mini-button.min.css @@ -0,0 +1 @@ +.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%} \ No newline at end of file diff --git a/css/mini-full.css b/css/mini-full.css index e2ddcb9..5c3ac03 100644 --- a/css/mini-full.css +++ b/css/mini-full.css @@ -1,3 +1,5 @@ +/* Base */ +/* Button */ html { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 1em; @@ -200,3 +202,67 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } + +.btn { + border-radius: 4px; + cursor: pointer; + display: inline-block; + margin: 2px 0; + padding: 6px 12px; + color: #2a2a2a; + background: #dbdbdb; + border: 1px solid #b9b9b9; } + .btn:hover, .btn:active, .btn:focus { + background: #c2c2c2; + border-color: #a0a0a0; } + .btn.disabled, .btn[disabled], .btnfieldset[disabled] { + cursor: not-allowed; + opacity: .65; } + +.btn.btn-b { + color: #eee; + background: #3370bb; + border: 1px solid #2d70af; } + .btn.btn-b:hover, .btn.btn-b:active, .btn.btn-b:focus { + background: #285893; + border-color: #235686; } + +.btn.btn-g { + color: #eee; + background: #4caf50; + border: 1px solid #3cb941; } + .btn.btn-g:hover, .btn.btn-g:active, .btn.btn-g:focus { + background: #3d8b40; + border-color: #309233; } + +.btn.btn-c { + color: #eee; + background: #38a6e8; + border: 1px solid #2dbdde; } + .btn.btn-c:hover, .btn.btn-c:active, .btn.btn-c:focus { + background: #198ed4; + border-color: #1d9dbb; } + +.btn.btn-y { + color: #eee; + background: #edc637; + border: 1px solid #d1bc24; } + .btn.btn-y:hover, .btn.btn-y:active, .btn.btn-y:focus { + background: #ddb214; + border-color: #a5951d; } + +.btn.btn-r { + color: #eee; + background: #be2e2a; + border: 1px solid #ae342f; } + .btn.btn-r:hover, .btn.btn-r:active, .btn.btn-r:focus { + background: #942421; + border-color: #862824; } + +.btn.btn-lg { + padding: 9px 15px; + font-size: 135%; } + +.btn.btn-sm { + padding: 4px 8px; + font-size: 80%; } diff --git a/css/mini-full.min.css b/css/mini-full.min.css index c32f206..95b2430 100644 --- a/css/mini-full.min.css +++ b/css/mini-full.min.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} \ No newline at end of file +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%} \ No newline at end of file diff --git a/scss/mini-base-button.scss b/scss/mini-base-button.scss new file mode 100644 index 0000000..cd48094 --- /dev/null +++ b/scss/mini-base-button.scss @@ -0,0 +1,3 @@ +@import 'mini/variables'; +@import 'mini/base'; +@import 'mini/button'; \ No newline at end of file diff --git a/scss/mini-button.scss b/scss/mini-button.scss new file mode 100644 index 0000000..25c5b69 --- /dev/null +++ b/scss/mini-button.scss @@ -0,0 +1,2 @@ +@import 'mini/variables'; +@import 'mini/button'; \ No newline at end of file diff --git a/scss/mini-full.scss b/scss/mini-full.scss index be35e3b..cd48094 100644 --- a/scss/mini-full.scss +++ b/scss/mini-full.scss @@ -1,2 +1,3 @@ @import 'mini/variables'; -@import 'mini/base'; \ No newline at end of file +@import 'mini/base'; +@import 'mini/button'; \ No newline at end of file diff --git a/scss/mini/_button.scss b/scss/mini/_button.scss new file mode 100644 index 0000000..7575b9f --- /dev/null +++ b/scss/mini/_button.scss @@ -0,0 +1,51 @@ +@mixin btn-variant ($color, $background, $border){ + color: $color; + background: $background; + border: 1px solid $border; + &:hover, &:active, &:focus{ + background: darken($background,10%); + border-color: darken($border,10%); + } +} + +.btn{ + border-radius: 4px; + cursor: pointer; + display: inline-block; + margin: 2px 0; + padding: 6px 12px; + @include btn-variant($btn-color, $btn-background-color, $btn-border-color); + &.disabled, &[disabled], &fieldset[disabled]{ + cursor: not-allowed; + opacity: .65; + } +} + +.btn.btn-b{ + @include btn-variant($btn-b-color, $btn-b-background-color, $btn-b-border-color); +} + +.btn.btn-g{ + @include btn-variant($btn-g-color, $btn-g-background-color, $btn-g-border-color); +} + +.btn.btn-c{ + @include btn-variant($btn-c-color, $btn-c-background-color, $btn-c-border-color); +} + +.btn.btn-y{ + @include btn-variant($btn-y-color, $btn-y-background-color, $btn-y-border-color); +} + +.btn.btn-r{ + @include btn-variant($btn-r-color, $btn-r-background-color, $btn-r-border-color); +} + +.btn.btn-lg{ + padding: 9px 15px; + font-size: 135%; +} +.btn.btn-sm{ + padding: 4px 8px; + font-size: 80%; +} \ No newline at end of file diff --git a/scss/mini/_variables.scss b/scss/mini/_variables.scss index e61f2f4..9c5cb8c 100644 --- a/scss/mini/_variables.scss +++ b/scss/mini/_variables.scss @@ -1,4 +1,24 @@ +/* Base */ $body-background-color: #eee; $body-color: #222; $a-color: #2678b3; -$mark-color: #ffff33; \ No newline at end of file +$mark-color: #ffff33; +/* Button */ +$btn-background-color: #dbdbdb; +$btn-color: #2a2a2a; +$btn-border-color: #b9b9b9; +$btn-b-background-color: #3370bb; +$btn-b-color: #eee; +$btn-b-border-color: #2d70af; +$btn-g-background-color: #4caf50; +$btn-g-color: #eee; +$btn-g-border-color: #3cb941; +$btn-c-background-color: #38a6e8; +$btn-c-color: #eee; +$btn-c-border-color: #2dbdde; +$btn-y-background-color: #edc637; +$btn-y-color: #eee; +$btn-y-border-color: #d1bc24; +$btn-r-background-color: #be2e2a; +$btn-r-color: #eee; +$btn-r-border-color: #ae342f; \ No newline at end of file diff --git a/testpage.html b/testpage.html index 2b0492d..c29b1ec 100644 --- a/testpage.html +++ b/testpage.html @@ -59,7 +59,7 @@ Suspendisse varius turpis et dui viverra semper.
Nam non diam ante. Curabitur non enim vitae eros luctus porta.