weapons-container.component.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. .weapon-spell-container {
  2. border: solid 1px var(--border-color);
  3. background-color: var(--field-background-color);
  4. box-shadow: var(--shadow);
  5. border-radius: 10px;
  6. display: flex;
  7. flex-direction: column;
  8. height: 100%;
  9. }
  10. .tab-button {
  11. height: 3rem;
  12. font-size: 1.375rem;
  13. font-weight: 600;
  14. color: black;
  15. transition: all 0.25s ease-in-out;
  16. background-color: var(--tab);
  17. border-top: 0;
  18. border-left: 0;
  19. border-bottom: 1px solid var(--border-color);
  20. border-right: 0;
  21. &.active {
  22. background-color: var(--tab-active);
  23. border-bottom: 3px solid var(--border-color);
  24. }
  25. }
  26. .tab-row {
  27. display: flex;
  28. flex: 0 0 3rem;
  29. > * {
  30. flex: 1 1 0;
  31. }
  32. > :first-child {
  33. border-radius: 10px 0 0 0;
  34. &.active {
  35. border-right: 1px solid var(--border-color);
  36. }
  37. }
  38. > :last-child {
  39. border-radius: 0 10px 0 0;
  40. border-right: 1px solid var(--border-color);
  41. &.active {
  42. border-left: 1px solid var(--border-color);
  43. }
  44. }
  45. }
  46. weapon-table,
  47. spell-table {
  48. // 100% - tabbar height
  49. height: calc(100% - 3rem);
  50. }