start adding base template
This commit is contained in:
parent
2220bce227
commit
e1b81ea472
10284
assets/fonts/config.json
Normal file
10284
assets/fonts/config.json
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/fonts/iconfont.eot
Normal file
BIN
assets/fonts/iconfont.eot
Normal file
Binary file not shown.
42
assets/fonts/iconfont.svg
Normal file
42
assets/fonts/iconfont.svg
Normal file
@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="iconfont" horiz-adv-x="1000" >
|
||||
<font-face font-family="iconfont" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="search" unicode="" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
|
||||
|
||||
<glyph glyph-name="menu" unicode="" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="chatbox" unicode="" d="M148 69c-82 0-148 60-148 138v409c0 78 66 140 148 140h516c82 0 149-62 149-140v-409c0-78-67-138-149-138h-8v-125s-154 105-168 115-13 10-41 10h-299z" horiz-adv-x="812.5" />
|
||||
|
||||
<glyph glyph-name="document-text" unicode="" d="M559 520c2-6 4-12 4-20v-478c0-26-20-47-43-47h-475c-23 0-45 21-45 47v656c0 26 22 47 45 47h312c6 0 12 0 18-4 4-2 10-6 14-10l164-179c4-4 4-8 6-12z m-465-20v-19c0-2 2-6 6-6h138c4 0 6 4 6 6v19c0 4-2 6-6 6h-138c-4 0-6-2-6-6z m0-250v-19c0-2 2-6 6-6h240c4 0 4 4 4 6v19c0 4 0 6-4 6h-240c-4 0-6-2-6-6z m312-144v19c0 4 0 6-4 6h-302c-4 0-6-2-6-6v-19c0-2 2-6 6-6h302c4 0 4 4 4 6z m63 250v19c0 4 0 6-4 6h-365c-4 0-6-2-6-6v-19c0-2 2-6 6-6h365c4 0 4 4 4 6z m-92 146h117l-138 153v-129c0-12 9-24 21-24z" horiz-adv-x="562.5" />
|
||||
|
||||
<glyph glyph-name="gear" unicode="" d="M678 350c0-47 29-84 72-109-8-26-19-51-31-75-49 12-88-5-121-39s-43-72-32-121c-23-12-48-23-74-31-25 43-70 72-117 72s-92-29-117-72c-26 8-53 19-76 31 11 49 4 88-30 121s-72 41-121 30c-11 23-23 50-31 76 43 25 72 70 72 117s-29 84-72 109c8 26 18 51 31 75 49-12 88 6 121 39s41 72 30 121c23 12 50 23 76 31 25-43 70-72 117-72s92 29 117 72c26-8 53-19 76-31-11-49-3-88 30-121s72-51 121-39c12-24 23-49 31-75-43-25-72-62-72-109z m-303-191c106 0 191 86 191 191s-85 191-191 191-191-85-191-191 86-191 191-191z" horiz-adv-x="750" />
|
||||
|
||||
<glyph glyph-name="images" unicode="" d="M832 577c25-2 45-24 43-47l-27-514c-2-25-24-43-49-41l-645 31c-25 2-45 20-43 45l4 90-29-2c-23-2-43 14-45 35l-41 461c-2 22 14 41 37 43l578 47c24 2 43-14 45-35l10-106z m-693-12c2 23 21 43 47 43l427-22-4 61h-2v2c-1 10-9 16-19 16l-510-43c-10 0-19-8-19-18v0-2l31-348 35 49z m652-461l20 387v2 0c0 11-10 19-22 19l-113 6-57 4-398 18c-12 0-22-8-24-18v0-2l-6-123-13-250v-14l12 14 199 213c8 8 15 12 27 12s22-6 27-14l84-96 6-6c4-4 12-8 20-8s10 2 17 6l34 24c7 6 13 8 21 8s18-4 22-10l52-65z m-125 234c-39 0-68 30-68 69s31 68 68 68c39 0 68-31 68-68s-31-69-68-69z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="log-out" unicode="" d="M654 217l102 102h-443v62h443l-102 102 43 45 178-178-178-178z m47-133c6 6 12 10 16 16h80c-78-113-211-188-359-188-243 0-438 196-438 438s195 438 438 438c148 0 281-75 359-188h-80c-4 6-10 10-16 16-70 70-164 109-263 109s-196-39-266-109-109-166-109-266 39-195 109-266 166-109 266-109 193 39 263 109z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="pie-graph" unicode="" d="M2 350c0 10-2 22-2 31 0 225 182 407 406 407 10 0 22-2 32-2v-63-373h-373-63z m150-285c-50 62-82 139-87 223h435v435c84-6 160-37 223-88 92-74 152-187 152-316 0-225-182-407-406-407-129 0-242 61-317 153z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="paper-airplane" unicode="" d="M0 319l875 469-219-876-218 219-157-219-31 313z m623-283l156 630-629-337 163-61 375 301-250-344z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="contacts" unicode="" d="M404 178c92-27 149-121 170-203h-574c22 82 78 176 170 203 35-19 74-31 117-31s82 12 117 31z m-117 438c113 0 207-94 207-207s-94-207-207-207-207 93-207 207 94 207 207 207z m0-366c67 0 121 45 145 100h-289c23-55 78-100 144-100z m281-150c-25 39-66 84-117 104 22 17 41 44 55 68 25-10 53-16 82-16 43 0 82 12 117 32 92-28 149-106 170-188h-307z m-31 359c-15 73-60 135-123 170 37 57 102 96 174 96 113 0 207-94 207-207s-94-207-207-207c-22 0-43 4-63 10 6 15 12 31 14 49 16-6 31-8 49-8 66 0 121 43 144 97h-195z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="cube" unicode="" d="M850 522c13 0 25-12 25-24v-357c0-18-12-33-27-43v-2l-342-180v-2c-4-2-8-2-12-2-13 0-25 12-25 24v361c0 18 10 34 25 43v0l6 4 336 174 4 2c4 2 6 2 10 2z m-26 96c0 0 16-6 16-18 0-14-16-21-16-21l-357-190-4-2c-8-4-16-6-25-6s-18 2-26 6l-4 2-357 188s-16 9-16 23c0 12 16 18 16 18l353 160s22 10 34 10 33-10 33-10z m-443-278c16-9 25-25 25-43v-361c0-12-11-24-25-24-4 0-8 2-12 4v0l-342 180v2c-15 10-27 25-27 43v357c0 12 12 24 25 24 4 0 8 0 10-2l4-2 334-174z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="compass" unicode="" d="M438 399c25 0 48-24 48-49s-23-49-48-49-49 24-49 49 23 49 49 49z m0 389c240 0 437-198 437-438s-197-438-437-438-438 198-438 438 197 438 438 438z m95-534l166 358-357-166-166-358z" horiz-adv-x="875" />
|
||||
|
||||
<glyph glyph-name="arrow-left" unicode="" d="M375 625l-293-275 293-275-41-37-334 312 334 313z" horiz-adv-x="375" />
|
||||
|
||||
<glyph glyph-name="arrow-right" unicode="" d="M0 625l41 38 334-313-334-312-41 37 293 275z" horiz-adv-x="375" />
|
||||
|
||||
<glyph glyph-name="color-wand" unicode="" d="M273 540l500-502-66-67-500 502z m-31 64v125h63v-125h-63z m0-398v125h63v-125h-63z m180 234v62h125v-62h-125z m59 191l-88-88-45 43 88 90z m-415 0l45 45 88-90-45-43z m0-326l88 88 45-43-88-90z m-66 135v62h125v-62h-125z" horiz-adv-x="773.4" />
|
||||
|
||||
<glyph glyph-name="navigate" unicode="" d="M406 756c225 0 407-181 407-406s-182-406-407-406-406 181-406 406 182 406 406 406z m0-656l188 438-438-188h250v-250z" horiz-adv-x="812.5" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After 
(image error) Size: 5.9 KiB |
BIN
assets/fonts/iconfont.ttf
Normal file
BIN
assets/fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/iconfont.woff
Normal file
BIN
assets/fonts/iconfont.woff
Normal file
Binary file not shown.
BIN
assets/fonts/iconfont.woff2
Normal file
BIN
assets/fonts/iconfont.woff2
Normal file
Binary file not shown.
@ -7,7 +7,6 @@
|
||||
<link rel="stylesheet" href="project-files/fonts/font-awesome/font-awesome.css">
|
||||
<link rel="stylesheet" href="project-files/fonts/ionicons/ionicons.min.css">
|
||||
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="project-files/js/functions.js"></script>
|
||||
|
||||
@ -53,14 +52,9 @@
|
||||
<li><a href="#"><i class="ion_icon ion-gear-a" aria-hidden="true"></i> <span class="main_navigation_text l1_title">Einstellungen</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="user_profile">
|
||||
<a class="user_profile_trigger">
|
||||
|
||||
@ -3,13 +3,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="project-files/fonts/font-awesome/font-awesome.css">
|
||||
<!-- <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> -->
|
||||
<!-- <link rel="stylesheet" href="project-files/fonts/font-awesome/font-awesome.css">
|
||||
<link rel="stylesheet" href="project-files/fonts/ionicons/ionicons.min.css">
|
||||
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="project-files/js/functions.js"></script>
|
||||
<script src="project-files/js/functions.js"></script> -->
|
||||
|
||||
<title>CMS Template</title>
|
||||
</head>
|
||||
|
||||
@ -4,12 +4,11 @@
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="project-files/fonts/font-awesome/font-awesome.css">
|
||||
<link rel="stylesheet" href="project-files/fonts/ionicons/ionicons.min.css">
|
||||
<!-- <link rel="stylesheet" href="project-files/fonts/font-awesome/font-awesome.css"> -->
|
||||
<!-- <link rel="stylesheet" href="project-files/fonts/ionicons/ionicons.min.css"> -->
|
||||
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="project-files/js/functions.js"></script>
|
||||
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
|
||||
<!-- <script src="project-files/js/functions.js"></script> -->
|
||||
|
||||
<title>CMS Template</title>
|
||||
</head>
|
||||
|
||||
@ -8,165 +8,6 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Reset
|
||||
--------------------------------------------------------------*/
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, div
|
||||
{margin:0; padding:0; border:0; outline:0;}
|
||||
mark {background:none;}
|
||||
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section
|
||||
{display:block;}
|
||||
nav ul {list-style:none;}
|
||||
blockquote, q {quotes:none;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
|
||||
a {margin:0; padding:0; text-decoration:none;}
|
||||
hr { display:block; height:1px; border:0; border:none; padding:0;}
|
||||
input, select {vertical-align:middle;}
|
||||
.clear {clear:both; margin: 0; padding:0;}
|
||||
img {line-height:0;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Grid
|
||||
--------------------------------------------------------------*/
|
||||
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after {clear:both; content:" ";display:table;}
|
||||
|
||||
/* Container */
|
||||
.container {padding: 0 15px; margin: 0 auto; position:relative;}.container-fluid {padding: 0 15px; margin: 0 auto;}.row {margin: 0 -15px;}
|
||||
@media (min-width: 768px) {.container {width: 95%;}}
|
||||
@media (min-width: 1050px) {.container {width: 90%;}}
|
||||
@media (min-width: 1250px) {.container {width: 95%;}}
|
||||
@media (min-width: 1800px) {.container {width: 1600px;}}
|
||||
@media (min-width: 2000px) {.container {width: 1900px;}}
|
||||
|
||||
/* Clear */
|
||||
.tab4:nth-of-type(3n+1) {clear:both;}
|
||||
|
||||
.mobile0, .tab0, .medium0, .large0, .mobile1, .tab1, .medium1, .large1, .mobile2, .tab2, .medium2, .large2, .mobile3, .tab3, .medium3, .large3, .mobile4, .tab4, .medium4, .large4, .mobile5, .tab5, .medium5, .large5, .mobile6, .tab6, .medium6, .large6, .mobile7, .tab7, .medium7, .large7, .mobile8, .tab8, .medium8, .large8, .mobile9, .tab9, .medium9, .large9, .mobile10, .tab10, .medium10, .large10, .mobile11, .tab11, .medium11, .large11, .mobile12, .tab12, .medium12, .large12, .tab20 {position: relative; min-height: 1px; padding: 0 15px; display:block;}
|
||||
|
||||
.mobile0, .mobile1, .mobile2, .mobile3, .mobile4, .mobile5, .mobile6, .mobile7, .mobile8, .mobile9, .mobile10, .mobile11, .mobile12 {float: left;}
|
||||
|
||||
.mobile12 {width: 100%;}.mobile11 {width: 91.66666667%;}.mobile10 {width: 83.33333333%;}.mobile9 {width: 75%;}.mobile8 {width: 66.66666667%;}.mobile7 {width: 58.33333333%;}.mobile6 {width: 50%;}.mobile5 {width: 41.66666667%;}.mobile4 {width: 33.33333333%;}.mobile3 {width: 25%;}.mobile2 {width: 16.66666667%;}.mobile1 {width: 8.33333333%;}.mobile0 {display:none;}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6, .tab7, .tab8, .tab9, .tab10, .tab11, .tab12, .tab20 {float: left;}
|
||||
.tab12 {width: 100%;}.tab11 {width: 91.66666667%;}.tab10 {width: 83.33333333%;}.tab9 {width: 75%;}.tab8 {width: 66.66666667%;}.tab7 {width: 58.33333333%;}.tab6 {width: 50%;}.tab5 {width: 41.66666667%;}.tab4 {width: 33.33333333%;}.tab3 {width: 25%;}.tab2 {width: 16.66666667%;}.tab1 {width: 8.33333333%;}.tab0 {display:none;}.tab20 {width: 20%;}
|
||||
}
|
||||
@media (min-width: 1050px) {
|
||||
.medium1, .medium2, .medium3, .medium4, .medium5, .medium6, .medium7, .medium8, .medium9, .medium10, .medium11, .medium12 {float: left;}.medium12 {width: 100%;}
|
||||
.medium11 {width: 91.66666667%;}.medium10 {width: 83.33333333%;}.medium9 {width: 75%;}.medium8 {width: 66.66666667%;}.medium7 {width: 58.33333333%;}.medium6 {width: 50%;}.medium5 {width: 41.66666667%;}.medium4 {width: 33.33333333%;}.medium3 {width: 25%;}.medium2 {width: 16.66666667%;}.medium1 {width: 8.33333333%;}.medium0 {display:none;}
|
||||
}
|
||||
@media (min-width: 1250px) {
|
||||
.large1, .large2, .large3, .large4, .large5, .large6, .large7, .large8, .large9, .large10, .large11, .large12 {float: left;}
|
||||
.large12 {width: 100%;}.large11 {width: 91.66666667%;}.large10 {width: 83.33333333%;}.large9 {width: 75%;}.large8 {width: 66.66666667%;}.large7 {width: 58.33333333%;}.large6 {width: 50%;}.large5 {width: 41.66666667%;}.large4 {width: 33.33333333%;}.large3 {width: 25%;}.large2 {width: 16.66666667%;}.large1 {width: 8.33333333%;}.large0 {display:none;}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# General Settings
|
||||
--------------------------------------------------------------*/
|
||||
html,body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:15px;
|
||||
line-height:1.4;
|
||||
color:#000;
|
||||
background:#f5f3f4;
|
||||
}
|
||||
.clear {clear:both;}
|
||||
.section_padding {padding:100px 0px;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typo
|
||||
--------------------------------------------------------------*/
|
||||
p {margin-bottom:20px; color:#000;}
|
||||
h1 {display: block; font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:left; color:#333;}
|
||||
h2 {display: block; font-size: 45px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:center;}
|
||||
h3 {display: block; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing:2px;}
|
||||
h4 {display: block; font-size: 15px; font-weight: 600; line-height: 1.2;}
|
||||
h5 {display: block; font-size: 18px; font-weight: 600; line-height: 1.2; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
|
||||
strong {font-weight:700;}
|
||||
mark {color:#ac1526;}
|
||||
a {text-decoration:none; color:#ac1526;}
|
||||
a:hover {color:#901624;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
--------------------------------------------------------------*/
|
||||
.input_holder {margin-bottom:20px; display:block;}
|
||||
.input_header {margin-bottom:10px;}
|
||||
.input_description {font-size:13px; color:#666;}
|
||||
input, textarea, select {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
width:100%;
|
||||
display:block;
|
||||
height:35px;
|
||||
padding:0px 10px;
|
||||
color:#333;
|
||||
backrgound:#FFF;
|
||||
border:solid 1px #CCC;
|
||||
outline:none;
|
||||
font-size:13px;
|
||||
transition:all 0.3s;
|
||||
-webkit-transition:all 0.3s;
|
||||
-moz-transition:all 0.3s;
|
||||
}
|
||||
textarea {padding:10px; height:auto;}
|
||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
|
||||
label {font-weight:600; color:#333;}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
line-height:50px;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.checkbox_holder {position:absolute; top:0px; bottom:0px;}
|
||||
.check_checkbox {
|
||||
background: #FFF;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
border-radius: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: 50%;
|
||||
margin-top:-9px;
|
||||
left: 0px;
|
||||
z-index: 5;
|
||||
transition: border .25s linear;
|
||||
-webkit-transition: border .25s linear;
|
||||
|
||||
}
|
||||
.check_checkbox::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 0;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: auto;
|
||||
transition: background 0.25s linear;
|
||||
-webkit-transition: background 0.25s linear;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check_checkbox {
|
||||
border: 1px solid #28b78d;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .check_checkbox:before{
|
||||
background: #28b78d!important;
|
||||
}
|
||||
.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
|
||||
.checkbox_holder:hover .check_checkbox {border: 1px solid #28b78d;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# CMS CONTENT FORM
|
||||
--------------------------------------------------------------*/
|
||||
@ -180,345 +21,6 @@ input[type=checkbox]:checked ~ .check_checkbox:before{
|
||||
.fieldgroup_open .cms_fieldgroup_content {display:block;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Topbar
|
||||
--------------------------------------------------------------*/
|
||||
.cms_topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: #1a2e3b;
|
||||
height: 40px;
|
||||
z-index: 1500;
|
||||
}
|
||||
.cms_logo {width:70px; display:block; height:40px; float:left; position:relative;}
|
||||
.cms_logo a {display:block; width:100%; height:100%;}
|
||||
.cms_logo img {width:32px; height:auto; margin:0 auto; padding-top:4px; display:block;}
|
||||
.cms_logo:hover {background:rgba(40,183,141,0.3);}
|
||||
|
||||
.cms_websitename {float:left; width:auto; line-height:40px; color:#FFF; padding-left:15px;}
|
||||
.cms_open_navbutton {
|
||||
display:block;
|
||||
float:left;
|
||||
font-size:22px;
|
||||
color:#FFF;
|
||||
width:auto;
|
||||
height:100%;
|
||||
margin-left:40px;
|
||||
height:40px;
|
||||
width:40px;
|
||||
/*padding:3px 10px 0px 5px;*/
|
||||
padding-top:4px;
|
||||
cursor:pointer;
|
||||
text-align:center;
|
||||
}
|
||||
.cms_open_navbutton:hover {background:rgba(40,183,141,0.3);}
|
||||
.cms_open_navbutton .fa {color:#FFF;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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);
|
||||
}
|
||||
|
||||
.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 .ion_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);}
|
||||
|
||||
.main_navigation ul li.active {background:#28b78d;}
|
||||
.main_navigation ul li.active .fa {background:#19435e;}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);}
|
||||
|
||||
/* 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;}
|
||||
|
||||
.main_navigation ul li:hover .sub_navigation {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*.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 .ion_icon {
|
||||
float:left;
|
||||
height:40px;
|
||||
width:45px;
|
||||
line-height:40px;
|
||||
margin:0px;
|
||||
}*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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 .ion_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;}
|
||||
|
||||
.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;}
|
||||
|
||||
|
||||
.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 .ion_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);}
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Area
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
@ -21,6 +21,8 @@
|
||||
"eslint": "^4.5.0",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-plugin-html": "^3.2.0",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^13.0.4",
|
||||
|
||||
382
src/app.less
Normal file
382
src/app.less
Normal file
@ -0,0 +1,382 @@
|
||||
@import "mixins";
|
||||
@import "icons";
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Reset
|
||||
--------------------------------------------------------------*/
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, div
|
||||
{margin:0; padding:0; border:0; outline:0;}
|
||||
mark {background:none;}
|
||||
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section
|
||||
{display:block;}
|
||||
nav ul {list-style:none;}
|
||||
blockquote, q {quotes:none;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
|
||||
a {margin:0; padding:0; text-decoration:none;}
|
||||
hr { display:block; height:1px; border:0; border:none; padding:0;}
|
||||
input, select {vertical-align:middle;}
|
||||
.clear {clear:both; margin: 0; padding:0;}
|
||||
img {line-height:0;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Grid
|
||||
--------------------------------------------------------------*/
|
||||
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after {clear:both; content:" ";display:table;}
|
||||
|
||||
/* Container */
|
||||
.container {padding: 0 15px; margin: 0 auto; position:relative;}.container-fluid {padding: 0 15px; margin: 0 auto;}.row {margin: 0 -15px;}
|
||||
@media (min-width: 768px) {.container {width: 95%;}}
|
||||
@media (min-width: 1050px) {.container {width: 90%;}}
|
||||
@media (min-width: 1250px) {.container {width: 95%;}}
|
||||
@media (min-width: 1800px) {.container {width: 1600px;}}
|
||||
@media (min-width: 2000px) {.container {width: 1900px;}}
|
||||
|
||||
/* Clear */
|
||||
.tab4:nth-of-type(3n+1) {clear:both;}
|
||||
|
||||
.mobile0, .tab0, .medium0, .large0, .mobile1, .tab1, .medium1, .large1, .mobile2, .tab2, .medium2, .large2, .mobile3, .tab3, .medium3, .large3, .mobile4, .tab4, .medium4, .large4, .mobile5, .tab5, .medium5, .large5, .mobile6, .tab6, .medium6, .large6, .mobile7, .tab7, .medium7, .large7, .mobile8, .tab8, .medium8, .large8, .mobile9, .tab9, .medium9, .large9, .mobile10, .tab10, .medium10, .large10, .mobile11, .tab11, .medium11, .large11, .mobile12, .tab12, .medium12, .large12, .tab20 {position: relative; min-height: 1px; padding: 0 15px; display:block;}
|
||||
|
||||
.mobile0, .mobile1, .mobile2, .mobile3, .mobile4, .mobile5, .mobile6, .mobile7, .mobile8, .mobile9, .mobile10, .mobile11, .mobile12 {float: left;}
|
||||
|
||||
.mobile12 {width: 100%;}.mobile11 {width: 91.66666667%;}.mobile10 {width: 83.33333333%;}.mobile9 {width: 75%;}.mobile8 {width: 66.66666667%;}.mobile7 {width: 58.33333333%;}.mobile6 {width: 50%;}.mobile5 {width: 41.66666667%;}.mobile4 {width: 33.33333333%;}.mobile3 {width: 25%;}.mobile2 {width: 16.66666667%;}.mobile1 {width: 8.33333333%;}.mobile0 {display:none;}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6, .tab7, .tab8, .tab9, .tab10, .tab11, .tab12, .tab20 {float: left;}
|
||||
.tab12 {width: 100%;}.tab11 {width: 91.66666667%;}.tab10 {width: 83.33333333%;}.tab9 {width: 75%;}.tab8 {width: 66.66666667%;}.tab7 {width: 58.33333333%;}.tab6 {width: 50%;}.tab5 {width: 41.66666667%;}.tab4 {width: 33.33333333%;}.tab3 {width: 25%;}.tab2 {width: 16.66666667%;}.tab1 {width: 8.33333333%;}.tab0 {display:none;}.tab20 {width: 20%;}
|
||||
}
|
||||
@media (min-width: 1050px) {
|
||||
.medium1, .medium2, .medium3, .medium4, .medium5, .medium6, .medium7, .medium8, .medium9, .medium10, .medium11, .medium12 {float: left;}.medium12 {width: 100%;}
|
||||
.medium11 {width: 91.66666667%;}.medium10 {width: 83.33333333%;}.medium9 {width: 75%;}.medium8 {width: 66.66666667%;}.medium7 {width: 58.33333333%;}.medium6 {width: 50%;}.medium5 {width: 41.66666667%;}.medium4 {width: 33.33333333%;}.medium3 {width: 25%;}.medium2 {width: 16.66666667%;}.medium1 {width: 8.33333333%;}.medium0 {display:none;}
|
||||
}
|
||||
@media (min-width: 1250px) {
|
||||
.large1, .large2, .large3, .large4, .large5, .large6, .large7, .large8, .large9, .large10, .large11, .large12 {float: left;}
|
||||
.large12 {width: 100%;}.large11 {width: 91.66666667%;}.large10 {width: 83.33333333%;}.large9 {width: 75%;}.large8 {width: 66.66666667%;}.large7 {width: 58.33333333%;}.large6 {width: 50%;}.large5 {width: 41.66666667%;}.large4 {width: 33.33333333%;}.large3 {width: 25%;}.large2 {width: 16.66666667%;}.large1 {width: 8.33333333%;}.large0 {display:none;}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# General Settings
|
||||
--------------------------------------------------------------*/
|
||||
html,body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:15px;
|
||||
line-height:1.4;
|
||||
color:#000;
|
||||
background:#f5f3f4;
|
||||
}
|
||||
.clear {clear:both;}
|
||||
.section_padding {padding:100px 0px;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typo
|
||||
--------------------------------------------------------------*/
|
||||
p {margin-bottom:20px; color:#000;}
|
||||
h1 {display: block; font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:left; color:#333;}
|
||||
h2 {display: block; font-size: 45px; font-weight: 600; line-height: 1.2; margin-bottom:10px; text-align:center;}
|
||||
h3 {display: block; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing:2px;}
|
||||
h4 {display: block; font-size: 15px; font-weight: 600; line-height: 1.2;}
|
||||
h5 {display: block; font-size: 18px; font-weight: 600; line-height: 1.2; border-bottom:dotted 1px #999; padding-bottom:5px; margin-top:20px; margin-bottom:20px;}
|
||||
strong {font-weight:700;}
|
||||
mark {color:#ac1526;}
|
||||
a {text-decoration:none; color:#ac1526;}
|
||||
a:hover {color:#901624;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
--------------------------------------------------------------*/
|
||||
.input_holder {margin-bottom:20px; display:block;}
|
||||
.input_header {margin-bottom:10px;}
|
||||
.input_description {font-size:13px; color:#666;}
|
||||
input, textarea, select {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
width:100%;
|
||||
display:block;
|
||||
height:35px;
|
||||
padding:0px 10px;
|
||||
color:#333;
|
||||
backrgound:#FFF;
|
||||
border:solid 1px #CCC;
|
||||
outline:none;
|
||||
font-size:13px;
|
||||
transition:all 0.3s;
|
||||
-webkit-transition:all 0.3s;
|
||||
-moz-transition:all 0.3s;
|
||||
}
|
||||
textarea {padding:10px; height:auto;}
|
||||
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
|
||||
label {font-weight:600; color:#333;}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
line-height:50px;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.checkbox_holder {position:absolute; top:0px; bottom:0px;}
|
||||
.check_checkbox {
|
||||
background: #FFF;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #999;
|
||||
border-radius: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: 50%;
|
||||
margin-top:-9px;
|
||||
left: 0px;
|
||||
z-index: 5;
|
||||
transition: border .25s linear;
|
||||
-webkit-transition: border .25s linear;
|
||||
}
|
||||
.check_checkbox::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 0;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: auto;
|
||||
transition: background 0.25s linear;
|
||||
-webkit-transition: background 0.25s linear;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check_checkbox {
|
||||
border: 1px solid #28b78d;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .check_checkbox:before{
|
||||
background: #28b78d!important;
|
||||
}
|
||||
.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
|
||||
.checkbox_holder:hover .check_checkbox {border: 1px solid #28b78d;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# CMS CONTENT FORM
|
||||
--------------------------------------------------------------*/
|
||||
.cms_content_form {}
|
||||
.cms_content_form_sidebar {background:#FFF; padding:25px; border:solid 1px #CCC;}
|
||||
.cms_fieldgroup {background:#f0f0f0; border:solid 1px #CCC; margin-bottom:20px;}
|
||||
.cms_fieldgroup_header {position:relative; color:#333; border-bottom:solid 1px #CCC; height:40px; line-height:40px; padding:0px 25px; font-weight:600;}
|
||||
.cms_fieldgroup_content {padding:25px; display:none;}
|
||||
.cms_fieldgroup_trigger {position:absolute; top:0px; width:100px; right:0px; padding-right:25px; cursor:pointer; height:40px; line-height:40px; text-align:right;}
|
||||
.cms_fieldgroup_trigger i {color:#333; font-size:18px;}
|
||||
.fieldgroup_open .cms_fieldgroup_content {display:block;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Area
|
||||
--------------------------------------------------------------*/
|
||||
.cms_content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
|
||||
.cms_content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
|
||||
|
||||
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
||||
.content_open_sidebar {left:250px;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Search Section
|
||||
--------------------------------------------------------------*/
|
||||
.cms_content_search_section {display:block; margin-bottom:30px;}
|
||||
.searchbar_left {width:70%; float:left;}
|
||||
.searchbar_right {width:30%; float:left; padding-left:30px;}
|
||||
|
||||
.input_search_replace {background:#e5e5e5;}
|
||||
.cms_searchbox {position:relative; display:block; height:35px;}
|
||||
.cms_searchbox input {position:absolute; left:0px; top:0px; right:0px; padding-left:40px;}
|
||||
.cms_searchbox .fa {line-height:35px; font-size:13px; background:none; color:#999; z-index:500; position:absolute; left:15px;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# CMS ADD BUTTON
|
||||
--------------------------------------------------------------*/
|
||||
.button {
|
||||
display:inline-block;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
padding:0px 20px 0px 40px;
|
||||
border-radius:20px;
|
||||
color:#FFF;
|
||||
font-weight:600;
|
||||
font-size:14px;
|
||||
transition:background 0.3s;
|
||||
}
|
||||
.button i {font-size:16px; line-height:28px; position:absolute; left:20px;}
|
||||
.button:hover {color:#FFF;}
|
||||
|
||||
.cms_add_button {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0px;
|
||||
background:#28b78d;
|
||||
}
|
||||
.cms_add_button:hover {background:#189671;}
|
||||
.button_action {
|
||||
height:25px;
|
||||
line-height:25px;
|
||||
font-size:13px;
|
||||
position:relative;
|
||||
margin-left:20px;
|
||||
background:#152129;
|
||||
padding:0px 10px 0px 30px;
|
||||
}
|
||||
.button_action i {line-height:25px; left:10px;}
|
||||
.button_action:hover {background:#1f3441;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# BACK BUTTON
|
||||
--------------------------------------------------------------*/
|
||||
.back_button {display:block; float:left; height:30px; width:25px; background:#1f3441; text-align:center; line-height:30px; color:#FFF; font-size:20px; margin-right:10px;}
|
||||
.back_button:hover {background:#28b78d; color:#FFF;}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.content_table_headline {margin-bottom:10px;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.cms_table_row_content, .cms_table_row_header {margin:0px -25px;}
|
||||
.cms_table_row {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
background:#FFF;
|
||||
padding:10px 15px;
|
||||
position:relative;
|
||||
}
|
||||
.cms_table_row:nth-child(even) {background:#f5f3f4;}
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding:0px 10px;
|
||||
}
|
||||
|
||||
.cell_checkbox {width:40px;}
|
||||
.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
|
||||
.cell_title {position:relative;}
|
||||
.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}
|
||||
|
||||
.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
|
||||
.cell_status_online {color:#28b78d;} .cell_status_online:before {background-color:#28b78d;}
|
||||
.cell_status_offline {color:#ea5e5d;} .cell_status_offline:before {background-color:#ea5e5d;}
|
||||
.cell_status_remaining {color:#5fb1e9;} .cell_status_remaining:before {background-color:#5fb1e9;}
|
||||
.cell_status_expired {color:#eba760;} .cell_status_expired:before {background-color:#eba760;}
|
||||
|
||||
.cell_settings {text-align:right; width:150px; position:relative; right:0px;}
|
||||
.cell_settings a {color:#000; list-style-type:none;}
|
||||
.cell_settings .fa-cog {font-size:20px;}
|
||||
.cell_settings_inner {
|
||||
position:absolute;
|
||||
width:205px; height:40px;
|
||||
top:50%;
|
||||
right:-3px;
|
||||
margin-top:-21px;
|
||||
border-radius:20px;
|
||||
background:#e0e0e0;
|
||||
padding:0px 10px;
|
||||
z-index:-1;
|
||||
overflow:hidden;
|
||||
opacity:0;
|
||||
-webkit-opacity:0;
|
||||
-moz-opacity:0;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
.cell_settings_inner_container {float:right;}
|
||||
.cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;}
|
||||
.cell_settings_inner_section_last {border:none; padding-right:3px;}
|
||||
.cell_settings_inner_section ul {list-style-type:none;}
|
||||
.cell_settings_inner_section ul li {float:left; padding-right:7px;}
|
||||
.cell_settings_inner_section_last ul li {padding:0px;}
|
||||
.cell_settings_inner_section ul li a {color:#000;}
|
||||
.cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;}
|
||||
|
||||
.cell_settings_click, .cell_settings_close {/*z-index:700;*/ cursor:pointer;}
|
||||
.cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;}
|
||||
|
||||
.cms_table_row_header .cms_table_row {background:none; font-size:13px; padding:10px 15px;}
|
||||
.cms_table_row_header .fa {font-size:12px;}
|
||||
|
||||
.cell_settings_inner_open {
|
||||
opacity:1;
|
||||
-webkit-opacity:1;
|
||||
-moz-opacity:1;
|
||||
width:205px;
|
||||
z-index:600;
|
||||
transition:all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Table Footer
|
||||
--------------------------------------------------------------*/
|
||||
.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color:#666; margin-bottom:20px;}
|
||||
.cms_paging {float:right; margin-left:10px; display:block; /*border:solid 1px #CCC;*/ background:#FFF;}
|
||||
.cms_paging ul {list-style-type:none;}
|
||||
.cms_paging ul li {float:left; margin-right:2px;}
|
||||
.cms_paging ul li:last-child {margin-right:0px;}
|
||||
.cms_paging ul li a {transition:all 0.3s; color:#FFF; text-align:center; display:block; height:25px; width:25px; line-height:25px; background:#CCC;}
|
||||
.cms_paging ul li i {}
|
||||
.cms_paging ul li.active a {background:#28b78d; color:#FFF;}
|
||||
.cms_paging ul li a:hover {background:#28b78d; color:#FFF;}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Breakpoints
|
||||
--------------------------------------------------------------*/
|
||||
@media(max-width:1100px) {
|
||||
/*.cms_open_mobilenav {display:block;}
|
||||
|
||||
.cms_sidebar {left:0px;}
|
||||
.cms_content_area {left:0px;}
|
||||
.cms_content_sidebar {left:0px;}
|
||||
|
||||
.content_open_sidebar {left:225px;}
|
||||
.content_open_sidebar .cms_content_sidebar {left:225px;}
|
||||
.open_sidebar {left:0px;}*/
|
||||
|
||||
.cms_sidebar {left:0px;}
|
||||
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.cms_content_sidebar, .content_open_sidebar .cms_content_sidebar {left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;}
|
||||
.cms_content_main {margin-left:0px;}
|
||||
.cms_content_sidebar .sub_navigation ul li {width:100%;}
|
||||
|
||||
.table_cell {display:block; padding:0px 5px;}
|
||||
.cell_checkbox {display:table-cell; width:40px;}
|
||||
.cell_image {display:none;}
|
||||
.cell_edit_cols {display:none;}
|
||||
.cell_settings {width:40px; position:absolute; right:21px; top:50%; margin-top:2px;}
|
||||
.cell_status_container {width:30px; position:absolute; right:20px; top:50%; margin-top:-28px;}
|
||||
.cell_status_text {display:none;}
|
||||
.cell_status_head {display:none;}
|
||||
.cell_title {font-weight:600;}
|
||||
.cell_status:before {width:20px; height:20px;}
|
||||
.cms_table_row, .cms_table_row_header .cms_table_row {padding:10px 5px;}
|
||||
.cms_table_row_header {display:none;}
|
||||
}
|
||||
29
src/app.vue
29
src/app.vue
@ -1,21 +1,32 @@
|
||||
<template>
|
||||
<div class="App">
|
||||
<h1>MyApp</h1>
|
||||
<navigation :items="navigationItems"></navigation>
|
||||
<transition name="component-fade" mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
|
||||
<div class="app">
|
||||
<topbar></topbar>
|
||||
<sidebar :items="navigationItems"></sidebar>
|
||||
|
||||
<div class="content_area">
|
||||
<div class="content_main">
|
||||
<transition name="component-fade" mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<style lang="less">
|
||||
@import "app";
|
||||
</style>
|
||||
|
||||
import Navigation from './components/navigation.vue';
|
||||
<script>
|
||||
import Topbar from './components/navigation.vue';
|
||||
import Sidebar from './components/navigation.vue';
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Navigation
|
||||
Topbar,
|
||||
Sidebar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
107
src/components/login.vue
Normal file
107
src/components/login.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<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>
|
||||
262
src/components/sidebar.vue
Normal file
262
src/components/sidebar.vue
Normal file
@ -0,0 +1,262 @@
|
||||
<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">
|
||||
<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 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>
|
||||
<!-- Sub Navigation -->
|
||||
<div class="sub_navigation">
|
||||
<span class="sub_navigation_headline">Kategorie</span>
|
||||
<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-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-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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
</a>
|
||||
<div class="user_profile_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>
|
||||
</ul>
|
||||
</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);
|
||||
}
|
||||
|
||||
.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);}
|
||||
|
||||
.main_navigation ul li.active {background:#28b78d;}
|
||||
.main_navigation ul li.active .fa {background:#19435e;}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);}
|
||||
|
||||
/* 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;}
|
||||
|
||||
.main_navigation ul li:hover .sub_navigation {
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*.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;
|
||||
}*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# 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;}
|
||||
|
||||
.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;}
|
||||
|
||||
|
||||
.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);}
|
||||
|
||||
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Sidebar"
|
||||
}
|
||||
</script>
|
||||
82
src/components/topbar.vue
Normal file
82
src/components/topbar.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="project-files/img/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>
|
||||
|
||||
<style lang="less">
|
||||
@import "../mixins.less";
|
||||
|
||||
.topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0px;
|
||||
background: @cms_bg;
|
||||
height: 40px;
|
||||
z-index: 1500;
|
||||
|
||||
&>.logo {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(40,183,141,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
padding-top:4px;
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
&>.name {
|
||||
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%;
|
||||
margin-left: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
/*padding:3px 10px 0px 5px;*/
|
||||
padding-top: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background:rgba(40,183,141,0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Topbar"
|
||||
}
|
||||
</script>
|
||||
34
src/icons.less
Normal file
34
src/icons.less
Normal file
@ -0,0 +1,34 @@
|
||||
@import "mixins";
|
||||
|
||||
@iconfont_path: "~/assets/fonts/";
|
||||
@iconfont_version: 1;
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
.fontPath(@iconfont_path, "iconfont", @iconfont_version);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.icon:before {
|
||||
.iconStyles("iconfont");
|
||||
}
|
||||
|
||||
.icon-search:before { content: '\e800'; } /* '' */
|
||||
.icon-menu:before { content: '\f0c9'; } /* '' */
|
||||
.icon-chatbox:before { content: '\f11b'; } /* '' */
|
||||
.icon-document-text:before { content: '\f12e'; } /* '' */
|
||||
.icon-gear:before { content: '\f13d'; } /* '' */
|
||||
.icon-images:before { content: '\f148'; } /* '' */
|
||||
.icon-log-out:before { content: '\f29f'; } /* '' */
|
||||
.icon-pie-graph:before { content: '\f2a5'; } /* '' */
|
||||
.icon-paper-airplane:before { content: '\f2c3'; } /* '' */
|
||||
.icon-contacts:before { content: '\f2d9'; } /* '' */
|
||||
.icon-cube:before { content: '\f318'; } /* '' */
|
||||
.icon-compass:before { content: '\f37c'; } /* '' */
|
||||
.icon-arrow-left:before { content: '\f3d2'; } /* '' */
|
||||
.icon-arrow-right:before { content: '\f3d3'; } /* '' */
|
||||
.icon-color-wand:before { content: '\f416'; } /* '' */
|
||||
.icon-navigate:before { content: '\f46e'; } /* '' */
|
||||
37
src/mixins.less
Normal file
37
src/mixins.less
Normal file
@ -0,0 +1,37 @@
|
||||
@import "variables";
|
||||
|
||||
// font path mixin
|
||||
.fontPath(@path, @filename, @version){
|
||||
src: url('@{path}@{filename}.eot?@{version}');
|
||||
src: url('@{path}@{filename}.eot?@{version}#iefix') format('embedded-opentype'),
|
||||
url('@{path}@{filename}.woff2?@{version}') format('woff2'),
|
||||
url('@{path}@{filename}.woff?@{version}') format('woff'),
|
||||
url('@{path}@{filename}.ttf?@{version}') format('truetype'),
|
||||
url('@{path}@{filename}.svg?@{version}#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconStyles(@font-face){
|
||||
font-family: @font-face;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
}
|
||||
1
src/variables.less
Normal file
1
src/variables.less
Normal file
@ -0,0 +1 @@
|
||||
@cms_bg: #1a2e3b;
|
||||
298
src/views/foo.vue
Normal file
298
src/views/foo.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<template>
|
||||
|
||||
<!-- Content Headline -->
|
||||
<div class="cms_content_main_headline"><h1>Beiträge // News</h1> <a href="#" class="button cms_add_button"><i class="ion-plus-round"></i> Eintrag hinzufügen</a></div>
|
||||
|
||||
<!-- Searching -->
|
||||
<div class="cms_content_search_section">
|
||||
<div class="searchbar_left">
|
||||
<form action="" method="GET">
|
||||
<span class="cms_searchbox">
|
||||
<i class="fa fa-search" aria-hidden="true"></i>
|
||||
<input style="resize: none;" class="input_search" placeholder="Suchen" name="search" size="" value="" type="text">
|
||||
<input style="display:none;" type="submit">
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
<!-- <div class="searchbar_right">
|
||||
<form action="" method="GET">
|
||||
<span class="cms_searchbox">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
<input style="resize: none;" class="input_search_replace" placeholder="Suchen & Ersetzen" name="search" size="" value="" type="text">
|
||||
</span>
|
||||
|
||||
<input style="display:none;" type="submit">
|
||||
</form>
|
||||
</div> -->
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content Table Headline -->
|
||||
<div class="content_table_headline">
|
||||
25 Einträge // 5 Selektiert <a href="#" class="button button_action"><i class="ion-gear-a"></i>Aktion</a>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="cms_content_table">
|
||||
|
||||
<div class="cms_table_row_header">
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id1" type="checkbox" name="check_id1" value=""><label for="check_id1"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image">Beitragsbild <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
||||
<div class="table_cell cell_title">Titel <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
||||
<div class="table_cell cell_date">Datum <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
||||
<div class="table_cell cell_author">Autor <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
||||
<div class="table_cell">Kategorie <i class="fa fa-angle-down" aria-hidden="true"></i></div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status_head">Status <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></span></div>
|
||||
<div class="table_cell cell_settings"><span class="cell_edit_cols">Spalten anpassen <i class="fa fa-columns" aria-hidden="true"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cms_table_row_content">
|
||||
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id2" type="checkbox" name="check_id2" value=""><label for="check_id2"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
||||
<div class="table_cell cell_date">20.03.2017</div>
|
||||
<div class="table_cell cell_author">Administrator</div>
|
||||
<div class="table_cell">News</div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_online"><span class="cell_status_text">online</span></span></div>
|
||||
<div class="table_cell cell_settings">
|
||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
||||
|
||||
<div class="cell_settings_inner">
|
||||
|
||||
<div class="cell_settings_inner_container">
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
||||
<ul>
|
||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id3" type="checkbox" name="check_id3" value=""><label for="check_id3"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
||||
<div class="table_cell cell_date">20.03.2017</div>
|
||||
<div class="table_cell cell_author">Administrator</div>
|
||||
<div class="table_cell">News</div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_online"><span class="cell_status_text">online</span></span></div>
|
||||
<div class="table_cell cell_settings">
|
||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
||||
|
||||
<div class="cell_settings_inner">
|
||||
|
||||
<div class="cell_settings_inner_container">
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
||||
<ul>
|
||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id4" type="checkbox" name="check_id4" value=""><label for="check_id4"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
||||
<div class="table_cell cell_date">20.03.2017</div>
|
||||
<div class="table_cell cell_author">Administrator</div>
|
||||
<div class="table_cell">News</div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_offline"><span class="cell_status_text">offline</span></span></div>
|
||||
<div class="table_cell cell_settings">
|
||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
||||
|
||||
<div class="cell_settings_inner">
|
||||
|
||||
<div class="cell_settings_inner_container">
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
||||
<ul>
|
||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id5" type="checkbox" name="check_id5" value=""><label for="check_id5"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
||||
<div class="table_cell cell_date">20.03.2017</div>
|
||||
<div class="table_cell cell_author">Administrator</div>
|
||||
<div class="table_cell">News</div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_remaining"><span class="cell_status_text">ausstehend</span></span></div>
|
||||
<div class="table_cell cell_settings">
|
||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
||||
|
||||
<div class="cell_settings_inner">
|
||||
|
||||
<div class="cell_settings_inner_container">
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
||||
<ul>
|
||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row -->
|
||||
<div class="cms_table_row">
|
||||
<div class="table_cell cell_checkbox"><div class="checkbox_holder"><input id="check_id6" type="checkbox" name="check_id6" value=""><label for="check_id6"></label><div class="check_checkbox"></div></div></div>
|
||||
<div class="table_cell cell_image"><a href="#"><img src="project-files/img/placeholder_image.jpg" alt=""></a></div>
|
||||
<div class="table_cell cell_title"><a href="#">Wilkommen auf unserer Website</a></div>
|
||||
<div class="table_cell cell_date">20.03.2017</div>
|
||||
<div class="table_cell cell_author">Administrator</div>
|
||||
<div class="table_cell">News</div>
|
||||
<div class="table_cell cell_status_container"><span class="cell_status cell_status_expired"><span class="cell_status_text">abgelaufen</span></span></div>
|
||||
|
||||
<div class="table_cell cell_settings">
|
||||
<a class="cell_settings_click"><i class="fa fa-cog" aria-hidden="true"></i></a>
|
||||
|
||||
<div class="cell_settings_inner">
|
||||
|
||||
<div class="cell_settings_inner_container">
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-files-o" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-eye-slash" aria-hidden="true"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell_settings_inner_section cell_settings_inner_section_last">
|
||||
<ul>
|
||||
<li><a class="cell_settings_close"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
|
||||
<div class="clear"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="table_footer">
|
||||
1-5 / 25
|
||||
<div class="cms_paging">
|
||||
<ul>
|
||||
<li><a href="#"><i class="ion-ios-arrow-left"></i></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li class="active"><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">...</a></li>
|
||||
<li><a href="#">10</a></li>
|
||||
<li><a href="#"><i class="ion-ios-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user