popper.scss 3.13 KB
Newer Older
Eugenij's avatar
Eugenij committed
1 2
@import '../../_variables.scss';

Tae Hoon's avatar
Tae Hoon committed
3
.tooltip.popover {
Eugenij's avatar
Eugenij committed
4 5
  z-index: 8;

Tae Hoon's avatar
Tae Hoon committed
6 7 8 9 10 11 12 13
  .popover-inner {
    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
    box-shadow: var(--panelShadow);
    border-radius: $fallback--btnRadius;
    border-radius: var(--btnRadius, $fallback--btnRadius);
    background-color: $fallback--bg;
    background-color: var(--bg, $fallback--bg);
  }
Eugenij's avatar
Eugenij committed
14

Tae Hoon's avatar
Tae Hoon committed
15 16 17 18 19 20 21 22 23
  .popover-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: $fallback--bg;
    border-color: var(--bg, $fallback--bg);
  }
Eugenij's avatar
Eugenij committed
24

Tae Hoon's avatar
Tae Hoon committed
25 26 27 28 29 30 31 32
  &[x-placement^="top"] {
    margin-bottom: 5px;

    .popover-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
Tae Hoon's avatar
Tae Hoon committed
33
      bottom: -4px;
Tae Hoon's avatar
Tae Hoon committed
34 35 36 37 38
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }
Eugenij's avatar
Eugenij committed
39

Tae Hoon's avatar
Tae Hoon committed
40 41 42 43 44 45 46 47
  &[x-placement^="bottom"] {
    margin-top: 5px;

    .popover-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
Tae Hoon's avatar
Tae Hoon committed
48
      top: -4px;
Tae Hoon's avatar
Tae Hoon committed
49 50 51 52 53
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }
Eugenij's avatar
Eugenij committed
54

Tae Hoon's avatar
Tae Hoon committed
55 56 57 58 59 60 61 62
  &[x-placement^="right"] {
    margin-left: 5px;

    .popover-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
Tae Hoon's avatar
Tae Hoon committed
63
      left: -4px;
Tae Hoon's avatar
Tae Hoon committed
64 65 66 67 68
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }
Eugenij's avatar
Eugenij committed
69

Tae Hoon's avatar
Tae Hoon committed
70 71
  &[x-placement^="left"] {
    margin-right: 5px;
Eugenij's avatar
Eugenij committed
72

Tae Hoon's avatar
Tae Hoon committed
73 74 75 76 77
    .popover-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
Tae Hoon's avatar
Tae Hoon committed
78
      right: -4px;
Tae Hoon's avatar
Tae Hoon committed
79 80 81 82 83
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }
Eugenij's avatar
Eugenij committed
84

Tae Hoon's avatar
Tae Hoon committed
85 86 87 88 89
  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }
Eugenij's avatar
Eugenij committed
90

Tae Hoon's avatar
Tae Hoon committed
91 92 93 94 95
  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
Eugenij's avatar
Eugenij committed
96 97
}

HJ's avatar
HJ committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
.dropdown-menu {
  display: block;
  padding: .5rem 0;
  font-size: 1rem;
  text-align: left;
  list-style: none;
  max-width: 100vw;
  z-index: 10;

  .dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid $fallback--border;
    border-top: 1px solid var(--border, $fallback--border);
  }

  .dropdown-item {
    line-height: 21px;
    margin-right: 5px;
    overflow: auto;
    display: block;
    padding: .25rem 1.0rem .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: normal;
    border: none;
    border-radius: 0px;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    height: 100%;

    &-icon {
      padding-left: 0.5rem;

      i {
        margin-right: 0.25rem;
      }
    }

    &:hover {
      // TODO: improve the look on breeze themes
      background-color: $fallback--fg;
      background-color: var(--btn, $fallback--fg);
      box-shadow: none;
    }
  }
}