Quiz_dashboard/src/Styles/Tables/Table.scss
2024-09-15 10:15:30 +03:00

155 lines
3.0 KiB
SCSS

.Table,
.TableWithTabs {
@include Shadow;
background: var(--bg);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px;
margin-bottom: 20px;
min-height: 500px;
.table_tabs {
display: flex;
align-items: start;
> span {
width: 20%;
padding: 12px;
font-weight: bold;
color: var(--primary);
}
.table_tabs {
width: 70%;
}
.ant-tabs .ant-tabs-tab {
margin-left: 20px !important;
}
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
width: 100%;
}
}
.table_header {
display: flex;
width: 100%;
justify-content: space-between;
button {
padding: 10px 60px;
border-radius: 10px;
background: var(--button);
color: var(--white);
}
}
}
/// Data Table Header
.ant-table-thead tr .ant-table-cell {
background-color: transparent !important;
color: var(--primary) !important;
}
/* pagination */
.ant-spin-nested-loading ul {
}
/* Ant tabs tab active */
.ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab {
margin-left: 29px;
}
// /* Ant tabs nav list */
// .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
// width: 100%;
// }
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
width: 100%;
}
//////////////// percentage cercile
///
.circleWflash {
.ant-progress-circle {
position: relative;
&::after {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
content: url("../../../public/Icon/Flash.png");
color: #09ad8f;
}
}
}
.NameWIcon {
display: flex;
align-items: flex-start;
gap: 10px;
white-space: nowrap; /* Prevents text from wrapping */
overflow: hidden; /* Hides any content that overflows the container */
text-overflow: ellipsis;
max-width: 150px;
span {
background-color: var(--primary);
padding: 10px 12px;
border-radius: 7px;
svg {
color: var(--white);
font-size: 20px;
}
}
div {
display: flex;
flex-direction: column;
}
}
.ant-spin-nested-loading .ant-table-pagination .ant-pagination-item {
border: 1px #a098ae solid;
color: #a098ae;
border-width: 1px;
border-radius: 10px;
}
.ant-pagination .ant-pagination-item-active {
background: var(--primary);
color: white !important;
border: none !important;
}
.ColumnButton {
background: var(--primary);
color: var(--white);
font-weight: bold;
outline: none;
border: none;
border-radius: 10px;
padding: 10px 20px;
}
.PercentageField {
display: flex;
align-items: flex-end;
gap: 10px;
> div {
display: flex;
flex-direction: column;
align-items: flex-end;
}
> svg {
color: var(--primary);
font-size: 22px;
}
}
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead > tr > td {
background: #f2f4f8 !important;
color: var(--black) !important;
}
.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-next .ant-pagination-item-link {
rotate: 180deg !important;
}