fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more uniworxy design

Browse Source
This commit is contained in:
Felix Hamann 2018-01-25 01:56:55 +01:00
parent 4dfa03e990
commit e6fadd1986
11 changed files with 533 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
app/www/courses.html Normal file
View File

@ -0,0 +1,165 @@
<!doctype html>
<html>
<head>
<title>UniWorX | Kurse</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
<script src="lib/velocity.min.js"></script>
<script data-main="src/js/main" src="lib/require.js"></script>
</head>
<body>
<div class="grid">
<header class="header">
<nav class="horizontal">
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li>
<li><a href="/settings">Benutzerinstellungen</a></li>
<li><a href="/logout">Abmelden</a></li>
</ul>
</nav>
</header>
<aside class="sidebar">
<div class="box">
<h3>Wintersemester 2017/2018</h3>
<ul>
<li>
<h4>Bachelor-Seminar "Web Technologies"</h4>
<ul>
<li>Übungsgruppen</li>
<li>Abgaben</li>
<li>Klausuren</li>
</ul>
</li>
<li>
<h4>Blockpraktikum: "Concept Development"</h4>
<ul>
<li>Übungsgruppen</li>
<li>Abgaben</li>
</ul>
</li>
</ul>
</div>
<div class="box">
<div class="box-title">Boxilein</div>
<p>Kleines Boxilein am Randilein</p>
</div>
</aside>
<section class="main-content">
<h1>Kurse</h1>
<h2>Wintersemester 2017/2018</h2>
<div class="box course-box">
<div class="course">
<h4>Bachelor-Seminar "Web Technologies"</h4>
<p>
In diesem Seminar erstellen die Teilnehmer Lehrmaterialien zu ausgewählten aktuellen Web-Technologien. Im Zuge des Seminars werden dazu Folien erstellt, vorgetragen und eine wissenschaftliche Ausarbeitung über das Thema erstellt.
</p>
<ul>
<li>
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
<div>
<table>
<tr>
<th>Name (Raum)</th>
<th>Termin</th>
<th>Studenten</th>
<th>Tutor</th>
<th>Anmeldezeitraum</th>
<th></th>
</tr>
<tr>
<td>Gruppe 1<br>Leopoldstraße 13, Raum 1502</td>
<td>Fr. 09.02.18, 10:00</td>
<td>35/35</td>
<td><a href="#">Axel Hösl</a></td>
<td>Fr. 09.02.18, 10:00</td>
<td><a href="#">Verlassen</a></td>
</tr>
</table>
</div>
</li>
<li>
<h4 class="js-show-hide-toggle">Abgaben</h4>
<div>
Arbitrary content
</div>
</li>
<li>
<h4 class="js-show-hide-toggle">Klausuren</h4>
<div>
Etwas anderes...
</div>
</li>
</ul>
</div>
<div class="course">
<h4>Blockpraktikum: "Concept Development"</h4>
<ul>
<li>
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
<div>
<table>
<tr>
<th>Name (Raum)</th>
<th>Termin</th>
<th>Studenten</th>
<th>Tutor</th>
<th>Anmeldezeitraum</th>
<th></th>
</tr>
<tr>
<td>Gruppe 1<br>Leopoldstraße 13, Raum 1502</td>
<td>Fr. 09.02.18, 10:00</td>
<td>35/35</td>
<td><a href="#">Axel Hösl</a></td>
<td>Fr. 09.02.18, 10:00</td>
<td><a href="#">Verlassen</a></td>
</tr>
</table>
</div>
</li>
<li>Abgaben</li>
</ul>
</div>
</div>
<h2>Sommersemester 2017</h2>
<div class="box course-box">
<h4>Human Factors in Engineering</h4>
<ul>
<li>Klausuren</li>
</ul>
<h4>Vorlesung Multimedia Programmierung</h4>
<ul>
<li>
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
</li>
<li>
<h4 class="js-show-hide-toggle">Abgaben</h4>
<div>
Bisher keine Abgaben für <em>Vorlesung Multimedia Programmierung</em>.
</div>
</li>
<li>Klausuren</li>
</ul>
</div>
</section>
<footer class="footer">
<nav class="thirdary">
<ul class="flat">
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>

86
app/www/index.html
View File

@ -7,15 +7,14 @@
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
<script src="lib/velocity.min.js"></script>
<script data-main="src/js/main" src="lib/require.js"></script>
<!-- <script src="scripts/main.js"></script> -->
</head>
<body>
<div class="grid">
<header>
<span></span>
<header class="header">
<nav class="horizontal">
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/courses.html">Kurse</a></li>
<li><a href="/settings">Benutzerinstellungen</a></li>
<li><a href="/logout">Abmelden</a></li>
</ul>
@ -23,75 +22,44 @@
</header>
<aside class="sidebar">
<div class="box">
<div class="box-title">Navi</div>
<nav class="vertical">
<ul>
<li>
<a href="/home" async="true">Home</a>
</li>
<li>
<a href="/events" async="true" data-type="json">Events</a>
</li>
<li>
<a href="/seminars">Seminars</a>
</li>
<li>
<a href="/terms">Terms</a>
</li>
<li>
<a href="/lectures">Lectures</a>
</li>
</ul>
</nav>
</div>
<div class="box">
<div class="box-title">Boxilein</div>
<p>Kleines Boxilein am Randilein</p>
</div>
<h2>Kalender</h2>
<img src="https://icon-icons.com/icons2/317/PNG/512/calendar-icon_34471.png" width="100%" height="auto" alt="kalender">
</aside>
<section class="main-content">
<h1>Willkommen bei UniWorX</h1>
<div class="box">
<div class="box-title">Aktuelles</div>
<div class="text">Id ipsum Lorem esse cillum Lorem cillum. Cillum proident culpa id incididunt voluptate esse amet est cillum velit. Mollit nisi labore velit nulla proident do elit exercitation veniam labore sint. Proident non eu nostrud sint laborum commodo voluptate deserunt anim occaecat eu.</div>
<div class="text">Excepteur duis nulla reprehenderit ullamco aute elit laboris dolor. Duis aliquip est voluptate Lorem sunt aute cupidatat aute labore cupidatat pariatur mollit consequat elit. Voluptate enim pariatur elit consectetur aliqua ullamco. Laborum irure sit duis enim sunt pariatur cupidatat nisi nostrud duis. Nostrud ex incididunt sit velit veniam cupidatat ullamco nisi sit.</div>
<div class="text">Irure ad veniam quis sint elit veniam commodo laborum cupidatat id enim. Pariatur minim qui labore labore. Nisi anim in incididunt exercitation sunt. Qui culpa adipisicing in Lorem aute ex. Consequat quis esse ipsum id ex officia nisi aute exercitation elit. Ea fugiat proident nulla aliqua exercitation elit adipisicing enim. Aliqua aute consequat minim fugiat exercitation ipsum irure esse sit amet eiusmod quis nulla.</div>
<div class="text">Proident esse ipsum ad enim fugiat. Et elit voluptate do ullamco laboris consectetur deserunt officia adipisicing. Minim laboris laborum ut non sint ullamco excepteur non mollit laborum irure.</div>
<div class="text">Est fugiat incididunt enim veniam aute. Aliqua ad incididunt in eu fugiat irure reprehenderit fugiat magna qui fugiat ullamco laborum. Aute cupidatat id culpa aute irure aliquip eu velit adipisicing. Proident sint et deserunt tempor irure ea duis velit. Sint occaecat consectetur commodo sit eiusmod exercitation enim pariatur amet in. Irure quis aliquip ea deserunt eu consequat consequat ullamco duis. Consequat proident amet mollit quis Lorem cillum mollit enim commodo.</div>
<div class="text">Do id minim ex eiusmod labore et nulla est incididunt qui laborum. Consectetur et cupidatat voluptate eiusmod magna laborum enim cupidatat esse id do consequat est. Aliqua sunt laborum deserunt in. Officia dolore excepteur dolore Lorem culpa.</div>
<h2>Übungsblatt Deadlines</h2>
<p>Keine kommenden Übungsblatt-Deadlines.</p>
</div>
<h2>Klausuren</h2>
<div class="box">
<div class="box-title">Mehr Aktuelles...</div>
<div class="text">Id ipsum Lorem esse cillum Lorem cillum. Cillum proident culpa id incididunt voluptate esse amet est cillum velit. Mollit nisi labore velit nulla proident do elit exercitation veniam labore sint. Proident non eu nostrud sint laborum commodo voluptate deserunt anim occaecat eu.</div>
<div class="text">Excepteur duis nulla reprehenderit ullamco aute elit laboris dolor. Duis aliquip est voluptate Lorem sunt aute cupidatat aute labore cupidatat pariatur mollit consequat elit. Voluptate enim pariatur elit consectetur aliqua ullamco. Laborum irure sit duis enim sunt pariatur cupidatat nisi nostrud duis. Nostrud ex incididunt sit velit veniam cupidatat ullamco nisi sit.</div>
<div class="text">Irure ad veniam quis sint elit veniam commodo laborum cupidatat id enim. Pariatur minim qui labore labore. Nisi anim in incididunt exercitation sunt. Qui culpa adipisicing in Lorem aute ex. Consequat quis esse ipsum id ex officia nisi aute exercitation elit. Ea fugiat proident nulla aliqua exercitation elit adipisicing enim. Aliqua aute consequat minim fugiat exercitation ipsum irure esse sit amet eiusmod quis nulla.</div>
<table>
<tr>
<th>Veranstaltung</th>
<th>Klausur</th>
<th>Beginn</th>
<th>Anmelde-Deadline</th>
<th>Check</th>
</tr>
<tr>
<td>Kurs Zeichnen und Skizzieren von Szenarien</td>
<td>Abschlusspräsentation</td>
<td>Fr. 09.02.18, 10:00</td>
<td>Fr. 02.02.18, 10:00</td>
<td>X</td>
</tr>
</table>
</div>
</section>
<aside class="sidebar-right">
<div class="box">
<div class="box-title">Wichtiges</div>
<span>
Nix wichtiges.
</span>
</div>
<div class="box">
<div class="box-title">Kalender</div>
<span>Tage. Tage. Tage.</span>
<span>Monate. Monate. Monate.</span>
</div>
</aside>
<footer>
<footer class="footer">
<nav class="thirdary">
<ul class="flat">
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Copyright: Burpsi
</footer>
</div>
</body>

252
app/www/src/css/main.css
View File

@ -1,15 +1,9 @@
:root {
--header-height: 60px;
--header-height-collapsed: 40px;
--footer-height: 50px;
}
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 40px;
grid-gap: 20px;
}
.grid > header {
@ -37,16 +31,83 @@
grid-row-start: 3;
}
.box {
position: relative;
padding: 13px 24px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
font-size: 16px;
}
.box ul {
margin-left: 10px;
margin-bottom: 5px;
}
.box p {
margin-bottom: 13px;
}
.course-box {
border-left: 1px solid #afb5df;
padding: 4px 20px;
position: relative;
}
.course-box li {
padding-left: 7px;
padding-bottom: 13px;
}
.course-box li h4::before {
content: '>';
position: absolute;
margin-left: -13px;
font-weight: 800;
}
.course-box li h4:hover {
cursor: pointer;
}
.course-box li h4:hover::before {
content: 'v';
}
.course-box li.collapsed {
padding-bottom: 0;
}
.course-box li.collapsed > * {
display: none;
}
.course-box li.collapsed h4 {
display: block;
}
.course-box li.collapsed h4::before {
content: '>';
}
.course-box li.collapsed h4:hover::before {
content: 'v';
}
.course-box .course {
margin-bottom: 7px;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #1d1c1d;
color: #fff;
background-color: #ffffff;
color: #353535;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 400;
font-size: 18px;
@ -59,12 +120,11 @@ a:link {
color: inherit;
text-decoration: none;
font-weight: 600;
-webkit-transition: color .2s ease, background-color .2s ease;
transition: color .2s ease, background-color .2s ease;
}
a:hover {
color: #72a85b;
color: #38428a;
}
ul {
@ -75,115 +135,97 @@ ul.flat > li {
display: inline-block;
}
h1, h2, h3, h4, h5 {
font-weight: 600;
}
h1 {
font-size: 48px;
line-height: 48px;
font-weight: 300;
margin: 20px 0 40px;
font-size: 32px;
margin: 20px 0 5px;
}
.text, .event-desc {
margin-bottom: 20px;
line-height: 1.4;
h2 {
font-size: 24px;
margin: 10px 0 0;
}
header {
h3 {
font-size: 20px;
margin: 5px 0 0;
}
h4 {
font-size: 16px;
margin: 0;
}
th, td {
text-align: left;
padding: 0 2px 0 4px;
border-left: 1px solid #38428a;
}
th:first-of-type, td:first-of-type {
border: none;
}
.header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 12px 24px;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: var(--header-height);
line-height: var(--header-height);
background-color: #72a85b;
background-color: #38428a;
width: 100%;
text-align: right;
overflow: hidden;
z-index: 100;
-webkit-transition: height .2s ease, line-height .2s ease;
transition: height .2s ease, line-height .2s ease;
}
header.sticky {
.header.sticky {
position: fixed;
top: 0;
}
header.collapsed {
.header.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
}
header.collapsed:before {
.header.collapsed:before {
height: 30px;
}
header > nav.horizontal li a {
padding: 0 13px 0;
.header .horizontal {
width: 100%;
}
.header > nav.horizontal li a {
padding: 13px;
position: relative;
height: 100%;
display: inline-block;
color: #fff;
color: #eaf2ff;
}
header > nav.horizontal li a:hover {
background-color: white;
.header > nav.horizontal li a:hover {
background-color: #2e3671;
}
footer {
.main-content {
font-size: 16px;
}
.footer {
text-align: right;
padding: 7px 24px;
overflow: hidden;
background-color: #72a85b;
}
.box {
background-color: #3c3c3c;
position: relative;
padding: 24px;
padding-top: 60px;
-webkit-box-shadow: 0 1px 2px #656565;
box-shadow: 0 1px 2px #656565;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 20px;
}
.box .box-title {
content: attr(data-title);
position: absolute;
color: #fff;
top: -3px;
left: -3px;
width: calc(100% + 6px);
background-color: #72a85b;
padding: 7px 23px;
font-size: 20px;
font-weight: 600;
overflow: hidden;
display: block;
}
.box.event-box {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-bottom: 20px;
background-color: #38428a;
color: #eaf2ff;
}
.event-desc {
@ -191,45 +233,23 @@ footer {
}
.button, .event-registration {
background-color: #72a85b;
display: -webkit-box;
display: -ms-flexbox;
background-color: #38428a;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
align-items: center;
justify-content: center;
padding: 3px 13px;
cursor: pointer;
font-weight: 600;
-webkit-transition: background-color .2s ease, -webkit-transform .1s;
transition: background-color .2s ease, -webkit-transform .1s;
transition: transform .1s, background-color .2s ease;
transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
}
.button:hover, .event-registration:hover {
background-color: #5b8848;
-webkit-transform: scale(1.01);
transform: scale(1.01);
background-color: #293166;
transform: scale(1.01);
}
.has-diagonal:before, header:before, .box .box-title:before {
content: '';
position: absolute;
top: -10px;
right: -25px;
height: 60px;
width: 310px;
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
background-color: rgba(255, 255, 255, 0.4);
display: block;
-webkit-transition: height .2s;
transition: height .2s;
-webkit-transform-origin: top right;
transform-origin: top right;
.hidden {
display: none;
visibility: hidden;
}
/*# sourceMappingURL=main.css.map */

8
app/www/src/css/main.css.map
View File

@ -1,8 +1,12 @@
{
"version": 3,
"mappings": "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",
"mappings": "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",
"sources": [
"../scss/main.scss"
"../scss/main.scss",
"../scss/_grid.scss",
"../scss/_colors.scss",
"../scss/modules/_box.scss",
"../scss/_colors.scss"
],
"names": [],
"file": "main.css"

10
app/www/src/js/config.js
View File

@ -1,16 +1,8 @@
define(function (require) {
var counter = 0;
return {
count: function() {
counter++;
},
init: function() {
console.log('Config.init');
},
counter: function() {
return counter;
console.log('Config.init()');
}
};
});

38
app/www/src/js/helper/show_hide.js Normal file
View File

@ -0,0 +1,38 @@
define(function (require) {
var elements = null,
toggles = null,
collapsed;
function addEventHandlers() {
elements.forEach(function(el) {
el.addEventListener('click', function elClickListener() {
var index = el.dataset.index;
var toggle = toggles[index];
if (toggle.collapsed) {
toggle.parent.classList.remove('collapsed');
} else {
toggle.parent.classList.add('collapsed');
}
toggle.collapsed = !toggle.collapsed;
});
});
}
return {
init: function(cllpsd) {
elements = Array.from(document.querySelectorAll('.js-show-hide-toggle'));
toggles = [];
collapsed = !!cllpsd;
elements.forEach(function(el, i) {
var target = el.nextElementSibling;
el.dataset.index = i;
var coll = el.parentElement.classList.contains('collapsed');
toggles.push({index: i, target: target, collapsed: coll, parent: el.parentElement});
});
addEventHandlers();
}
};
});

3
app/www/src/js/main.js
View File

@ -1,3 +1,4 @@
requirejs(["config", "helper/sticky_menu", "api"], function(config, sticky_menu, api) {
requirejs(["config", "api", "helper/sticky_menu", "helper/show_hide"], function(config, api, sticky_menu, show_hide) {
sticky_menu.init();
show_hide.init();
});

12
app/www/src/scss/_colors.scss Normal file
View File

@ -0,0 +1,12 @@
// THEME 1
$base00: #72a85b;
$base-bg-color: #1d1c1d;
$base-font-color: #fff;
$sec-font-color: #fff;
$box-bg-color: #3c3c3c;
// THEME 2
$base00: #38428a;
$base-bg-color: #ffffff;
$base-font-color: rgb(53, 53, 53);
$sec-font-color: #eaf2ff;
$box-bg-color: #dddddd;

32
app/www/src/scss/_grid.scss Normal file
View File

@ -0,0 +1,32 @@
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 20px;
> header {
grid-column: span 12;
}
> .sidebar {
grid-column: 2 / span 2;
grid-row-start: 2;
}
> .sidebar-right {
display: none;
grid-column: span 2;
grid-row-start: 2;
}
> section {
grid-column: 4 / span 8;
grid-row-start: 2;
}
> footer {
grid-column: span 12;
grid-row-start: 3;
}
}

166
app/www/src/scss/main.scss
View File

@ -1,59 +1,9 @@
// THEME 1
$base00: #72a85b;
$base-bg-color: #1d1c1d;
$base-font-color: #fff;
$sec-font-color: #fff;
$box-bg-color: #3c3c3c;
// THEME 2
// $base00: #639ac7;
// $base-bg-color: #f3f3f3;
// $base-font-color: rgb(53, 53, 53);
// $sec-font-color: #eaf2ff;
// $box-bg-color: #dddddd;
@import 'grid';
@import 'colors';
// VARIABLES
:root {
--header-height: 60px;
--header-height-collapsed: 40px;
--footer-height: 50px;
}
// modules
@import 'modules/box';
// GRID SETUP
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 40px;
> header {
grid-column: span 12;
}
> .sidebar {
grid-column: 2 / span 2;
grid-row-start: 2;
}
> .sidebar-right {
display: none;
grid-column: span 2;
grid-row-start: 2;
}
> section {
grid-column: 4 / span 8;
grid-row-start: 2;
}
> footer {
grid-column: span 12;
grid-row-start: 3;
}
}
// BASIC SETUP
* {
box-sizing: border-box;
padding: 0;
@ -89,35 +39,54 @@ ul {
}
}
h1, h2, h3, h4, h5 {
font-weight: 600;
}
h1 {
font-size: 48px;
line-height: 48px;
font-weight: 300;
margin: 20px 0 40px;
font-size: 32px;
margin: 20px 0 5px;
}
h2 {
font-size: 24px;
margin: 10px 0 0;
}
h3 {
font-size: 20px;
margin: 5px 0 0;
}
h4 {
font-size: 16px;
margin: 0;
}
.text {
margin-bottom: 20px;
line-height: 1.4;
th, td {
text-align: left;
padding: 0 2px 0 4px;
border-left: 1px solid $base00;
&:first-of-type {
border: none;
}
}
// MACRO DESIGN
header {
// END GLOBAL
.header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
padding: 0 24px;
height: var(--header-height);
line-height: var(--header-height);
background-color: $base00;
width: 100%;
text-align: right;
overflow: hidden;
z-index: 100;
// box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.1);
transition: height .2s ease, line-height .2s ease;
@extend .has-diagonal;
&.sticky {
position: fixed;
@ -133,70 +102,39 @@ header {
}
}
.horizontal {
width: 100%;
}
> nav.horizontal li a {
padding: 0 13px 0;
padding: 13px;
position: relative;
height: 100%;
display: inline-block;
color: $sec-font-color;
&:hover {
background-color: white;
background-color: darken($base00, 7%);
}
}
}
.main-content {
// padding: 24px;
font-size: 16px;
}
footer {
.footer {
text-align: right;
padding: 7px 24px;
overflow: hidden;
background-color: $base00;
}
.box {
background-color: $box-bg-color;
position: relative;
padding: 24px;
padding-top: 60px;
box-shadow: 0 1px 2px #656565;
display: flex;
flex-direction: column;
margin-bottom: 20px;
.box-title {
content: attr(data-title);
position: absolute;
color: $sec-font-color;
top: -3px;
left: -3px;
width: calc(100% + 6px);
background-color: $base00;
padding: 7px 23px;
font-size: 20px;
font-weight: 600;
overflow: hidden;
display: block;
@extend .has-diagonal;
}
&.event-box {
// background-color: white;
// color: $base-bg-color;
flex-direction: row;
margin-bottom: 20px;
}
color: $sec-font-color;
}
.event-registration {
@extend .button;
}
.event-desc {
@extend .text;
padding: 0 13px;
}
@ -217,19 +155,7 @@ footer {
}
}
.has-diagonal {
&:before {
content: '';
position: absolute;
top: -10px;
right: -25px;
height: 60px;
width: 310px;
transform: rotate(12deg);
background-color: rgba(255, 255, 255, 0.4);
display: block;
transition: height .2s;
transform-origin: top right;
}
.hidden {
display: none;
visibility: hidden;
}

68
app/www/src/scss/modules/_box.scss Normal file
View File

@ -0,0 +1,68 @@
@import '../colors';
.box {
position: relative;
padding: 13px 24px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
font-size: 16px;
ul {
margin-left: 10px;
margin-bottom: 5px;
}
p {
margin-bottom: 13px;
}
}
// COURSE BOX
.course-box {
border-left: 1px solid lighten($base00, 40%);
padding: 4px 20px;
position: relative;
li {
padding-left: 7px;
padding-bottom: 13px;
h4::before {
content: '>';
position: absolute;
margin-left: -13px;
font-weight: 800;
}
h4:hover {
cursor: pointer;
}
h4:hover::before {
content: 'v';
}
}
li.collapsed {
padding-bottom: 0;
> * {
display: none;
}
h4 {
display: block;
}
h4::before {
content: '>';
}
h4:hover::before {
content: 'v';
}
}
.course {
margin-bottom: 7px;
}
}