Docs: Copy page is one button group, both halves full height, icon and text centred
1 file+30−100/1 viewed
| 94 | 94 | line-height: 1.55; | |
| 95 | 95 | color: var(--g1t-muted); | |
| 96 | 96 | } | |
| 97 | + | /* A button group: one bordered box, both parts the same height, and a | |
| 98 | + | divider that runs the box's full height. */ | |
| 97 | 99 | .g1t-copy { | |
| 98 | 100 | position: relative; | |
| 99 | − | display: flex; | |
| 101 | + | display: inline-flex; | |
| 102 | + | align-items: stretch; | |
| 100 | 103 | flex-shrink: 0; | |
| 104 | + | height: 2rem; | |
| 101 | 105 | margin-top: 0.35rem; | |
| 106 | + | border: 1px solid var(--g1t-line); | |
| 102 | 107 | border-radius: 0.5rem; | |
| 103 | − | box-shadow: inset 0 0 0 1px var(--g1t-line); | |
| 104 | 108 | } | |
| 105 | 109 | .g1t-copy :global(svg) { | |
| 106 | − | width: 0.9rem; | |
| 107 | − | height: 0.9rem; | |
| 110 | + | display: block; | |
| 111 | + | flex-shrink: 0; | |
| 112 | + | width: 0.875rem; | |
| 113 | + | height: 0.875rem; | |
| 114 | + | } | |
| 115 | + | .g1t-copy-more { | |
| 116 | + | display: flex; | |
| 117 | + | margin: 0; | |
| 108 | 118 | } | |
| 109 | 119 | .g1t-copy-main, | |
| 110 | 120 | .g1t-copy-more summary { | |
| 111 | − | display: flex; | |
| 121 | + | display: inline-flex; | |
| 112 | 122 | align-items: center; | |
| 113 | − | gap: 0.4rem; | |
| 123 | + | justify-content: center; | |
| 124 | + | gap: 0.375rem; | |
| 125 | + | height: 100%; | |
| 126 | + | margin: 0; | |
| 114 | 127 | border: 0; | |
| 115 | 128 | background: transparent; | |
| 116 | − | padding: 0.3rem 0.6rem; | |
| 129 | + | padding: 0 0.625rem; | |
| 117 | 130 | font: inherit; | |
| 118 | 131 | font-size: 0.8125rem; | |
| 132 | + | font-weight: 500; | |
| 133 | + | line-height: 1; | |
| 119 | 134 | color: var(--g1t-muted); | |
| 120 | 135 | cursor: pointer; | |
| 121 | 136 | transition: color 0.15s, background 0.15s; | |
| 122 | 137 | } | |
| 123 | 138 | .g1t-copy-main { | |
| 124 | − | border-radius: 0.5rem 0 0 0.5rem; | |
| 139 | + | border-radius: calc(0.5rem - 1px) 0 0 calc(0.5rem - 1px); | |
| 125 | 140 | } | |
| 126 | 141 | .g1t-copy-more summary { | |
| 127 | 142 | list-style: none; | |
| 128 | 143 | border-left: 1px solid var(--g1t-line); | |
| 129 | − | border-radius: 0 0.5rem 0.5rem 0; | |
| 130 | − | padding-inline: 0.45rem; | |
| 144 | + | border-radius: 0 calc(0.5rem - 1px) calc(0.5rem - 1px) 0; | |
| 145 | + | padding-inline: 0.5rem; | |
| 146 | + | } | |
| 147 | + | .g1t-copy-main:focus-visible, | |
| 148 | + | .g1t-copy-more summary:focus-visible { | |
| 149 | + | outline: 2px solid var(--g1t-accent, currentColor); | |
| 150 | + | outline-offset: -2px; | |
| 131 | 151 | } | |
| 132 | 152 | .g1t-copy-more summary::-webkit-details-marker { | |
| 133 | 153 | display: none; |