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