github.com/DerekStrickland/consul@v1.4.5/ui-v2/app/styles/layouts/containers.scss (about)

     1  $ideal-viewport-width-num: 1260;
     2  $ideal-viewport-width: #{$ideal-viewport-width-num}px;
     3  $ideal-content-width-num: 1150;
     4  $ideal-content-width: #{$ideal-content-width-num}px;
     5  $ideal-viewport-padding-num: 24;
     6  $ideal-viewport-padding: #{$ideal-viewport-padding-num}px;
     7  $minimum-viewport-padding: 10px;
     8  $ideal-content-padding: 33px;
     9  
    10  // workaround bulma's sweeping box-sizing
    11  // so we can verify the ideal widths are the same
    12  
    13  %viewport-container {
    14    box-sizing: content-box;
    15  }
    16  %viewport-container {
    17    margin-left: auto;
    18    margin-right: auto;
    19  }
    20  %modal-dialog > *,
    21  %content-container > * {
    22    box-sizing: border-box;
    23  }
    24  %content-container-restricted {
    25    max-width: $ideal-content-width;
    26  }
    27  %viewport-container {
    28    padding-left: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100));
    29    padding-right: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100));
    30    padding-left: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
    31    padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
    32  }
    33  %content-container {
    34    padding-left: calc(33% / (#{$ideal-viewport-width-num} / 100));
    35    padding-right: calc(33% / (#{$ideal-viewport-width-num} / 100));
    36    padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100));
    37    padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100));
    38  }
    39  @media #{$--min-padding} {
    40    %viewport-container {
    41      padding-left: $minimum-viewport-padding;
    42      padding-right: $minimum-viewport-padding;
    43    }
    44  }
    45  @media #{$--max-padding} {
    46    %viewport-container {
    47      padding-left: $ideal-viewport-padding;
    48      padding-right: $ideal-viewport-padding;
    49    }
    50    %content-container {
    51      padding-left: $ideal-viewport-padding;
    52      padding-right: $ideal-viewport-padding;
    53    }
    54  }