www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/css/paragraphs.actions.scss

   1 @import "variables";
   2
   3 .paragraphs-actions {
   4   display: flex;
   5   align-items: center;
   6
   7   // Actions buttons (the one that are not in dropdown).
   8   > .button {
   9     margin-left: $gutter-top;
  10     margin-right: 0;
  11
  12     + .paragraphs-dropdown {
  13       margin-left: $gutter-top;
  14     }
  15   }
  16
  17   .paragraphs-icon {
  18     margin-left: $gutter-top;
  19     // We need right margin here so that lock icon is horizontally aligned with
  20     // dropdown icon.
  21     margin-right: $gutter-top;
  22   }
  23
  24   @at-root .paragraphs-dropdown {
  25     position: relative;
  26
  27     &-toggle {
  28       // Use block display so parent can have same dimensions as toggle button.
  29       display: block;
  30       height: $action-size-big;
  31       width: $action-size-big;
  32       background: url('../icons/icon-actions.svg') no-repeat center;
  33       background-size: $action-size-normal $action-size-normal;
  34       border: 1px solid transparent;
  35       border-radius: $action-border-radius;
  36       transition: all 0.1s;
  37
  38       @media (min-width: map-get($grid-breakpoints, 'md')) {
  39         height: $action-size-normal;
  40         width: $action-size-normal;
  41       }
  42
  43       &:hover, &:focus {
  44         background-color: $action-hover-bg;
  45         // Border and shadow are the same as for standard Drupal button.
  46         border: 1px solid $action-border;
  47         box-shadow: $action-hover-box-shadow;
  48         outline: none;
  49       }
  50     }
  51
  52     &-actions {
  53       display: none;
  54       // We are using overflow hidden to prevent button background overflowing
  55       // on hover.
  56       overflow: hidden;
  57       position: absolute;
  58       right: 0;
  59       top: $action-size-big;
  60       z-index: 100;
  61       background: $action-hover-bg;
  62       border: 1px solid $action-border;
  63       border-radius: 5px 0 5px 5px;
  64       box-shadow: 0 2px 6px 0 #aaa;
  65
  66       @media (min-width: map-get($grid-breakpoints, 'md')) {
  67         top: $action-size-normal;
  68       }
  69
  70       // Override seven .item-list styles - we need to do like this because we
  71       // can't remove the class without overriding template.
  72       .item-list & {
  73         list-style: none;
  74
  75         li {
  76           margin: 0;
  77           list-style: none;
  78         }
  79       }
  80     }
  81
  82     &.open {
  83       .paragraphs-dropdown-actions {
  84         display: block;
  85       }
  86     }
  87
  88     &-action {
  89       width: 100%;
  90
  91       &.button {
  92         margin-right: 0;
  93         margin-left: 0;
  94         text-align: left;
  95         background: transparent;
  96         border: 0;
  97         border-radius: 0;
  98         font-weight: 600;
  99         line-height: 18px;
 100         white-space: nowrap;
 101
 102         &:focus {
 103           border: none;
 104           box-shadow: none;
 105           outline: none;
 106         }
 107
 108         // Override seven button.css top margin.
 109         .form-wrapper & {
 110           margin-top: 0;
 111
 112           @media (max-width: map-get($grid-breakpoints, 'md')) {
 113             // Bigger touch area for small screens.
 114             padding-top: 10px;
 115             padding-bottom: 10px;
 116           }
 117         }
 118       }
 119     }
 120   }
 121
 122   &-item-icon {
 123     height: 20px;
 124     padding: 0 10px;
 125   }
 126 }