mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-18 19:51:17 +02:00
Code Issues Releases Wiki Activity

Changed media queries for screen specificity

Browse Source 
All @media queries now use the 'screen' mediatype, so that print stylesheets can be more easily implemented in the future, using small screen layouts, but not mobile-specific tricks.
This commit is contained in:
Angelos Chalaris
2017-04-02 19:34:04 +03:00
parent fea0188499
commit 16ce611b1d
12 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
dist/mini-default.css vendored
View File

@@ -196,7 +196,7 @@ figcaption {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 4px; } padding: 0 4px; }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
.row[class*='cols-md-'] > * { .row[class*='cols-md-'] > * {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -204,7 +204,7 @@ figcaption {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 4px; } } padding: 0 4px; } }
@media (min-width: 1280px) { @media screen and (min-width: 1280px) {
.row[class*='cols-lg-'] > * { .row[class*='cols-lg-'] > * {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -350,7 +350,7 @@ figcaption {
-webkit-order: 999; -webkit-order: 999;
order: 999; } order: 999; }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
.col-md, .col-md,
[class^='col-md-'], [class^='col-md-'],
[class^='col-md-offset-'] { [class^='col-md-offset-'] {
@@ -461,7 +461,7 @@ figcaption {
-webkit-order: 999; -webkit-order: 999;
order: 999; } } order: 999; } }
@media (min-width: 1280px) { @media screen and (min-width: 1280px) {
.col-lg, .col-lg,
[class^='col-lg-'], [class^='col-lg-'],
[class^='col-lg-offset-'] { [class^='col-lg-offset-'] {
@@ -713,7 +713,7 @@ label {
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; } flex-basis: 0; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
.input-group.fluid { .input-group.fluid {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-align-items: stretch; -webkit-align-items: stretch;
@@ -863,7 +863,7 @@ input[type="file"] {
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] { .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
border-left: 1px solid #9e9e9e; } border-left: 1px solid #9e9e9e; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
.button-group { .button-group {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-flex-direction: column; -webkit-flex-direction: column;
@@ -1015,7 +1015,7 @@ table {
table th:first-child, table td:first-child { table th:first-child, table td:first-child {
border-left: 0; } border-left: 0; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
table:not(.preset) { table:not(.preset) {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
@@ -1050,7 +1050,7 @@ table {
table:not(.preset) td:last-child { table:not(.preset) td:last-child {
border-bottom: 0; } } border-bottom: 0; } }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
table.horizontal { table.horizontal {
display: -webkit-box; display: -webkit-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -1109,7 +1109,7 @@ table {
table.horizontal tbody tr:first-child > td { table.horizontal tbody tr:first-child > td {
padding-left: 20px; } } padding-left: 20px; } }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
table.horizontal.preset { table.horizontal.preset {
display: -webkit-box; display: -webkit-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -1168,7 +1168,7 @@ table {
table.striped tr:nth-of-type(2n) > td { table.striped tr:nth-of-type(2n) > td {
background: #eeeeee; } background: #eeeeee; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
table.striped:not(.preset) tr:nth-of-type(2n) { table.striped:not(.preset) tr:nth-of-type(2n) {
background: #eeeeee; } } background: #eeeeee; } }
@@ -1210,18 +1210,18 @@ table.striped tr:nth-of-type(2n) > td {
.card > .section:last-child { .card > .section:last-child {
border-bottom: 0; } border-bottom: 0; }
@media (min-width: 320px) { @media screen and (min-width: 320px) {
.card { .card {
max-width: 320px; } } max-width: 320px; } }
/* /*
Custom elements for cards and containers. Custom elements for cards and containers.
*/ */
@media (min-width: 480px) { @media screen and (min-width: 480px) {
.card.large { .card.large {
max-width: 480px; } } max-width: 480px; } }
@media (min-width: 240px) { @media screen and (min-width: 240px) {
.card.small { .card.small {
max-width: 240px; } } max-width: 240px; } }
@@ -1343,7 +1343,7 @@ table.striped tr:nth-of-type(2n) > td {
border: 1px solid #9e9e9e; border: 1px solid #9e9e9e;
border-top: 0; } border-top: 0; }
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div { .tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
height: auto; } height: auto; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.tabs { .tabs {
@@ -1713,22 +1713,22 @@ ul.breadcrumbs {
border-radius: 50% !important; } border-radius: 50% !important; }
.responsive-margin { .responsive-margin {
margin: 4px !important; } margin: 4px !important; }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.responsive-margin { .responsive-margin {
margin: 6px !important; } } margin: 6px !important; } }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
.responsive-margin { .responsive-margin {
margin: 8px !important; } } margin: 8px !important; } }
.responsive-padding { .responsive-padding {
padding: 2px 4px !important; } padding: 2px 4px !important; }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.responsive-padding { .responsive-padding {
padding: 4px 6px !important; } } padding: 4px 6px !important; } }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
.responsive-padding { .responsive-padding {

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
dist/mini-sucroa.css vendored
View File

@@ -199,7 +199,7 @@ figcaption {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 4px; } padding: 0 4px; }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
.row[class*='cols-md-'] > * { .row[class*='cols-md-'] > * {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -207,7 +207,7 @@ figcaption {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 4px; } } padding: 0 4px; } }
@media (min-width: 1280px) { @media screen and (min-width: 1280px) {
.row[class*='cols-lg-'] > * { .row[class*='cols-lg-'] > * {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
@@ -353,7 +353,7 @@ figcaption {
-webkit-order: 999; -webkit-order: 999;
order: 999; } order: 999; }
@media (min-width: 768px) { @media screen and (min-width: 768px) {
.col-md, .col-md,
[class^='col-md-'], [class^='col-md-'],
[class^='col-md-offset-'] { [class^='col-md-offset-'] {
@@ -464,7 +464,7 @@ figcaption {
-webkit-order: 999; -webkit-order: 999;
order: 999; } } order: 999; } }
@media (min-width: 1280px) { @media screen and (min-width: 1280px) {
.col-lg, .col-lg,
[class^='col-lg-'], [class^='col-lg-'],
[class^='col-lg-offset-'] { [class^='col-lg-offset-'] {
@@ -703,7 +703,7 @@ label {
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; } flex-basis: 0; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
.input-group.fluid { .input-group.fluid {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-align-items: stretch; -webkit-align-items: stretch;
@@ -853,7 +853,7 @@ input[type="file"] {
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] { .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
border-left: 1px solid #a9a2ba; } border-left: 1px solid #a9a2ba; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
.button-group { .button-group {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-flex-direction: column; -webkit-flex-direction: column;
@@ -1008,7 +1008,7 @@ table {
table th:first-child, table td:first-child { table th:first-child, table td:first-child {
border-left: 0; } border-left: 0; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
table:not(.preset) { table:not(.preset) {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
@@ -1047,7 +1047,7 @@ table {
table.striped tr:nth-of-type(2n) > td { table.striped tr:nth-of-type(2n) > td {
background: #ece4ff; } background: #ece4ff; }
@media (max-width: 767px) { @media screen and (max-width: 767px) {
table.striped:not(.preset) tr:nth-of-type(2n) { table.striped:not(.preset) tr:nth-of-type(2n) {
background: #ece4ff; } } background: #ece4ff; } }
@@ -1090,18 +1090,18 @@ table.striped tr:nth-of-type(2n) > td {
.card > .section:last-child { .card > .section:last-child {
border-bottom: 0; } border-bottom: 0; }
@media (min-width: 320px) { @media screen and (min-width: 320px) {
.card { .card {
max-width: 320px; } } max-width: 320px; } }
/* /*
Custom elements for cards and containers. Custom elements for cards and containers.
*/ */
@media (min-width: 480px) { @media screen and (min-width: 480px) {
.card.large { .card.large {
max-width: 480px; } } max-width: 480px; } }
@media (min-width: 240px) { @media screen and (min-width: 240px) {
.card.small { .card.small {
max-width: 240px; } } max-width: 240px; } }
@@ -1242,7 +1242,7 @@ table.striped tr:nth-of-type(2n) > td {
height: auto; } height: auto; }
.tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type { .tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.tabs { .tabs {
@@ -1596,22 +1596,22 @@ ul.breadcrumbs {
border-radius: 50% !important; } border-radius: 50% !important; }
.responsive-margin { .responsive-margin {
margin: 3px !important; } margin: 3px !important; }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.responsive-margin { .responsive-margin {
margin: 6px !important; } } margin: 6px !important; } }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
.responsive-margin { .responsive-margin {
margin: 10px !important; } } margin: 10px !important; } }
.responsive-padding { .responsive-padding {
padding: 2px 3px !important; } padding: 2px 3px !important; }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.responsive-padding { .responsive-padding {
padding: 4px 6px !important; } } padding: 4px 6px !important; } }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
.responsive-padding { .responsive-padding {

2
dist/mini-sucroa.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View File

@@ -922,3 +922,7 @@
- Added external variables to `contextual`. - Added external variables to `contextual`.
- Updated defaults for `progress` module, no externals were needed. - Updated defaults for `progress` module, no externals were needed.
- Added more default values to `utility`. Default and external adding seems complete, I might have missed something, but good enough for now. - Added more default values to `utility`. Default and external adding seems complete, I might have missed something, but good enough for now.
## 20170402
- Updated `@media` queries in all modules to utilize `screen`, so that layout changes will only apply to screens (irrelevant in print). `print` stylesheets are coming later down the line and all layouts will print as if in *small* screens (basically `col-sm-...` layouts), to simplifiy everything. Size increased from `6.79KB` to `6.82KB`, worthwhile cost.

2
src/mini/_card.scss
View File

@@ -76,7 +76,7 @@ $fore-color: black !default; // [External variable - core] Foreground
} }
} }
// Responsiveness (if the screen is larger than card, set max-width) // Responsiveness (if the screen is larger than card, set max-width)
@media (min-width: #{$card-normal-width}) { @media screen and (min-width: #{$card-normal-width}) {
.#{$card-name} { .#{$card-name} {
max-width: $card-normal-width; max-width: $card-normal-width;
} }

2
src/mini/_card_mixins.scss
View File

@@ -12,7 +12,7 @@
} }
} }
@else { @else {
@media (min-width: #{$card-alt-size-width}) { @media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} { .#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width; max-width: $card-alt-size-width;
} }

16
src/mini/_grid.scss
View File

@@ -55,7 +55,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
@media (min-width: #{$grid-small-breakpoint}){ @media screen and (min-width: #{$grid-small-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -66,7 +66,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@media (min-width: #{$grid-medium-breakpoint}){ @media screen and (min-width: #{$grid-medium-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -77,7 +77,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@media (min-width: #{$grid-large-breakpoint}){ @media screen and (min-width: #{$grid-large-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -99,7 +99,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
@media (min-width: #{$grid-medium-breakpoint}){ @media screen and (min-width: #{$grid-medium-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -110,7 +110,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@media (min-width: #{$grid-large-breakpoint}){ @media screen and (min-width: #{$grid-large-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -212,7 +212,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Legacy grid system definitions. // Legacy grid system definitions.
@if $use-four-step-grid { @if $use-four-step-grid {
// Small screen breakpoint. // Small screen breakpoint.
@media (min-width: #{$grid-small-breakpoint}){ @media screen and (min-width: #{$grid-small-breakpoint}){
// Grid column generic definitions for small screens. // Grid column generic definitions for small screens.
.#{$grid-column-prefix}-#{$grid-small-prefix}, .#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
@@ -386,7 +386,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
} }
// The rest is mixed definitions. // The rest is mixed definitions.
// Medium screen breakpoint. // Medium screen breakpoint.
@media (min-width: #{$grid-medium-breakpoint}){ @media screen and (min-width: #{$grid-medium-breakpoint}){
// Grid column generic definitions for medium screens. // Grid column generic definitions for medium screens.
.#{$grid-column-prefix}-#{$grid-medium-prefix}, .#{$grid-column-prefix}-#{$grid-medium-prefix},
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
@@ -472,7 +472,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
} }
} }
// Large screen breakpoint. // Large screen breakpoint.
@media (min-width: #{$grid-large-breakpoint}){ @media screen and (min-width: #{$grid-large-breakpoint}){
// Grid column generic definitions for large screens. // Grid column generic definitions for large screens.
.#{$grid-column-prefix}-#{$grid-large-prefix}, .#{$grid-column-prefix}-#{$grid-large-prefix},
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],

4
src/mini/_input_control.scss
View File

@@ -110,7 +110,7 @@ legend {
} }
// Responsiveness for fluid input groups // Responsiveness for fluid input groups
@if $include-fluid-input-group { @if $include-fluid-input-group {
@media (max-width: #{$input-group-mobile-breakpoint}) { @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
.#{$input-group-name}.#{$input-group-fluid-name} { .#{$input-group-name}.#{$input-group-fluid-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -330,7 +330,7 @@ a[role="button"], label[role="button"], [role="button"] {
} }
} }
// Responsiveness for button groups // Responsiveness for button groups
@media (max-width: #{$button-group-mobile-breakpoint}) { @media screen and (max-width: #{$button-group-mobile-breakpoint}) {
.#{$button-group-name} { .#{$button-group-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

2
src/mini/_tab.scss
View File

@@ -212,7 +212,7 @@ $fore-color: black !default; // [External variable - core] Foreground
} }
} }
// Responsiveness // Responsiveness
@media (max-width: #{$tab-stacked-breakpoint}) { @media screen and (max-width: #{$tab-stacked-breakpoint}) {
.#{$tab-container-name} { .#{$tab-container-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

8
src/mini/_table.scss
View File

@@ -64,7 +64,7 @@ table {
} }
} }
// Mobile view for responsive tables. // Mobile view for responsive tables.
@media (max-width: #{$table-mobile-breakpoint}) { @media screen and (max-width: #{$table-mobile-breakpoint}) {
table:not(.#{$table-not-responsive-name}) { table:not(.#{$table-not-responsive-name}) {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
@@ -121,7 +121,7 @@ table {
} }
// Horizontal table view. // Horizontal table view.
@if $include-horizontal-table { @if $include-horizontal-table {
@media (min-width: #{$table-horizontal-breakpoint}) { @media screen and (min-width: #{$table-horizontal-breakpoint}) {
table.#{$table-horizontal-name} { table.#{$table-horizontal-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
@@ -209,7 +209,7 @@ table {
} }
} }
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive. // Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
@media (max-width: #{$table-mobile-breakpoint}) { @media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-horizontal-name}.#{$table-not-responsive-name} { table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
@@ -299,7 +299,7 @@ table {
} }
} }
// Responsiveness for striped tables. // Responsiveness for striped tables.
@media (max-width: #{$table-mobile-breakpoint}) { @media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) { table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) {
tr:nth-of-type(2n) { tr:nth-of-type(2n) {
background: $table-striped-alt-body-back-color; background: $table-striped-alt-body-back-color;

8
src/mini/_utility_mixins.scss
View File

@@ -40,12 +40,12 @@
.#{$margin-name} { .#{$margin-name} {
margin: $margin-small-value !important; margin: $margin-small-value !important;
} }
@media (min-width: #{$margin-medium-breakpoint}) { @media screen and (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-medium-value !important; margin: $margin-medium-value !important;
} }
} }
@media (min-width: #{$margin-large-breakpoint}) { @media screen and (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-large-value !important; margin: $margin-large-value !important;
} }
@@ -65,12 +65,12 @@
.#{$padding-name} { .#{$padding-name} {
padding: $padding-small-value !important; padding: $padding-small-value !important;
} }
@media (min-width: #{$padding-medium-breakpoint}) { @media screen and (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} { .#{$padding-name} {
padding: $padding-medium-value !important; padding: $padding-medium-value !important;
} }
} }
@media (min-width: #{$padding-large-breakpoint}) { @media screen and (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} { .#{$padding-name} {
padding: $padding-large-value !important; padding: $padding-large-value !important;
} }