v0.9.5 - css stuff compile

This commit is contained in:
Neerholt 2020-08-13 10:02:56 +02:00
parent 58fba39538
commit ea3ddb38a6
2 changed files with 149 additions and 14 deletions

View File

@ -1,19 +1,23 @@
@charset "UTF-8";
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-Regular.ttf");
font-weight: normal;
}
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-SemiBold.ttf");
font-weight: 600;
}
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-Bold.ttf");
font-weight: 700;
}
form {
max-width: 100%;
padding: 0 0.45rem 0 0.45rem;
@ -66,7 +70,8 @@ input[type=file] {
display: inline-flex;
}
input, select {
input,
select {
border: grey solid 2px;
border-radius: 4px;
background-color: transparent;
@ -284,7 +289,8 @@ span.toggle__text.sde-blue {
font-family: "Titillium Web";
}
html, body {
html,
body {
width: 100%;
margin: 0;
padding: 0;
@ -532,6 +538,7 @@ a {
* Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
.fa,
.fas,
.far,
@ -611,6 +618,7 @@ a {
margin-left: 2.5em;
padding-left: 0;
}
.fa-ul > li {
position: relative;
}
@ -644,6 +652,7 @@ a {
.fab.fa-pull-left {
margin-right: 0.3em;
}
.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
@ -666,6 +675,7 @@ a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@ -675,10 +685,12 @@ a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(90deg);
@ -704,7 +716,8 @@ a {
transform: scale(1, -1);
}
.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
transform: scale(-1, -1);
}
@ -750,6 +763,7 @@ a {
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
content: "\F26E";
}
@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */
width: 1px;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.sr-only-focusable:active,
.sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */
* Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */
src: url("/webfonts/fa-solid-900.eot");
src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
@ -6612,7 +6629,8 @@ main {
margin: 7rem 0 5rem 0;
}
header, #menu {
header,
#menu {
padding: 1.25rem 1.75rem 0 1.75rem;
}
@ -6662,9 +6680,11 @@ main {
justify-content: center;
}
}
.mock-up-link {
display: none;
}
@media (min-width: 768px) {
.mock-up-link {
display: block;
@ -6678,6 +6698,7 @@ main {
max-width: 414px;
overflow-y: auto;
}
@media (min-width: 415px) {
.main-container-wrapper {
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
@ -6697,14 +6718,17 @@ main {
top: -25px;
width: 80px;
}
.header__btn .icon {
display: inline-block;
}
.header__btn--left {
left: -25px;
padding-left: 38px;
text-align: left;
}
.header__btn--right {
padding-right: 32px;
right: -25px;
@ -6716,10 +6740,12 @@ main {
padding: 16px;
margin-bottom: 24px;
}
.calendar-container__header {
display: flex;
justify-content: space-between;
}
.calendar-container__btn {
background: transparent;
border: 0;
@ -6728,6 +6754,7 @@ main {
outline: none;
color: #E9E8E8;
}
.calendar-container__title {
color: #222741;
font-size: 20px;
@ -6742,6 +6769,7 @@ main {
margin-top: 12px;
width: 100%;
}
.calendar-table__item {
border-radius: 50%;
color: #424588;
@ -6754,17 +6782,21 @@ main {
justify-content: center;
cursor: pointer;
}
.calendar-table__item:hover > span {
color: white;
}
.calendar-table__row {
display: flex;
justify-content: center;
}
.calendar-table__header {
border-bottom: 2px solid #F2F6F8;
margin-bottom: 4px;
}
.calendar-table__header .calendar-table__col {
display: inline-block;
color: #99A4AE;
@ -6776,95 +6808,115 @@ main {
width: 40px;
height: 18px;
}
@media (min-width: 350px) {
.calendar-table__header .calendar-table__col {
width: 46px;
height: 20.7px;
}
}
@media (min-width: 390px) {
.calendar-table__header .calendar-table__col {
width: 56px;
height: 25.2px;
}
}
.calendar-table__body .calendar-table__col {
width: 40px;
height: 40px;
border-radius: 50%;
}
@media (min-width: 350px) {
.calendar-table__body .calendar-table__col {
width: 46px;
height: 46px;
}
}
@media (min-width: 390px) {
.calendar-table__body .calendar-table__col {
width: 56px;
height: 56px;
}
}
@media (min-width: 410px) {
.calendar-table__body .calendar-table__col {
width: 56px;
height: 56px;
}
}
@media (min-width: 460px) {
.calendar-table__body .calendar-table__col {
width: 61px;
height: 61px;
}
}
.calendar-table__body .calendar-table__col.selected {
background: #00788a;
transition: all 0.3s ease-in;
outline: none;
}
.calendar-table__today .calendar-table__item {
border-color: #FEFEFE;
background-color: #00788a;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.calendar-table__event .calendar-table__item {
background-color: #00788a;
border-color: #FEFEFE;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
color: #fff;
}
.calendar-table__event--long {
overflow-x: hidden;
}
.calendar-table__event--long .calendar-table__item {
border-radius: 0;
}
.calendar-table__event--start .calendar-table__item {
border-left: 2px solid #fff;
border-radius: 50% 0 0 50%;
}
.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__event--end .calendar-table__item {
border-right: 2px solid #fff;
border-radius: 0 50% 50% 0;
}
.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__inactive .calendar-table__item {
color: #DCDCE3;
cursor: default;
}
.calendar-table__inactive .calendar-table__item:hover {
background: transparent;
box-shadow: none;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item {
color: #fff;
opacity: 0.25;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
background: #00788a;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
@ -6888,6 +6940,7 @@ main {
font-weight: 600;
margin-bottom: 16px;
}
.events__tag {
background: #00788a;
border: 2px solid #FEFEFE;
@ -6901,9 +6954,11 @@ main {
padding: 5px 2px;
text-align: center;
}
.events__tag--highlighted {
background: #FDCA40;
}
.events__item {
background: #fff;
border-left: 8px solid #00788a;
@ -6915,9 +6970,11 @@ main {
align-items: center;
margin-bottom: 16px;
}
.events__item--left {
width: calc(100% - 76px);
}
.events__name {
font-size: 12px;
font-weight: 700;
@ -6925,6 +6982,7 @@ main {
display: block;
margin-bottom: 6px;
}
.events__date {
font-size: 12px;
color: #9FAAB7;
@ -6976,38 +7034,46 @@ main {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}

View File

@ -1,19 +1,23 @@
@charset "UTF-8";
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-Regular.ttf");
font-weight: normal;
}
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-SemiBold.ttf");
font-weight: 600;
}
@font-face {
font-family: "Titillium Web";
src: url("/fonts/TitilliumWeb-Bold.ttf");
font-weight: 700;
}
form {
max-width: 100%;
padding: 0 0.45rem 0 0.45rem;
@ -66,7 +70,8 @@ input[type=file] {
display: inline-flex;
}
input, select {
input,
select {
border: grey solid 2px;
border-radius: 4px;
background-color: transparent;
@ -284,7 +289,8 @@ span.toggle__text.sde-blue {
font-family: "Titillium Web";
}
html, body {
html,
body {
width: 100%;
margin: 0;
padding: 0;
@ -532,6 +538,7 @@ a {
* Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
.fa,
.fas,
.far,
@ -611,6 +618,7 @@ a {
margin-left: 2.5em;
padding-left: 0;
}
.fa-ul > li {
position: relative;
}
@ -644,6 +652,7 @@ a {
.fab.fa-pull-left {
margin-right: 0.3em;
}
.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
@ -666,6 +675,7 @@ a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@ -675,10 +685,12 @@ a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(90deg);
@ -704,7 +716,8 @@ a {
transform: scale(1, -1);
}
.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
transform: scale(-1, -1);
}
@ -750,6 +763,7 @@ a {
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
content: "\F26E";
}
@ -6553,7 +6567,8 @@ readers do not read off random characters that represent icons */
width: 1px;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.sr-only-focusable:active,
.sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
@ -6566,6 +6581,7 @@ readers do not read off random characters that represent icons */
* Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
@ -6574,6 +6590,7 @@ readers do not read off random characters that represent icons */
src: url("/webfonts/fa-solid-900.eot");
src: url("/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/webfonts/fa-solid-900.woff2") format("woff2"), url("/webfonts/fa-solid-900.woff") format("woff"), url("/webfonts/fa-solid-900.ttf") format("truetype"), url("/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
@ -6612,7 +6629,8 @@ main {
margin: 7rem 0 5rem 0;
}
header, #menu {
header,
#menu {
padding: 1.25rem 1.75rem 0 1.75rem;
}
@ -6662,9 +6680,11 @@ main {
justify-content: center;
}
}
.mock-up-link {
display: none;
}
@media (min-width: 768px) {
.mock-up-link {
display: block;
@ -6678,6 +6698,7 @@ main {
max-width: 414px;
overflow-y: auto;
}
@media (min-width: 415px) {
.main-container-wrapper {
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
@ -6697,14 +6718,17 @@ main {
top: -25px;
width: 80px;
}
.header__btn .icon {
display: inline-block;
}
.header__btn--left {
left: -25px;
padding-left: 38px;
text-align: left;
}
.header__btn--right {
padding-right: 32px;
right: -25px;
@ -6716,10 +6740,12 @@ main {
padding: 16px;
margin-bottom: 24px;
}
.calendar-container__header {
display: flex;
justify-content: space-between;
}
.calendar-container__btn {
background: transparent;
border: 0;
@ -6728,6 +6754,7 @@ main {
outline: none;
color: #E9E8E8;
}
.calendar-container__title {
color: #222741;
font-size: 20px;
@ -6742,6 +6769,7 @@ main {
margin-top: 12px;
width: 100%;
}
.calendar-table__item {
border-radius: 50%;
color: #424588;
@ -6754,17 +6782,21 @@ main {
justify-content: center;
cursor: pointer;
}
.calendar-table__item:hover > span {
color: white;
}
.calendar-table__row {
display: flex;
justify-content: center;
}
.calendar-table__header {
border-bottom: 2px solid #F2F6F8;
margin-bottom: 4px;
}
.calendar-table__header .calendar-table__col {
display: inline-block;
color: #99A4AE;
@ -6776,95 +6808,115 @@ main {
width: 40px;
height: 18px;
}
@media (min-width: 350px) {
.calendar-table__header .calendar-table__col {
width: 46px;
height: 20.7px;
}
}
@media (min-width: 390px) {
.calendar-table__header .calendar-table__col {
width: 56px;
height: 25.2px;
}
}
.calendar-table__body .calendar-table__col {
width: 40px;
height: 40px;
border-radius: 50%;
}
@media (min-width: 350px) {
.calendar-table__body .calendar-table__col {
width: 46px;
height: 46px;
}
}
@media (min-width: 390px) {
.calendar-table__body .calendar-table__col {
width: 56px;
height: 56px;
}
}
@media (min-width: 410px) {
.calendar-table__body .calendar-table__col {
width: 56px;
height: 56px;
}
}
@media (min-width: 460px) {
.calendar-table__body .calendar-table__col {
width: 61px;
height: 61px;
}
}
.calendar-table__body .calendar-table__col.selected {
background: #00788a;
transition: all 0.3s ease-in;
outline: none;
}
.calendar-table__today .calendar-table__item {
border-color: #FEFEFE;
background-color: #00788a;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.calendar-table__event .calendar-table__item {
background-color: #00788a;
border-color: #FEFEFE;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
color: #fff;
}
.calendar-table__event--long {
overflow-x: hidden;
}
.calendar-table__event--long .calendar-table__item {
border-radius: 0;
}
.calendar-table__event--start .calendar-table__item {
border-left: 2px solid #fff;
border-radius: 50% 0 0 50%;
}
.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__event--end .calendar-table__item {
border-right: 2px solid #fff;
border-radius: 0 50% 50% 0;
}
.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
border-width: 2px;
}
.calendar-table__inactive .calendar-table__item {
color: #DCDCE3;
cursor: default;
}
.calendar-table__inactive .calendar-table__item:hover {
background: transparent;
box-shadow: none;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item {
color: #fff;
opacity: 0.25;
}
.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
background: #00788a;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
@ -6888,6 +6940,7 @@ main {
font-weight: 600;
margin-bottom: 16px;
}
.events__tag {
background: #00788a;
border: 2px solid #FEFEFE;
@ -6901,9 +6954,11 @@ main {
padding: 5px 2px;
text-align: center;
}
.events__tag--highlighted {
background: #FDCA40;
}
.events__item {
background: #fff;
border-left: 8px solid #00788a;
@ -6915,9 +6970,11 @@ main {
align-items: center;
margin-bottom: 16px;
}
.events__item--left {
width: calc(100% - 76px);
}
.events__name {
font-size: 12px;
font-weight: 700;
@ -6925,6 +6982,7 @@ main {
display: block;
margin-bottom: 6px;
}
.events__date {
font-size: 12px;
color: #9FAAB7;
@ -6976,42 +7034,51 @@ main {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
html, body {
html,
body {
background-color: #666666;
}
@ -7027,7 +7094,8 @@ main {
color: white;
}
input, select {
input,
select {
border-color: white;
}
@ -7055,3 +7123,4 @@ input::placeholder {
.ql-align-center > strong {
color: #ffffff;
}