diff --git a/flavors/mini-bootstrap.css b/flavors/mini-bootstrap.css new file mode 100644 index 0000000..8b7f5d2 --- /dev/null +++ b/flavors/mini-bootstrap.css @@ -0,0 +1,1867 @@ +/* + Flavor name: Bootstrap (mini-bootstrap) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v1.1 (October, 2016) +*/ +/* + 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], .btn:disabled, a.btn.disabled, a.btn[disabled], a.btn:disabled, a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visited: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; } + +/* + 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: #272727; } + .nav .logo { + font-size: 135%; + color: #ddd; } + .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: #ddd; + margin: 0; } + .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { + color: #ddd; + background: #141414; } + .nav ul li .link.disabled, .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: #ddd; + background-color: #272727; + 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: #141414; } + +@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: + - $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. + - $thumb-hover-color : The color of the thumbnail's border when hovering over it. + 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; + cursor: pointer; } + img.thumb:hover, img.thumb:focus, img.thumbactive { + border-color: #2678b3; } + +.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: 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, .close:active, .close:focus { + 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 the labels/badges. + Parameters: + - $lbl-name : The class name of the labels/badges. + - $lbl-bg-color : The background color of the labels/badges. + - $lbl-color : The text color of the labels/badges. + - $lbl-border-radius : The border-radius of the labels/badges. + - $lbl-padding : The padding of the labels/badges. + - $lbl-hide-on-empty : Style of the label/badges when empty. [1] + Notes: + - [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only + checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`. +*/ +/* + Mixin for labels/badges styles. + Parameters: + - $lbl-name : The class name of the labels/badges. [1] + - $lbl-style-name : The class name of the labels/badges style. + - $lbl-style-color : The text color of the labels/badges style. + - $lbl-style-bg-color : The background color of the labels/badges style. + Notes: + - [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise + the specified style will not work correctly. +*/ +.lbl { + display: inline-block; + padding: 6px 10px; + color: #eeeeee; + background-color: #777; + border-radius: 4px; } + .lbl:empty { + display: none; } + +.lbl.blue { + color: #eeeeee; + background-color: #3f84b3; } + +.lbl.green { + color: #eeeeee; + background-color: #2db747; } + +.lbl.red { + color: #eeeeee; + background-color: #ea4848; } + +.bdg { + display: inline-block; + padding: 3px 8px; + color: #eeeeee; + background-color: #777; + border-radius: 8px; } + .bdg:empty { + display: none; } + +.bdg.blue { + color: #eeeeee; + background-color: #3f84b3; } + +.bdg.green { + color: #eeeeee; + background-color: #2db747; } + +.bdg.red { + color: #eeeeee; + background-color: #ea4848; } + +/* + Mixin for tab system. + Parameters: + - $tabs-name : The class name for the tab system's container. + - $tabs-label-spacing : The spacing between tab labels. + - $tabs-label-height : The height of the tab labels. + - $tabs-label-padding : The padding of the tab labels. + - $tabs-label-color : The text color of the tab labels. + - $tabs-label-bg-color : The background color of the tab labels. + - $tabs-active-label-color : The text color of the active tab's label. + - $tabs-active-label-bg-color : The background color of the active tab's label. + - $tabs-border-color : Border color for the tab system. [1] + - $tabs-label-border-radius : Border radius for the tab labels. + - $tabs-active-label-stripe : The style of the colored stripe that appears on the active tab's label. [2] + - $tabs-inactive-label-hover-style : Hover/active/focus style of the tab labels. [3] + - $tabs-inactive-label-hover-style-percentage : Hover/active/focus style of the tab labels percentage modifier. + - $tabs-content-bg-color : The background color of the active tab's content. + - $tabs-content-padding : The padding of the active tab's content. + Notes: + - [1] : The color specified in $tabs-border-color applies to all borders in the tab system. This + includes borders in the tab labels and active tab's content. + - [2] : The style of the colored stripe is a border style so you should specify it as such. + - [3] : The values that $tabs-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`. +*/ +.tabs { + position: relative; + min-height: 250px; + width: 100%; } + .tabs input[type="radio"] { + display: none; } + .tabs input[type="radio"] + div { + display: inline; } + .tabs input[type="radio"] + div > label { + position: reative; + float: left; + margin-right: 3px; + left: 1px; + height: 40px; + padding: 8px 14px; + color: #2678b3; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px 4px 0 0; + cursor: pointer; } + .tabs input[type="radio"] + div > label:hover, .tabs input[type="radio"] + div > label:active, .tabs input[type="radio"] + div > label:focus { + background: gainsboro; } + .tabs input[type="radio"] + div > label + div { + position: absolute; + z-index: -2; + left: 0; + top: 39px; + bottom: 0; + right: 0; + padding: 20px; + background: #fff; + border: 1px solid #ccc; } + .tabs input[type="radio"]:checked + div > label { + color: #222; + background: #fff; + border-top: 3px solid #2678b3; + border-bottom: 1px solid #fff; } + .tabs input[type="radio"]:checked + div > label + div { + position: absolute; + z-index: -1; } + +/* + Mixin for modal dialogs. + Parameters: + - $modal-name : The class name for the modal dialog. + - $modal-color : The text color of the modal dialog. + - $modal-bg-color : The background color of the modal dialog. + - $modal-transition-enabled : Determines if a transition style will be applied when the modal changes states. [1] + - $modal-shadow-enabled : Determines if a shadow should be cast from the modal dialog. [1] + - $modal-border : The border style of the modal dialog. + - $modal-border-radius : The border radius of the modal dialog's border. + - $modal-padding : The padding of the modal dialog's contents. + - $modal-top-margin : The distance of the modal dialog from the top of the parent container. [2] + - $modal-width : The width of the modal dialog. [2] + Notes: + - [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be `enabled` or `disabled`. + If an invalid value is supplied, the mixin will act as if it was `disabled`. + - [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale + on all devices. However, there are no restrictions. +*/ +/* + Mixin for close button support inside of modal dialogs. + Parameters: + - $modal-name : The class name for the modal dialog. [1] + - $close-name : The class name for the close sign utility class. [2] + - $modal-padding : The padding of the close button. [3] + Notes: + - [1] : The value of $modal-name should match the value specified in the modal dialog's + mixin, in order for this to work correctly. + - [2] : The value of $close-name should match the value specified in the close sign utility's + mixin, in order for this to work correctly. + - [3] : The close button will be placed at the top right of the modal dialog. Its padding + should be similar to the value specified for padding in the modal dialog itself, however + it could vary based on personal preference. +*/ +.modal { + display: none; } + .modal + div { + z-index: 997; + position: fixed; + width: 100%; + height: 0; + opacity: 0; + display: none; + transition: opacity .3s ease-out; } + .modal + div > div { + z-index: 998; + position: relative; + width: 45%; + color: #222; + background-color: #f5f5f5; + margin: 8.5% auto 0; + padding: 18px; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } + .modal:checked + div { + height: 100%; + opacity: 1; + display: block; } + .modal:checked + div > label { + background-color: rgba(0, 0, 0, 0.35); + position: fixed; + width: 100%; + height: 100%; + top: 0; } + +.modal + div > div .close { + position: absolute; + top: 20px; + right: 20px; } + +/* + Mixin for navigation bar's dropdown element. + Parameters: + - $nav-name : The class name for the navigation bar. [1] + - $nav-link-name : The class name for the navigation links of the navigation bar. [1] + - $dropdown-name : The class name for the dropdown element. [2] + - $dropdown-left-margin : The left margin of the dropdown element's contents. [3] + - $dropdown-font-size : The font size of the dropdown element's contents. + Notes: + - [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's + definition, otherwise the dropdown element will not work properly. + - [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the + checkbox and the dropdown toggle. + - [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown + menus on mobile screens. It is suggested that you set this value to something different than + 0 to visually represent the menu hierarchy in devices with smaller screens. +*/ +.nav .link.dropdown { + cursor: pointer; } +.nav input[type="checkbox"], .nav input[type="radio"] { + display: none; } + .nav input[type="checkbox"].dropdown + div, .nav input[type="radio"].dropdown + div { + display: none; } + .nav input[type="checkbox"]:checked.dropdown + div, .nav input[type="radio"]:checked.dropdown + div { + display: block; + font-size: 0.8em; + margin-left: 20px; } + +/* + Mixin for collapse component. + Parameters: + - $collapse-name : The class name of the collapse component. + - $collapse-border : The border style of the collapse contents. + - $collapse-border-radius : The border radius of the collapse contents. + - $collapse-padding : The padding of the collapse contents. + - $collapse-margin-top : The margin above the collapse contents. [1] + - $collapse-color : The collapse contents' text color. + - $collapse-bg-color : The collapse contents' background color. + Notes: + - [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually + above the collapsed contents and the contents themselves. +*/ +/* + Mixin for accordion component. + Parameters: + - $accordion-name : The class name of the accordion component. + - $accordion-border : The border style of the accordion component. + - $accordion-border-radius : The border radius of the accordion component. [1] + - $accordion-padding : The padding of the accordion's contents. + - $accordion-margin : The margin between accordion's parts. [2] + - $accordion-color : The accordion contents' text color. + - $accordion-bg-color : The accordion contents' background color. + - $accordion-label-color : The accordion labels' text color. + - $accordion-label-bg-color : The accordion labels' background color. + - $accordion-label-padding : The padding of the accordion's labels. + - $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3] + - $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier. + Notes: + - [1] : The value of $accordion-border-radius will be applied to labels along with their contents. + Closed labels will have the border-radius applied to all of their corners, while open labels will + change accordingly to combine their border with the shown contents. + - [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order + to space them out evenly. This does not apply to label and related content margins. + - [3] : The values that $accordion-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`. +*/ +input[type="checkbox"].clps { + display: none; } + input[type="checkbox"].clps + div { + display: none; + color: #222; + background-color: #eeeeee; + padding: 10px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; } +input[type="checkbox"]:checked.clps + div { + display: block; } + +input[type="radio"].acrd { + display: none; } + input[type="radio"].acrd + label { + width: 100%; + display: block; + color: #222; + background-color: #eeeeee; + padding: 8px; + margin-bottom: 5px; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; } + input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus { + background-color: #dbdbdb; } + input[type="radio"].acrd + label + div { + display: none; + color: #222; + background-color: #f5f5f5; + padding: 10px; + margin-top: -1px; + margin-bottom: 5px; + border: 1px solid #ccc; + border-radius: 0 0 4px 4px; } +input[type="radio"]:checked.acrd + label { + border-radius: 4px 4px 0 0; + margin-bottom: 0; } + input[type="radio"]:checked.acrd + label + div { + display: block; } + +/* + Mixin for the progress element. + Parameters: + - $progress-name : The class name of the progress wrapper. + - $progress-height : The height of the progress wrapper. + - $progress-border-radius : The border radius of the progress wrapper. + - $progress-bg-color : The background color of the progress wrapper. [1] + - $progress-font-size : The font size of the progress bar's text (if any). + - $progress-bar-color : The progress bar's text color. + - $progress-bar-bg-color : The progress bar's background color. + Notes: + - [1] : The background color of the progress wrapper should be a different color than the + page's background to make sure that it is visible. + - [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`. +*/ +/* + Mixin for progress bar styles. + Parameters: + - $progress-name : The class name of the progress wrapper. [1] + - $progress-bar-variant-name : The class name of the progress bar variant. + - $progress-bar-variant-color : The progress bar variant's text color. + - $progress-bar-variant-bg-coor : The progress bar variant's background color. + Notes: + - [1] : The name of $progress-name should match the one specified in `make-progress` for the + progress bar variant to work correctly. + - [2] : This mixin should be used in combination with `make-progress` and is suggested that you + use it after `make-progress`. +*/ +.prg { + position: relative; + overflow: hidden; + height: 20px; + background-color: #d7d7d7; + border-radius: 4px; } + .prg > span { + float: left; + width: 0; + height: 100%; + color: #eeeeee; + background-color: #3f84b3; + text-align: center; + font-size: 0.8em; } + +.prg > span.green { + color: #eeeeee; + background-color: #2db747; } + +.prg > span.red { + color: #eeeeee; + background-color: #ea4848; } + +/* + Mixin for dotted spinner component. + Parameters: + - $spinner-dots-name : The class name of the dotted spinner component. + - $spinner-dots-height : The height of the dotted spinner component. [1][2] + - $spinner-dots-animation-time : The animation time of the dotted spinner component. + Notes: + - [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is + suggested that you specify it in the same measurement as the text base. + - [2] : The value of $spinner-dots-height will be used for both the size of the component + and the animation. Some tweaking might be required. +*/ +/* + Mixin for dotted spinner component. + Parameters: + - $spinner-round-name : The class name of the round spinner component. + - $spinner-round-size : The size of the round spinner component. [1] + - $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2] + - $spinner-round-spin-style : The spinning part style of the round spinner component. [2] + - $spinner-round-animation-time : The animation time of the round spinner component. + Notes: + - [1] : The value of $spinner-round-size affects both height and width of the component. + - [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles + specified in border style format. +*/ +.spinner-dots { + display: inline-block; + overflow: hidden; + height: 1.5em; + vertical-align: bottom; } + .spinner-dots:after { + display: inline-table; + white-space: pre; + content: "\A.\A..\A..."; + animation: spin-dots 1.5s steps(4) infinite; } + +@keyframes spin-dots { + to { + transform: translateY(-6em); } } +.spinner-round { + display: inline-block; + border: 0.4em solid rgba(34, 34, 34, 0.2); + border-left: 0.4em solid #222; + transform: translateZ(0); + animation: spin-round 1.5s infinite linear; } + .spinner-round, .spinner-round:after { + border-radius: 50%; + width: 1.5em; + height: 1.5em; } + +@keyframes spin-round { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } +/* + Mixin for the carousel component. + Parameters: + - $carousel-name : The class name for the carousel. + - $carousel-width : The width of the carousel. [1] + - $carousel-height : The height of the carousel. + - $carousel-border : The style of the carousel's border. + - $carousel-border-radius : The border-radius of the carousel. + - $carousel-container-bg-color : The background color of the carousel. + - $carousel-content-padding : The padding of the carousel's contents. [2] + - $carousel-description-color : The text color of the carousel's description. + - $carousel-description-bg-color : The background color of the carousel's description. + - $carousel-description-top : The distance of the carousel's description from the top of the container. [3] + - $carousel-description-height : The height of the carousel's description area. [3] + - $carousel-control-top : The distance of the carousel's controls from the top of the container. [3] + - $carousel-control-font-size : The font-size of the carousel's controls. + - $carousel-control-color : The text color of the carousel's controls. + Notes: + - [1] : The height of the carousel is suggested to be defined as a percentage so that + it makes it responsive for smaller screens. + - [2] : The value of $carousel-content-padding only applies to images inside the carousel. + - [3] : The distances from the top are used for positioning the elements. The height of the + desccription should normally be the height of the container minus the top distance of + the description. Control distance should be about 90% of the container's height. +*/ +.carousel { + position: relative; + width: 80%; + height: 500px; + overflow: hidden; + text-align: center; + margin: auto; + border: 1px solid #ccc; + border-radius: 4px; } + .carousel input[type="radio"] { + display: none; } + .carousel input[type="radio"] + div { + display: none; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + padding: 10px; + background-color: #e7e7e7; } + .carousel input[type="radio"] + div > img { + max-width: 100%; + max-height: 100%; + margin: auto; } + .carousel input[type="radio"] + div > div { + position: absolute; + width: 100%; + height: 160px; + overflow: auto; + left: 0; + top: 340px; + background-color: #222; + color: #f5f5f5; + opacity: 0.1; } + .carousel input[type="radio"] + div > div:hover, .carousel input[type="radio"] + div > div:active, .carousel input[type="radio"] + div > div:focus { + opacity: 0.8; } + .carousel input[type="radio"] + div + label { + position: relative; + z-index: 998; + cursor: pointer; + top: 450px; + color: #fafafa; + font-size: 1.8em; } + .carousel input[type="radio"] + div + label:before { + content: '\25cb'; } + .carousel input[type="radio"]:checked + div { + display: block; } + .carousel input[type="radio"]:checked + div + label:before { + content: '\25cf'; } + +/* + Mixin for breadcrumbs style. + Parameters: + - $breadcrumbs-name : The class name for the breadcrumbs style. + - $breadcrumbs-style : The style of the breadcrumbs separator character. [1][2][3] + Notes: + - [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is + supplied, it will be treated as 3. + - [2] : The three provided styles are as follows: + - $breadcrumbs-style == 1 : forward slash. + - $breadcrumbs-style == 2 : greater than symbol. + - $breadcrumbs-style == 3 : right angle symbol (default). + - [3] : The value of $breadcrumbs-style can be omitted and will default to 3. +*/ +/* + Mixin for generic container style. + Parameters: + - $container-name : The class name for the generic container. + - $container-color : The text color of the generic container. + - $container-bg-color : The background color of the generic container. + - $container-border : The border style of the generic container. + - $container-border-radius : The border-radius of the generic container. + - $container-padding : The content badding of the generic container. + Notes: + - [1] : This mixin is also used for making alerts and panels. +*/ +/* + Mixin for generic alert style. + Parameters: + - $alert-name : The class name for the alert. + - $alert-color : The text color of the alert. + - $alert-bg-color : The background color of the alert. + - $alert-border : The border style of the alert. + - $alert-border-radius : The border-radius of the alert. + - $alert-padding : The content badding of the alert. + - $close-name : The class name for the close utility. [1] + Notes: + - [1] : The value of $close-name must match that of the class specified + for close elements for the alert to work correctly. + - [2] : This mixin uses `make-generic-container` to partially generate its + CSS. +*/ +/* + Mixin for generic panel style. + Parameters: + - $panel-name : The class name for the panel. + - $panel-color : The text color of the panel. + - $panel-bg-color : The background color of the panel. + - $panel-border : The border style of the panel. + - $panel-border-radius : The border-radius of the panel. + - $panel-padding : The content badding of the panel. + - $panel-header-name : The class name for the panel's header. + - $panel-header-color : The text color of the panel's header. + - $panel-header-bg-color : The background color of the panel's header. + - $panel-header-padding : The padding of the panel's header. + Notes: + - [1] : This mixin uses `make-generic-container` to partially generate its + CSS. +*/ +/* + Mixin for generic popover style. + Parameters: + - $popover-name : The name for the popover style + - $popover-direction : The direction of the popover. [1] + - $popover-border-radius : The border radius for the popover style. + - $popover-distance : The distance for the popover style's placement. [2] + - $popover-color : The text color of the popover style. + - $popover-bg-color : The background color of the popover style. + - $popover-padding : The padding of the popover. + Notes: + - [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value + is provided, it will be treated as 'bottom'. + - [2] : The value of $popover-distance should be treated as a general guideline for the popover + distance and is supposed to be tweaked with inline styles or helper classes for better use. +*/ +/* + Mixin for generic button states. + Parameters: + - $button-states-name : The class name of the stateful button. + Notes: + - [1] : This mixin is experimental, it might be buggy. +*/ +/* + Mixin for generic button groups. + Parameters: + - $btn-group-name : The class name of the button group. + - $btn-name : The name of the button class. [1][2] + - $btn-group-border : The border style of the button group. + - $btn-group-border-radius : The border radius at the edges of the button group. + Notes: + - [1] : The value of $btn-name must match that of the generic button class. + - [2] : The value of $btn-name can be hacked to allow for button variants to be styled + in custom manners (e.g. if you button class is `btn` and your button variant's class + is `blue`, you can style it, using `btn +'.blue'`). + - [3] : This mixin is experimental, although it is marked stable for most cases. + - [4] : The results of this mixin are purely stylistic and do not provide any grouping + functionality. +*/ +.brdcrmb { + list-style: none; } + .brdcrmb > li { + display: inline-block; } + .brdcrmb > li + li:before { + content: '\27e9\00a0'; } + +.well { + border: 1px solid #ccc; + border-radius: 4px; + background-color: #e7e7e7; + color: #222; + padding: 20px; } + +.alert-blue + div { + border: 1px solid #32688d; + border-radius: 4px; + background-color: #5e9cc7; + color: #244c68; + padding: 20px; } + +input[type="checkbox"].alert-blue { + display: none; } + input[type="checkbox"].alert-blue + div { + display: none; + position: relative; } + input[type="checkbox"].alert-blue + div a { + font-weight: 700; + text-decoration: none; + color: #173142; } + input[type="checkbox"].alert-blue + div a:hover, input[type="checkbox"].alert-blue + div a:active, input[type="checkbox"].alert-blue + div a:focus { + text-decoration: underline; } + input[type="checkbox"].alert-blue + div .close { + position: absolute; + top: 20px; + right: 20px; + color: #244c68; } + input[type="checkbox"].alert-blue + div .close:hover, input[type="checkbox"].alert-blue + div .close:active, input[type="checkbox"].alert-blue + div .close:focus { + color: #173142; } + +input[type="checkbox"]:checked.alert-blue + div { + display: block; } + +.alert-green + div { + border: 1px solid #238e37; + border-radius: 4px; + background-color: #46d160; + color: #196527; + padding: 20px; } + +input[type="checkbox"].alert-green { + display: none; } + input[type="checkbox"].alert-green + div { + display: none; + position: relative; } + input[type="checkbox"].alert-green + div a { + font-weight: 700; + text-decoration: none; + color: #0f3c17; } + input[type="checkbox"].alert-green + div a:hover, input[type="checkbox"].alert-green + div a:active, input[type="checkbox"].alert-green + div a:focus { + text-decoration: underline; } + input[type="checkbox"].alert-green + div .close { + position: absolute; + top: 20px; + right: 20px; + color: #196527; } + input[type="checkbox"].alert-green + div .close:hover, input[type="checkbox"].alert-green + div .close:active, input[type="checkbox"].alert-green + div .close:focus { + color: #0f3c17; } + +input[type="checkbox"]:checked.alert-green + div { + display: block; } + +.alert-red + div { + border: 1px solid #e51a1a; + border-radius: 4px; + background-color: #ef7676; + color: #b71515; + padding: 20px; } + +input[type="checkbox"].alert-red { + display: none; } + input[type="checkbox"].alert-red + div { + display: none; + position: relative; } + input[type="checkbox"].alert-red + div a { + font-weight: 700; + text-decoration: none; + color: #891010; } + input[type="checkbox"].alert-red + div a:hover, input[type="checkbox"].alert-red + div a:active, input[type="checkbox"].alert-red + div a:focus { + text-decoration: underline; } + input[type="checkbox"].alert-red + div .close { + position: absolute; + top: 20px; + right: 20px; + color: #b71515; } + input[type="checkbox"].alert-red + div .close:hover, input[type="checkbox"].alert-red + div .close:active, input[type="checkbox"].alert-red + div .close:focus { + color: #891010; } + +input[type="checkbox"]:checked.alert-red + div { + display: block; } + +.panel { + border: 1px solid #ccc; + border-radius: 4px; + background-color: #f5f5f5; + color: #222; + padding: 0; } + +.panel > * { + padding: 10px; } +.panel .head { + border: 0; + border-bottom: 1px solid #ccc; + color: #222; + background-color: #e7e7e7; + padding: 10px; + margin: 0; } + +input[type="checkbox"].popover-top { + display: none; } + input[type="checkbox"].popover-top + label { + position: relative; } + input[type="checkbox"].popover-top + label > .popover-top { + position: absolute; + display: none; + background-color: #222; + color: #f5f5f5; + border-radius: 5px; + padding: 7px 10px; + z-index: 998; + width: auto; + bottom: 49px; } + input[type="checkbox"].popover-top + label > .popover-top:before { + position: absolute; + display: block; + border-top: 7px solid #222; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + bottom: -7px; + content: ''; + left: 50%; + margin-left: -7px; } +input[type="checkbox"]:checked.popover-top + label > .popover-top { + display: block; } + +input[type="checkbox"].popover-bottom { + display: none; } + input[type="checkbox"].popover-bottom + label { + position: relative; } + input[type="checkbox"].popover-bottom + label > .popover-bottom { + position: absolute; + display: none; + background-color: #222; + color: #f5f5f5; + border-radius: 4px; + padding: 7px 10px; + z-index: 998; + width: auto; + top: 49px; } + input[type="checkbox"].popover-bottom + label > .popover-bottom:before { + position: absolute; + display: block; + border-bottom: 7px solid #222; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + top: -7px; + content: ''; + left: 50%; + margin-left: -7px; } +input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom { + display: block; } + +.btn-grp .btn { + border: 1px solid #ccc; + margin: 0; } + .btn-grp .btn:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: 0; } + .btn-grp .btn:first-child { + border-radius: 4px 0 0 4px; + border-right: 0; } + .btn-grp .btn:last-child { + border-radius: 0 4px 4px 0; } + +.btn-grp .btn.blue { + border: 1px solid #32688d; + margin: 0; } + .btn-grp .btn.blue:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: 0; } + .btn-grp .btn.blue:first-child { + border-radius: 4px 0 0 4px; + border-right: 0; } + .btn-grp .btn.blue:last-child { + border-radius: 0 4px 4px 0; } + +.btn-grp .btn.green { + border: 1px solid #238e37; + margin: 0; } + .btn-grp .btn.green:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: 0; } + .btn-grp .btn.green:first-child { + border-radius: 4px 0 0 4px; + border-right: 0; } + .btn-grp .btn.green:last-child { + border-radius: 0 4px 4px 0; } + +.btn-grp .btn.red { + border: 1px solid 1px solid #e51a1a; + margin: 0; } + .btn-grp .btn.red:not(:first-child):not(:last-child) { + border-radius: 0; + border-right: 0; } + .btn-grp .btn.red:first-child { + border-radius: 4px 0 0 4px; + border-right: 0; } + .btn-grp .btn.red:last-child { + border-radius: 0 4px 4px 0; } diff --git a/flavors/mini-bootstrap.min.css b/flavors/mini-bootstrap.min.css new file mode 100644 index 0000000..77a409e --- /dev/null +++ b/flavors/mini-bootstrap.min.css @@ -0,0 +1 @@ +html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#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,.btn[disabled],a.btn.disabled,a.btn:disabled,a.btn:visited.disabled,a.btn:visited:disabled,a.btn:visited[disabled],a.btn[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:#272727}.nav .logo{font-size:135%;color:#ddd}.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:#ddd;margin:0}.nav ul li .link:active,.nav ul li .link:focus,.nav ul li .link:hover{color:#ddd;background:#141414}.nav ul li .link.disabled,.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:#ddd;background-color:#272727;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:#141414}@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;cursor:pointer}img.thumb:focus,img.thumb:hover,img.thumbactive{border-color:#2678b3}.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:.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:active,.close:focus,.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}.lbl{display:inline-block;padding:6px 10px;color:#eee;background-color:#777;border-radius:4px}.lbl:empty{display:none}.lbl.blue{color:#eee;background-color:#3f84b3}.lbl.green{color:#eee;background-color:#2db747}.lbl.red{color:#eee;background-color:#ea4848}.bdg{display:inline-block;padding:3px 8px;color:#eee;background-color:#777;border-radius:8px}.bdg:empty{display:none}.bdg.blue{color:#eee;background-color:#3f84b3}.bdg.green{color:#eee;background-color:#2db747}.bdg.red{color:#eee;background-color:#ea4848}.tabs{position:relative;min-height:250px;width:100%}.tabs input[type=radio]{display:none}.tabs input[type=radio]+div{display:inline}.tabs input[type=radio]+div>label{position:reative;float:left;margin-right:3px;left:1px;height:40px;padding:8px 14px;color:#2678b3;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px 4px 0 0;cursor:pointer}.tabs input[type=radio]+div>label:active,.tabs input[type=radio]+div>label:focus,.tabs input[type=radio]+div>label:hover{background:#dcdcdc}.tabs input[type=radio]+div>label+div{position:absolute;z-index:-2;left:0;top:39px;bottom:0;right:0;padding:20px;background:#fff;border:1px solid #ccc}.tabs input[type=radio]:checked+div>label{color:#222;background:#fff;border-top:3px solid #2678b3;border-bottom:1px solid #fff}.tabs input[type=radio]:checked+div>label+div{position:absolute;z-index:-1}.modal{display:none}.modal+div{z-index:997;position:fixed;width:100%;height:0;opacity:0;display:none;transition:opacity .3s ease-out}.modal+div>div{z-index:998;position:relative;width:45%;color:#222;background-color:#f5f5f5;margin:8.5% auto 0;padding:18px;border:1px solid #ccc;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal:checked+div{height:100%;opacity:1;display:block}.modal:checked+div>label{background-color:rgba(0,0,0,.35);position:fixed;width:100%;height:100%;top:0}.modal+div>div .close{position:absolute;top:20px;right:20px}.nav .link.dropdown{cursor:pointer}.nav input[type=checkbox],.nav input[type=checkbox].dropdown+div,.nav input[type=radio],.nav input[type=radio].dropdown+div{display:none}.nav input[type=checkbox]:checked.dropdown+div,.nav input[type=radio]:checked.dropdown+div{display:block;font-size:.8em;margin-left:20px}input[type=checkbox].clps{display:none}input[type=checkbox].clps+div{display:none;color:#222;background-color:#eee;padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px}input[type=checkbox]:checked.clps+div{display:block}input[type=radio].acrd{display:none}input[type=radio].acrd+label{width:100%;display:block;color:#222;background-color:#eee;padding:8px;margin-bottom:5px;border:1px solid #ccc;border-radius:4px;cursor:pointer}input[type=radio].acrd+label:active,input[type=radio].acrd+label:focus,input[type=radio].acrd+label:hover{background-color:#dbdbdb}input[type=radio].acrd+label+div{display:none;color:#222;background-color:#f5f5f5;padding:10px;margin-top:-1px;margin-bottom:5px;border:1px solid #ccc;border-radius:0 0 4px 4px}input[type=radio]:checked.acrd+label{border-radius:4px 4px 0 0;margin-bottom:0}input[type=radio]:checked.acrd+label+div{display:block}.prg{position:relative;overflow:hidden;height:20px;background-color:#d7d7d7;border-radius:4px}.prg>span{float:left;width:0;height:100%;color:#eee;background-color:#3f84b3;text-align:center;font-size:.8em}.prg>span.green{color:#eee;background-color:#2db747}.prg>span.red{color:#eee;background-color:#ea4848}.spinner-dots{display:inline-block;overflow:hidden;height:1.5em;vertical-align:bottom}.spinner-dots:after{display:inline-table;white-space:pre;content:"\A.\A..\A...";animation:spin-dots 1.5s steps(4) infinite}@keyframes spin-dots{to{transform:translateY(-6em)}}.spinner-round{display:inline-block;border:.4em solid rgba(34,34,34,.2);border-left:.4em solid #222;transform:translateZ(0);animation:spin-round 1.5s infinite linear}.spinner-round,.spinner-round:after{border-radius:50%;width:1.5em;height:1.5em}@keyframes spin-round{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.carousel{position:relative;width:80%;height:500px;overflow:hidden;text-align:center;margin:auto;border:1px solid #ccc;border-radius:4px}.carousel input[type=radio]{display:none}.carousel input[type=radio]+div{display:none;position:absolute;width:100%;height:100%;left:0;top:0;padding:10px;background-color:#e7e7e7}.carousel input[type=radio]+div>img{max-width:100%;max-height:100%;margin:auto}.carousel input[type=radio]+div>div{position:absolute;width:100%;height:160px;overflow:auto;left:0;top:340px;background-color:#222;color:#f5f5f5;opacity:.1}.carousel input[type=radio]+div>div:active,.carousel input[type=radio]+div>div:focus,.carousel input[type=radio]+div>div:hover{opacity:.8}.carousel input[type=radio]+div+label{position:relative;z-index:998;cursor:pointer;top:450px;color:#fafafa;font-size:1.8em}.carousel input[type=radio]+div+label:before{content:'\25cb'}.carousel input[type=radio]:checked+div{display:block}.carousel input[type=radio]:checked+div+label:before{content:'\25cf'}.brdcrmb{list-style:none}.brdcrmb>li{display:inline-block}.brdcrmb>li+li:before{content:'\27e9\00a0'}.well{border:1px solid #ccc;border-radius:4px;background-color:#e7e7e7;color:#222;padding:20px}.alert-blue+div{border:1px solid #32688d;border-radius:4px;background-color:#5e9cc7;color:#244c68;padding:20px}input[type=checkbox].alert-blue{display:none}input[type=checkbox].alert-blue+div{display:none;position:relative}input[type=checkbox].alert-blue+div a{font-weight:700;text-decoration:none;color:#173142}input[type=checkbox].alert-blue+div a:active,input[type=checkbox].alert-blue+div a:focus,input[type=checkbox].alert-blue+div a:hover{text-decoration:underline}input[type=checkbox].alert-blue+div .close{position:absolute;top:20px;right:20px;color:#244c68}input[type=checkbox].alert-blue+div .close:active,input[type=checkbox].alert-blue+div .close:focus,input[type=checkbox].alert-blue+div .close:hover{color:#173142}input[type=checkbox]:checked.alert-blue+div{display:block}.alert-green+div{border:1px solid #238e37;border-radius:4px;background-color:#46d160;color:#196527;padding:20px}input[type=checkbox].alert-green{display:none}input[type=checkbox].alert-green+div{display:none;position:relative}input[type=checkbox].alert-green+div a{font-weight:700;text-decoration:none;color:#0f3c17}input[type=checkbox].alert-green+div a:active,input[type=checkbox].alert-green+div a:focus,input[type=checkbox].alert-green+div a:hover{text-decoration:underline}input[type=checkbox].alert-green+div .close{position:absolute;top:20px;right:20px;color:#196527}input[type=checkbox].alert-green+div .close:active,input[type=checkbox].alert-green+div .close:focus,input[type=checkbox].alert-green+div .close:hover{color:#0f3c17}input[type=checkbox]:checked.alert-green+div{display:block}.alert-red+div{border:1px solid #e51a1a;border-radius:4px;background-color:#ef7676;color:#b71515;padding:20px}input[type=checkbox].alert-red{display:none}input[type=checkbox].alert-red+div{display:none;position:relative}input[type=checkbox].alert-red+div a{font-weight:700;text-decoration:none;color:#891010}input[type=checkbox].alert-red+div a:active,input[type=checkbox].alert-red+div a:focus,input[type=checkbox].alert-red+div a:hover{text-decoration:underline}input[type=checkbox].alert-red+div .close{position:absolute;top:20px;right:20px;color:#b71515}input[type=checkbox].alert-red+div .close:active,input[type=checkbox].alert-red+div .close:focus,input[type=checkbox].alert-red+div .close:hover{color:#891010}input[type=checkbox]:checked.alert-red+div{display:block}.panel{border:1px solid #ccc;border-radius:4px;background-color:#f5f5f5;color:#222;padding:0}.panel>*{padding:10px}.panel .head{border:0;border-bottom:1px solid #ccc;color:#222;background-color:#e7e7e7;padding:10px;margin:0}input[type=checkbox].popover-top{display:none}input[type=checkbox].popover-top+label{position:relative}input[type=checkbox].popover-top+label>.popover-top{position:absolute;display:none;background-color:#222;color:#f5f5f5;border-radius:5px;padding:7px 10px;z-index:998;width:auto;bottom:49px}input[type=checkbox].popover-top+label>.popover-top:before{position:absolute;display:block;border-top:7px solid #222;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-top+label>.popover-top{display:block}input[type=checkbox].popover-bottom{display:none}input[type=checkbox].popover-bottom+label{position:relative}input[type=checkbox].popover-bottom+label>.popover-bottom{position:absolute;display:none;background-color:#222;color:#f5f5f5;border-radius:4px;padding:7px 10px;z-index:998;width:auto;top:49px}input[type=checkbox].popover-bottom+label>.popover-bottom:before{position:absolute;display:block;border-bottom:7px solid #222;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;content:'';left:50%;margin-left:-7px}input[type=checkbox]:checked.popover-bottom+label>.popover-bottom{display:block}.btn-grp .btn{border:1px solid #ccc;margin:0}.btn-grp .btn:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.blue{border:1px solid #32688d;margin:0}.btn-grp .btn.blue:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.blue:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.blue:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.green{border:1px solid #238e37;margin:0}.btn-grp .btn.green:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.green:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.green:last-child{border-radius:0 4px 4px 0}.btn-grp .btn.red{border:1px solid 1px solid #e51a1a;margin:0}.btn-grp .btn.red:not(:first-child):not(:last-child){border-radius:0;border-right:0}.btn-grp .btn.red:first-child{border-radius:4px 0 0 4px;border-right:0}.btn-grp .btn.red:last-child{border-radius:0 4px 4px 0} \ No newline at end of file diff --git a/flavors/mini-bootstrap.scss b/flavors/mini-bootstrap.scss new file mode 100644 index 0000000..962669a --- /dev/null +++ b/flavors/mini-bootstrap.scss @@ -0,0 +1,436 @@ +//==================================================================== +// 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: Bootstrap (mini-bootstrap) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v1.1 (October, 2016) +*/ +//==================================================================== +// +// CORE COMPONENTS (located in `mini`): +// +//==================================================================== +// 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 '../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: #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 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 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 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 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. 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-color, $navigation-bg-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). +$thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it +$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, $thumbnail-hover-color); +@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); +//==================================================================== +// +// EXTRA COMPONENTS (located in `mini-extra`): +// +//==================================================================== +// Variable definitions for the Label module (_label.scss) +//==================================================================== +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$lbl-default-color: $btn-alt-color; // Default text color for labels/badges +$lbl-default-bg-color: #777; // Default background color for labels/badges +$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1 +$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2 +$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3 +// Label class names (you can remove things you don't need or define more +// classes if you need them). +$lbl-class-name: lbl; // Name for the base labels class +$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class +$lbl-style2-name: 'green'; // Name for labels/badges style 2 class +$lbl-style3-name: 'red'; // Name for labels/badges style 3 class +$badge-class-name: bdg; // Name for the base badges class +// Enable labels (_label.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/label'; +// Use label mixins to create labels with given specs. For more information +// refer to the _label.scss file to check the definitions. +@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide); +@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); +@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide); +@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color); +@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color); +//==================================================================== +// Variable definitions for the Tab module (_tab.scss) +//==================================================================== +// Tab class names. +$tabs-class-name: tabs; // Name for the tab system container class +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$tabs-border-color: #ccc; // Border color for the tabs system +$tabs-content-bg-color: #fff; // Background for the active tab's content +$tabs-color: $a-color; // Color for the text in the tab labels +$tabs-bg-color: $body-bg-color; // Background color for the tab labels +$tabs-active-color: $body-color; // Color for the text in the active tab's label +$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label +$tabs-active-stripe-style: 3px solid $a-color; // Style for the active tab label's stripe +// Enable tabs (_tab.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/tab'; +// Use tabs mixin to create tab system with given specs. For more information +// refer to the _tab.scss file to check the definitions. +@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px); +//==================================================================== +// Variable definitions for the Modal module (_modal.scss) +//==================================================================== +// Modal class names. +$modal-class-name: modal; // Name for the modal class +// Colors and styles (you can remove things you don't need or define more +// colors if you need them). +$modal-bg-color: $body-bg-color; // Background color for the modal +$modal-color: $body-color; // Color for the text in the modal +$modal-border: 1px solid #ccc; // Border style for the modal +// Enable modal (_modal.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/modal'; +// Use modal mixin to create modal with given specs. For more information +// refer to the _modal.scss file to check the definitions. +@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%); +@include make-modal-close-support($modal-class-name, $close-class-name, 20px); +//==================================================================== +// Variable definitions for the Dropdown module (_dropdown.scss) +//==================================================================== +// Dropdown class names. +$dropdown-class-name: dropdown; // Name for the modal class +// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/dropdown'; +// Use dropdown mixin to create dropdown with given specs. For more information +// refer to the _dropdown.scss file to check the definitions. +@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em); +//==================================================================== +// Variable definitions for the Collapse module (_collapse.scss) +//==================================================================== +// Collapse and accordion class names. +$collapse-class-name: clps; // Name for the collapse class +$accordion-class-name: acrd; // Name for the accordion class +// Collapse colors and styles (you can remove things you don't need or +// define more colors if you need them). +$collapse-border: 1px solid #ccc; // Border style for the collapse +$collapse-color: $body-color; // Color for the text in the collapse +$collapse-bg-color: #eeeeee; // Background color for the collapse +// Accordion colors and styles (you can remove things you don't need or +// define more colors if you need them). +$accordion-border: $collapse-border; // Border style for the accordion +$accordion-color: $collapse-color; // Color for the text in the accordion +$accordion-bg-color: $body-bg-color; // Background color for the accordion +$accordion-label-color: $collapse-color; // Color for the text in the accordion's label +$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label +// Enable collapse (_collapse.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/collapse'; +// Use collapse and accordion mixins to create components wit the given specs. +// For more information refer to the _collapse.scss file to check the definitions. +@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color); +@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%); +//==================================================================== +// Variable definitions for the Progress module (_progress.scss) +//==================================================================== +// Progress and progress variants class names. +$progress-class-name: prg; // Name for the progress class +$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class +$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class +// Progress and progress variants colors (you can remove things you +// don't need or define more colors if you need them). +$progress-bg-color: #d7d7d7; // Background color for the progress bar container +$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar +$progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar +$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar +$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar +$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar +$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar +// Enable progress (_progress.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/progress'; +// Use progress mixins to create progress bars with given specs. For more +// information refer to the _progress.scss file to check the definitions. +@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color); +@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color); +@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color); +//==================================================================== +// Variable definitions for the Spinner module (spinner.scss) +//==================================================================== +// Spinner class names. +$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class +$spinner-round-name: spinner-round; // Name for the round spinner class +// Spinner colors. +$spinner-round-doughnout: 0.4em solid rgba(34,34,34, 0.2); // Style for the round spinner doughnut +$spinner-round-spin: 0.4em solid #222; // Style for the round spinner spinning part +// Enable progress (spinner.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/spinner'; +// Use spinner mixins to create spinners with given specs. For more +// information refer to the spinner.scss file to check the definitions. +@include make-spinner-dots($spinner-dotted-name, 1.5em, 1.5s); +@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s); +//==================================================================== +// Variable definitions for the Carousel module (_carousel.scss) +//==================================================================== +// Carousel class names. +$carousel-class-name: carousel; // Name for the carousel class +// Carousel colors and styles. +$carousel-border: 1px solid #ccc; // Border style for the carousel +$carousel-content-bg-color: #e7e7e7; // Background color for the carousel +$carousel-description-color: $body-bg-color; // Color for the text in the carousel's description +$carousel-description-bg-color: $body-color; // Background color for the carousel's description +$carousel-control-color: #fafafa; // Color for the carousel's control elements +// Enable carousel (_carousel.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/carousel'; +// Use carousel mixin to create carousel with given specs. For more +// information refer to the _carousel.scss file to check the definitions. +@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color); +//==================================================================== +// Variable definitions for the Utility module (_utility.scss) +//==================================================================== +// Utility class names. +$breadcrumbs-class-name: brdcrmb; // Name for the breadcrumbs class +$well-class-name: well; // Name for the well class +$alert-style1-class: alert-blue; // Name for the style 1 alert +$alert-style2-class: alert-green; // Name for the style 2 alert +$alert-style3-class: alert-red; // Name for the style 3 alert +$panel-class-name: panel; // Name for the panel class +$panel-header-name: head; // Name for the panel's header class +$button-states-class-name: stateful; // Name for the stateful button class +$button-group-class-name: btn-grp; // Name for the button group class +$popover-above-name: popover-top; // Name for the popover above class +$popover-below-name: popover-bottom; // Name for the popover below class +// Utility color variables and styles (you can remove things you +// don't need or define more colors if you need them). +$well-color: $body-color; // Text color for the well +$well-bg-color: #e7e7e7; // Background color for the well +$panel-color: $body-color; // Text color for the panel +$panel-bg-color: $body-bg-color; // Background color for the panel +$panel-header-color: $body-color; // Text color for the panel's header +$panel-header-bg-color: #e7e7e7; // Background color for the panel's header +$popover-color: $body-bg-color; // Text color for the popover +$popover-bg-color: $body-color; // Background color for the popover +// Enable utilities (_utility.scss). (Use individual mixins below to use.) +@import '../scss/mini-extra/utility'; +// Use utilities mixins to create utilities with given specs. For more +// information refer to the _utility.scss file to check the definitions. +@include make-breadcrumbs($breadcrumbs-class-name); +@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px); +@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close); +@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close); +@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close); +@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px); +@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px); +@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px); +// Use experimental utilities mixins to create utilities with given +// specs. Please exercise caution when using these mixins. +//@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it. +// The folowing mixin is considered stable, you can disable it if you need to. +@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px); +@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px); +//==================================================================== +//==================================================================== \ No newline at end of file