button.scss 977 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .button {
  2. position: relative;
  3. text-align: center;
  4. &.block {
  5. width: 100%;
  6. height: 62px;
  7. .button__bg {
  8. height: 100%;
  9. margin: auto;
  10. }
  11. .button__inner,
  12. .button__text {
  13. position: absolute;
  14. top: 10px;
  15. left: 0;
  16. width: 100%;
  17. height: 62px - 10px * 2;
  18. }
  19. }
  20. &.line-1,
  21. &.line-2 {
  22. box-sizing: border-box;
  23. .button__bg {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .button__inner,
  28. .button__text {
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .button__text {
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. padding: 4px 12px;
  40. box-sizing: border-box;
  41. }
  42. }
  43. &.line-1 {
  44. width: 85px;
  45. height: 28px;
  46. font-size: var(--button-line-1, 12px);
  47. }
  48. &.line-2 {
  49. width: 90px;
  50. height: 35px;
  51. font-size: 10px;
  52. }
  53. .button__inner {
  54. padding: 0;
  55. opacity: 0;
  56. }
  57. }