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 (3225B)

    

  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);
  11.   --_shadow: var(--shadow);
  12. }
  14. .popover-default {
  15.   &::after {
  16.     content: "";
  17.     position: absolute;
  18.     top: -1px;
  19.     bottom: -1px;
  20.     left: -1px;
  21.     right: -1px;
  22.     z-index: -1px;
  23.     box-shadow: var(--_shadow);
  24.     pointer-events: none;
  25.   }
  27.   border-radius: var(--roundness);
  28.   border-color: var(--border);
  29.   border-style: solid;
  30.   border-width: 1px;
  31.   background-color: var(--background);
  32. }
  34. .dropdown-menu {
  35.   display: block;
  36.   padding: 0;
  37.   font-size: 1em;
  38.   text-align: left;
  39.   list-style: none;
  40.   max-width: 100vw;
  41.   z-index: var(--ZI_popover_override, var(--ZI_popovers));
  42.   white-space: nowrap;
  43.   background-color: var(--background);
  45.   .dropdown-divider {
  46.     height: 0;
  47.     margin: 0.5rem 0;
  48.     overflow: hidden;
  49.     border-top: 1px solid var(--border);
  50.   }
  52.   .dropdown-item {
  53.     padding: 0;
  54.     display: grid;
  55.     grid-template-columns: 1fr;
  56.     grid-auto-flow: column;
  57.     grid-auto-columns: auto;
  58.     grid-gap: 0.5em;
  60.     .popover-wrapper {
  61.       box-sizing: border-box;
  62.       display: grid;
  63.       grid-template-columns: 1fr;
  64.     }
  66.     .extra-button {
  67.       border-left: 1px solid var(--icon);
  68.       padding-left: calc(var(--__horizontal-gap) - 1px);
  69.       border-right: var(--__horizontal-gap) solid transparent;
  70.       border-top: var(--__horizontal-gap) solid transparent;
  71.       border-bottom: var(--__horizontal-gap) solid transparent;
  72.     }
  74.     .main-button {
  75.       width: 100%;
  76.       padding: var(--__horizontal-gap) var(--__horizontal-gap);
  77.       grid-gap: var(--__horizontal-gap);
  78.       grid-template-columns: 1fr var(--__line-height);
  79.       grid-auto-flow: column;
  80.       grid-auto-columns: auto;
  82.       .menu-checkbox {
  83.         display: inline-block;
  84.         vertical-align: middle;
  85.         min-width: calc(var(--__line-height) + 1px);
  86.         max-width: calc(var(--__line-height) + 1px);
  87.         min-height: calc(var(--__line-height) + 1px);
  88.         max-height: calc(var(--__line-height) + 1px);
  89.         line-height: var(--__line-height);
  90.         text-align: center;
  91.         border-radius: 0;
  92.         box-shadow: var(--shadow);
  93.         margin-right: var(--__horizontal-gap);
  95.         &.menu-checkbox-checked::after {
  96.           font-size: 1.25em;
  97.           content: "✓";
  98.         }
  100.         &.-radio {
  101.           border-radius: 9999px;
  103.           &.menu-checkbox-checked::after {
  104.             font-size: 2em;
  105.             content: "•";
  106.           }
  107.         }
  108.       }
  109.     }
  111.     .main-button,
  112.     .extra-button {
  113.       display: grid;
  114.       box-sizing: border-box;
  115.       align-items: center;
  117.       &.disabled {
  118.         cursor: not-allowed;
  119.       }
  121.       &:not(.disabled) {
  122.         cursor: pointer;
  123.       }
  124.     }
  126.     &.-icon {
  127.       .main-button {
  128.         grid-template-columns: var(--__line-height) 1fr;
  129.       }
  130.     }
  132.     &.-icon-space {
  133.       .main-button {
  134.         padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
  135.       }
  136.     }
  138.     &.-icon-double {
  139.       .main-button {
  140.         grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
  141.       }
  142.     }
  143.   }
  144. }