TagesschuleElementa/www.tagesschule-elementa.ch
3
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

login bereich

Browse Source
This commit is contained in:
Simon Caminada
2018-03-22 20:13:07 +01:00
parent a74f6d0ee4
commit 5e1b34bfef
65 changed files with 1540 additions and 1057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
private/scss/_config.scss
View File

@@ -4,6 +4,7 @@ $light_gray: #F4F4F4;
$medium_light_gray: #E6E6E6;
$gray: #ADADAD;
$dark_gray: #8f8f8f;
$black_gray: #737373;
$near_black: #444444;
$black: #000000;

8
private/scss/_typography.scss
View File

@@ -39,4 +39,12 @@ h2, .h2 {
@media screen and (max-width: $medium_breakpoint) {
font-size: em(30px);
}
}
h3, .h3 {
font-size: em(18px);
color: $dark_gray;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.01em;
}

1
private/scss/main.scss
View File

@@ -13,7 +13,6 @@
@import "modules/_contact.scss";
@import "modules/_content.scss";
@import "modules/_admin_editor.scss";
@import "modules/_downloads.scss";
@import "modules/_control-panel.scss";
@import "modules/plugins/_quote.scss";
@import "modules/plugins/_slider.scss";

59
private/scss/modules/_content.scss
View File

@@ -7,6 +7,27 @@ $max-width: 100%;
padding-top: em(50px);
}
.content__frame--dialog {
display: table;
width: 100%;
height: 100%;
.content__container {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
}
.content__dialog {
display: inline-block;
width: 100%;
max-width: em(600px);
padding: em(100px) em(30px);
text-align: left;
}
.content__intro {
width: 100%;
height: 70vh;
@@ -17,14 +38,6 @@ $max-width: 100%;
padding: em(50px) 10% 0;
background: $light_gray;
transition: background 0.5s $easeOutQuart;
h1 {
width: 100%;
z-index: 3;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) translateY(em(40px));
}
&.reveal {
transform: none;
}
@@ -48,8 +61,34 @@ $max-width: 100%;
}
@media screen and (max-width: $medium_breakpoint) {
height: 50vh;
h1 {
transform: translateY(-50%) translateY(em(25px));
}
}
.content__intro__content {
width: 100%;
z-index: 3;
position: absolute;
left: 0;
top: 50%;
text-align: center;
color: $white;
padding: 0 em(30px);
p {
line-height: 1.3;
font-size: em(18px);
margin: em(20px) 0 0;
}
a {
margin: em(40px) em(10px) 0;
}
transform: translateY(-50%) translateY(em(40px));
&.reveal {
transform: translateX(100px) translateY(-50%) translateY(em(40px));
}
@media screen and (max-width: $medium_breakpoint) {
transform: translateY(-50%) translateY(em(25px));
&.reveal {
transform: translateX(100px) translateY(-50%) translateY(em(25px));
}
}
}

162
private/scss/modules/_control-panel.scss
View File

@@ -1,17 +1,12 @@
.control_panel {
width: 100%;
padding: em(100px) 0;
padding: em(100px) 0 0;
will-change: transform, height;
&.reveal_animation {
transition: background $reveal_duration $reveal_timing_function;
&.reveal {
background: transparent;
}
}
.load__replace {
margin-top: em(40px);
text-align: left;
}
text-align: left;
}
.task__form {
margin-top: em(50px);
}
.control__list {
@@ -21,26 +16,27 @@
}
.control_panel__content {
max-width: em(1440px);
margin: 0 auto;
padding: 0 em(80px);
font-size: 0;
@media screen and (max-width: $large_breakpoint) {
padding: 0 em(60px);
}
@media screen and (max-width: $medium_breakpoint) {
max-width: em(600px);
padding: 0 em(30px);
}
}
.control__item {
display: block;
background: $white_gray;
color: $black_gray;
text-decoration: none;
width: 100%;
margin-bottom: em(15px);
position: relative;
line-height: 1.3;
border-bottom: 3px solid $white_gray;
&.loading {
&:before {
top: 50%;
width: em(30px);
height: em(30px);
margin-top: em(-15px);
}
}
}
.control__item__open {
@@ -76,10 +72,8 @@
.control__item__title {
display: block;
width: 100%;
padding: em(22px) em(30px);
padding: em(23px) em(30px) em(20px);
position: relative;
font-size: em(18px);
color: $dark_gray;
.control__item--button & {
padding-right: em(240px);
.button {
@@ -100,10 +94,10 @@
}
}
.control__item--status & {
padding-left: em(85px);
padding-left: em(80px);
}
.control__item--arrow & {
padding-right: em(85px);
padding-right: em(80px);
&:hover {
.control__item__arrow {
transform: translateX(em(5px));
@@ -123,8 +117,10 @@
}
.control__item__content__main {
border-top: 1px solid $gray;
border: 3px solid $white_gray;
border-bottom: 0;
padding: em(30px);
background: $white;
}
.control__item__fields {
@@ -135,23 +131,24 @@
display: inline-block;
position: absolute;
top: 50%;
left: em(20px);
margin-top: em(-20px);
border-radius: 50%;
left: em(22px);
width: em(34px);
height: em(34px);
margin-top: em(-16px);
border: 2px solid $gray;
svg {
display: block;
width: em(36px);
height: em(36px);
display: none;
width: 60%;
height: 60%;
margin: 20%;
fill: $white;
}
.control__item--status--active & {
background: $green;
border-color: $green;
}
.control__item--status--expired & {
background: $red;
border-color: $red;
svg {
display: block;
}
}
}
@@ -160,36 +157,95 @@
position: absolute;
top: 50%;
right: em(20px);
margin-top: em(-20px);
margin-top: em(-13px);
transform: none;
transition: transform 0.3s $easeOutQuart;
svg {
display: block;
width: em(40px);
height: em(40px);
transform: rotate(-90deg);
}
.fill {
width: em(26px);
height: em(26px);
fill: $green;
}
}
.todo {
.control_panel__content__item {
display: inline-block;
vertical-align: top;
width: 48%;
margin-right: 4%;
font-size: em(18px);
position: relative;
&:first-child {
margin-right: 4%;
}
@media screen and (max-width: $large_breakpoint) {
display: block;
width: 100%;
margin: 0 0 em(40px) 0;
margin: 0 0 em(50px) 0;
}
}
.settings {
display: inline-block;
vertical-align: top;
width: 48%;
@media screen and (max-width: $large_breakpoint) {
width: 100%;
.downloads__frame {
width: 100%;
padding: em(150px) 0;
position: relative;
will-change: transform;
.downloads {
li {
width: 33.3333%;
@media screen and (max-width: $large_breakpoint) {
width: 50%;
}
@media screen and (max-width: $medium_breakpoint) {
width: 100%;
}
}
}
}
@media screen and (max-width: $large_breakpoint) {
padding-top: 0;
}
}
.downloads__section {
margin-top: em(80px);
.downloads--flat & {
margin-top: 0;
}
}
.downloads__section__title {
width: 100%;
overflow: hidden;
h3 {
display: inline-block;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
background: $medium_light_gray;
width: 100vw;
height: em(3px);
top: em(15px);
left: 100%;
margin-left: em(20px);
}
}
}
.downloads__section__title--flat {
h3 {
&:after {
display: none;
}
}
}
.downloads__list {
display: block;
margin: 0 em(-10px);
font-size: 0;
}
.downloads__item__tags {
display: none;
}

66
private/scss/modules/_downloads.scss
View File

@@ -1,66 +0,0 @@
.downloads__frame {
width: 100%;
padding: em(80px) 0 em(150px);
position: relative;
will-change: transform;
.downloads {
li {
width: 33.3333%;
}
}
}
.downloads__content {
max-width: em(1440px);
margin: 0 auto;
padding: 0 em(80px);
@media screen and (max-width: $large_breakpoint) {
padding: 0 em(60px);
}
@media screen and (max-width: $medium_breakpoint) {
max-width: em(600px);
padding: 0 em(30px);
}
}
.downloads__section {
margin-top: em(80px);
.downloads--flat & {
margin-top: 0;
}
}
.downloads__section__title {
width: 100%;
overflow: hidden;
h3 {
display: inline-block;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
background: $white;
width: 100vw;
height: em(3px);
opacity: 0.15;
top: em(10.5px);
left: 100%;
margin-left: em(20px);
}
}
}
.downloads__section__title--flat {
h3 {
&:after {
display: none;
}
}
}
.downloads__list {
display: block;
margin: 0 em(-10px);
font-size: 0;
}

4
private/scss/modules/_footer.scss
View File

@@ -57,8 +57,8 @@
@media screen and (min-width: $medium_breakpoint + 1) {
padding: 0 em(30px) !important;
.header__button__icon {
width: em(16px);
height: em(16px);
width: em(12px);
height: em(12px);
top: em(-1px);
margin-right: em(10px);
}

3
private/scss/modules/plugins/_download_section.scss
View File

@@ -68,7 +68,8 @@
color: $white;
font-weight: 500;
padding: 0 em(5px);
text-shadow: 0 1px 0 $green, 1px 0 0 $green, 0 -1px 0 $green, -1px 0 0 $green;
text-shadow: 1px 0 0 $green, 0 1px 0 $green, -1px 0 0 $green, 0 -1px 0 $green,
2px 0 0 $green, 0 2px 0 $green, -2px 0 0 $green, 0 -2px 0 $green;
&:before, &:after {
display: block;
content: '';

106
private/scss/modules/plugins/_form.scss
View File

@@ -44,6 +44,10 @@
.form__submit {
text-align: right;
.button {
vertical-align: top;
margin-left: em(10px);
}
}
.button {
@@ -76,6 +80,31 @@
}
}
.button--small {
height: em(35px);
line-height: em(35px);
font-size: em(14px);
}
.button--ghost {
background: none;
color: $green;
svg {
fill: $green !important;
}
&:after {
content: '';
position: absolute;
z-index: -1;
display: block;
top: 0;
right: 0;
left: 0;
bottom: 0;
border: 2px solid $green;
}
}
.button__icon {
display: block;
position: absolute;
@@ -90,6 +119,9 @@
width: em(36px);
fill: $white;
margin: em(12px) 0;
.button--small & {
margin: em(7px) 0;
}
}
}
@@ -104,6 +136,78 @@
width: 100%;
display: block;
margin-bottom: em(15px);
position: relative;
}
.form__field--label {
padding-left: 30%;
label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30%;
line-height: em(40px);
font-weight: 400;
padding-right: em(20px);
font-size: em(12px);
letter-spacing: 0.03em;
text-transform: uppercase;
span {
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
}
@media screen and (max-width: $small_breakpoint) {
padding: 0;
label {
position: relative;
width: 100%;
padding: 0;
margin-bottom: em(2px);
}
}
}
.form__field--icon {
input {
height: em(70px);
padding: 0 em(90px) 0 em(15px);
}
button, a {
display: block;
-webkit-appearance: none;
position: absolute;
top: 0;
right: 0;
width: em(70px);
height: em(70px);
line-height: em(65px);
border: none;
font-size: 0;
text-align: center;
padding: em(3px);
border-top-right-radius: em(5px);
border-bottom-right-radius: em(5px);
background: transparent;
color: inherit;
cursor: pointer;
svg {
vertical-align: middle;
width: em(36px);
height: em(36px);
display: inline-block;
transform: none;
fill: $green;
transition: transform 0.3s $easeOutQuart;
}
&:hover {
svg {
transform: scale(1.1);
}
}
}
}
input, textarea {
@@ -161,7 +265,7 @@ textarea {
.form__success, .form__errors, .form__field__errors {
display: block;
width: 100%;
font-size: em(16px);
font-size: em(14px);
font-weight: 700;
line-height: 1.5;
}

1
private/scss/modules/plugins/_slider.scss
View File

@@ -233,6 +233,7 @@
font-weight: 700;
margin-bottom: em(5px);
line-height: 1.3;
color: $white;
}
.slider__text__item__subline {