Ei kuvausta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_sidebar.scss 1.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /*--------------------------------------------------------------
  2. 14. Sidebar
  3. ----------------------------------------------------------------*/
  4. .cs_search_box {
  5. position: relative;
  6. border-radius: 0;
  7. input {
  8. width: 100%;
  9. border: none;
  10. outline: none;
  11. padding: 10px 40px 10px 15px;
  12. border: 1px solid $border;
  13. transition: all 0.3s ease;
  14. &::placeholder {
  15. color: $secondary;
  16. font-size: 14px;
  17. line-height: 1.572em;
  18. }
  19. &:focus {
  20. border-color: $accent;
  21. }
  22. }
  23. .cs_search_icon {
  24. position: absolute;
  25. top: 50%;
  26. transform: translateY(-50%);
  27. right: 12px;
  28. cursor: pointer;
  29. i {
  30. transition: all 1s cubic-bezier(0.28, 1.84, 0.55, -0.11);
  31. }
  32. &:hover {
  33. color: $accent;
  34. i {
  35. transform: scale(1.2);
  36. }
  37. }
  38. }
  39. }
  40. .cs_sidebar_widget_title {
  41. margin-bottom: 19px;
  42. }
  43. .cs_category_list {
  44. list-style: none;
  45. padding: 0;
  46. margin: 0;
  47. li {
  48. &:not(:last-child) {
  49. margin-bottom: 16px;
  50. }
  51. }
  52. }
  53. .cs_tags {
  54. display: flex;
  55. flex-wrap: wrap;
  56. gap: 10px;
  57. a {
  58. border: 1px solid rgba(94, 94, 94, 0.2);
  59. display: inline-block;
  60. padding: 4px 15px;
  61. &:hover {
  62. border-color: $accent;
  63. }
  64. }
  65. }
  66. .cs_sidebar_widget {
  67. &:not(:last-child) {
  68. padding-bottom: 40px;
  69. margin-bottom: 40px;
  70. border-bottom: 1px solid rgba(94, 94, 94, 0.2);
  71. }
  72. }
  73. .cs_sidebar_widget.cs_search {
  74. border: none;
  75. padding-bottom: 0;
  76. }
  77. .cs_blog_sidebar {
  78. padding-left: 100px;
  79. @media (max-width: 1400px) {
  80. padding-left: 60px;
  81. }
  82. @media (max-width: 1199px) {
  83. padding-left: 40px;
  84. }
  85. @media (max-width: 991px) {
  86. padding-left: 0px;
  87. }
  88. }