diff --git a/README.md b/README.md index e9b0553..8ad47a5 100644 --- a/README.md +++ b/README.md @@ -17,3 +17,20 @@ TODO: - Modals (checkbox based) - Labels and badges - Pure css progress bars + + + +HOMEWORK FOR AFTER THE HOLIDAYS: + +- Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page +- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with th two **) +- Move variables to a main file, cleanup the mini-default.scss and flavored csses etc, make it more consistent +- Update wiki with changes, write missing pages (documentation etc.) +- Add the missing extra components, try to stay below 5KB +- Add images and make two live pages to showcase vastly different flavors +- Make NiteOwl flavor (dark flavor, like the thing that cquanu (my star in html template) has for github, colors look cool) +- Make more flavors +- Update wiki punchline footer and README! +- Promote in reddit etc. +- Write a blog post about it +- Use it \ No newline at end of file diff --git a/css/mini-full.css b/css/mini-full.css deleted file mode 100644 index 8d5518f..0000000 --- a/css/mini-full.css +++ /dev/null @@ -1,1050 +0,0 @@ -/* - Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS. - Set body colors and margin. -*/ -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: #f5f5f5; } - -/* - Correct display in IE 9-. - Give images display: block to be responsive. -*/ -article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img { - display: block; } - -/* - Correct margin in IE 8. -*/ -figure { - margin: 1em 40px; } - -/* - Styles for headers. -*/ -h1, h2, h3, h4, h5, h6 { - line-height: 1.2; - margin: 0.7em 0; - font-weight: 500; } - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - color: #555555; - 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; } - -/* - Correct box-sizing in Firefox. - Style for horizontal rule. -*/ -hr { - box-sizing: content-box; - line-height: 1.2; - margin: 0.7em 0; - height: 0; - border: 0; - border-top: 1px solid #cfcfcf; } - -/* - Style for all small text and size for sub and sup. -*/ -small, sub, sup { - font-size: 75%; } - -/* - Style for paragraph and preformatted elements. -*/ -p, pre { - margin: 0 0 0.6em; } - -/* - Style for lists. -*/ -ul, ol { - margin-top: 0; - margin-bottom: 0.6em; } - ul ul, ul ol, ol ul, ol ol { - margin-bottom: 0; } - -/* - Styles for code and preformatted. -*/ -samp, kbd, code, pre { - font-family: monospace, monospace; - font-size: 1em; } - -kbd, code, pre { - padding: 2px 4px; - border-radius: 4px; } - -code, pre { - background-color: gainsboro; } - -kbd { - color: #fefefe; - background-color: #222; } - -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; } - -/* - Style for hyperlinks, remove underline. - Remove gray background on active links in IE 10. - Remove outline on focused links when they are also active or hovered. -*/ -a { - background-color: transparent; - text-decoration: none; - color: #2678b3; } - a:active, a:hover { - outline-width: 0; - color: #3793d5; } - a:visited { - color: #1d5c89; } - a:visited:active, a:visited:hover { - color: #2678b3; } - -/* - Prevent the duplicate application of `bolder` in Safari 6. -*/ -b, strong { - font-weight: inherit; } - -/* - Correct font weight in Chrome, Edge, Safari. -*/ -b, strong { - font-weight: bolder; } - -/* - Correct font style in Android 4.3-. -*/ -dfn { - font-style: italic; } - -/* - Remove botom border in Firefox 39-. - Correct text decoration in Chrome, Edge, IE, Opera, and Safari. -*/ -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; } - -/* - Style for mark. -*/ -mark { - background-color: #ffff33; - color: #222; } - -/* - Styling for hidden elements. - Correct display for template in IE. - Correct display for audio:not([controls]) in iOS 4-7. -*/ -[hidden], .hidden, template, audio:not([controls]) { - display: none; } - -audio:not([controls]) { - height: 0; } - -/* - Correct display in IE 9-. -*/ -audio, video, progress { - display: inline-block; } - -/* - Styles for sub and sup. - Prevent `sub` and `sup` elements from affecting the line height. - Correct vertical alignment of progress in Chrome, Firefox, and Opera. -*/ -sub, sup, progress { - vertical-align: baseline; } - -sub, sup { - line-height: 0; - position: relative; } - -sub { - bottom: -0.25em; } - -sup { - top: -0.5em; } - -/* - Remove the border on images inside links in IE 10-. - Make images responsive. -*/ -img { - border-style: none; - max-width: 100%; } - -/* - Hide the overflow in IE. -*/ -svg:not(:root) { - overflow: hidden; } - -/* - Show the overflow in IE and Edge. -*/ -button, input, hr { - overflow: visible; } - -/* - Style for buttons and input elements. -*/ -button, input, optgroup, select, textarea { - font-family: '"Helvetica Neue", Helvetica, sans-serif'; - font-size: 100%; - line-height: 1.2; - margin: 0; } - -/* - Remove the inheritance of text transform in Edge, Firefox, and IE. -*/ -button, select { - text-transform: none; } - -/* - Correct styling for iOS, Safari and Firefox. -*/ -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; } - -/* - Style for fieldset. -*/ -fieldset { - border: 1px solid #cfcfcf; - border-radius: 4px; - margin: 0 2px; - padding: 0.35em 0.65em 0.75em; } - -/* - Add correct box sizing and remove padding in IE 10-. -*/ -[type="checkbox"], [type="radio"], legend { - box-sizing: border-box; - padding: 0; } - -/* - - Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE. - Remove the padding so developers are not caught out when they zero out `fieldset` - elements in all browsers. -*/ -legend { - color: inherit; - display: table; - max-width: 100%; - white-space: normal; } - -/* - Remove the default vertical scrollbar in IE. -*/ -textarea { - overflow: auto; } - -/* - Correct the cursor style of increment and decrement buttons in Chrome. - Make images responsive. -*/ -[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img { - height: auto; } - -/* - Correct styling in Chrome and Safari. - Remove the inner padding and cancel buttons in Chrome and Safari on OS X. -*/ -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; } - [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/* - Correct the inability to style clickable types in iOS and Safari. - Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; } - -/* - Mixin for button color variant. - Parameters: - - $btn-variant-color : The text color of the button variant. - - $btn-variant-bg-color : The background color of the button variant. - - $btn-variant-hover-style : Hover/active/focus style of the button variant. [1] - - $btn-variant-hover-style-percentage : Hover/active/focus style of the button variant percentage modifier. - Notes: - - [1] : The values that $btn-variant-hover-style can take are `lighten` and `darken`. The inside condition - only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. - - [2] : Do not use this mixin directly, use `make-btn-style` instead. -*/ -/* - Mixin for the buttons. - Parameters: - - $btn-name : The class name of the buttons. - - $btn-border : The border of the buttons. - - $btn-border-radius : The border-radius of the buttons. - - $btn-margin : The margin of the buttons. - - $btn-padding : The padding of the buttons. - - $btn-color : The text color of the buttons. - - $btn-bg-color : The background color of the buttons. - - $btn-hover-style : Hover/active/focus style of the buttons. [1] - - $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier. - - $btn-cursor : The cursor style when hovering over the buttons. - - $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled. - - $btn-disabled-opacity : The opacity of the buttons when disabled. - Notes: - - [1] : The values that $btn-hover-style can take are `lighten` and `darken`. The inside condition only - checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. - - [2] : This only creates a basic button style. For more styles use `make-btn-style`. -*/ -/* - Mixin for button styles. - Parameters: - - $btn-name : The class name of the buttons. [1] - - $btn-style-name : The class name of the button style. - - $btn-style-color : The text color of the button style. - - $btn-style-bg-color : The background color of the button style. - - $btn-style-hover-style : Hover/active/focus style of the button style. [2][3] - - $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3] - Notes: - - [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise - the specified style will not work correctly. - - [2] : The values that $btn-style-hover-style can take are `lighten` and `darken`. The inside condition - only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. - - [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten` - and `7.5%` if not specified. - - [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after - `make-btn`. -*/ -/* - Mixin for button sizes. - Parameters: - - $btn-name : The class name of the buttons. [1] - - $btn-size-name : The class name of the button size. - - $btn-size-padding : The padding of the button size. - - $btn-size-font-size : The font-size of the button size. - Notes: - - [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise - the specified style will not work correctly. - - [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after - `make-btn`. -*/ -.btn, a.btn, a.btn:visited { - display: inline-block; - border: 0; - border-radius: 4px; - margin: 2px 0; - padding: 6px 12px; - color: #2a2a2a; - background: #eaeaea; - cursor: pointer; } - .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #fdfdfd; } - .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { - cursor: not-allowed; - opacity: 0.65; } - -.btn.blue, a.btn.blue, a.btn.blue:visited { - color: #eeeeee; - background: #3f84b3; } - .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { - background: #5597c3; } - -.btn.green, a.btn.green, a.btn.green:visited { - color: #eeeeee; - background: #2db747; } - .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { - background: #3bcf57; } - -.btn.red, a.btn.red, a.btn.red:visited { - color: #eeeeee; - background: #ea4848; } - .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { - background: #ee6a6a; } - -.btn.lg { - padding: 9px 15px; - font-size: 135%; } - -.btn.sm { - padding: 4px 8px; - font-size: 80%; } - -/* - Mixin for responsive, mobile-first grid. - Parameters: - - $container-name : The class name of the container for the grid. - - $container-padding : The left and right padding of the container. [1] - - $row-name : The class name of the grid's rows. - - $col-name : The class name of the grid's columns. - - $col-number : The amount of columns in the grid. - - $xs-prefix : Class prefix for extra small screens. - - $sm-prefix : Class prefix for small screens. - - $md-prefix : Class prefix for medium screens. - - $lg-prefix : Class prefix for large screens. - - $hide-suffix : Class suffix for hidden columns. [2] - - $sm-breakpoint : Breakpoint for small screens. - - $md-breakpoint : Breakpoint for medium screens. - - $lg-breakpoint : Breakpoint for large screens. - Notes: - - [1] : The padding of the container might cause the page to grow by $container-padding to the right. This - can be fixed either via @media queries or setting the padding to 0. - - [2] : Columns with the $hide-suffix will be only hidden in the screen size specified. - - [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information. -*/ -.grid-container { - padding-right: 0; - padding-left: 0; - margin-right: auto; - margin-left: auto; - width: 100%; } - .grid-container * { - box-sizing: border-box; } - -.row:before, .row:after { - content: ""; - display: table; - clear: both; } - -.col { - float: left; - padding: 12px; } - -.xs-1 { - width: 8.33333%; } - -.xs-2 { - width: 16.66667%; } - -.xs-3 { - width: 25%; } - -.xs-4 { - width: 33.33333%; } - -.xs-5 { - width: 41.66667%; } - -.xs-6 { - width: 50%; } - -.xs-7 { - width: 58.33333%; } - -.xs-8 { - width: 66.66667%; } - -.xs-9 { - width: 75%; } - -.xs-10 { - width: 83.33333%; } - -.xs-11 { - width: 91.66667%; } - -.xs-12 { - width: 100%; } - -.sm-no, -.md-no, -.lg-no { - display: block; } - -.xs-no { - display: none; } - -@media (min-width: 768px) { - .sm-1 { - width: 8.33333%; } - - .sm-2 { - width: 16.66667%; } - - .sm-3 { - width: 25%; } - - .sm-4 { - width: 33.33333%; } - - .sm-5 { - width: 41.66667%; } - - .sm-6 { - width: 50%; } - - .sm-7 { - width: 58.33333%; } - - .sm-8 { - width: 66.66667%; } - - .sm-9 { - width: 75%; } - - .sm-10 { - width: 83.33333%; } - - .sm-11 { - width: 91.66667%; } - - .sm-12 { - width: 100%; } - - .xs-no, - .md-no, - .lg-no { - display: block; } - - .sm-no { - display: none; } } -@media (min-width: 1024px) { - .md-1 { - width: 8.33333%; } - - .md-2 { - width: 16.66667%; } - - .md-3 { - width: 25%; } - - .md-4 { - width: 33.33333%; } - - .md-5 { - width: 41.66667%; } - - .md-6 { - width: 50%; } - - .md-7 { - width: 58.33333%; } - - .md-8 { - width: 66.66667%; } - - .md-9 { - width: 75%; } - - .md-10 { - width: 83.33333%; } - - .md-11 { - width: 91.66667%; } - - .md-12 { - width: 100%; } - - .xs-no, - .sm-no, - .lg-no { - display: block; } - - .md-no { - display: none; } } -@media (min-width: 1280px) { - .lg-1 { - width: 8.33333%; } - - .lg-2 { - width: 16.66667%; } - - .lg-3 { - width: 25%; } - - .lg-4 { - width: 33.33333%; } - - .lg-5 { - width: 41.66667%; } - - .lg-6 { - width: 50%; } - - .lg-7 { - width: 58.33333%; } - - .lg-8 { - width: 66.66667%; } - - .lg-9 { - width: 75%; } - - .lg-10 { - width: 83.33333%; } - - .lg-11 { - width: 91.66667%; } - - .lg-12 { - width: 100%; } - - .xs-no, - .sm-no, - .md-no { - display: block; } - - .lg-no { - display: none; } } -/* - Mixin for the forms. - Parameters: - - $frm-name : The class name of the form. - - $frm-border : The border of the form elements. - - $frm-border-radius : The border-radius of the form elements. - - $frm-margin : The margin of the form elements. - - $frm-padding : The padding of the form elements. - - $frm-focus-color : The color used to mark the focused form element. - - $frm-invalid-color : The color used to mark an invalid form element. - - $frm-disabled-cursor : The cursor style when hovering over disabled form elements. - - $frm-disabled-opacity : The opacity of the form elements when disabled. - - $frm-readonly-bg-color : The background color of the form elements when they are readonly. - - $frm-readonly-border-color : The border color of the form elements when they are readonly. - - $frm-select-height : The height for non-multiline select elements in the form. - - $frm-label-margin : The margin for the form's label elements. - - $frm-ctrl-group-name : The class name of the control groups in the form. - - $frm-ctl-group-margin : The margin for control groups inside the form. - - $frm-inline-name : The class name for forms with inline style. - - $frm-aligned-name : The class name for forms with aligned style. - - $frm-aligned-label-width : The width of labels in forms with aligned style. - Notes: - - [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling. - Please use the button styles and mixins provided to properly style them to your liking. -*/ -.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"], -.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"], -.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"], -.frm select, .frm textarea { - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: none; } -.frm input:not([type]) { - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: none; } -.frm input, .frm select, .frm textarea { - display: block; - margin: 0.2em; - padding: 0.3em; } - .frm input:focus, .frm select:focus, .frm textarea:focus { - border-color: #2678b3; } - .frm input[disabled], .frm select[disabled], .frm textarea[disabled] { - cursor: not-allowed; - opacity: 0.65; } - .frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus { - border-color: #e9322d; } - .frm input[readonly], .frm select[readonly], .frm textarea[readonly] { - background-color: gainsboro; - border-color: #b5b5b5; } -.frm input[type="checkbox"], .frm input[type="radio"] { - display: inline-block; } -.frm select { - height: 1.9em; } - .frm select[multiple] { - height: auto; } -.frm label { - margin: 0.5em 0 0 0.2em; } -.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label { - display: inline-block; } -.frm.inline .ctrl-group { - display: inline-block; } -.frm.aligned .ctrl-group label { - text-align: right; - vertical-align: middle; - width: 15em; - margin-top: 0; } -.frm .ctrl-group { - margin: 0 0 0.3em 0; } - -/* - Mixin for the tables. - Parameters: - - $tbl-name : The class name of the table. - - $tbl-border : The border of the table and cells. [1] - - $tbl-margin : The margin of the table cells. - - $tbl-padding : The padding of the table cells. - - $tbl-head-bg-color : The color of the thead background. - - $tbl-head-color : The color of the thead text. - - $tbl-body-bg-color : The color of the even-numbered rows in tbody. - - $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody. - - $tbl-body-color : The color of the text in tbody. - - $tbl-horizontal-name : The class name for the horizontal style table. - - $tbl-bordered-name : The class name for the bordered style table. - Notes: - - [1] : This style will apply to the table and cells. All styles applied to - the table (horizontal, bordered) will use the same style of border. -*/ -.tbl { - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - border: 1px solid #bdbdbd; } - .tbl td, .tbl th { - overflow: visible; - border-left: 1px solid #bdbdbd; - border-bottom: none; - margin: 0; - padding: 0.5em; } - .tbl thead { - background-color: #d9d9d9; - color: #111; - text-align: left; } - .tbl tbody { - background-color: #f5f5f5; - color: #111; } - .tbl tbody tr:nth-child(2n-1) { - background-color: #ececec; } - .tbl.hor td, .tbl.hor th { - border-left: none; - border-bottom: 1px solid #bdbdbd; } - .tbl.bor td, .tbl.bor th { - border-bottom: 1px solid #bdbdbd; } - -/* - Image thumbnail style mixin. [1] - Parameters: - - $thumb-name : The class name for the thumbnail style. - - $thumb-padding : The padding between the image and the border. - - $thumb-border : The style of the thumbnail's border. - - $thumb-border-radius : The border radius of the thumbnail. - Notes: - - [1] : This style only applies to `img` elements with the class specified in - `$thumb-name`. -*/ -/* - Mixin for generic border style. - Parameters: - - $border-generic-name : The class name for the generic border. - Notes: - - [1] : The border style uses rgba to create a 1px solid border with 0.25 - opacity around an element, which makes it look properly bordered. - Might be incompatible with older browsers. - - [2] : The border style overwrites any border style as it uses - `!important`, exercise caution when using. -*/ -/* - Mixin for generic border radius styles. - Parameters: - - $border-style-name : The class name for the generic border radius style. - - $border-style-radius : The radius for the generic border radius style. - Notes: - - [1] : The border style overwrites any border style as it uses - `!important`, exercise caution when using. -*/ -/* - Mixin for generic contextual color text styles. - Parameters: - - $colored-text-name : The class name for the contextual color text style. - - $colored-text-color : The color for the contextual color text style. - Notes: - - [1] : The contextual color text style overwrites any text color as it uses - `!important`, exercise caution when using. -*/ -/* - Mixin for generic contextual background text styles. - Parameters: - - $colored-bg-text-name : The class name for the contextual background text style. - - $colored-bg-text-color : The background color for the contextual background text style. - Notes: - - [1] : The contextual background text style overwrites any text color as it - uses `!important`, exercise caution when using. -*/ -/* - Mixin for simple caret utility class. - Parameters: - - $caret-name : The class name for caret utility class. - - $caret-size : The size of the caret utility element. [1] - - $caret-color : The color of the caret utility element. - Notes: - - [1] : The caret is built using the border trick. Sizes can be specified - in either `px` or `em`, but they might take a bit of tweaking to - get right. -*/ -/* - Mixin for simple close sign utility class. - Parameters: - - $close-name : The class name for close utility class. - - $close-color : The color of the close utility element. - - $close-cursor : The cursor for the close utility element. - - $close-font-size : The font-size for the close utility element. - - $close-font-weight : The font-weight for the close utility element. - - $close-hover-color : The color of the close utility element when hovering over it. -*/ -/* - Mixin for quick float classes. [1] - Parameters: - - $drag-left-name : The class name for left drags. - - $drag-right-name : The class name for right drags. - Notes: - - [1] : These classes use `!important` to set the float properties, - exercise caution when using. -*/ -/* - Mixin for center block class. - Parameters: - - $center-block-name : The class name for center block class. -*/ -/* - Mixin for clearfix class. - Parameters: - - $clearfix-name : The class name for the clearfix class. -*/ -/* - Mixin for hidden class. [1] - Parameters: - - $hidden-name : The class name for hidden elements. - Notes: - - [1] : This class uses `!important` to set the display property, - exercise caution when using. -*/ -img.thumb { - padding: 0.25em; - border: 1px solid #ccc; - border-radius: 4px; } - -.bordered { - border: 1px solid rgba(0, 0, 0, 0.25) !important; } - -.rounded { - border-radius: 4px !important; } - -.circle { - border-radius: 50% !important; } - -.txt-blue { - color: #3f84b3 !important; } - -.txt-green { - color: #2db747 !important; } - -.txt-red { - color: #ea4848 !important; } - -.bg-blue { - background-color: #3f84b3 !important; } - -.bg-green { - background-color: #2db747 !important; } - -.bg-red { - background-color: #ea4848 !important; } - -.caret { - display: inline-block; - vertical-align: middle; - line-height: 1; - width: 0; - height: 0; - border-left: 0.35em solid transparent; - border-right: 0.35em solid transparent; - border-top: 0.35em solid #222; } - -.close { - display: inline-block; - vertical-align: middle; - line-height: 1; - color: #aaa; - font-size: 1.3em; - font-weight: 700; - cursor: pointer; } - .close:before { - content: '\00d7'; } - .close:hover { - color: #777; } - -.drg-left { - float: left !important; } - -.drg-right { - float: right !important; } - -.ct-block { - display: block; - margin-left: auto; - margin-right: auto; } - -.cf:before, .cf:after { - content: ""; - display: table; - clear: both; } - -.hidden { - display: none !important; } - -/* - Mixin for navigation bar and complementary styles. - Parameters: - - $nav-name : The class name for the navigation bar. - - $nav-vertical-name : The class name for the vertical style of the navigation bar. - - $nav-fixed-name : The class name for the fixed style of the navigation bar. - - $nav-logo-name : The class name for the logo item of the navigation bar. - - $nav-logo-size : The font-size of the logo item of the navigation bar. - - $nav-link-name : The class name for the navigation links of the navigation bar. - - $nav-padding : The padding of the elements of the navigation bar. [1] - - $nav-color : The text color of the navigation elements. - - $nav-bg-color : The background color of the navigation bar. - - $nav-hover-style : Hover/active/focus style of the navigation elements. [2] - - $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier. - - $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled. - - $nav-disabled-opacity : The opacity of the navigation elements when disabled. - - $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4] - - $grid-columns-total : Total amount fo columns in the used grid. [5] - - $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5] - - $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button. - - $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6] - - $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label. - - $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label. - Notes: - - [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). - For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse - label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to - avoid CSS errors and ultimately the style not being applied to some elements. - - [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only - checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. - - [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values - are provided, due to the inside condition only checking for `left`, `right` will be used as the - default value. - - [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars - should not be affected as they are 100% width, meaning that anchoring to left or right should have - the same result. - - [5] : These values are used to make the navigation bar work better with the grid system. Values do not have - to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving - a small gap just before the third column in the grid. If no grid is specified, you can use percentage - values like 100 and 15 to get a 15% width for example. - - [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left` - and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be - used as a default if no valid value is specified. -*/ -.nav { - box-sizing: border-box; - background-color: #ddd; } - .nav .logo { - font-size: 135%; - color: #272727; } - .nav ul { - display: inline-block; - list-style: none; - margin: 0; - padding: 0; } - .nav ul li { - display: inline-block; - margin: 0; - white-space: nowrap; } - .nav ul li * { - display: inline-block; - padding: 8px; - color: #272727; - margin: 0; } - .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { - color: #272727; - background: #cacaca; } - .nav ul li .link.disabled, .nav ul li .link[disabled] { - cursor: not-allowed; - opacity: 0.65; } - .nav.vertical ul { - display: block; } - .nav.vertical ul li { - display: block; } - .nav.vertical ul li * { - width: 100%; - padding: 8px 0; } - .nav.fixed { - position: fixed; - left: 0; - top: 0; - z-index: 999; - width: 100%; } - .nav.fixed.vertical { - height: 100%; - width: 16.66667%; } - .nav.fixed.vertical ul { - width: 100%; } - .nav.fixed.vertical ul li { - display: block; } - .nav + label { - display: none; - font-weight: 700; - margin: 10px; - font-size: 1.75em; - padding: 8px; - color: #272727; - background-color: #ddd; - width: auto; - position: fixed; - z-index: 1000; - top: 0; - right: 0; } - .nav + label:before { - position: relative; - content: '\2630'; } - .nav + label:hover, .nav + label:active, .nav + label:focus { - background: #cacaca; } - -@media (max-width: 768px) { - .nav { - overflow: auto; } - .nav.fixed { - display: none; } - .nav.fixed + label { - display: block; } - - input[type="checkbox"]:checked + .nav.fixed { - display: block; - width: 100%; - height: 100%; } - input[type="checkbox"]:checked + .nav.fixed ul { - display: block; } - input[type="checkbox"]:checked + .nav.fixed ul li { - display: block; } - input[type="checkbox"]:checked + .nav.fixed ul li * { - width: 100%; - padding: 8px 0; } - input[type="checkbox"]:checked + .nav.fixed + label:before { - content: '\00d7'; } } diff --git a/css/mini-full.min.css b/css/mini-full.min.css deleted file mode 100644 index 0e0efe4..0000000 --- a/css/mini-full.min.css +++ /dev/null @@ -1 +0,0 @@ -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:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;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}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{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}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}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;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}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 #cfcfcf;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}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{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,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.nav{box-sizing:border-box;background-color:#ddd}.nav .logo{font-size:135%;color:#272727}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:8px;color:#272727;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#272727;background:#cacaca}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#272727;background-color:#ddd;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#cacaca}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6f1b722..9a96142 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,8 +32,6 @@

mini.css a minimal Sass-y responsive mobile-first style-agnostic CSS framework

If you want to create your own flavor, get involved or report an issue, head over to mini.css's Github page. If you want to give mini.css a try using the default flavor, paste the following code inside your HTML page's <head> tag:

<link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css">
- -

Why mini.css?

@@ -63,6 +61,73 @@

Responsive grid

mini.css comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.*

+

Grid example (12-columns)**

+
+
+
1/12
1/12
1/12
1/12
1/12
1/12
+
1/12
1/12
1/12
1/12
1/12
1/12
+
+
+
1/6
1/6
1/6
1/6
1/6
1/6
+
+
+
1/4
1/4
1/4
1/4
+
+
+
1/3
1/3
1/3
+
+
+
1/2
1/2
+
+
+
1/1
+
+
+

Code

+ 
<div class="grid-container">
+  <div class="row">
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+    <div class="col xs-1"></div>
+  </div>
+  <div class="row">
+    <div class="col xs-2"></div>
+    <div class="col xs-2"></div>
+    <div class="col xs-2"></div>
+    <div class="col xs-2"></div>
+    <div class="col xs-2"></div>
+    <div class="col xs-2"></div>
+  </div>
+  <div class="row">
+    <div class="col xs-3"></div>
+    <div class="col xs-3"></div>
+    <div class="col xs-3"></div>
+    <div class="col xs-3"></div>
+  </div>
+  <div class="row">
+    <div class="col xs-4"></div>
+    <div class="col xs-4"></div>
+    <div class="col xs-4"></div>
+  </div>
+  <div class="row">
+    <div class="col xs-6"></div>
+    <div class="col xs-6"></div>
+  </div>
+  <div class="row">
+    <div class="col xs-12"></div>
+  </div>
+</div>
+ +

Navigation

Navigation is made simple with the navigation bar module, that lets you build customized navigation bars that work great in mobile devices. These navigation elements are probably one of the heavier modules at about 530 bytes.*

@@ -78,7 +143,8 @@

Utilities and helper classes

Lots of things that you might use quite often are not included in the framework's base module. This is where the utilities module comes in with a variety of classes for quick floats, centering content, making generic borders and simple icons or just hiding elements. This module is entirely customizable, allowing you to pick any pieces you like, but in total its size is about 450 bytes.*

- (*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes. + (*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes.
+ (**): Provided examples are based on the naming conventions and the styling of the default flavor. If you create your own flavor, results might vary.

Customization

diff --git a/flavors/mini-default.css b/flavors/mini-default.css index 4c16b38..d455854 100644 --- a/flavors/mini-default.css +++ b/flavors/mini-default.css @@ -1,3 +1,8 @@ +/* + Flavor name: Default (mini-default) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v1.0 (September, 2016) +*/ /* Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS. Set body colors and margin. @@ -384,28 +389,28 @@ textarea { background: #eaeaea; cursor: pointer; } .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { - background: #d7d7d7; } + background: #fdfdfd; } .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] { cursor: not-allowed; opacity: 0.65; } .btn.blue, a.btn.blue, a.btn.blue:visited { color: #eeeeee; - background: #337ab7; } + background: #3f84b3; } .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { - background: #2b6699; } + background: #5597c3; } .btn.green, a.btn.green, a.btn.green:visited { color: #eeeeee; - background: #5cb85c; } + background: #2db747; } .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { - background: #48a648; } + background: #3bcf57; } .btn.red, a.btn.red, a.btn.red:visited { color: #eeeeee; - background: #d9534f; } + background: #ea4848; } .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { - background: #d23430; } + background: #ee6a6a; } .btn.lg { padding: 9px 15px; @@ -725,28 +730,158 @@ textarea { border-collapse: collapse; border-spacing: 0; empty-cells: show; - border: 1px solid #777; } + border: 1px solid #bdbdbd; } .tbl td, .tbl th { overflow: visible; - border-left: 1px solid #777; + border-left: 1px solid #bdbdbd; border-bottom: none; margin: 0; padding: 0.5em; } .tbl thead { - background-color: #4e4e4e; - color: #f5f5f5; + background-color: #d9d9d9; + color: #111; text-align: left; } .tbl tbody { - background-color: #ddd; + background-color: #f5f5f5; color: #111; } .tbl tbody tr:nth-child(2n-1) { - background-color: #f4f4f4; } + background-color: #ececec; } .tbl.hor td, .tbl.hor th { border-left: none; - border-bottom: 1px solid #777; } + border-bottom: 1px solid #bdbdbd; } .tbl.bor td, .tbl.bor th { - border-bottom: 1px solid #777; } + border-bottom: 1px solid #bdbdbd; } +/* + Mixin for navigation bar and complementary styles. + Parameters: + - $nav-name : The class name for the navigation bar. + - $nav-vertical-name : The class name for the vertical style of the navigation bar. + - $nav-fixed-name : The class name for the fixed style of the navigation bar. + - $nav-logo-name : The class name for the logo item of the navigation bar. + - $nav-logo-size : The font-size of the logo item of the navigation bar. + - $nav-link-name : The class name for the navigation links of the navigation bar. + - $nav-padding : The padding of the elements of the navigation bar. [1] + - $nav-color : The text color of the navigation elements. + - $nav-bg-color : The background color of the navigation bar. + - $nav-hover-style : Hover/active/focus style of the navigation elements. [2] + - $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier. + - $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled. + - $nav-disabled-opacity : The opacity of the navigation elements when disabled. + - $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4] + - $grid-columns-total : Total amount fo columns in the used grid. [5] + - $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5] + - $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button. + - $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6] + - $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label. + - $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label. + Notes: + - [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). + For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse + label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to + avoid CSS errors and ultimately the style not being applied to some elements. + - [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only + checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. + - [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values + are provided, due to the inside condition only checking for `left`, `right` will be used as the + default value. + - [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars + should not be affected as they are 100% width, meaning that anchoring to left or right should have + the same result. + - [5] : These values are used to make the navigation bar work better with the grid system. Values do not have + to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving + a small gap just before the third column in the grid. If no grid is specified, you can use percentage + values like 100 and 15 to get a 15% width for example. + - [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left` + and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be + used as a default if no valid value is specified. +*/ +.nav { + box-sizing: border-box; + background-color: #ddd; } + .nav .logo { + font-size: 135%; + color: #272727; } + .nav ul { + display: inline-block; + list-style: none; + margin: 0; + padding: 0; } + .nav ul li { + display: inline-block; + margin: 0; + white-space: nowrap; } + .nav ul li * { + display: inline-block; + padding: 8px; + color: #272727; + margin: 0; } + .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { + color: #272727; + background: #cacaca; } + .nav ul li .link.disabled, .nav ul li .link[disabled] { + cursor: not-allowed; + opacity: 0.65; } + .nav.vertical ul { + display: block; } + .nav.vertical ul li { + display: block; } + .nav.vertical ul li * { + width: 100%; + padding: 8px 0; } + .nav.fixed { + position: fixed; + left: 0; + top: 0; + z-index: 999; + width: 100%; } + .nav.fixed.vertical { + height: 100%; + width: 16.66667%; } + .nav.fixed.vertical ul { + width: 100%; } + .nav.fixed.vertical ul li { + display: block; } + .nav + label { + display: none; + font-weight: 700; + margin: 10px; + font-size: 1.75em; + padding: 8px; + color: #272727; + background-color: #ddd; + width: auto; + position: fixed; + z-index: 1000; + top: 0; + right: 0; } + .nav + label:before { + position: relative; + content: '\2630'; } + .nav + label:hover, .nav + label:active, .nav + label:focus { + background: #cacaca; } + +@media (max-width: 768px) { + .nav { + overflow: auto; } + .nav.fixed { + display: none; } + .nav.fixed + label { + display: block; } + + input[type="checkbox"]:checked + .nav.fixed { + display: block; + width: 100%; + height: 100%; } + input[type="checkbox"]:checked + .nav.fixed ul { + display: block; } + input[type="checkbox"]:checked + .nav.fixed ul li { + display: block; } + input[type="checkbox"]:checked + .nav.fixed ul li * { + width: 100%; + padding: 8px 0; } + input[type="checkbox"]:checked + .nav.fixed + label:before { + content: '\00d7'; } } /* Image thumbnail style mixin. [1] Parameters: @@ -859,22 +994,22 @@ img.thumb { border-radius: 50% !important; } .txt-blue { - color: #337ab7 !important; } + color: #3f84b3 !important; } .txt-green { - color: #5cb85c !important; } + color: #2db747 !important; } .txt-red { - color: #d9534f !important; } + color: #ea4848 !important; } .bg-blue { - background-color: #337ab7 !important; } + background-color: #3f84b3 !important; } .bg-green { - background-color: #5cb85c !important; } + background-color: #2db747 !important; } .bg-red { - background-color: #d9534f !important; } + background-color: #ea4848 !important; } .caret { display: inline-block; @@ -917,134 +1052,3 @@ img.thumb { .hidden { display: none !important; } - -/* - Mixin for navigation bar and complementary styles. - Parameters: - - $nav-name : The class name for the navigation bar. - - $nav-vertical-name : The class name for the vertical style of the navigation bar. - - $nav-fixed-name : The class name for the fixed style of the navigation bar. - - $nav-logo-name : The class name for the logo item of the navigation bar. - - $nav-logo-size : The font-size of the logo item of the navigation bar. - - $nav-link-name : The class name for the navigation links of the navigation bar. - - $nav-padding : The padding of the elements of the navigation bar. [1] - - $nav-color : The text color of the navigation elements. - - $nav-bg-color : The background color of the navigation bar. - - $nav-hover-style : Hover/active/focus style of the navigation elements. [2] - - $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier. - - $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled. - - $nav-disabled-opacity : The opacity of the navigation elements when disabled. - - $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4] - - $grid-columns-total : Total amount fo columns in the used grid. [5] - - $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5] - - $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button. - - $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6] - - $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label. - - $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label. - Notes: - - [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). - For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse - label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to - avoid CSS errors and ultimately the style not being applied to some elements. - - [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only - checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. - - [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values - are provided, due to the inside condition only checking for `left`, `right` will be used as the - default value. - - [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars - should not be affected as they are 100% width, meaning that anchoring to left or right should have - the same result. - - [5] : These values are used to make the navigation bar work better with the grid system. Values do not have - to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving - a small gap just before the third column in the grid. If no grid is specified, you can use percentage - values like 100 and 15 to get a 15% width for example. - - [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left` - and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be - used as a default if no valid value is specified. -*/ -.nav { - box-sizing: border-box; - background-color: #222; } - .nav .logo { - font-size: 135%; - color: #fff; } - .nav ul { - display: inline-block; - list-style: none; - margin: 0; - padding: 0; } - .nav ul li { - display: inline-block; - margin: 0; - white-space: nowrap; } - .nav ul li * { - display: inline-block; - padding: 10px; - color: #fff; - margin: 0; } - .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { - color: #fff; - background: #353535; } - .nav ul li .link.disabled, .nav ul li .link[disabled] { - cursor: not-allowed; - opacity: 0.65; } - .nav.vertical ul { - display: block; } - .nav.vertical ul li { - display: block; } - .nav.vertical ul li * { - width: 100%; - padding: 10px 0; } - .nav.fixed { - position: fixed; - left: 0; - top: 0; - z-index: 999; - width: 100%; } - .nav.fixed.vertical { - height: 100%; - width: 16.66667%; } - .nav.fixed.vertical ul { - width: 100%; } - .nav.fixed.vertical ul li { - display: block; } - .nav + label { - display: none; - font-weight: 700; - margin: 10px; - font-size: 1.75em; - padding: 10px; - color: #fff; - background-color: #222; - width: auto; - position: fixed; - z-index: 1000; - top: 0; - right: 0; } - .nav + label:before { - position: relative; - content: '\2630'; } - .nav + label:hover, .nav + label:active, .nav + label:focus { - background: #353535; } - -@media (max-width: 768px) { - .nav { - overflow: auto; } - .nav.fixed { - display: none; } - .nav.fixed + label { - display: block; } - - input[type="checkbox"]:checked + .nav.fixed { - display: block; - width: 100%; - height: 100%; } - input[type="checkbox"]:checked + .nav.fixed ul { - display: block; } - input[type="checkbox"]:checked + .nav.fixed ul li { - display: block; } - input[type="checkbox"]:checked + .nav.fixed ul li * { - width: 100%; - padding: 10px 0; } - input[type="checkbox"]:checked + .nav.fixed + label:before { - content: '\00d7'; } } diff --git a/flavors/mini-default.min.css b/flavors/mini-default.min.css index 20eeca0..50bd94c 100644 --- a/flavors/mini-default.min.css +++ b/flavors/mini-default.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:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;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}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{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}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}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;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}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 #cfcfcf;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}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{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,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#d7d7d7}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#337ab7}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#2b6699}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#5cb85c}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#48a648}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#d9534f}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#d23430}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #777}.tbl td,.tbl th{overflow:visible;border-left:1px solid #777;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#4e4e4e;color:#f5f5f5;text-align:left}.tbl tbody{background-color:#ddd;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#f4f4f4}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #777}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #777}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#337ab7!important}.txt-green{color:#5cb85c!important}.txt-red{color:#d9534f!important}.bg-blue{background-color:#337ab7!important}.bg-green{background-color:#5cb85c!important}.bg-red{background-color:#d9534f!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important}.nav{box-sizing:border-box;background-color:#222}.nav .logo{font-size:135%;color:#fff}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:10px;color:#fff;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#fff;background:#353535}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:10px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:10px;color:#fff;background-color:#222;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#353535}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:10px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}} \ 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:#f5f5f5}article,aside,details,figcaption,figure,footer,header,img,main,menu,nav,section{display:block}figure{margin:1em 40px}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#555;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}hr{box-sizing:content-box;line-height:1.2;margin:.7em 0;height:0;border:0;border-top:1px solid #cfcfcf}small,sub,sup{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}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}code,kbd,pre{padding:2px 4px;border-radius:4px}code,pre{background-color:#dcdcdc}kbd{color:#fefefe;background-color:#222}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;text-decoration:none;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}b,strong{font-weight:bolder}dfn{font-style:italic}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}mark{background-color:#ff3;color:#222}.hidden,[hidden],audio:not([controls]),template{display:none}audio:not([controls]){height:0}audio,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}svg:not(:root){overflow:hidden}button,hr,input{overflow:visible}button,input,optgroup,select,textarea{font-family:'"Helvetica Neue", Helvetica, sans-serif';font-size:100%;line-height:1.2;margin:0}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 #cfcfcf;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}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button,img{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,a.btn,a.btn:visited{display:inline-block;border:0;border-radius:4px;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#eaeaea;cursor:pointer}.btn:active,.btn:focus,.btn:hover,a.btn:active,a.btn:focus,a.btn:hover,a.btn:visited:active,a.btn:visited:focus,a.btn:visited:hover{background:#fdfdfd}.btn.disabled,.btn[disabled],.btnfieldset[disabled],a.btn.disabled,a.btn:visited.disabled,a.btn:visited[disabled],a.btn:visitedfieldset[disabled],a.btn[disabled],a.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.blue,a.btn.blue,a.btn.blue:visited{color:#eee;background:#3f84b3}.btn.blue:active,.btn.blue:focus,.btn.blue:hover,a.btn.blue:active,a.btn.blue:focus,a.btn.blue:hover,a.btn.blue:visited:active,a.btn.blue:visited:focus,a.btn.blue:visited:hover{background:#5597c3}.btn.green,a.btn.green,a.btn.green:visited{color:#eee;background:#2db747}.btn.green:active,.btn.green:focus,.btn.green:hover,a.btn.green:active,a.btn.green:focus,a.btn.green:hover,a.btn.green:visited:active,a.btn.green:visited:focus,a.btn.green:visited:hover{background:#3bcf57}.btn.red,a.btn.red,a.btn.red:visited{color:#eee;background:#ea4848}.btn.red:active,.btn.red:focus,.btn.red:hover,a.btn.red:active,a.btn.red:focus,a.btn.red:hover,a.btn.red:visited:active,a.btn.red:visited:focus,a.btn.red:visited:hover{background:#ee6a6a}.btn.lg{padding:9px 15px;font-size:135%}.btn.sm{padding:4px 8px;font-size:80%}.grid-container{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto;width:100%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-1{width:8.33333%}.xs-2{width:16.66667%}.xs-3{width:25%}.xs-4{width:33.33333%}.xs-5{width:41.66667%}.xs-6{width:50%}.xs-7{width:58.33333%}.xs-8{width:66.66667%}.xs-9{width:75%}.xs-10{width:83.33333%}.xs-11{width:91.66667%}.xs-12{width:100%}.lg-no,.md-no,.sm-no{display:block}.xs-no{display:none}@media (min-width:768px){.sm-1{width:8.33333%}.sm-2{width:16.66667%}.sm-3{width:25%}.sm-4{width:33.33333%}.sm-5{width:41.66667%}.sm-6{width:50%}.sm-7{width:58.33333%}.sm-8{width:66.66667%}.sm-9{width:75%}.sm-10{width:83.33333%}.sm-11{width:91.66667%}.sm-12{width:100%}.lg-no,.md-no,.xs-no{display:block}.sm-no{display:none}}@media (min-width:1024px){.md-1{width:8.33333%}.md-2{width:16.66667%}.md-3{width:25%}.md-4{width:33.33333%}.md-5{width:41.66667%}.md-6{width:50%}.md-7{width:58.33333%}.md-8{width:66.66667%}.md-9{width:75%}.md-10{width:83.33333%}.md-11{width:91.66667%}.md-12{width:100%}.lg-no,.sm-no,.xs-no{display:block}.md-no{display:none}}@media (min-width:1280px){.lg-1{width:8.33333%}.lg-2{width:16.66667%}.lg-3{width:25%}.lg-4{width:33.33333%}.lg-5{width:41.66667%}.lg-6{width:50%}.lg-7{width:58.33333%}.lg-8{width:66.66667%}.lg-9{width:75%}.lg-10{width:83.33333%}.lg-11{width:91.66667%}.lg-12{width:100%}.md-no,.sm-no,.xs-no{display:block}.lg-no{display:none}}.frm input:not([type]),.frm input[type$=time],.frm input[type=color],.frm input[type=email],.frm input[type=month],.frm input[type=number],.frm input[type=password],.frm input[type=search],.frm input[type=tel],.frm input[type=text],.frm input[type=url],.frm input[type=week],.frm input[type^=date],.frm select,.frm textarea{box-sizing:border-box;border:1px solid #ccc;border-radius:4px;box-shadow:none}.frm input,.frm select,.frm textarea{display:block;margin:.2em;padding:.3em}.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:#2678b3}.frm input[disabled],.frm select[disabled],.frm textarea[disabled]{cursor:not-allowed;opacity:.65}.frm input:focus:invalid,.frm input:focus:invalid:focus,.frm input:invalid,.frm select:focus:invalid,.frm select:focus:invalid:focus,.frm select:invalid,.frm textarea:focus:invalid,.frm textarea:focus:invalid:focus,.frm textarea:invalid{border-color:#e9322d}.frm input[readonly],.frm select[readonly],.frm textarea[readonly]{background-color:#dcdcdc;border-color:#b5b5b5}.frm input[type=checkbox],.frm input[type=radio]{display:inline-block}.frm select{height:1.9em}.frm select[multiple]{height:auto}.frm label{margin:.5em 0 0 .2em}.frm.aligned input,.frm.aligned label,.frm.aligned select,.frm.aligned textarea,.frm.inline .ctrl-group,.frm.inline input,.frm.inline label,.frm.inline select,.frm.inline textarea{display:inline-block}.frm.aligned .ctrl-group label{text-align:right;vertical-align:middle;width:15em;margin-top:0}.frm .ctrl-group{margin:0 0 .3em}.tbl{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #bdbdbd}.tbl td,.tbl th{overflow:visible;border-left:1px solid #bdbdbd;border-bottom:none;margin:0;padding:.5em}.tbl thead{background-color:#d9d9d9;color:#111;text-align:left}.tbl tbody{background-color:#f5f5f5;color:#111}.tbl tbody tr:nth-child(2n-1){background-color:#ececec}.tbl.hor td,.tbl.hor th{border-left:none;border-bottom:1px solid #bdbdbd}.tbl.bor td,.tbl.bor th{border-bottom:1px solid #bdbdbd}.nav{box-sizing:border-box;background-color:#ddd}.nav .logo{font-size:135%;color:#272727}.nav ul{display:inline-block;list-style:none;margin:0;padding:0}.nav ul li{display:inline-block;margin:0;white-space:nowrap}.nav ul li *{display:inline-block;padding:8px;color:#272727;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#272727;background:#cacaca}.nav ul li .link.disabled,.nav ul li .link[disabled]{cursor:not-allowed;opacity:.65}.nav.vertical ul,.nav.vertical ul li{display:block}.nav.vertical ul li *{width:100%;padding:8px 0}.nav.fixed{position:fixed;left:0;top:0;z-index:999;width:100%}.nav.fixed.vertical{height:100%;width:16.66667%}.nav.fixed.vertical ul{width:100%}.nav.fixed.vertical ul li{display:block}.nav+label{display:none;font-weight:700;margin:10px;font-size:1.75em;padding:8px;color:#272727;background-color:#ddd;width:auto;position:fixed;z-index:1000;top:0;right:0}.nav+label:before{position:relative;content:'\2630'}.nav+label:active,.nav+label:focus,.nav+label:hover{background:#cacaca}@media (max-width:768px){.nav{overflow:auto}.nav.fixed{display:none}.nav.fixed+label{display:block}input[type=checkbox]:checked+.nav.fixed{display:block;width:100%;height:100%}input[type=checkbox]:checked+.nav.fixed ul,input[type=checkbox]:checked+.nav.fixed ul li{display:block}input[type=checkbox]:checked+.nav.fixed ul li *{width:100%;padding:8px 0}input[type=checkbox]:checked+.nav.fixed+label:before{content:'\00d7'}}img.thumb{padding:.25em;border:1px solid #ccc;border-radius:4px}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:4px!important}.circle{border-radius:50%!important}.txt-blue{color:#3f84b3!important}.txt-green{color:#2db747!important}.txt-red{color:#ea4848!important}.bg-blue{background-color:#3f84b3!important}.bg-green{background-color:#2db747!important}.bg-red{background-color:#ea4848!important}.caret{display:inline-block;vertical-align:middle;line-height:1;width:0;height:0;border-left:.35em solid transparent;border-right:.35em solid transparent;border-top:.35em solid #222}.close{display:inline-block;vertical-align:middle;line-height:1;color:#aaa;font-size:1.3em;font-weight:700;cursor:pointer}.close:before{content:'\00d7'}.close:hover{color:#777}.drg-left{float:left!important}.drg-right{float:right!important}.ct-block{display:block;margin-left:auto;margin-right:auto}.cf:after,.cf:before{content:"";display:table;clear:both}.hidden{display:none!important} \ No newline at end of file diff --git a/flavors/mini-default.scss b/flavors/mini-default.scss index 7e61faa..0b6e1c0 100644 --- a/flavors/mini-default.scss +++ b/flavors/mini-default.scss @@ -1,42 +1,68 @@ -// Base -$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family -$base-font-size: 1em; // Font-size -$base-line-height: 1.5; // Line-height +//==================================================================== +// This is the file you should edit to make the flavor you want. +// Please read the instructions carefully. +//==================================================================== +// !! IMPORTANT !! +// Please copy this file or rename it, if you want to keep the default +// flavor definitions file. +//==================================================================== +// Update the comment below to include it in your flavor, providing the information +// you want along with your customized flavor. You can also delete it if you don't +// want it in your final CSS file. +/* + Flavor name: Default (mini-default) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v1.0 (September, 2016) +*/ +// Variable definitions for the Base module (_base.scss) +//==================================================================== +// Basic rules for body $body-margin: 0; // Margin for body $body-bg-color: #f5f5f5; // Body background color $body-color: #222; // Body text color -$header-line-height-multiplier: 0.8; // Multiplier for line height of headers -$header-margin: 0.7em 0; // Margin for headers -$header-font-weight: 500; // Font weight for headers +// Basic typography rules +$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family +$base-font-size: 1em; // Font-size +$base-line-height: 1.5; // Line-height +// Rules for headers (multipliers apply on top of the basic typography rules) $h1-multiplier: 2; // Header 1 font-sze multiplier $h2-multiplier: 1.5; // Header 2 font-sze multiplier $h3-multiplier: 1.15; // Header 3 font-sze multiplier $h4-multiplier: 1; // Header 4 font-sze multiplier $h5-multiplier: 0.8; // Header 5 font-sze multiplier $h6-multiplier: 0.7; // Header 6 font-sze multiplier +$header-line-height-multiplier: 0.8; // Multiplier for line height of headers +$header-margin: 0.7em 0; // Margin for headers +$header-font-weight: 500; // Font weight for headers +// Rules for small elements inside headers $header-small-color: lighten($body-color, 20%); // Header small text color $header-small-font-weight: 200; // Header small font weight +// Rules for horizontal rules $hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule $hr-margin: 0.7em 0; // Margin for horizontal rule $hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule -$small-font-size: 75%; // Font size for small, sub and sup elements +// Common content typography rules (paragraphs, lists etc.) $p-margin: 0 0 0.6em; // Margin for paragraph and pre elements +$small-font-size: 75%; // Font size for small, sub and sup elements +$sub-bottom: -0.25em; // Sub bottom +$sup-top: -0.5em; // Sup top $list-margin-top: 0; // Top margin for lists $list-margin-bottom: 0.6em; // Bottom margin for lists +$mark-bg-color: #ffff33; // Mark background color +$mark-color: $body-color; // Mark text color +// Code, preformatted and keyboard rules $code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements $code-padding: 2px 4px; // Padding for code and pre elements $code-bg-color: darken($body-bg-color, 10%); // Code and pre background color $code-border-radius: 4px; // Border radius for code, pre and kbd elements $kbd-bg-color: $body-color; // Kbd background color $kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color +// Hyperlink rules $a-color: #2678b3; // Hyperlink text color $a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color $a-visited-color: darken($a-color, 10%); // Hyperlink visited text color $a-visited-hover-color: $a-color; // Hyperlink visited hover text color -$mark-bg-color: #ffff33; // Mark background color -$mark-color: $body-color; // Mark text color -$sub-bottom: -0.25em; // Sub bottom -$sup-top: -0.5em; // Sup top +// Button, input and form rules $button-fonts: $base-fonts; // Font-family for buttons and inputs $button-font-size: 100%; // Font size for buttons and inputs $button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs @@ -45,49 +71,157 @@ $fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style fo $fieldset-border-radius: 4px; // Border radius for fieldset $fieldset-margin: 0 2px; // Margin for fieldset $fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset -// Button default colors +// Enable base (_base.scss) and use the variables defined above. +@import '../scss/mini/base'; +//==================================================================== +// Variable definitions for the Button module (_button.scss) +//==================================================================== +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). $btn-default-color: #2a2a2a; // Default text color for buttons $btn-alt-color: #eeeeee; // Alternative text color for buttons $btn-default-bg-color: #eaeaea; // Default background color for buttons -$btn-b-bg-color: #337ab7; // Color for button style 1 -$btn-g-bg-color: #5cb85c; // Color for button style 2 -$btn-r-bg-color: #d9534f; // Color for button style 3 -@import '../scss/mini/base'; +$btn-b-bg-color: #3f84b3; // Color for button style 1 +$btn-g-bg-color: #2db747; // Color for button style 2 +$btn-r-bg-color: #ea4848; // Color for button style 3 +// Button class names (you can remove things you don't need or define more +// classes if you need them). +$btn-class-name: btn; // Name for the base button class +$btn-style1-name: 'blue'; // Name for button style 1 class +$btn-style2-name: 'green'; // Name for button style 2 class +$btn-style3-name: 'red'; // Name for button style 3 class +$btn-size1-name: lg; // Name for the button size 1 class +$btn-size2-name: sm; // Name for the button size 2 class +// Enable buttons (_button.scss). (Use individual mixins below to use.) @import '../scss/mini/button'; -// Use button mixins to create buttons with default specs. -@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65); -@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color, darken, 7.5%); -@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color, darken, 7.5%); -@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color, darken, 7.5%); -@include make-btn-size(btn, lg, 9px 15px, 135%); -@include make-btn-size(btn, sm, 4px 8px, 80%); +// Use button mixins to create buttons with given specs. For more information +// refer to the _button.scss file to check the definitions. +@include make-btn($btn-class-name, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65); +@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color); +@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color); +@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color); +@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%); +@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%); +//==================================================================== +// Variable definitions for the Grid module (_grid.scss) +//==================================================================== +// Class names for the grid system +$grid-container-name: grid-container; // Name for the grid container class +$grid-row-name: row; // Name for the grid's row class +$grid-column-name: col; // Name for the grid's column class +$grid-extra-small-device-name: xs; // Name for extra small devices +$grid-small-device-name: sm; // Name for small devices +$grid-medium-device-name: md; // Name for medium devices +$grid-large-device-name: lg; // Name for large devices +$grid-no-show-name: no; // Name for hidden grid elements class +// Grid breakpoints for different screens +$grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices +$grid-medium-breakpoint: 1024px; // Breakpoint for small to medium devices +$grid-large-breakpoint: 1280px; // Breakpoint for medium to large devices +// Enable grid(s) (_grid.scss). (Use individual mixins below to use.) @import '../scss/mini/grid'; -// Use grid mixin to create grid with default specs. -@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px); +// Use grid mixin to create grid with given specs. For more information +// refer to the grid.scss file to check the definitions. +@include make-grid($grid-container-name, 0, $grid-row-name, $grid-column-name, 12, 12px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint); +//==================================================================== +// Variable definitions for the Form module (_form.scss) +//==================================================================== +// Class names for the forms and components +$form-class-name: frm; // Name for the form class +$form-control-group-name: ctrl-group; // Name for the form's control group class +// Colors for form components +$form-focus-color: #2678b3; // Color for focused form element outline +$form-invalid-color: #e9322d; // Color for invalid form element outline +// Enable forms (_form.scss). (Use individual mixins below to use.) @import '../scss/mini/form'; -// Use form mixin to create form with default specs. -@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em); +// Use form mixin to create form with given specs. For more information +// refer to the _form.scss file to check the definitions. +@include make-frm($form-class-name, 1px solid #ccc, 4px, 0.2em, 0.3em, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, $form-control-group-name, 0 0 0.3em 0, inline, aligned,15em); +//==================================================================== +// Variable definitions for the Table module (_table.scss) +//==================================================================== +// Class names for the tables +$table-class-name: tbl; // Name for the table class +$table-horizontal-name: hor; // Name for the horizontal style tables +$table-bordered-name: bor; // Name for the bordered style tables +// Colors for the tables +$table-head-bg-color: #d9d9d9; // Table header background color +$table-head-color: #111; // Table header text color +$table-body-bg-color: #f5f5f5; // Table body bakground color +$table-body-alt-bg-color: #ececec; // Table body alternative background color +$table-body-color: #111; // Table body text color +// Enable tables (_table.scss). (Use individual mixins below to use.) @import '../scss/mini/table'; -// Use table mixin to create table with default specs. -@include make-tbl(tbl, 1px solid #777, 0, 0.5em, #4e4e4e, #f5f5f5, #ddd, #f4f4f4, #111, hor, bor); -@import '../scss/mini/utility'; -// Use utility mixins to create utility classes with default specs. -@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px); -@include make-border-generic(bordered); -@include make-border-radial-style(rounded, 4px); -@include make-border-radial-style(circle, 50%); -@include make-colored-text(txt-blue, $btn-b-bg-color); -@include make-colored-text(txt-green, $btn-g-bg-color); -@include make-colored-text(txt-red, $btn-r-bg-color); -@include make-colored-bg-text(bg-blue, $btn-b-bg-color); -@include make-colored-bg-text(bg-green, $btn-g-bg-color); -@include make-colored-bg-text(bg-red, $btn-r-bg-color); -@include make-caret-down(caret, 0.35em, #222); -@include make-close(close, #aaa, pointer, 1.3em, 700, #777); -@include make-drags(drg-left, drg-right); -@include make-center-block(ct-block); -@include make-clearfix(cf); -@include make-hidden(hidden); +// Use table mixin to create table with given specs. For more information +// refer to the _table.scss file to check the definitions. +@include make-tbl($table-class-name, 1px solid #bdbdbd, 0, 0.5em, $table-head-bg-color, $table-head-color, $table-body-bg-color,$table-body-alt-bg-color, $table-body-color, $table-horizontal-name, $table-bordered-name); +//==================================================================== +// Variable definitions for the Navigation module (_nav.scss) +//==================================================================== +// Class names for the navigation elements +$navigation-class-name: nav; // Name for the navigation bar class +$navigation-vertical-name: vertical; // Name for the vertical navigation class +$navigation-fixed-name: fixed; // Name for the fixed navigation class +$navigation-logo-name: logo; // Name for the navigation logo class +$navigation-link-name: link; // Name for the navigation link class +// Colors and breakpoint for the navigation +$navigation-bg-color: #272727; // Background color for the navigation bar +$navigation-color: #ddd; // Color for the navigation text +$navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse +// Enable navigation (_nav.scss). (Use individual mixins below to use.) @import '../scss/mini/nav'; -// Use nav mixin to create nav with default specs. -@include make-nav(nav, vertical, fixed, logo, 135%, link, 10px, #fff, #222, lighten, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em); \ No newline at end of file +// Use nav mixin to create nav with default specs. For more information +// refer to the _nav.scss file to check the definitions. +@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); +//==================================================================== +// Variable definitions for the Utilities and Helper Classes module (_utility.scss) +//==================================================================== +// Class names for the utility and helper classes (you can remove things you +// don't need or define more if you need them). +$thumbnail-class-name: thumb; // Name for the thumbnail class +$bordered-class-name: bordered; // Name for the bordered class +$bordered-radial-name: rounded; // Name for the rounded border class +$bordered-radial2-name: circle; // Name for the alternative rounded border class +$colored-text1-name: txt-blue; // Name for the colored text style 1 class +$colored-text2-name: txt-green; // Name for the colored text style 2 class +$colored-text3-name: txt-red; // Name for the colored text style 3 class +$colored-bg-text1-name: bg-blue; // Name for the colored background text style 1 class +$colored-bg-text2-name: bg-green; // Name for the colored background text style 2 class +$colored-bg-text3-name: bg-red; // Name for the colored background text style 3 class +$drag-left-name: drg-left; // Name for the drag-left class +$drag-right-name: drg-right; // Name for the drag-right class +$center-block-name: ct-block; // Name for the center block class +$caret-class-name: caret; // Name for the caret class +$close-class-name: close; // Name for the close class +$clearfix-class-name: cf; // Name for the clearfix class +$hidden-class-name: hidden; // Name for the hidden class +// Colors for the utility and helper classes (you can remove things you +// don't need or define more colors if you need them). +$bordered-radial-radius: 4px; // Border radius of rounded borders +$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders +$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class +$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class +$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class +$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class +$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class +$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class +// Enable utilities (_utility.scss). (Use individual mixins below to use.) +@import '../scss/mini/utility'; +// Use utility mixins to create utility classes with given specs. For more information +// refer to the _utility.scss file to check the definitions. +@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px); +@include make-border-generic($bordered-class-name); +@include make-border-radial-style($bordered-radial-name, $bordered-radial-radius); +@include make-border-radial-style($bordered-radial2-name, $bordered-radial2-radius); +@include make-colored-text($colored-text1-name, $colored-text1-color); +@include make-colored-text($colored-text2-name, $colored-text2-color); +@include make-colored-text($colored-text3-name, $colored-text3-color); +@include make-colored-bg-text($colored-bg-text1-name, $colored-bg-text1-bg-color); +@include make-colored-bg-text($colored-bg-text2-name, $colored-bg-text2-bg-color); +@include make-colored-bg-text($colored-bg-text3-name, $colored-bg-text3-bg-color); +@include make-caret-down($caret-class-name, 0.35em, #222); +@include make-close($close-class-name, #aaa, pointer, 1.3em, 700, #777); +@include make-drags($drag-left-name, $drag-right-name); +@include make-center-block($center-block-name); +@include make-clearfix($clearfix-class-name); +@include make-hidden($hidden-class-name); \ No newline at end of file diff --git a/scss/flavor.scss b/scss/flavor.scss new file mode 100644 index 0000000..307fcc0 --- /dev/null +++ b/scss/flavor.scss @@ -0,0 +1,227 @@ +//==================================================================== +// This is the file you should edit to make the flavor you want. +// Please read the instructions carefully. +//==================================================================== +// !! IMPORTANT !! +// Please copy this file or rename it, if you want to keep the default +// flavor definitions file. +//==================================================================== +// Update the comment below to include it in your flavor, providing the information +// you want along with your customized flavor. You can also delete it if you don't +// want it in your final CSS file. +/* + Flavor name: Default (mini-default) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v1.0 (September, 2016) +*/ +// Variable definitions for the Base module (_base.scss) +//==================================================================== +// Basic rules for body +$body-margin: 0; // Margin for body +$body-bg-color: #f5f5f5; // Body background color +$body-color: #222; // Body text color +// Basic typography rules +$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family +$base-font-size: 1em; // Font-size +$base-line-height: 1.5; // Line-height +// Rules for headers (multipliers apply on top of the basic typography rules) +$h1-multiplier: 2; // Header 1 font-sze multiplier +$h2-multiplier: 1.5; // Header 2 font-sze multiplier +$h3-multiplier: 1.15; // Header 3 font-sze multiplier +$h4-multiplier: 1; // Header 4 font-sze multiplier +$h5-multiplier: 0.8; // Header 5 font-sze multiplier +$h6-multiplier: 0.7; // Header 6 font-sze multiplier +$header-line-height-multiplier: 0.8; // Multiplier for line height of headers +$header-margin: 0.7em 0; // Margin for headers +$header-font-weight: 500; // Font weight for headers +// Rules for small elements inside headers +$header-small-color: lighten($body-color, 20%); // Header small text color +$header-small-font-weight: 200; // Header small font weight +// Rules for horizontal rules +$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule +$hr-margin: 0.7em 0; // Margin for horizontal rule +$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule +// Common content typography rules (paragraphs, lists etc.) +$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements +$small-font-size: 75%; // Font size for small, sub and sup elements +$sub-bottom: -0.25em; // Sub bottom +$sup-top: -0.5em; // Sup top +$list-margin-top: 0; // Top margin for lists +$list-margin-bottom: 0.6em; // Bottom margin for lists +$mark-bg-color: #ffff33; // Mark background color +$mark-color: $body-color; // Mark text color +// Code, preformatted and keyboard rules +$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements +$code-padding: 2px 4px; // Padding for code and pre elements +$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color +$code-border-radius: 4px; // Border radius for code, pre and kbd elements +$kbd-bg-color: $body-color; // Kbd background color +$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color +// Hyperlink rules +$a-color: #2678b3; // Hyperlink text color +$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color +$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color +$a-visited-hover-color: $a-color; // Hyperlink visited hover text color +// Button, input and form rules +$button-fonts: $base-fonts; // Font-family for buttons and inputs +$button-font-size: 100%; // Font size for buttons and inputs +$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs +$button-margin: 0; // Margin for buttons and inputs +$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset +$fieldset-border-radius: 4px; // Border radius for fieldset +$fieldset-margin: 0 2px; // Margin for fieldset +$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset +// Enable base (_base.scss) and use the variables defined above. +@import 'mini/base'; +//==================================================================== +// Variable definitions for the Button module (_button.scss) +//==================================================================== +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$btn-default-color: #2a2a2a; // Default text color for buttons +$btn-alt-color: #eeeeee; // Alternative text color for buttons +$btn-default-bg-color: #eaeaea; // Default background color for buttons +$btn-b-bg-color: #3f84b3; // Color for button style 1 +$btn-g-bg-color: #2db747; // Color for button style 2 +$btn-r-bg-color: #ea4848; // Color for button style 3 +// Button class names (you can remove things you don't need or define more +// classes if you need them). +$btn-class-name: btn; // Name for the base button class +$btn-style1-name: 'blue'; // Name for button style 1 class +$btn-style2-name: 'green'; // Name for button style 2 class +$btn-style3-name: 'red'; // Name for button style 3 class +$btn-size1-name: lg; // Name for the button size 1 class +$btn-size2-name: sm; // Name for the button size 2 class +// Enable buttons (_button.scss). (Use individual mixins below to use.) +@import 'mini/button'; +// Use button mixins to create buttons with given specs. For more information +// refer to the _button.scss file to check the definitions. +@include make-btn($btn-class-name, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65); +@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color); +@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color); +@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color); +@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%); +@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%); +//==================================================================== +// Variable definitions for the Grid module (_grid.scss) +//==================================================================== +// Class names for the grid system +$grid-container-name: grid-container; // Name for the grid container class +$grid-row-name: row; // Name for the grid's row class +$grid-column-name: col; // Name for the grid's column class +$grid-extra-small-device-name: xs; // Name for extra small devices +$grid-small-device-name: sm; // Name for small devices +$grid-medium-device-name: md; // Name for medium devices +$grid-large-device-name: lg; // Name for large devices +$grid-no-show-name: no; // Name for hidden grid elements class +// Grid breakpoints for different screens +$grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices +$grid-medium-breakpoint: 1024px; // Breakpoint for small to medium devices +$grid-large-breakpong: 1280px; // Breakpoint for medium to large devices +// Enable grid(s) (_grid.scss). (Use individual mixins below to use.) +@import 'mini/grid'; +// Use grid mixin to create grid with given specs. For more information +// refer to the grid.scss file to check the definitions. +@include make-grid($grid-container-name, 0, $grid-row-name, $grid-column-name, 12, 12px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint); +//==================================================================== +// Variable definitions for the Form module (_form.scss) +//==================================================================== +// Class names for the forms and components +$form-class-name: frm; // Name for the form class +$form-control-group-name: ctrl-group; // Name for the form's control group class +// Colors for form components +$form-focus-color: #2678b3; // Color for focused form element outline +$form-invalid-color: #e9322d; // Color for invalid form element outline +// Enable forms (_form.scss). (Use individual mixins below to use.) +@import 'mini/form'; +// Use form mixin to create form with given specs. For more information +// refer to the _form.scss file to check the definitions. +@include make-frm($form-class-name, 1px solid #ccc, 4px, 0.2em, 0.3em, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, $form-control-group-name, 0 0 0.3em 0, inline, aligned,15em); +//==================================================================== +// Variable definitions for the Table module (_table.scss) +//==================================================================== +// Class names for the tables +$table-class-name: tbl; // Name for the table class +$table-horizontal-name: hor; // Name for the horizontal style tables +$table-bordered-name: bor; // Name for the bordered style tables +// Colors for the tables +$table-head-bg-color: #d9d9d9; // Table header background color +$table-head-color: #111; // Table header text color +$table-body-bg-color: #f5f5f5; // Table body bakground color +$table-body-alt-bg-color: #ececec; // Table body alternative background color +$table-body-color: #111; // Table body text color +// Enable tables (_table.scss). (Use individual mixins below to use.) +@import 'mini/table'; +// Use table mixin to create table with given specs. For more information +// refer to the _table.scss file to check the definitions. +@include make-tbl($table-class-name, 1px solid #bdbdbd, 0, 0.5em, $table-head-bg-color, $table-head-color, $table-body-bg-color,$table-body-alt-bg-color, $table-body-color, $table-horizontal-name, $table-bordered-name); +//==================================================================== +// Variable definitions for the Navigation module (_nav.scss) +//==================================================================== +// Class names for the navigation elements +$navigation-class-name: nav; // Name for the navigation bar class +$navigation-vertical-name: vertical; // Name for the vertical navigation class +$navigation-fixed-name: fixed; // Name for the fixed navigation class +$navigation-logo-name: logo; // Name for the navigation logo class +$navigation-link-name: link; // Name for the navigation link class +// Colors and breakpoint for the navigation +$navigation-bg-color: #272727; // Background color for the navigation bar +$navigation-color: #ddd; // Color for the navigation text +$navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse +// Enable navigation (_nav.scss). (Use individual mixins below to use.) +@import 'mini/nav'; +// Use nav mixin to create nav with default specs. For more information +// refer to the _nav.scss file to check the definitions. +@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); +//==================================================================== +// Variable definitions for the Utilities and Helper Classes module (_utility.scss) +//==================================================================== +// Class names for the utility and helper classes (you can remove things you +// don't need or define more if you need them). +$thumbnail-class-name: thumb; // Name for the thumbnail class +$bordered-class-name: bordered; // Name for the bordered class +$bordered-radial-name: rounded; // Name for the rounded border class +$bordered-radial2-name: circle; // Name for the alternative rounded border class +$colored-text1-name: txt-blue; // Name for the colored text style 1 class +$colored-text2-name: txt-green; // Name for the colored text style 2 class +$colored-text3-name: txt-red; // Name for the colored text style 3 class +$colored-bg-text1-name: bg-blue; // Name for the colored background text style 1 class +$colored-bg-text2-name: bg-green; // Name for the colored background text style 2 class +$colored-bg-text3-name: bg-red; // Name for the colored background text style 3 class +$drag-left-name: drg-left; // Name for the drag-left class +$drag-right-name: drg-right; // Name for the drag-right class +$center-block-name: ct-block; // Name for the center block class +$caret-class-name: caret; // Name for the caret class +$close-class-name: close; // Name for the close class +$clearfix-class-name: cf; // Name for the clearfix class +$hidden-class-name: hidden; // Name for the hidden class +// Colors for the utility and helper classes (you can remove things you +// don't need or define more colors if you need them). +$bordered-radial-radius: 4px; // Border radius of rounded borders +$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders +$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class +$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class +$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class +$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class +$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class +$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class +// Enable utilities (_utility.scss). (Use individual mixins below to use.) +@import 'mini/utility'; +// Use utility mixins to create utility classes with given specs. For more information +// refer to the _utility.scss file to check the definitions. +@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px); +@include make-border-generic($bordered-class-name); +@include make-border-radial-style($bordered-radial-name, $bordered-radial-radius); +@include make-border-radial-style($bordered-radial2-name, $bordered-radial2-radius); +@include make-colored-text($colored-text1-name, $colored-text1-color); +@include make-colored-text($colored-text2-name, $colored-text2-color); +@include make-colored-text($colored-text3-name, $colored-text3-color); +@include make-colored-bg-text($colored-bg-text1-name, $colored-bg-text1-bg-color); +@include make-colored-bg-text($colored-bg-text2-name, $colored-bg-text2-bg-color); +@include make-colored-bg-text($colored-bg-text3-name, $colored-bg-text3-bg-color); +@include make-caret-down($caret-class-name, 0.35em, #222); +@include make-close($close-class-name, #aaa, pointer, 1.3em, 700, #777); +@include make-drags($drag-left-name, $drag-right-name); +@include make-center-block($center-block-name); +@include make-clearfix($clearfix-class-name); +@include make-hidden($hidden-class-name); \ No newline at end of file diff --git a/scss/mini/_variables.scss b/scss/mini/_variables.scss deleted file mode 100644 index fecf573..0000000 --- a/scss/mini/_variables.scss +++ /dev/null @@ -1,54 +0,0 @@ -// Base -$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family -$base-font-size: 1em; // Font-size -$base-line-height: 1.5; // Line-height -$body-margin: 0; // Margin for body -$body-bg-color: #f5f5f5; // Body background color -$body-color: #222; // Body text color -$header-line-height-multiplier: 0.8; // Multiplier for line height of headers -$header-margin: 0.7em 0; // Margin for headers -$header-font-weight: 500; // Font weight for headers -$h1-multiplier: 2; // Header 1 font-sze multiplier -$h2-multiplier: 1.5; // Header 2 font-sze multiplier -$h3-multiplier: 1.15; // Header 3 font-sze multiplier -$h4-multiplier: 1; // Header 4 font-sze multiplier -$h5-multiplier: 0.8; // Header 5 font-sze multiplier -$h6-multiplier: 0.7; // Header 6 font-sze multiplier -$header-small-color: lighten($body-color, 20%); // Header small text color -$header-small-font-weight: 200; // Header small font weight -$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule -$hr-margin: 0.7em 0; // Margin for horizontal rule -$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule -$small-font-size: 75%; // Font size for small, sub and sup elements -$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements -$list-margin-top: 0; // Top margin for lists -$list-margin-bottom: 0.6em; // Bottom margin for lists -$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements -$code-padding: 2px 4px; // Padding for code and pre elements -$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color -$code-border-radius: 4px; // Border radius for code, pre and kbd elements -$kbd-bg-color: $body-color; // Kbd background color -$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color -$a-color: #2678b3; // Hyperlink text color -$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color -$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color -$a-visited-hover-color: $a-color; // Hyperlink visited hover text color -$mark-bg-color: #ffff33; // Mark background color -$mark-color: $body-color; // Mark text color -$sub-bottom: -0.25em; // Sub bottom -$sup-top: -0.5em; // Sup top -$button-fonts: $base-fonts; // Font-family for buttons and inputs -$button-font-size: 100%; // Font size for buttons and inputs -$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs -$button-margin: 0; // Margin for buttons and inputs -$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset -$fieldset-border-radius: 4px; // Border radius for fieldset -$fieldset-margin: 0 2px; // Margin for fieldset -$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset -// Button default colors -$btn-default-color: #2a2a2a; // Default text color for buttons -$btn-alt-color: #eeeeee; // Alternative text color for buttons -$btn-default-bg-color: #eaeaea; // Default background color for buttons -$btn-b-bg-color: #3f84b3; // Color for button style 1 -$btn-g-bg-color: #2db747; // Color for button style 2 -$btn-r-bg-color: #ea4848; // Color for button style 3 \ No newline at end of file