Задать вопрос

postya

Ответы пользователя по тегу CSS

  • Как при наведении на svg появлялся текст?

    @postya 
    data:() ({
hasText: false
})

meathods: {
showText() {
this.hasText = true
}

hideText() {
this.hasText = false
}
}


    <div class="flag flag--ru" @mouseover="showText" @mouseleave="hideText">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>

<p v-if="hasText">any text</p>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать меню, как на официальном сайте vue js?

    @postya
    В боком меню не теги H, а теги li в которых находится тег a. Можешь проверить это в инспекторе.
    Каждый элемент в списке в боковом меню это router link.
    У router link есть два класса
    .router-link-active и .router-link-exact-active

    ты можешь переопределить стили для активного линка либо в конкретном компоненте(например компонент бокового меню) либо в общем файле, где содержатся глобальные стили

    .router-link-exact-active {
color: red;
}


    Пример с подзаголовками:
    сделай боковое меню отдельным компонентом. Создай там переменную, в которую будешь назначать текущий роут. Показывай/ скрывай нужные блоки в зависимости от значения этой переменной
    размести нужные позаголовки в блоке, и в этом блоке добавь v-if
    Блок с подзаголовками будет открываться в закисимости от условий, которые прописаны в v-if

    Codesandbox

    Только вместо div у тебя будет router link
    Ответ написан
    2 комментария
    2 комментария

  • Как убрать border который появляется на короткое кремя в кнопке?

    @postya Автор вопроса
    Всем спасибо за ответы, но дело было в свойстве color. Не знаю даже почему o_0

    .btn-edit {
  color: transparent;
  background-color: $dark-gray;
  outline: none !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: rem(40px);
  padding: 0 0.3em;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать правильно если на компьютерах стоит разный зум в настройках windows?

    @postya Автор вопроса
    Решил вопрос таким способом. Добавил ещё одно разрешение для верстки, в котором указывается pixel ratio устройства. 1.25 - это 125% зум экрана

    @media (-webkit-min-device-pixel-ratio: 1.25) {
h2 {
    font-size: 4rem;
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему CSS по-разному отображается на других комптютерах?

    @postya Автор вопроса
    Дико извеняюсь за свой вопрос, проблема была в том, что у людей был настроен разный масштаб отображения в браузере:D
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить css в библиотеке, которую использует моё приложеине на netlify?

    @postya Автор вопроса
    Благодарю всех за ответы!
    Решил задачу следующим способом:
    в файле main.js , где я подключал vue toast notification я также подключил глобальный файл для css стилей( global.css)

    В этом файле Я могу видеть все классы от библиотеки .В нём я переопределил css селекторы.
    Но, из-за того,что файлы библиотеки имеют больший приоритет, то я для каждого переопределенного атрибута добавил флаг !important

    Пример:
    .notices .toast .toast-icon {
  height: 31px !important;
  width: 31px !important;
  min-width: 31px !important;
}


    на Netlify все изменения удачно применились
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать адаптивный текст в блоке фиксированной ширины?

    @postya Автор вопроса
    я нашел решение задачи, применив подсказки qqFE и pupenne
    Только адаптировал всё под Vue js:

    Видео

    html:
    <div class="question-card" ref="card">
      <p
        class="question-text"
        ref="cardText"
        :style="{ fontSize: fontSize + 'rem' }"
      >
        {{ text }}
      </p>
    </div>


    в разделе script:
    <script>
export default {
  beforeCreate() {
    this.calculateFontSize();
  },
  mounted() {
    this.calculateFontSize();
  },
  data: () => ({
    textWidth: 0,
    cardWidth: 0,
    cardHeight: 0,
    textHeight: 0,
    fontSize: 6,
    text:
      "there is an ejecting or lifting force, acting on a body immersed in a liquid or gas, which is equal to the weight of the volume of the liquid or gas displaced by the part of the body immersed in the liquid or gas –Law of Archimedes\n",
    options: {
      minSize: 11,
      maxSize: 120
    }
  }),
  created() {
    window.addEventListener("resize", this.calculateFontSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.calculateFontSize);
  },
  methods: {
    calculateFontSize() {
      //get font size of text and card height
      let fontSize = this.fontSize;
      let textHeight = this.$refs.cardText.clientHeight;
      let cardHeight = this.$refs.card.clientHeight - 50;

      //compare card height and text height
      if (textHeight >= cardHeight) {
        this.fontSize = fontSize - 0.1;
      } else if (textHeight < cardHeight) {
        this.fontSize = fontSize + 0.1;
      }

      //apply card width and height to category text when resizing window
      this.cardWidth = this.$refs.card.clientWidth;
      this.cardHeight = this.$refs.card.clientHeight;
      this.textWidth = this.$refs.cardText.clientWidth;
      this.textHeight = this.$refs.cardText.clientHeight;
    }
  }
};
</script>

    Получаю текущий размер шрифта текста, высоту текста и высоту карточки:
    let fontSize = this.fontSize;
      let textHeight = this.$refs.cardText.clientHeight;
      let cardHeight = this.$refs.card.clientHeight - 50;


    при каждом резайзе окна браузера вызывается метод, который сравнивает, является ли высота текста больше, высоты карточки:
    if (textHeight >= cardHeight) {
        this.fontSize = fontSize - 0.1;
      } else if (textHeight < cardHeight) {
        this.fontSize = fontSize + 0.1;
      }


    Для временной отладки,чтобы посмотреть все размеры:
    this.cardWidth = this.$refs.card.clientWidth;
      this.cardHeight = this.$refs.card.clientHeight;
      this.textWidth = this.$refs.cardText.clientWidth;
      this.textHeight = this.$refs.cardText.clientHeight;
    Ответ написан
    Комментировать
    Комментировать