ZeenContainer

Компонент контейнер для блочных секций

Примеры:

Примеры смотрите в блочных компонентах, данный компонент является родительским

Source Code - исходный код компонента

<template>
  <div class="zeen-container">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'ZeenContainer',
}
</script>

<style lang="scss">
@import '/src/styles/mixins.scss';

:root {
  --container-base-width: 1320px;
  --container-base-padding: 0;

  @include desktopHd {
    --container-base-width: 1200px;
    --container-base-padding: 30px;
  }
  @include desktop {
    --container-base-width: 992px;
    --container-base-padding: 40px;
  }
  @include tablets {
    --container-base-width: 768px;
    --container-base-padding: 24px;
  }
  @include phones {
    --container-base-width: 100%;
    --container-base-padding: 16px;
  }
}
</style>

<style lang="scss" scoped>
.zeen-container {
  max-width: var(--container-base-width);
  padding-left: var(--container-base-padding);
  padding-right: var(--container-base-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
</style>