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