leftbar.scss 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .leftbar {
  2. width: 18.7%;
  3. margin-right: 3.1%;
  4. display: -webkit-flex;
  5. display: -ms-flex;
  6. display: flex;
  7. flex-direction: column;
  8. &__title {
  9. padding-left: 58px;
  10. height: 45px;
  11. background: #ebebeb;
  12. border-radius: 25px 0 0 25px;
  13. display: -webkit-flex;
  14. display: -ms-flex;
  15. display: flex;
  16. flex-direction: row;
  17. justify-content: space-between;
  18. align-content: center;
  19. align-items: center;
  20. font-family: $fontcuprum;
  21. font-size: 20px;
  22. color: #004d7b;
  23. font-weight: bold;
  24. flex-wrap: wrap;
  25. &--popularservice {
  26. padding-left: 10px;
  27. border-radius: 0;
  28. }
  29. }
  30. &__subtitle {
  31. background: #d7d7d7;
  32. border-radius: 10px 0 0 0 / 10px 0 0 0;
  33. padding: 10px;
  34. line-height: 20px;
  35. color: #3b434d;
  36. font-size: 17px;
  37. font-family: $fontcuprum;
  38. font-weight: bold;
  39. margin-bottom: 20px;
  40. }
  41. &__item {
  42. position: relative;
  43. display: -webkit-flex;
  44. display: -ms-flex;
  45. display: flex;
  46. flex-direction: column;
  47. margin-bottom: 40px;
  48. &::before {
  49. content: '';
  50. position: absolute;
  51. width: 51px;
  52. height: 51px;
  53. border-radius: 50%;
  54. left: -10px;
  55. top: -8px;
  56. border: 5px solid #ffffff;
  57. }
  58. &--search::before {
  59. background: url("../img/icon_leftbar_search@2x.png") 50% 50% / 26px 26px no-repeat #004d7b;
  60. }
  61. &--innermenu_01::before {
  62. background: url("../img/icon_leftbar_innermenu_01@2x.png") 50% 50% / 23px 33px no-repeat #004d7b;
  63. }
  64. &--popularservice::before {
  65. visibility: hidden;
  66. }
  67. }
  68. &__arrow {
  69. padding: 5px 8px;
  70. transform: rotate(0deg);
  71. &.active {
  72. transform: rotate(90deg);
  73. }
  74. }
  75. @media screen and (max-width: 1220px) {
  76. width: 100%;
  77. }
  78. }