diff --git a/Packages/design/app.styl b/Packages/design/app.styl index 4e35e6acb..789f4c61a 100644 --- a/Packages/design/app.styl +++ b/Packages/design/app.styl @@ -2,5 +2,6 @@ @import "{design}/styles/variables" @import "{design}/styles/mixins" @import "{design}/styles/spacings" +@import "{design}/styles/responsive" @import "{design}/styles/global" diff --git a/Packages/design/package.js b/Packages/design/package.js index 291369121..af9943905 100644 --- a/Packages/design/package.js +++ b/Packages/design/package.js @@ -17,6 +17,7 @@ Package.onUse(function(api) { 'app.styl', 'styles/global.styl', 'styles/mixins.styl', + 'styles/responsive.styl', 'styles/spacings.styl', 'styles/variables.styl', 'styles/webfonts.styl' diff --git a/Packages/design/styles/responsive.styl b/Packages/design/styles/responsive.styl new file mode 100644 index 000000000..35c5ebb13 --- /dev/null +++ b/Packages/design/styles/responsive.styl @@ -0,0 +1,23 @@ +@import "./spacings" + + +// MIN WIDTH 1601 +generateSpacings('r', $spacer-x, $spacer-y) + +@media screen and (min-width: 1441px) and (max-width: 1600px) + generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9)) + +@media screen and (min-width: 1367px) and (max-width: 1440px) + generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8)) + +@media screen and (min-width: 1281px) and (max-width: 1366px) + generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7)) + +@media screen and (min-width: 1153px) and (max-width: 1280px) + generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6)) + +@media screen and (min-width: 1025px) and (max-width: 1152px) + generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5)) + +@media screen and (max-width: 1024px) + generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4)) diff --git a/Packages/design/styles/spacings.styl b/Packages/design/styles/spacings.styl index 5511eb48c..abff5951e 100644 --- a/Packages/design/styles/spacings.styl +++ b/Packages/design/styles/spacings.styl @@ -3,36 +3,39 @@ $spacer = 1rem $spacer-x = $spacer $spacer-y = $spacer -$spacerAxis = $spacer-x, - $spacer-y +generateSpacings($prefix, $spacerX, $spacerY) + $spacerAxis = $spacerX, + $spacerY -$spacings = 0 0, - 1 1, - 2 1.5, - 3 3g + $spacings = 0 0, + 1 1, + 2 1.5, + 3 3g -$properties = m margin, - p padding + $properties = m margin, + p padding -$sides = t top 1, - r right 0, - b bottom 1, - l left 0 + $sides = t top 1, + r right 0, + b bottom 1, + l left 0 -$axes = x left right 0, - y top bottom 1 + $axes = x left right 0, + y top bottom 1 -for $property in $properties - for $spacing in $spacings - .{$property[0]}-a-{$spacing[0]} - {$property[1]} $spacing[1]*$spacer !important - for $side in $sides - .{$property[0]}-{$side[0]}-{$spacing[0]} - {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important - for $axis in $axes - .{$property[0]}-{$axis[0]}-{$spacing[0]} - {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important - {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important + for $property in $properties + for $spacing in $spacings + .{$prefix}{$property[0]}-a-{$spacing[0]} + {$property[1]} $spacing[1]*$spacer !important + for $side in $sides + .{$prefix}{$property[0]}-{$side[0]}-{$spacing[0]} + {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important + for $axis in $axes + .{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]} + {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important + {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important + +generateSpacings('', $spacer-x, $spacer-y) .m-x-auto margin-left: auto !important diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl index a21b6b93f..da7aa259d 100644 --- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl +++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl @@ -11,6 +11,7 @@ $expandedHeight = 160px .brandSection height: 30px display: inline-block + text-decoration: none img.logoImage display: inline-block diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index a3cb7f126..edc98098d 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -3,23 +3,23 @@ $switchSize = 50px .quickSwitch - position: absolute - width: 140px height: 80px + position: absolute top: 5px + width: 140px div.switchSection - float: left display: inline-block + float: left margin: 0 5px .label - display: block - text-transform: uppercase - text-align: center - font-size: 12px - font-weight: 100 color: $textSecondaryColor + display: block + font-size: 12px + font-weight: 300 + text-align: center + text-transform: uppercase .studySwitch display: block @@ -75,3 +75,17 @@ $switchSize = 50px margin: 0 width: 33% display: inline-block + +$switchSizeSmall = 30px +@media screen and (max-width: 1600px) + .quickSwitch div.switchSection + .label + font-size: 8px + font-weight: 400 + padding: 0 + .studySwitch + border-radius: 7px + .studySwitch, .seriesSwitch + &, svg + width: $switchSizeSmall + height: $switchSizeSmall diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html index 5f6aed6b4..733d68d6e 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html +++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html @@ -4,12 +4,12 @@