phc
/
orario
6
2
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Formatting

Browse Source
pull/4/head
Antonio De Lucreziis 2 years ago
parent 66b04ea7be
commit 16233adcf1
1 changed files with 155 additions and 158 deletions
Show Stats Download Patch File Download Diff File

313
src/styles/main.scss
Unescape Escape View File

@ -28,35 +28,34 @@ html {
--accent-500: #6cc16c;
--accent-900: #244624;
--bubble-red: hsl(359, 100%, 92%);
--bubble-purple: hsl(274, 100%, 92%);
--bubble-blue: hsl(241, 100%, 92%);
--bubble-yellow: hsl(50, 100%, 92%);
--bubble-green: hsl(125, 100%, 92%);
--bubble-orange: hsl(25, 100%, 92%);
--bubble-lightlightblue: hsl(176, 100%, 92%);
--bubble-lightblue: hsl(198, 100%, 92%);
--bubble-highlight-red: hsl(359, 100%, 85%);
--bubble-highlight-purple: hsl(274, 100%, 85%);
--bubble-highlight-blue: hsl(241, 100%, 85%);
--bubble-highlight-yellow: hsl(50, 100%, 85%);
--bubble-highlight-green: hsl(125, 100%, 85%);
--bubble-highlight-orange: hsl(25, 100%, 85%);
--bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
--bubble-highlight-lightblue: hsl(198, 100%, 85%);
--bubble-border-red: hsl(359, 75%, 51%);
--bubble-border-purple: hsl(274, 75%, 51%);
--bubble-border-blue: hsl(241, 75%, 51%);
--bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-border-green: hsl(125, 75%, 51%);
--bubble-border-orange: hsl(25, 75%, 51%);
--bubble-border-lightlightblue: hsl(176, 75%, 51%);
--bubble-border-lightblue: hsl(198, 75%, 51%);
--bold-on-dark: 300;
--bubble-red: hsl(359, 100%, 92%);
--bubble-purple: hsl(274, 100%, 92%);
--bubble-blue: hsl(241, 100%, 92%);
--bubble-yellow: hsl(50, 100%, 92%);
--bubble-green: hsl(125, 100%, 92%);
--bubble-orange: hsl(25, 100%, 92%);
--bubble-lightlightblue: hsl(176, 100%, 92%);
--bubble-lightblue: hsl(198, 100%, 92%);
--bubble-highlight-red: hsl(359, 100%, 85%);
--bubble-highlight-purple: hsl(274, 100%, 85%);
--bubble-highlight-blue: hsl(241, 100%, 85%);
--bubble-highlight-yellow: hsl(50, 100%, 85%);
--bubble-highlight-green: hsl(125, 100%, 85%);
--bubble-highlight-orange: hsl(25, 100%, 85%);
--bubble-highlight-lightlightblue: hsl(176, 100%, 85%);
--bubble-highlight-lightblue: hsl(198, 100%, 85%);
--bubble-border-red: hsl(359, 75%, 51%);
--bubble-border-purple: hsl(274, 75%, 51%);
--bubble-border-blue: hsl(241, 75%, 51%);
--bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-border-green: hsl(125, 75%, 51%);
--bubble-border-orange: hsl(25, 75%, 51%);
--bubble-border-lightlightblue: hsl(176, 75%, 51%);
--bubble-border-lightblue: hsl(198, 75%, 51%);
--bold-on-dark: 300;
}
body.dark-mode {
@ -74,32 +73,31 @@ body.dark-mode {
--accent-500: hsl(269, 40%, 70%);
--accent-900: hsl(269, 30%, 90%);
--bubble-red: hsl(359, 40%, 25%);
--bubble-purple: hsl(274, 40%, 25%);
--bubble-blue: hsl(241, 40%, 25%);
--bubble-yellow: hsl(50, 40%, 25%);
--bubble-green: hsl(125, 40%, 25%);
--bubble-orange: hsl(25, 40%, 25%);
--bubble-lightblue: hsl(176, 40%, 25%);
--bubble-border-red: hsl(359, 75%, 51%);
--bubble-border-purple: hsl(274, 75%, 51%);
--bubble-border-blue: hsl(241, 75%, 51%);
--bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-border-green: hsl(125, 75%, 51%);
--bubble-border-orange: hsl(25, 75%, 51%);
--bubble-border-lightblue: hsl(176, 75%, 51%);
--bubble-highlight-red: hsl(359, 40%, 31%);
--bubble-highlight-purple: hsl(274, 40%, 31%);
--bubble-highlight-blue: hsl(241, 40%, 31%);
--bubble-highlight-yellow: hsl(50, 40%, 31%);
--bubble-highlight-green: hsl(125, 40%, 31%);
--bubble-highlight-orange: hsl(25, 40%, 31%);
--bubble-highlight-lightblue: hsl(176, 40%, 31%);
--bold-on-dark: 500;
--bubble-red: hsl(359, 40%, 25%);
--bubble-purple: hsl(274, 40%, 25%);
--bubble-blue: hsl(241, 40%, 25%);
--bubble-yellow: hsl(50, 40%, 25%);
--bubble-green: hsl(125, 40%, 25%);
--bubble-orange: hsl(25, 40%, 25%);
--bubble-lightblue: hsl(176, 40%, 25%);
--bubble-border-red: hsl(359, 75%, 51%);
--bubble-border-purple: hsl(274, 75%, 51%);
--bubble-border-blue: hsl(241, 75%, 51%);
--bubble-border-yellow: hsl(50, 75%, 51%);
--bubble-border-green: hsl(125, 75%, 51%);
--bubble-border-orange: hsl(25, 75%, 51%);
--bubble-border-lightblue: hsl(176, 75%, 51%);
--bubble-highlight-red: hsl(359, 40%, 31%);
--bubble-highlight-purple: hsl(274, 40%, 31%);
--bubble-highlight-blue: hsl(241, 40%, 31%);
--bubble-highlight-yellow: hsl(50, 40%, 31%);
--bubble-highlight-green: hsl(125, 40%, 31%);
--bubble-highlight-orange: hsl(25, 40%, 31%);
--bubble-highlight-lightblue: hsl(176, 40%, 31%);
--bold-on-dark: 500;
}
$device-s-width: 600px;
@ -880,109 +878,108 @@ body {
height: 100%;
overflow: scroll;
.grid {
width: 100%;
max-width: 55rem;
display: grid;
grid-template-columns: 3rem repeat(var(--time-length), 1fr);
grid-template-rows: 2rem repeat(var(--days-length), 1fr);
border: 2px solid var(--border-500);
border-radius: 10px 10px 0 0;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
font-size: 12px;
}
.time {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
grid-row: 1;
grid-column: var(--offset) / span 2;
}
.day-name {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
grid-column: 1;
grid-row: var(--line);
}
.event {
display: flex;
flex-direction: row;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
flex-direction: column;
}
gap: 0.25rem;
align-items: center;
justify-content: center;
margin: 0.25rem;
padding: 0.5rem;
grid-row: var(--line);
grid-column: var(--offset) / span var(--length);
background-color: var(--color);
border: 3px solid var(--color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
text-align: center;
&.highlight {
background-color: var(--highlight-color);
border: 3px solid var(--highlight-color);
}
&.selected {
border: 3px solid var(--border-color);
}
}
.hline {
grid-column: 1 / 13;
grid-row: var(--line);
height: 0px;
border-bottom: 1px solid var(--border-500);
}
.vline {
grid-column: var(--offset);
grid-row: 1 / calc(2 + var(--days-length));
width: 0px;
border-right: 1px dashed var(--border-500);
}
}
.legend {
max-width: 55rem;
display: grid;
grid-template-columns: min-content 1fr;
border: 2px solid var(--border-500);
border-radius: 0 0 10px 10px;
border-top: none;
padding: 1rem;
gap: 0.5rem 1rem;
align-items: center;
justify-content: center;
width: 100%;
.name {
width: 100%;
}
.color {
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
width: 2rem;
height: 1.5rem;
background-color: var(--color);
border: 2px solid var(--border-color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
}
}
.grid {
width: 100%;
max-width: 55rem;
display: grid;
grid-template-columns: 3rem repeat(var(--time-length), 1fr);
grid-template-rows: 2rem repeat(var(--days-length), 1fr);
border: 2px solid var(--border-500);
border-radius: 10px 10px 0 0;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
font-size: 12px;
}
.time {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
grid-row: 1;
grid-column: var(--offset) / span 2;
}
.day-name {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
grid-column: 1;
grid-row: var(--line);
}
.event {
display: flex;
flex-direction: row;
@media screen and (max-width: $device-s-width), (pointer: coarse) {
flex-direction: column;
}
gap: 0.25rem;
align-items: center;
justify-content: center;
margin: 0.25rem;
padding: 0.5rem;
grid-row: var(--line);
grid-column: var(--offset) / span var(--length);
background-color: var(--color);
border: 3px solid var(--color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
text-align: center;
&.highlight {
background-color: var(--highlight-color);
border: 3px solid var(--highlight-color);
}
&.selected {
border: 3px solid var(--border-color);
}
}
.hline {
grid-column: 1 / 13;
grid-row: var(--line);
height: 0px;
border-bottom: 1px solid var(--border-500);
}
.vline {
grid-column: var(--offset);
grid-row: 1 / calc(2 + var(--days-length));
width: 0px;
border-right: 1px dashed var(--border-500);
}
}
.legend {
max-width: 55rem;
display: grid;
grid-template-columns: min-content 1fr;
border: 2px solid var(--border-500);
border-radius: 0 0 10px 10px;
border-top: none;
padding: 1rem;
gap: 0.5rem 1rem;
align-items: center;
justify-content: center;
width: 100%;
.name {
width: 100%;
}
.color {
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
width: 2rem;
height: 1.5rem;
background-color: var(--color);
border: 2px solid var(--border-color);
border-radius: 10px;
font-weight: var(--bold-on-dark);
}
}
}
.schedule-view {

Write Preview
Loading…
Cancel
Save