index.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .nut-cell {
  2. position: relative;
  3. display: flex;
  4. width: 100%;
  5. line-height: 20px;
  6. padding: 13px 16px;
  7. background: $white;
  8. border-radius: $cell-border-radius;
  9. box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
  10. font-size: $cell-title-font;
  11. color: $cell-color;
  12. margin: 10px 0;
  13. box-sizing: border-box;
  14. &:last-child {
  15. &::after {
  16. border: 0 !important;
  17. }
  18. }
  19. &::after {
  20. position: absolute;
  21. box-sizing: border-box;
  22. content: ' ';
  23. pointer-events: none;
  24. right: 16px;
  25. bottom: 0;
  26. left: 16px;
  27. transform: scaleY(0.5);
  28. }
  29. &:active::before {
  30. opacity: 0.1;
  31. }
  32. &--clickable {
  33. cursor: pointer;
  34. &::before {
  35. position: absolute;
  36. top: 50%;
  37. left: 50%;
  38. width: 100%;
  39. height: 100%;
  40. background-color: $black;
  41. border: inherit;
  42. border-color: $black;
  43. border-radius: inherit;
  44. transform: translate(-50%, -50%);
  45. opacity: 0;
  46. content: ' ';
  47. }
  48. }
  49. &__title {
  50. display: flex;
  51. flex-direction: column;
  52. flex: 1;
  53. &.icon {
  54. flex-direction: row;
  55. .icon {
  56. margin-right: 10px;
  57. }
  58. }
  59. &-desc {
  60. font-size: $cell-title-desc-font;
  61. }
  62. }
  63. &__value {
  64. display: inline-block;
  65. text-align: right;
  66. font-size: $cell-desc-font;
  67. color: $cell-desc-color;
  68. }
  69. &__link {
  70. color: #979797;
  71. }
  72. }