beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated some modules with externals and classes

Browse source 
Added external variables for single-module use and class name variables to core, grid, navigation, input_control and table.
This commit is contained in:
Angelos Chalaris 2017-03-30 22:08:35 +03:00
parent d433af473b
commit d83978933b
7 changed files with 84 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View file

@ -911,3 +911,9 @@
- Updated `utility` module, added proper **hidden flags** to `$include-breadcrumbs` and `$include-close-icon` to make it easier to disable those components.
- Cleanup in both flavor files is now complete, added maintainers to the `mini-sucroa` file to meake it easier for people to reach the team behind it.
- Added simple styling for `figcaption` element in `core`, updated both flavors with the required variables to make it usable.
- After inspecting `grid`, it is clear that no changes will be required at all in terms of variables.
- Minor restructure in `core`'s modules. More might be coming (more defaults - possibly in their own file).
- Updated defaults for `grid` just to be more in line with everything else.
- Updated `navigation`'s defaults to include class name defaults. Added *external variables* in `navigation` to remedy the problems that stem from single module usage.
- Updated `input_control` with new **hidden flag** `$include-button-group` just in case and external variables, plus all the needed class names at the very top.
- Updated `table` module with the required external variables and required names.

2
src/flavors/mini-default.scss
View file

@ -136,8 +136,6 @@ $grid-order-first-suffix: 'first'; // Class name suffix for grid columns
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid

25
src/mini/_core.scss
View file

@ -1,23 +1,14 @@
/*
Browsers resets and base typography.
*/
// Should default values be applied to all elements? (`true`/`false`).
$apply-defaults-to-all: true !default;
// Root font sizing for all elements - Should only be specified in `px` units!
$base-root-font-size: 16px !default;
// Fix display of <dfn> element in older versions of Android.
$include-dfn-fix: true !default;
// Should <small> elements in headings be displayed as blocks (`true`/`false`).
$make-heading-smalltext-block: false !default;
// Should a fancy styling be applied for the <hr> element (`true`/`false`).
$horizontal-rule-fancy-style: false !default;
// Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
$add-pre-element-sidebar: false !default;
// Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-underline: true !default;
// Should the :hover and :focus state of <a> elements use fade-out instead of
// a different color (`true`/`false`).
$apply-link-hover-fade: true !default;
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
$make-heading-smalltext-block:false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
$add-pre-element-sidebar: false !default; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
html {
font-size: $base-root-font-size; // Set root's font sizing.

6
src/mini/_grid.scss
View file

@ -3,7 +3,7 @@
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
$include-parent-layout: false !default; // Flag for rows defining column layouts (`true`/`false`).
$include-parent-layout: true !default; // Flag for rows defining column layouts (`true`/`false`).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only).
$grid-row-name: 'row' !default; // Class name for the grid system rows.
@ -16,9 +16,9 @@ $grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid co
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only).
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid (four-step-grid-only).
$grid-small-breakpoint: 480px !default; // Small screen breakpoint for grid (four-step-grid-only).
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid.
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.

90
src/mini/_input_control.scss
View file

@ -4,13 +4,23 @@
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
// Different elements are styled based on the same set of rules.
$include-fluid-input-group: true !default; // Should fluid input groups be included? (`true`/`false`)
$input-group-name: 'input-group' !default; // Class name for input groups.
$include-fluid-input-group: true !default; // Should fluid input groups be included? (`true`/`false`)
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$button-class-name: 'button' !default; // Class for custom button elements.
$include-button-group: true !default; // [Hidden flag] Should button groups be enabled? (`true`/`false`)
$button-group-name: 'button-group' !default;// Class for button groups.
// The below option will use the legacy high specificity selectors for <input> element styling instead
// of the less specific, yet less complicated and less bloated input selector. This only applies to
// the pseudo-classes and states of the <input> controls and not the default styling of them.
$input-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
// Base form styling.
form {
@if $form-back-color != $back-color {
@ -273,47 +283,49 @@ a[role="button"], label[role="button"], [role="button"] {
font: inherit; // Change font propery to `inherit` in Safari.
}
}
// Button group definition
.#{$button-group-name} {
// Old syntax
display: -webkit-box;
// New syntax
display: -webkit-flex;
display: flex;
border: $button-group-border-style;
@if $button-border-radius != 0 {
border-radius: $button-border-radius;
}
@if $button-group-margin != 0 {
margin: $button-group-margin;
}
@if $button-group-box-shadow != none {
box-shadow: $button-group-box-shadow;
}
button, [type="button"], [type="submit"], [type="reset"],
.#{$button-class-name}, [role="button"] {
margin: 0;
@if $include-button-group {
// Button group definition
.#{$button-group-name} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
display: -webkit-box;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
text-align: center;
border: 0;
display: -webkit-flex;
display: flex;
border: $button-group-border-style;
@if $button-border-radius != 0 {
border-radius: 0;
border-radius: $button-border-radius;
}
@if $button-group-border-style != 0 {
+ button, + [type="button"], + [type="submit"], + [type="reset"],
+ .#{$button-class-name}, + [role="button"] {
border-left: $button-group-border-style;
@if $button-group-margin != 0 {
margin: $button-group-margin;
}
@if $button-group-box-shadow != none {
box-shadow: $button-group-box-shadow;
}
button, [type="button"], [type="submit"], [type="reset"],
.#{$button-class-name}, [role="button"] {
margin: 0;
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
text-align: center;
border: 0;
@if $button-border-radius != 0 {
border-radius: 0;
}
@if $button-group-border-style != 0 {
+ button, + [type="button"], + [type="submit"], + [type="reset"],
+ .#{$button-class-name}, + [role="button"] {
border-left: $button-group-border-style;
}
}
@if $button-box-shadow != none {
box-shadow: none;
}
}
@if $button-box-shadow != none {
box-shadow: none;
}
}
}

12
src/mini/_navigation.scss
View file

@ -6,12 +6,22 @@ $button-class-name: 'button' !default; // Class name for the button-like e
$header-logo-name: 'logo' !default; // Class name for <header>'s logo.
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
$header-sticky-name: 'sticky' !default; // Class name for sticky <header>.
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
$footer-sticky-name: 'sticky' !default; // Class name for sticky <footer>.
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
$button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
// Header styling.
header {
display: block; // Correct display for older versions of IE.
@ -34,7 +44,7 @@ header {
@if $header-box-shadow != none {
box-shadow: $header-box-shadow;
}
// Resposniveness for smaller displays, scrolls horizontally.
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;

5
src/mini/_table.scss
View file

@ -3,11 +3,16 @@
*/
// The tables use the common table elements and syntax.
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
$include-horizontal-table: true !default; // Should horizontal tables be included?
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
$table-striped-name: 'striped' !default; // Class name for striped table
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Desktop view.
table {
border-collapse: separate;