diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-27 12:41:24 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-27 12:41:24 +0300 |
commit | d71cfa8e7748a994c19ff49c88ba303a8f2389e8 (patch) | |
tree | fcccab320ce8ba3e03fc16cbc95925ebb15b7d2a /src/components | |
parent | d60c112dd9fca0aec24e0193774932df8aa27ceb (diff) | |
download | webui-vue-d71cfa8e7748a994c19ff49c88ba303a8f2389e8.tar.xz |
fix styles for dynamic pages
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 2 | ||||
-rw-r--r-- | src/components/_sila/Global/TableDatePicker.vue | 99 |
2 files changed, 14 insertions, 87 deletions
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue index d5076d77..f004c955 100644 --- a/src/components/_sila/Global/Collapse.vue +++ b/src/components/_sila/Global/Collapse.vue @@ -1,5 +1,5 @@ <template> - <div class="custom-divider"> + <div class="collapse-divider"> <b-button v-b-toggle="id" variant="collapse" diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue index c2b693ab..0eef0f8c 100644 --- a/src/components/_sila/Global/TableDatePicker.vue +++ b/src/components/_sila/Global/TableDatePicker.vue @@ -1,44 +1,16 @@ <template> - <div class="fans-date-switch"> + <b-col class="d-flex align-items-center date-picker"> <span - class="medium-12px scale-item" :class="{ 'switch-active': timeScale === 'hour' }" @click="switchTimeScale('hour')" >{{ $t('global.datePicker.lastHour') }}</span > <span - class="medium-12px scale-item" :class="{ 'switch-active': timeScale === 'day' }" @click="switchTimeScale('day')" >{{ $t('global.datePicker.lastDay') }}</span > - <!--<span - class="medium-12px scale-item" - :class="{ 'switch-active': timeScale === 'week' }" - @click="switchTimeScale('week')" - >{{ $t('global.date.lastWeek') }}</span - > - <span - class="medium-12px scale-item" - :class="{ 'switch-active': timeScale === 'mounth' }" - @click="switchTimeScale('mounth')" - >{{ $t('global.date.lastMounth') }}</span - > - <span - class="medium-12px scale-item" - :class="{ 'switch-active': timeScale === 'year' }" - @click="switchTimeScale('year')" - >{{ $t('global.date.lastYear') }}</span - > - <div class="slider" /> - <div class="date-picker"> - <img src="@/assets/images/calendar-icon.svg" /> - <span class="medium-12px scale-item">{{ - $t('global.date.selectDate') - }}</span> - </div>--> - <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> --> - </div> + </b-col> </template> <script> @@ -56,68 +28,23 @@ export default { }; </script> <style lang="scss" scoped> -.fans-date-switch { - position: relative; - +.date-picker { height: 48px; - padding: 0 16px 0 32px; - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 24px; + max-width: 150%; + width: auto; + margin: -2rem -1.95rem 0px -2rem; + padding-left: 2rem; + @include media-breakpoint-down(md) { + padding-left: 1rem; + padding-right: 1rem; + margin-left: -0.95rem; + } border-bottom: 1px solid $gray-10; + gap: 24px; } .switch-active { color: $primary; transition: ease-in 0.15s; } - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.scale-item { - cursor: pointer; -} - -.scale-item:nth-child(1).switch-active ~ .slider { - width: 92px; - left: 31px; -} - -.scale-item:nth-child(2).switch-active ~ .slider { - left: 135px; - width: 105px; -} - -.scale-item:nth-child(3).switch-active ~ .slider { - left: 255px; - width: 112px; -} - -.scale-item:nth-child(4).switch-active ~ .slider { - left: 383px; - width: 107px; -} - -.scale-item:nth-child(5).switch-active ~ .slider { - left: 508px; - width: 90px; -} - -.date-picker { - display: flex; - align-items: center; - gap: 9px; -} - -.date-clear { - margin-left: auto; - cursor: pointer; -} </style> |