| 1 | @import '~theme';
|
| 2 |
|
| 3 | .popover {
|
| 4 | .arrow() {
|
| 5 | position: absolute;
|
| 6 | width: @popover-arrow-size;
|
| 7 | height: @popover-arrow-size;
|
| 8 | background: inherit;
|
| 9 | }
|
| 10 |
|
| 11 | position: relative;
|
| 12 | min-width: 47px;
|
| 13 | height: 47px;
|
| 14 | color: @popover-fore-color;
|
| 15 | border-radius: 4px;
|
| 16 | font-size: 13px;
|
| 17 | background-color: @popover-background-color;
|
| 18 | border: 1px solid @popover-border-color;
|
| 19 | box-sizing: border-box;
|
| 20 | box-shadow: 0 0 20px 5px rgba(6, 25, 64, 0.15);
|
| 21 | transition: all 300ms;
|
| 22 | z-index: 9999;
|
| 23 |
|
| 24 | .content {
|
| 25 | position: relative;
|
| 26 | height: 100%;
|
| 27 | padding: 0;
|
| 28 | margin: 0;
|
| 29 | list-style: none;
|
| 30 | font-size: 20px;
|
| 31 | border-radius: inherit;
|
| 32 | overflow: hidden;
|
| 33 | z-index: 1;
|
| 34 | > li {
|
| 35 | display: inline-flex;
|
| 36 | height: 100%;
|
| 37 | padding: 0 10px;
|
| 38 | align-items: center;
|
| 39 | transition: all 0.3s ease;
|
| 40 | &:hover {
|
| 41 | cursor: default;
|
| 42 | background-color: mix(#ffffff, @popover-background-color, 10%) !important;
|
| 43 | }
|
| 44 | &.active {
|
| 45 | background-color: darken(@popover-background-color, 5%);
|
| 46 | }
|
| 47 | }
|
| 48 | }
|
| 49 |
|
| 50 | .link-content {
|
| 51 | position: relative;
|
| 52 | padding: 5px;
|
| 53 | padding-bottom: 10px;
|
| 54 | height: 100%;
|
| 55 | display: flex;
|
| 56 | align-items: flex-end;
|
| 57 | box-sizing: border-box;
|
| 58 | z-index: 1;
|
| 59 | .url-input {
|
| 60 | width: 200px;
|
| 61 | border: 0;
|
| 62 | background-color: transparent;
|
| 63 | border-bottom: 1px solid #fff;
|
| 64 | font-size: 15px;
|
| 65 | color: #fff;
|
| 66 | font-family: Arial, Helvetica, sans-serif;
|
| 67 | caret-color: #fff;
|
| 68 | outline: none;
|
| 69 | margin: 0 5px;
|
| 70 | &::placeholder {
|
| 71 | color: #cccccc;
|
| 72 | }
|
| 73 | &::selection {
|
| 74 | background-color: #cccccc;
|
| 75 | color: #fff;
|
| 76 | }
|
| 77 | }
|
| 78 | .button {
|
| 79 | display: inline-block;
|
| 80 | width: 30px;
|
| 81 | background-color: transparent;
|
| 82 | outline: none;
|
| 83 | color: #fff;
|
| 84 | font-size: 18px;
|
| 85 | border: 0;
|
| 86 | &:hover {
|
| 87 | background-color: mix(#fff, @popover-background-color, 15%);
|
| 88 | }
|
| 89 | }
|
| 90 | }
|
| 91 |
|
| 92 | .popover-arrow {
|
| 93 | .arrow();
|
| 94 | visibility: hidden;
|
| 95 | &::before {
|
| 96 | .arrow();
|
| 97 | content: '';
|
| 98 | visibility: visible;
|
| 99 | transform: rotate(45deg);
|
| 100 | }
|
| 101 | }
|
| 102 |
|
| 103 | &[data-popper-placement^='top'] {
|
| 104 | > .popover-arrow {
|
| 105 | bottom: -(@popover-arrow-size / 2);
|
| 106 | &::before {
|
| 107 | border-right: 1px solid @popover-border-color;
|
| 108 | border-bottom: 1px solid @popover-border-color;
|
| 109 | }
|
| 110 | }
|
| 111 | }
|
| 112 |
|
| 113 | &[data-popper-placement^='bottom'] {
|
| 114 | > .popover-arrow {
|
| 115 | top: -(@popover-arrow-size / 2 + 1);
|
| 116 | &::before {
|
| 117 | border-left: 1px solid @popover-border-color;
|
| 118 | border-top: 1px solid @popover-border-color;
|
| 119 | }
|
| 120 | }
|
| 121 | }
|
| 122 |
|
| 123 | &[data-popper-placement^='left'] {
|
| 124 | > .popover-arrow {
|
| 125 | right: -(@popover-arrow-size / 2);
|
| 126 | &::before {
|
| 127 | border-top: 1px solid @popover-border-color;
|
| 128 | border-right: 1px solid @popover-border-color;
|
| 129 | }
|
| 130 | }
|
| 131 | }
|
| 132 |
|
| 133 | &[data-popper-placement^='right'] {
|
| 134 | > .popover-arrow {
|
| 135 | left: -(@popover-arrow-size / 2 + 1);
|
| 136 | &::before {
|
| 137 | border-left: 1px solid @popover-border-color;
|
| 138 | border-bottom: 1px solid @popover-border-color;
|
| 139 | }
|
| 140 | }
|
| 141 | }
|
| 142 | }
|