logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

popover.scss (3203B)

    

  1. .popover-trigger-button {
  2.   display: inline-block;
  3. }
  5. .popover {
  6.   z-index: var(--ZI_popover_override, var(--ZI_popovers));
  7.   position: fixed;
  8.   min-width: 0;
  9.   max-width: calc(100vw - 20px);
  10.   box-shadow: var(--shadow);
  11. }
  13. .popover-default {
  14.   &::after {
  15.     content: "";
  16.     position: absolute;
  17.     top: -1px;
  18.     bottom: -1px;
  19.     left: -1px;
  20.     right: -1px;
  21.     z-index: -1px;
  22.     box-shadow: var(--shadow);
  23.     pointer-events: none;
  24.   }
  26.   border-radius: var(--roundness);
  27.   border-color: var(--border);
  28.   border-style: solid;
  29.   border-width: 1px;
  30.   background-color: var(--background);
  31. }
  33. .dropdown-menu {
  34.   display: block;
  35.   padding: 0;
  36.   font-size: 1em;
  37.   text-align: left;
  38.   list-style: none;
  39.   max-width: 100vw;
  40.   z-index: var(--ZI_popover_override, var(--ZI_popovers));
  41.   white-space: nowrap;
  42.   background-color: var(--background);
  44.   .dropdown-divider {
  45.     height: 0;
  46.     margin: 0.5rem 0;
  47.     overflow: hidden;
  48.     border-top: 1px solid var(--border);
  49.   }
  51.   .dropdown-item {
  52.     padding: 0;
  53.     display: grid;
  54.     grid-template-columns: 1fr;
  55.     grid-auto-flow: column;
  56.     grid-auto-columns: auto;
  58.     .popover-wrapper {
  59.       box-sizing: border-box;
  60.       display: grid;
  61.       grid-template-columns: 1fr;
  62.     }
  64.     .extra-button {
  65.       border-left: 1px solid var(--icon);
  66.       padding-left: calc(var(--__horizontal-gap) - 1px);
  67.       border-right: var(--__horizontal-gap) solid transparent;
  68.       border-top: var(--__horizontal-gap) solid transparent;
  69.       border-bottom: var(--__horizontal-gap) solid transparent;
  70.     }
  72.     .main-button {
  73.       width: 100%;
  74.       padding: var(--__horizontal-gap) var(--__horizontal-gap);
  75.       grid-gap: var(--__horizontal-gap);
  76.       grid-template-columns: 1fr var(--__line-height);
  77.       grid-auto-flow: column;
  78.       grid-auto-columns: auto;
  80.       .menu-checkbox {
  81.         display: inline-block;
  82.         vertical-align: middle;
  83.         min-width: calc(var(--__line-height) + 1px);
  84.         max-width: calc(var(--__line-height) + 1px);
  85.         min-height: calc(var(--__line-height) + 1px);
  86.         max-height: calc(var(--__line-height) + 1px);
  87.         line-height: var(--__line-height);
  88.         text-align: center;
  89.         border-radius: 0;
  90.         box-shadow: var(--shadow);
  91.         margin-right: var(--__horizontal-gap);
  93.         &.menu-checkbox-checked::after {
  94.           font-size: 1.25em;
  95.           content: "✓";
  96.         }
  98.         &.-radio {
  99.           border-radius: 9999px;
  101.           &.menu-checkbox-checked::after {
  102.             font-size: 2em;
  103.             content: "•";
  104.           }
  105.         }
  106.       }
  107.     }
  109.     .main-button,
  110.     .extra-button {
  111.       display: grid;
  112.       box-sizing: border-box;
  113.       align-items: center;
  115.       &.disabled {
  116.         cursor: not-allowed;
  117.       }
  119.       &:not(.disabled) {
  120.         cursor: pointer;
  121.       }
  122.     }
  124.     &.-icon {
  125.       .main-button {
  126.         grid-template-columns: var(--__line-height) 1fr;
  127.       }
  128.     }
  130.     &.-icon-space {
  131.       .main-button {
  132.         padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
  133.       }
  134.     }
  136.     &.-icon-double {
  137.       .main-button {
  138.         grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
  139.       }
  140.     }
  141.   }
  142. }