mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-11 16:33:58 +02:00
Legacy branching, deleted obsolete files from current branch
This commit is contained in:
Angelos Chalaris
@@ -366,4 +366,7 @@
|
||||
- Deployed live demo.
|
||||
- New module restructure: all modules will be moved to core, some merges might have to be applied (check issue #14). Restructure was applied as follows:
|
||||
- Added the functionality of the new `alert` module to `contextual`. Includes mixin `make-alert-alt-color` for different `alert` color variants.
|
||||
- Restructured folders. `mini-shell` removed, `mini-core` renamed to `mini`. `mini` is the core folder now.
|
||||
- Restructured folders. `mini-shell` removed, `mini-core` renamed to `mini`. `mini` is the core folder now.
|
||||
- Created branch `v1-neutrino` both locally and on Github to support legacy versions in the future. `master` is now the branch for **Fermion** only.
|
||||
- Aggressive deletion of older files. The following folder are now gone: `scss/mini`, `scss/mini-extra`, `flavors` except for the contents of the `v2` folder and the folder itself.
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# Flavors
|
||||
|
||||
Below is a list of all the currently available flavors:
|
||||
|
||||
## Default
|
||||
|
||||
- Dark gray text on light gray background
|
||||
- High contrast
|
||||
- Simple and clean styling
|
||||
- Full flavor
|
||||
|
||||
|
||||
## NiteOwl
|
||||
|
||||
- Light gray text on dark blue background
|
||||
- High contrast
|
||||
- Simple and clean styling
|
||||
- Full flavor
|
||||
|
||||
## Bootstrap
|
||||
|
||||
- Similar to the Bootstrap framework's style.
|
||||
- Full flavor
|
||||
File diff suppressed because it is too large
Load Diff
1
flavors/mini-bootstrap.min.css
vendored
1
flavors/mini-bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,623 +0,0 @@
|
||||
//====================================================================
|
||||
// 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)
|
||||
//====================================================================
|
||||
// Pre-enable utilities (_utility.scss).
|
||||
// --- NOTES: ---
|
||||
// The utility module is pre enabled in order for certain elements to
|
||||
// use certain utility mixins.
|
||||
// -------------------
|
||||
@import '../scss/mini/utility';
|
||||
// Basic rules for body
|
||||
$body-margin: 0; // Margin for body
|
||||
$body-bg-color: #fff; // Body background color
|
||||
$body-color: #333; // Body text color
|
||||
// Basic typography rules
|
||||
$base-fonts: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"; // Font-family
|
||||
$base-font-size: 14px; // Font-size
|
||||
$base-line-height: 1.42857143; // Line-height
|
||||
// Rules for headers (multipliers apply on top of the basic typography rules)
|
||||
// --- NOTES: ---
|
||||
// Headers are not followed by a bottom border.
|
||||
// <small> elements inside headers use the default small sizing.
|
||||
// -------------------
|
||||
$h1-multiplier: 2.571428571428571; // Header 1 font-sze multiplier
|
||||
$h2-multiplier: 2.142857142857143; // Header 2 font-sze multiplier
|
||||
$h3-multiplier: 1.714285714285714; // Header 3 font-sze multiplier
|
||||
$h4-multiplier: 1.285714285714286; // Header 4 font-sze multiplier
|
||||
$h5-multiplier: 1; // Header 5 font-sze multiplier
|
||||
$h6-multiplier: 0.8571428571428571; // Header 6 font-sze multiplier
|
||||
$header-line-height-multiplier: 0.76999999923; // Multiplier for line height of headers
|
||||
$header-margin: 0; // Margin for headers
|
||||
$header-font-weight: 500; // Font weight for headers
|
||||
// Rules for small elements inside headers
|
||||
$header-small-color: #777; // Header small text color
|
||||
$header-small-font-weight: 400; // 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.)
|
||||
// --- NOTES: ---
|
||||
// To counteract the styling of <small> elements inside headers,
|
||||
// $small-font-size is 80% instead of 85% (75% for headers).
|
||||
// -------------------
|
||||
$p-margin: 0 0 10px; // Margin for paragraph and pre elements
|
||||
$small-font-size: 80%; // 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: 10px; // Bottom margin for lists
|
||||
$mark-bg-color: #fcf8e3; // Mark background color
|
||||
$mark-color: $body-color; // Mark text color
|
||||
// Code, preformatted and keyboard rules
|
||||
// --- NOTES: ---
|
||||
// <pre> elements use the same style as <code> elements and do not
|
||||
// have their own unique padding specified.
|
||||
// <pre> elements use generic border styling to style their border
|
||||
// instead of a specific border color. (*)
|
||||
// Code elements use the default color used in the document's body,
|
||||
// instead of #c7254e.
|
||||
// (*): The generic border mixin from utilites could not be used,
|
||||
// because it is built to apply to a class of elements, not a type.
|
||||
// -------------------
|
||||
$code-fonts: "Menlo, Monaco, Consolas, \"Courier New\", monospace"; // Font-family for code, pre, kbd, samp elements
|
||||
$code-padding: 2px 4px; // Padding for code and pre elements
|
||||
$code-bg-color: #f9f2f4; // 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: $body-bg-color; // Kbd text color
|
||||
pre { border: 1px solid rgba(0,0,0, 0.25); } // Use generic styling to style border for pre elements
|
||||
// Hyperlink rules
|
||||
// --- NOTES: ---
|
||||
// <a> elements have no underline style applied to them when hovered
|
||||
// over or otherwise selected or focused.
|
||||
// -------------------
|
||||
$a-color: #337ab7; // Hyperlink text color
|
||||
$a-hover-color: #23527c; // Hyperlink hover text color
|
||||
$a-visited-color: #337ab7; // Hyperlink visited text color
|
||||
$a-visited-hover-color: #23527c; // 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: 0; // Border style for fieldset
|
||||
$fieldset-border-radius: 0; // Border radius for fieldset
|
||||
$fieldset-margin: 0; // Margin for fieldset
|
||||
$fieldset-padding: 0; // 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).
|
||||
// --- NOTES: ---
|
||||
// Button styles use approximations for some colors (mainly hover colors).
|
||||
// Button border is built using utility module's generic mixin.
|
||||
// Buttons differ from Bootstrap's in terms of line height.
|
||||
// Button size variant font sizes are approximate.
|
||||
// `btn-link` is not supported.
|
||||
// -------------------
|
||||
$btn-default-color: $body-color; // Default text color for buttons
|
||||
$btn-alt-color: $body-bg-color; // Alternative text color for buttons
|
||||
$btn-default-bg-color: $body-bg-color; // Default background color for buttons
|
||||
$btn-p-bg-color: #337ab7; // Color for button style 1
|
||||
$btn-s-bg-color: #5cb85c; // Color for button style 2
|
||||
$btn-i-bg-color: #5bc0de; // Color for button style 3
|
||||
$btn-w-bg-color: #f0ad4e; // Color for button style 4
|
||||
$btn-d-bg-color: #d9534f; // Color for button style 5
|
||||
// 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: btn-primary; // Name for button style 1 class
|
||||
$btn-style2-name: btn-success; // Name for button style 2 class
|
||||
$btn-style3-name: btn-info; // Name for button style 3 class
|
||||
$btn-style4-name: btn-warning; // Name for button style 4 class
|
||||
$btn-style5-name: btn-danger; // Name for button style 5 class
|
||||
$btn-size1-name: btn-lg; // Name for the button size 1 class
|
||||
$btn-size2-name: btn-sm; // Name for the button size 2 class
|
||||
$btn-size3-name: btn-xs; // Name for the button size 3 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, 5px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-p-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-s-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style5-name, $btn-alt-color, $btn-d-bg-color, darken);
|
||||
@include make-btn-size($btn-class-name, $btn-size1-name, 10px 16px, 128.6%);
|
||||
@include make-btn-size($btn-class-name, $btn-size2-name, 5px 10px, 85.7%);
|
||||
@include make-btn-size($btn-class-name, $btn-size3-name, 1px 5px, 85.7%);
|
||||
@include make-border-generic($btn-class-name);
|
||||
//====================================================================
|
||||
// Variable definitions for the Grid module (_grid.scss)
|
||||
//====================================================================
|
||||
// Class names for the grid system
|
||||
// --- NOTES: ---
|
||||
// Only .container-fluid is supported currently.
|
||||
// Column naming follows standard mini.css naming conventions
|
||||
// instead of Bootstrap conventions.
|
||||
// (example: `col md-1` instead of `col-md-1`)
|
||||
// Offsets are still built using the hidden column class, which is
|
||||
// suffixed with `-hidden` for convenience's sake.
|
||||
// -------------------
|
||||
$grid-container-name: container-fluid; // 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: hidden; // 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: 992px; // Breakpoint for small to medium devices
|
||||
$grid-large-breakpoint: 1200px; // 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, 15px, $grid-row-name, $grid-column-name, 12, 15px, $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
|
||||
// --- NOTES: ---
|
||||
// Basic styling is applied to forms using the .form class. The usual
|
||||
// mini.css syntax should be used instead of the Bootstrap syntax.
|
||||
// .form-group is not supported inside .form-inline.
|
||||
// .form-control-static, .has-error, .has-warning, .has-success are not
|
||||
// supported.
|
||||
// No class is provided for .control-label and subsequently no styling.
|
||||
// Focus and invalid borders are styled approximately.
|
||||
// The width of the left column (label) of horizontal forms is preset to
|
||||
// 20%.
|
||||
// Some other functionalities are not supported as they are considered
|
||||
// unimportant for the time being.
|
||||
// No form element size variants are supported yet.
|
||||
// -------------------
|
||||
$form-class-name: form; // Name for the form class
|
||||
$form-control-group-name: form-group; // Name for the form's control group class
|
||||
// Colors for form components
|
||||
$form-focus-color: #66afe9; // Color for focused form element outline
|
||||
$form-invalid-color: #a94442; // 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, 6px 12px, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 34px, 0 0 5px 0, $form-control-group-name, 0 0 15px 0, form-inline, form-horizontal, 20%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Table module (_table.scss)
|
||||
//====================================================================
|
||||
// Class names for the tables
|
||||
// --- NOTES: ---
|
||||
// The .table class applies the default styling of mini.css (vertical
|
||||
// borders). To get the default styling of Bootstrap, use .table-horizontal
|
||||
// along with .table.
|
||||
// All customized tables are striped by default.
|
||||
// Hover rows styling is not supported.
|
||||
// Condensed tables are not supported.
|
||||
// Contextual classes on tables are not supported (untested).
|
||||
// Responsive tables are not supported. (Will be added as default in
|
||||
// later versions)
|
||||
// -------------------
|
||||
$table-class-name: table; // Name for the table class
|
||||
$table-horizontal-name: table-horizontal; // Name for the horizontal style tables
|
||||
$table-bordered-name: table-bordered; // Name for the bordered style tables
|
||||
// Colors for the tables
|
||||
$table-head-bg-color: $body-bg-color; // Table header background color
|
||||
$table-head-color: $body-color; // Table header text color
|
||||
$table-body-bg-color: $body-bg-color; // Table body bakground color
|
||||
$table-body-alt-bg-color: #f9f9f9; // Table body alternative background color
|
||||
$table-body-color: $body-color; // 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 #ddd, 0, 8px, $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
|
||||
// --- NOTES: ---
|
||||
// The structure of the navigation bar is based on mini.css structure
|
||||
// conventions. However naming is applied based on the naming conventions
|
||||
// of Bootstrap.
|
||||
// Some colors are based on approximation.
|
||||
// Border color and border radius are built using generic utility mixins.
|
||||
// -------------------
|
||||
$navigation-class-name: navbar; // Name for the navigation bar class
|
||||
$navigation-vertical-name: navbar-vertical; // Name for the vertical navigation class
|
||||
$navigation-fixed-name: navbar-fixed; // Name for the fixed navigation class
|
||||
$navigation-logo-name: navbar-brand; // Name for the navigation logo class
|
||||
$navigation-link-name: navbar-nav; // Name for the navigation link class
|
||||
// Colors and breakpoint for the navigation
|
||||
$navigation-bg-color: #f8f8f8; // Background color for the navigation bar
|
||||
$navigation-color: $body-color; // 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, 128.6%, $navigation-link-name, 15px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
@include make-border-generic($navigation-class-name);
|
||||
@include make-border-radial-style($navigation-class-name, 4px);
|
||||
//====================================================================
|
||||
// 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).
|
||||
// --- NOTES: ---
|
||||
// Utilities are enabled at the start of the file.
|
||||
// Close icon colors are approximate.
|
||||
// Generic borders are included (although not part of Bootstrap originally).
|
||||
// No .show class is provided.
|
||||
// Contextual background styles do not have extra padding.
|
||||
// -------------------
|
||||
$thumbnail-class-name: thumbnail; // 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: text-primary; // Name for the colored text style 1 class
|
||||
$colored-text2-name: text-success; // Name for the colored text style 2 class
|
||||
$colored-text3-name: text-info; // Name for the colored text style 3 class
|
||||
$colored-text4-name: text-warning; // Name for the colored text style 4 class
|
||||
$colored-text5-name: text-danger; // Name for the colored text style 5 class
|
||||
$colored-text6-name: text-muted; // Name for the colored text style 6 class
|
||||
$colored-bg-text1-name: bg-primary; // Name for the colored background text style 1 class
|
||||
$colored-bg-text2-name: bg-success; // Name for the colored background text style 2 class
|
||||
$colored-bg-text3-name: bg-info; // Name for the colored background text style 3 class
|
||||
$colored-bg-text4-name: bg-warning; // Name for the colored background text style 4 class
|
||||
$colored-bg-text5-name: bg-danger; // Name for the colored background text style 5 class
|
||||
$drag-left-name: pull-left; // Name for the drag-left class
|
||||
$drag-right-name: pull-right; // Name for the drag-right class
|
||||
$center-block-name: center-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: clearfix; // 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-p-bg-color; // Text color for the colored text style 1 class
|
||||
$colored-text2-color: $btn-s-bg-color; // Text color for the colored text style 2 class
|
||||
$colored-text3-color: $btn-i-bg-color; // Text color for the colored text style 3 class
|
||||
$colored-text4-color: $btn-w-bg-color; // Text color for the colored text style 4 class
|
||||
$colored-text5-color: $btn-d-bg-color; // Text color for the colored text style 5 class
|
||||
$colored-text6-color: #777; // Text color for the colored text style 6 class
|
||||
$colored-bg-text1-bg-color: $btn-p-bg-color; // Background color for the colored text style 1 class
|
||||
$colored-bg-text2-bg-color: $btn-s-bg-color; // Background color for the colored text style 2 class
|
||||
$colored-bg-text3-bg-color: $btn-i-bg-color; // Background color for the colored text style 3 class
|
||||
$colored-bg-text4-bg-color: $btn-w-bg-color; // Background color for the colored text style 4 class
|
||||
$colored-bg-text5-bg-color: $btn-d-bg-color; // Background color for the colored text style 5 class
|
||||
// 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, 4px, 1px solid #ddd, 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-text($colored-text4-name, $colored-text4-color);
|
||||
@include make-colored-text($colored-text5-name, $colored-text5-color);
|
||||
@include make-colored-text($colored-text6-name, $colored-text6-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-colored-bg-text($colored-bg-text4-name, $colored-bg-text4-bg-color);
|
||||
@include make-colored-bg-text($colored-bg-text5-name, $colored-bg-text5-bg-color);
|
||||
@include make-caret-down($caret-class-name, 4px, $body-color);
|
||||
@include make-close($close-class-name, #aaa, pointer, 21px, 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).
|
||||
// --- NOTES: ---
|
||||
// Label and badge default classes are applied automatically, no contextual
|
||||
// class is needed. Neither .label-default nor .badge-default are supported.
|
||||
// Badge styling is not based on context, they are cotrolled based on the
|
||||
// classes the user specifies.
|
||||
// Labels and badges are sized approximately.
|
||||
// -------------------
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-style1-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
|
||||
$lbl-style2-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
|
||||
$lbl-style3-bg-color: $btn-i-bg-color; // Color for labels/badges style 3
|
||||
$lbl-style4-bg-color: $btn-w-bg-color; // Color for labels/badges style 5
|
||||
$lbl-style5-bg-color: $btn-d-bg-color; // Color for labels/badges style 6
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: label; // Name for the base labels class
|
||||
$lbl-style1-name: label-primary; // Name for labels style 1 class
|
||||
$lbl-style2-name: label-success; // Name for labels style 2 class
|
||||
$lbl-style3-name: label-info; // Name for labels style 3 class
|
||||
$lbl-style4-name: label-warning; // Name for labels style 4 class
|
||||
$lbl-style5-name: label-danger; // Name for labels style 5 class
|
||||
$badge-class-name: badge; // Name for the base badges class
|
||||
$badge-style1-name: badge-primary; // Name for badges style 1 class
|
||||
$badge-style2-name: badge-success; // Name for badges style 2 class
|
||||
$badge-style3-name: badge-info; // Name for badges style 3 class
|
||||
$badge-style4-name: badge-warning; // Name for badges style 4 class
|
||||
$badge-style5-name: badge-danger; // Name for badges style 5 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, .25em, .2em .6em .3em, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 10px, 3px 7px, hide);
|
||||
@include make-lbl-style($badge-class-name, $badge-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Tab module (_tab.scss)
|
||||
//====================================================================
|
||||
// Tab class names.
|
||||
// --- NOTES: ---
|
||||
// Bootstrap naming conventions are used, but the structure follows the
|
||||
// component structure of mini.css.
|
||||
// Some extra styles are applied at the end of the module definition. This
|
||||
// is due to the way that Bootstrap's tabs are styled.
|
||||
// No events and methods are supported as of yet.
|
||||
// -------------------
|
||||
$tabs-class-name: nav-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: #ddd; // 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: 1px solid #ddd; // 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, 20px, 10px 18px, $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);
|
||||
.#{$tabs-class-name} input[type="radio"] + div > label + div { top: 40px; }
|
||||
.#{$tabs-class-name} input[type="radio"] + div > label { border:0; }
|
||||
.#{$tabs-class-name} input[type="radio"]:checked + div > label { border: $tabs-active-stripe-style; border-bottom: 0; }
|
||||
//====================================================================
|
||||
// Variable definitions for the Modal module (_modal.scss)
|
||||
//====================================================================
|
||||
// Modal class names.
|
||||
// --- NOTES: ---
|
||||
// The modal dialog is all contained in the .modal class.
|
||||
// Background color of the overlay is not the exact same as Bootstrap.
|
||||
// Some colors and styles are approximations.
|
||||
// No alternative sizes, methods or events are supported as of yet.
|
||||
// -------------------
|
||||
$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 #999; // 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, 6px, 18px, 30px, 600px);
|
||||
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Dropdown module (_dropdown.scss)
|
||||
//====================================================================
|
||||
// Dropdown class names.
|
||||
// --- NOTES: ---
|
||||
// Dropdown styling uses the default styling of mini.css as the equivalent
|
||||
// Bootstrap component is very different.
|
||||
// -------------------
|
||||
$dropdown-class-name: dropdown; // Name for the dropdown 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, 80%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Collapse module (_collapse.scss)
|
||||
//====================================================================
|
||||
// Collapse and accordion class names.
|
||||
// --- NOTES: ---
|
||||
// Sizes and colors are approximate. The colors and style of the collapsed
|
||||
// (hidden) content are based on the Bootstrap example that uses the well.
|
||||
// Classes for collapse and accordion components are .collapse and
|
||||
// .accordion respectively.
|
||||
// -------------------
|
||||
$collapse-class-name: collapse; // Name for the collapse class
|
||||
$accordion-class-name: accordion; // 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 #e3e3e3; // Border style for the collapse
|
||||
$collapse-color: $body-color; // Color for the text in the collapse
|
||||
$collapse-bg-color: #f5f5f5; // 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, 19px, 6px, $collapse-color, $collapse-bg-color);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 19px, 6px, $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.
|
||||
// --- NOTES: ---
|
||||
// Naming conventions are based on the Bootstrap names, syntax is based
|
||||
// on the default mini.css syntax.
|
||||
// Colors and borders might look different due to some approximations.
|
||||
// -------------------
|
||||
$progress-class-name: progress-bar; // Name for the progress class
|
||||
$progress-bar-style1-name: progress-bar-success; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: progress-bar-info; // Name for the progress bar style 2 class
|
||||
$progress-bar-style3-name: progress-bar-warning; // Name for the progress bar style 3 class
|
||||
$progress-bar-style4-name: progress-bar-danger; // Name for the progress bar style 4 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-style3-color: $btn-alt-color; // Color for the text of the style 3 progress bar
|
||||
$progress-bar-style4-color: $btn-alt-color; // Color for the text of the style 4 progress bar
|
||||
$progress-bar-bg-color: $btn-p-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-s-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-i-bg-color; // Background color for the style 2 progress bar
|
||||
$progress-bar-style3-bg-color: $btn-w-bg-color; // Background color for the style 3 progress bar
|
||||
$progress-bar-style4-bg-color: $btn-d-bg-color; // Background color for the style 4 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, 12px, $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);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style3-name, $progress-bar-style3-color, $progress-bar-style3-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style4-name, $progress-bar-style4-color, $progress-bar-style4-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Spinner module (spinner.scss)
|
||||
//====================================================================
|
||||
// Spinner class names.
|
||||
// --- NOTES: ---
|
||||
// Spinner styles are in line with Bootstrap's style as Bootstrap does
|
||||
// not feature a similar component.
|
||||
// -------------------
|
||||
$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: 6px solid rgba(51,51,51, 0.25); // Style for the round spinner doughnut
|
||||
$spinner-round-spin: 6px solid $btn-p-bg-color; // 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, 20px, 1.5s);
|
||||
@include make-spinner-round($spinner-round-name, 20px, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||
//====================================================================
|
||||
// Variable definitions for the Carousel module (_carousel.scss)
|
||||
//====================================================================
|
||||
// Carousel class names.
|
||||
// --- NOTES: ---
|
||||
// Carousel styling is very similar to the mini.css default carousel,
|
||||
// although control styles are based on the Bootstrap styling.
|
||||
// Naming and structure conventions are based on mini.css.
|
||||
// -------------------
|
||||
$carousel-class-name: carousel; // Name for the carousel class
|
||||
// Carousel colors and styles.
|
||||
$carousel-border: 1px solid #ddd; // 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: #fff; // 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, 360px, 160px, 450px, 1.8em, $carousel-control-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utility module (_utility.scss)
|
||||
//====================================================================
|
||||
// Utility class names.
|
||||
// --- NOTES: ---
|
||||
// Some component styles (like wells) are based on approximation.
|
||||
// Alert styles omit the .alert class and just use their style class.
|
||||
// Panel styling is based on approximation.
|
||||
// Panels are based on the mini.css default structure.
|
||||
// Popovers use the default mini.css styling.
|
||||
// Tooltips, jumbotron and some other components from Bootstrap are not
|
||||
// supported.
|
||||
// Experimental and unstable components are not included.
|
||||
// -------------------
|
||||
$breadcrumbs-class-name: breadcrumb; // Name for the breadcrumbs class
|
||||
$well-class-name: well; // Name for the well class
|
||||
$alert-style1-class: alert-success; // Name for the style 1 alert
|
||||
$alert-style2-class: alert-info; // Name for the style 2 alert
|
||||
$alert-style3-class: alert-warning; // Name for the style 3 alert
|
||||
$alert-style4-class: alert-danger; // Name for the style 4 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: #f5f5f5; // 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, 1);
|
||||
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #e3e3e3, 4px, 19px);
|
||||
@include make-alert($alert-style1-class, darken($btn-s-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-s-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style2-class, darken($btn-i-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-i-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style3-class, darken($btn-w-bg-color,20%), lighten($btn-w-bg-color, 10%) , 1px solid darken($btn-w-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style4-class, darken($btn-d-bg-color,20%), lighten($btn-d-bg-color, 10%) , 1px solid darken($btn-d-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ddd, 4px, 15px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 15px);
|
||||
@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-p-bg-color, 10%), 4px);
|
||||
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-s-bg-color, 10%), 4px);
|
||||
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-i-bg-color, 10%), 4px);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
File diff suppressed because it is too large
Load Diff
1
flavors/mini-default.min.css
vendored
1
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,436 +0,0 @@
|
||||
//====================================================================
|
||||
// This is the file you should edit to make the flavor you want.
|
||||
// Please read the instructions carefully.
|
||||
//====================================================================
|
||||
// !! IMPORTANT !!
|
||||
// Please copy this file or rename it, if you want to keep the default
|
||||
// flavor definitions file.
|
||||
//====================================================================
|
||||
// Update the comment below to include it in your flavor, providing the information
|
||||
// you want along with your customized flavor. You can also delete it if you don't
|
||||
// want it in your final CSS file.
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.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 dropdown 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);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
File diff suppressed because it is too large
Load Diff
1
flavors/mini-niteowl.min.css
vendored
1
flavors/mini-niteowl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,436 +0,0 @@
|
||||
//====================================================================
|
||||
// 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: NiteOwl (mini-niteowl)
|
||||
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: #151f29; // Body background color
|
||||
$body-color: #f5f5f5; // 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: darken($body-color, 25%); // 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 #304251; // 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: #e44b23; // 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: #6493cd; // 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 #304251; // 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: #f5f5f5; // Default text color for buttons
|
||||
$btn-alt-color: #f5f5f5; // Alternative text color for buttons
|
||||
$btn-default-bg-color: #454545; // Default background color for buttons
|
||||
$btn-b-bg-color: #364952; // Color for button style 1
|
||||
$btn-g-bg-color: #409f45; // Color for button style 2
|
||||
$btn-r-bg-color: #e72a2a; // 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, darken, 5%);
|
||||
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color, darken);
|
||||
@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: #f1e05a; // Color for focused form element outline
|
||||
$form-invalid-color: #e44b23; // 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 #304251, 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: lighten($body-bg-color,22%); // Table header background color
|
||||
$table-head-color: $body-color; // Table header text color
|
||||
$table-body-bg-color: lighten($body-bg-color,5%); // Table body bakground color
|
||||
$table-body-alt-bg-color: lighten($body-bg-color,10%); // Table body alternative background color
|
||||
$table-body-color: darken($body-color,8%); // 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 #304251, 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: #243447; // Background color for the navigation bar
|
||||
$navigation-color: $body-color; // 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 #304251, 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, #aaa);
|
||||
@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: lighten($btn-default-bg-color,5%); // 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: #304251; // Border color for the tabs system
|
||||
$tabs-content-bg-color: lighten($body-bg-color,5%); // 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 #304251; // 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 dropdown 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 #304251; // Border style for the collapse
|
||||
$collapse-color: $body-color; // Color for the text in the collapse
|
||||
$collapse-bg-color: lighten($body-bg-color,10%); // 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(245,245,245, 0.2); // Style for the round spinner doughnut
|
||||
$spinner-round-spin: 0.4em solid #f5f5f5; // 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 #304251; // Border style for the carousel
|
||||
$carousel-content-bg-color: lighten($body-bg-color,80%); // Background color for the carousel
|
||||
$carousel-description-color: $body-color; // Color for the text in the carousel's description
|
||||
$carousel-description-bg-color: $body-bg-color; // Background color for the carousel's description
|
||||
$carousel-control-color: $body-color; // 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: lighten($body-bg-color,10%); // 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: lighten($body-bg-color,10%); // 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 #304251, 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 #304251, 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 #304251, 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);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
@@ -1,92 +0,0 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-carousel( $carousel-name, $carousel-width, $carousel-height, $carousel-border,
|
||||
$carousel-border-radius, $carousel-container-bg-color, $carousel-content-padding,
|
||||
$carousel-description-color, $carousel-description-bg-color,
|
||||
$carousel-description-top, $carousel-description-height, $carousel-control-top,
|
||||
$carousel-control-font-size, $carousel-control-color ){
|
||||
.#{$carousel-name}{
|
||||
position: relative;
|
||||
width: $carousel-width;
|
||||
height: $carousel-height;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
border: $carousel-border;
|
||||
border-radius: $carousel-border-radius;
|
||||
& input[type="radio"]{
|
||||
display: none;
|
||||
& + div{
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: $carousel-content-padding;
|
||||
background-color: $carousel-container-bg-color;
|
||||
& > img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
& > div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $carousel-description-height;
|
||||
overflow: auto;
|
||||
left: 0;
|
||||
top: $carousel-description-top;
|
||||
background-color: $carousel-description-bg-color;
|
||||
color: $carousel-description-color;
|
||||
opacity: 0.1;
|
||||
&:hover, &:active, &:focus{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
& + label{
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
cursor: pointer;
|
||||
top: $carousel-control-top;
|
||||
color: $carousel-control-color;
|
||||
font-size: $carousel-control-font-size;
|
||||
&:before{
|
||||
content:'\25cb';
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div{
|
||||
display: block;
|
||||
& + label{
|
||||
&:before{
|
||||
content:'\25cf';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
/*
|
||||
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 make-collapse( $collapse-name, $collapse-border, $collapse-border-radius, $collapse-padding,
|
||||
$collapse-margin-top, $collapse-color, $collapse-bg-color ){
|
||||
input[type="checkbox"]{
|
||||
&.#{$collapse-name}{
|
||||
display: none;
|
||||
& + div{
|
||||
display: none;
|
||||
color: $collapse-color;
|
||||
background-color: $collapse-bg-color;
|
||||
padding: $collapse-padding;
|
||||
margin-top: $collapse-margin-top;
|
||||
border: $collapse-border;
|
||||
border-radius: $collapse-border-radius;
|
||||
}
|
||||
}
|
||||
&:checked.#{$collapse-name}{
|
||||
& + div{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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`.
|
||||
*/
|
||||
@mixin make-accordion( $accordion-name, $accordion-border, $accordion-border-radius, $accordion-padding,
|
||||
$accordion-margin, $accordion-color, $accordion-bg-color, $accordion-label-color,
|
||||
$accordion-label-bg-color, $accordion-label-padding, $accordion-hover-style,
|
||||
$accordion-hover-style-percentage ){
|
||||
input[type="radio"]{
|
||||
&.#{$accordion-name}{
|
||||
display: none;
|
||||
& + label{
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: $accordion-label-color;
|
||||
background-color: $accordion-label-bg-color;
|
||||
padding: $accordion-label-padding;
|
||||
margin-bottom: $accordion-margin;
|
||||
border: $accordion-border;
|
||||
border-radius: $accordion-border-radius;
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus{
|
||||
@if $accordion-hover-style == 'lighten'{
|
||||
background-color: lighten($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background-color: darken($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
& + div{
|
||||
display: none;
|
||||
color: $accordion-color;
|
||||
background-color: $accordion-bg-color;
|
||||
padding: $accordion-padding;
|
||||
margin-top: -1px;
|
||||
margin-bottom: $accordion-margin;
|
||||
border: $accordion-border;
|
||||
border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked.#{$accordion-name}{
|
||||
& + label{
|
||||
border-radius: $accordion-border-radius $accordion-border-radius 0 0;
|
||||
margin-bottom: 0;
|
||||
& + div{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-dropdown($nav-name, $nav-link-name, $dropdown-name, $dropdown-left-margin, $dropdown-font-size){
|
||||
.#{$nav-name}{
|
||||
& .#{$nav-link-name}.#{$dropdown-name}{
|
||||
cursor: pointer;
|
||||
}
|
||||
& input[type="checkbox"], & input[type="radio"]{
|
||||
display: none;
|
||||
&.#{$dropdown-name} + div{
|
||||
display: none;
|
||||
}
|
||||
&:checked.#{$dropdown-name}{
|
||||
+ div{
|
||||
display: block;
|
||||
font-size: $dropdown-font-size;
|
||||
margin-left: $dropdown-left-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
/*
|
||||
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 make-lbl($lbl-name, $lbl-bg-color, $lbl-color, $lbl-border-radius, $lbl-padding, $lbl-hide-on-empty){
|
||||
.#{$lbl-name}{
|
||||
display: inline-block;
|
||||
padding: $lbl-padding;
|
||||
color: $lbl-color;
|
||||
background-color: $lbl-bg-color;
|
||||
border-radius: $lbl-border-radius;
|
||||
@if $lbl-hide-on-empty == 'hide'{
|
||||
&:empty{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-lbl-style($lbl-name, $lbl-style-name, $lbl-style-color, $lbl-style-bg-color){
|
||||
.#{$lbl-name}.#{$lbl-style-name}{
|
||||
color: $lbl-style-color;
|
||||
background-color: $lbl-style-bg-color;
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
/*
|
||||
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 make-modal( $modal-name, $modal-color, $modal-bg-color, $modal-transition-enabled,
|
||||
$modal-shadow-enabled, $modal-border, $modal-border-radius,
|
||||
$modal-padding, $modal-top-margin, $modal-width ){
|
||||
.#{$modal-name}{
|
||||
display: none;
|
||||
& + div{
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
@if $modal-transition-enabled == 'enabled'{
|
||||
transition: opacity .3s ease-out;
|
||||
}
|
||||
& > div{
|
||||
z-index: 998;
|
||||
position: relative;
|
||||
width: $modal-width;
|
||||
color: $modal-color;
|
||||
background-color: $modal-bg-color;
|
||||
margin: $modal-top-margin auto 0;
|
||||
padding: $modal-padding;
|
||||
border: $modal-border;
|
||||
border-radius: $modal-border-radius;
|
||||
@if $modal-shadow-enabled == 'enabled'{
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div{
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
& > label{
|
||||
background-color: rgba(0,0,0,.35);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-modal-close-support($modal-name, $close-name, $modal-padding){
|
||||
.#{$modal-name} + div > div .#{$close-name}{
|
||||
position: absolute;
|
||||
top: $modal-padding;
|
||||
right: $modal-padding;
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
/*
|
||||
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 make-progress( $progress-name, $progress-height, $progress-border-radius, $progress-bg-color,
|
||||
$progress-font-size, $progress-bar-color, $progress-bar-bg-color ){
|
||||
.#{$progress-name}{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $progress-height;
|
||||
background-color: $progress-bg-color;
|
||||
border-radius: $progress-border-radius;
|
||||
& > span{
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: $progress-bar-color;
|
||||
background-color: $progress-bar-bg-color;
|
||||
text-align: center;
|
||||
font-size: $progress-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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`.
|
||||
*/
|
||||
@mixin make-progress-bar-variant($progress-name, $progress-bar-variant-name, $progress-bar-variant-color, $progress-bar-variant-bg-color){
|
||||
.#{$progress-name} > span.#{$progress-bar-variant-name}{
|
||||
color: $progress-bar-variant-color;
|
||||
background-color: $progress-bar-variant-bg-color;
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
/*
|
||||
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 make-spinner-dots($spinner-dots-name, $spinner-dots-height, $spinner-dots-animation-time){
|
||||
.#{$spinner-dots-name}{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: $spinner-dots-height;
|
||||
vertical-align: bottom;
|
||||
&:after{
|
||||
display: inline-table;
|
||||
white-space: pre;
|
||||
content: "\A.\A..\A...";
|
||||
animation: spin-dots $spinner-dots-animation-time steps(4) infinite;
|
||||
}
|
||||
}
|
||||
@keyframes spin-dots { to {transform: translateY(-$spinner-dots-height*4);} }
|
||||
}
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-spinner-round( $spinner-round-name, $spinner-round-size, $spinner-round-doughnut-style,
|
||||
$spinner-round-spin-style, $spinner-round-animation-time ){
|
||||
.#{$spinner-round-name}{
|
||||
display: inline-block;
|
||||
border: $spinner-round-doughnut-style;
|
||||
border-left: $spinner-round-spin-style;
|
||||
transform: translateZ(0);
|
||||
animation: spin-round $spinner-round-animation-time infinite linear;
|
||||
&,&:after{
|
||||
border-radius: 50%;
|
||||
width: $spinner-round-size;
|
||||
height: $spinner-round-size;
|
||||
}
|
||||
}
|
||||
@keyframes spin-round { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
/*
|
||||
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`.
|
||||
*/
|
||||
@mixin make-tabs( $tabs-name, $tabs-min-height, $tabs-label-spacing, $tabs-label-height,
|
||||
$tabs-label-padding, $tabs-label-color, $tabs-label-bg-color,
|
||||
$tabs-active-label-color, $tabs-active-label-bg-color,
|
||||
$tabs-border-color, $tabs-label-border-radius, $tabs-active-label-stripe,
|
||||
$tabs-inactive-label-hover-style, $tabs-inactive-label-hover-style-percentage,
|
||||
$tabs-content-bg-color, $tabs-content-padding ){
|
||||
.#{$tabs-name}{
|
||||
position: relative;
|
||||
min-height: $tabs-min-height;
|
||||
width: 100%;
|
||||
& input[type="radio"]{
|
||||
display: none;
|
||||
& + div{
|
||||
display: inline;
|
||||
& > label{
|
||||
position: reative;
|
||||
float: left;
|
||||
margin-right: $tabs-label-spacing;
|
||||
left: 1px;
|
||||
height: $tabs-label-height;
|
||||
padding: $tabs-label-padding;
|
||||
color: $tabs-label-color;
|
||||
background-color: $tabs-label-bg-color;
|
||||
border: 1px solid $tabs-border-color;
|
||||
border-radius: $tabs-label-border-radius;
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus{
|
||||
@if $tabs-inactive-label-hover-style == 'lighten'{
|
||||
background: lighten($tabs-label-bg-color, $tabs-inactive-label-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($tabs-label-bg-color, $tabs-inactive-label-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
& + div{
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
left: 0;
|
||||
top: ($tabs-label-height - 1px);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: $tabs-content-padding;
|
||||
background: $tabs-content-bg-color;
|
||||
border: 1px solid $tabs-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div > label{
|
||||
color: $tabs-active-label-color;
|
||||
background: $tabs-active-label-bg-color;
|
||||
border-top: $tabs-active-label-stripe;
|
||||
border-bottom: 1px solid $tabs-content-bg-color;
|
||||
& + div{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,272 +0,0 @@
|
||||
/*
|
||||
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 make-breadcrumbs($breadcrumbs-name, $breadcrumbs-style: 3){
|
||||
.#{$breadcrumbs-name}{
|
||||
list-style: none;
|
||||
& > li{
|
||||
display: inline-block;
|
||||
& + li:before{
|
||||
@if $breadcrumbs-style == 1{
|
||||
content: '\002f\00a0';
|
||||
}
|
||||
@else if $breadcrumbs-style == 2{
|
||||
content: '\003e\00a0';
|
||||
}
|
||||
@else{
|
||||
content: '\27e9\00a0';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-generic-container($container-name, $container-color, $container-bg-color, $container-border, $container-border-radius, $container-padding){
|
||||
.#{$container-name}{
|
||||
border: $container-border;
|
||||
border-radius: $container-border-radius;
|
||||
background-color: $container-bg-color;
|
||||
color: $container-color;
|
||||
padding: $container-padding;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-alert( $alert-name, $alert-color, $alert-bg-color, $alert-border,
|
||||
$alert-border-radius, $alert-padding, $close-name ){
|
||||
@include make-generic-container($alert-name+' + div', $alert-color, $alert-bg-color, $alert-border, $alert-border-radius, $alert-padding);
|
||||
input[type="checkbox"].#{$alert-name}{
|
||||
display: none;
|
||||
& + div{
|
||||
display: none;
|
||||
position: relative;
|
||||
& a{
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: darken($alert-color, 10%);
|
||||
&:hover, &:active, &:focus{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
& .#{$close-name}{
|
||||
position: absolute;
|
||||
top: $alert-padding;
|
||||
right: $alert-padding;
|
||||
color: $alert-color;
|
||||
&:hover, &:active, &:focus{
|
||||
color: darken($alert-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked.#{$alert-name} + div{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-panel( $panel-name, $panel-color, $panel-bg-color, $panel-border,
|
||||
$panel-border-radius, $panel-padding, $panel-header-name,
|
||||
$panel-header-color, $panel-header-bg-color, $panel-header-padding ){
|
||||
@include make-generic-container($panel-name, $panel-color, $panel-bg-color, $panel-border, $panel-border-radius, 0);
|
||||
.#{$panel-name}{
|
||||
& > *{
|
||||
padding: $panel-padding;
|
||||
}
|
||||
& .#{$panel-header-name}{
|
||||
border: 0;
|
||||
border-bottom: $panel-border;
|
||||
color: $panel-header-color;
|
||||
background-color: $panel-header-bg-color;
|
||||
padding: $panel-header-padding;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-popover( $popover-name, $popover-direction, $popover-border-radius,
|
||||
$popover-distance, $popover-color, $popover-bg-color, $popover-padding ){
|
||||
input[type="checkbox"]{
|
||||
&.#{$popover-name}{
|
||||
display:none;
|
||||
+ label{
|
||||
position: relative;
|
||||
}
|
||||
+ label > .#{$popover-name}{
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: $popover-bg-color;
|
||||
color: $popover-color;
|
||||
border-radius: $popover-border-radius;
|
||||
padding: $popover-padding;
|
||||
z-index: 998;
|
||||
width: auto;
|
||||
@if $popover-direction == 'top'
|
||||
{
|
||||
bottom: 49px;
|
||||
}
|
||||
@else{
|
||||
top: 49px;
|
||||
}
|
||||
&:before{
|
||||
position: absolute;
|
||||
display: block;
|
||||
@if $popover-direction == 'top'
|
||||
{
|
||||
border-top: 7px solid $popover-bg-color;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
bottom: -7px;
|
||||
}
|
||||
@else{
|
||||
border-bottom: 7px solid $popover-bg-color;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
top: -7px;
|
||||
}
|
||||
content: '';
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked.#{$popover-name}{
|
||||
+ label > .#{$popover-name}{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//====================================================================
|
||||
// THE MIXINS SPECIFIED BELOW ARE EXPERIMENTAL AND MIGHT NOT BEHAVE
|
||||
// AS DOCUMENTED. EXERCISE CAUTION IF YOU USE THEM!
|
||||
//====================================================================
|
||||
/*
|
||||
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 make-button-states($button-states-name){
|
||||
input[type="checkbox"]{
|
||||
&.#{$button-states-name}{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
& + label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-btn-group($btn-group-name, $btn-name, $btn-group-border, $btn-group-border-radius){
|
||||
.#{$btn-group-name}{
|
||||
& .#{$btn-name}{
|
||||
border: $btn-group-border;
|
||||
margin: 0;
|
||||
&:not(:first-child):not(:last-child){
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&:first-child{
|
||||
border-radius: $btn-group-border-radius 0 0 $btn-group-border-radius;
|
||||
border-right: 0;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0 $btn-group-border-radius $btn-group-border-radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,310 +0,0 @@
|
||||
/*
|
||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
Set body colors and margin.
|
||||
*/
|
||||
html {
|
||||
font-family: #{$base-fonts};
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: $body-margin;
|
||||
color: $body-color;
|
||||
background-color: $body-bg-color;
|
||||
}
|
||||
/*
|
||||
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: $base-line-height * $header-line-height-multiplier;
|
||||
margin: $header-margin ;
|
||||
font-weight: $header-font-weight ;
|
||||
small{
|
||||
color: $header-small-color ;
|
||||
font-weight: $header-small-font-weight ;
|
||||
}
|
||||
}
|
||||
h1{ font-size: $base-font-size * $h1-multiplier; }
|
||||
h2{ font-size: $base-font-size * $h2-multiplier; }
|
||||
h3{ font-size: $base-font-size * $h3-multiplier; }
|
||||
h4{ font-size: $base-font-size * $h4-multiplier; }
|
||||
h5{ font-size: $base-font-size * $h5-multiplier; }
|
||||
h6{ font-size: $base-font-size * $h6-multiplier; }
|
||||
/*
|
||||
Correct box-sizing in Firefox.
|
||||
Style for horizontal rule.
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
line-height: $base-line-height * $hr-line-height-multiplier ;
|
||||
margin: $hr-margin ;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-top: $hr-border-style;
|
||||
}
|
||||
/*
|
||||
Style for all small text and size for sub and sup.
|
||||
*/
|
||||
small, sub, sup{
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
/*
|
||||
Style for paragraph and preformatted elements.
|
||||
*/
|
||||
p, pre {
|
||||
margin: $p-margin;
|
||||
}
|
||||
/*
|
||||
Style for lists.
|
||||
*/
|
||||
ul, ol {
|
||||
margin-top: $list-margin-top;
|
||||
margin-bottom: $list-margin-bottom;
|
||||
ul, ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Styles for code and preformatted.
|
||||
*/
|
||||
samp, kbd, code, pre{
|
||||
font-family: #{$code-fonts};
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
kbd, code, pre {
|
||||
padding: $code-padding;
|
||||
border-radius: $code-border-radius;
|
||||
}
|
||||
code, pre{
|
||||
background-color: $code-bg-color;
|
||||
}
|
||||
kbd {
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg-color;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
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: $a-color;
|
||||
&:active, &:hover{
|
||||
outline-width: 0;
|
||||
color: $a-hover-color;
|
||||
}
|
||||
&:visited{
|
||||
color: $a-visited-color;
|
||||
&:active, &:hover{
|
||||
color: $a-visited-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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: $mark-bg-color;
|
||||
color: $mark-color;
|
||||
}
|
||||
/*
|
||||
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: $sub-bottom;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
/*
|
||||
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: #{$button-fonts};
|
||||
font-size: $button-font-size;
|
||||
line-height: $base-line-height * $button-line-height-multiplier;
|
||||
margin: $button-margin;
|
||||
}
|
||||
/*
|
||||
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;
|
||||
&::-moz-focus-inner{
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
&:-moz-focusring{
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Style for fieldset.
|
||||
*/
|
||||
fieldset {
|
||||
border: $fieldset-border;
|
||||
border-radius: $fieldset-border-radius;
|
||||
margin: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
/*
|
||||
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;
|
||||
&::-webkit-search-cancel-button, &::-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;
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
/*
|
||||
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 btn-variant ($btn-variant-color, $btn-variant-bg-color, $btn-variant-hover-style, $btn-variant-hover-style-percentage){
|
||||
color: $btn-variant-color;
|
||||
background: $btn-variant-bg-color;
|
||||
&:hover, &:active, &:focus{
|
||||
@if $btn-variant-hover-style == 'lighten'{
|
||||
background: lighten($btn-variant-bg-color, $btn-variant-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-btn( $btn-name, $btn-border, $btn-border-radius, $btn-margin,
|
||||
$btn-padding, $btn-color, $btn-bg-color,
|
||||
$btn-hover-style, $btn-hover-style-percentage,
|
||||
$btn-cursor, $btn-disabled-cursor, $btn-disabled-opacity){
|
||||
.#{$btn-name}, a.#{$btn-name}, a.#{$btn-name}:visited{
|
||||
display: inline-block;
|
||||
border: $btn-border;
|
||||
border-radius: $btn-border-radius;
|
||||
margin: $btn-margin;
|
||||
padding: $btn-padding;
|
||||
@include btn-variant($btn-color, $btn-bg-color, $btn-hover-style, $btn-hover-style-percentage);
|
||||
cursor: $btn-cursor;
|
||||
&.disabled, &[disabled], &:disabled{
|
||||
cursor: $btn-disabled-cursor;
|
||||
opacity: $btn-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-btn-style($btn-name, $btn-style-name, $btn-style-color, $btn-style-bg-color, $btn-style-hover-style: lighten, $btn-style-hover-style-percentage: 7.5%){
|
||||
.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}:visited{
|
||||
@include btn-variant($btn-style-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
/*
|
||||
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`.
|
||||
*/
|
||||
@mixin make-btn-size($btn-name, $btn-size-name, $btn-size-padding, $btn-size-font-size){
|
||||
.#{$btn-name}.#{$btn-size-name}{
|
||||
padding: $btn-size-padding;
|
||||
font-size: $btn-size-font-size;
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-frm( $frm-name, $frm-border, $frm-border-radius,
|
||||
$frm-margin, $frm-padding, $frm-focus-color,
|
||||
$frm-invalid-color, $frm-disabled-cursor, $frm-disabled-opacity,
|
||||
$frm-readonly-bg-color, $frm-readonly-border-color,
|
||||
$frm-select-height, $frm-label-margin, $frm-ctrl-group-name,
|
||||
$frm-ctrl-group-margin, $frm-inline-name,
|
||||
$frm-aligned-name, $frm-aligned-label-width){
|
||||
.#{$frm-name}{
|
||||
input[type="color"], input[type^="date"], input[type$="time"], input[type="email"],
|
||||
input[type="month"], input[type="week"], input[type="text"], input[type="password"],
|
||||
input[type="url"], input[type="number"], input[type="search"], input[type="tel"],
|
||||
select, textarea{
|
||||
box-sizing: border-box;
|
||||
border: $frm-border;
|
||||
border-radius: $frm-border-radius;
|
||||
box-shadow: none;
|
||||
}
|
||||
input:not([type]){
|
||||
box-sizing: border-box;
|
||||
border: $frm-border;
|
||||
border-radius: $frm-border-radius;
|
||||
box-shadow: none;
|
||||
}
|
||||
input, select, textarea{
|
||||
display: block;
|
||||
margin: $frm-margin;
|
||||
padding: $frm-padding;
|
||||
&:focus{
|
||||
border-color: $frm-focus-color;
|
||||
}
|
||||
&[disabled]{
|
||||
cursor: $frm-disabled-cursor;
|
||||
opacity: $frm-disabled-opacity;
|
||||
}
|
||||
&:invalid, &:focus:invalid, &:focus:invalid:focus{
|
||||
border-color: $frm-invalid-color;
|
||||
}
|
||||
&[readonly]{
|
||||
background-color: $frm-readonly-bg-color;
|
||||
border-color: $frm-readonly-border-color;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"], input[type="radio"]{
|
||||
display: inline-block;
|
||||
}
|
||||
select{
|
||||
height: $frm-select-height;
|
||||
&[multiple]{
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
label{
|
||||
margin: $frm-label-margin;
|
||||
}
|
||||
&.#{$frm-inline-name}, &.#{$frm-aligned-name}{
|
||||
input, select, textarea, label{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.#{$frm-inline-name}{
|
||||
.ctrl-group{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.#{$frm-aligned-name} .#{$frm-ctrl-group-name} label{
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
width: $frm-aligned-label-width;
|
||||
margin-top: 0;
|
||||
}
|
||||
.#{$frm-ctrl-group-name}{
|
||||
margin: $frm-ctrl-group-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-grid( $container-name, $container-padding,
|
||||
$row-name, $col-name, $col-number, $col-padding,
|
||||
$xs-prefix, $sm-prefix, $md-prefix, $lg-prefix, $hide-suffix,
|
||||
$sm-breakpoint, $md-breakpoint, $lg-breakpoint ){
|
||||
// Container
|
||||
.#{$container-name}{
|
||||
padding-right: $container-padding;
|
||||
padding-left: $container-padding;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
// Row
|
||||
.#{$row-name}{
|
||||
&:before, &:after{
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
// Column
|
||||
.#{$col-name}{
|
||||
float: left;
|
||||
padding: $col-padding;
|
||||
}
|
||||
// Extra small screen
|
||||
@for $i from 1 through $col-number{
|
||||
.#{$xs-prefix}-#{$i}{
|
||||
width: #{($i * 100% / $col-number)};
|
||||
}
|
||||
}
|
||||
.#{$sm-prefix}-#{$hide-suffix},
|
||||
.#{$md-prefix}-#{$hide-suffix},
|
||||
.#{$lg-prefix}-#{$hide-suffix}{
|
||||
display: block;
|
||||
}
|
||||
.#{$xs-prefix}-#{$hide-suffix}{
|
||||
display: none;
|
||||
}
|
||||
// Small screen
|
||||
@media (min-width: $sm-breakpoint){
|
||||
@for $i from 1 through $col-number{
|
||||
.#{$sm-prefix}-#{$i}{
|
||||
width: #{($i * 100% / $col-number)};
|
||||
}
|
||||
}
|
||||
.#{$xs-prefix}-#{$hide-suffix},
|
||||
.#{$md-prefix}-#{$hide-suffix},
|
||||
.#{$lg-prefix}-#{$hide-suffix}{
|
||||
display: block;
|
||||
}
|
||||
.#{$sm-prefix}-#{$hide-suffix}{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Medium screen
|
||||
@media (min-width: $md-breakpoint){
|
||||
@for $i from 1 through $col-number{
|
||||
.#{$md-prefix}-#{$i}{
|
||||
width: #{($i * 100% / $col-number)};
|
||||
}
|
||||
}
|
||||
.#{$xs-prefix}-#{$hide-suffix},
|
||||
.#{$sm-prefix}-#{$hide-suffix},
|
||||
.#{$lg-prefix}-#{$hide-suffix}{
|
||||
display: block;
|
||||
}
|
||||
.#{$md-prefix}-#{$hide-suffix}{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Large screen
|
||||
@media (min-width: $lg-breakpoint){
|
||||
@for $i from 1 through $col-number{
|
||||
.#{$lg-prefix}-#{$i}{
|
||||
width: #{($i * 100% / $col-number)};
|
||||
}
|
||||
}
|
||||
.#{$xs-prefix}-#{$hide-suffix},
|
||||
.#{$sm-prefix}-#{$hide-suffix},
|
||||
.#{$md-prefix}-#{$hide-suffix}{
|
||||
display: block;
|
||||
}
|
||||
.#{$lg-prefix}-#{$hide-suffix}{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,197 +0,0 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-nav( $nav-name, $nav-vertical-name, $nav-fixed-name, $nav-logo-name,
|
||||
$nav-logo-size, $nav-link-name, $nav-padding, $nav-color, $nav-bg-color,
|
||||
$nav-hover-style, $nav-hover-style-percentage, $nav-disabled-cursor,
|
||||
$nav-disabled-opacity, $nav-fixed-left-right, $grid-columns-total,
|
||||
$grid-columns-count-for-nav-fixed-vertical, $nav-fixed-collapse-breakpoint,
|
||||
$nav-fixed-collapse-label-location, $nav-fixed-collapse-label-margin,
|
||||
$nav-fixed-collapse-label-font-size ){
|
||||
.#{$nav-name}{
|
||||
box-sizing: border-box;
|
||||
background-color: #{$nav-bg-color};
|
||||
.#{$nav-logo-name}{
|
||||
font-size: $nav-logo-size;
|
||||
color: #{$nav-color};
|
||||
}
|
||||
ul{
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li{
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
> * {
|
||||
display: inline-block;
|
||||
padding: #{$nav-padding};
|
||||
color: #{$nav-color};
|
||||
margin: 0;
|
||||
}
|
||||
.#{$nav-link-name}{
|
||||
&:hover, &:active, &:focus{
|
||||
color: #{$nav-color};
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
&.disabled, &[disabled], &:disabled{
|
||||
cursor: $nav-disabled-cursor;
|
||||
opacity: $nav-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.#{$nav-vertical-name}{
|
||||
ul{
|
||||
display: block;
|
||||
li{
|
||||
display: block;
|
||||
> * {
|
||||
width: 100%;
|
||||
padding: #{$nav-padding} 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.#{$nav-fixed-name}{
|
||||
position: fixed;
|
||||
@if $nav-fixed-left-right == 'left'{
|
||||
left: 0;
|
||||
}
|
||||
@else{
|
||||
right: 0;
|
||||
}
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
&.#{$nav-vertical-name}{
|
||||
height: 100%;
|
||||
width: #{($grid-columns-count-for-nav-fixed-vertical * 100%/ $grid-columns-total)};
|
||||
ul{
|
||||
width: 100%;
|
||||
li{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& + label{
|
||||
display: none;
|
||||
font-weight: 700;
|
||||
margin: $nav-fixed-collapse-label-margin;
|
||||
font-size: $nav-fixed-collapse-label-font-size;
|
||||
padding: #{$nav-padding};
|
||||
color: #{$nav-color};
|
||||
background-color: $nav-bg-color;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
@if $nav-fixed-collapse-label-location == 'top-left'{
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@else if $nav-fixed-collapse-label-location == 'top-right'{
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
@else if $nav-fixed-collapse-label-location == 'bottom-left'{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
@else{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:before{
|
||||
position: relative;
|
||||
content: '\2630';
|
||||
}
|
||||
&:hover, &:active, &:focus{
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $nav-fixed-collapse-breakpoint){
|
||||
.#{$nav-name}{
|
||||
overflow: auto;
|
||||
&.#{$nav-fixed-name}{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + .#{$nav-name}.#{$nav-fixed-name}{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
ul{
|
||||
display: block;
|
||||
li{
|
||||
display: block;
|
||||
* {
|
||||
width: 100%;
|
||||
padding: #{$nav-padding} 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
& + label{
|
||||
&:before{
|
||||
content: '\00d7';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,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.
|
||||
*/
|
||||
@mixin make-tbl( $tbl-name, $tbl-border, $tbl-margin, $tbl-padding,
|
||||
$tbl-head-bg-color, $tbl-head-color, $tbl-body-bg-color,
|
||||
$tbl-body-alt-bg-color, $tbl-body-color,
|
||||
$tbl-horizontal-name, $tbl-bordered-name ){
|
||||
.#{$tbl-name}{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: $tbl-border;
|
||||
td, th{
|
||||
overflow: visible;
|
||||
border-left: $tbl-border;
|
||||
border-bottom: none;
|
||||
margin: $tbl-margin;
|
||||
padding: $tbl-padding;
|
||||
}
|
||||
thead {
|
||||
background-color: $tbl-head-bg-color;
|
||||
color: $tbl-head-color;
|
||||
text-align: left;
|
||||
}
|
||||
tbody {
|
||||
background-color: $tbl-body-bg-color;
|
||||
color: $tbl-body-color;
|
||||
tr:nth-child(2n-1) {
|
||||
background-color: $tbl-body-alt-bg-color;
|
||||
}
|
||||
}
|
||||
&.#{$tbl-horizontal-name}{
|
||||
td,th{
|
||||
border-left: none;
|
||||
border-bottom: $tbl-border;
|
||||
}
|
||||
}
|
||||
&.#{$tbl-bordered-name}{
|
||||
td,th{
|
||||
border-bottom: $tbl-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
/*
|
||||
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 make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius, $thumb-hover-color){
|
||||
img.#{$thumb-name}{
|
||||
padding: $thumb-padding;
|
||||
border: $thumb-border;
|
||||
border-radius: $thumb-border-radius;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus, &active{
|
||||
border-color: $thumb-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-border-generic($border-generic-name){
|
||||
.#{$border-generic-name}{
|
||||
border: 1px solid rgba(0,0,0, 0.25) !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-border-radial-style($border-style-name, $border-style-radius){
|
||||
.#{$border-style-name}{
|
||||
border-radius: $border-style-radius !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-colored-text($colored-text-name, $colored-text-color){
|
||||
.#{$colored-text-name}{
|
||||
color: $colored-text-color !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-colored-bg-text($colored-bg-text-name, $colored-bg-text-color){
|
||||
.#{$colored-bg-text-name}{
|
||||
background-color: $colored-bg-text-color !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-caret-down($caret-name, $caret-size, $caret-color){
|
||||
.#{$caret-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: $caret-size solid transparent;
|
||||
border-top: $caret-size solid $caret-color;
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-close($close-name, $close-color, $close-cursor, $close-font-size, $close-font-weight, $close-hover-color){
|
||||
.#{$close-name}{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
cursor: $close-cursor;
|
||||
&:before {
|
||||
content: '\00d7';
|
||||
}
|
||||
&:hover, &:active, &:focus{
|
||||
color: $close-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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 make-drags($drag-left-name, $drag-right-name){
|
||||
.#{$drag-left-name} {
|
||||
float: left !important;
|
||||
}
|
||||
.#{$drag-right-name} {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for center block class.
|
||||
Parameters:
|
||||
- $center-block-name : The class name for center block class.
|
||||
*/
|
||||
@mixin make-center-block($center-block-name){
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for clearfix class.
|
||||
Parameters:
|
||||
- $clearfix-name : The class name for the clearfix class.
|
||||
*/
|
||||
@mixin make-clearfix($clearfix-name){
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
@mixin make-hidden($hidden-name){
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user