css/jetbrains-bundle/utility-classes.css (872 lines of code) (raw):
/**
* Dependencies
*/
/**
* @name Core config file
* @version 1.0
* @description Config on core styles
*/
/**
* Dependencies
*/
/**
* @name Utils
* @collection core
* @description Base utils on core
*/
/**
* Dependencies
*/
/**
* @name Core config file
* @version 1.0
* @description Config on core styles
*/
/**
* Dependencies
*/
/**
* Make retina media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* Make print media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* @name Breakpoints
* @collection core
* @example-file ./examples.html
*/
/**
* Dependencies
*/
/**
* Dependencies
*/
/**
* @name Utils
* @collection core
* @description Base utils on core
*/
/**
* Dependencies
*/
/**
* @name Core config file
* @version 1.0
* @description Config on core styles
*/
/**
* Dependencies
*/
/**
* Make retina media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* Make print media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* Dependencies
*/
/**
* Dependencies
*/
/**
* @name Utils
* @collection core
* @description Base utils on core
*/
/**
* Dependencies
*/
/**
* @name Core config file
* @version 1.0
* @description Config on core styles
*/
/**
* Dependencies
*/
/**
* Make retina media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* Make print media query
* Returns the @content (This mixin is helper)
* @returns {String}
*/
/**
* Create media query UP or DOWN
* @param {String|Number} $key
* @param {String|Number} $value
* @param {String} $direction
* @private
* @returns {String}
*/
/**
* Create media query between two values
* @param {String|Number} $value1
* @param {String|Number} $value2
* @private
* @returns {String}
*/
/**
* Validate and get media breakpoint
* @param {String|Number} $key
* @param {Map} $breakpoints-with-default
* @private
* @returns {String}
*/
/**
* Create media breakpoint or simple styles without a breakpoint
* @param {String|Number} $key
* @param {Map} $breakpoints-with-default
* @param {String} $direction down|up
* @returns {String}
*/
/**
* Create all breakpoints.
* .CLASS_NAME-sm, .CLASS_NAME-md etc.
* @param {String} $selector
* @param {Map} $breakpoints-with-default
* @param {String} $direction down|up
* @returns {String}
*/
/**
* Create DOWN media breakpoints
* @example @media screen and (max-width: BREAK_SIZE) { ... }
* @param {String|Number} $breakpoint
* @param {Map} $breakpoints-with-default
* @returns {String}
*/
/**
* Create UP media breakpoints
* @example @media screen and (min-width: BREAK_SIZE) { ... }
* @param {String|Number} $breakpoint
* @param {Map} $breakpoints-with-default
* @returns {String}
*/
/**
* Create media breakpoints between UP and Down
* @example @media screen and (min-width: BREAK_SIZE_1) and (max-width: BREAK_SIZE_2) { ... }
* @param {String|Number} $breakpoint-up
* @param {String|Number} $breakpoint-down
* @param {Map} $breakpoints-with-default
* @returns {String}
*/
.text-left {
text-align: left;
}
@media screen and (max-width: 1440px) {
.text-left-xlg {
text-align: left;
}
}
@media screen and (max-width: 1200px) {
.text-left-lg {
text-align: left;
}
}
@media screen and (max-width: 960px) {
.text-left-md {
text-align: left;
}
}
@media screen and (max-width: 640px) {
.text-left-sm {
text-align: left;
}
}
.text-right {
text-align: right;
}
@media screen and (max-width: 1440px) {
.text-right-xlg {
text-align: right;
}
}
@media screen and (max-width: 1200px) {
.text-right-lg {
text-align: right;
}
}
@media screen and (max-width: 960px) {
.text-right-md {
text-align: right;
}
}
@media screen and (max-width: 640px) {
.text-right-sm {
text-align: right;
}
}
.text-center {
text-align: center;
}
@media screen and (max-width: 1440px) {
.text-center-xlg {
text-align: center;
}
}
@media screen and (max-width: 1200px) {
.text-center-lg {
text-align: center;
}
}
@media screen and (max-width: 960px) {
.text-center-md {
text-align: center;
}
}
@media screen and (max-width: 640px) {
.text-center-sm {
text-align: center;
}
}
.text-justify {
text-align: justify;
}
@media screen and (max-width: 1440px) {
.text-justify-xlg {
text-align: justify;
}
}
@media screen and (max-width: 1200px) {
.text-justify-lg {
text-align: justify;
}
}
@media screen and (max-width: 960px) {
.text-justify-md {
text-align: justify;
}
}
@media screen and (max-width: 640px) {
.text-justify-sm {
text-align: justify;
}
}
.text-nowrap {
white-space: nowrap;
}
@media screen and (max-width: 1440px) {
.text-nowrap-xlg {
white-space: nowrap;
}
}
@media screen and (max-width: 1200px) {
.text-nowrap-lg {
white-space: nowrap;
}
}
@media screen and (max-width: 960px) {
.text-nowrap-md {
white-space: nowrap;
}
}
@media screen and (max-width: 640px) {
.text-nowrap-sm {
white-space: nowrap;
}
}
.text-lowercase {
text-transform: lowercase;
}
@media screen and (max-width: 1440px) {
.text-lowercase-xlg {
text-transform: lowercase;
}
}
@media screen and (max-width: 1200px) {
.text-lowercase-lg {
text-transform: lowercase;
}
}
@media screen and (max-width: 960px) {
.text-lowercase-md {
text-transform: lowercase;
}
}
@media screen and (max-width: 640px) {
.text-lowercase-sm {
text-transform: lowercase;
}
}
.text-uppercase {
text-transform: uppercase;
}
@media screen and (max-width: 1440px) {
.text-uppercase-xlg {
text-transform: uppercase;
}
}
@media screen and (max-width: 1200px) {
.text-uppercase-lg {
text-transform: uppercase;
}
}
@media screen and (max-width: 960px) {
.text-uppercase-md {
text-transform: uppercase;
}
}
@media screen and (max-width: 640px) {
.text-uppercase-sm {
text-transform: uppercase;
}
}
.text-capitalize {
text-transform: capitalize;
}
@media screen and (max-width: 1440px) {
.text-capitalize-xlg {
text-transform: capitalize;
}
}
@media screen and (max-width: 1200px) {
.text-capitalize-lg {
text-transform: capitalize;
}
}
@media screen and (max-width: 960px) {
.text-capitalize-md {
text-transform: capitalize;
}
}
@media screen and (max-width: 640px) {
.text-capitalize-sm {
text-transform: capitalize;
}
}
.text-line-through {
text-decoration: line-through;
}
@media screen and (max-width: 1440px) {
.text-line-through-xlg {
text-decoration: line-through;
}
}
@media screen and (max-width: 1200px) {
.text-line-through-lg {
text-decoration: line-through;
}
}
@media screen and (max-width: 960px) {
.text-line-through-md {
text-decoration: line-through;
}
}
@media screen and (max-width: 640px) {
.text-line-through-sm {
text-decoration: line-through;
}
}
.text-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
@media screen and (max-width: 1440px) {
.text-ellipsis-xlg {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
@media screen and (max-width: 1200px) {
.text-ellipsis-lg {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
@media screen and (max-width: 960px) {
.text-ellipsis-md {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
@media screen and (max-width: 640px) {
.text-ellipsis-sm {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
.float-left {
float: left;
}
.float-left::before, .float-left::after {
display: table;
content: '';
}
.float-left::after {
clear: both;
}
@media screen and (max-width: 1440px) {
.float-left-xlg {
float: left;
}
.float-left-xlg::before, .float-left-xlg::after {
display: table;
content: '';
}
.float-left-xlg::after {
clear: both;
}
}
@media screen and (max-width: 1200px) {
.float-left-lg {
float: left;
}
.float-left-lg::before, .float-left-lg::after {
display: table;
content: '';
}
.float-left-lg::after {
clear: both;
}
}
@media screen and (max-width: 960px) {
.float-left-md {
float: left;
}
.float-left-md::before, .float-left-md::after {
display: table;
content: '';
}
.float-left-md::after {
clear: both;
}
}
@media screen and (max-width: 640px) {
.float-left-sm {
float: left;
}
.float-left-sm::before, .float-left-sm::after {
display: table;
content: '';
}
.float-left-sm::after {
clear: both;
}
}
.float-right {
float: right;
}
.float-right::before, .float-right::after {
display: table;
content: '';
}
.float-right::after {
clear: both;
}
@media screen and (max-width: 1440px) {
.float-right-xlg {
float: right;
}
.float-right-xlg::before, .float-right-xlg::after {
display: table;
content: '';
}
.float-right-xlg::after {
clear: both;
}
}
@media screen and (max-width: 1200px) {
.float-right-lg {
float: right;
}
.float-right-lg::before, .float-right-lg::after {
display: table;
content: '';
}
.float-right-lg::after {
clear: both;
}
}
@media screen and (max-width: 960px) {
.float-right-md {
float: right;
}
.float-right-md::before, .float-right-md::after {
display: table;
content: '';
}
.float-right-md::after {
clear: both;
}
}
@media screen and (max-width: 640px) {
.float-right-sm {
float: right;
}
.float-right-sm::before, .float-right-sm::after {
display: table;
content: '';
}
.float-right-sm::after {
clear: both;
}
}
.float-none {
float: none;
}
@media screen and (max-width: 1440px) {
.float-none-xlg {
float: none;
}
}
@media screen and (max-width: 1200px) {
.float-none-lg {
float: none;
}
}
@media screen and (max-width: 960px) {
.float-none-md {
float: none;
}
}
@media screen and (max-width: 640px) {
.float-none-sm {
float: none;
}
}
.clearfix::before, .clearfix::after {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
.hidden {
display: none !important;
}
@media screen and (max-width: 1440px) {
.hidden-xlg {
display: none !important;
}
}
@media screen and (max-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
@media screen and (max-width: 960px) {
.hidden-md {
display: none !important;
}
}
@media screen and (max-width: 640px) {
.hidden-sm {
display: none !important;
}
}
.visible {
display: block !important;
}
@media screen and (max-width: 1440px) {
.visible-xlg {
display: block !important;
}
}
@media screen and (max-width: 1200px) {
.visible-lg {
display: block !important;
}
}
@media screen and (max-width: 960px) {
.visible-md {
display: block !important;
}
}
@media screen and (max-width: 640px) {
.visible-sm {
display: block !important;
}
}
.visible-inline {
display: inline-block !important;
}
@media screen and (max-width: 1440px) {
.visible-inline-xlg {
display: inline-block !important;
}
}
@media screen and (max-width: 1200px) {
.visible-inline-lg {
display: inline-block !important;
}
}
@media screen and (max-width: 960px) {
.visible-inline-md {
display: inline-block !important;
}
}
@media screen and (max-width: 640px) {
.visible-inline-sm {
display: inline-block !important;
}
}
.margin-auto {
display: block;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 1440px) {
.margin-auto-xlg {
display: block;
margin-right: auto;
margin-left: auto;
}
}
@media screen and (max-width: 1200px) {
.margin-auto-lg {
display: block;
margin-right: auto;
margin-left: auto;
}
}
@media screen and (max-width: 960px) {
.margin-auto-md {
display: block;
margin-right: auto;
margin-left: auto;
}
}
@media screen and (max-width: 640px) {
.margin-auto-sm {
display: block;
margin-right: auto;
margin-left: auto;
}
}
.no-margin-top {
margin-top: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-margin-top-xlg {
margin-top: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-margin-top-lg {
margin-top: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-margin-top-md {
margin-top: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-margin-top-sm {
margin-top: 0 !important;
}
}
.no-margin-right {
margin-right: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-margin-right-xlg {
margin-right: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-margin-right-lg {
margin-right: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-margin-right-md {
margin-right: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-margin-right-sm {
margin-right: 0 !important;
}
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-margin-bottom-xlg {
margin-bottom: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-margin-bottom-lg {
margin-bottom: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-margin-bottom-md {
margin-bottom: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-margin-bottom-sm {
margin-bottom: 0 !important;
}
}
.no-margin-left {
margin-left: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-margin-left-xlg {
margin-left: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-margin-left-lg {
margin-left: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-margin-left-md {
margin-left: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-margin-left-sm {
margin-left: 0 !important;
}
}
.margin-top-vertical-unit {
margin-top: 50px;
}
@media screen and (max-width: 1440px) {
.margin-top-vertical-unit-xlg {
margin-top: 50px;
}
}
@media screen and (max-width: 1200px) {
.margin-top-vertical-unit-lg {
margin-top: 50px;
}
}
@media screen and (max-width: 960px) {
.margin-top-vertical-unit-md {
margin-top: 50px;
}
}
@media screen and (max-width: 640px) {
.margin-top-vertical-unit-sm {
margin-top: 50px;
}
}
.article-content .margin-top-vertical-unit {
margin-top: 50px;
}
@media screen and (max-width: 1440px) {
.article-content .margin-top-vertical-unit-xlg {
margin-top: 50px;
}
}
@media screen and (max-width: 1200px) {
.article-content .margin-top-vertical-unit-lg {
margin-top: 50px;
}
}
@media screen and (max-width: 960px) {
.article-content .margin-top-vertical-unit-md {
margin-top: 50px;
}
}
@media screen and (max-width: 640px) {
.article-content .margin-top-vertical-unit-sm {
margin-top: 50px;
}
}
.margin-bottom-vertical-unit {
margin-bottom: 50px;
}
@media screen and (max-width: 1440px) {
.margin-bottom-vertical-unit-xlg {
margin-bottom: 50px;
}
}
@media screen and (max-width: 1200px) {
.margin-bottom-vertical-unit-lg {
margin-bottom: 50px;
}
}
@media screen and (max-width: 960px) {
.margin-bottom-vertical-unit-md {
margin-bottom: 50px;
}
}
@media screen and (max-width: 640px) {
.margin-bottom-vertical-unit-sm {
margin-bottom: 50px;
}
}
.article-content .margin-bottom-vertical-unit {
margin-bottom: 50px;
}
@media screen and (max-width: 1440px) {
.article-content .margin-bottom-vertical-unit-xlg {
margin-bottom: 50px;
}
}
@media screen and (max-width: 1200px) {
.article-content .margin-bottom-vertical-unit-lg {
margin-bottom: 50px;
}
}
@media screen and (max-width: 960px) {
.article-content .margin-bottom-vertical-unit-md {
margin-bottom: 50px;
}
}
@media screen and (max-width: 640px) {
.article-content .margin-bottom-vertical-unit-sm {
margin-bottom: 50px;
}
}
.margin-top-vertical-unit-half {
margin-top: 25px;
}
@media screen and (max-width: 1440px) {
.margin-top-vertical-unit-half-xlg {
margin-top: 25px;
}
}
@media screen and (max-width: 1200px) {
.margin-top-vertical-unit-half-lg {
margin-top: 25px;
}
}
@media screen and (max-width: 960px) {
.margin-top-vertical-unit-half-md {
margin-top: 25px;
}
}
@media screen and (max-width: 640px) {
.margin-top-vertical-unit-half-sm {
margin-top: 25px;
}
}
.article-content .margin-top-vertical-unit-half {
margin-top: 25px;
}
@media screen and (max-width: 1440px) {
.article-content .margin-top-vertical-unit-half-xlg {
margin-top: 25px;
}
}
@media screen and (max-width: 1200px) {
.article-content .margin-top-vertical-unit-half-lg {
margin-top: 25px;
}
}
@media screen and (max-width: 960px) {
.article-content .margin-top-vertical-unit-half-md {
margin-top: 25px;
}
}
@media screen and (max-width: 640px) {
.article-content .margin-top-vertical-unit-half-sm {
margin-top: 25px;
}
}
.margin-bottom-vertical-unit-half {
margin-bottom: 25px;
}
@media screen and (max-width: 1440px) {
.margin-bottom-vertical-unit-half-xlg {
margin-bottom: 25px;
}
}
@media screen and (max-width: 1200px) {
.margin-bottom-vertical-unit-half-lg {
margin-bottom: 25px;
}
}
@media screen and (max-width: 960px) {
.margin-bottom-vertical-unit-half-md {
margin-bottom: 25px;
}
}
@media screen and (max-width: 640px) {
.margin-bottom-vertical-unit-half-sm {
margin-bottom: 25px;
}
}
.article-content .margin-bottom-vertical-unit-half {
margin-bottom: 25px;
}
@media screen and (max-width: 1440px) {
.article-content .margin-bottom-vertical-unit-half-xlg {
margin-bottom: 25px;
}
}
@media screen and (max-width: 1200px) {
.article-content .margin-bottom-vertical-unit-half-lg {
margin-bottom: 25px;
}
}
@media screen and (max-width: 960px) {
.article-content .margin-bottom-vertical-unit-half-md {
margin-bottom: 25px;
}
}
@media screen and (max-width: 640px) {
.article-content .margin-bottom-vertical-unit-half-sm {
margin-bottom: 25px;
}
}
.no-padding-top {
padding-top: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-padding-top-xlg {
padding-top: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-padding-top-lg {
padding-top: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-padding-top-md {
padding-top: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-padding-top-sm {
padding-top: 0 !important;
}
}
.no-padding-bottom {
padding-bottom: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-padding-bottom-xlg {
padding-bottom: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-padding-bottom-lg {
padding-bottom: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-padding-bottom-md {
padding-bottom: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-padding-bottom-sm {
padding-bottom: 0 !important;
}
}
.no-padding-left {
padding-left: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-padding-left-xlg {
padding-left: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-padding-left-lg {
padding-left: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-padding-left-md {
padding-left: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-padding-left-sm {
padding-left: 0 !important;
}
}
.no-padding-right {
padding-right: 0 !important;
}
@media screen and (max-width: 1440px) {
.no-padding-right-xlg {
padding-right: 0 !important;
}
}
@media screen and (max-width: 1200px) {
.no-padding-right-lg {
padding-right: 0 !important;
}
}
@media screen and (max-width: 960px) {
.no-padding-right-md {
padding-right: 0 !important;
}
}
@media screen and (max-width: 640px) {
.no-padding-right-sm {
padding-right: 0 !important;
}
}
.z-index-1 {
z-index: 1;
}
.position-relative {
position: relative;
}
._border-top {
padding-top: 30px;
padding-bottom: 20px;
border-top: 1px solid #cccbcb;
}