mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'master' into social_action_exports
This commit is contained in:
commit
6dbee02d82
@ -10,17 +10,17 @@
|
||||
Exports
|
||||
*******
|
||||
|
||||
Export is an important issue for the Chill software : users should be able to :
|
||||
Export is an important issue within the Chill software : users should be able to :
|
||||
|
||||
- compute statistics about their activity ;
|
||||
- list "things" which make part of their activities.
|
||||
- list "things" which are a part of their activities.
|
||||
|
||||
The `main bundle`_ provides a powerful framework to build custom queries with re-usable parts across differents bundles.
|
||||
|
||||
.. contents:: Table of content
|
||||
:local:
|
||||
|
||||
.. seealso::
|
||||
.. seealso::
|
||||
|
||||
`The issue where this framework was discussed <https://git.framasoft.org/Chill-project/Chill-Main/issues/9>`_
|
||||
Provides some information about the pursued features and architecture.
|
||||
@ -32,37 +32,37 @@ Concepts
|
||||
Some vocabulary: 3 "Export elements"
|
||||
------------------------------------
|
||||
|
||||
Four terms are used for this framework :
|
||||
Four terms are used for this framework :
|
||||
|
||||
exports
|
||||
provides some basic operation on the date. Two kind of exports are available :
|
||||
Exports
|
||||
provide some basic operation on the data. Two kinds of exports are available :
|
||||
|
||||
- computed data : it may be "the number of people", "the number of activities", "the duration of activities", ...
|
||||
- list data : it may be "the list of people", "the list of activity", ...
|
||||
- list data : it may be "the list of people", "the list of activities", ...
|
||||
|
||||
filters
|
||||
The filters make a filter on the date: it removes some information the user doesn't want to introduce in the computation done by export. In other word, filters make a filter...
|
||||
Filters
|
||||
The filters create a filter on the data: it removes some information the user doesn't want to introduce in the computation done by the export.
|
||||
|
||||
Example of filter: "people under 18 years olds", "activities between the 1st of June and the 31st December", ...
|
||||
Example of a filter: "people under 18 years olds", "activities between the 1st of June and the 31st December", ...
|
||||
|
||||
aggregators
|
||||
The aggregator aggregates the data into some group (some software use the term 'bucket').
|
||||
Aggregators
|
||||
The aggregator aggregates the data into some group (some software use the term 'bucket').
|
||||
|
||||
Example of aggregator : "group people by gender", "group people by nationality", "group activity by type", ...
|
||||
Example of an aggregator : "group people by gender", "group people by nationality", "group activity by type", ...
|
||||
|
||||
formatters
|
||||
The formatters format the data into a :class:`Symfony\Component\HttpFoundation\Response`, which will be returned "as is" by the controller to the web client.
|
||||
Formatters
|
||||
The formatters format the data into a :class:`Symfony\Component\HttpFoundation\Response`, which will be returned "as is" by the controller to the web client.
|
||||
|
||||
Example of formatter: "format data as CSV", "format data as ods spreadsheet", ...
|
||||
Example of a formatter: "format data as CSV", "format data as an ods spreadsheet", ...
|
||||
|
||||
Anatomy of an export
|
||||
---------------------
|
||||
|
||||
An export may be explained as a sentence, where each part of this sentence refers to one or multiple exports element. Examples :
|
||||
An export can be thought of as a sentence where each part of this sentence refers to one or multiple export elements. Examples :
|
||||
|
||||
**Example 1**: Count the number of people having at least one activity in the last 12 month, and group them by nationality and gender, and format them in a CSV spreadsheet.
|
||||
|
||||
Here :
|
||||
Here :
|
||||
|
||||
- *count the number of people* is the export part
|
||||
- *having at least one activity* is the filter part
|
||||
@ -72,10 +72,10 @@ Here :
|
||||
|
||||
Note that :
|
||||
|
||||
- aggregators, filters, exports and aggregators are cross-bundle. Here the bundle *activity* provides a filter which apply on an export provided by the person bundle ;
|
||||
- there may exists multiple aggregator or filter for one export. Currently, only one export is allowed.
|
||||
- Aggregators, filters, exports and formatters are cross-bundle. Here the bundle *activity* provides a filter which is applied on an export provided by the person bundle ;
|
||||
- Multiple aggregator or filter for one export may exist. Currently, only one export is allowed.
|
||||
|
||||
The result might be :
|
||||
The result might be :
|
||||
|
||||
+-----------------------+----------------+---------------------------+
|
||||
| Nationality | Gender | Number of people |
|
||||
@ -89,9 +89,9 @@ The result might be :
|
||||
| France | Female | 150 |
|
||||
+-----------------------+----------------+---------------------------+
|
||||
|
||||
**Example 2**: Count the average duration of an activity with type "meeting", which occurs between the 1st of June and the 31st of December, group them by week, and format the data in a OpenDocument spreadsheet.
|
||||
**Example 2**: Count the average duration of an activity with type "meeting", which occurs between the 1st of June and the 31st of December, group them by week, and format the data in an OpenDocument spreadsheet.
|
||||
|
||||
Here :
|
||||
Here :
|
||||
|
||||
- *count the average duration of an activity* is the export part
|
||||
- *activity with type meeting* is a filter part
|
||||
@ -102,7 +102,7 @@ Here :
|
||||
The result might be :
|
||||
|
||||
+-----------------------+----------------------+
|
||||
| Week | Number of activities |
|
||||
| Week | Number of activities |
|
||||
+=======================+======================+
|
||||
| 2015-10 | 10 |
|
||||
+-----------------------+----------------------+
|
||||
@ -116,77 +116,77 @@ The result might be :
|
||||
Authorization and exports
|
||||
-------------------------
|
||||
|
||||
Exports, filters and aggregators should not make see data the user is not allowed to see.
|
||||
Exports, filters and aggregators should not show data the user is not allowed to see within the application.
|
||||
|
||||
In other words, developers are required to take care of user authorization for each export.
|
||||
|
||||
It should exists a special role that should be granted to users which are allowed to build exports. For more simplicity, this role should apply on center, and should not requires special circles.
|
||||
There should be a specific role that grants permission to users who are allowed to build exports. For more simplicity, this role should apply on a center, and should not require special circles.
|
||||
|
||||
How does the magic works ?
|
||||
How does the magic work ?
|
||||
===========================
|
||||
|
||||
To build an export, we rely on the capacity of the database to execute queries with aggregate (i.e. GROUP BY) and filter (i.e. WHERE) instructions.
|
||||
|
||||
An export is an SQL query which is initiated by an export, and modified by aggregators and filters.
|
||||
|
||||
.. note::
|
||||
.. note::
|
||||
|
||||
**Example**: Count the number of people having at least one activity in the last 12 month, and group them by nationality and gender
|
||||
|
||||
1. The report initiate the query
|
||||
1. The report initiates the query
|
||||
|
||||
.. code-block:: SQL
|
||||
|
||||
SELECT count(people.*) FROM people
|
||||
|
||||
2. The filter add a where and join clause :
|
||||
2. The filter adds a where and join clause :
|
||||
|
||||
.. code-block:: SQL
|
||||
|
||||
SELECT count(people.*) FROM people
|
||||
RIGHT JOIN activity
|
||||
SELECT count(people.*) FROM people
|
||||
RIGHT JOIN activity
|
||||
WHERE activity.date IS BETWEEN now AND 6 month ago
|
||||
|
||||
3. The aggregator "nationality" add a GROUP BY clause and a column in the SELECT statement:
|
||||
3. The aggregator "nationality" adds a GROUP BY clause and a column in the SELECT statement:
|
||||
|
||||
.. code-block:: sql
|
||||
|
||||
SELECT people.nationality, count(people.*) FROM people
|
||||
RIGHT JOIN activity
|
||||
WHERE activity.date IS BETWEEN now AND 6 month ago
|
||||
SELECT people.nationality, count(people.*) FROM people
|
||||
RIGHT JOIN activity
|
||||
WHERE activity.date IS BETWEEN now AND 6 month ago
|
||||
GROUP BY nationality
|
||||
|
||||
4. The aggregator "gender" do the same job as the nationality aggregator : it adds a GROUP BY clause and a column in the SELECT statement :
|
||||
4. The aggregator "gender" does the same job as the nationality aggregator : it adds a GROUP BY clause and a column in the SELECT statement :
|
||||
|
||||
.. code-block:: sql
|
||||
|
||||
SELECT people.nationality, people.gender, count(people.*)
|
||||
FROM people RIGHT JOIN activity
|
||||
WHERE activity.date IS BETWEEN now AND 6 month ago
|
||||
SELECT people.nationality, people.gender, count(people.*)
|
||||
FROM people RIGHT JOIN activity
|
||||
WHERE activity.date IS BETWEEN now AND 6 month ago
|
||||
GROUP BY nationality, gender
|
||||
|
||||
Each filter, aggregator and filter may collect parameters from the user by providing a form. This form is appended to the export form. Here is an example.
|
||||
Each filter, aggregator and filter may collect parameters from the user through a form. This form is appended to the export form. Here is an example.
|
||||
|
||||
.. figure:: /_static/screenshots/development/export_form-fullpage.png
|
||||
|
||||
The screenshot show the export form for ``CountPeople`` (Nombre de personnes). The filter by date of birth is checked (*Filtrer par date de naissance de la personne*), which allow to show a subform, which is provided by the :class:`Chill\PersonBundle\Export\Filter\BirthdateFilter`. The other filter, which are unchecked, does not show the subform.
|
||||
The screenshot shows the export form for ``CountPeople`` (Nombre de personnes). The filter by date of birth is checked (*Filtrer par date de naissance de la personne*), which triggers a subform, which is provided by the :class:`Chill\PersonBundle\Export\Filter\BirthdateFilter`. The other unchecked filter does not show the subform.
|
||||
|
||||
Two aggregators are also checked : by Country of birth (*Aggréger les personnes par pays de naissance*, corresponding class is :class:`Chill\PersonBundle\Export\Aggregator\CountryOfBirthAggregator`, which also open a subform. The aggregator by gender (*Aggréger les personnes par genre*) is also checked, but there is no corresponding subform.
|
||||
Two aggregators are also checked : by Country of birth (*Aggréger les personnes par pays de naissance*, the corresponding class is :class:`Chill\PersonBundle\Export\Aggregator\CountryOfBirthAggregator`, which also triggers a subform. The aggregator by gender (*Aggréger les personnes par genre*) is also checked, but there is no corresponding subform.
|
||||
|
||||
The Export Manager
|
||||
------------------
|
||||
|
||||
The Export manager (:class:`Chill\MainBundle\Export\ExportManager` is the central class which register all exports, aggregators, filters and formatters.
|
||||
The Export manager (:class:`Chill\MainBundle\Export\ExportManager` is the central class which registers all exports, aggregators, filters and formatters.
|
||||
|
||||
The export manager is also responsible for orchestrating the whole export process, producing a :class:`Symfony\FrameworkBundle\HttpFoundation\Request` to each export request.
|
||||
The export manager is also responsible for orchestrating the whole export process, producing a :class:`Symfony\FrameworkBundle\HttpFoundation\Request` for each export request.
|
||||
|
||||
|
||||
The export form step
|
||||
--------------------
|
||||
|
||||
The form step allow to build a form, aggregating different parts of the module.
|
||||
The form step allows you to build a form, combining different parts of the module.
|
||||
|
||||
The building of forms is separated between different subform, which are responsible for rendering their part of the form (aggregators, filters, and export).
|
||||
The building of forms is split into different subforms, where each one is responsible for rendering their part of the form (aggregators, filters, and export).
|
||||
|
||||
.. figure:: /_static/puml/exports/form_steps.png
|
||||
:scale: 40%
|
||||
@ -194,12 +194,12 @@ The building of forms is separated between different subform, which are responsi
|
||||
The formatter form step
|
||||
-----------------------
|
||||
|
||||
The formatter form is processed *after* the user filled the export form. It is built the same way, but receive in parameters the data entered by the user on the previous step (i.e. export form). It may then adapt it accordingly (example: show a list of columns selected in aggregators).
|
||||
The formatter form is processed *after* the user filled the export form. It is built the same way, but receives the data entered by the user on the previous step as parameters (i.e. export form). It may then adapt it accordingly (example: show a list of columns selected in aggregators).
|
||||
|
||||
Processing the export
|
||||
---------------------
|
||||
|
||||
The export process may be explained by this schema :
|
||||
The export process can be explained by this schema :
|
||||
|
||||
.. figure:: /_static/puml/exports/processing_export.png
|
||||
:scale: 40%
|
||||
@ -219,20 +219,20 @@ This is an example of the ``CountPerson`` export :
|
||||
:language: php
|
||||
:linenos:
|
||||
|
||||
* **Line 36**: the ``getType`` function return a string. This string will be used to find the aggregtors and filters which will apply to this export.
|
||||
* **Line 41**: a simple description to help user to understand what your export does.
|
||||
* **Line 36**: the ``getType`` function returns a string. This string will be used to find the aggregtors and filters which will apply to this export.
|
||||
* **Line 41**: a simple description to help users understand what your export does.
|
||||
* **Line 46**: The title of the export. A summary of what your export does.
|
||||
* **Line 51**: The list of roles requires to execute this export.
|
||||
* **Line 51**: The list of roles required to execute this export.
|
||||
* **Line 56**: We initiate the query here...
|
||||
* **Line 59**: We have to filter the query with centers the users checked in the form. We process the $acl variable to get all ``Center`` object in one array
|
||||
* **Line 63**: We create the query, with a query builder.
|
||||
* **Line 74**: We simply returns the result, but take care of hydrating the results as an array.
|
||||
* **Line 103**: return the list of formatters types which are allowed to apply on this filter
|
||||
* **Line 59**: We have to filter the query with centers the users checked in the form. We process the $acl variable to get all ``Center`` objects in one array
|
||||
* **Line 63**: We create the query with a query builder.
|
||||
* **Line 74**: We return the result, but make sure to hydrate the results as an array.
|
||||
* **Line 103**: return the list of formatter types which are allowed to be applied on this filter
|
||||
|
||||
Filters
|
||||
-------
|
||||
|
||||
This is an example of the *filter by birthdate*. This filter ask some information in a form (`buildForm` is not empty), and this form must be validated. To performs this validations, we implement a new Interface: :class:`Chill\MainBundle\Export\ExportElementValidatedInterface`:
|
||||
This is an example of the *filter by birthdate*. This filter asks some information through a form (`buildForm` is not empty), and this form must be validated. To perform this validation, we implement a new Interface: :class:`Chill\MainBundle\Export\ExportElementValidatedInterface`:
|
||||
|
||||
.. literalinclude:: /_static/code/exports/BirthdateFilter.php
|
||||
:language: php
|
||||
|
||||
@ -1,14 +1,23 @@
|
||||
// Configuration
|
||||
/*
|
||||
* This shared file is used in Chill sass sheets and Vue sass styles to use some bootstrap/chill variables.
|
||||
* Search on @import 'ChillMainAssets/module/bootstrap/shared';
|
||||
*/
|
||||
|
||||
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
/*
|
||||
* Replaced by CHILL variables
|
||||
* it is necessary to keep the possibility of making a diff with original !
|
||||
* original: "bootstrap/scss/variables";
|
||||
*/
|
||||
// 2. Include any default variable overrides here
|
||||
@import "custom/_variables";
|
||||
|
||||
// 3. Include remainder of required Bootstrap stylesheets
|
||||
@import "bootstrap/scss/variables";
|
||||
|
||||
// 4. Include any default map overrides here
|
||||
@import "custom/_maps";
|
||||
|
||||
// 5. Include remainder of required parts
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
@import "bootstrap/scss/root";
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,18 +1,8 @@
|
||||
/*!
|
||||
* Bootstrap v5.0.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*
|
||||
* Enable / disable bootstrap assets
|
||||
*/
|
||||
|
||||
// Bootstrap configuration files are shared with chill entrypoint
|
||||
// Some Bootstrap variables and configuration files are shared with chill entrypoint
|
||||
@import "shared";
|
||||
|
||||
// scss-docs-start import-stack
|
||||
// Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
// 6. Optionally include any other parts as needed
|
||||
@import "bootstrap/scss/utilities";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@ -42,14 +32,11 @@
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
|
||||
// Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
// 7. Optionally include utilities API last to generate classes based on the Sass map in
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
// scss-docs-end import-stack
|
||||
|
||||
// CHILL custom
|
||||
// 8. Add additional custom code here
|
||||
@import "custom";
|
||||
@import "custom/_debug";
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
//// CHILL OVERRIDE DEFAULT BOOTSTRAP COLORS MAP
|
||||
|
||||
// 'beige' variations
|
||||
$beige-100: tint-color($beige, 80%);
|
||||
$beige-200: tint-color($beige, 60%);
|
||||
$beige-300: tint-color($beige, 40%);
|
||||
$beige-400: tint-color($beige, 20%);
|
||||
$beige-500: $beige;
|
||||
$beige-600: shade-color($beige, 20%);
|
||||
$beige-700: shade-color($beige, 40%);
|
||||
$beige-800: shade-color($beige, 60%);
|
||||
$beige-900: shade-color($beige, 80%);
|
||||
|
||||
$chill-blue: $blue;
|
||||
$chill-green: $green;
|
||||
$chill-green-dark: $green-600;
|
||||
$chill-orange: $orange;
|
||||
$chill-yellow: $yellow;
|
||||
$chill-red: $red;
|
||||
$chill-beige: $beige;
|
||||
$chill-pink: $pink;
|
||||
$chill-dark-gray: $gray-800;
|
||||
$chill-gray: $gray-600;
|
||||
$chill-l-gray: $gray-400;
|
||||
$chill-ll-gray: $gray-300;
|
||||
$chill-light-gray: $gray-200;
|
||||
$chill-llight-gray: $gray-100;
|
||||
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"green": $green,
|
||||
"green-dark": $green-600,
|
||||
"yellow": $yellow,
|
||||
"orange": $orange,
|
||||
"red": $red,
|
||||
"pink": $pink,
|
||||
"beige": $beige,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"dark": $gray-800,
|
||||
"black": $black
|
||||
);
|
||||
|
||||
$chill-colors: (
|
||||
"chill-blue": $chill-blue,
|
||||
"chill-green": $chill-green,
|
||||
"chill-green-dark": $chill-green-dark,
|
||||
"chill-orange": $chill-orange,
|
||||
"chill-yellow": $chill-yellow,
|
||||
"chill-red": $chill-red,
|
||||
"chill-beige": $chill-beige,
|
||||
"chill-pink": $chill-pink,
|
||||
"chill-dark-gray": $chill-dark-gray,
|
||||
"chill-gray": $chill-gray,
|
||||
"chill-l-gray": $chill-l-gray,
|
||||
"chill-ll-gray": $chill-ll-gray,
|
||||
"chill-light-gray": $chill-light-gray,
|
||||
"chill-llight-gray": $chill-llight-gray,
|
||||
);
|
||||
|
||||
// Merge the maps
|
||||
$theme-colors: map-merge($theme-colors, $chill-colors);
|
||||
|
||||
// Chill color classes
|
||||
@each $color, $value in $chill-colors {
|
||||
.#{$color} {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,190 +0,0 @@
|
||||
/*
|
||||
* NOTE 2021.04
|
||||
* scss/chill.scss is the main sass file for the new chill.2
|
||||
* scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
|
||||
*/
|
||||
|
||||
// YOUR CUSTOM SCSS
|
||||
@import 'custom/config/colors';
|
||||
@import 'custom/config/variables';
|
||||
@import 'custom/fonts';
|
||||
@import 'custom/timeline';
|
||||
@import 'custom/mixins/entity';
|
||||
@import 'custom/report';
|
||||
@import 'custom/person';
|
||||
@import 'custom/pagination';
|
||||
@import 'custom/custom-fields';
|
||||
@import 'custom/address';
|
||||
@import 'custom/record_actions';
|
||||
@import 'custom/flash_messages';
|
||||
@import 'custom/box';
|
||||
|
||||
|
||||
html,body {
|
||||
min-height:100%;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content_conainter {
|
||||
position: relative;
|
||||
min-height: calc(100% - 145px);
|
||||
}
|
||||
|
||||
#content_conainter:before {
|
||||
bottom: 0;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
//background-image: url('./../../img/background/desert.jpg');
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* CUSTOM FIELDS -> */
|
||||
.cf-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.cf-subtitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
/* <- CUSTOM FIELDS */
|
||||
|
||||
@each $len in 11, 15 {
|
||||
ul.submenu.width-#{$len}-em {
|
||||
min-width: #{$len}em;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.select2 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.custom_fields.choice li {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.errors {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.footer {
|
||||
p {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// inline time input
|
||||
.time_compound {
|
||||
input[type=text], select {
|
||||
width: 4em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.open_sansbold {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT CLASS -> */
|
||||
div.input_with_post_text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.input_with_post_text span.post_text {
|
||||
flex: 1;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
div.input_with_post_text input {
|
||||
width: 70%;
|
||||
display: inline-block;
|
||||
flex: 2;
|
||||
}
|
||||
/* <- INPUT CLASS */
|
||||
|
||||
dl.chill_report_view_data,
|
||||
dl.chill_view_data {
|
||||
|
||||
dt {
|
||||
margin-top: 1.5em;
|
||||
color: $chill-blue;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding-left: 1.5em;
|
||||
margin-top: 0.2em;
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
blockquote.chill-user-quote,
|
||||
div.chill-user-quote {
|
||||
border-left: 10px solid $chill-yellow;
|
||||
margin: 1.5em 10px;
|
||||
padding: 0.5em 10px;
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
background-color: $chill-llight-gray;
|
||||
|
||||
blockquote {
|
||||
margin: 1.5em 10px;
|
||||
padding: 0.5em 10px;
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
color: #ccc;
|
||||
content: open-quote;
|
||||
font-size: 4em;
|
||||
line-height: 0.1em;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: -0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.chill-no-data-statement {
|
||||
font-style: italic;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
// Buttons
|
||||
$button-font-size : 15px !default;
|
||||
$button-text-color : #000 !default;
|
||||
$button-text-weight : 300 !default;
|
||||
$button-padding : 8px 12px !default;
|
||||
$button-background : #eee !default;
|
||||
$button-margin : 5px !default;
|
||||
@ -1,64 +0,0 @@
|
||||
// BODY
|
||||
$body-background : #fff !default;
|
||||
|
||||
// PLAIN TEXT
|
||||
$text-color : #555 !default;
|
||||
|
||||
// HEADINGS
|
||||
$headings-color : #404040 !default;
|
||||
|
||||
// LINKS
|
||||
$link-color : #6998C9 !default;
|
||||
$link-visited-color : #808080 !default;
|
||||
$link-active-color : shade(red,5%) !default;
|
||||
$link-hover-color : #007ED5 !default;
|
||||
$link-focus-color : $link-color !default;
|
||||
|
||||
$white : #fff !default;
|
||||
$black : #000 !default;
|
||||
$orange : #FF622C !default;
|
||||
$red : #C83D3D !default;
|
||||
$green : #27806f !default;
|
||||
$blue : #2980b9 !default;
|
||||
$yellow : #FFC82C !default;
|
||||
|
||||
$light-blue : #4995C7;
|
||||
$llight-blue : #72B0D9;
|
||||
$dark-blue : #096EB0 !default;
|
||||
$ddark-blue : #07507F !default;
|
||||
|
||||
$light-green : #419484 !default;
|
||||
$llight-green : #6CB3A5 !default;
|
||||
|
||||
$warning-bg : $orange !default;
|
||||
$caution-bg : $red !default;
|
||||
$error-bg : $red !default;
|
||||
$success-bg : $green !default;
|
||||
$info-bg : $blue !default;
|
||||
|
||||
$grey-95 : lighten($black, 5%) !default;
|
||||
$grey-90 : lighten($black, 10%) !default;
|
||||
$grey-85 : lighten($black, 15%) !default;
|
||||
$grey-80 : lighten($black, 20%) !default;
|
||||
$grey-75 : lighten($black, 25%) !default;
|
||||
$grey-70 : lighten($black, 30%) !default;
|
||||
$grey-65 : lighten($black, 35%) !default;
|
||||
$grey-60 : lighten($black, 40%) !default;
|
||||
$grey-55 : lighten($black, 45%) !default;
|
||||
$grey-50 : lighten($black, 50%) !default;
|
||||
$grey-45 : lighten($black, 55%) !default;
|
||||
$grey-40 : lighten($black, 60%) !default;
|
||||
$grey-35 : lighten($black, 65%) !default;
|
||||
$grey-30 : lighten($black, 70%) !default;
|
||||
$grey-25 : lighten($black, 75%) !default;
|
||||
$grey-20 : lighten($black, 80%) !default;
|
||||
$grey-15 : lighten($black, 85%) !default;
|
||||
$grey-10 : lighten($black, 90%) !default;
|
||||
$grey-5 : lighten($black, 95%) !default;
|
||||
|
||||
|
||||
$dark-grey: $grey-80; //#333;
|
||||
$medium-grey: $grey-50; //#999;
|
||||
$light-grey: $grey-20; //#DDD;
|
||||
|
||||
@import "../custom/config/colors";
|
||||
@ -1,115 +0,0 @@
|
||||
// Typography
|
||||
//$sans-serif: $helvetica;
|
||||
//$serif: $georgia;
|
||||
//$base-font-family: $sans-serif;
|
||||
//$header-font-family: $base-font-family;
|
||||
|
||||
// Font Sizes
|
||||
$base-font-size: 1em;
|
||||
$h1-font-size: $base-font-size * 2.25;
|
||||
$h2-font-size: $base-font-size * 2;
|
||||
$h3-font-size: $base-font-size * 1.75;
|
||||
$h4-font-size: $base-font-size * 1.5;
|
||||
$h5-font-size: $base-font-size * 1.25;
|
||||
$h6-font-size: $base-font-size;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$header-line-height: 1.25;
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 3px;
|
||||
$base-spacing: $base-line-height * 1em;
|
||||
$base-z-index: 0;
|
||||
|
||||
// Background Color
|
||||
$base-background-color: white;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $dark-grey;
|
||||
$base-accent-color: $blue;
|
||||
|
||||
// Link Colors
|
||||
$base-link-color: $base-accent-color;
|
||||
$hover-link-color: darken($base-accent-color, 15);
|
||||
$base-button-color: $base-link-color;
|
||||
$hover-button-color: $hover-link-color;
|
||||
|
||||
/*
|
||||
// Flash Colors
|
||||
$alert-color: $light-yellow;
|
||||
$error-color: $light-red;
|
||||
$notice-color: lighten($base-accent-color, 40);
|
||||
$success-color: $light-green;
|
||||
*/
|
||||
|
||||
// Border color
|
||||
$base-border-color: $light-grey;
|
||||
$base-border: 1px solid $base-border-color;
|
||||
|
||||
// Footer
|
||||
$footer-background: $grey-50;//-blue;// desaturate(darken($base-accent-color, 20), 30);
|
||||
$footer-color: white;
|
||||
$footer-link-color: transparentize($footer-color, .6);
|
||||
$footer-disclaimer-color: transparentize($footer-color, .6);
|
||||
$footer-vertical-padding: 0;
|
||||
|
||||
// Forms
|
||||
$form-border-size: 1px;
|
||||
$form-border-color: $base-border-color;
|
||||
$form-border-color-hover: darken($base-border-color, 10);
|
||||
$form-border-color-focus: $base-accent-color;
|
||||
$form-border-radius: $base-border-radius;
|
||||
$form-box-shadow: inset 0 1px 3px rgba(black,0.06);
|
||||
$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
|
||||
$form-font-size: $base-font-size;
|
||||
//$form-font-family: $base-font-family;
|
||||
|
||||
// Navigation
|
||||
$navigation-background: $dark-grey;
|
||||
$navigation-color: transparentize(white, 0.3);
|
||||
$navigation-color-hover: white;
|
||||
$navigation-height: 60px;
|
||||
$navigation-active-link-color: transparentize(white, 0.5);
|
||||
$navigation-submenu-padding: 1em;
|
||||
$navigation-submenu-width: 12em;
|
||||
$navigation-border-radius: $base-border-radius;
|
||||
$navigation-first-padding-top: 1em;
|
||||
$navigation-last-padding-bottom: 0.7em;
|
||||
$navigation-more-pin: '\25BE';
|
||||
$navigation-more-pin-color: $navigation-color;
|
||||
$navigation-ul-submenu-top: 1.5em;
|
||||
$navigation-ul-submenu-padding-left: 0;
|
||||
$navigation-search-padding: .85em .6em;
|
||||
$navigation-border-bottom: 1px solid darken($navigation-background, 10);
|
||||
|
||||
//Table
|
||||
$table-width: 100%;
|
||||
|
||||
$table-head-bg-color: $orange;
|
||||
$table-head-td-border: unset;
|
||||
$table-head-td-text-align: center;
|
||||
$table-head-td-padding: 0.3em;
|
||||
$table-head-text-color: $white;
|
||||
|
||||
$table-body-tr-bg-color-even: $grey-5;
|
||||
$table-body-tr-bg-color-odd: unset;
|
||||
$table-body-td-border: unset;
|
||||
$table-body-td-text-align: left;
|
||||
$table-body-td-padding: 0.3em;
|
||||
$table-body-text-color: unset;
|
||||
|
||||
//Tabs
|
||||
$tabs-nav-margin-bottom: none;
|
||||
$tabs-nav-title-bg-color: $blue;
|
||||
$tabs-nav-title-text-color: $white;
|
||||
$tabs-nav-title-padding: 0.5em 0.5em 0.5em 1em;
|
||||
$tabs-nav-bg-color: none;
|
||||
$tabs-nav-text-color: inherit;
|
||||
$tabs-new-border: 3px solid transparent;
|
||||
$tabs-nav-hover-border: 3px solid $orange;
|
||||
$tabs-nav-hover-text-color: inherit;
|
||||
$tabs-nav-font-family: unset;
|
||||
$tabs-nav-padding: 0.5em 0.5em 0.5em 1.5em;
|
||||
|
||||
@import "../custom/config/variables";
|
||||
@ -1,411 +0,0 @@
|
||||
// The following features have been deprecated and will be removed in the next MAJOR version release
|
||||
|
||||
@mixin inline-block {
|
||||
display: inline-block;
|
||||
|
||||
@warn "The inline-block mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == color {
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == string and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: #4294f0;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == color {
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == color and type-of($base-color) == number {
|
||||
$padding: $text-size;
|
||||
$text-size: $base-color;
|
||||
$base-color: $style;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == inherit {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
@if type-of($style) == number {
|
||||
$padding: $base-color;
|
||||
$text-size: $style;
|
||||
$base-color: #4294f0;
|
||||
$style: simple;
|
||||
|
||||
@if $padding == #4294f0 {
|
||||
$padding: 7px 18px;
|
||||
}
|
||||
|
||||
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@warn "The button mixin is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Selector Style Button
|
||||
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
||||
// Grayscale button
|
||||
@if $type == simple and $b-color == grayscale($b-color) {
|
||||
@include simple($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == shiny and $b-color == grayscale($b-color) {
|
||||
@include shiny($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == pill and $b-color == grayscale($b-color) {
|
||||
@include pill($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
@if $type == flat and $b-color == grayscale($b-color) {
|
||||
@include flat($b-color, true, $t-size, $pad);
|
||||
}
|
||||
|
||||
// Colored button
|
||||
@if $type == simple {
|
||||
@include simple($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == shiny {
|
||||
@include shiny($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == pill {
|
||||
@include pill($b-color, false, $t-size, $pad);
|
||||
}
|
||||
|
||||
@else if $type == flat {
|
||||
@include flat($b-color, false, $t-size, $pad);
|
||||
}
|
||||
}
|
||||
|
||||
// Simple Button
|
||||
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-active: grayscale($border-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
border: 1px solid $border-active;
|
||||
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Shiny Button
|
||||
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border: grayscale($border);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$fourth-stop: grayscale($fourth-stop);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$second-stop: grayscale($second-stop);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
$third-stop: grayscale($third-stop);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||
|
||||
border: 1px solid $border;
|
||||
border-bottom: 1px solid $border-bottom;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||
|
||||
@if $grayscale == true {
|
||||
$first-stop-hover: grayscale($first-stop-hover);
|
||||
$second-stop-hover: grayscale($second-stop-hover);
|
||||
$third-stop-hover: grayscale($third-stop-hover);
|
||||
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient(top, $first-stop-hover 0%,
|
||||
$second-stop-hover 50%,
|
||||
$third-stop-hover 50%,
|
||||
$fourth-stop-hover 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||
|
||||
@if $grayscale == true {
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
}
|
||||
|
||||
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Pill Button
|
||||
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||
}
|
||||
|
||||
@if $grayscale == true {
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow: grayscale($inset-shadow);
|
||||
$stop-gradient: grayscale($stop-gradient);
|
||||
$text-shadow: grayscale($text-shadow);
|
||||
}
|
||||
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
@include linear-gradient ($base-color, $stop-gradient);
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $text-shadow;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
$border-bottom: grayscale($border-bottom);
|
||||
$border-sides: grayscale($border-sides);
|
||||
$border-top: grayscale($border-top);
|
||||
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||
}
|
||||
|
||||
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $border-top;
|
||||
border-color: $border-top $border-sides $border-bottom;
|
||||
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$active-color: grayscale($active-color);
|
||||
$border-active: grayscale($border-active);
|
||||
$border-bottom-active: grayscale($border-bottom-active);
|
||||
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||
$text-shadow-active: grayscale($text-shadow-active);
|
||||
}
|
||||
|
||||
background: $active-color;
|
||||
border: 1px solid $border-active;
|
||||
border-bottom: 1px solid $border-bottom-active;
|
||||
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
||||
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Flat Button
|
||||
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||
$color: hsl(0, 0, 100%);
|
||||
|
||||
@if is-light($base-color) {
|
||||
$color: hsl(0, 0, 20%);
|
||||
}
|
||||
|
||||
background-color: $base-color;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
color: $color;
|
||||
display: inline-block;
|
||||
font-size: $textsize;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:hover:not(:disabled){
|
||||
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-hover: grayscale($base-color-hover);
|
||||
}
|
||||
|
||||
background-color: $base-color-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||
|
||||
@if $grayscale == true {
|
||||
$base-color-active: grayscale($base-color-active);
|
||||
}
|
||||
|
||||
background-color: $base-color-active;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Flexible grid
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($width / $container-width);
|
||||
|
||||
@warn "The flex-grid function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
// Flexible gutter
|
||||
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
@return percentage($gutter / $container-width);
|
||||
|
||||
@warn "The flex-gutter function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function grid-width($n) {
|
||||
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||
|
||||
@warn "The grid-width function is deprecated and will be removed in the next major version release";
|
||||
}
|
||||
|
||||
@function golden-ratio($value, $increment) {
|
||||
@return modular-scale($increment, $value, $ratio: $golden);
|
||||
|
||||
@warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
|
||||
}
|
||||
|
||||
@mixin box-sizing($box) {
|
||||
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||
|
||||
@warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed.";
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
// Bourbon 4.2.6
|
||||
// http://bourbon.io
|
||||
// Copyright 2011-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "settings/prefixer";
|
||||
@import "settings/px-to-em";
|
||||
@import "settings/asset-pipeline";
|
||||
|
||||
@import "functions/assign-inputs";
|
||||
@import "functions/contains";
|
||||
@import "functions/contains-falsy";
|
||||
@import "functions/is-length";
|
||||
@import "functions/is-light";
|
||||
@import "functions/is-number";
|
||||
@import "functions/is-size";
|
||||
@import "functions/px-to-em";
|
||||
@import "functions/px-to-rem";
|
||||
@import "functions/shade";
|
||||
@import "functions/strip-units";
|
||||
@import "functions/tint";
|
||||
@import "functions/transition-property-name";
|
||||
@import "functions/unpack";
|
||||
@import "functions/modular-scale";
|
||||
|
||||
@import "helpers/convert-units";
|
||||
@import "helpers/directional-values";
|
||||
@import "helpers/font-source-declaration";
|
||||
@import "helpers/gradient-positions-parser";
|
||||
@import "helpers/linear-angle-parser";
|
||||
@import "helpers/linear-gradient-parser";
|
||||
@import "helpers/linear-positions-parser";
|
||||
@import "helpers/linear-side-corner-parser";
|
||||
@import "helpers/radial-arg-parser";
|
||||
@import "helpers/radial-positions-parser";
|
||||
@import "helpers/radial-gradient-parser";
|
||||
@import "helpers/render-gradients";
|
||||
@import "helpers/shape-size-stripper";
|
||||
@import "helpers/str-to-num";
|
||||
|
||||
@import "css3/animation";
|
||||
@import "css3/appearance";
|
||||
@import "css3/backface-visibility";
|
||||
@import "css3/background";
|
||||
@import "css3/background-image";
|
||||
@import "css3/border-image";
|
||||
@import "css3/calc";
|
||||
@import "css3/columns";
|
||||
@import "css3/filter";
|
||||
@import "css3/flex-box";
|
||||
@import "css3/font-face";
|
||||
@import "css3/font-feature-settings";
|
||||
@import "css3/hidpi-media-query";
|
||||
@import "css3/hyphens";
|
||||
@import "css3/image-rendering";
|
||||
@import "css3/keyframes";
|
||||
@import "css3/linear-gradient";
|
||||
@import "css3/perspective";
|
||||
@import "css3/placeholder";
|
||||
@import "css3/radial-gradient";
|
||||
@import "css3/selection";
|
||||
@import "css3/text-decoration";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
@import "css3/user-select";
|
||||
|
||||
@import "addons/border-color";
|
||||
@import "addons/border-radius";
|
||||
@import "addons/border-style";
|
||||
@import "addons/border-width";
|
||||
@import "addons/buttons";
|
||||
@import "addons/clearfix";
|
||||
@import "addons/ellipsis";
|
||||
@import "addons/font-stacks";
|
||||
@import "addons/hide-text";
|
||||
@import "addons/margin";
|
||||
@import "addons/padding";
|
||||
@import "addons/position";
|
||||
@import "addons/prefixer";
|
||||
@import "addons/retina-image";
|
||||
@import "addons/size";
|
||||
@import "addons/text-inputs";
|
||||
@import "addons/timing-functions";
|
||||
@import "addons/triangle";
|
||||
@import "addons/word-wrap";
|
||||
|
||||
@import "bourbon-deprecated-upcoming";
|
||||
@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-left-color: #e8ae1a;
|
||||
/// border-right-color: #76cd9c;
|
||||
/// border-top-color: #a60b55;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-color`
|
||||
|
||||
@mixin border-color($vals...) {
|
||||
@include directional-property(border, color, $vals...);
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
|
||||
///
|
||||
/// @param {Number} $radii
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element-one {
|
||||
/// @include border-top-radius(5px);
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// @include border-left-radius(3px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element-one {
|
||||
/// border-top-left-radius: 5px;
|
||||
/// border-top-right-radius: 5px;
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// border-bottom-left-radius: 3px;
|
||||
/// border-top-left-radius: 3px;
|
||||
/// }
|
||||
///
|
||||
/// @output `border-radius`
|
||||
|
||||
@mixin border-top-radius($radii) {
|
||||
border-top-left-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
border-bottom-right-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-bottom-right-radius: $radii;
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-top-left-radius: $radii;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-style(dashed null solid);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-style: solid;
|
||||
/// border-top-style: dashed;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-style`
|
||||
|
||||
@mixin border-style($vals...) {
|
||||
@include directional-property(border, style, $vals...);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-width(1em null 20px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-width: 20px;
|
||||
/// border-top-width: 1em;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `border-width`
|
||||
|
||||
@mixin border-width($vals...) {
|
||||
@include directional-property(border, width, $vals...);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-buttons} {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-focus},
|
||||
/// #{$all-buttons-hover} {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-buttons-active} {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// button,
|
||||
/// input[type="button"],
|
||||
/// input[type="reset"],
|
||||
/// input[type="submit"] {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// button:focus,
|
||||
/// input[type="button"]:focus,
|
||||
/// input[type="reset"]:focus,
|
||||
/// input[type="submit"]:focus,
|
||||
/// button:hover,
|
||||
/// input[type="button"]:hover,
|
||||
/// input[type="reset"]:hover,
|
||||
/// input[type="submit"]:hover {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// button:active,
|
||||
/// input[type="button"]:active,
|
||||
/// input[type="reset"]:active,
|
||||
/// input[type="submit"]:active {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
///
|
||||
/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
|
||||
|
||||
$buttons-list: 'button',
|
||||
'input[type="button"]',
|
||||
'input[type="reset"]',
|
||||
'input[type="submit"]';
|
||||
|
||||
$all-buttons: assign-inputs($buttons-list);
|
||||
$all-buttons-active: assign-inputs($buttons-list, active);
|
||||
$all-buttons-focus: assign-inputs($buttons-list, focus);
|
||||
$all-buttons-hover: assign-inputs($buttons-list, hover);
|
||||
|
||||
$all-button-inputs: $all-buttons;
|
||||
$all-button-inputs-active: $all-buttons-active;
|
||||
$all-button-inputs-focus: $all-buttons-focus;
|
||||
$all-button-inputs-hover: $all-buttons-hover;
|
||||
@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to include a clearfix for containing floats.
|
||||
///
|
||||
/// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include clearfix;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::after {
|
||||
/// clear: both;
|
||||
/// content: "";
|
||||
/// display: table;
|
||||
/// }
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Truncates text and adds an ellipsis to represent overflow.
|
||||
///
|
||||
/// @param {Number} $width [100%]
|
||||
/// Max-width for the string to respect before being truncated
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include ellipsis;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// display: inline-block;
|
||||
/// max-width: 100%;
|
||||
/// overflow: hidden;
|
||||
/// text-overflow: ellipsis;
|
||||
/// white-space: nowrap;
|
||||
/// word-wrap: normal;
|
||||
/// }
|
||||
|
||||
@mixin ellipsis($width: 100%) {
|
||||
display: inline-block;
|
||||
max-width: $width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Georgia font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
|
||||
|
||||
/// Helvetica font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
|
||||
|
||||
/// Lucida Grande font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
|
||||
|
||||
/// Monospace font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
|
||||
|
||||
/// Verdana font stack.
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$verdana: "Verdana", "Geneva", sans-serif;
|
||||
@ -1,27 +0,0 @@
|
||||
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
|
||||
///
|
||||
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include hide-text;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// overflow: hidden;
|
||||
/// text-indent: 101%;
|
||||
/// white-space: nowrap;
|
||||
/// }
|
||||
///
|
||||
/// @todo Remove height argument in v5.0.0
|
||||
|
||||
@mixin hide-text($height: null) {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
|
||||
@if $height {
|
||||
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include margin(null 10px 3em 20vh);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin-bottom: 3em;
|
||||
/// margin-left: 20vh;
|
||||
/// margin-right: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `margin`
|
||||
|
||||
@mixin margin($vals...) {
|
||||
@include directional-property(margin, false, $vals...);
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Arglist} $vals
|
||||
/// List of arguments
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include padding(12vh null 10px 5%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// padding-bottom: 10px;
|
||||
/// padding-left: 5%;
|
||||
/// padding-top: 12vh;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} directional-property
|
||||
///
|
||||
/// @output `padding`
|
||||
|
||||
@mixin padding($vals...) {
|
||||
@include directional-property(padding, false, $vals...);
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @param {Position} $position [relative]
|
||||
/// A CSS position value
|
||||
///
|
||||
/// @param {Arglist} $coordinates [null null null null]
|
||||
/// List of values that correspond to the 4-value syntax for the edges of a box
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include position(absolute, 0 null null 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// left: 10em;
|
||||
/// position: absolute;
|
||||
/// top: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} is-length
|
||||
/// @require {function} unpack
|
||||
|
||||
@mixin position($position: relative, $coordinates: null null null null) {
|
||||
@if type-of($position) == list {
|
||||
$coordinates: $position;
|
||||
$position: relative;
|
||||
}
|
||||
|
||||
$coordinates: unpack($coordinates);
|
||||
|
||||
$offsets: (
|
||||
top: nth($coordinates, 1),
|
||||
right: nth($coordinates, 2),
|
||||
bottom: nth($coordinates, 3),
|
||||
left: nth($coordinates, 4)
|
||||
);
|
||||
|
||||
position: $position;
|
||||
|
||||
@each $offset, $value in $offsets {
|
||||
@if is-length($value) {
|
||||
#{$offset}: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A mixin for generating vendor prefixes on non-standardized properties.
|
||||
///
|
||||
/// @param {String} $property
|
||||
/// Property to prefix
|
||||
///
|
||||
/// @param {*} $value
|
||||
/// Value to use
|
||||
///
|
||||
/// @param {List} $prefixes
|
||||
/// Prefixes to define
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include prefixer(border-radius, 10px, webkit ms spec);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// -webkit-border-radius: 10px;
|
||||
/// -moz-border-radius: 10px;
|
||||
/// border-radius: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {variable} $prefix-for-webkit
|
||||
/// @require {variable} $prefix-for-mozilla
|
||||
/// @require {variable} $prefix-for-microsoft
|
||||
/// @require {variable} $prefix-for-opera
|
||||
/// @require {variable} $prefix-for-spec
|
||||
|
||||
@mixin prefixer($property, $value, $prefixes) {
|
||||
@each $prefix in $prefixes {
|
||||
@if $prefix == webkit {
|
||||
@if $prefix-for-webkit {
|
||||
-webkit-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == moz {
|
||||
@if $prefix-for-mozilla {
|
||||
-moz-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == ms {
|
||||
@if $prefix-for-microsoft {
|
||||
-ms-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == o {
|
||||
@if $prefix-for-opera {
|
||||
-o-#{$property}: $value;
|
||||
}
|
||||
} @else if $prefix == spec {
|
||||
@if $prefix-for-spec {
|
||||
#{$property}: $value;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unrecognized prefix: #{$prefix}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disable-prefix-for-all() {
|
||||
$prefix-for-webkit: false !global;
|
||||
$prefix-for-mozilla: false !global;
|
||||
$prefix-for-microsoft: false !global;
|
||||
$prefix-for-opera: false !global;
|
||||
$prefix-for-spec: false !global;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
|
||||
@if $asset-pipeline {
|
||||
background-image: image-url("#{$filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}.#{$extension}");
|
||||
}
|
||||
|
||||
@include hidpi {
|
||||
@if $asset-pipeline {
|
||||
@if $retina-filename {
|
||||
background-image: image-url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
} @else {
|
||||
@if $retina-filename {
|
||||
background-image: url("#{$retina-filename}.#{$extension}");
|
||||
} @else {
|
||||
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||
}
|
||||
}
|
||||
|
||||
background-size: $background-size;
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Sets the `width` and `height` of the element.
|
||||
///
|
||||
/// @param {List} $size
|
||||
/// A list of at most 2 size values.
|
||||
///
|
||||
/// If there is only a single value in `$size` it is used for both width and height. All units are supported.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .first-element {
|
||||
/// @include size(2em);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// @include size(auto 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .first-element {
|
||||
/// width: 2em;
|
||||
/// height: 2em;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// width: auto;
|
||||
/// height: 10em;
|
||||
/// }
|
||||
///
|
||||
/// @todo Refactor in 5.0.0 to use a comma-separated argument
|
||||
|
||||
@mixin size($value) {
|
||||
$width: nth($value, 1);
|
||||
$height: $width;
|
||||
|
||||
@if length($value) > 1 {
|
||||
$height: nth($value, 2);
|
||||
}
|
||||
|
||||
@if is-size($height) {
|
||||
height: $height;
|
||||
} @else {
|
||||
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
|
||||
}
|
||||
|
||||
@if is-size($width) {
|
||||
width: $width;
|
||||
} @else {
|
||||
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// #{$all-text-inputs} {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-focus},
|
||||
/// #{$all-text-inputs-hover} {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// #{$all-text-inputs-active} {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// input[type="color"],
|
||||
/// input[type="date"],
|
||||
/// input[type="datetime"],
|
||||
/// input[type="datetime-local"],
|
||||
/// input[type="email"],
|
||||
/// input[type="month"],
|
||||
/// input[type="number"],
|
||||
/// input[type="password"],
|
||||
/// input[type="search"],
|
||||
/// input[type="tel"],
|
||||
/// input[type="text"],
|
||||
/// input[type="time"],
|
||||
/// input[type="url"],
|
||||
/// input[type="week"],
|
||||
/// textarea {
|
||||
/// border: 1px solid #f00;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:focus,
|
||||
/// input[type="date"]:focus,
|
||||
/// input[type="datetime"]:focus,
|
||||
/// input[type="datetime-local"]:focus,
|
||||
/// input[type="email"]:focus,
|
||||
/// input[type="month"]:focus,
|
||||
/// input[type="number"]:focus,
|
||||
/// input[type="password"]:focus,
|
||||
/// input[type="search"]:focus,
|
||||
/// input[type="tel"]:focus,
|
||||
/// input[type="text"]:focus,
|
||||
/// input[type="time"]:focus,
|
||||
/// input[type="url"]:focus,
|
||||
/// input[type="week"]:focus,
|
||||
/// textarea:focus,
|
||||
/// input[type="color"]:hover,
|
||||
/// input[type="date"]:hover,
|
||||
/// input[type="datetime"]:hover,
|
||||
/// input[type="datetime-local"]:hover,
|
||||
/// input[type="email"]:hover,
|
||||
/// input[type="month"]:hover,
|
||||
/// input[type="number"]:hover,
|
||||
/// input[type="password"]:hover,
|
||||
/// input[type="search"]:hover,
|
||||
/// input[type="tel"]:hover,
|
||||
/// input[type="text"]:hover,
|
||||
/// input[type="time"]:hover,
|
||||
/// input[type="url"]:hover,
|
||||
/// input[type="week"]:hover,
|
||||
/// textarea:hover {
|
||||
/// border: 1px solid #0f0;
|
||||
/// }
|
||||
///
|
||||
/// input[type="color"]:active,
|
||||
/// input[type="date"]:active,
|
||||
/// input[type="datetime"]:active,
|
||||
/// input[type="datetime-local"]:active,
|
||||
/// input[type="email"]:active,
|
||||
/// input[type="month"]:active,
|
||||
/// input[type="number"]:active,
|
||||
/// input[type="password"]:active,
|
||||
/// input[type="search"]:active,
|
||||
/// input[type="tel"]:active,
|
||||
/// input[type="text"]:active,
|
||||
/// input[type="time"]:active,
|
||||
/// input[type="url"]:active,
|
||||
/// input[type="week"]:active,
|
||||
/// textarea:active {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @require assign-inputs
|
||||
///
|
||||
/// @type List
|
||||
|
||||
$text-inputs-list: 'input[type="color"]',
|
||||
'input[type="date"]',
|
||||
'input[type="datetime"]',
|
||||
'input[type="datetime-local"]',
|
||||
'input[type="email"]',
|
||||
'input[type="month"]',
|
||||
'input[type="number"]',
|
||||
'input[type="password"]',
|
||||
'input[type="search"]',
|
||||
'input[type="tel"]',
|
||||
'input[type="text"]',
|
||||
'input[type="time"]',
|
||||
'input[type="url"]',
|
||||
'input[type="week"]',
|
||||
'input:not([type])',
|
||||
'textarea';
|
||||
|
||||
$all-text-inputs: assign-inputs($text-inputs-list);
|
||||
$all-text-inputs-active: assign-inputs($text-inputs-list, active);
|
||||
$all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
|
||||
$all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
|
||||
@ -1,34 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
||||
///
|
||||
/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
|
||||
///
|
||||
/// @type cubic-bezier
|
||||
|
||||
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
|
||||
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
|
||||
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
@ -1,63 +0,0 @@
|
||||
@mixin triangle($size, $color, $direction) {
|
||||
$width: nth($size, 1);
|
||||
$height: nth($size, length($size));
|
||||
$foreground-color: nth($color, 1);
|
||||
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
||||
$width: $width / 2;
|
||||
$height: if(length($size) > 1, $height, $height/2);
|
||||
|
||||
@if $direction == up {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
} @else if $direction == right {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-left: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
} @else if $direction == down {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-top: $height solid $foreground-color;
|
||||
} @else if $direction == left {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-right: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == up-right) or ($direction == up-left) {
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
@if $direction == up-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == up-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == down-right) or ($direction == down-left) {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
@if $direction == down-right {
|
||||
border-left: $width solid $background-color;
|
||||
} @else if $direction == down-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
} @else if ($direction == inset-up) {
|
||||
border-color: $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-down) {
|
||||
border-color: $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
} @else if ($direction == inset-right) {
|
||||
border-color: $background-color $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
} @else if ($direction == inset-left) {
|
||||
border-color: $background-color $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to change the `word-wrap` property.
|
||||
///
|
||||
/// @param {String} $wrap [break-word]
|
||||
/// Value for the `word-break` property.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .wrapper {
|
||||
/// @include word-wrap(break-word);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .wrapper {
|
||||
/// overflow-wrap: break-word;
|
||||
/// word-break: break-all;
|
||||
/// word-wrap: break-word;
|
||||
/// }
|
||||
|
||||
@mixin word-wrap($wrap: break-word) {
|
||||
overflow-wrap: $wrap;
|
||||
word-wrap: $wrap;
|
||||
|
||||
@if $wrap == break-word {
|
||||
word-break: break-all;
|
||||
} @else {
|
||||
word-break: $wrap;
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
||||
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
||||
|
||||
@mixin animation($animations...) {
|
||||
@include prefixer(animation, $animations, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-name($names...) {
|
||||
@include prefixer(animation-name, $names, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-duration($times...) {
|
||||
@include prefixer(animation-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out
|
||||
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-iteration-count($values...) {
|
||||
// infinite | <number>
|
||||
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-direction($directions...) {
|
||||
// normal | alternate
|
||||
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-play-state($states...) {
|
||||
// running | paused
|
||||
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-delay($times...) {
|
||||
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin animation-fill-mode($modes...) {
|
||||
// none | forwards | backwards | both
|
||||
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@mixin appearance($value) {
|
||||
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@mixin backface-visibility($visibility) {
|
||||
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Background-image property for adding multiple background images with
|
||||
// gradients, or for stringing multiple gradients together.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background-image($images...) {
|
||||
$webkit-images: ();
|
||||
$spec-images: ();
|
||||
|
||||
@each $image in $images {
|
||||
$webkit-image: ();
|
||||
$spec-image: ();
|
||||
|
||||
@if (type-of($image) == string) {
|
||||
$url-str: str-slice($image, 1, 3);
|
||||
$gradient-type: str-slice($image, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-image: $image;
|
||||
$spec-image: $image;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser($image);
|
||||
$webkit-image: map-get($gradients, webkit-image);
|
||||
$spec-image: map-get($gradients, spec-image);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||||
$spec-images: append($spec-images, $spec-image, comma);
|
||||
}
|
||||
|
||||
background-image: $webkit-images;
|
||||
background-image: $spec-images;
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Background property for adding multiple backgrounds using shorthand
|
||||
// notation.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background($backgrounds...) {
|
||||
$webkit-backgrounds: ();
|
||||
$spec-backgrounds: ();
|
||||
|
||||
@each $background in $backgrounds {
|
||||
$webkit-background: ();
|
||||
$spec-background: ();
|
||||
$background-type: type-of($background);
|
||||
|
||||
@if $background-type == string or $background-type == list {
|
||||
$background-str: if($background-type == list, nth($background, 1), $background);
|
||||
|
||||
$url-str: str-slice($background-str, 1, 3);
|
||||
$gradient-type: str-slice($background-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$background}");
|
||||
$webkit-background: map-get($gradients, webkit-image);
|
||||
$spec-background: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-background: $background;
|
||||
$spec-background: $background;
|
||||
}
|
||||
|
||||
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||||
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||||
}
|
||||
|
||||
background: $webkit-backgrounds;
|
||||
background: $spec-backgrounds;
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
@mixin border-image($borders...) {
|
||||
$webkit-borders: ();
|
||||
$spec-borders: ();
|
||||
|
||||
@each $border in $borders {
|
||||
$webkit-border: ();
|
||||
$spec-border: ();
|
||||
$border-type: type-of($border);
|
||||
|
||||
@if $border-type == string or list {
|
||||
$border-str: if($border-type == list, nth($border, 1), $border);
|
||||
|
||||
$url-str: str-slice($border-str, 1, 3);
|
||||
$gradient-type: str-slice($border-str, 1, 6);
|
||||
|
||||
@if $url-str == "url" {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
@else if $gradient-type == "linear" {
|
||||
$gradients: _linear-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else if $gradient-type == "radial" {
|
||||
$gradients: _radial-gradient-parser("#{$border}");
|
||||
$webkit-border: map-get($gradients, webkit-image);
|
||||
$spec-border: map-get($gradients, spec-image);
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$webkit-border: $border;
|
||||
$spec-border: $border;
|
||||
}
|
||||
|
||||
$webkit-borders: append($webkit-borders, $webkit-border, comma);
|
||||
$spec-borders: append($spec-borders, $spec-border, comma);
|
||||
}
|
||||
|
||||
-webkit-border-image: $webkit-borders;
|
||||
border-image: $spec-borders;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
// @include border-image(url("image.png"));
|
||||
// @include border-image(url("image.png") 20 stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||
@ -1,4 +0,0 @@
|
||||
@mixin calc($property, $value) {
|
||||
#{$property}: -webkit-calc(#{$value});
|
||||
#{$property}: calc(#{$value});
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@mixin columns($arg: auto) {
|
||||
// <column-count> || <column-width>
|
||||
@include prefixer(columns, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-count($int: auto) {
|
||||
// auto || integer
|
||||
@include prefixer(column-count, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-gap($length: normal) {
|
||||
// normal || length
|
||||
@include prefixer(column-gap, $length, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-fill($arg: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-fill, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule($arg) {
|
||||
// <border-width> || <border-style> || <color>
|
||||
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-style($style: none) {
|
||||
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-width ($width: none) {
|
||||
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-span($arg: none) {
|
||||
// none || all
|
||||
@include prefixer(column-span, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-width($length: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-width, $length, webkit moz spec);
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
@mixin filter($function: none) {
|
||||
// <filter-function> [<filter-function]* | none
|
||||
@include prefixer(filter, $function, webkit spec);
|
||||
}
|
||||
@ -1,287 +0,0 @@
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
|
||||
// Custom shorthand notation for flexbox
|
||||
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||
@include display-box;
|
||||
@include box-orient($orient);
|
||||
@include box-pack($pack);
|
||||
@include box-align($align);
|
||||
}
|
||||
|
||||
@mixin display-box {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox; // IE 10
|
||||
display: box;
|
||||
}
|
||||
|
||||
@mixin box-orient($orient: inline-axis) {
|
||||
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-pack($pack: start) {
|
||||
// start|end|center|justify
|
||||
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||
-ms-flex-pack: $pack; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-align($align: stretch) {
|
||||
// start|end|center|baseline|stretch
|
||||
@include prefixer(box-align, $align, webkit moz spec);
|
||||
-ms-flex-align: $align; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-direction($direction: normal) {
|
||||
// normal|reverse|inherit
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
-ms-flex-direction: $direction; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-lines($lines: single) {
|
||||
// single|multiple
|
||||
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-ordinal-group($int: 1) {
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
-ms-flex-order: $int; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex($value: 0) {
|
||||
@include prefixer(box-flex, $value, webkit moz spec);
|
||||
-ms-flex: $value; // IE 10
|
||||
}
|
||||
|
||||
@mixin box-flex-group($int: 1) {
|
||||
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
// CSS3 Flexible Box Model and property defaults
|
||||
// Unified attributes for 2009, 2011, and 2012 flavours.
|
||||
|
||||
// 2009 - display (box | inline-box)
|
||||
// 2011 - display (flexbox | inline-flexbox)
|
||||
// 2012 - display (flex | inline-flex)
|
||||
@mixin display($value) {
|
||||
// flex | inline-flex
|
||||
@if $value == "flex" {
|
||||
// 2009
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
|
||||
// 2012
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox; // 2011 (IE 10)
|
||||
display: flex;
|
||||
} @else if $value == "inline-flex" {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: inline-box;
|
||||
|
||||
display: -webkit-inline-flex;
|
||||
display: -moz-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
} @else {
|
||||
display: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// 2009 - box-flex (integer)
|
||||
// 2011 - flex (decimal | width decimal)
|
||||
// 2012 - flex (integer integer width)
|
||||
@mixin flex($value) {
|
||||
|
||||
// Grab flex-grow for older browsers.
|
||||
$flex-grow: nth($value, 1);
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10), 2012
|
||||
@include prefixer(flex, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
|
||||
// - box-direction (normal | reverse)
|
||||
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
|
||||
@mixin flex-direction($value: row) {
|
||||
|
||||
// Alt values.
|
||||
$value-2009: $value;
|
||||
$value-2011: $value;
|
||||
$direction: normal;
|
||||
|
||||
@if $value == row {
|
||||
$value-2009: horizontal;
|
||||
} @else if $value == "row-reverse" {
|
||||
$value-2009: horizontal;
|
||||
$direction: reverse;
|
||||
} @else if $value == column {
|
||||
$value-2009: vertical;
|
||||
} @else if $value == "column-reverse" {
|
||||
$value-2009: vertical;
|
||||
$direction: reverse;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-orient, $value-2009, webkit moz spec);
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(flex-direction, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-direction: $value;
|
||||
}
|
||||
|
||||
// 2009 - box-lines (single | multiple)
|
||||
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||
@mixin flex-wrap($value: nowrap) {
|
||||
// Alt values
|
||||
$alt-value: $value;
|
||||
@if $value == nowrap {
|
||||
$alt-value: single;
|
||||
} @else if $value == wrap {
|
||||
$alt-value: multiple;
|
||||
} @else if $value == "wrap-reverse" {
|
||||
$alt-value: multiple;
|
||||
}
|
||||
|
||||
@include prefixer(box-lines, $alt-value, webkit moz spec);
|
||||
@include prefixer(flex-wrap, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// 2009 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2011 - TODO: parse values into flex-direction/flex-wrap
|
||||
// 2012 - flex-flow (flex-direction || flex-wrap)
|
||||
@mixin flex-flow($value) {
|
||||
@include prefixer(flex-flow, $value, webkit moz spec);
|
||||
}
|
||||
|
||||
// 2009 - box-ordinal-group (integer)
|
||||
// 2011 - flex-order (integer)
|
||||
// 2012 - order (integer)
|
||||
@mixin order($int: 0) {
|
||||
// 2009
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(order, $int, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-order: $int;
|
||||
}
|
||||
|
||||
// 2012 - flex-grow (number)
|
||||
@mixin flex-grow($number: 0) {
|
||||
@include prefixer(flex-grow, $number, webkit moz spec);
|
||||
-ms-flex-positive: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-shrink (number)
|
||||
@mixin flex-shrink($number: 1) {
|
||||
@include prefixer(flex-shrink, $number, webkit moz spec);
|
||||
-ms-flex-negative: $number;
|
||||
}
|
||||
|
||||
// 2012 - flex-basis (number)
|
||||
@mixin flex-basis($width: auto) {
|
||||
@include prefixer(flex-basis, $width, webkit moz spec);
|
||||
-ms-flex-preferred-size: $width;
|
||||
}
|
||||
|
||||
// 2009 - box-pack (start | end | center | justify)
|
||||
// 2011 - flex-pack (start | end | center | justify)
|
||||
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
|
||||
@mixin justify-content($value: flex-start) {
|
||||
|
||||
// Alt values.
|
||||
$alt-value: $value;
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
} @else if $value == "space-between" {
|
||||
$alt-value: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$alt-value: distribute;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-pack, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(justify-content, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-pack: $alt-value;
|
||||
}
|
||||
|
||||
// 2009 - box-align (start | end | center | baseline | stretch)
|
||||
// 2011 - flex-align (start | end | center | baseline | stretch)
|
||||
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-items($value: stretch) {
|
||||
|
||||
$alt-value: $value;
|
||||
|
||||
@if $value == "flex-start" {
|
||||
$alt-value: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$alt-value: end;
|
||||
}
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-align, $alt-value, webkit moz spec);
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-items, $value, webkit moz ms o spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-align: $alt-value;
|
||||
}
|
||||
|
||||
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
|
||||
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
|
||||
@mixin align-self($value: auto) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-self, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-item-align: $value-2011;
|
||||
}
|
||||
|
||||
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
|
||||
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
|
||||
@mixin align-content($value: stretch) {
|
||||
|
||||
$value-2011: $value;
|
||||
@if $value == "flex-start" {
|
||||
$value-2011: start;
|
||||
} @else if $value == "flex-end" {
|
||||
$value-2011: end;
|
||||
} @else if $value == "space-between" {
|
||||
$value-2011: justify;
|
||||
} @else if $value == "space-around" {
|
||||
$value-2011: distribute;
|
||||
}
|
||||
|
||||
// 2012
|
||||
@include prefixer(align-content, $value, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10)
|
||||
-ms-flex-line-pack: $value-2011;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
@mixin font-face(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$weight: normal,
|
||||
$style: normal,
|
||||
$asset-pipeline: $asset-pipeline,
|
||||
$file-formats: eot woff2 woff ttf svg) {
|
||||
|
||||
$font-url-prefix: font-url-prefixer($asset-pipeline);
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
|
||||
src: font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats,
|
||||
$font-url-prefix
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
@mixin font-feature-settings($settings...) {
|
||||
@if length($settings) == 0 { $settings: none; }
|
||||
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
||||
@mixin hidpi($ratio: 1.3) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
||||
only screen and (min--moz-device-pixel-ratio: $ratio),
|
||||
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
|
||||
only screen and (min-resolution: round($ratio * 96dpi)),
|
||||
only screen and (min-resolution: $ratio * 1dppx) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
@mixin hyphens($hyphenation: none) {
|
||||
// none | manual | auto
|
||||
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
@mixin image-rendering ($mode:auto) {
|
||||
|
||||
@if ($mode == crisp-edges) {
|
||||
-ms-interpolation-mode: nearest-neighbor; // IE8+
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
@else {
|
||||
image-rendering: $mode;
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
|
||||
@mixin keyframes($name) {
|
||||
$original-prefix-for-webkit: $prefix-for-webkit;
|
||||
$original-prefix-for-mozilla: $prefix-for-mozilla;
|
||||
$original-prefix-for-microsoft: $prefix-for-microsoft;
|
||||
$original-prefix-for-opera: $prefix-for-opera;
|
||||
$original-prefix-for-spec: $prefix-for-spec;
|
||||
|
||||
@if $original-prefix-for-webkit {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-webkit: true !global;
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if $original-prefix-for-mozilla {
|
||||
@include disable-prefix-for-all();
|
||||
$prefix-for-mozilla: true !global;
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
||||
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
||||
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
||||
$prefix-for-opera: $original-prefix-for-opera !global;
|
||||
$prefix-for-spec: $original-prefix-for-spec !global;
|
||||
|
||||
@if $original-prefix-for-spec {
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
@mixin linear-gradient($pos, $g1, $g2: null,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$fallback: null) {
|
||||
// Detect what type of value exists in $pos
|
||||
$pos-type: type-of(nth($pos, 1));
|
||||
$pos-spec: null;
|
||||
$pos-degree: null;
|
||||
|
||||
// If $pos is missing from mixin, reassign vars and add default position
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
||||
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
|
||||
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
|
||||
$pos: null;
|
||||
}
|
||||
|
||||
@if $pos {
|
||||
$positions: _linear-positions-parser($pos);
|
||||
$pos-degree: nth($positions, 1);
|
||||
$pos-spec: nth($positions, 2);
|
||||
}
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$fallback-color: nth($g1, 1);
|
||||
|
||||
// If $fallback is a color use that color as the fallback color
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@mixin perspective($depth: none) {
|
||||
// none | <length>
|
||||
@include prefixer(perspective, $depth, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin perspective-origin($value: 50% 50%) {
|
||||
@include prefixer(perspective-origin, $value, webkit moz spec);
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
// Requires Sass 3.1+
|
||||
@mixin radial-gradient($g1, $g2,
|
||||
$g3: null, $g4: null,
|
||||
$g5: null, $g6: null,
|
||||
$g7: null, $g8: null,
|
||||
$g9: null, $g10: null,
|
||||
$pos: null,
|
||||
$shape-size: null,
|
||||
$fallback: null) {
|
||||
|
||||
$data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
|
||||
$g1: nth($data, 1);
|
||||
$g2: nth($data, 2);
|
||||
$pos: nth($data, 3);
|
||||
$shape-size: nth($data, 4);
|
||||
|
||||
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
|
||||
|
||||
// Strip deprecated cover/contain for spec
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
// Set $g1 as the default fallback color
|
||||
$first-color: nth($full, 1);
|
||||
$fallback-color: nth($first-color, 1);
|
||||
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
// Add Commas and spaces
|
||||
$shape-size: if($shape-size, "#{$shape-size}, ", null);
|
||||
$pos: if($pos, "#{$pos}, ", null);
|
||||
$pos-spec: if($pos, "at #{$pos}", null);
|
||||
$shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
|
||||
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Outputs the spec and prefixed versions of the `::selection` pseudo-element.
|
||||
///
|
||||
/// @param {Bool} $current-selector [false]
|
||||
/// If set to `true`, it takes the current element into consideration.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include selection(true) {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element::-moz-selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
///
|
||||
/// .element::selection {
|
||||
/// background-color: #ffbb52;
|
||||
/// }
|
||||
|
||||
@mixin selection($current-selector: false) {
|
||||
@if $current-selector {
|
||||
&::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
@mixin text-decoration($value) {
|
||||
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
|
||||
@include prefixer(text-decoration, $value, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-line($line: none) {
|
||||
// none || underline || overline || line-through
|
||||
@include prefixer(text-decoration-line, $line, moz);
|
||||
}
|
||||
|
||||
@mixin text-decoration-style($style: solid) {
|
||||
// solid || double || dotted || dashed || wavy
|
||||
@include prefixer(text-decoration-style, $style, moz webkit);
|
||||
}
|
||||
|
||||
@mixin text-decoration-color($color: currentColor) {
|
||||
// currentColor || <color>
|
||||
@include prefixer(text-decoration-color, $color, moz);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
@mixin transform($property: none) {
|
||||
// none | <transform-function>
|
||||
@include prefixer(transform, $property, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-origin($axes: 50%) {
|
||||
// x-axis - left | center | right | length | %
|
||||
// y-axis - top | center | bottom | length | %
|
||||
// z-axis - length
|
||||
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-style($style: flat) {
|
||||
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||
// Example: @include transition (all 2s ease-in-out);
|
||||
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
|
||||
// @include transition-property (transform, opacity);
|
||||
|
||||
@mixin transition($properties...) {
|
||||
// Fix for vendor-prefix transform property
|
||||
$needs-prefixes: false;
|
||||
$webkit: ();
|
||||
$moz: ();
|
||||
$spec: ();
|
||||
|
||||
// Create lists for vendor-prefixed transform
|
||||
@each $list in $properties {
|
||||
@if nth($list, 1) == "transform" {
|
||||
$needs-prefixes: true;
|
||||
$list1: -webkit-transform;
|
||||
$list2: -moz-transform;
|
||||
$list3: ();
|
||||
|
||||
@each $var in $list {
|
||||
$list3: join($list3, $var);
|
||||
|
||||
@if $var != "transform" {
|
||||
$list1: join($list1, $var);
|
||||
$list2: join($list2, $var);
|
||||
}
|
||||
}
|
||||
|
||||
$webkit: append($webkit, $list1);
|
||||
$moz: append($moz, $list2);
|
||||
$spec: append($spec, $list3);
|
||||
} @else {
|
||||
$webkit: append($webkit, $list, comma);
|
||||
$moz: append($moz, $list, comma);
|
||||
$spec: append($spec, $list, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@if $needs-prefixes {
|
||||
-webkit-transition: $webkit;
|
||||
-moz-transition: $moz;
|
||||
transition: $spec;
|
||||
} @else {
|
||||
@if length($properties) >= 1 {
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
} @else {
|
||||
$properties: all 0.15s ease-out 0s;
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-property($properties...) {
|
||||
-webkit-transition-property: transition-property-names($properties, "webkit");
|
||||
-moz-transition-property: transition-property-names($properties, "moz");
|
||||
transition-property: transition-property-names($properties, false);
|
||||
}
|
||||
|
||||
@mixin transition-duration($times...) {
|
||||
@include prefixer(transition-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-timing-function($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
||||
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-delay($times...) {
|
||||
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@mixin user-select($value: none) {
|
||||
@include prefixer(user-select, $value, webkit moz ms spec);
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
@function assign-inputs($inputs, $pseudo: null) {
|
||||
$list: ();
|
||||
|
||||
@each $input in $inputs {
|
||||
$input: unquote($input);
|
||||
$input: if($pseudo, $input + ":" + $pseudo, $input);
|
||||
$list: append($list, $input, comma);
|
||||
}
|
||||
|
||||
@return $list;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list does not contains a value.
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains-falsy($list) {
|
||||
@each $item in $list {
|
||||
@if not $item {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list contains a value(s).
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {List} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @param {List} $values
|
||||
/// A single value or list of values to check for.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// contains($list, $value)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function contains($list, $values...) {
|
||||
@each $value in $values {
|
||||
@if type-of(index($list, $value)) != "number" {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS length.
|
||||
///
|
||||
/// @param {String} $value
|
||||
|
||||
@function is-length($value) {
|
||||
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
|
||||
or index(auto inherit initial 0, $value)
|
||||
or (type-of($value) == "number" and not(unitless($value))));
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Programatically determines whether a color is light or dark.
|
||||
///
|
||||
/// @link http://robots.thoughtbot.com/closer-look-color-lightness
|
||||
///
|
||||
/// @param {Color (Hex)} $color
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// is-light($color)
|
||||
///
|
||||
/// @return {Bool}
|
||||
|
||||
@function is-light($hex-color) {
|
||||
$-local-red: red(rgba($hex-color, 1));
|
||||
$-local-green: green(rgba($hex-color, 1));
|
||||
$-local-blue: blue(rgba($hex-color, 1));
|
||||
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
||||
|
||||
@return $-local-lightness > 0.6;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid number.
|
||||
///
|
||||
/// @param {Number} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
|
||||
@function is-number($value) {
|
||||
@return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS size.
|
||||
///
|
||||
/// @param {String} $value
|
||||
///
|
||||
/// @require {function} contains
|
||||
/// @require {function} is-length
|
||||
|
||||
@function is-size($value) {
|
||||
@return is-length($value)
|
||||
or contains("fill" "fit-content" "min-content" "max-content", $value);
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// Scaling Variables
|
||||
$golden: 1.618;
|
||||
$minor-second: 1.067;
|
||||
$major-second: 1.125;
|
||||
$minor-third: 1.2;
|
||||
$major-third: 1.25;
|
||||
$perfect-fourth: 1.333;
|
||||
$augmented-fourth: 1.414;
|
||||
$perfect-fifth: 1.5;
|
||||
$minor-sixth: 1.6;
|
||||
$major-sixth: 1.667;
|
||||
$minor-seventh: 1.778;
|
||||
$major-seventh: 1.875;
|
||||
$octave: 2;
|
||||
$major-tenth: 2.5;
|
||||
$major-eleventh: 2.667;
|
||||
$major-twelfth: 3;
|
||||
$double-octave: 4;
|
||||
|
||||
$modular-scale-ratio: $perfect-fourth !default;
|
||||
$modular-scale-base: em($em-base) !default;
|
||||
|
||||
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
|
||||
$v1: nth($value, 1);
|
||||
$v2: nth($value, length($value));
|
||||
$value: $v1;
|
||||
|
||||
// scale $v2 to just above $v1
|
||||
@while $v2 > $v1 {
|
||||
$v2: ($v2 / $ratio); // will be off-by-1
|
||||
}
|
||||
@while $v2 < $v1 {
|
||||
$v2: ($v2 * $ratio); // will fix off-by-1
|
||||
}
|
||||
|
||||
// check AFTER scaling $v2 to prevent double-counting corner-case
|
||||
$double-stranded: $v2 > $v1;
|
||||
|
||||
@if $increment > 0 {
|
||||
@for $i from 1 through $increment {
|
||||
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 * $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 * $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 0 {
|
||||
// adjust $v2 to just below $v1
|
||||
@if $double-stranded {
|
||||
$v2: ($v2 / $ratio);
|
||||
}
|
||||
|
||||
@for $i from $increment through -1 {
|
||||
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
||||
$value: $v2;
|
||||
$v2: ($v2 / $ratio);
|
||||
} @else {
|
||||
$v1: ($v1 / $ratio);
|
||||
$value: $v1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// Convert pixels to ems
|
||||
// eg. for a relational value of 12px write em(12) when the parent is 16px
|
||||
// if the parent is another value say 24px write em(12, 24)
|
||||
|
||||
@function em($pxval, $base: $em-base) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1em;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
// Convert pixels to rems
|
||||
// eg. for a relational value of 12px write rem(12)
|
||||
// Assumes $em-base is the font-size of <html>
|
||||
|
||||
@function rem($pxval) {
|
||||
@if not unitless($pxval) {
|
||||
$pxval: strip-units($pxval);
|
||||
}
|
||||
|
||||
$base: $em-base;
|
||||
@if not unitless($base) {
|
||||
$base: strip-units($base);
|
||||
}
|
||||
@return ($pxval / $base) * 1rem;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with black.
|
||||
///
|
||||
/// @param {Color} $color
|
||||
///
|
||||
/// @param {Number (Percentage)} $percent
|
||||
/// The amount of black to be mixed in.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// background-color: shade(#ffbb52, 60%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// background-color: #664a20;
|
||||
/// }
|
||||
///
|
||||
/// @return {Color}
|
||||
|
||||
@function shade($color, $percent) {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Strips the unit from a number.
|
||||
///
|
||||
/// @param {Number (With Unit)} $value
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// $dimension: strip-units(10em);
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// $dimension: 10;
|
||||
///
|
||||
/// @return {Number (Unitless)}
|
||||
|
||||
@function strip-units($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with white.
|
||||
///
|
||||
/// @param {Color} $color
|
||||
///
|
||||
/// @param {Number (Percentage)} $percent
|
||||
/// The amount of white to be mixed in.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// background-color: tint(#6ecaa6, 40%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// background-color: #a8dfc9;
|
||||
/// }
|
||||
///
|
||||
/// @return {Color}
|
||||
|
||||
@function tint($color, $percent) {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
// Return vendor-prefixed property names if appropriate
|
||||
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
|
||||
//************************************************************************//
|
||||
@function transition-property-names($props, $vendor: false) {
|
||||
$new-props: ();
|
||||
|
||||
@each $prop in $props {
|
||||
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
|
||||
}
|
||||
|
||||
@return $new-props;
|
||||
}
|
||||
|
||||
@function transition-property-name($prop, $vendor: false) {
|
||||
// put other properties that need to be prefixed here aswell
|
||||
@if $vendor and $prop == transform {
|
||||
@return unquote('-'+$vendor+'-'+$prop);
|
||||
}
|
||||
@else {
|
||||
@return $prop;
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Converts shorthand to the 4-value syntax.
|
||||
///
|
||||
/// @param {List} $shorthand
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// margin: unpack(1em 2em);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin: 1em 2em 1em 2em;
|
||||
/// }
|
||||
|
||||
@function unpack($shorthand) {
|
||||
@if length($shorthand) == 1 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
|
||||
} @else if length($shorthand) == 2 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
|
||||
} @else if length($shorthand) == 3 {
|
||||
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
|
||||
} @else {
|
||||
@return $shorthand;
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Helper function for str-to-num fn.
|
||||
// Source: http://sassmeister.com/gist/9647408
|
||||
//************************************************************************//
|
||||
@function _convert-units($number, $unit) {
|
||||
$strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn";
|
||||
$units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn;
|
||||
$index: index($strings, $unit);
|
||||
|
||||
@if not $index {
|
||||
@warn "Unknown unit `#{$unit}`.";
|
||||
@return false;
|
||||
}
|
||||
|
||||
@if type-of($number) != "number" {
|
||||
@warn "`#{$number} is not a number`";
|
||||
@return false;
|
||||
}
|
||||
|
||||
@return $number * nth($units, $index);
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Directional-property mixins are shorthands for writing properties like the following
|
||||
///
|
||||
/// @ignore You can also use `false` instead of `null`.
|
||||
///
|
||||
/// @param {List} $vals
|
||||
/// List of directional values
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include border-style(dotted null);
|
||||
/// @include margin(null 0 10px);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// border-bottom-style: dotted;
|
||||
/// border-top-style: dotted;
|
||||
/// margin-bottom: 10px;
|
||||
/// margin-left: 0;
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} contains-falsy
|
||||
///
|
||||
/// @return {List}
|
||||
|
||||
@function collapse-directionals($vals) {
|
||||
$output: null;
|
||||
|
||||
$a: nth($vals, 1);
|
||||
$b: if(length($vals) < 2, $a, nth($vals, 2));
|
||||
$c: if(length($vals) < 3, $a, nth($vals, 3));
|
||||
$d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));
|
||||
|
||||
@if $a == 0 { $a: 0; }
|
||||
@if $b == 0 { $b: 0; }
|
||||
@if $c == 0 { $c: 0; }
|
||||
@if $d == 0 { $d: 0; }
|
||||
|
||||
@if $a == $b and $a == $c and $a == $d { $output: $a; }
|
||||
@else if $a == $c and $b == $d { $output: $a $b; }
|
||||
@else if $b == $d { $output: $a $b $c; }
|
||||
@else { $output: $a $b $c $d; }
|
||||
|
||||
@return $output;
|
||||
}
|
||||
|
||||
/// Output directional properties, for instance `margin`.
|
||||
///
|
||||
/// @access private
|
||||
///
|
||||
/// @param {String} $pre
|
||||
/// Prefix to use
|
||||
/// @param {String} $suf
|
||||
/// Suffix to use
|
||||
/// @param {List} $vals
|
||||
/// List of values
|
||||
///
|
||||
/// @require {function} collapse-directionals
|
||||
/// @require {function} contains-falsy
|
||||
|
||||
@mixin directional-property($pre, $suf, $vals) {
|
||||
// Property Names
|
||||
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
|
||||
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
|
||||
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
|
||||
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
||||
$all: $pre + if($suf, "-#{$suf}", "");
|
||||
|
||||
$vals: collapse-directionals($vals);
|
||||
|
||||
@if contains-falsy($vals) {
|
||||
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
|
||||
|
||||
@if length($vals) == 1 {
|
||||
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
|
||||
} @else {
|
||||
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
|
||||
}
|
||||
|
||||
@if length($vals) == 2 {
|
||||
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
} @else if length($vals) == 3 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||||
} @else if length($vals) == 4 {
|
||||
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||||
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
|
||||
}
|
||||
} @else {
|
||||
#{$all}: $vals;
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
// Used for creating the source string for fonts using @font-face
|
||||
// Reference: http://goo.gl/Ru1bKP
|
||||
|
||||
@function font-url-prefixer($asset-pipeline) {
|
||||
@if $asset-pipeline == true {
|
||||
@return font-url;
|
||||
} @else {
|
||||
@return url;
|
||||
}
|
||||
}
|
||||
|
||||
@function font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats,
|
||||
$font-url) {
|
||||
|
||||
$src: ();
|
||||
|
||||
$formats-map: (
|
||||
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
|
||||
woff2: "#{$file-path}.woff2" format("woff2"),
|
||||
woff: "#{$file-path}.woff" format("woff"),
|
||||
ttf: "#{$file-path}.ttf" format("truetype"),
|
||||
svg: "#{$file-path}.svg##{$font-family}" format("svg")
|
||||
);
|
||||
|
||||
@each $key, $values in $formats-map {
|
||||
@if contains($file-formats, $key) {
|
||||
$file-path: nth($values, 1);
|
||||
$font-format: nth($values, 2);
|
||||
|
||||
@if $asset-pipeline == true {
|
||||
$src: append($src, font-url($file-path) $font-format, comma);
|
||||
} @else {
|
||||
$src: append($src, url($file-path) $font-format, comma);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $src;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
|
||||
@if $gradient-positions
|
||||
and ($gradient-type == linear)
|
||||
and (type-of($gradient-positions) != color) {
|
||||
$gradient-positions: _linear-positions-parser($gradient-positions);
|
||||
}
|
||||
@else if $gradient-positions
|
||||
and ($gradient-type == radial)
|
||||
and (type-of($gradient-positions) != color) {
|
||||
$gradient-positions: _radial-positions-parser($gradient-positions);
|
||||
}
|
||||
@return $gradient-positions;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
// Private function for linear-gradient-parser
|
||||
@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
|
||||
$offset: null;
|
||||
$unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
|
||||
$unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
|
||||
|
||||
@if ($unit-long == "grad") or
|
||||
($unit-long == "turn") {
|
||||
$offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
|
||||
}
|
||||
|
||||
@else if ($unit-short == "deg") or
|
||||
($unit-short == "rad") {
|
||||
$offset: if($unit-short == "deg", -90 * 3, 1.6rad);
|
||||
}
|
||||
|
||||
@if $offset {
|
||||
$num: _str-to-num($first-val);
|
||||
|
||||
@return (
|
||||
webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
@function _linear-gradient-parser($image) {
|
||||
$image: unquote($image);
|
||||
$gradients: ();
|
||||
$start: str-index($image, "(");
|
||||
$end: str-index($image, ",");
|
||||
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||
|
||||
$prefix: str-slice($image, 1, $start);
|
||||
$suffix: str-slice($image, $end, str-length($image));
|
||||
|
||||
$has-multiple-vals: str-index($first-val, " ");
|
||||
$has-single-position: unquote(_position-flipper($first-val) + "");
|
||||
$has-angle: is-number(str-slice($first-val, 1, 1));
|
||||
|
||||
@if $has-multiple-vals {
|
||||
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
|
||||
}
|
||||
|
||||
@else if $has-single-position != "" {
|
||||
$pos: unquote($has-single-position + "");
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $prefix + "to " + $pos + $suffix
|
||||
);
|
||||
}
|
||||
|
||||
@else if $has-angle {
|
||||
// Rotate degree for webkit
|
||||
$gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
|
||||
}
|
||||
|
||||
@else {
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@return $gradients;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
@function _linear-positions-parser($pos) {
|
||||
$type: type-of(nth($pos, 1));
|
||||
$spec: null;
|
||||
$degree: null;
|
||||
$side: null;
|
||||
$corner: null;
|
||||
$length: length($pos);
|
||||
// Parse Side and corner positions
|
||||
@if ($length > 1) {
|
||||
@if nth($pos, 1) == "to" { // Newer syntax
|
||||
$side: nth($pos, 2);
|
||||
|
||||
@if $length == 2 { // eg. to top
|
||||
// Swap for backwards compatibility
|
||||
$degree: _position-flipper(nth($pos, 2));
|
||||
}
|
||||
@else if $length == 3 { // eg. to top left
|
||||
$corner: nth($pos, 3);
|
||||
}
|
||||
}
|
||||
@else if $length == 2 { // Older syntax ("top left")
|
||||
$side: _position-flipper(nth($pos, 1));
|
||||
$corner: _position-flipper(nth($pos, 2));
|
||||
}
|
||||
|
||||
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
|
||||
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||
}
|
||||
$spec: to $side $corner;
|
||||
}
|
||||
@else if $length == 1 {
|
||||
// Swap for backwards compatibility
|
||||
@if $type == string {
|
||||
$degree: $pos;
|
||||
$spec: to _position-flipper($pos);
|
||||
}
|
||||
@else {
|
||||
$degree: -270 - $pos; //rotate the gradient opposite from spec
|
||||
$spec: $pos;
|
||||
}
|
||||
}
|
||||
$degree: unquote($degree + ",");
|
||||
$spec: unquote($spec + ",");
|
||||
@return $degree $spec;
|
||||
}
|
||||
|
||||
@function _position-flipper($pos) {
|
||||
@return if($pos == left, right, null)
|
||||
if($pos == right, left, null)
|
||||
if($pos == top, bottom, null)
|
||||
if($pos == bottom, top, null);
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
// Private function for linear-gradient-parser
|
||||
@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
|
||||
$val-1: str-slice($first-val, 1, $has-multiple-vals - 1);
|
||||
$val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
|
||||
$val-3: null;
|
||||
$has-val-3: str-index($val-2, " ");
|
||||
|
||||
@if $has-val-3 {
|
||||
$val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
|
||||
$val-2: str-slice($val-2, 1, $has-val-3 - 1);
|
||||
}
|
||||
|
||||
$pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
|
||||
$pos: unquote($pos + "");
|
||||
|
||||
// Use old spec for webkit
|
||||
@if $val-1 == "to" {
|
||||
@return (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
// Bring the code up to spec
|
||||
@else {
|
||||
@return (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $prefix + "to " + $pos + $suffix
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
@function _radial-arg-parser($g1, $g2, $pos, $shape-size) {
|
||||
@each $value in $g1, $g2 {
|
||||
$first-val: nth($value, 1);
|
||||
$pos-type: type-of($first-val);
|
||||
$spec-at-index: null;
|
||||
|
||||
// Determine if spec was passed to mixin
|
||||
@if type-of($value) == list {
|
||||
$spec-at-index: if(index($value, at), index($value, at), false);
|
||||
}
|
||||
@if $spec-at-index {
|
||||
@if $spec-at-index > 1 {
|
||||
@for $i from 1 through ($spec-at-index - 1) {
|
||||
$shape-size: $shape-size nth($value, $i);
|
||||
}
|
||||
@for $i from ($spec-at-index + 1) through length($value) {
|
||||
$pos: $pos nth($value, $i);
|
||||
}
|
||||
}
|
||||
@else if $spec-at-index == 1 {
|
||||
@for $i from ($spec-at-index + 1) through length($value) {
|
||||
$pos: $pos nth($value, $i);
|
||||
}
|
||||
}
|
||||
$g1: null;
|
||||
}
|
||||
|
||||
// If not spec calculate correct values
|
||||
@else {
|
||||
@if ($pos-type != color) or ($first-val != "transparent") {
|
||||
@if ($pos-type == number)
|
||||
or ($first-val == "center")
|
||||
or ($first-val == "top")
|
||||
or ($first-val == "right")
|
||||
or ($first-val == "bottom")
|
||||
or ($first-val == "left") {
|
||||
|
||||
$pos: $value;
|
||||
|
||||
@if $pos == $g1 {
|
||||
$g1: null;
|
||||
}
|
||||
}
|
||||
|
||||
@else if
|
||||
($first-val == "ellipse")
|
||||
or ($first-val == "circle")
|
||||
or ($first-val == "closest-side")
|
||||
or ($first-val == "closest-corner")
|
||||
or ($first-val == "farthest-side")
|
||||
or ($first-val == "farthest-corner")
|
||||
or ($first-val == "contain")
|
||||
or ($first-val == "cover") {
|
||||
|
||||
$shape-size: $value;
|
||||
|
||||
@if $value == $g1 {
|
||||
$g1: null;
|
||||
}
|
||||
|
||||
@else if $value == $g2 {
|
||||
$g2: null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@return $g1, $g2, $pos, $shape-size;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
@function _radial-gradient-parser($image) {
|
||||
$image: unquote($image);
|
||||
$gradients: ();
|
||||
$start: str-index($image, "(");
|
||||
$end: str-index($image, ",");
|
||||
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||
|
||||
$prefix: str-slice($image, 1, $start);
|
||||
$suffix: str-slice($image, $end, str-length($image));
|
||||
|
||||
$is-spec-syntax: str-index($first-val, "at");
|
||||
|
||||
@if $is-spec-syntax and $is-spec-syntax > 1 {
|
||||
$keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
|
||||
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||
$pos: append($pos, $keyword, comma);
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@else if $is-spec-syntax == 1 {
|
||||
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@else if str-index($image, "cover") or str-index($image, "contain") {
|
||||
@warn "Radial-gradient needs to be updated to conform to latest spec.";
|
||||
|
||||
$gradients: (
|
||||
webkit-image: null,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@else {
|
||||
$gradients: (
|
||||
webkit-image: -webkit- + $image,
|
||||
spec-image: $image
|
||||
);
|
||||
}
|
||||
|
||||
@return $gradients;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
@function _radial-positions-parser($gradient-pos) {
|
||||
$shape-size: nth($gradient-pos, 1);
|
||||
$pos: nth($gradient-pos, 2);
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
|
||||
unquote(if($shape-size, "#{$shape-size},", null));
|
||||
$pos-spec: if($pos, "at #{$pos}", null);
|
||||
|
||||
$spec: "#{$shape-size-spec} #{$pos-spec}";
|
||||
|
||||
// Add comma
|
||||
@if ($spec != " ") {
|
||||
$spec: "#{$spec},";
|
||||
}
|
||||
|
||||
@return $pre-spec $spec;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
// User for linear and radial gradients within background-image or border-image properties
|
||||
|
||||
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
|
||||
$pre-spec: null;
|
||||
$spec: null;
|
||||
$vendor-gradients: null;
|
||||
@if $gradient-type == linear {
|
||||
@if $gradient-positions {
|
||||
$pre-spec: nth($gradient-positions, 1);
|
||||
$spec: nth($gradient-positions, 2);
|
||||
}
|
||||
}
|
||||
@else if $gradient-type == radial {
|
||||
$pre-spec: nth($gradient-positions, 1);
|
||||
$spec: nth($gradient-positions, 2);
|
||||
}
|
||||
|
||||
@if $vendor {
|
||||
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
|
||||
}
|
||||
@else if $vendor == false {
|
||||
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
|
||||
$vendor-gradients: unquote($vendor-gradients);
|
||||
}
|
||||
@return $vendor-gradients;
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
@function _shape-size-stripper($shape-size) {
|
||||
$shape-size-spec: null;
|
||||
@each $value in $shape-size {
|
||||
@if ($value == "cover") or ($value == "contain") {
|
||||
$value: null;
|
||||
}
|
||||
$shape-size-spec: "#{$shape-size-spec} #{$value}";
|
||||
}
|
||||
@return $shape-size-spec;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
//************************************************************************//
|
||||
// Helper function for linear/radial-gradient-parsers.
|
||||
// Source: http://sassmeister.com/gist/9647408
|
||||
//************************************************************************//
|
||||
@function _str-to-num($string) {
|
||||
// Matrices
|
||||
$strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
|
||||
$numbers: 0 1 2 3 4 5 6 7 8 9;
|
||||
|
||||
// Result
|
||||
$result: 0;
|
||||
$divider: 0;
|
||||
$minus: false;
|
||||
|
||||
// Looping through all characters
|
||||
@for $i from 1 through str-length($string) {
|
||||
$character: str-slice($string, $i, $i);
|
||||
$index: index($strings, $character);
|
||||
|
||||
@if $character == "-" {
|
||||
$minus: true;
|
||||
}
|
||||
|
||||
@else if $character == "." {
|
||||
$divider: 1;
|
||||
}
|
||||
|
||||
@else {
|
||||
@if not $index {
|
||||
$result: if($minus, $result * -1, $result);
|
||||
@return _convert-units($result, str-slice($string, $i));
|
||||
}
|
||||
|
||||
$number: nth($numbers, $index);
|
||||
|
||||
@if $divider == 0 {
|
||||
$result: $result * 10;
|
||||
}
|
||||
|
||||
@else {
|
||||
// Move the decimal dot to the left
|
||||
$divider: $divider * 10;
|
||||
$number: $number / $divider;
|
||||
}
|
||||
|
||||
$result: $result + $number;
|
||||
}
|
||||
}
|
||||
@return if($minus, $result * -1, $result);
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it.
|
||||
///
|
||||
/// @type Bool
|
||||
|
||||
$asset-pipeline: false !default;
|
||||
@ -1,9 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Global variables to enable or disable vendor prefixes
|
||||
|
||||
$prefix-for-webkit: true !default;
|
||||
$prefix-for-mozilla: true !default;
|
||||
$prefix-for-microsoft: true !default;
|
||||
$prefix-for-opera: true !default;
|
||||
$prefix-for-spec: true !default;
|
||||
@ -1 +0,0 @@
|
||||
$em-base: 16px !default;
|
||||
@ -1,23 +0,0 @@
|
||||
// Import gridle :
|
||||
@import 'gridle/gridle';
|
||||
|
||||
// setup the grid (required) :
|
||||
@include gridle_setup((
|
||||
context : 12,
|
||||
gutter-width : 20px,
|
||||
debug : true
|
||||
));
|
||||
|
||||
// register special columns :
|
||||
@include gridle_register_column("1on5", 1, 5);
|
||||
|
||||
// clear each classes :
|
||||
@include gridle_register_clear_each(2, left);
|
||||
@include gridle_register_clear_each(12, both);
|
||||
|
||||
// register states :
|
||||
@include gridle_register_default_states();
|
||||
@include gridle_register_state(ipad-landscape, (
|
||||
query : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)",
|
||||
gutter-width : 0
|
||||
));
|
||||
@ -1,48 +0,0 @@
|
||||
// Import gridle :
|
||||
@import 'gridle/gridle';
|
||||
|
||||
|
||||
// basic configuration :
|
||||
@include gridle_setup( (
|
||||
context : 12,
|
||||
gutter-width : 30px,
|
||||
html-states-classes : true
|
||||
) );
|
||||
|
||||
// register states :
|
||||
@include gridle_register_default_mobile_first_states();
|
||||
|
||||
/*
|
||||
* Optional :
|
||||
* Change generation class names pattern (for example to match bootstrap naming conventions or generate with your own names) :
|
||||
* Check documentation (http://gridle.org/documentation#name-pattern) for full list
|
||||
*
|
||||
* %- = separator sign (configurable by $gridle-class-separator) (no need to add separators if you doesn't want them)
|
||||
* %state = the state name (mobile, ipad, etc...)
|
||||
* %count = the column count (1, 2, 3, 4, etc...)
|
||||
*/
|
||||
$gridle-grid-name-pattern : ('col','%-','%state','%-','%count');
|
||||
$gridle-parent-name-pattern : ('row','%-','%state');
|
||||
$gridle-prefix-name-pattern : ('col','%-','%state','%-','offset','%-','%count');
|
||||
$gridle-push-name-pattern : ('col','%-','%state','%-','push','%-','%count');
|
||||
$gridle-pull-name-pattern : ('col','%-','%state','%-','pull','%-','%count');
|
||||
$gridle-show-name-pattern : ('visible','%-','%state');
|
||||
$gridle-hide-name-pattern : ('hidden','%-','%state');
|
||||
|
||||
|
||||
/**
|
||||
* Mobile first approach :
|
||||
*/
|
||||
[class*="col-"] {
|
||||
width:100%; // 100% by default
|
||||
}
|
||||
|
||||
|
||||
// Generate classes :
|
||||
@include gridle_generate_classes();
|
||||
|
||||
// Max size :
|
||||
.container {
|
||||
margin:0 auto;
|
||||
max-width:1200px;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
// Import grid settings :
|
||||
@import 'grid-settings';
|
||||
|
||||
// Generate classes :
|
||||
@include gridle_generate_classes();
|
||||
|
||||
// you can generate classes separately if you need :
|
||||
// @include gridle_generate_classes(default); // default is the base state always registered
|
||||
// @include gridle_generate_classes(mobile, (grid, push, pull)) // generate only the grid, push and pull classes for mobile
|
||||
// etc...
|
||||
|
||||
// generate a center custom class for all the states :
|
||||
@include gridle_generate_custom_class( ('center','%-','%state') ) {
|
||||
text-align:center;
|
||||
}
|
||||
// this will produces classes : center, center-mobile, center-tablet, center-ipad-landscape
|
||||
// for separators, you can use the %- (replaced by the $gridle-class-separator option), or -, --, _, __
|
||||
|
||||
// Max size :
|
||||
.container {
|
||||
margin:0 auto;
|
||||
max-width:960px;
|
||||
@include gridle_grid_background();
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Common mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@mixin _gridle_container_common(
|
||||
$state : default
|
||||
) {
|
||||
@extend %gridle-simple-clearfix;
|
||||
@extend %gridle-container-common;
|
||||
// debug part
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
@if ($debug == true) {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-container-debug-common;
|
||||
}
|
||||
}
|
||||
}
|
||||
$_gridle-already-generated : ();
|
||||
@mixin _gridle_grid_common() {
|
||||
@extend %gridle-grid-common;
|
||||
|
||||
// default values
|
||||
$default-gutter-width : _gridle_get_var_value(gutter-width, default);
|
||||
$default-direction : _gridle_get_var_value(direction, default);
|
||||
|
||||
// loop on each states :
|
||||
@each $stateName, $state in $_gridle-states
|
||||
{
|
||||
// selector key to be used in map
|
||||
$key : "#{$stateName} #{&}";
|
||||
|
||||
// check if already generated classes
|
||||
$already-generated : map-has-key($_gridle-already-generated, $key);
|
||||
|
||||
// vars
|
||||
$direction : _gridle_get_var_value(direction, $state);
|
||||
$classes : _gridle_get_var_value(classes, $state);
|
||||
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
|
||||
@if $already-generated != true and $classes and ( ($default-direction != $direction or $default-gutter-width != $gutter-width) or $stateName == default)
|
||||
{
|
||||
// set that we have already generated css for this selector
|
||||
$_gridle-already-generated : map-set($_gridle-already-generated, $key, true) !global;
|
||||
|
||||
// generate the css for this element
|
||||
@include gridle_state($state) {
|
||||
@if $direction != $default-direction or $stateName == default {
|
||||
// content : "#{$key}";
|
||||
@if $direction == rtl {
|
||||
float:right;
|
||||
direction:rtl;
|
||||
} @else {
|
||||
float:left;
|
||||
direction:ltr;
|
||||
}
|
||||
}
|
||||
@if $gutter-width != $default-gutter-width or $stateName == default {
|
||||
padding-left:$gutter-width/2;
|
||||
padding-right:$gutter-width/2;
|
||||
}
|
||||
}
|
||||
|
||||
@if $debug == true {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-grid-debug-common;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _gridle_parent_common() {
|
||||
@extend %gridle-clearfix;
|
||||
@extend %gridle-parent-common;
|
||||
}
|
||||
@mixin _gridle_push_common(
|
||||
$state : default
|
||||
) {
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
|
||||
// extend common :
|
||||
@extend %gridle-push-pull-common;
|
||||
@if $debug == true {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-push-pull-debug-background-common;
|
||||
background-color:#f4efdf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _gridle_pull_common(
|
||||
$state : default
|
||||
) {
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
|
||||
@extend %gridle-push-pull-common;
|
||||
@if $debug == true {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-push-pull-debug-background-common;
|
||||
background-color:#cfe4d5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _gridle_prefix_common(
|
||||
$state : default
|
||||
) {
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
@if $debug == true {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-prefix-debug-common;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _gridle_suffix_common(
|
||||
$state : default
|
||||
) {
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
@if $debug == true {
|
||||
#{$gridle-debug-selector} {
|
||||
@extend %gridle-suffix-debug-common;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Default states
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
// retina
|
||||
@include gridle_register_state("retina", (
|
||||
query : "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)",
|
||||
classes : false
|
||||
) );
|
||||
|
||||
// tv
|
||||
@include gridle_register_state("tv", (
|
||||
query : "only tv",
|
||||
classes : false
|
||||
) );
|
||||
|
||||
// print
|
||||
@include gridle_register_state("print", (
|
||||
query : "only print",
|
||||
classes : false
|
||||
) );
|
||||
|
||||
// portrait
|
||||
@include gridle_register_state("portrait", (
|
||||
query : "only screen and (orientation: portrait)",
|
||||
classes : false
|
||||
) );
|
||||
|
||||
// landscape
|
||||
@include gridle_register_state("landscape", (
|
||||
query : "only screen and (orientation: landscape)",
|
||||
classes : false
|
||||
) );
|
||||
@ -1,387 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Functions
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Str replace
|
||||
*
|
||||
* @param {string} $string String that you want to replace
|
||||
* @param {string} $substr String that is to be replaced by `$newsubstr`
|
||||
* @param {string} $newsubstr String that replaces `$substr`
|
||||
* @param {number*} $all Flag for replaceing all (1+) or not (0)
|
||||
* @return {string}
|
||||
*/
|
||||
@function str-replace($string, $substr, $newsubstr, $all: 0) {
|
||||
$position-found: str-index($string, $substr);
|
||||
$processed: ();
|
||||
|
||||
@while ($position-found and $position-found > 0) {
|
||||
$length-substr: str-length($substr);
|
||||
$processed: append($processed, str-slice($string, 0, $position-found - 1));
|
||||
$processed: append($processed, $newsubstr);
|
||||
$string: str-slice($string, $position-found + $length-substr);
|
||||
|
||||
$position-found: 0;
|
||||
|
||||
@if ($all > 0) {
|
||||
$position-found: str-index($string, $substr);
|
||||
}
|
||||
}
|
||||
|
||||
$processed: append($processed, $string);
|
||||
$string: "";
|
||||
|
||||
@each $s in $processed {
|
||||
$string: #{$string}#{$s};
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map set
|
||||
*
|
||||
* @param Map $map The map to use
|
||||
* @param String $key The key to update
|
||||
* @param Mixed $value The new value
|
||||
* @return Map The new map
|
||||
*/
|
||||
@function map-set($map, $key, $value) {
|
||||
$new: ($key: $value);
|
||||
@return map-merge($map, $new);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the column width in percent for the global or a specific context
|
||||
*
|
||||
* @param int $columns The number of columns to calculate
|
||||
* @param int $context : $gridle-columns-count The context to use
|
||||
* @return percentage The width in percent
|
||||
*/
|
||||
@function gridle_get_column_width(
|
||||
$columns : 1,
|
||||
$stateMap-or-stateName : null
|
||||
) {
|
||||
@return percentage(1 / $context * $columns);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get a state map
|
||||
*
|
||||
* @param string $name The name of the state to get
|
||||
* @return map A state map object
|
||||
*/
|
||||
@function _gridle_get_state(
|
||||
$stateMap-or-stateName
|
||||
) {
|
||||
// check if has a state named like this
|
||||
@if (type-of($stateMap-or-stateName) == string
|
||||
and map-has-key($_gridle_states, unquote("#{$stateMap-or-stateName}")))
|
||||
{
|
||||
@return map-get($_gridle_states, unquote("#{$stateMap-or-stateName}"));
|
||||
}
|
||||
|
||||
// a map is passed, so it's a state himself
|
||||
@if $stateMap-or-stateName
|
||||
and type-of($stateMap-or-stateName) == map
|
||||
{
|
||||
@return map-merge($_gridle-settings, $stateMap-or-stateName);
|
||||
}
|
||||
|
||||
// return the default one if exist
|
||||
@if map-has-key($_gridle_states, default)
|
||||
{
|
||||
@return map-get($_gridle_states, default);
|
||||
}
|
||||
|
||||
// nothing finded, return the default state
|
||||
@return $_gridle-settings;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Check if a state exist :
|
||||
*
|
||||
* @param string $name The name of the state to check
|
||||
* @return Boolean true is exist
|
||||
*/
|
||||
@function _gridle_has_state(
|
||||
$stateName
|
||||
) {
|
||||
@if map-has-key($_gridle_states, unquote("#{$stateName}")) {
|
||||
@return true;
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the media queries variables :
|
||||
*
|
||||
* @param int $index The media query indes
|
||||
* @param String $var The media query variable name
|
||||
* @return String|int The variable value
|
||||
*/
|
||||
@function _gridle_get_state_var(
|
||||
$stateName,
|
||||
$var : "name"
|
||||
) {
|
||||
|
||||
// get the state :
|
||||
$state : _gridle_get_state($stateName);
|
||||
|
||||
// check ig state and if has the variable :
|
||||
@if $state
|
||||
and map-has-key($state,unquote("#{$var}"))
|
||||
{
|
||||
@return map-get($state,unquote("#{$var}"));
|
||||
}
|
||||
|
||||
// nothing getted :
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get a variable
|
||||
*
|
||||
* @param String $varName The variable name
|
||||
* @param String $stateMap-or-stateName The state name or a map state value
|
||||
* @return Mixed The finded value
|
||||
*/
|
||||
@function _gridle_get_var_value(
|
||||
$varName,
|
||||
$stateMap-or-stateName : null
|
||||
) {
|
||||
// if is a state :
|
||||
$state : null;
|
||||
|
||||
// get the state (if no state find, return the default one) :
|
||||
$state : _gridle_get_state($stateMap-or-stateName);
|
||||
|
||||
// extend default state with given state :
|
||||
$props : map-merge($_gridle-settings, $state);
|
||||
|
||||
@if map-has-key($props, unquote("#{$varName}")) {
|
||||
@return map-get($state, unquote("#{$varName}"));
|
||||
}
|
||||
|
||||
// nothing finded :
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set a variable in a state
|
||||
* @param Mixed $stateName-or-stateIndex The state name of state index
|
||||
* @param String $var Variable name to assign
|
||||
* @param Mixed $newValue The new value to assign
|
||||
* @return List The states list (full)
|
||||
*/
|
||||
@function _gridle_set_state_var(
|
||||
$stateName,
|
||||
$var,
|
||||
$newValue
|
||||
) {
|
||||
// get the state :
|
||||
$state : _gridle_get_state($stateName);
|
||||
|
||||
// check ig state and if has the variable :
|
||||
@if $state
|
||||
and map-has-key($state,unquote("#{$var}"))
|
||||
{
|
||||
// set new value in state :
|
||||
$state : map-set($state, unquote("#{$var}"), $newValue);
|
||||
|
||||
// set states :
|
||||
$_gridle_states : map-set($_gridle_states, unquote("#{$stateName}"), $state);
|
||||
|
||||
// return new state :
|
||||
@return $state;
|
||||
}
|
||||
|
||||
// nothing getted :
|
||||
@return null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Generate a column
|
||||
*
|
||||
* @param String $name The column name (often count)
|
||||
* @param int $columns The column count that the column will take
|
||||
* @param int $context The context on witch the with will be calculed
|
||||
* @param Boolean $generateClasses Set if the column has to be generated in css
|
||||
*/
|
||||
@function _gridle_create_column(
|
||||
$name,
|
||||
$columns,
|
||||
$context,
|
||||
$name-multiplicator : 1 // used to extend the state on custom registered columns
|
||||
) {
|
||||
@return (
|
||||
name : $name,
|
||||
columns : $columns,
|
||||
context : $context,
|
||||
name-multiplicator : $name-multiplicator
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Generate classname
|
||||
*
|
||||
* @param List $parrern The pattern to use to generate classname
|
||||
* @param String $state The state
|
||||
* @param int $count The column count
|
||||
*/
|
||||
@function _gridle_classname(
|
||||
$pattern,
|
||||
$state : null,
|
||||
$count : null
|
||||
) {
|
||||
|
||||
// init selector :
|
||||
$sel : ".";
|
||||
|
||||
// delete default :
|
||||
@if unquote("#{$state}") == default {
|
||||
$state : null;
|
||||
}
|
||||
|
||||
// add class prefix :
|
||||
@if $gridle-class-prefix and $gridle-class-prefix != '' {
|
||||
$sel : "#{$sel}#{$gridle-class-prefix}";
|
||||
@if $gridle-class-separator {
|
||||
$sel : "#{$sel}#{$gridle-class-separator}";
|
||||
}
|
||||
}
|
||||
|
||||
// construct class name :
|
||||
$i : 1;
|
||||
@each $var in $pattern {
|
||||
|
||||
// replace tokens :
|
||||
@if $var == '%state' and $state {
|
||||
$sel : "#{$sel}#{$state}";
|
||||
}
|
||||
@if $var == '%count' and $count {
|
||||
$sel : "#{$sel}#{$count}";
|
||||
}
|
||||
@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '-' and $var != '--' and $var != '_' and $var != '__' and $var != '%prefix' {
|
||||
$sel : "#{$sel}#{$var}";
|
||||
}
|
||||
|
||||
// handle separators :
|
||||
@if ($var == '%-' or $var == '-' or $var == '--' or $var == '_' or $var == '__') and $i < length($pattern) {
|
||||
$index : $i + 1;
|
||||
$value : nth($pattern, $index);
|
||||
@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '-' and $value != '--' and $value != '_' and $value != '__' and $value != '%prefix' {
|
||||
@if $var == '%-' {
|
||||
$sel : "#{$sel}#{$gridle-class-separator}";
|
||||
} @else {
|
||||
$sel : "#{$sel}#{$var}";
|
||||
}
|
||||
}
|
||||
@if $value == '%state' and $state {
|
||||
@if $var == '%-' {
|
||||
$sel : "#{$sel}#{$gridle-class-separator}";
|
||||
} @else {
|
||||
$sel : "#{$sel}#{$var}";
|
||||
}
|
||||
}
|
||||
@if $value == '%count' and $count {
|
||||
@if $var == '%-' {
|
||||
$sel : "#{$sel}#{$gridle-class-separator}";
|
||||
} @else {
|
||||
$sel : "#{$sel}#{$var}";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update i :
|
||||
$i : $i + 1;
|
||||
}
|
||||
|
||||
// return generated class :
|
||||
@return $sel;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the media query for a particular state, or with, etc...
|
||||
*
|
||||
* @param Mixed $state-or-min-width The state name of the min with
|
||||
* @param Mixed $max-width The max width if first param is a min width
|
||||
* @return String The media query string without the @media
|
||||
*/
|
||||
@function _gridle_get_media_query(
|
||||
$state-or-settings
|
||||
) {
|
||||
// check if is a string :
|
||||
$state : null;
|
||||
@if type-of($state-or-settings) == string
|
||||
{
|
||||
$state : _gridle_get_state($state-or-settings);
|
||||
}
|
||||
@else if $state-or-settings == null
|
||||
{
|
||||
$state : $_gridle-settings;
|
||||
}
|
||||
@else
|
||||
{
|
||||
$state : map-merge($_gridle-settings, $state-or-settings);
|
||||
}
|
||||
|
||||
// if it's some settings or a state :
|
||||
@if $state {
|
||||
|
||||
// get vars :
|
||||
$name : map-get($state, name);
|
||||
$min-width : map-get($state, min-width);
|
||||
$max-width : map-get($state, max-width);
|
||||
$query : map-get($state, query);
|
||||
|
||||
// direct query :
|
||||
@if $query
|
||||
{
|
||||
@return $query;
|
||||
}
|
||||
@else if $min-width and $max-width
|
||||
{
|
||||
@return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
|
||||
}
|
||||
@else if $min-width
|
||||
{
|
||||
@return "screen and (min-width: #{$min-width})";
|
||||
}
|
||||
@else if $max-width
|
||||
{
|
||||
@return "screen and (max-width: #{$max-width})";
|
||||
}
|
||||
@else
|
||||
{
|
||||
@return null;
|
||||
}
|
||||
|
||||
}
|
||||
@else
|
||||
{
|
||||
@return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get states count
|
||||
*
|
||||
* @return int The number of states defined
|
||||
*/
|
||||
@function _gridle_get_states_count() {
|
||||
@return length($_gridle_states) / length($_gridle_states_vars_pattern);
|
||||
}
|
||||
@ -1,624 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Generate mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
|
||||
/**
|
||||
* Generate a custom class for all the states
|
||||
*
|
||||
* @param list $pattern The name pattern of the class
|
||||
* @param list $statesNames The states names to generate
|
||||
*/
|
||||
@mixin gridle_generate_custom_class(
|
||||
$pattern,
|
||||
$statesNames : null
|
||||
) {
|
||||
// manage states to generate :
|
||||
$states : ();
|
||||
@if $statesNames == null {
|
||||
// loop on each states to generate names list :
|
||||
@each $stateName, $state in $_gridle_states {
|
||||
$states : append($states, $stateName);
|
||||
}
|
||||
} @else {
|
||||
$states : $statesNames;
|
||||
}
|
||||
|
||||
// loop on each states :
|
||||
@each $stateName in $states
|
||||
{
|
||||
// manage statename :
|
||||
@if type-of($stateName) != string {
|
||||
$stateName : map-get($stateName, name);
|
||||
}
|
||||
|
||||
// classes :
|
||||
$classes : _gridle_get_var_value(classes, $stateName);
|
||||
|
||||
// genrate the classname :
|
||||
@if $classes
|
||||
{
|
||||
@include gridle_state($stateName, false) {
|
||||
#{_gridle_classname($pattern, $stateName)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate all helpers classes
|
||||
// All the classes generated are not wrapper in gridle_state
|
||||
// in this mixin... Just the names are generated accordingly to the
|
||||
// requested state
|
||||
@mixin _gridle_generate_helper_classes (
|
||||
$state : null,
|
||||
$what : null
|
||||
) {
|
||||
// helpers :
|
||||
@if $what == null or index($what, float) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-float-left-name-pattern, $state)} {
|
||||
@include gridle_float(left);
|
||||
}
|
||||
#{_gridle_classname($gridle-float-right-name-pattern, $state)} {
|
||||
@include gridle_float(right);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, clear) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-clear-name-pattern, $state)} {
|
||||
@include gridle_clear(both);
|
||||
}
|
||||
#{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
|
||||
@include gridle_clear(left);
|
||||
}
|
||||
#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
|
||||
@include gridle_clear(right);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, no_gutter) or index($what, no_margin) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
|
||||
@include gridle_no_margin();
|
||||
}
|
||||
#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
|
||||
@include gridle_no_margin(left);
|
||||
}
|
||||
#{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
|
||||
@include gridle_no_margin(right);
|
||||
}
|
||||
#{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
|
||||
@include gridle_no_margin(top);
|
||||
}
|
||||
#{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
|
||||
@include gridle_no_margin(bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, gutter) or index($what, margin) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-gutter-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-margin-name-pattern, $state)} {
|
||||
@include gridle_margin(left right);
|
||||
}
|
||||
#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
|
||||
@include gridle_margin(left);
|
||||
}
|
||||
#{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
|
||||
@include gridle_margin(right);
|
||||
}
|
||||
#{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
|
||||
@include gridle_margin(top);
|
||||
}
|
||||
#{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
|
||||
#{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
|
||||
@include gridle_margin(bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, auto_height) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
|
||||
height:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, centered) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-centered-name-pattern, $state)} {
|
||||
@include gridle_centered(null);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, parent) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-parent-name-pattern, $state)} {
|
||||
@include _gridle_parent();
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, vertical_align) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
|
||||
@include _gridle_vertical_align();
|
||||
}
|
||||
#{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
|
||||
@include _gridle_vertical_align(top);
|
||||
}
|
||||
#{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
|
||||
@include _gridle_vertical_align(bottom);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Visible, hide, etc...
|
||||
*/
|
||||
@if $what == null or index($what, hide) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-hide-name-pattern, $state)} {
|
||||
@include gridle_hide(null);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, not_visible) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
|
||||
@include gridle_not_visible(null);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, show) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-show-name-pattern, $state)} {
|
||||
@include gridle_show(null);
|
||||
}
|
||||
#{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
|
||||
@include gridle_show_inline(null);
|
||||
}
|
||||
}
|
||||
|
||||
@if $what == null or index($what, visible) or index($what, helpers) {
|
||||
#{_gridle_classname($gridle-visible-name-pattern, $state)} {
|
||||
@include gridle_visible(null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear each class :
|
||||
*/
|
||||
@if $what == null or index($what, clear_each) or index($what, helpers) {
|
||||
@each $clearName, $clearMap in $_gridle_clear_classes {
|
||||
// get count :
|
||||
$clearCount : map-get($clearMap, clearEach);
|
||||
// what to clear :
|
||||
$clearWhat : map-get($clearMap, clearWhat);
|
||||
// generate the class :
|
||||
#{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
|
||||
@include _gridle_clear_each($clearCount, $clearWhat);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// debug colors :
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
@if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
|
||||
// debug color classes :
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #edeeb2;
|
||||
}
|
||||
}
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 2)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #fae4a7;
|
||||
}
|
||||
}
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 3)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #f5eacc;
|
||||
}
|
||||
}
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 4)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #eebdb2;
|
||||
}
|
||||
}
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 5)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #d4b2ee;
|
||||
}
|
||||
}
|
||||
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 6)} {
|
||||
#{$gridle-debug-selector} {
|
||||
background-color : #b2d8ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// generate settings json :
|
||||
@mixin gridle_generate_json_settings() {
|
||||
|
||||
// settings content :
|
||||
$gridle-settings-states : "{";
|
||||
|
||||
// generate all classes for differents media queries :
|
||||
$statesCount : length($_gridle_states);
|
||||
$i : 0;
|
||||
@each $stateName, $state in $_gridle_states {
|
||||
|
||||
$name : $stateName;
|
||||
|
||||
$gridle-settings-states : "#{$gridle-settings-states} \"#{$name}\":{";
|
||||
|
||||
@each $varName, $var in $state {
|
||||
|
||||
$value : null;
|
||||
@if $varName == "query" {
|
||||
$value : _gridle_get_media_query($stateName);
|
||||
} @else {
|
||||
$value : map-get($state,$varName);
|
||||
}
|
||||
|
||||
@if $value == null {
|
||||
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
|
||||
} @elseif type-of($value) == bool {
|
||||
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
|
||||
} @else {
|
||||
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";
|
||||
}
|
||||
}
|
||||
|
||||
$gridle-settings-states : "#{$gridle-settings-states} \"_gridle\" : true";
|
||||
|
||||
@if $i >= $statesCount - 1 {
|
||||
$gridle-settings-states : "#{$gridle-settings-states} }";
|
||||
} @else {
|
||||
$gridle-settings-states : "#{$gridle-settings-states} },";
|
||||
}
|
||||
|
||||
// update i :
|
||||
$i : $i + 1;
|
||||
|
||||
}
|
||||
|
||||
// generate settings json :
|
||||
$gridle-settings-states : "#{$gridle-settings-states}}";
|
||||
$gridle-settings : "{";
|
||||
$gridle-settings : "#{$gridle-settings} \"version\" : \"#{$_gridle-version}\"";
|
||||
|
||||
// states :
|
||||
$gridle-settings : "#{$gridle-settings}, \"states\" : #{$gridle-settings-states}";
|
||||
|
||||
// debug devices :
|
||||
$debug_devices : $_gridle_states_debug_devices;
|
||||
@if length($_gridle_states_debug_devices) <= 0 {
|
||||
$debug_devices : null;
|
||||
}
|
||||
// $gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
|
||||
|
||||
// settings :
|
||||
// $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
|
||||
$gridle-settings : "#{$gridle-settings} }";
|
||||
#gridle-settings {
|
||||
content : $gridle-settings;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// gridle mixin :
|
||||
// Generate all the classes needed for a grid
|
||||
@mixin gridle_generate_classes(
|
||||
$stateName : null,
|
||||
$what : null,
|
||||
$scope : null
|
||||
) {
|
||||
// if the what parameter is not null, mean that we need to generate only certain classes in a certain order :
|
||||
@if $what
|
||||
{
|
||||
// loop on each what item to generate the corresponding classes :
|
||||
@each $w in $what
|
||||
{
|
||||
// check if a scope exist :
|
||||
@if $scope {
|
||||
// wrapp grid into scope :
|
||||
.#{$scope} {
|
||||
@include _gridle_generate_classes($stateName, ( $w ), true);
|
||||
}
|
||||
} @else {
|
||||
// generate classes :
|
||||
@include _gridle_generate_classes($stateName, ( $w ), false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else
|
||||
{
|
||||
// don't have any "what" parameter so generate all the classes
|
||||
// check if a scope exist :
|
||||
@if $scope {
|
||||
// wrapp grid into scope :
|
||||
.#{$scope} {
|
||||
@include _gridle_generate_classes($stateName, null, true);
|
||||
}
|
||||
} @else {
|
||||
// generate classes :
|
||||
@include _gridle_generate_classes($stateName, null, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
$_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
||||
@mixin _gridle_generate_classes(
|
||||
$stateName : null,
|
||||
$what : null,
|
||||
$has-parent : false
|
||||
) {
|
||||
|
||||
// generate these classes only once :
|
||||
@if $_gridle_generateOnlyOnce
|
||||
{
|
||||
|
||||
// update status :
|
||||
$_gridle_generateOnlyOnce : false;
|
||||
|
||||
// | ------------------------
|
||||
// | Windows 8 fix
|
||||
// | ------------------------
|
||||
|
||||
// Windows 8 fix for snap mode :
|
||||
@media screen and (max-width: 400px) {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Container
|
||||
// | ------------------------
|
||||
|
||||
// generate container class :
|
||||
@if $what == null or index($what, container) or index($what, default)
|
||||
{
|
||||
$container-selector : ();
|
||||
$container-selector : append( $container-selector, unquote("#{_gridle_classname($gridle-container-name-pattern)}"), comma);
|
||||
#{$container-selector} {
|
||||
@include gridle_container();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Parent selector
|
||||
// | ------------------------
|
||||
|
||||
// parent common css :
|
||||
@if $what == null or index($what, parent) or index($what, default)
|
||||
{
|
||||
$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
|
||||
#{$parentSelector} {
|
||||
@extend %gridle-clearfix;
|
||||
@extend %gridle-parent-common;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// // | ------------------------
|
||||
// // | JSON Settings
|
||||
// // | ------------------------
|
||||
|
||||
// // generate json settings :
|
||||
@if $gridle-generate-json-settings
|
||||
{
|
||||
@include gridle_generate_json_settings();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Set the list of states to generate
|
||||
// | ------------------------
|
||||
$states : $_gridle_states;
|
||||
@if $stateName and _gridle_has_state($stateName) {
|
||||
$states : map-set((), $stateName, _gridle_get_state($stateName));
|
||||
}
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Store all the generated common selectors
|
||||
// | ------------------------
|
||||
|
||||
// generate all selector for extends :
|
||||
$grid-common-selector : ();
|
||||
$push-common-selector : ();
|
||||
$pull-common-selector : ();
|
||||
$prefix-common-selector : ();
|
||||
$suffix-common-selector : ();
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Media queries classes common selectors
|
||||
// | ------------------------
|
||||
|
||||
// generate all classes for media queries :
|
||||
@each $stateName, $state in $states {
|
||||
|
||||
// setup vars :
|
||||
$media : $stateName;
|
||||
$classes : map-get($state, classes);
|
||||
$context : map-get($state, context);
|
||||
$name-multiplicator : map-get($state, name-multiplicator);
|
||||
$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
|
||||
$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
|
||||
$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
|
||||
$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
|
||||
|
||||
// generate classes :
|
||||
@if $classes == true and $context {
|
||||
|
||||
// get specials columns :
|
||||
$columnsMap : map-merge((), $_gridle_columns);
|
||||
|
||||
// register each default columns :
|
||||
@for $j from 0 through $context {
|
||||
|
||||
// name :
|
||||
$columnName : "#{$j*$name-multiplicator}";
|
||||
$columnWidth : $j * $name-multiplicator;
|
||||
|
||||
// // create a column :
|
||||
$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
|
||||
|
||||
// // add column in columns map :
|
||||
$columnsMap : map-set($columnsMap, $columnName, $col);
|
||||
}
|
||||
|
||||
// loop on each columns to generate common selector :
|
||||
@each $columnName, $column in $columnsMap {
|
||||
|
||||
// add selector :
|
||||
@if $what == null or index($what, grid) or index($what, default) {
|
||||
$grid-common-selector : append( $grid-common-selector, unquote("#{_gridle_classname($gridle-grid-name-pattern, $media, $columnName)}"), comma );
|
||||
}
|
||||
@if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
|
||||
$push-common-selector : append( $push-common-selector, unquote("#{_gridle_classname($gridle-push-name-pattern, $media, $columnName)}"), comma );
|
||||
}
|
||||
@if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
|
||||
$pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_classname($gridle-pull-name-pattern, $media, $columnName)}"), comma );
|
||||
}
|
||||
@if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
|
||||
$prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)}"), comma );
|
||||
}
|
||||
@if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
|
||||
$suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)}"), comma );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// common css :
|
||||
@if $what == null or index($what, grid) or index($what, default) {
|
||||
#{$grid-common-selector} {
|
||||
@include _gridle_grid_common();
|
||||
}
|
||||
}
|
||||
@if $what == null or index($what, push) or index($what, default) {
|
||||
#{$push-common-selector} {
|
||||
@include _gridle_push_common();
|
||||
}
|
||||
}
|
||||
@if $what == null or index($what, pull) or index($what, default) {
|
||||
#{$pull-common-selector} {
|
||||
@include _gridle_pull_common();
|
||||
}
|
||||
}
|
||||
@if $what == null or index($what, prefix) or index($what, default) {
|
||||
#{$prefix-common-selector} {
|
||||
@include _gridle_prefix_common();
|
||||
}
|
||||
}
|
||||
@if $what == null or index($what, suffix) or index($what, default) {
|
||||
#{$suffix-common-selector} {
|
||||
@include _gridle_suffix_common();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// | ------------------------
|
||||
// | Media queries classes
|
||||
// | ------------------------
|
||||
|
||||
// generate all classes for differents media queries :
|
||||
@each $stateName, $state in $states {
|
||||
|
||||
// setup vars :
|
||||
$classes : _gridle_get_var_value(classes, $state);
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
|
||||
$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
|
||||
$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
|
||||
$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
|
||||
$generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
|
||||
|
||||
// generate all media queries grid classes :
|
||||
@if $classes == true {
|
||||
|
||||
// parent common css :
|
||||
$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
|
||||
#{$parentSelector} {
|
||||
@extend %gridle-clearfix;
|
||||
@extend %gridle-parent-common;
|
||||
}
|
||||
|
||||
// generate all the classes :
|
||||
@include gridle_state($stateName, $has-parent) {
|
||||
|
||||
// get specials columns :
|
||||
$columnsMap : map-merge((), $_gridle_columns);
|
||||
|
||||
// register each default columns :
|
||||
@for $j from 0 through $context {
|
||||
|
||||
// name :
|
||||
$columnName : "#{$j*$name-multiplicator}";
|
||||
$columnWidth : $j * $name-multiplicator;
|
||||
|
||||
// // create a column :
|
||||
$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
|
||||
|
||||
// // add column in columns map :
|
||||
$columnsMap : map-set($columnsMap, $columnName, $col);
|
||||
}
|
||||
|
||||
// generate all classes for columns :
|
||||
@each $columnName, $column in $columnsMap {
|
||||
|
||||
// variables :
|
||||
$columnsCount : map-get($column, columns);
|
||||
$columnsContext : map-get($column, context);
|
||||
$columnsNameMultiplicator : map-get($column, name-multiplicator);
|
||||
|
||||
// extend context in state (for columns) :
|
||||
$extendedState : map-merge($state, (
|
||||
context : $columnsContext,
|
||||
name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
|
||||
));
|
||||
|
||||
// classes :
|
||||
@if $what == null or index($what, grid) or index($what, default) {
|
||||
#{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
|
||||
@include _gridle($columnsCount, $extendedState);
|
||||
}
|
||||
}
|
||||
@if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
|
||||
#{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
|
||||
@include _gridle_push($columnsCount, $extendedState);
|
||||
}
|
||||
}
|
||||
@if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
|
||||
#{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
|
||||
@include _gridle_pull($columnsCount, $extendedState);
|
||||
}
|
||||
}
|
||||
@if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
|
||||
#{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
|
||||
@include _gridle_prefix($columnsCount, $extendedState);
|
||||
}
|
||||
}
|
||||
@if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
|
||||
#{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
|
||||
@include _gridle_suffix($columnsCount, $extendedState);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// media queries helpers classes :
|
||||
@if $generate-helpers-classes == true {
|
||||
@include _gridle_generate_helper_classes($stateName, $what);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// Gridle (.scss)
|
||||
// Gridle is an one and unique grid system file that allows you to generate almost all
|
||||
// grid you've ever dreamt about.
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// Copyright (c) 2014 Olivier Bossel
|
||||
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
||||
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
||||
// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
||||
// and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
// The above copyright notice and this permission notice shall be included in all copies or substantial portions
|
||||
// of the Software.
|
||||
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
||||
// TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
||||
// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
||||
// CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
// IN THE SOFTWARE.
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// @created 25.03.13
|
||||
// @updated 09.06.15
|
||||
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
||||
// @version 1.3.40
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
$_gridle-version : "1.3.40";
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Variables
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
$_gridle_settings : (); // the default settings
|
||||
$_gridle_states : (); // the variable map for each states
|
||||
$_gridle_clear_classes :(); // store each automatic clear count
|
||||
$_gridle_columns : (); // store the registered special columns
|
||||
$_gridle_states_debug_devices : (); // save the debug states devices
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Settings
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'settings';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Silent classes
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'silent-classes';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Common mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'common-mixins';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Functions
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'functions';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Settings mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'settings-mixins';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Generate mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'generate-mixins';
|
||||
|
||||
|
||||
|
||||
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Default states
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
@import 'default-states';
|
||||
@ -1,831 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
// Helper to apply multiple config for a certain state with one mixin
|
||||
@mixin gridle_set(
|
||||
$settings,
|
||||
$state : default
|
||||
) {
|
||||
|
||||
// loop on each settings
|
||||
@each $settingName, $settingValue in $settings
|
||||
{
|
||||
$sn : unquote("#{$settingName}");
|
||||
$sv : $settingValue;
|
||||
|
||||
// check if setting name is a state :
|
||||
@if _gridle_has_state($sn) {
|
||||
// process the state
|
||||
@include gridle_set($sv, $sn);
|
||||
} @else {
|
||||
@if $sn == container {
|
||||
@include gridle_container($state);
|
||||
} @else if $sn == grid {
|
||||
@include gridle($sv, $state);
|
||||
} @else if $sn == push {
|
||||
@include gridle_push($sv, $state);
|
||||
} @else if $sn == pull {
|
||||
@include gridle_pull($sv, $state);
|
||||
} @else if $sn == prefix {
|
||||
@include gridle_prefix($sv, $state);
|
||||
} @else if $sn == suffix {
|
||||
@include gridle_suffix($sv, $state);
|
||||
} @else if $sn == pull {
|
||||
@include gridle_pull($sv, $state);
|
||||
} @else if $sn == clear_each {
|
||||
@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
|
||||
} @else if $sn == centered {
|
||||
@include gridle_centered($state);
|
||||
} @else if $sn == parent {
|
||||
@include gridle_parent($state);
|
||||
} @else if $sn == vertical_align {
|
||||
@include gridle_vertical_align($sv, $state);
|
||||
} @else if $sn == hide {
|
||||
@if $sv == true {
|
||||
@include gridle_hide($state);
|
||||
} @else {
|
||||
@include gridle_show($state);
|
||||
}
|
||||
} @else if $sn == show {
|
||||
@if $sv == true {
|
||||
@include gridle_show($state);
|
||||
} @else {
|
||||
@include gridle_hide($state);
|
||||
}
|
||||
} @else if $sn == visible {
|
||||
@if $sv == true {
|
||||
@include gridle_visible($state);
|
||||
} @else {
|
||||
@include gridle_not_visible($state);
|
||||
}
|
||||
} @else if $sn == not_visible {
|
||||
@if $sv == true {
|
||||
@include gridle_not_visible($state);
|
||||
} @else {
|
||||
@include gridle_visible($state);
|
||||
}
|
||||
} @else if $sn == show_inline {
|
||||
@if $sv == true {
|
||||
@include gridle_show_inline($state);
|
||||
} @else {
|
||||
@include gridle_hide($state);
|
||||
}
|
||||
} @else if $sn == float {
|
||||
@include gridle_float($sv, $state);
|
||||
} @else if $sn == clear {
|
||||
@include gridle_clear($sv, $state);
|
||||
} @else if $sn == no_gutter
|
||||
or $sn == no_margin {
|
||||
@include gridle_no_gutter($sv, $state);
|
||||
} @else if $sn == gutter
|
||||
or $sn == margin {
|
||||
@include gridle_gutter($sv, $state);
|
||||
} @else {
|
||||
// we do nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive helpers mixins :
|
||||
@mixin gridle_state(
|
||||
$states,
|
||||
$has-parent : true
|
||||
) {
|
||||
|
||||
// check first param if is a state :
|
||||
$firstState : nth($states,1);
|
||||
@if _gridle_has_state($firstState) {
|
||||
|
||||
// loop on each states :
|
||||
@each $state in $states
|
||||
{
|
||||
// variables :
|
||||
$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$stateName : _gridle_get_var_value(name, $state);
|
||||
|
||||
// check if is a state :
|
||||
@if ($html-states-classes or $debug)
|
||||
and $stateName {
|
||||
// html class :
|
||||
@if $has-parent {
|
||||
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
||||
} @else {
|
||||
html#{_gridle_classname("#{$stateName}")} { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// get the media query :
|
||||
$q : _gridle_get_media_query($state);
|
||||
|
||||
// make the media query if a query exist :
|
||||
@if $q {
|
||||
@media #{$q} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
// variables :
|
||||
$html-states-classes : _gridle_get_var_value(html-states-classes, $states);
|
||||
$debug : _gridle_get_var_value(debug, $states);
|
||||
$stateName : _gridle_get_var_value(name, $states);
|
||||
|
||||
// check if is a state :
|
||||
@if ($html-states-classes or $debug)
|
||||
and $stateName {
|
||||
// html class :
|
||||
@if $has-parent {
|
||||
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
||||
} @else {
|
||||
html#{_gridle_classname("#{$stateName}")} { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// get the media query :
|
||||
$q : _gridle_get_media_query($states);
|
||||
|
||||
// make the media query if a query exist :
|
||||
@if $q {
|
||||
@media #{$q} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else
|
||||
{
|
||||
@content;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Container mixin :
|
||||
@mixin gridle_container(
|
||||
$state : default
|
||||
) {
|
||||
@include _gridle_container_common($state);
|
||||
}
|
||||
|
||||
|
||||
// Grid mixin :
|
||||
// Set the width of the specified grid column :
|
||||
@mixin gridle(
|
||||
$columns,
|
||||
$state-or-context : default,
|
||||
$state : default
|
||||
) {
|
||||
// manage state and context :
|
||||
$context : null;
|
||||
@if type-of($state-or-context) == number {
|
||||
$context : $state-or-context;
|
||||
} @else {
|
||||
$state : $state-or-context;
|
||||
}
|
||||
|
||||
// common :
|
||||
@include _gridle_grid_common();
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle($columns, $state, $context);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle($columns, $state, $context);
|
||||
}
|
||||
}
|
||||
@mixin _gridle(
|
||||
$columns,
|
||||
$state : default,
|
||||
$context : null
|
||||
) {
|
||||
// vars :
|
||||
$name : _gridle_get_var_value(name, $state);
|
||||
@if type-of($context) != number {
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
}
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
||||
$ie7-support : _gridle_get_var_value(ie7-support, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
||||
|
||||
// manage columns
|
||||
@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
|
||||
// the columns is a saved one, get the context and column value
|
||||
$column : map-get($_gridle_columns, $columns);
|
||||
$context : map-get($column, context);
|
||||
$columns : map-get($column, columns);
|
||||
} @else if type-of($columns) == number {
|
||||
$columns : $columns / $name-multiplicator;
|
||||
} @else {
|
||||
@error "the column #{$columns} does not exist...";
|
||||
}
|
||||
|
||||
// vars :
|
||||
$width : percentage(1 / $context * $columns);
|
||||
|
||||
// set value :
|
||||
width:$width;
|
||||
|
||||
// ie7 support :
|
||||
@if $ie7-support == true {
|
||||
*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
|
||||
}
|
||||
|
||||
// debug :
|
||||
@if $debug == true and $debug-show-class-names == true {
|
||||
#{$gridle-debug-selector} {
|
||||
&:before {
|
||||
@if $name == default {
|
||||
content:"grid-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"grid-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
&.parent:before {
|
||||
@if $name == default {
|
||||
content:"grid-parent-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"grid-parent-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// push :
|
||||
// Push the element of the count of column wanted
|
||||
@mixin gridle_push(
|
||||
$columns,
|
||||
$state-or-context : default,
|
||||
$state : default
|
||||
) {
|
||||
// manage state and context
|
||||
$context : null;
|
||||
@if type-of($state-or-context) == number {
|
||||
$context : $state-or-context;
|
||||
} @else {
|
||||
$state : $state-or-context;
|
||||
}
|
||||
|
||||
// common :
|
||||
@include _gridle_push_common($state);
|
||||
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_push($columns, $state, $context);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_push($columns, $state, $context);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_push(
|
||||
$columns,
|
||||
$state : default,
|
||||
$context : null
|
||||
) {
|
||||
// variables :
|
||||
$name : _gridle_get_var_value(name, $state);
|
||||
@if type-of($context) != number {
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
}
|
||||
$direction : _gridle_get_var_value(direction, $state);
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
||||
|
||||
// vars :
|
||||
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
||||
@if $direction == rtl { $width : $width*-1; }
|
||||
left:$width;
|
||||
|
||||
// debug css :
|
||||
@if $debug == true and $debug-show-class-names == true {
|
||||
#{$gridle-debug-selector} {
|
||||
&:after {
|
||||
@if $name == default {
|
||||
content:"push-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"push-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// pull :
|
||||
// Pull the element of the count of column wanted
|
||||
@mixin gridle_pull(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// common :
|
||||
@include _gridle_pull_common($state);
|
||||
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_pull($columns,$state);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_pull($columns,$state);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_pull(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// vars :
|
||||
$name : _gridle_get_var_value(name, $state);
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
$direction : _gridle_get_var_value(direction, $state);
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
||||
|
||||
// vars :
|
||||
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
||||
@if $direction == rtl { $width : $width*-1; }
|
||||
right:$width;
|
||||
|
||||
// debug css :
|
||||
@if $debug == true and $debug-show-class-names == true {
|
||||
#{$gridle-debug-selector} {
|
||||
&:after {
|
||||
@if $name == default {
|
||||
content:"pull-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"pull-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// push :
|
||||
// Push the element of the count of column wanted
|
||||
@mixin gridle_prefix(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// common :
|
||||
@include _gridle_prefix_common($state);
|
||||
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_prefix($columns,$state);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_prefix($columns,$state);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_prefix(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// vars :
|
||||
$name : _gridle_get_var_value(name, $state);
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
$direction : _gridle_get_var_value(direction, $state);
|
||||
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
||||
|
||||
// vars :
|
||||
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
||||
|
||||
// set value :
|
||||
@if $direction == rtl { margin-right:$width; }
|
||||
@else { margin-left:$width; }
|
||||
|
||||
// debug css :
|
||||
@if $debug == true and $debug-show-class-names == true {
|
||||
#{$gridle-debug-selector} {
|
||||
&:after {
|
||||
@if $name == default {
|
||||
content:"prefix-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"prefix-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// pull :
|
||||
// Pull the element of the count of column wanted
|
||||
@mixin gridle_suffix(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// common :
|
||||
@include _gridle_suffix_common($state);
|
||||
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_suffix($columns,$state);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_suffix($columns,$state);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_suffix(
|
||||
$columns,
|
||||
$state : default
|
||||
) {
|
||||
// vars :
|
||||
$name : _gridle_get_var_value(name, $state);
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
$direction : _gridle_get_var_value(direction, $state);
|
||||
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
||||
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
||||
$debug : _gridle_get_var_value(debug, $state);
|
||||
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
||||
|
||||
// vars :
|
||||
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
|
||||
|
||||
// set value :
|
||||
@if $direction == rtl { margin-left:$width; }
|
||||
@else { margin-right:$width; }
|
||||
|
||||
// debug css :
|
||||
@if $debug == true and $debug-show-class-names == true {
|
||||
#{$gridle-debug-selector} {
|
||||
&:after {
|
||||
@if $name == default {
|
||||
content:"suffix-#{$name}-#{$columns}";
|
||||
} @else {
|
||||
content:"suffix-#{$name}-#{$columns}" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// grid background :
|
||||
// Display the grid background debug
|
||||
@mixin gridle_grid_background(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_grid_background($state);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_grid_background($state);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_grid_background(
|
||||
$state : default
|
||||
) {
|
||||
|
||||
// variables :
|
||||
$context : _gridle_get_var_value(context, $state);
|
||||
|
||||
position:relative;
|
||||
z-index:9999;
|
||||
&:before {
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:0; left:0;
|
||||
width:100%; height:100% !important;
|
||||
// vars :
|
||||
$width : percentage(1 / $context);
|
||||
background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
|
||||
background-size:($width*2) 100%;
|
||||
// background-position:$gridle-gutter-width/2 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Parent clear each
|
||||
*/
|
||||
// Grid mixin :
|
||||
// Set the width of the specified grid column :
|
||||
@mixin gridle_clear_each(
|
||||
$clearEach,
|
||||
$clearWhat : both,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_clear_each($clearEach, $clearWhat);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_clear_each($clearEach, $clearWhat);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_clear_each(
|
||||
$clearEach,
|
||||
$clearWhat
|
||||
) {
|
||||
> *:nth-child(#{$clearEach}n+1) {
|
||||
clear : $clearWhat;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Grid centered :
|
||||
@mixin gridle_centered(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_centered();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_centered();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_centered() {
|
||||
display:block !important;
|
||||
float:none !important;
|
||||
margin-left:auto !important;
|
||||
margin-right:auto !important;
|
||||
clear:both !important;
|
||||
}
|
||||
|
||||
|
||||
// Grid parent :
|
||||
@mixin gridle_parent(
|
||||
$state : default
|
||||
) {
|
||||
// common :
|
||||
@include _gridle_parent_common();
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_parent();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_parent();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_parent() {
|
||||
@include gridle_no_gutter();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Vertical align :
|
||||
*/
|
||||
@mixin gridle_vertical_align(
|
||||
$align : middle,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_vertical_align($align);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_vertical_align($align);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_vertical_align(
|
||||
$align : middle
|
||||
) {
|
||||
font-size:0;
|
||||
clear:both;
|
||||
|
||||
> * {
|
||||
display:inline-block;
|
||||
float:none !important;
|
||||
vertical-align:$align;
|
||||
font-size:1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hide on :
|
||||
// @param String $media On what state
|
||||
@mixin gridle_hide(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_hide();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_hide();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_hide() {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
// Not visible on :
|
||||
// @param String $media What to hide (one of the 3 state classes name)
|
||||
@mixin gridle_not_visible(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_not_visible();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_not_visible();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_not_visible() {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
|
||||
// Show on
|
||||
// @param String $media What to hide (one of the 3 state classes name)
|
||||
@mixin gridle_show(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_show();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_show();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_show() {
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Show inline
|
||||
*
|
||||
* @param String $state The state name
|
||||
*/
|
||||
@mixin gridle_show_inline(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_show_inline();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_show_inline();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_show_inline() {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Visible on :
|
||||
// @param String $media On what state
|
||||
@mixin gridle_visible(
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_visible();
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_visible();
|
||||
}
|
||||
}
|
||||
@mixin _gridle_visible() {
|
||||
visibility:visible;
|
||||
}
|
||||
|
||||
|
||||
// Gridle Right :
|
||||
@mixin gridle_float(
|
||||
$float-direction : left,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_float($float-direction);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_float($float-direction);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_float(
|
||||
$float-direction : left
|
||||
) {
|
||||
float:#{$float-direction};
|
||||
}
|
||||
|
||||
|
||||
// Gridle clear :
|
||||
// @param String $clear-direction The direction to clear
|
||||
// @param String $state The state
|
||||
@mixin gridle_clear(
|
||||
$clear-direction : both,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_clear($clear-direction);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_clear($clear-direction);
|
||||
}
|
||||
}
|
||||
@mixin _gridle_clear(
|
||||
$clear-direction : both
|
||||
) {
|
||||
clear:#{$clear-direction};
|
||||
}
|
||||
|
||||
|
||||
// Gridle no gutter :
|
||||
// @param String $side The side to clear
|
||||
// @param String $state The state
|
||||
@mixin gridle_no_gutter(
|
||||
$side : left right,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_no_gutter($side);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_no_gutter($side);
|
||||
}
|
||||
}
|
||||
@mixin gridle_no_margin(
|
||||
$side : left right,
|
||||
$state : default
|
||||
) {
|
||||
@include gridle_no_gutter($side, $state);
|
||||
}
|
||||
@mixin _gridle_no_gutter(
|
||||
$side : left right
|
||||
) {
|
||||
@each $s in $side {
|
||||
padding-#{$s} : 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gridle gutter :
|
||||
// @param String $side The side to clear
|
||||
// @param String $state The state
|
||||
@mixin gridle_gutter(
|
||||
$side : left right,
|
||||
$state : default
|
||||
) {
|
||||
// check if need media query :
|
||||
@if $state {
|
||||
@include gridle_state($state) {
|
||||
@include _gridle_gutter($side);
|
||||
}
|
||||
} @else {
|
||||
@include _gridle_gutter($side);
|
||||
}
|
||||
}
|
||||
// shortcut :
|
||||
@mixin gridle_margin(
|
||||
$side : left right,
|
||||
$state : default
|
||||
) {
|
||||
@include gridle_gutter($side, $state);
|
||||
}
|
||||
@mixin _gridle_gutter(
|
||||
$side : left right,
|
||||
$state : default
|
||||
) {
|
||||
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
||||
@each $s in $side {
|
||||
padding-#{$s} : $gutter-width / 2;
|
||||
}
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Settings mixins
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Setup
|
||||
*/
|
||||
@mixin gridle_setup(
|
||||
$settings : ()
|
||||
) {
|
||||
$_gridle-settings : map-merge((
|
||||
name : default,
|
||||
min-width : null,
|
||||
max-width : null,
|
||||
query : null,
|
||||
classes : true,
|
||||
context : 12,
|
||||
gutter-width : 20px,
|
||||
direction : ltr,
|
||||
name-multiplicator : 1,
|
||||
debug : false,
|
||||
debug-show-class-names : true,
|
||||
ie7-support : false,
|
||||
html-states-classes : false,
|
||||
generate-push-classes : true,
|
||||
generate-pull-classes : true,
|
||||
generate-prefix-classes : true,
|
||||
generate-suffix-classes : true,
|
||||
generate-helpers-classes : true
|
||||
), $settings) !global;
|
||||
|
||||
// register default state :
|
||||
@include gridle_register_state(default, $_gridle-settings);
|
||||
|
||||
}
|
||||
|
||||
// Register an state :
|
||||
@mixin gridle_register_state(
|
||||
$name,
|
||||
$settings
|
||||
) {
|
||||
// settings :
|
||||
$settings : map-merge($_gridle-settings, $settings);
|
||||
|
||||
// set name :
|
||||
$settings : map-set($settings, name, $name);
|
||||
|
||||
// add state in maps :
|
||||
$_gridle_states : map-set($_gridle_states, $name, $settings) !global;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register a clear each class
|
||||
*/
|
||||
@mixin gridle_register_clear_each(
|
||||
$count,
|
||||
$clearWhat
|
||||
) {
|
||||
// create the clear map :
|
||||
$classMap : (
|
||||
clearEach : $count,
|
||||
clearWhat : $clearWhat
|
||||
);
|
||||
|
||||
// append to map :
|
||||
$_gridle_clear_classes : map-set($_gridle_clear_classes, $count, $classMap) !global;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register a special class
|
||||
*/
|
||||
@mixin gridle_register_column(
|
||||
$name,
|
||||
$columns,
|
||||
$context
|
||||
) {
|
||||
// create a column :
|
||||
$col : _gridle_create_column($name, $columns, $context);
|
||||
|
||||
// add column in maps :
|
||||
$_gridle_columns : map-set($_gridle_columns, $name, $col) !global;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register default states
|
||||
*/
|
||||
@mixin gridle_register_default_states() {
|
||||
@include gridle_register_state(mobile, (
|
||||
max-width : 480px
|
||||
));
|
||||
@include gridle_register_state(tablet, (
|
||||
min-width : 481px,
|
||||
max-width : 1024px
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Register default mobile first states :
|
||||
*/
|
||||
@mixin gridle_register_default_mobile_first_states() {
|
||||
@include gridle_register_state(xs, (
|
||||
max-width : 768px
|
||||
));
|
||||
@include gridle_register_state(sm, (
|
||||
min-width : 768px
|
||||
));
|
||||
@include gridle_register_state(md, (
|
||||
min-width : 992px
|
||||
));
|
||||
@include gridle_register_state(lg, (
|
||||
min-width : 1200px
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set the debug device (not used for now)
|
||||
*
|
||||
* @param String $state The state to update
|
||||
* @para m String $device The device to use (iphone, etc...)
|
||||
*/
|
||||
@mixin gridle_set_debug_device(
|
||||
$state : default,
|
||||
$device : null
|
||||
) {
|
||||
|
||||
// check params :
|
||||
@if $state and $device {
|
||||
// set the state device :
|
||||
$_gridle_states_debug_devices : append($_gridle_states_debug_devices, unquote("\"#{$state}\" : \"#{$device}\""), comma);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Settings
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
$gridle-generate-json-settings : true !default;
|
||||
|
||||
$gridle-debug-selector : ".gridle-debug &, &.gridle-debug" !default;
|
||||
|
||||
$gridle-class-prefix : '' !default;
|
||||
$gridle-class-separator : '-' !default;
|
||||
|
||||
$gridle-container-name-pattern : ('container') !default;
|
||||
|
||||
$gridle-grid-name-pattern : ('grid','%-','%state','%-','%count') !default;
|
||||
$gridle-push-name-pattern : ('push','%-','%state','%-','%count') !default;
|
||||
$gridle-pull-name-pattern : ('pull','%-','%state','%-','%count') !default;
|
||||
$gridle-prefix-name-pattern : ('prefix','%-','%state','%-','%count') !default;
|
||||
$gridle-suffix-name-pattern : ('suffix','%-','%state','%-','%count') !default;
|
||||
|
||||
$gridle-parent-name-pattern : ('parent','%-','%state') !default;
|
||||
$gridle-centered-name-pattern : ('centered','%-','%state') !default;
|
||||
|
||||
$gridle-vertical-align-middle-name-pattern : ('vertical','%-','align','%-','%state','%-','middle') !default;
|
||||
$gridle-vertical-align-top-name-pattern : ('vertical','%-','align','%-','%state','%-','top') !default;
|
||||
$gridle-vertical-align-bottom-name-pattern : ('vertical','%-','align','%-','%state','%-','bottom') !default;
|
||||
|
||||
$gridle-hide-name-pattern : ('hide','%-','%state') !default;
|
||||
$gridle-show-name-pattern : ('show','%-','%state') !default;
|
||||
$gridle-show-inline-name-pattern : ('show','%-','inline','%-','%state') !default;
|
||||
$gridle-not-visible-name-pattern : ('not','%-','visible','%-','%state') !default;
|
||||
$gridle-visible-name-pattern : ('visible','%-','%state') !default;
|
||||
|
||||
$gridle-float-left-name-pattern : ('float','%-','%state','%-','left') !default;
|
||||
$gridle-float-right-name-pattern : ('float','%-','%state','%-','right') !default;
|
||||
|
||||
$gridle-clear-name-pattern : ('clear','%-','%state') !default;
|
||||
$gridle-clear-left-name-pattern : ('clear','%-','%state','%-','left') !default;
|
||||
$gridle-clear-right-name-pattern : ('clear','%-','%state','%-','right') !default;
|
||||
$gridle-clear-each-pattern : ('clear','%-','each','%-','%state','%-','%count') !default;
|
||||
|
||||
$gridle-no-gutter-name-pattern : ('no','%-','gutter','%-','%state') !default;
|
||||
$gridle-no-gutter-left-name-pattern : ('no','%-','gutter','%-','%state','%-','left') !default;
|
||||
$gridle-no-gutter-right-name-pattern : ('no','%-','gutter','%-','%state','%-','right') !default;
|
||||
$gridle-no-gutter-top-name-pattern : ('no','%-','gutter','%-','%state','%-','top') !default;
|
||||
$gridle-no-gutter-bottom-name-pattern : ('no','%-','gutter','%-','%state','%-','bottom') !default;
|
||||
|
||||
$gridle-no-margin-name-pattern : ('no','%-','margin','%-','%state') !default;
|
||||
$gridle-no-margin-left-name-pattern : ('no','%-','margin','%-','%state','%-','left') !default;
|
||||
$gridle-no-margin-right-name-pattern : ('no','%-','margin','%-','%state','%-','right') !default;
|
||||
$gridle-no-margin-top-name-pattern : ('no','%-','margin','%-','%state','%-','top') !default;
|
||||
$gridle-no-margin-bottom-name-pattern : ('no','%-','margin','%-','%state','%-','bottom') !default;
|
||||
|
||||
$gridle-gutter-name-pattern : ('gutter','%-','%state') !default;
|
||||
$gridle-gutter-left-name-pattern : ('gutter','%-','%state','%-','left') !default;
|
||||
$gridle-gutter-right-name-pattern : ('gutter','%-','%state','%-','right') !default;
|
||||
$gridle-gutter-top-name-pattern : ('gutter','%-','%state','%-','top') !default;
|
||||
$gridle-gutter-bottom-name-pattern : ('gutter','%-','%state','%-','bottom') !default;
|
||||
|
||||
$gridle-margin-name-pattern : ('margins','%-','%state') !default;
|
||||
$gridle-margin-left-name-pattern : ('margin','%-','%state','%-','left') !default;
|
||||
$gridle-margin-right-name-pattern : ('margin','%-','%state','%-','right') !default;
|
||||
$gridle-margin-top-name-pattern : ('margin','%-','%state','%-','top') !default;
|
||||
$gridle-margin-bottom-name-pattern : ('margin','%-','%state','%-','bottom') !default;
|
||||
|
||||
$gridle-auto-height-name-pattern : ('auto','%-','height','%-','%state') !default;
|
||||
|
||||
$gridle-debug-color-name-pattern : ('debug','%-','color','%-','%state','%-','%count') !default;
|
||||
@ -1,106 +0,0 @@
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
// | Silent classes
|
||||
// |------------------------------------------------------
|
||||
// |------------------------------------------------------
|
||||
|
||||
%gridle-pie-clearfix {
|
||||
&:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
& {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
html[xmlns] & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
* html & {
|
||||
height: 1%;
|
||||
}
|
||||
}
|
||||
%gridle-simple-clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-spacing:0;
|
||||
}
|
||||
}
|
||||
%gridle-clearfix {
|
||||
// For modern browser
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
border-spacing:0;
|
||||
}
|
||||
&:after {
|
||||
clear:both;
|
||||
}
|
||||
// For IE 6/7 (trigger hasLayout
|
||||
& {
|
||||
zoom:1;
|
||||
}
|
||||
}
|
||||
%gridle-push-pull-debug-background-common {
|
||||
background-size:50px 90%;
|
||||
background-position:0 50%;
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
%gridle-push-pull-common {
|
||||
position:relative;
|
||||
}
|
||||
%gridle-container-common {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
%gridle-parent-common {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
%gridle-container-debug-common {
|
||||
background-color:#f5f5f5;
|
||||
}
|
||||
%gridle-grid-debug-common {
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
display:block;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
|
||||
margin:10px 0;
|
||||
padding:5px 0;
|
||||
text-align:center;
|
||||
color:white;
|
||||
font-size:11px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display:block !important;
|
||||
}
|
||||
background-color:#daeff5;
|
||||
}
|
||||
%gridle-grid-common {
|
||||
display:inline-block;
|
||||
min-height:1px;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
%gridle-prefix-debug-common {
|
||||
background-color:#dae7e9 !important;
|
||||
}
|
||||
%gridle-suffix-debug-common {
|
||||
background-color:#dae7e9 !important;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
/**
|
||||
* Bootstrap style :
|
||||
*/
|
||||
.row {
|
||||
margin:20px 0; // adding margin to rows
|
||||
}
|
||||
.thumb {
|
||||
background:#eee;
|
||||
width:100%; height:0;
|
||||
padding-bottom:56%;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user