Merge branch 'master' into master
This commit is contained in:
Angelos Chalaris
GitHub
9
.github/PULL_REQUEST_TEMPLATE.md
vendored
9
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -6,6 +6,9 @@
|
||||
<!--- Describe your changes in detail -->
|
||||
**Resolves** #(issue number) <!--- Delete if not a issue fix-->
|
||||
|
||||
<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description -->
|
||||
**Lodash[ACTION]** #100 -> https://lodash.com/docs/4.17.4#(method) <!--- Delete if not a Lodash[ADD OR UPDATE] -->
|
||||
|
||||
## What does your PR belong to?
|
||||
- [ ] Website
|
||||
- [ ] Snippets
|
||||
@ -17,6 +20,12 @@
|
||||
- [ ] New feature (non-breaking change which adds functionality)
|
||||
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
|
||||
|
||||
## [Lodash Backlog](https://github.com/Chalarangelo/30-seconds-of-code/issues/100)
|
||||
<!--- Provide a link to the method your trying to [ADD] or [UPDATE] in the Description above -->
|
||||
<!--- Add the prefix [UPDATE: `method.md`] or [ADD: `method.md`] to the Title & Desciption -->
|
||||
- [ ] I added the prefix [UPDATE: `method.md`] or [ADD: `method.md`]
|
||||
- [ ] I have referenced the `method` to the lodash backlog.
|
||||
|
||||
## Checklist:
|
||||
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
|
||||
- [ ] My code follows the code style of this project.
|
||||
|
||||
24
COLLABORATING.md
Normal file
24
COLLABORATING.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Collaborator team rules and guidelines for community moderation
|
||||
|
||||
**As a contributor/member of the community, remember that you can always open issues about moderation and problems with how community moderation is done. We are always open to constructive criticism and feedback!**
|
||||
|
||||
## Responsibilities of a collaborator
|
||||
|
||||
As a member of the team that manages **30 seconds of code**, you have the following responsibilities:
|
||||
|
||||
- **Be part of the conversation in the issue tracker.** That includes (but is not limited to) helping out new members, discussing new features and explaining decisions to people.
|
||||
- **Review pull requests.** You do not have to read through all of the pull requests and review them, but taking the time each day to review a few can help a great deal.
|
||||
- **Be civil and polite.** If you are about to lose your temper, take a step back and go do something else. We want our interactions with the community to be polite, so that more people can join the project and contribute in any way they can. Remember to always thank contributors for their help, even if it's minor changes or changes that did not make it into the project. This way we can reward and encourage people to keep being part of the community.
|
||||
- **Contribute when you want, moderate when you can.** If you have a lot on your plate outside of this project, it's alright. It's better to take a break for a few days rather than hastily deal with issues and pull requests that might break things.
|
||||
|
||||
## Guidelines for merging pull requests and making changes to the project
|
||||
|
||||
- **[Usual guidelines](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md) apply.** Make sure to follow them, like everybody else.
|
||||
- **For a pull request to be considered ready to merge, there should be at least 2 (preferrably 3) reviews approving it for merge.** There are, however, certain exceptions:
|
||||
- **If a pull request only fixes typos**, there is no need to wait for a second reviewer (unless you are not absolutely certain these were not typos in the first place).
|
||||
- **If a pull request only clarifies a snippet's description or enforces the styleguide for an existng snippet**, you might be able to merge it without getting a second reviewer to review it, but only if you are absolutely certain about it.
|
||||
- **Changes to build scripts, guidelines and things that might break the processes we have in place need to be reviewed by [@Chalarangelo](https://github.com/Chalarangelo)** (this is temporary, but we need a baseline to make sure we break as few things as possible in the beginning).
|
||||
- **After merging a pull request, make sure to check for untagged snippets and tag them appropriately.** Try to keep all snippets tagged, so that the list and website are up to date.
|
||||
- (*Irrelevant once we set up CI*) **You should rebuild the README and website after merging pull requests and push to the repository, so that both files are up to date.**
|
||||
- **If you make changes or additions to existing snippets or if you want to add you own snippets, you will go through the pull request process that everyone else goes.** Exceptions apply similarly to the ones mentioned above about merging pull requests (i.e. typos, description clarification and the way script and build process changes are handled). Pull requests suggested by collaborators should be reviewed by at least two other collaborators to be considered ready to merge.
|
||||
- **Pull requests that are inactive for over a week should be closed or put on hold.**
|
||||
@ -12,7 +12,7 @@ Here's what you can do to help:
|
||||
|
||||
### Snippet submission and Pull request guidelines
|
||||
|
||||
- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run build-list` to update the README.md file automatically, based on the changes you have made.
|
||||
- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run builder` to update the README.md file automatically, based on the changes you have made.
|
||||
- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `### awesomeSnippet` the filename should be `awesomeSnippet.md`.
|
||||
- Use `camelCase`, not `kebab-case` or `snake_case`.
|
||||
- Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title).
|
||||
|
||||
83
README.md
83
README.md
@ -11,6 +11,7 @@
|
||||
## Table of Contents
|
||||
|
||||
### Array
|
||||
* [`arrayGcd`](#arraygcd)
|
||||
* [`arrayMax`](#arraymax)
|
||||
* [`arrayMin`](#arraymin)
|
||||
* [`chunk`](#chunk)
|
||||
@ -51,6 +52,7 @@
|
||||
* [`union`](#union)
|
||||
* [`without`](#without)
|
||||
* [`zip`](#zip)
|
||||
* [`zipObject`](#zipobject)
|
||||
|
||||
### Browser
|
||||
* [`arrayToHtmlList`](#arraytohtmllist)
|
||||
@ -80,6 +82,7 @@
|
||||
### Math
|
||||
* [`arrayAverage`](#arrayaverage)
|
||||
* [`arraySum`](#arraysum)
|
||||
* [`clampNumber`](#clampnumber)
|
||||
* [`collatz`](#collatz)
|
||||
* [`digitize`](#digitize)
|
||||
* [`distance`](#distance)
|
||||
@ -87,6 +90,7 @@
|
||||
* [`fibonacci`](#fibonacci)
|
||||
* [`gcd`](#gcd)
|
||||
* [`hammingDistance`](#hammingdistance)
|
||||
* [`inRange`](#inrange)
|
||||
* [`isArmstrongNumber`](#isarmstrongnumber)
|
||||
* [`isDivisible`](#isdivisible)
|
||||
* [`isEven`](#iseven)
|
||||
@ -151,6 +155,23 @@
|
||||
|
||||
## Array
|
||||
|
||||
### arrayGcd
|
||||
|
||||
Calculates the greatest common denominator (gcd) of an array of numbers.
|
||||
|
||||
Use `Array.reduce()` and the `gcd` formula (uses recursion) to calculate the greatest common denominator of an array of numbers.
|
||||
|
||||
```js
|
||||
const arrayGcd = arr =>{
|
||||
const gcd = (x, y) => !y ? x : gcd(y, x % y);
|
||||
return arr.reduce((a,b) => gcd(a,b));
|
||||
}
|
||||
// arrayGcd([1,2,3,4,5]) -> 1
|
||||
// arrayGcd([4,8,12]) -> 4
|
||||
```
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### arrayMax
|
||||
|
||||
Returns the maximum value in an array.
|
||||
@ -532,8 +553,10 @@ _(For a snippet that does not mutate the original array see [`without`](#without
|
||||
|
||||
```js
|
||||
const pull = (arr, ...args) => {
|
||||
let pulled = arr.filter((v, i) => !args.toString().split(',').includes(v));
|
||||
arr.length = 0; pulled.forEach(v => arr.push(v));
|
||||
let argState = Array.isArray(args[0]) ? args[0] : args;
|
||||
let pulled = arr.filter((v, i) => !argState.includes(v));
|
||||
arr.length = 0;
|
||||
pulled.forEach(v => arr.push(v));
|
||||
};
|
||||
|
||||
// let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
|
||||
@ -764,6 +787,20 @@ const zip = (...arrays) => {
|
||||
//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]
|
||||
```
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### zipObject
|
||||
|
||||
Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
|
||||
|
||||
Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`.
|
||||
|
||||
```js
|
||||
const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
|
||||
// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
|
||||
// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
|
||||
```
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
## Browser
|
||||
|
||||
@ -1117,6 +1154,26 @@ const arraySum = arr => arr.reduce((acc, val) => acc + val, 0);
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### clampNumber
|
||||
|
||||
Clamps `num` within the inclusive `lower` and `upper` bounds.
|
||||
|
||||
If `lower` is greater than `upper`, swap them.
|
||||
If `num` falls within the range, return `num`.
|
||||
Otherwise return the nearest number in the range.
|
||||
|
||||
```js
|
||||
const clampNumber = (num, lower, upper) => {
|
||||
if(lower > upper) upper = [lower, lower = upper][0];
|
||||
return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper)
|
||||
}
|
||||
// clampNumber(2, 3, 5) -> 3
|
||||
// clampNumber(1, -1, -5) -> -1
|
||||
// clampNumber(3, 2, 4) -> 3
|
||||
```
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### collatz
|
||||
|
||||
Applies the Collatz algorithm.
|
||||
@ -1221,6 +1278,26 @@ const hammingDistance = (num1, num2) =>
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### inRange
|
||||
|
||||
Checks if the given number falls in the given range.
|
||||
|
||||
Use arithmetic comparison to check if the given number is in the specified range.
|
||||
If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`.
|
||||
|
||||
```js
|
||||
const inRange = (n, start, end=null) => {
|
||||
if(end && start > end) end = [start, start=end][0];
|
||||
return (end == null) ? (n>=0 && n<start) : (n>=start && n<end);
|
||||
}
|
||||
// inRange(3, 2, 5) -> true
|
||||
// inRange(3, 4) -> true
|
||||
// inRange(2, 3, 5) -> false
|
||||
// inrange(3, 2) -> false
|
||||
```
|
||||
|
||||
[⬆ back to top](#table-of-contents)
|
||||
|
||||
### isArmstrongNumber
|
||||
|
||||
Checks if the given number is an armstrong number or not.
|
||||
@ -1549,7 +1626,7 @@ const orderBy = (arr, props, orders) =>
|
||||
arr.sort((a, b) =>
|
||||
props.reduce((acc, prop, i) => {
|
||||
if (acc === 0) {
|
||||
const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
|
||||
const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
|
||||
acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
|
||||
}
|
||||
return acc;
|
||||
|
||||
1503
docs/index.html
1503
docs/index.html
File diff suppressed because one or more lines are too long
1
docs/mini.css
Normal file
1
docs/mini.css
Normal file
File diff suppressed because one or more lines are too long
351
docs/mini/_contextual.scss
Normal file
351
docs/mini/_contextual.scss
Normal file
@ -0,0 +1,351 @@
|
||||
/*
|
||||
Definitions for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
$mark-back-color: #0277bd !default; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa !default; // Text color for <mark>
|
||||
$mark-font-size: 0.95em !default; // Font size for <mark>
|
||||
$mark-line-height: 1em !default; // Line height for <mark>
|
||||
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
|
||||
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
|
||||
$toast-name: 'toast' !default; // Class name for toast component
|
||||
$toast-back-color: #424242 !default; // Background color for toast component
|
||||
$toast-fore-color: #fafafa !default; // Text color for toast component
|
||||
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
|
||||
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
|
||||
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
|
||||
$tooltip-back-color: #212121 !default; // Background color for tooltip component
|
||||
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
|
||||
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
|
||||
$modal-name: 'modal' !default; // Class name for modal dialog component
|
||||
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
|
||||
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
|
||||
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
|
||||
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
|
||||
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
|
||||
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
|
||||
$collapse-name: 'collapse' !default; // Class name for collapse component
|
||||
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
|
||||
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
|
||||
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
|
||||
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
|
||||
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
|
||||
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
|
||||
$collapse-border-color: #ddd !default; // Border color for collapse component
|
||||
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
|
||||
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$mark-back-color-var: '--mark-back-color' !default;
|
||||
$mark-fore-color-var: '--mark-fore-color' !default;
|
||||
$toast-back-color-var: '--toast-back-color' !default;
|
||||
$toast-fore-color-var: '--toast-fore-color' !default;
|
||||
$tooltip-back-color-var: '--tooltip-back-color' !default;
|
||||
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
|
||||
$modal-overlay-color-var: '--modal-overlay-color' !default;
|
||||
$modal-close-color-var: '--modal-close-color' !default;
|
||||
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
|
||||
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
|
||||
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
|
||||
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
|
||||
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
|
||||
$collapse-border-color-var: '--collapse-border-color' !default;
|
||||
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
|
||||
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $base-line-height: 1.5 !default; // Line height for most elements
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_contextual_mixins.scss` file to find this module's mixins.
|
||||
@import '_contextual_mixins';
|
||||
/* Contextual module CSS variable definitions */
|
||||
:root {
|
||||
#{$mark-back-color-var}: $mark-back-color;
|
||||
#{$mark-fore-color-var}: $mark-fore-color;
|
||||
}
|
||||
// Default styling for mark. Use mixins for alternate styles.
|
||||
mark {
|
||||
background: var(#{$mark-back-color-var});
|
||||
color: var(#{$mark-fore-color-var});
|
||||
font-size: $mark-font-size;
|
||||
line-height: $mark-line-height;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
&.#{$mark-inline-block-name} {
|
||||
display: inline-block;
|
||||
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
|
||||
font-size: 1em;
|
||||
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
|
||||
line-height: $base-line-height;
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
||||
}
|
||||
}
|
||||
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
|
||||
@if $_include-toast {
|
||||
:root {
|
||||
#{$toast-back-color-var}: $toast-back-color;
|
||||
#{$toast-fore-color-var}: $toast-fore-color;
|
||||
}
|
||||
.#{$toast-name} {
|
||||
position: fixed;
|
||||
bottom: calc(var(#{$universal-margin-var}) * 3);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1111;
|
||||
color: var(#{$toast-fore-color-var});
|
||||
background: var(#{$toast-back-color-var});
|
||||
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
|
||||
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for tooltips.
|
||||
@if $_include-tooltip {
|
||||
:root {
|
||||
#{$tooltip-back-color-var}: $tooltip-back-color;
|
||||
#{$tooltip-fore-color-var}: $tooltip-fore-color;
|
||||
}
|
||||
.#{$tooltip-name} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: all 0.3s;
|
||||
// Remember to keep this index a lower value than the one used for stickies.
|
||||
z-index: 1010; // Deals with certain problems when combined with cards and tables.
|
||||
left: 50%;
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
bottom: 75%;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
top: 75%;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
&:before { // This is the little tooltip triangle
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: var(#{$universal-margin-var}) solid transparent;
|
||||
// Newer browsers will center the tail properly
|
||||
left: calc(50% - var(#{$universal-margin-var}));
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-back-color;
|
||||
}
|
||||
&:after { // This is the actual tooltip's text block
|
||||
content: attr(aria-label);
|
||||
color: var(#{$tooltip-fore-color-var});
|
||||
background: var(#{$tooltip-back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for modal dialogs.
|
||||
@if $_include-modal {
|
||||
:root {
|
||||
#{$modal-overlay-color-var}: $modal-overlay-color;
|
||||
#{$modal-close-color-var}: $modal-close-color;
|
||||
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
|
||||
}
|
||||
[type="checkbox"].#{$modal-name} {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
& + div {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(#{$modal-overlay-color-var});
|
||||
& .card {
|
||||
margin: 0 auto;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
& .#{$modal-close-name} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $modal-close-size;
|
||||
height: $modal-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before {
|
||||
display: block;
|
||||
content: '\00D7';
|
||||
color: var(#{$modal-close-color-var});
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-size: $modal-close-size;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$modal-close-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked + div {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
z-index: 1200;
|
||||
& .card {
|
||||
& .#{$modal-close-name} {
|
||||
z-index: 1211;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for collapse.
|
||||
@if $_include-collapse {
|
||||
:root {
|
||||
#{$collapse-label-back-color-var}: $collapse-label-back-color;
|
||||
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
|
||||
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
|
||||
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
|
||||
#{$collapse-border-color-var}: $collapse-border-color;
|
||||
#{$collapse-content-back-color-var} : $collapse-content-back-color;
|
||||
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
|
||||
}
|
||||
.#{$collapse-name} {
|
||||
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
& > [type="radio"], & > [type="checkbox"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
& > label {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
height: $collapse-label-height;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
color: var(#{$collapse-label-fore-color-var});
|
||||
background: var(#{$collapse-label-back-color-var});
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
&:hover, &:focus {
|
||||
background: var(#{$collapse-label-hover-back-color-var});
|
||||
}
|
||||
+ div {
|
||||
flex-basis: auto;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: max-height 0.3s;
|
||||
max-height: 1px; // for transition
|
||||
}
|
||||
}
|
||||
> :checked + label {
|
||||
background: var(#{$collapse-selected-label-back-color-var});
|
||||
// border: 0.0625rem solid #bdbdbd; // var it
|
||||
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
|
||||
& + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
background: var(#{$collapse-content-back-color-var});
|
||||
border: $__1px solid var(#{$collapse-border-color-var});
|
||||
border-top: 0;
|
||||
padding: var(#{$universal-padding-var});
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
max-height: $collapse-content-max-height;
|
||||
}
|
||||
}
|
||||
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
|
||||
border-top: 0;
|
||||
}
|
||||
& > label:first-of-type {
|
||||
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize
|
||||
}
|
||||
& > label:last-of-type {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
|
||||
}
|
||||
& > :checked:last-of-type + label {
|
||||
border-radius: 0;
|
||||
+ div {
|
||||
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
docs/mini/_contextual_mixins.scss
Normal file
27
docs/mini/_contextual_mixins.scss
Normal file
@ -0,0 +1,27 @@
|
||||
// Contextual module's mixin definitions are here. For the module itself
|
||||
// check `_contextual.scss`.
|
||||
// Mark color variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-back-color: Background color for <mark> variant.
|
||||
// $mark-alt-fore-color: Text color for <mark> variant.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
|
||||
$mark-alt-fore-color : $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
#{$mark-back-color-var}: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color{
|
||||
#{$mark-fore-color-var}: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mark size variant mixin:
|
||||
// $mark-alt-name: The name of the class used for the <mark> variant.
|
||||
// $mark-alt-padding: The padding of the <mark> variant.
|
||||
// $mark-alt-border-radius: The border radius of the <mark> variant.
|
||||
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
|
||||
mark.#{$mark-alt-name} {
|
||||
padding: $mark-alt-padding;
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
}
|
||||
304
docs/mini/_core.scss
Normal file
304
docs/mini/_core.scss
Normal file
@ -0,0 +1,304 @@
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
|
||||
// TODO: Add fluid type and test thoroughly
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
|
||||
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
|
||||
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
|
||||
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
|
||||
$base-line-height: 1.5 !default; // Line height for most elements
|
||||
$base-font-size: 1rem !default; // Font sizing for all elements
|
||||
$_body-margin: 0 !default; // [Hidden] Margin for body
|
||||
$fore-color: #111 !default; // Text & foreground color
|
||||
$secondary-fore-color: #444 !default; // Secondary text & foreground color
|
||||
$back-color: #f8f8f8 !default; // Background color
|
||||
$secondary-back-color: #f0f0f0 !default; // Secondary background color
|
||||
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
|
||||
$pre-color: #1565c0 !default; // <pre> sidebar color
|
||||
$border-color: #aaa !default; // Border color
|
||||
$secondary-border-color: #ddd !default; // Secondary border color
|
||||
$heading-line-height: 1.2 !default; // Line height for headings
|
||||
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
|
||||
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
|
||||
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
|
||||
$universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
$universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
$universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
$small-font-size: 0.75em !default; // Font sizing for <small> elements
|
||||
$heading-font-weight: 500 !default; // Font weight for headings
|
||||
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
|
||||
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
|
||||
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
|
||||
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
|
||||
$code-font-size: 0.85em; // Font size for <code>, <kbd>
|
||||
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
|
||||
$sup-top: -0.5em !default; // <sup> top
|
||||
$sub-bottom: -0.25em !default; // <sub> bottom
|
||||
$a-link-color: #0277bd !default; // Color for <a>:link
|
||||
$a-visited-color: #01579b !default; // Color for <a>:visited
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$fore-color-var: '--fore-color' !default;
|
||||
$secondary-fore-color-var: '--secondary-fore-color' !default;
|
||||
$back-color-var: '--back-color' !default;
|
||||
$secondary-back-color-var: '--secondary-back-color' !default;
|
||||
$blockquote-color-var: '--blockquote-color' !default;
|
||||
$pre-color-var: '--pre-color' !default;
|
||||
$border-color-var: '--border-color' !default;
|
||||
$secondary-border-color-var: '--secondary-border-color' !default;
|
||||
$heading-ratio-var: '--heading-ratio' !default;
|
||||
$universal-margin-var: '--universal-margin' !default;
|
||||
$universal-padding-var: '--universal-padding' !default;
|
||||
$universal-border-radius-var: '--universal-border-radius' !default;
|
||||
$universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
$a-link-color-var: '--a-link-color' !default;
|
||||
$a-visited-color-var: '--a-visited-color' !default;
|
||||
/* Core module CSS variable definitions */
|
||||
:root {
|
||||
#{$fore-color-var}: $fore-color;
|
||||
#{$secondary-fore-color-var}: $secondary-fore-color;
|
||||
#{$back-color-var}: $back-color;
|
||||
#{$secondary-back-color-var}: $secondary-back-color;
|
||||
#{$blockquote-color-var}: $blockquote-color;
|
||||
#{$pre-color-var}: $pre-color;
|
||||
#{$border-color-var}: $border-color;
|
||||
#{$secondary-border-color-var}: $secondary-border-color;
|
||||
#{$heading-ratio-var}: $heading-ratio;
|
||||
#{$universal-margin-var}: $universal-margin;
|
||||
#{$universal-padding-var}: $universal-padding;
|
||||
#{$universal-border-radius-var}: $universal-border-radius;
|
||||
#{$a-link-color-var} : $a-link-color;
|
||||
#{$a-visited-color-var} : $a-visited-color;
|
||||
@if $universal-box-shadow != none {
|
||||
#{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
}
|
||||
}
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
a, b, del, em, i, ins, q, span, strong, u {
|
||||
font-size: 1em; // Fix for elements inside headings not displaying properly.
|
||||
}
|
||||
|
||||
@if $_apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $_body-margin;
|
||||
color: var(#{$fore-color-var});
|
||||
background: var(#{$back-color-var});
|
||||
}
|
||||
|
||||
// Correct display for Edge & Firefox.
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Show overflow in Edge.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
display: block;
|
||||
@if $subheading-top-margin != 0 {
|
||||
margin-top: $subheading-top-margin;
|
||||
}
|
||||
@if $subheading-font-size != $small-font-size {
|
||||
font-size: $subheading-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(1rem * var(#{$heading-ratio-var}));
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: calc(1rem / var(#{$heading-ratio-var}));
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding-left: calc(2 * var(#{$universal-margin-var}));
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: var(#{$universal-margin-var});
|
||||
height: $__1px;
|
||||
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
|
||||
}
|
||||
|
||||
blockquote { // Doesn't have a back color by default, can be added manually.
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(3 * var(#{$universal-padding-var}));
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 6*$__1px solid var(#{$blockquote-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: $blockquote-quotation-size;
|
||||
font-weight: 700;
|
||||
content: "\201c";
|
||||
color: var(#{$blockquote-color-var});
|
||||
}
|
||||
&[cite]:after{
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-size;
|
||||
font-weight: 700;
|
||||
content: "\a— " attr(cite);
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: #{$code-font-family}; // Display fix should be applied manually!
|
||||
font-size: $code-font-size;
|
||||
}
|
||||
|
||||
code { // No border color by default and fore color is the default for text, can be altered manually.
|
||||
background: var(#{$secondary-back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
kbd { // No border color by default, can be altered manually.
|
||||
background: var(#{$fore-color-var});
|
||||
color: var(#{$back-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
pre { // Fore color is the default, can be altered manually.
|
||||
overflow: auto; // Responsiveness
|
||||
background: var(#{$secondary-back-color-var});
|
||||
padding: calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 4*$__1px solid var(#{$pre-color-var});
|
||||
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent elements from affecting the line height in all browsers.
|
||||
sup, sub, code, kbd {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small, sup, sub, figcaption {
|
||||
font-size: $small-element-font-size;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(#{$universal-margin-var});
|
||||
}
|
||||
figcaption {
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:link{
|
||||
color: var(#{$a-link-color-var});
|
||||
}
|
||||
&:visited {
|
||||
color: var(#{$a-visited-color-var});
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
317
docs/mini/_input_control.scss
Normal file
317
docs/mini/_input_control.scss
Normal file
@ -0,0 +1,317 @@
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$input-group-name: 'input-group' !default; // Class name for input groups.
|
||||
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
|
||||
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
|
||||
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
|
||||
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
|
||||
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
|
||||
$button-group-name: 'button-group' !default; // Class name for button groups.
|
||||
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
|
||||
$form-back-color: #f0f0f0 !default; // Background color for forms.
|
||||
$form-fore-color: #111 !default; // Text color for forms.
|
||||
$form-border-color: #ddd !default; // Border color for forms.
|
||||
$input-back-color: #f8f8f8 !default; // Background color for input elements.
|
||||
$input-fore-color: #111 !default; // Text color for input elements.
|
||||
$input-border-color: #ddd !default; // Border color for input elements.
|
||||
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
|
||||
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
|
||||
$button-back-color: #e2e2e2 !default; // Background color for buttons.
|
||||
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
|
||||
$button-fore-color: #212121 !default; // Text color for buttons.
|
||||
$button-border-color: transparent !default; // Border color for buttons.
|
||||
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
|
||||
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$form-back-color-var: '--form-back-color' !default;
|
||||
$form-fore-color-var: '--form-fore-color' !default;
|
||||
$form-border-color-var: '--form-border-color' !default;
|
||||
$input-back-color-var: '--input-back-color' !default;
|
||||
$input-fore-color-var: '--input-fore-color' !default;
|
||||
$input-border-color-var: '--input-border-color' !default;
|
||||
$input-focus-color-var: '--input-focus-color' !default;
|
||||
$input-invalid-color-var: '--input-invalid-color' !default;
|
||||
$button-back-color-var: '--button-back-color' !default;
|
||||
$button-hover-back-color-var: '--button-hover-back-color' !default;
|
||||
$button-fore-color-var: '--button-fore-color' !default;
|
||||
$button-border-color-var: '--button-border-color' !default;
|
||||
$button-hover-border-color-var: '--button-hover-border-color' !default;
|
||||
$button-group-border-color-var: '--button-group-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $base-font-size: 1rem !default; // Font sizing for all elements
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
/* Input_control module CSS variable definitions */
|
||||
:root {
|
||||
#{$form-back-color-var}: $form-back-color;
|
||||
#{$form-fore-color-var}: $form-fore-color;
|
||||
#{$form-border-color-var}: $form-border-color;
|
||||
#{$input-back-color-var}: $input-back-color;
|
||||
#{$input-fore-color-var}: $input-fore-color;
|
||||
#{$input-border-color-var}: $input-border-color;
|
||||
#{$input-focus-color-var}: $input-focus-color;
|
||||
#{$input-invalid-color-var}: $input-invalid-color;
|
||||
#{$button-back-color-var}: $button-back-color;
|
||||
#{$button-hover-back-color-var}: $button-hover-back-color;
|
||||
#{$button-fore-color-var}: $button-fore-color;
|
||||
#{$button-border-color-var}: $button-border-color;
|
||||
#{$button-hover-border-color-var}: $button-hover-border-color;
|
||||
#{$button-group-border-color-var}: $button-group-border-color;
|
||||
}
|
||||
// Base form styling
|
||||
form { // Text color is the default, this can be changed manually.
|
||||
background: var(#{$form-back-color-var});
|
||||
color: var(#{$form-fore-color-var});
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
}
|
||||
// Fieldset styling
|
||||
fieldset {
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $__1px solid var(#{$form-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 4);
|
||||
padding: var(#{$universal-padding-var});
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// Actual styling.
|
||||
font-weight: $bold-font-weight;
|
||||
padding: calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Label syling. - Basically just padding, but there might be more in the future.
|
||||
label {
|
||||
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
|
||||
}
|
||||
// Input group styling.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
// Fluid input groups
|
||||
@if $_include-fluid-input-group {
|
||||
&.#{$input-group-fluid-name} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
// On mobile
|
||||
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// Vertical input groups
|
||||
&.#{$input-group-vertical-name} {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
& > input {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
// Correct style in Chrome and Safari.
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Common textual input styling. - Avoid using box-shadow with these.
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
|
||||
box-sizing: border-box;
|
||||
// Background, color and border should not be unassigned, as the browser defaults will apply.
|
||||
background: var(#{$input-back-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
border: $__1px solid var(#{$input-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 2);
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
|
||||
&:hover, &:focus {
|
||||
border-color: var(#{$input-focus-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: var(#{$input-invalid-color-var});
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: var(#{$secondary-back-color-var});
|
||||
}
|
||||
}
|
||||
// Fix for select and option elements overflowing their parent container.
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
option {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// Styling for checkboxes and radio buttons.
|
||||
[type="checkbox"], [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
vertical-align: text-bottom;
|
||||
padding: 0; // Remove padding added from previous styles.
|
||||
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
|
||||
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
|
||||
&:checked:before {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
[type="checkbox"] {
|
||||
&:checked:before {
|
||||
content: '\2713';
|
||||
font-family: sans-serif;
|
||||
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||
top: calc(0rem - var(#{$universal-padding-var}));
|
||||
left: calc(var(#{$universal-padding-var}) / 4);
|
||||
}
|
||||
}
|
||||
[type="radio"] {
|
||||
border-radius: 100%;
|
||||
&:checked:before {
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
|
||||
background: var(#{$input-fore-color-var});
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
:placeholder-shown {
|
||||
color: var(#{$input-fore-color-var});
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: var(#{$input-fore-color-var});
|
||||
opacity: 0.54;
|
||||
}
|
||||
// Definitions for the button and button-like elements.
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Reset for Firefox focusing on button elements.
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// Fixes for Android 4, iOS and Safari.
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
// Other fixes.
|
||||
button {
|
||||
overflow: visible; // Show the overflow in IE.
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// Default styling
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: var(#{$button-back-color-var});
|
||||
color: var(#{$button-fore-color-var});
|
||||
border: $__1px solid var(#{$button-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
background: var(#{$button-hover-back-color-var});
|
||||
border-color: var(#{$button-hover-border-color-var});
|
||||
}
|
||||
}
|
||||
// Disabled styling for input and button elements.
|
||||
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
|
||||
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Button group styling.
|
||||
.#{$button-group-name} {
|
||||
display: flex;
|
||||
border: $__1px solid var(#{$button-group-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
|
||||
& > .#{$button-class-name}, & > [role="button"] {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
& > :not(:first-child) {
|
||||
border-left: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
// Responsiveness for button groups
|
||||
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
|
||||
flex-direction: column;
|
||||
& > :not(:first-child) {
|
||||
border: 0; // Reapply to remove the left border from elements.
|
||||
border-top: $__1px solid var(#{$button-group-border-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
46
docs/mini/_input_control_mixins.scss
Normal file
46
docs/mini/_input_control_mixins.scss
Normal file
@ -0,0 +1,46 @@
|
||||
// Input_control module's mixin definitions are here. For the module itself
|
||||
// check `_input_control.scss`.
|
||||
// Button color variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-back-color: Background color for button variant.
|
||||
// $button-alt-hover-back-color: Background color for button variant (hover).
|
||||
// $button-alt-fore-color: Text color for button variant.
|
||||
// $button-alt-border-color: Border color for button variant.
|
||||
// $button-alt-hover-border-color: Border color for button variant (hover).
|
||||
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
|
||||
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
|
||||
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
@if $button-alt-back-color != $button-back-color {
|
||||
#{$button-back-color-var}: $button-alt-back-color;
|
||||
}
|
||||
@if $button-alt-fore-color != $button-fore-color{
|
||||
#{$button-fore-color-var}: $button-alt-fore-color;
|
||||
}
|
||||
@if $button-alt-border-color != $button-border-color{
|
||||
#{$button-border-color-var}: $button-alt-border-color;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
@if $button-alt-hover-back-color != $button-hover-back-color{
|
||||
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
|
||||
}
|
||||
@if $button-alt-hover-border-color != $button-hover-border-color{
|
||||
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Button size variant mixin:
|
||||
// $button-alt-name: The name of the class used for the button variant.
|
||||
// $button-alt-padding: The padding of the button variant.
|
||||
// $button-alt-margin The margin of the button variant.
|
||||
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
|
||||
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
|
||||
&.#{$button-alt-name} {
|
||||
padding: $button-alt-padding;
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
199
docs/mini/_layout.scss
Normal file
199
docs/mini/_layout.scss
Normal file
@ -0,0 +1,199 @@
|
||||
/*
|
||||
Definitions for the grid system, cards and containers.
|
||||
*/
|
||||
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
|
||||
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
|
||||
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
|
||||
$grid-container-name: 'container' !default; // Class name for the grid system container.
|
||||
$grid-row-name: 'row' !default; // Class name for the grid system rows.
|
||||
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
|
||||
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
|
||||
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
|
||||
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
|
||||
$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-small-prefix: 'sm' !default; // Small screen class prefix for grid.
|
||||
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
|
||||
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
|
||||
$card-name: 'card' !default; // Class name for the cards.
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections.
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
|
||||
$card-normal-width: 320px !default; // Width for normal cards.
|
||||
$card-section-media-height: 200px !default; // Height for cards' media sections.
|
||||
$card-fore-color: #111 !default; // Text color for the cards.
|
||||
$card-back-color: #f8f8f8 !default; // Background color for the cards.
|
||||
$card-border-color: #ddd !default; // Border color for the cards.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$card-fore-color-var: '--card-fore-color' !default;
|
||||
$card-back-color-var: '--card-back-color' !default;
|
||||
$card-border-color-var: '--card-border-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_layout_mixins.scss` file to find this module's mixins.
|
||||
@import 'layout_mixins';
|
||||
// Fluid grid system container definition.
|
||||
.#{$grid-container-name} {
|
||||
margin: 0 auto;
|
||||
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
// Grid row definition.
|
||||
.#{$grid-row-name} {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Inline mixin, used to generate class definitions for each grid step.
|
||||
@mixin generate-grid-size ($size-prefix){
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(#{$universal-padding-var}) / 2);
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$size-prefix} {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $_include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
// Offest definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
|
||||
@if ($i - 1) == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Reordering definitions.
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Definitions for smaller screens.
|
||||
@include generate-grid-size($grid-small-prefix);
|
||||
// Definitions for medium screens.
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
@include generate-grid-size($grid-medium-prefix);
|
||||
}
|
||||
// Definitions for large screens.
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
@include generate-grid-size($grid-large-prefix);
|
||||
}
|
||||
/* Card component CSS variable definitions */
|
||||
:root {
|
||||
#{$card-back-color-var}: $card-back-color;
|
||||
#{$card-fore-color-var}: $card-fore-color;
|
||||
#{$card-border-color-var}: $card-border-color;
|
||||
}
|
||||
// Card styling
|
||||
.#{$card-name} {
|
||||
// New syntax
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// Actual styling for the cards
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
border: $__1px solid var(#{$card-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
overflow: hidden; // Hide overflow from section borders
|
||||
// Responsiveness (if the screen is larger than card, set max-width)
|
||||
@media screen and (min-width: #{$card-normal-width}) {
|
||||
max-width: $card-normal-width;
|
||||
}
|
||||
// Card sections
|
||||
& > .#{$card-section-name} {
|
||||
// Reapply background and foreground colors, so that mixins can be applied properly.
|
||||
background: var(#{$card-back-color-var});
|
||||
color: var(#{$card-fore-color-var});
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-radius: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-bottom: $__1px solid var(#{$card-border-color-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
width: 100%;
|
||||
// Card media sections
|
||||
&.#{$card-section-media-name} {
|
||||
height: $card-section-media-height;
|
||||
padding: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
// Card sections - last
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
62
docs/mini/_layout_mixins.scss
Normal file
62
docs/mini/_layout_mixins.scss
Normal file
@ -0,0 +1,62 @@
|
||||
// Layout (card) module's mixin definitions are here. For the module itself
|
||||
// check `_layout.scss`.
|
||||
// Mixin for alternate card sizes:
|
||||
// $card-alt-size-name: The name of the class used for the alternate size card.
|
||||
// $card-alt-size-width: The width of the alternate size card.
|
||||
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
||||
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media screen and (min-width: #{$card-alt-size-width}) {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate cards (card color variants):
|
||||
// $card-alt-name: The name of the class used for the alternate card.
|
||||
// $card-alt-back-color: The background color of the alternate card.
|
||||
// $card-alt-fore-color: The text color of the alternate card.
|
||||
// $card-alt-border-color: The border style of the alternate card.
|
||||
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
|
||||
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
|
||||
.#{$card-name}.#{$card-alt-name} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-color != $card-border-color {
|
||||
#{$card-border-color-var}: $card-alt-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-back-color: The background color of the alternate card section.
|
||||
// $card-section-alt-fore-color: The text color of the alternate card section.
|
||||
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
|
||||
$card-section-alt-fore-color : $card-fore-color) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
@if $card-section-alt-back-color != $card-back-color {
|
||||
#{$card-back-color-var}: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
#{$card-fore-color-var}: $card-section-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants):
|
||||
// $card-section-alt-name: The name of the class used for the alternate card section.
|
||||
// $card-section-alt-padding: The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
315
docs/mini/_navigation.scss
Normal file
315
docs/mini/_navigation.scss
Normal file
@ -0,0 +1,315 @@
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$header-height: 3.1875rem !default; // Height of the header element.
|
||||
$header-back-color: #f8f8f8 !default; // Background color for the header element.
|
||||
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
|
||||
$header-fore-color: #444 !default; // Text color for the header element.
|
||||
$header-border-color: #ddd !default; // Border color for the header element.
|
||||
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
|
||||
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
|
||||
$nav-fore-color: #444 !default; // Text color for the nav element.
|
||||
$nav-border-color: #ddd !default; // Border color for the nav element.
|
||||
$nav-link-color: #0277bd !default; // Color for link in the nav element.
|
||||
$footer-fore-color: #444 !default; // Text color for the footer element.
|
||||
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
|
||||
$footer-border-color: #ddd !default; // Border color for the footer element.
|
||||
$footer-link-color: #0277bd !default; // Color for link in the footer element.
|
||||
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
|
||||
$drawer-border-color: #ddd !default; // Border color for the drawer component.
|
||||
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
|
||||
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
|
||||
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
|
||||
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
|
||||
$header-logo-name: 'logo' !default; // Class name for the header logo element.
|
||||
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
|
||||
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
|
||||
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
|
||||
$drawer-name: 'drawer' !default; // Class name for the drawer component.
|
||||
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
|
||||
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
|
||||
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
|
||||
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
|
||||
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
|
||||
$drawer-width: 320px !default; // Width of the drawer component.
|
||||
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
|
||||
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
|
||||
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$header-fore-color-var: '--header-fore-color' !default;
|
||||
$header-back-color-var: '--header-back-color' !default;
|
||||
$header-hover-back-color-var: '--header-hover-back-color' !default;
|
||||
$header-border-color-var: '--header-border-color' !default;
|
||||
$nav-fore-color-var: '--nav-fore-color' !default;
|
||||
$nav-back-color-var: '--nav-back-color' !default;
|
||||
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
|
||||
$nav-border-color-var: '--nav-border-color' !default;
|
||||
$nav-link-color-var: '--nav-link-color' !default;
|
||||
$footer-fore-color-var: '--footer-fore-color' !default;
|
||||
$footer-back-color-var: '--footer-back-color' !default;
|
||||
$footer-border-color-var: '--footer-border-color' !default;
|
||||
$footer-link-color-var: '--footer-link-color' !default;
|
||||
$drawer-back-color-var: '--drawer-back-color' !default;
|
||||
$drawer-border-color-var: '--drawer-border-color' !default;
|
||||
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
|
||||
$drawer-close-color-var: '--drawer-close-color' !default;
|
||||
// == Uncomment below code if this module is used on its own ==
|
||||
//
|
||||
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
|
||||
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
|
||||
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
|
||||
// $universal-margin-var: '--universal-margin' !default;
|
||||
// $universal-padding-var: '--universal-padding' !default;
|
||||
// $universal-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-padding-var}: $universal-padding;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
#{$header-hover-back-color-var}: $header-hover-back-color;
|
||||
#{$header-fore-color-var}: $header-fore-color;
|
||||
#{$header-border-color-var}: $header-border-color;
|
||||
#{$nav-back-color-var}: $nav-back-color;
|
||||
#{$nav-hover-back-color-var}: $nav-hover-back-color;
|
||||
#{$nav-fore-color-var}: $nav-fore-color;
|
||||
#{$nav-border-color-var}: $nav-border-color;
|
||||
#{$nav-link-color-var}: $nav-link-color;
|
||||
#{$footer-fore-color-var}: $footer-fore-color;
|
||||
#{$footer-back-color-var}: $footer-back-color;
|
||||
#{$footer-border-color-var}: $footer-border-color;
|
||||
#{$footer-link-color-var}: $footer-link-color;
|
||||
#{$drawer-back-color-var}: $drawer-back-color;
|
||||
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
|
||||
#{$drawer-border-color-var}: $drawer-border-color;
|
||||
#{$drawer-close-color-var}: $drawer-close-color;
|
||||
}
|
||||
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
|
||||
header {
|
||||
height: $header-height;
|
||||
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$header-fore-color-var});
|
||||
@if $_header-only-bottom-border {
|
||||
border-bottom: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$header-border-color-var});
|
||||
}
|
||||
padding: calc(var(#{$universal-padding-var}) / 4) 0;
|
||||
// Responsiveness for smaller displays, scrolls horizontally.
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// Fix for responsive header, using the grid system's row and column alignment.
|
||||
&.#{$grid-row-name} {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
// Header logo styling.
|
||||
.#{$header-logo-name} {
|
||||
color: var(#{$header-fore-color-var});
|
||||
font-size: $header-logo-font-size;
|
||||
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
|
||||
text-decoration: none;
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"], .#{$button-class-name}, [role="button"] {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
|
||||
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
|
||||
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
|
||||
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
|
||||
text-align: center;
|
||||
color: var(#{$header-fore-color-var});
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
@if $_header-links-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$header-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
background: var(#{$nav-back-color-var});
|
||||
color: var(#{$nav-fore-color-var});
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
* {
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
a, a:visited {
|
||||
display: block;
|
||||
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background: var(#{$nav-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
// Subcategories in navigation.
|
||||
@for $i from 1 through $nav-sublink-depth {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
position: relative;
|
||||
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
|
||||
top: -#{$__1px};
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Footer styling.
|
||||
footer {
|
||||
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
|
||||
color: var(#{$footer-fore-color-var});
|
||||
@if $_footer-only-top-border {
|
||||
border-top: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
@else {
|
||||
border: $__1px solid var(#{$footer-border-color-var});
|
||||
}
|
||||
// margin: $footer-margin;
|
||||
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
|
||||
font-size: $footer-font-size;
|
||||
a, a:visited {
|
||||
color: var(#{$footer-link-color-var});
|
||||
}
|
||||
}
|
||||
// Definitions for sticky headers and footers.
|
||||
header.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
top: 0;
|
||||
}
|
||||
footer.#{$sticky-name} {
|
||||
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
bottom: 0;
|
||||
}
|
||||
// Responsive drawer component.
|
||||
.#{$drawer-toggle-name} {
|
||||
&:before { // No color specified, should use the color of its surroundings!
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"].#{$drawer-name} {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
+ * {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: var(#{$drawer-back-color-var});
|
||||
border: $__1px solid var(#{$drawer-border-color-var});
|
||||
border-radius: 0; // Set to 0 to override the value from `nav`.
|
||||
margin: 0; // Set to 0 to override the value from `nav`.
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
z-index: 1110;
|
||||
@if $_drawer-right {
|
||||
right: -$drawer-width;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
@else {
|
||||
left: -$drawer-width;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
& .#{$drawer-close-name} {
|
||||
position: absolute;
|
||||
top: var(#{$universal-margin-var});
|
||||
right: var(#{$universal-margin-var});
|
||||
z-index: 1111;
|
||||
width: $drawer-close-size;
|
||||
height: $drawer-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0; // Fixes the offset from label
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before { // Transparent background unless hovered over. Does not block text behind it.
|
||||
display: block;
|
||||
content: '\00D7';
|
||||
color: var(#{$drawer-close-color-var});
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-close-size;
|
||||
line-height: 1; // Setting to 1 seems to center the 'X' properly.
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$drawer-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$drawer-width}) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:checked + * {
|
||||
@if $_drawer-right {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) + * {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
& .#{$drawer-close-name} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
159
docs/mini/flavor.scss
Normal file
159
docs/mini/flavor.scss
Normal file
@ -0,0 +1,159 @@
|
||||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v3.0.0-alpha.2
|
||||
*/
|
||||
@import 'core';
|
||||
@import 'layout';
|
||||
|
||||
/*
|
||||
Custom elements for card elements.
|
||||
*/
|
||||
$card-small-name: 'small'; // Class name for small cards.
|
||||
$card-small-width: 240px; // Width for small cards.
|
||||
@include make-card-alt-size ($card-small-name, $card-small-width);
|
||||
|
||||
$card-large-name: 'large'; // Class name for large cards.
|
||||
$card-large-width: 480px; // Width for large cards.
|
||||
@include make-card-alt-size ($card-large-name, $card-large-width);
|
||||
|
||||
$card-fluid-name: 'fluid'; // Class name for fluid cards.
|
||||
$card-fluid-width: 100%; // Width for fluid cards.
|
||||
@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
|
||||
|
||||
$card-warning-name: 'warning'; // Class name for card warnging color variant.
|
||||
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
|
||||
$card-warning-fore-color: #111; // Text color for card warnging color variant.
|
||||
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
|
||||
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
|
||||
|
||||
$card-error-name: 'error'; // Class name for card error color variant.
|
||||
$card-error-back-color: #b71c1c; // Background color for card error color variant.
|
||||
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
|
||||
$card-error-border-color: #a71a1a; // Border style for card error color variant.
|
||||
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
|
||||
|
||||
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
|
||||
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
|
||||
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
|
||||
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
|
||||
|
||||
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
|
||||
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
|
||||
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
|
||||
|
||||
@import 'input_control';
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
$button-primary-name: 'primary'; // Class name for primary button color variant.
|
||||
$button-primary-back-color: #1976d2; // Background color for primary button color variant.
|
||||
$button-primary-hover-back-color:#1565c0; // Background color for primary button color variant (hover).
|
||||
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
|
||||
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
|
||||
|
||||
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
|
||||
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
|
||||
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
|
||||
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
|
||||
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
|
||||
|
||||
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
|
||||
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
|
||||
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
|
||||
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
|
||||
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
|
||||
|
||||
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
|
||||
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
|
||||
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
|
||||
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
|
||||
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
|
||||
|
||||
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
|
||||
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
|
||||
$button-small-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
|
||||
|
||||
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
|
||||
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
|
||||
$button-large-margin: var(#{$universal-margin-var});
|
||||
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
|
||||
|
||||
|
||||
$_drawer-right: false;
|
||||
|
||||
@import 'navigation';
|
||||
@import 'contextual';
|
||||
|
||||
/*
|
||||
Custom elements for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
$mark-secondary-name: 'secondary'; // Class name for secondary <mark> color variant.
|
||||
$mark-secondary-back-color: #d32f2f; // Background color for secondary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
|
||||
|
||||
$mark-tertiary-name: 'tertiary'; // Class name for tertiary <mark> color variant.
|
||||
$mark-tertiary-back-color: #308732; // Background color for tertiary <mark> color variant.
|
||||
@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
|
||||
|
||||
$mark-tag-name: 'tag'; // Class name, padding and border radius for tag <mark> size variant.
|
||||
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
||||
$mark-tag-border-radius: 1em;
|
||||
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
||||
|
||||
// Website-specific styles
|
||||
|
||||
html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
|
||||
code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
|
||||
code, kbd { font-size: 1em; }
|
||||
code { transform: scale(1); } /* Deals with the issue described in #243 */
|
||||
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
|
||||
.group{position:relative;margin-top:2em;margin-bottom:-1em}
|
||||
.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
|
||||
.search:focus{outline:none}
|
||||
label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
|
||||
.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
|
||||
label#menu-toggle { width: 3.4375rem;}
|
||||
|
||||
header h1.logo {
|
||||
margin-top: -0.8rem;
|
||||
text-align:center;
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
header #title {
|
||||
position:relative;
|
||||
top: -1rem;
|
||||
@media screen and (max-width: 500px) { font-size: 1rem; display: block }
|
||||
}
|
||||
|
||||
header h1 small {
|
||||
display:block;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
margin-top: -0.8rem;
|
||||
@media screen and (max-width: 768px) { font-size: 0.75rem; }
|
||||
@media screen and (max-width: 600px) { font-size: 0.625rem; }
|
||||
@media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
|
||||
}
|
||||
|
||||
label#menu-toggle {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0.5rem;
|
||||
width: 3.4375rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
1226
package-lock.json
generated
1226
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,7 @@
|
||||
"html-minifier": "^3.5.7",
|
||||
"live-server": "^1.2.0",
|
||||
"markdown-it": "^8.4.0",
|
||||
"node-sass": "^4.7.2",
|
||||
"nodemon": "^1.12.1",
|
||||
"semistandard": "^11.0.0"
|
||||
},
|
||||
|
||||
@ -1,14 +1,27 @@
|
||||
/*
|
||||
This is the builder script that generates the index.html file.
|
||||
This is the web builder script that generates the README file.
|
||||
Run using `npm run webber`.
|
||||
*/
|
||||
// Load modules
|
||||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
const md = require('markdown-it')();
|
||||
const minify = require('html-minifier').minify;
|
||||
|
||||
const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
|
||||
md = require('markdown-it')(), minify = require('html-minifier').minify;
|
||||
// Compile the mini.css framework and custom CSS styles, using `node-sass`.
|
||||
const sass = require('node-sass');
|
||||
sass.render({
|
||||
file: path.join('docs','mini','flavor.scss'),
|
||||
outFile: path.join('docs','mini.css'),
|
||||
outputStyle: 'compressed'
|
||||
}, function(err, result) {
|
||||
if(!err){
|
||||
fs.writeFile(path.join('docs','mini.css'), result.css, function(err2){
|
||||
if(!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
|
||||
else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
|
||||
}
|
||||
});
|
||||
// Set variables for paths
|
||||
const snippetsPath = './snippets', staticPartsPath = './static-parts', docsPath = './docs';
|
||||
// Set variables for script
|
||||
@ -63,7 +76,7 @@ try {
|
||||
output += md.render(`[${taggedSnippet[0]}](#${taggedSnippet[0].toLowerCase()})\n`).replace(/<p>/g,'').replace(/<\/p>/g,'').replace(/<a/g,'<a class="sublink-1"');
|
||||
output += '\n';
|
||||
}
|
||||
output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;">`;
|
||||
output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eceef2;">`;
|
||||
output += `<a id="top"> </a>`;
|
||||
// Loop over tags and snippets to create the list of snippets
|
||||
for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){
|
||||
@ -73,8 +86,7 @@ try {
|
||||
}
|
||||
// Add the ending static part
|
||||
output += `\n${endPart+'\n'}`;
|
||||
// Write to the index.html file
|
||||
|
||||
// Minify output
|
||||
output = minify(output, {
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
@ -92,7 +104,7 @@ try {
|
||||
trimCustomFragments: true,
|
||||
useShortDoctype: true,
|
||||
});
|
||||
|
||||
// Write to the index.html file
|
||||
fs.writeFileSync(path.join(docsPath,'index.html'), output);
|
||||
}
|
||||
catch (err){ // Handle errors (hopefully not!)
|
||||
|
||||
14
snippets/arrayGcd.md
Normal file
14
snippets/arrayGcd.md
Normal file
@ -0,0 +1,14 @@
|
||||
### arrayGcd
|
||||
|
||||
Calculates the greatest common denominator (gcd) of an array of numbers.
|
||||
|
||||
Use `Array.reduce()` and the `gcd` formula (uses recursion) to calculate the greatest common denominator of an array of numbers.
|
||||
|
||||
```js
|
||||
const arrayGcd = arr =>{
|
||||
const gcd = (x, y) => !y ? x : gcd(y, x % y);
|
||||
return arr.reduce((a,b) => gcd(a,b));
|
||||
}
|
||||
// arrayGcd([1,2,3,4,5]) -> 1
|
||||
// arrayGcd([4,8,12]) -> 4
|
||||
```
|
||||
17
snippets/clampNumber.md
Normal file
17
snippets/clampNumber.md
Normal file
@ -0,0 +1,17 @@
|
||||
### clampNumber
|
||||
|
||||
Clamps `num` within the inclusive `lower` and `upper` bounds.
|
||||
|
||||
If `lower` is greater than `upper`, swap them.
|
||||
If `num` falls within the range, return `num`.
|
||||
Otherwise return the nearest number in the range.
|
||||
|
||||
```js
|
||||
const clampNumber = (num, lower, upper) => {
|
||||
if(lower > upper) upper = [lower, lower = upper][0];
|
||||
return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper)
|
||||
}
|
||||
// clampNumber(2, 3, 5) -> 3
|
||||
// clampNumber(1, -1, -5) -> -1
|
||||
// clampNumber(3, 2, 4) -> 3
|
||||
```
|
||||
17
snippets/inRange.md
Normal file
17
snippets/inRange.md
Normal file
@ -0,0 +1,17 @@
|
||||
### inRange
|
||||
|
||||
Checks if the given number falls in the given range.
|
||||
|
||||
Use arithmetic comparison to check if the given number is in the specified range.
|
||||
If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`.
|
||||
|
||||
```js
|
||||
const inRange = (n, start, end=null) => {
|
||||
if(end && start > end) end = [start, start=end][0];
|
||||
return (end == null) ? (n>=0 && n<start) : (n>=start && n<end);
|
||||
}
|
||||
// inRange(3, 2, 5) -> true
|
||||
// inRange(3, 4) -> true
|
||||
// inRange(2, 3, 5) -> false
|
||||
// inrange(3, 2) -> false
|
||||
```
|
||||
@ -10,7 +10,7 @@ const orderBy = (arr, props, orders) =>
|
||||
arr.sort((a, b) =>
|
||||
props.reduce((acc, prop, i) => {
|
||||
if (acc === 0) {
|
||||
const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
|
||||
const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
|
||||
acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
|
||||
}
|
||||
return acc;
|
||||
|
||||
@ -9,8 +9,10 @@ _(For a snippet that does not mutate the original array see [`without`](#without
|
||||
|
||||
```js
|
||||
const pull = (arr, ...args) => {
|
||||
let pulled = arr.filter((v, i) => !args.toString().split(',').includes(v));
|
||||
arr.length = 0; pulled.forEach(v => arr.push(v));
|
||||
let argState = Array.isArray(args[0]) ? args[0] : args;
|
||||
let pulled = arr.filter((v, i) => !argState.includes(v));
|
||||
arr.length = 0;
|
||||
pulled.forEach(v => arr.push(v));
|
||||
};
|
||||
|
||||
// let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
|
||||
|
||||
11
snippets/zipObject.md
Normal file
11
snippets/zipObject.md
Normal file
@ -0,0 +1,11 @@
|
||||
### zipObject
|
||||
|
||||
Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
|
||||
|
||||
Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`.
|
||||
|
||||
```js
|
||||
const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
|
||||
// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
|
||||
// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
<footer>
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a></p>
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
|
||||
<a href="#top"><p style="display: inline-block;float: right;padding-right: 2em;">Back to top</p></a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.min.css">
|
||||
<link rel="stylesheet" href="./mini.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<title>30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
@ -13,19 +13,6 @@
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
|
||||
code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
|
||||
code, kbd { font-size: 1em; }
|
||||
code { transform: scale(1); } /* Deals with the issue described in #243 */
|
||||
pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
|
||||
.group{position:relative;margin-top:2em;margin-bottom:-1em}
|
||||
.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
|
||||
.search:focus{outline:none}
|
||||
label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
|
||||
.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
|
||||
label#menu-toggle { width: 3.4375rem;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="prism.css">
|
||||
</head>
|
||||
<script>
|
||||
@ -38,10 +25,10 @@
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<header style="height: 5.5rem;">
|
||||
<h1 class="logo" style="margin-top: -0.8rem; text-align:center;"><a style="text-decoration:none;color:black" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;"> 30 seconds of code</span></a>
|
||||
<small style="display:block; font-size: 1rem; font-style: italic; color: grey; margin-top: -0.8rem">Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
<h1 class="logo" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><span id="title"> 30 seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</h1>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; left: 0; top: 0;width: 3.4375rem;"></label>
|
||||
<label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
|
||||
</header>
|
||||
<div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
anagrams:string
|
||||
arrayAverage:math
|
||||
arrayGcd:array
|
||||
arrayMax:array
|
||||
arrayMin:array
|
||||
arraySum:math
|
||||
@ -9,6 +10,7 @@ capitalize:string
|
||||
capitalizeEveryWord:string
|
||||
chainAsync:function
|
||||
chunk:array
|
||||
clampNumber:math
|
||||
cleanObj:object
|
||||
coalesce:utility
|
||||
coalesceFactory:utility
|
||||
@ -51,6 +53,7 @@ initial:array
|
||||
initialize2DArray:array
|
||||
initializeArrayWithRange:array
|
||||
initializeArrayWithValues:array
|
||||
inRange:math
|
||||
intersection:array
|
||||
isArmstrongNumber:math
|
||||
isArray:utility
|
||||
@ -117,3 +120,4 @@ validateEmail:utility
|
||||
validateNumber:utility
|
||||
without:array
|
||||
zip:array
|
||||
zipObject:array
|
||||
|
||||
Reference in New Issue
Block a user