49 lines
1.5 KiB
SCSS
49 lines
1.5 KiB
SCSS
|
/**
|
||
|
|
* Imported ionic mixins for SCSS from different components
|
||
|
|
* ----------------------------------------------------------------------------
|
||
|
|
* Extracted from
|
||
|
|
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/grid/grid.mixins.scss
|
||
|
|
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.mixins.scss
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Responsive Mixins
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
|
||
|
|
// Creates a fixed width for the grid based on the screen size
|
||
|
|
// ---------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
|
||
|
|
@each $breakpoint, $width in $widths {
|
||
|
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||
|
|
width: $width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Adds padding to the element based on breakpoints
|
||
|
|
// ---------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
@mixin make-breakpoint-padding($paddings) {
|
||
|
|
@each $breakpoint in map-keys($paddings) {
|
||
|
|
@include media-breakpoint-up($breakpoint) {
|
||
|
|
$padding: map-get($paddings, $breakpoint);
|
||
|
|
|
||
|
|
@include padding($padding);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Item Mixins
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
@mixin item-push-svg-url($fill) {
|
||
|
|
$item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
|
||
|
|
|
||
|
|
@include svg-background-image($item-detail-push-svg, true);
|
||
|
|
}
|