weapons-container.component.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. height: 35.5rem;
  7. display: flex;
  8. flex-direction: column;
  9. @media (height < 934px) {
  10. height: 31.5rem;
  11. }
  12. }
  13. .tab-button {
  14. height: 3rem;
  15. font-size: 1.375rem;
  16. font-weight: 600;
  17. color: black;
  18. transition: all 0.25s ease-in-out;
  19. background-color: var(--tab);
  20. border-top: 0;
  21. border-left: 0;
  22. border-bottom: 1px solid var(--border-color);
  23. border-right: 0;
  24. &.active {
  25. background-color: var(--tab-active);
  26. border-bottom: 3px solid var(--border-color);
  27. }
  28. }
  29. .tab-row {
  30. display: flex;
  31. flex: 0 0 3rem;
  32. > * {
  33. flex: 1 1 0;
  34. }
  35. > :first-child {
  36. border-radius: 10px 0 0 0;
  37. &.active {
  38. border-right: 1px solid var(--border-color);
  39. }
  40. }
  41. > :last-child {
  42. border-radius: 0 10px 0 0;
  43. border-right: 1px solid var(--border-color);
  44. &.active {
  45. border-left: 1px solid var(--border-color);
  46. }
  47. }
  48. }
  49. weapon-table,
  50. spell-table {
  51. // 100% - tabbar height
  52. height: calc(100% - 3rem);
  53. }
  54. // .button-margin {
  55. // margin: 1rem 0rem;
  56. // }