swaf-boilerplate/assets/sass/layout.scss

551 lines
7.5 KiB
SCSS

@import "vars";
@import 'fonts';
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
font-family: "Nunito Sans", sans-serif;
font-size: 16px;
color: $defaultTextColor;
background-color: $backgroundColor;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
$headerHeight: 64px;
height: $headerHeight;
line-height: $headerHeight;
$headerBackground: darken($primary, 1.75%);
background-color: $headerBackground;
.logo {
display: flex;
flex-direction: row;
padding: 0 24px 0 16px;
font-size: 32px;
color: $defaultTextColor;
&:hover {
color: lighten($defaultTextColor, 10%);
}
img {
width: $headerHeight;
height: $headerHeight;
margin-right: 16px;
}
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
font-size: 20px;
li {
list-style: none;
a, span {
display: flex;
flex-direction: row;
align-items: center;
height: 64px;
padding: 0 24px;
.feather {
--icon-size: 24px;
margin-right: 10px;
}
}
a:hover {
background-color: #fff1;
}
}
}
}
footer {
padding: 8px;
margin-top: 8px;
text-align: center;
background-color: darken($primary, 3%);
}
main {
flex: 1;
padding: 8px;
}
h1 {
text-align: center;
font-size: 32px;
& + p {
text-align: center;
font-size: 20px;
}
}
h1, h2 {
font-weight: 100;
}
h3, h4 {
font-weight: 300;
}
section > h2, .panel > h2 {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
text-align: center;
margin-top: 16px;
&::before, &::after {
content: "";
flex: 1;
margin: 0 32px;
height: 0;
border-bottom: 1px solid $defaultTextColor;
opacity: 0.2;
}
}
section > hr, .panel > hr {
border: 0;
border-bottom: 1px solid $defaultTextColor;
opacity: 0.2;
margin: 8px 32px;
}
a {
color: $secondary;
text-decoration: none;
&:hover {
color: lighten($secondary, 10%);
}
.feather.feather-external-link {
--icon-size: 16px;
margin-left: 4px;
margin-top: -3px;
}
}
form {
padding: 8px 16px;
text-align: center;
.form-field {
position: relative;
display: flex;
flex-direction: column;
margin: 16px auto;
label {
position: absolute;
left: 8px;
top: 20px;
user-select: none;
font-size: 16px;
opacity: 0.75;
transition-property: top, font-size;
transition-duration: 150ms;
transition-timing-function: ease-out;
cursor: text;
}
[disabled] {
opacity: 0.5;
& ~ label {
opacity: 0.5;
cursor: default;
}
}
input, select, .input-group {
border: 0;
border-bottom: 2px solid #0008;
color: $defaultTextColor;
background: rgba(255, 255, 255, 0.05);
border-radius: 3px 3px 0 0;
font-size: 16px;
&:focus, &:not([value=""]) {
~ label {
top: 8px;
font-size: 14px;
}
}
}
input, select, .form-display {
display: block;
padding: 32px 8px 8px 8px;
width: 100%;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
& + .feather {
position: absolute;
z-index: -1;
right: 8px;
bottom: 8px;
transition: transform 150ms ease-out;
}
// Temporary
&:focus + .feather {
transform: rotateX(180deg);
}
}
input[type=color] {
height: calc(32px + 8px + 32px);
}
&.inline {
flex-direction: row;
input[type=checkbox] {
text-align: left;
width: min-content;
height: min-content;
& ~ label {
position: static;
display: inline;
padding-left: 8px;
font-size: 16px;
}
}
}
.input-group {
display: flex;
flex-shrink: 1;
flex-direction: row;
div {
position: relative;
flex: 1;
input {
width: 100%;
margin-top: 24px;
padding-top: 8px;
border: 0;
background: transparent;
}
> input + * {
position: absolute;
top: 32px;
right: 28px;
user-select: none;
text-align: right;
}
}
}
}
.inline-fields {
display: flex;
flex-direction: row;
align-items: center;
margin: 16px auto;
.form-field {
flex: 1;
margin: 0;
}
> :not(.form-field) {
padding: 32px 8px 8px 8px;
}
+ {
.error, .hint {
margin-top: -16px;
margin-bottom: 16px;
}
}
}
.form-field, .inline-fields + {
.error, .hint {
padding: 2px;
text-align: left;
font-size: 14px;
.feather {
--icon-size: 14px;
}
}
.error {
color: $error;
}
}
}
button, .button {
display: inline-flex;
margin: 8px;
padding: 12px 16px;
border: 0;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
font-size: 16px;
font-weight: bolder;
line-height: 16px;
.feather {
--icon-size: 16px;
margin-right: 8px;
}
.feather.last {
margin-right: 0;
margin-left: 8px;
}
&, &.primary {
color: $primaryForeground;
background-color: $secondary;
&:hover {
background-color: lighten($secondary, 10%);
}
}
&.info {
background-color: $infoColor;
}
&.success {
background-color: $successColor;
}
&.warning {
background-color: $warningColor;
}
&.error, &.danger {
background-color: $errorColor;
&:hover {
background-color: lighten($errorColor, 10%);
}
}
&.transparent {
background-color: transparent;
}
&:hover {
color: $primaryForeground;
}
}
.data-table {
width: 100%;
text-align: left;
border-collapse: collapse;
th, td {
padding: 8px;
}
th {
border-bottom: 1px solid #ffffff17;
}
tr:nth-child(even) {
background-color: #ffffff08;
}
tr:hover {
background-color: #ffffff18;
}
thead tr:hover {
background-color: transparent;
}
}
// ---
// --- Layout helpers
// ---
.center {
text-align: center;
}
.container {
padding: 0 16px;
max-width: 632px;
margin: 0 auto;
}
.panel {
margin: 16px 0;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.03);
border-radius: 5px;
p {
margin: 16px 8px;
}
}
.sub-panel {
margin: 32px -18px;
padding: 1px 16px;
border: 2px solid rgba(255, 255, 255, 0.05);
border-radius: 5px;
input, select, .input-group {
border-radius: 5px !important;
border-width: 0 !important;
}
}
// ---
// --- Feather
// ---
.feather {
flex-shrink: 0;
--icon-size: 24px;
width: var(--icon-size);
height: var(--icon-size);
stroke: currentColor;
stroke-width: 2;
stroke-linecap: square;
stroke-linejoin: miter;
fill: none;
vertical-align: middle;
}
// ---
// --- Helper classes
// ---
.message {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 16px;
border-radius: 5px;
.feather {
--icon-size: 24px;
margin-right: 8px;
}
&:not(&-discreet) {
background-color: #fff5;
&[data-type=info], &[data-type=question] {
background-color: $infoColor;
}
&[data-type=success] {
background-color: $successColor;
}
&[data-type=warning] {
background-color: $warningColor;
}
&[data-type=error] {
background-color: $errorColor;
}
}
&-discreet {
opacity: 0.75;
.feather {
--icon-size: 20px;
}
}
}
.messages .message:not(:last-child) {
margin-bottom: 8px;
}
.container > .messages:first-child {
margin-top: 16px;
}
.copyable-text {
display: flex;
flex-direction: row;
margin: 8px;
background-color: darken($backgroundColor, 2%);
border-radius: 5px;
overflow: hidden;
.title {
padding: 8px;
}
.content {
overflow: hidden;
white-space: nowrap;
padding: 8px;
}
.copy-button {
margin: 0;
padding: 0;
border-radius: 0;
.feather {
--icon-size: 20px;
margin: 8px;
}
}
}