| | |
| | | } |
| | | |
| | | .tabs-fixed { |
| | | width: 100%; |
| | | position: relative; |
| | | top: -64px; |
| | | left: -24px; |
| | | display: flex; |
| | | } |
| | | |
| | | .tabs-arrow-left { |
| | | position: absolute; |
| | | |
| | | width: 40px; |
| | | height: 30px; |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | padding: 20px 0px; |
| | | cursor: pointer; |
| | | margin-right: 5px; |
| | | user-select: none; |
| | | } |
| | | |
| | | .tabs-arrow-right { |
| | | position: absolute; |
| | | right: -54px; |
| | | |
| | | width: 40px; |
| | | height: 30px; |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | padding: 20px 0px; |
| | | cursor: pointer; |
| | | margin-right: 5px; |
| | | user-select: none; |
| | | } |
| | | |
| | | .tabs-arrow-left { |
| | | float: left; |
| | | } |
| | | |
| | | .tabs-content { |
| | | width: 97%; |
| | | display: flex; |
| | | margin-left: 45px; |
| | | margin-right: 25px; |
| | | overflow-x: scroll; |
| | | will-change: transform; |
| | | transition: transform 0.3s; |
| | | scrollbar-width: none; /* Firefox */ |
| | | -ms-overflow-style: none; /* IE and Edge */ |
| | | } |
| | | |
| | | .tabs-content-item { |
| | | flex: 10; |
| | | display: flex; |
| | | } |
| | | |
| | | .tabs-item { |
| | | min-width: 120px; |
| | | height: 30px; |
| | | background: #fff; |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .tabs-item>div:nth-child(1) { |
| | | margin-right: 10px; |
| | | margin-left: 10px; |
| | | margin-right: 5px; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .tabs-item>div:nth-child(1):hover { |
| | |
| | | } |
| | | |
| | | .tabs-item>div:nth-child(2) { |
| | | margin-right: 10px; |
| | | margin-left: 10px; |
| | | margin-right: 5px; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .tabs-item>div:nth-child(3) { |
| | | margin-right: 10px; |
| | | margin-left: 10px; |
| | | margin-right: 5px; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .tabs-item>div:nth-child(3):hover { |