Перезапись стиля ng-Bootstrap - PullRequest
Новая
       23

Перезапись стиля ng-Bootstrap

0 голосов
/ 10 мая 2018

Я новичок в css, поэтому все еще пытаюсь понять это, но у меня есть всплывающее окно, которое я пытаюсь стилизовать.Компонент предоставляется ng-bootstrap и имеет общую стилизацию sass для темы приложения.Прямо сейчас я пытаюсь изменить ширину всплывающего окна, однако я не могу увеличить его за пределы установленной ширины (около 276 пикселей).

Чтобы уточнить, я пытался изменить стиль классов всплывающего окна в моем контейнере, но это относится только к содержимому всплывающего окна, предоставленного самим контейнером, а не к телу всплывающего окна.Кроме того, ширина содержимого увеличивается, и они переполняются, но само всплывающее окно остается того же размера.

Я попытался отредактировать файлы scss, поставляемые для темы, которые работают с телом контейнера, но ширина не увеличивается, поэтому я считаю, что ng-bootstrap применяет максимальную ширину, которую я не могукажется, переписать.Я хотел бы знать, как я могу переписать стили в моем локальном файле scss.

Ниже приведен код глобальной всплывающей темы и мой текущий код для моего локального контейнера.Глобальная тема: PopOver.scss 

.popover {
    border-radius: 0;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    .arrow {
        margin-left: -7px !important;
    }
    .popover-header {
        padding: 1rem 0.75rem 0.5rem;
        display: block;
        background-color: $secondary;
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .popover-body {
        padding: 0.5rem 1rem;
        color: $body-color;
    }
    .popover-close {
        position: absolute;
        top: -2px;
        right: 0;
        padding: 0 0.5rem;
        color: $gray-lighter;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;
        &:hover {
            cursor: pointer;
            color: $body-color;
        }
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        li {
            margin: 0 -1rem;
            padding: 0.5rem 1rem;
        }
        li:hover {
            background: $table-accent-bg;
            cursor: pointer;
            & a {
                text-decoration: none;
                color: $body-color;
            }
        }
    }
}

локальная таблица стилей: team-container.component.scss 

.team-container {

    .icon {
      background-repeat: no-repeat;
      display: inline-block
    }

    .icon.icon-team {
      background-position: -5px -5px;
      width: 25px;
      height: 25px
    }
}

Расположение файлов, если это вообще важно:

-Lib / Themes (глобальные стили тем)

-Src / app / Containers / team (здесь находится целевой popOver)

Я выяснил это!к сожалению, только путем изменения глобального класса CSS .popover, как я могу перезаписать .popover в моем локальном файле CSS?Я пробовал .popover .team-container, и он не работал.

...