styles.scss
101 lines
| 1 | .components-popover.gb-alignment-matrix-content { |
| 2 | .components-popover__content { |
| 3 | padding: 8px; |
| 4 | } |
| 5 | } |
| 6 | |
| 7 | .gb-alignment-matrix-content { |
| 8 | &-buttons { |
| 9 | display: flex; |
| 10 | justify-content: center; |
| 11 | border-bottom: 1px solid currentColor; |
| 12 | margin: 0 -8px 8px; |
| 13 | padding: 0 8px 8px; |
| 14 | gap: 10px; |
| 15 | |
| 16 | button { |
| 17 | width: 30px; |
| 18 | height: 30px; |
| 19 | padding: 0; |
| 20 | display: flex; |
| 21 | justify-content: center; |
| 22 | } |
| 23 | } |
| 24 | } |
| 25 | |
| 26 | .gb-matrix { |
| 27 | display: grid; |
| 28 | grid-template-columns: repeat(3, 1fr); |
| 29 | color: #000; |
| 30 | |
| 31 | &.is-compact { |
| 32 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'%3E%3Cpath d='M23.25 24L18.75 24L18.75 22.5L22.5 22.5L22.5 18.75L24 18.75L24 23.25C24 23.664 23.664 24 23.25 24ZM8.626 22.5L15.376 22.5L15.376 24L8.626 24L8.626 22.5ZM5.25 24L0.75 24C0.339 24 0 23.661 0 23.25L0 18.75L1.5 18.75L1.5 22.5L5.25 22.5L5.25 24ZM0 8.624L1.5 8.624L1.5 15.374L0 15.374L0 8.624ZM1.5 5.25L0 5.25L0 0.75C0 0.336 0.336 0 0.75 0L5.25 0L5.25 1.5L1.5 1.5L1.5 5.25ZM8.626 0L15.376 0L15.376 1.5L8.626 1.5L8.626 0ZM24 5.25L22.5 5.25L22.5 1.5L18.75 1.5L18.75 0L23.25 0C23.664 0 24 0.336 24 0.75L24 5.25ZM22.5 8.624L24 8.624L24 15.374L22.5 15.374L22.5 8.624Z' style='fill-rule:nonzero%3B'/%3E%3C/svg%3E"); |
| 33 | background-size: contain; |
| 34 | background-repeat: no-repeat; |
| 35 | padding: 3px; |
| 36 | |
| 37 | &.is-column { |
| 38 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'%3E%3Cpath d='M0 23.25L0 18.75L1.5 18.75L1.5 22.5L5.25 22.5L5.25 24L0.75 24C0.336 24 0 23.664 0 23.25ZM1.5 8.626L1.5 15.376L0 15.376L0 8.626L1.5 8.626ZM0 5.25L0 0.75C0 0.339 0.339 0 0.75 0L5.25 0L5.25 1.5L1.5 1.5L1.5 5.25L0 5.25ZM18.75 1.5L18.75 0L23.25 0C23.664 0 24 0.336 24 0.75L24 5.25L22.5 5.25L22.5 1.5L18.75 1.5ZM24 8.626L24 15.376L22.5 15.376L22.5 8.626L24 8.626ZM18.75 24L18.75 22.5L22.5 22.5L22.5 18.75L24 18.75L24 23.25C24 23.664 23.664 24 23.25 24L18.75 24Z' style='fill-rule:nonzero%3B' /%3E%3C/svg%3E"); |
| 39 | } |
| 40 | |
| 41 | &.is-row { |
| 42 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'%3E%3Cpath d='M23.25 24L18.75 24L18.75 22.5L22.5 22.5L22.5 18.75L24 18.75L24 23.25C24 23.664 23.664 24 23.25 24ZM8.626 22.5L15.376 22.5L15.376 24L8.626 24L8.626 22.5ZM5.25 24L0.75 24C0.339 24 0 23.661 0 23.25L0 18.75L1.5 18.75L1.5 22.5L5.25 22.5L5.25 24ZM1.5 5.25L0 5.25L0 0.75C0 0.336 0.336 0 0.75 0L5.25 0L5.25 1.5L1.5 1.5L1.5 5.25ZM8.626 0L15.376 0L15.376 1.5L8.626 1.5L8.626 0ZM24 5.25L22.5 5.25L22.5 1.5L18.75 1.5L18.75 0L23.25 0C23.664 0 24 0.336 24 0.75L24 5.25Z' style='fill-rule:nonzero%3B' /%3E%3C/svg%3E"); |
| 43 | } |
| 44 | } |
| 45 | |
| 46 | &-cell { |
| 47 | display: flex; |
| 48 | width: 40px; |
| 49 | height: 40px; |
| 50 | align-items: center; |
| 51 | justify-content: center; |
| 52 | cursor: pointer; |
| 53 | |
| 54 | &-state { |
| 55 | height: 12px; |
| 56 | width: 12px; |
| 57 | background: currentColor; |
| 58 | transition: all 120ms linear 0s; |
| 59 | } |
| 60 | |
| 61 | &.active &-state { |
| 62 | box-shadow: currentColor 0 0 0 2px; |
| 63 | border: 2px solid #fff; |
| 64 | background: currentColor; |
| 65 | } |
| 66 | |
| 67 | &:hover &-state { |
| 68 | background: #007cba; |
| 69 | } |
| 70 | |
| 71 | &:hover.active &-state { |
| 72 | background: currentColor; |
| 73 | } |
| 74 | } |
| 75 | |
| 76 | // Compact version |
| 77 | &.is-compact &-cell { |
| 78 | width: 6px; |
| 79 | height: 6px; |
| 80 | |
| 81 | &-state { |
| 82 | width: 2px; |
| 83 | height: 2px; |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | &.is-compact &-cell.active &-cell-state { |
| 88 | box-shadow: currentColor 0 0 0 1px; |
| 89 | border: none; |
| 90 | } |
| 91 | |
| 92 | &:not(.is-compact) &-cell:focus { |
| 93 | box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); |
| 94 | outline: 3px solid transparent; |
| 95 | } |
| 96 | |
| 97 | &:not(.is-compact) &-cell:focus:not(.active) &-cell-state { |
| 98 | background: #007cba; |
| 99 | } |
| 100 | } |
| 101 |