_activities.scss
10 months ago
_addons.scss
1 week ago
_agents.scss
10 months ago
_animations.scss
10 months ago
_booking_form_preview.scss
10 months ago
_bookings.scss
1 week ago
_bundles.scss
10 months ago
_buttons.scss
1 week ago
_calendars.scss
1 week ago
_categories.scss
10 months ago
_customers.scss
10 months ago
_dark.scss
10 months ago
_daterangepicker.scss
10 months ago
_elements.scss
3 weeks ago
_forms.scss
1 week ago
_grid.scss
1 year ago
_grid_variables.scss
1 year ago
_icons.scss
1 year ago
_latecheckbox.scss
10 months ago
_lateselect.scss
1 year ago
_layout.scss
1 week ago
_lightbox.scss
10 months ago
_menu.scss
1 week ago
_messages.scss
10 months ago
_misc.scss
1 week ago
_mixins.scss
10 months ago
_notifications.scss
10 months ago
_orders.scss
10 months ago
_pickr.scss
1 year ago
_processes.scss
1 week ago
_quick_availability.scss
1 week ago
_reminders.scss
1 week ago
_responsive.scss
1 week ago
_roles.scss
1 year ago
_schedule.scss
1 week ago
_services.scss
1 week ago
_settings.scss
3 weeks ago
_side-panel.scss
1 week ago
_steps.scss
1 year ago
_tables.scss
1 week ago
_type.scss
1 year ago
_updates.scss
1 week ago
_utilities.scss
1 year ago
_variables.scss
1 week ago
_widgets.scss
1 week ago
_wizard.scss
1 week 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 |