hypnagaga/src/docs/docs-components/CopyTable/styles.module.scss
2023-07-09 18:28:43 +01:00

85 lines
1.6 KiB
SCSS

$copyable: #0071a1;
$header: #5e81ac;
.title {
font-size: 18px;
color: #666;
margin-bottom: 5px;
font-weight: 400;
a span {
font-size: 18px;
line-height: 18px;
margin-left: 2px;
vertical-align: middle;
font-weight: bold;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
.table {
min-height: 100px;
margin: 0 0 3rem;
width: 100%;
max-width: 600px;
border-collapse: collapse;
border-radius: 4px;
overflow: hidden;
th,
td {
padding: 6px 13px;
font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
}
thead tr {
// background-color: #5e81ac;
color: #333;
text-align: left;
th {
font-weight: bold;
color: #2e3438;
border: 1px solid hsla(203, 50%, 30%, 0.15);
margin: 0;
border-collapse: collapse;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
tbody tr {
border: 1px solid hsla(203, 50%, 30%, 0.15);
border-radius: 4px;
font-size: 0.9rem;
font-weight: 400;
color: #404040;
td {
border-right: 1px solid #eee;
vertical-align: text-top;
color: #2e3438;
button {
text-align: left;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
color: $copyable;
span {
font-size: 1rem;
color: inherit;
margin-right: 5px;
vertical-align: bottom;
}
&:active {
transform: translate(1px, 1px);
}
}
}
}
tbody tr:nth-of-type(even) {
background-color: #f7fafc;
}
}