_Lists.scss (6463B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .lists { 6 @include newtab-card-style; 7 8 grid-column: span 1; 9 width: var(--newtab-card-grid-layout-width); 10 11 // Match the new card width if sections are enabled 12 .has-sections-grid & { 13 width: var(--newtab-card-width-medium); 14 } 15 16 border-radius: var(--border-radius-large); 17 padding-block-start: var(--space-medium); 18 height: var(--newtab-card-height); 19 box-shadow: var(--box-shadow-card); 20 position: relative; 21 display: flex; 22 flex-direction: column; 23 24 .confetti-canvas { 25 position: absolute; 26 inset-block-start: 0; 27 inset-inline-start: 0; 28 width: 100%; 29 height: 100%; 30 pointer-events: none; 31 z-index: 1; /* adjust as needed to sit above background but below UI */ 32 } 33 34 .select-wrapper { 35 padding-inline: var(--space-medium); 36 display: flex; 37 justify-content: flex-start; 38 position: relative; 39 align-items: center; 40 gap: var(--space-medium); 41 42 moz-button { 43 visibility: hidden; 44 margin-inline-start: auto; 45 } 46 } 47 48 &:hover, 49 &:focus-within, 50 .select-wrapper panel-list[open] { 51 .select-wrapper moz-button { 52 visibility: visible; 53 } 54 } 55 56 .edit-list { 57 outline: var(--focus-outline); 58 } 59 60 .add-task-container { 61 margin-block: var(--space-small); 62 padding-inline: var(--space-medium); 63 position: relative; 64 65 .icon.icon-add { 66 position: absolute; 67 inset-block-start: 50%; 68 transform: translateY(-50%); 69 // Bug 1967304 - Custom alignment for absolutely positioned element 70 inset-inline-start: calc(var(--space-medium) + var(--space-small)); 71 72 &.icon-disabled { 73 fill: var(--text-color-disabled); 74 } 75 } 76 77 .add-task-input { 78 background: var(--button-background-color); 79 padding-block: var(--space-small); 80 // Bug 1967304 - Custom alignment for absolutely positioned element 81 padding-inline-start: calc((var(--space-large) * 2) + var(--space-xsmall)); 82 padding-inline-end: var(--space-large); 83 outline: none; 84 border: none; 85 border-radius: var(--border-radius-small); 86 width: 100%; 87 88 &:focus { 89 outline: var(--focus-outline); 90 } 91 92 &:focus::placeholder { 93 color: var(--newtab-text-primary-color); 94 } 95 96 &:disabled { 97 background-color: var(--button-background-color-ghost); 98 color: var(--text-color-disabled); 99 outline: var(--border-width) solid var(--border-color-interactive-disabled); 100 } 101 } 102 } 103 104 // Height necessary to vertically center empty state 105 .task-list-wrapper { 106 height: 100%; 107 padding-block-start: var(--space-xsmall); 108 } 109 110 fieldset { 111 margin: 0; 112 padding-block: 0; 113 padding-inline: var(--space-medium); 114 border: none; 115 overflow-y: auto; 116 max-height: 165px; 117 118 &:focus { 119 outline: var(--focus-outline); 120 } 121 } 122 123 .task-item { 124 align-items: center; 125 background: transparent; 126 border-radius: var(--border-radius-small); 127 display: flex; 128 justify-content: space-between; 129 transition: opacity 300ms ease; 130 margin-block-end: var(--space-xsmall); 131 132 // Spacing between uncompleted task and "Completed" list 133 &.task-type-tasks { 134 &:last-of-type { 135 margin-block-end: var(--space-small); 136 } 137 } 138 139 @media (prefers-reduced-motion: no-preference) { 140 &.exiting { 141 opacity: 0; 142 } 143 } 144 145 .checkbox-wrapper { 146 display: flex; 147 align-items: center; 148 flex-grow: 2; 149 padding-block: var(--space-small); 150 151 span { 152 -webkit-line-clamp: 3; 153 overflow: hidden; 154 text-overflow: ellipsis; 155 word-break: break-word; 156 white-space: normal; 157 max-width: 180px; 158 } 159 } 160 161 input[type='checkbox'] { 162 height: var(--size-item-small); 163 width: var(--size-item-small); 164 accent-color: var(--color-accent-primary); 165 margin-inline-start: var(--space-small); 166 padding: 0; 167 } 168 169 .task-label { 170 position: relative; 171 padding-inline-start: var(--space-small); 172 } 173 174 input:checked ~ .task-label { 175 color: var(--text-color-deemphasized); 176 text-decoration: line-through; 177 } 178 179 moz-button { 180 margin-inline-end: var(--space-xsmall); 181 visibility: hidden; 182 183 &:has(+ panel-list[open]) { 184 visibility: visible; 185 } 186 } 187 188 &:hover, 189 &:focus-visible, 190 &:focus-within { 191 background: var(--button-background-color); 192 193 moz-button { 194 visibility: visible; 195 } 196 } 197 198 panel-list[open] { 199 ~ moz-button { 200 visibility: visible; 201 } 202 } 203 204 .edit-task { 205 margin-inline-start: var(--space-small); 206 max-width: 180px; 207 border: none; 208 border-radius: 0; 209 user-select: text; 210 211 &:focus { 212 outline: var(--focus-outline); 213 } 214 } 215 } 216 217 .empty-list { 218 display: flex; 219 flex-direction: column; 220 justify-content: center; 221 align-items: center; 222 gap: var(--space-small); 223 height: 100%; 224 padding-block-end: var(--space-medium); 225 226 @include wallpaper-contrast-fix; 227 228 .empty-list-text { 229 margin: 0; 230 text-align: center; 231 color: var(--text-color-deemphasized); 232 font-size: var(--font-size-small); 233 padding-inline: var(--space-medium); 234 } 235 } 236 237 .completed-task-wrapper { 238 display: flex; 239 flex-direction: column; 240 gap: var(--space-small); 241 } 242 243 .completed-task-wrapper summary { 244 list-style: none; 245 246 &:focus { 247 outline: var(--focus-outline); 248 } 249 250 .completed-title { 251 color: var(--text-color-deemphasized); 252 position: relative; 253 254 &::after { 255 content: ''; 256 -moz-context-properties: fill; 257 fill: var(--button-icon-fill); 258 background-image: url('chrome://global/skin/icons/arrow-right.svg'); 259 height: var(--icon-size-small); 260 width: var(--icon-size-small); 261 position: absolute; 262 inset-inline-end: calc(-1 * var(--space-xlarge)); 263 inset-block-start: 50%; 264 transform: translateY(-50%); 265 } 266 267 &:dir(rtl)::after { 268 background-image: url('chrome://global/skin/icons/arrow-left.svg'); 269 } 270 } 271 } 272 273 .completed-task-wrapper[open] .completed-title::after { 274 background-image: url('chrome://global/skin/icons/arrow-down.svg'); 275 } 276 }