_activities.scss
11 months ago
_addons.scss
3 weeks ago
_agents.scss
10 months ago
_animations.scss
11 months ago
_booking_form_preview.scss
11 months ago
_bookings.scss
3 weeks ago
_bundles.scss
11 months ago
_buttons.scss
3 weeks ago
_calendars.scss
3 weeks ago
_categories.scss
11 months ago
_customers.scss
10 months ago
_dark.scss
10 months ago
_daterangepicker.scss
11 months ago
_elements.scss
1 month ago
_forms.scss
3 weeks ago
_grid.scss
1 year ago
_grid_variables.scss
1 year ago
_icons.scss
1 year ago
_latecheckbox.scss
11 months ago
_lateselect.scss
1 year ago
_layout.scss
3 weeks ago
_lightbox.scss
11 months ago
_menu.scss
3 weeks ago
_messages.scss
11 months ago
_misc.scss
3 weeks ago
_mixins.scss
11 months ago
_notifications.scss
11 months ago
_orders.scss
10 months ago
_pickr.scss
1 year ago
_processes.scss
3 weeks ago
_quick_availability.scss
3 weeks ago
_reminders.scss
3 weeks ago
_responsive.scss
3 weeks ago
_roles.scss
1 year ago
_schedule.scss
3 weeks ago
_services.scss
3 weeks ago
_settings.scss
1 month ago
_side-panel.scss
3 weeks ago
_steps.scss
1 year ago
_tables.scss
3 weeks ago
_type.scss
1 year ago
_updates.scss
3 weeks ago
_utilities.scss
1 year ago
_variables.scss
3 weeks ago
_widgets.scss
3 weeks ago
_wizard.scss
3 weeks ago
_addons.scss
399 lines
| 1 | .addons-boxes-w { |
| 2 | display: grid; |
| 3 | grid-template-columns: 1fr 1fr 1fr 1fr; |
| 4 | grid-gap: $content-padding; |
| 5 | |
| 6 | .addon-box { |
| 7 | background-color: #fff; |
| 8 | border: 1px solid $border-color-light; |
| 9 | border-radius: $border-radius-lg; |
| 10 | position: relative; |
| 11 | @include white-box(); |
| 12 | |
| 13 | &.status-is-featured { |
| 14 | } |
| 15 | |
| 16 | &.status-activated { |
| 17 | } |
| 18 | |
| 19 | &.status-installed { |
| 20 | .addon-name { |
| 21 | } |
| 22 | |
| 23 | .addon-desc { |
| 24 | } |
| 25 | } |
| 26 | |
| 27 | &.status-update-available { |
| 28 | box-shadow: inset 0px 0px 0px 2px #fce687; |
| 29 | background: #fff8cb; |
| 30 | border-color: #fce687; |
| 31 | order: -1; |
| 32 | |
| 33 | .addon-name { |
| 34 | color: #212121; |
| 35 | } |
| 36 | |
| 37 | .addon-desc { |
| 38 | color: #8e7e4b; |
| 39 | } |
| 40 | .addon-media { |
| 41 | border-color: #fff; |
| 42 | } |
| 43 | } |
| 44 | } |
| 45 | |
| 46 | .addon-label { |
| 47 | position: absolute; |
| 48 | top: -3px; |
| 49 | right: -3px; |
| 50 | background-color: #4a92ff; |
| 51 | color: #fff; |
| 52 | border-radius: 0px 10px 0px 10px; |
| 53 | line-height: 1.1; |
| 54 | padding: 4px 14px 7px 12px; |
| 55 | font-size: floor($font-size-base * 1.2); |
| 56 | font-weight: $body-font-weight-bold; |
| 57 | |
| 58 | i, span { |
| 59 | display: inline-block; |
| 60 | vertical-align: middle; |
| 61 | } |
| 62 | |
| 63 | i { |
| 64 | margin-right: 7px; |
| 65 | font-size: 16px; |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | .addon-media { |
| 70 | padding-bottom: 65%; |
| 71 | background-size: contain; |
| 72 | background-repeat: no-repeat; |
| 73 | background-position: center center; |
| 74 | margin: 5px; |
| 75 | border-radius: $border-radius-lg; |
| 76 | background-color: #fff; |
| 77 | } |
| 78 | |
| 79 | .addon-header { |
| 80 | } |
| 81 | |
| 82 | .addon-name { |
| 83 | flex: 1; |
| 84 | margin: 0px; |
| 85 | padding: 30px 20px 0px; |
| 86 | font-size: $body-font-size-m; |
| 87 | border-top: 1px solid $border-color-lightest; |
| 88 | |
| 89 | a { |
| 90 | display: inline-block; |
| 91 | text-decoration: none; |
| 92 | color: $headings-color; |
| 93 | |
| 94 | &:hover { |
| 95 | color: $brand-primary; |
| 96 | |
| 97 | span { |
| 98 | border-bottom-color: $brand-primary; |
| 99 | border-bottom-style: solid; |
| 100 | } |
| 101 | } |
| 102 | } |
| 103 | |
| 104 | span { |
| 105 | display: inline-block; |
| 106 | border-bottom: 1px dotted $headings-color; |
| 107 | margin-right: 4px; |
| 108 | } |
| 109 | |
| 110 | i { |
| 111 | font-size: 14px; |
| 112 | } |
| 113 | } |
| 114 | |
| 115 | .addon-body { |
| 116 | padding: 10px 20px 20px; |
| 117 | font-size: floor($font-size-base * 0.95); |
| 118 | line-height: 1.35; |
| 119 | color: $color-faded; |
| 120 | padding-bottom: 85px; |
| 121 | } |
| 122 | |
| 123 | .addon-desc { |
| 124 | |
| 125 | } |
| 126 | |
| 127 | .addon-meta { |
| 128 | margin-top: 10px; |
| 129 | font-size: floor($font-size-base * 0.7); |
| 130 | color: $body-color; |
| 131 | |
| 132 | div { |
| 133 | display: inline-block; |
| 134 | border: 1px dotted #6c7088; |
| 135 | margin-right: 5px; |
| 136 | padding: 1px 5px; |
| 137 | text-transform: uppercase; |
| 138 | letter-spacing: 1px; |
| 139 | line-height: 1.3; |
| 140 | border-radius: 4px; |
| 141 | } |
| 142 | } |
| 143 | |
| 144 | .addon-footer { |
| 145 | border-top: 1px solid rgba(0, 0, 0, 0.05); |
| 146 | padding: 15px; |
| 147 | text-align: right; |
| 148 | display: flex; |
| 149 | align-items: center; |
| 150 | position: absolute; |
| 151 | bottom: 0px; |
| 152 | left: 0px; |
| 153 | right: 0px; |
| 154 | background-color: #f8f8f8; |
| 155 | border-radius: 0 0 $border-radius-lg $border-radius-lg; |
| 156 | |
| 157 | .addon-price { |
| 158 | font-weight: $body-font-weight-bold; |
| 159 | margin-right: auto; |
| 160 | font-size: 22px; |
| 161 | line-height: 1; |
| 162 | color: $headings-color; |
| 163 | padding-left: 5px; |
| 164 | } |
| 165 | |
| 166 | a:first-child { |
| 167 | margin-left: auto; |
| 168 | } |
| 169 | |
| 170 | .os-addon-activated-label { |
| 171 | display: block; |
| 172 | text-align: center; |
| 173 | background-color: #caffd6; |
| 174 | border: 1px solid #57d675; |
| 175 | color: #235b33; |
| 176 | text-decoration: none; |
| 177 | padding: 0px 6px; |
| 178 | border-radius: $border-radius-sm; |
| 179 | font-weight: $body-font-weight-bold; |
| 180 | |
| 181 | .latepoint-icon { |
| 182 | font-size: 12px; |
| 183 | } |
| 184 | |
| 185 | span { |
| 186 | padding: 3px 0px; |
| 187 | display: inline-block; |
| 188 | vertical-align: middle; |
| 189 | } |
| 190 | |
| 191 | span + span { |
| 192 | margin-left: 6px; |
| 193 | } |
| 194 | } |
| 195 | |
| 196 | .os-subtle-addon-action-btn { |
| 197 | display: block; |
| 198 | color: #395175; |
| 199 | text-decoration: none; |
| 200 | border: none; |
| 201 | font-size: 12px; |
| 202 | margin-right: 10px; |
| 203 | opacity: 0.8; |
| 204 | margin-right: 10px; |
| 205 | padding-right: 10px; |
| 206 | border-right: 1px solid rgba(0, 0, 0, 0.1); |
| 207 | position: relative; |
| 208 | |
| 209 | &:focus { |
| 210 | outline: none; |
| 211 | box-shadow: none; |
| 212 | } |
| 213 | |
| 214 | &.os-loading { |
| 215 | &:before { |
| 216 | @include loading-circle($brand-primary, 12px); |
| 217 | left: -10px; |
| 218 | } |
| 219 | } |
| 220 | } |
| 221 | |
| 222 | .os-update-plugin-link { |
| 223 | display: block; |
| 224 | text-align: center; |
| 225 | background-color: #fff; |
| 226 | border: 1px solid $brand-primary; |
| 227 | color: $brand-primary; |
| 228 | text-decoration: none; |
| 229 | padding: 0px 8px; |
| 230 | border-radius: $border-radius-sm; |
| 231 | |
| 232 | span { |
| 233 | padding: 3px 0px; |
| 234 | display: inline-block; |
| 235 | vertical-align: middle; |
| 236 | } |
| 237 | |
| 238 | span + span { |
| 239 | border-left: 1px solid $brand-primary; |
| 240 | padding-left: 8px; |
| 241 | margin-left: 8px; |
| 242 | } |
| 243 | } |
| 244 | |
| 245 | .os-install-addon-btn, .os-purchase-addon-btn { |
| 246 | display: block; |
| 247 | text-align: center; |
| 248 | background-color: #fff; |
| 249 | border: 1px solid $brand-primary; |
| 250 | color: $brand-primary; |
| 251 | text-decoration: none; |
| 252 | padding: 0px 8px; |
| 253 | border-radius: $border-radius-sm; |
| 254 | |
| 255 | span { |
| 256 | padding: 3px 0px; |
| 257 | display: inline-block; |
| 258 | vertical-align: middle; |
| 259 | } |
| 260 | |
| 261 | span + span { |
| 262 | border-left: 1px solid $brand-primary; |
| 263 | padding-left: 8px; |
| 264 | margin-left: 8px; |
| 265 | } |
| 266 | |
| 267 | &.os-loading { |
| 268 | span:first-child { |
| 269 | color: transparent; |
| 270 | position: relative; |
| 271 | |
| 272 | &:before { |
| 273 | @include loading-circle($brand-primary, 12px); |
| 274 | } |
| 275 | } |
| 276 | } |
| 277 | } |
| 278 | } |
| 279 | } |
| 280 | |
| 281 | .addons-categories-wrapper { |
| 282 | display: flex; |
| 283 | align-items: center; |
| 284 | gap: 20px; |
| 285 | border-bottom: 1px solid $border-color-lightest; |
| 286 | margin-bottom: 30px; |
| 287 | |
| 288 | .addon-category-filter-trigger { |
| 289 | white-space: nowrap; |
| 290 | padding: 0 0 10px 0; |
| 291 | font-size: $body-font-size-m; |
| 292 | font-weight: $body-font-weight-bold; |
| 293 | color: $color-faded; |
| 294 | cursor: pointer; |
| 295 | position: relative; |
| 296 | &:hover:not(.is-selected){ |
| 297 | color: $headings-color; |
| 298 | } |
| 299 | &.is-selected { |
| 300 | color: $headings-color; |
| 301 | &:before { |
| 302 | content: ""; |
| 303 | position: absolute; |
| 304 | bottom: -2px; |
| 305 | left: 0; |
| 306 | right: 0; |
| 307 | border-radius: 4px; |
| 308 | height: 3px; |
| 309 | background-image: linear-gradient(45deg, var(--latepoint-admin-brand-primary, #702fdb), var(--latepoint-admin-brand-primary, #ffc390)); |
| 310 | } |
| 311 | } |
| 312 | } |
| 313 | } |
| 314 | |
| 315 | .addon-messages-wrapper { |
| 316 | margin-bottom: 30px; |
| 317 | .addon-message { |
| 318 | padding: 15px 20px; |
| 319 | background-color: #eee; |
| 320 | border: 2px solid #ddd; |
| 321 | display: flex; |
| 322 | align-items: center; |
| 323 | justify-content: space-between; |
| 324 | border-radius: 6px; |
| 325 | .message-title { |
| 326 | font-weight: $body-font-weight-bold; |
| 327 | font-size: floor($font-size-base * 1.2); |
| 328 | color: $headings-color; |
| 329 | margin-bottom: 5px; |
| 330 | } |
| 331 | .message-content { |
| 332 | color: $headings-color; |
| 333 | font-size: floor($font-size-base * 1.1); |
| 334 | font-weight: $body-font-weight-bold; |
| 335 | } |
| 336 | + .addon-message { |
| 337 | margin-top: 10px; |
| 338 | } |
| 339 | &.addon-message-type-info { |
| 340 | background-color: #f1fff1; |
| 341 | border: 1px solid #bbe2b9; |
| 342 | position: relative; |
| 343 | padding-left: 50px; |
| 344 | &:before { |
| 345 | animation: 1s ease 0s pulseSuccessPill infinite; |
| 346 | color: #fff; |
| 347 | position: absolute; |
| 348 | top: 50%; |
| 349 | transform: translateY(-50%); |
| 350 | left: 20px; |
| 351 | width: 10px; |
| 352 | height: 10px; |
| 353 | text-align: center; |
| 354 | border-radius: 50%; |
| 355 | z-index: 3; |
| 356 | content: ""; |
| 357 | background-color: #63a0e5; |
| 358 | box-shadow: 0px 1px 0px 0px rgba(123, 169, 255, 0.5), 0px 0px 0px 6px rgba(138, 179, 255, 0.25), 0px 0px 0px 10px rgba(138, 185, 255, 0.15), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.4); |
| 359 | border: 1px solid #3178d4; |
| 360 | border-bottom-color: #2f71c8; |
| 361 | } |
| 362 | } |
| 363 | } |
| 364 | .addon-message-buttons-wrapper { |
| 365 | display: flex; |
| 366 | gap: 15px; |
| 367 | align-items: center; |
| 368 | .message-link { |
| 369 | display: inline-flex; |
| 370 | font-weight: $body-font-weight-bold; |
| 371 | align-items: center; |
| 372 | text-decoration: none; |
| 373 | gap: 5px; |
| 374 | padding: 5px 10px; |
| 375 | background-color: $brand-primary; |
| 376 | color: #fff; |
| 377 | border-radius: 6px; |
| 378 | } |
| 379 | .message-dismiss-button { |
| 380 | font-weight: $body-font-weight-bold; |
| 381 | display: inline-flex; |
| 382 | align-items: center; |
| 383 | gap: 5px; |
| 384 | text-decoration: none; |
| 385 | padding: 5px 10px; |
| 386 | border-radius: 6px; |
| 387 | background-color: #cff8cf; |
| 388 | color: #000; |
| 389 | position: relative; |
| 390 | &.os-loading { |
| 391 | color: transparent; |
| 392 | &:before { |
| 393 | @include loading-circle(#000, 12px); |
| 394 | } |
| 395 | } |
| 396 | } |
| 397 | } |
| 398 | } |
| 399 |