diff --git a/app/styles/dependencies/responsive.scss b/app/styles/dependencies/responsive.scss index 69c4ecc7..94218c7f 100644 --- a/app/styles/dependencies/responsive.scss +++ b/app/styles/dependencies/responsive.scss @@ -2,17 +2,18 @@ // - I know, I know, but look it closer, it makes sense // - Oh, I see. It's ok for this time... -$break-small: 320px; -$break-large: 1024px; +@mixin breakpoint($point) { + @if $point == desktop { + @media (min-width: 1200px) { @content ; } + } + @else if $point == laptop { + @media (max-width: 1200px) { @content ; } + } + @else if $point == tablet { + @media (max-width: 767px) { @content ; } + } + @else if $point == mobileonly { + @media (max-width: 480px) { @content ; } -@mixin respond-to($media) { - @if $media == handhelds { - @media only screen and (max-width: $break-small) { @content; } - } - @if $media == medium-screens { - @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; } - } - @if $media == wide-screens { - @media only screen and (min-width: $break-large) { @content; } } } diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss index 9ff1a1fc..22a4a2ec 100644 --- a/app/styles/modules/issues/issues-table.scss +++ b/app/styles/modules/issues/issues-table.scss @@ -111,4 +111,19 @@ top: auto; } } + .level-field, + .created-field { + @include breakpoint(laptop) { + display: none; + } + } + .level-field, + .created-field, + .assigned-field { + @include breakpoint(tablet) { + display: none; + } + } } + +