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