add basic frame, basic login page
This commit is contained in:
@@ -1,107 +0,0 @@
|
||||
<style>
|
||||
/*--------------------------------------------------------------
|
||||
# LOGINBOX
|
||||
--------------------------------------------------------------*/
|
||||
#loginbox_container {
|
||||
/* Center vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0px; left:0px; bottom:0px; right:0px;
|
||||
background:#28b78d;
|
||||
}
|
||||
.loginbox_holder {
|
||||
max-width:380px;
|
||||
width:90%;
|
||||
margin:0px;
|
||||
position:relative;
|
||||
display:block;
|
||||
/* border:solid 1px #FFF; */
|
||||
border-radius:2px;
|
||||
/*background:#FFF;*/
|
||||
height:auto;
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.loginbox_logo {line-height:0; margin-bottom:15px; text-align:center;}
|
||||
/*.loginbox_logo p {font-size:25px; line-height:33px; color:#000;}
|
||||
.loginbox_logo_icon {width:35px; float:left; margin-right:10px;}*/
|
||||
.loginbox_logo img {width:100%; max-width:72px;}
|
||||
|
||||
.loginbox_content {}
|
||||
p.login_intro_text {font-size:14px!important; margin-bottom:20px; line-height:1.5;}
|
||||
.loginbox_content p {text-align:center; color:#FFF; font-size:15px; line-height:1.2;}
|
||||
.login_input {
|
||||
margin-bottom:10px;
|
||||
border:none;
|
||||
height:40px;
|
||||
position:relative;
|
||||
}
|
||||
.login_input:before {
|
||||
font-family: 'FontAwesome';
|
||||
position:absolute;
|
||||
left:10px;
|
||||
top:5px;
|
||||
font-size:20px;
|
||||
color:#28b78d;
|
||||
content:"";
|
||||
}
|
||||
.login_form {
|
||||
text-align:center;
|
||||
}
|
||||
.login_user:before {content:"\f007";}
|
||||
.login_pw:before {content:"\f084";}
|
||||
.login_submit {
|
||||
width:auto;
|
||||
margin:0 auto;
|
||||
display:inline-block;
|
||||
margin-top:10px;
|
||||
}
|
||||
.login_submit:before {content:"\f090"; left:15px; top:6px;}
|
||||
|
||||
.login_input input {
|
||||
border:none;
|
||||
background:none;
|
||||
height:40px;
|
||||
width:100%;
|
||||
padding: 0px 10px 0px 35px;
|
||||
background:#f4f4f4;
|
||||
border:solid 1px #FFF;
|
||||
}
|
||||
.loginbox_content .login_input input:focus {border:solid 1px #152129; background:#FFF;}
|
||||
.login_form input[type="submit"] {
|
||||
height:40px;
|
||||
background:#152129;
|
||||
border:none;
|
||||
color:#FFF;
|
||||
cursor:pointer;
|
||||
text-transform:uppercase;
|
||||
width:auto;
|
||||
margin:0px auto 0 auto;
|
||||
padding: 0px 20px 0px 40px;
|
||||
border-radius:20px;
|
||||
}
|
||||
.login_form input[type="submit"]:hover {
|
||||
background:#1f3441;
|
||||
}
|
||||
.login_error {
|
||||
display:block;
|
||||
text-align:center;
|
||||
color:#FFF;
|
||||
line-height:1.2;
|
||||
margin-top:20px;
|
||||
}
|
||||
.login_error p {text-transform:uppercase; display:inline-block; background:#c70e00; padding:5px; font-weight:600; font-size:14px;}
|
||||
</style>
|
||||
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<form @submit.prevent="submit()">
|
||||
<div v-for="(e, i) in elements" :key="i">
|
||||
<my-input :label="e.label" :type="e.type" v-model="formData[i]" @validate="validateData(i)"></my-input>
|
||||
<span class="error" v-if="formErrors[i]">required</span>
|
||||
<div v-for="(item, key) in elements" :key="key">
|
||||
<my-input
|
||||
:description="item.description"
|
||||
:label="item.label"
|
||||
:name="key"
|
||||
:placeholder="item.placeholder"
|
||||
:type="item.type"
|
||||
v-model="formData[key]"
|
||||
@validate="validateData(key)">
|
||||
</my-input>
|
||||
<span class="error" v-if="formErrors[key]">required</span>
|
||||
</div>
|
||||
<div>
|
||||
<button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
|
||||
|
||||
@@ -1,8 +1,21 @@
|
||||
<template>
|
||||
<div class="My-Input">
|
||||
<label>{{ label }}</label>
|
||||
<input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
|
||||
<input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
|
||||
<div class="input_holder">
|
||||
<div class="input_header" v-if="label">
|
||||
<label :for="name">{{ label }}</label>
|
||||
</div>
|
||||
<div class="input_description" v-if="description">{{ description }}</div>
|
||||
<input type="text" v-if="type == 'text'"
|
||||
v-model="currentValue"
|
||||
:name="name"
|
||||
:placeholder="placeholder"
|
||||
@blur="validate()"
|
||||
@change="() => $emit('change', currentValue)">
|
||||
<input type="password" v-else-if="type == 'password'"
|
||||
v-model="currentValue"
|
||||
:name="name"
|
||||
:placeholder="placeholder"
|
||||
@blur="validate()"
|
||||
@change="() => $emit('change', currentValue)">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,9 +23,11 @@
|
||||
export default {
|
||||
name: "MyInput",
|
||||
props: [
|
||||
'description',
|
||||
'label',
|
||||
'type',
|
||||
'name',
|
||||
'placeholder',
|
||||
'type',
|
||||
'value'
|
||||
],
|
||||
data() {
|
||||
@@ -31,4 +46,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
@@ -1,262 +1,282 @@
|
||||
<template>
|
||||
<div class="cms_sidebar open_sidebar">
|
||||
|
||||
<div class="cms_sidebar_trigger"><i class="icon icon-arrow-left" aria-hidden="true"></i></div>
|
||||
|
||||
<div class="cms_sidebar_icons_bg"></div>
|
||||
<div class="cms_sidebar_mainnav">
|
||||
<div class="cms_sidebar_inner">
|
||||
<!-- Sidebar Section -->
|
||||
<div class="cms_sidebar_section main_navigation">
|
||||
<div class="sidebar">
|
||||
<div class="wrapper">
|
||||
<div class="inner">
|
||||
<nav class="mainnav">
|
||||
<ul>
|
||||
<li><a href="#"><i class="icon icon-compass" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Dashboard</span></a></li>
|
||||
<li><a href="#"><i class="icon icon-images" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Medien</span></a></li>
|
||||
<li><a href="#"><i class="icon icon-document-text" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Seiten</span></a></li>
|
||||
<li v-for="(item, i) in items" :key="i">
|
||||
<router-link :to="item.to">
|
||||
<i :class="['icon', item.icon]"></i>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<hr>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-images" aria-hidden="true"></i>
|
||||
<div class="title">Medien</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-document-text" aria-hidden="true"></i>
|
||||
<div class="title">Seiten</div>
|
||||
</a></li>
|
||||
<li class="active">
|
||||
<a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Beiträge</span></a>
|
||||
<a href="#"><i class="icon icon-paper-airplane" aria-hidden="true"></i>
|
||||
<div class="title">Beiträge</div></a>
|
||||
<!-- Sub Navigation -->
|
||||
<div class="sub_navigation">
|
||||
<span class="sub_navigation_headline">Kategorie</span>
|
||||
<div class="subnav">
|
||||
<div class="subnav_headline">Kategorie</div>
|
||||
<ul>
|
||||
<li class="active"><a href="#">News</a></li>
|
||||
<li><a href="#">Veranstaltungen</a></li>
|
||||
<li><a href="#">Mitarbeiter</a></li>
|
||||
<li class="nav_add_more"><a href="#">+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#"><i class="icon icon-cube" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Module</span></a></li>
|
||||
<li><a href="#"><i class="icon icon-navigate" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Navigation</span></a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-cube" aria-hidden="true"></i>
|
||||
<div class="title">Module</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-navigate" aria-hidden="true"></i>
|
||||
<div class="title">Navigation</div>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#"><i class="icon icon-chatbox" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Sprachen</span></a></li>
|
||||
<li><a href="#"><i class="icon icon-pie-graph" aria-hidden="true"></i> <span class="main_navigation_text l1_title">SEO & Pagespeed</span></a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-chatbox" aria-hidden="true"></i>
|
||||
<div class="title">Sprachen</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-pie-graph" aria-hidden="true"></i>
|
||||
<div class="title">SEO & Pagespeed</div>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#"><i class="icon icon-contacts" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Benutzer</span></a></li>
|
||||
<li><a href="#"><i class="icon icon-gear" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Settings</span></a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-contacts" aria-hidden="true"></i>
|
||||
<div class="title">Benutzer</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-gear" aria-hidden="true"></i>
|
||||
<div class="title">Settings</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Profile -->
|
||||
<!-- <div class="user_profile">
|
||||
<a class="user_profile_trigger">
|
||||
<span class="user_profile_image"><i class="icon icon-person" aria-hidden="true"></i></span>
|
||||
<span class="user_profile_text">Hans Zimmer <span class="user_role">Administrator</span></span>
|
||||
<span class="user_profile_open"><i class="fa fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span style="clear:both; display:block;"></span>
|
||||
<div class="user_profile">
|
||||
<a class="trigger">
|
||||
<div class="image"><i class="icon icon-person" aria-hidden="true"></i></div>
|
||||
<div class="text">Hans Zimmer <div class="role">Administrator</div></div>
|
||||
<div class="btn"><i class="icon icon-arrow-up" aria-hidden="true"></i></div>
|
||||
</a>
|
||||
<div class="user_profile_content">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li><a href=""><i class="icon icon-color-wand" aria-hidden="true"></i><span class="navigation_text">Profil anpassen</span></a></li>
|
||||
<li><a href=""><i class="icon icon-log-out" aria-hidden="true"></i><span class="navigation_text">ausloggen</span></a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
||||
<div class="title">Profil anpassen</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-log-out" aria-hidden="true"></i>
|
||||
<div class="title">Ausloggen</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
/*--------------------------------------------------------------
|
||||
# Left Sidebar (Main Navigation)
|
||||
--------------------------------------------------------------*/
|
||||
.cms_sidebar {position:fixed; left:0px; top:40px; bottom:0px; background:#152129; width:70px; transition:all 0.3s; z-index:2000;}
|
||||
.cms_sidebar_trigger {
|
||||
position:absolute;
|
||||
left:100%;
|
||||
bottom:5px;
|
||||
background:#1a2e3b;
|
||||
width:30px;
|
||||
height:30px;
|
||||
color:#FFF;
|
||||
padding-top:;
|
||||
text-align:center;
|
||||
font-size:20px;
|
||||
cursor:pointer;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.cms_sidebar_trigger:hover {background:#28b78d;}
|
||||
.trigger_active i:before {
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
@import "../mixins";
|
||||
|
||||
.cms_sidebar_mainnav {height:100%; /*overflow-y:scroll;*/}
|
||||
.cms_sidebar_inner {position:relative; width:auto;}
|
||||
.cms_sidebar_icons_bg {background:#1a2e3b; width:70px; position:absolute; top:0px; left:0px; bottom:0px;}
|
||||
.main_navigation ul {list-style-type:none;}
|
||||
.main_navigation ul li {padding:0px; line-height:1.2; color:#FFF; position:relative; width:70px;}
|
||||
.main_navigation ul li .fa, .main_navigation ul li .icon {
|
||||
color:#FFF;
|
||||
font-size:22px;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
left:0;
|
||||
margin-bottom:5px;
|
||||
display:block;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.main_navigation ul li .fa {font-size:16px;}
|
||||
.main_navigation ul li .main_navigation_text {
|
||||
position:relative;
|
||||
font-size:10px;
|
||||
display:block;
|
||||
color:#FFF;
|
||||
text-align:center;
|
||||
width:auto;
|
||||
float:none;
|
||||
line-height:1;
|
||||
/*transition:all 0.3s;*/
|
||||
}
|
||||
.main_navigation ul li a {color:#FFF; display:block; height:auto; width:70px; height:auto; padding:8px 0px; text-align:center;}
|
||||
.main_navigation ul li:after {clear:both; content:""; display:block;}
|
||||
.main_navigation ul li:hover {background:rgba(40,183,141,0.3);}
|
||||
/*--------------------------------------------------------------
|
||||
# Left Sidebar (Main Navigation)
|
||||
--------------------------------------------------------------*/
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
background: @cms_bg_light;
|
||||
color: white;
|
||||
width: 70px;
|
||||
transition: all 0.3s;
|
||||
z-index: 2000;
|
||||
|
||||
.main_navigation ul li.active {background:#28b78d;}
|
||||
.main_navigation ul li.active .fa {background:#19435e;}
|
||||
&>.wrapper {
|
||||
height:100%; /*overflow-y:scroll;*/
|
||||
|
||||
.main_navigation ul li.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}
|
||||
.main_navigation .submenu {margin-left:45px;}
|
||||
.main_navigation .submenu .submenu_headline {padding-left:15px;}
|
||||
.main_navigation .submenu li {}
|
||||
.main_navigation .submenu li .main_navigation_text {
|
||||
font-size:14px;
|
||||
display:block;
|
||||
color:#FFF;
|
||||
text-align:left;
|
||||
float:left;
|
||||
padding:0px 10px 0px 15px;
|
||||
width:180px;
|
||||
line-height:35px;
|
||||
}
|
||||
&>.inner {
|
||||
position:relative; width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.main_navigation .submenu li a {height:35px; padding:0px; text-align:left;}
|
||||
.main_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2);}
|
||||
.main_navigation .submenu li.nav_add_more .main_navigation_text {text-align:center;}
|
||||
.main_navigation .submenu li:hover {background:rgba(56,29,29,0.6);}
|
||||
/* Main navigation */
|
||||
.mainnav {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
li {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
padding: 0;
|
||||
line-height: 1.2;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
/* Submenu */
|
||||
.sub_navigation {
|
||||
position:absolute;
|
||||
left:100%;
|
||||
top:0px;
|
||||
background:#152129;
|
||||
width:180px;
|
||||
height:auto;
|
||||
transition:all 0.3s;
|
||||
/*visibility:visible;
|
||||
opacity:1;*/
|
||||
visibility:hidden;
|
||||
opacity:0;
|
||||
}
|
||||
.sub_navigation ul {list-style-type:none;}
|
||||
.sub_navigation ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
|
||||
.sub_navigation ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
|
||||
.sub_navigation .nav_add_more {border-top:solid 1px rgba(255,255,255,0.2); border-bottom:solid 1px rgba(255,255,255,0.2); display:block;}
|
||||
.sub_navigation .nav_add_more a {display:block; text-align:center; color:rgba(255,255,255,0.5); font-weight:600; font-size:20px;}
|
||||
.sub_navigation ul li.active, .cms_content_sidebar .sub_navigation ul li:hover {background:#28B78D;}
|
||||
.sub_navigation ul li.active:after {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-right-color: #f5f3f4;
|
||||
border-width: 10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.sub_navigation_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}
|
||||
&:after {clear:both; content:""; display:block;}
|
||||
&:hover {
|
||||
background:rgba(40,183,141,0.3);
|
||||
.subnav {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.main_navigation ul li:hover .sub_navigation {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
&.active {background:#28b78d;}
|
||||
// &.active .fa {background:#19435e;}
|
||||
|
||||
/*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
|
||||
|
||||
/* Open Sidebar */
|
||||
.open_sidebar {width:250px;}
|
||||
.open_sidebar .sub_navigation {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
left:70px;
|
||||
}
|
||||
.open_sidebar .main_navigation ul li.active {position:inherit;}
|
||||
.open_sidebar .sub_navigation ul li.active {position:relative;}
|
||||
.open_sidebar .main_navigation>ul>li.active>a>i:after {
|
||||
right: 0;
|
||||
top: 75%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-right-color: #152129;
|
||||
border-width: 7px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/*.open_sidebar {width:225px;}
|
||||
.open_sidebar .main_navigation ul li .main_navigation_text {
|
||||
width:auto;
|
||||
float:left;
|
||||
text-align:left;
|
||||
padding:0px 10px 0px 15px;
|
||||
line-height:40px;
|
||||
font-size:14px;
|
||||
}
|
||||
.open_sidebar .cms_sidebar_icons_bg {width:45px;}
|
||||
.open_sidebar .main_navigation ul li a {height:40px; width:auto; text-align:left; padding:0px;}
|
||||
.open_sidebar .main_navigation ul li .fa, .open_sidebar .main_navigation ul li .icon {
|
||||
float:left;
|
||||
height:40px;
|
||||
width:45px;
|
||||
line-height:40px;
|
||||
margin:0px;
|
||||
}*/
|
||||
.title {
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
width: auto;
|
||||
float: none;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
/*transition:all 0.3s;*/
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Left Sidebar (User Profile)
|
||||
--------------------------------------------------------------*/
|
||||
.user_profile {position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;}
|
||||
.user_profile_trigger {display:block;}
|
||||
.user_profile_trigger a {display:block; width:100%; height:100%;}
|
||||
.user_profile_image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
|
||||
.user_profile_image .icon {font-size:22px; color:#FFF;}
|
||||
.user_profile_image img {width:70%; margin:0 auto; display:block;}
|
||||
.user_profile_text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
|
||||
.user_profile_text .user_role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
|
||||
a {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 70px;
|
||||
height: auto;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user_profile_trigger:hover {background:rgba(40,183,141,0.3);}
|
||||
.user_profile_open {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
|
||||
.user_profile_open .fa {color:#FFF; font-size:18px; transition:all 0.3s;}
|
||||
/* Sub navigation */
|
||||
.subnav {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0px;
|
||||
background: #152129;
|
||||
width: 180px;
|
||||
height: auto;
|
||||
transition: all 0.3s;
|
||||
/*visibility:visible;
|
||||
opacity:1;*/
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
ul {list-style-type:none;}
|
||||
ul li {font-size:12px; display:block; text-align:left; padding:0px 10px 0px 15px; width:auto; line-height:30px; color:#FFF; position:relative;}
|
||||
ul li a {color:#FFF; display:block; width:100%; height:100%; padding:0px; text-align:left;}
|
||||
ul li.active, ul li:hover {background:#28B78D;}
|
||||
ul li.active:after {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-right-color: #f5f3f4;
|
||||
border-width: 10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.user_profile_content {display:none; color:#FFF; padding-bottom:30px;}
|
||||
.user_profile_content ul {list-style-type:none;}
|
||||
.user_profile_content li {padding:0px; line-height:1.2; color:#FFF; position:relative;}
|
||||
.user_profile_content ul li .icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
|
||||
.user_profile_content ul li .navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
|
||||
.user_profile_content ul li a {color:#FFF; display:block; height:45px;}
|
||||
.user_profile_content ul li:after {clear:both; content:""; display:block;}
|
||||
.user_profile_content ul li:hover {background:rgba(40,183,141,0.3);}
|
||||
.subnav_headline {color:#FFF; padding:0px 10px 0px 15px; font-weight:600; width:100%; display:block; border-bottom:solid 1px #FFF; line-height:50px; font-size:12px;}
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Left Sidebar (User Profile)
|
||||
--------------------------------------------------------------*/
|
||||
.user_profile {
|
||||
position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;
|
||||
&>.trigger {
|
||||
.clearfix();
|
||||
display:block;
|
||||
|
||||
// a {display:block; width:100%; height:100%;}
|
||||
|
||||
.open_profile {background:rgba(40,183,141,0.3);}
|
||||
.open_profile .user_profile_trigger {background:rgba(40,183,141,0.5);}
|
||||
.open_profile .fa-angle-up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
|
||||
.image .icon {font-size:22px; color:#FFF;}
|
||||
.image img {width:70%; margin:0 auto; display:block;}
|
||||
|
||||
.text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
|
||||
.text .role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
|
||||
|
||||
&:hover {background:rgba(40,183,141,0.3);}
|
||||
|
||||
.btn {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
|
||||
.btn .icon {color:#FFF; font-size:18px; transition:all 0.3s;}
|
||||
}
|
||||
|
||||
&>.content {
|
||||
display:none; color:#FFF; padding-bottom:30px;
|
||||
|
||||
ul{
|
||||
list-style-type: none;
|
||||
|
||||
li{
|
||||
padding:0px; line-height:1.2; color:#FFF; position:relative;
|
||||
.icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
|
||||
.navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
|
||||
a {color:#FFF; display:block; height:45px;}
|
||||
&:after {clear:both; content:""; display:block;}
|
||||
&:hover {background:rgba(40,183,141,0.3);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
background:rgba(40,183,141,0.3);
|
||||
&>.trigger{background:rgba(40,183,141,0.5);}
|
||||
.icon-arrow-up{transform: rotate(180deg);}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: @screen-xs-max) {
|
||||
.sidebar {
|
||||
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
||||
|
||||
.subnav ul li{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: @screen-md-max) {
|
||||
.sidebar {left:0px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Sidebar"
|
||||
name: "Sidebar",
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="project-files/img/cms_logo.png" alt=""></a></div>
|
||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||
<div class="name">Meine Website</div>
|
||||
<a class="navbutton"><i class="icon icon-menu" aria-hidden="true"></i></a>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,11 +9,13 @@
|
||||
@import "../mixins.less";
|
||||
|
||||
.topbar {
|
||||
.clearfix();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: @cms_bg;
|
||||
background: @cms_bg_light;
|
||||
color: white;
|
||||
height: 40px;
|
||||
z-index: 1500;
|
||||
|
||||
@@ -49,27 +49,25 @@
|
||||
float: left;
|
||||
width: auto;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
&>.navbutton {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
font-size: 22px;
|
||||
margin-left: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
/*padding:3px 10px 0px 5px;*/
|
||||
padding-top: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background:rgba(40,183,141,0.3);
|
||||
background: fade(@cms_brand_primary, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user