You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_box.scss 1.6KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. /*
  2. * DreamTime.
  3. * Copyright (C) DreamNet. All rights reserved.
  4. *
  5. * This program is free software: you can redistribute it and/or modify
  6. * it under the terms of the GNU General Public License 3.0 as published by
  7. * the Free Software Foundation. See <https://www.gnu.org/licenses/gpl-3.0.html>
  8. *
  9. * Written by Ivan Bravo Bravo <ivan@dreamnet.tech>, 2019.
  10. */
  11. .box {
  12. @apply bg-dark-600 shadow mb-6 border-t border-l border-r border-dark-100;
  13. .box__photo {
  14. @apply relative;
  15. @apply bg-cover bg-center;
  16. min-height: 120px;
  17. .box__photo__content {
  18. @apply absolute w-full h-full;
  19. @apply bg-black-70;
  20. }
  21. }
  22. .box__header {
  23. @apply px-4 pt-4;
  24. .title {
  25. @apply text-lg font-semibold text-generic-200;
  26. }
  27. .subtitle {
  28. @apply text-sm font-light mb-2;
  29. }
  30. }
  31. .box__content {
  32. @apply px-4 py-2;
  33. }
  34. .box__footer {
  35. @apply px-4 py-2 text-sm;
  36. @apply border-t border-dark-400;
  37. }
  38. }
  39. .box-section {
  40. @apply px-0 py-2;
  41. .box-section-item {
  42. @apply flex py-2 px-4;
  43. &:not(:last-child) {
  44. @apply border-b border-dark-400;
  45. }
  46. .item-icon {
  47. @apply mr-4 flex items-center justify-center text-2xl;
  48. width: 42px;
  49. img {
  50. @apply rounded-full;
  51. }
  52. }
  53. .item-text {
  54. @apply flex-1 flex flex-col justify-center;
  55. .item-label {
  56. @apply text-generic-300 font-semibold;
  57. transition: all 0.1s ease-in-out;
  58. }
  59. .item-description {
  60. @apply text-sm;
  61. a {
  62. @apply underline;
  63. }
  64. }
  65. }
  66. .item-extra {
  67. @apply ml-4 flex items-center justify-center;
  68. max-width: 200px;
  69. }
  70. }
  71. }