panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

use more less variables

Browse Source
This commit is contained in:
Anton Schubert 2017-08-31 02:10:12 +02:00
parent 6cd58726c5
commit baa73a32a3
6 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/app.less
View File

@ -61,9 +61,9 @@ html,body {
position: relative;
font-family: @font_family;
font-size: @font_size;
line-height: @line_height;
line-height: @line_height_base;
color: @text_color;
background: #f5f3f4;
background: @gray_light;
}
.clear {clear:both;}
.section_padding {padding:100px 0px;}
@ -71,15 +71,16 @@ html,body {
/*--------------------------------------------------------------
# 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;}
p {margin-bottom:20px; color: @text_color;}
h1, h2, h3, h4, h5{display: block; line-height: @line_height_heading;}
h1 {font-size: 25px; font-weight: 600; margin-bottom:10px; text-align:left; color: #333;}
h2 {font-size: 45px; font-weight: 600; margin-bottom:10px; text-align:center;}
h3 {font-size: 20px; font-weight: 300; letter-spacing:2px;}
h4 {font-size: 15px; font-weight: 600;}
h5 {font-size: 18px; font-weight: 600; 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;}
mark {color: @cms_brand_secondary;}
a {text-decoration:none; color: @cms_brand_secondary;}
a:hover {color:#901624;}
@ -88,7 +89,7 @@ a:hover {color:#901624;}
--------------------------------------------------------------*/
.input_holder {margin-bottom:20px; display:block;}
.input_header {margin-bottom:10px;}
.input_description {font-size:13px; color:#666;}
.input_description {font-size:13px; color: @text_color;}
input, textarea, select {
font-family: @font_family;
width: 100%;
@ -103,7 +104,7 @@ input, textarea, select {
transition: all 0.3s;
}
textarea {padding:10px; height:auto;}
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#28b78d;}
input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
label {font-weight:600; color: @text_color;}
input[type="checkbox"] {
@ -148,15 +149,15 @@ input[type="checkbox"] {
-webkit-transition: background 0.25s linear;
}
input[type=checkbox]:checked ~ .check_checkbox {
border: 1px solid #28b78d;
border: 1px solid @cms_brand_primary;
}
input[type=checkbox]:checked ~ .check_checkbox:before{
background: #28b78d!important;
background: @cms_brand_primary!important;
}
button{
height: 40px;
background: @cms_brand_secondary;
background: @gray_dark;
border: none;
color: #FFF;
cursor: pointer;
@ -167,7 +168,7 @@ button{
border-radius: 20px;
}
.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;}
.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
/*--------------------------------------------------------------
# CMS CONTENT FORM
@ -206,16 +207,16 @@ button{
/*--------------------------------------------------------------
# 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 {
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;}
@ -224,7 +225,7 @@ button{
position:absolute;
top:0px;
right:0px;
background:#28b78d;
background:@cms_brand_primary;
}
.cms_add_button:hover {background:#189671;}
.button_action {
@ -233,38 +234,32 @@ button{
font-size:13px;
position:relative;
margin-left:20px;
background:#152129;
background: @gray_dark;
padding:0px 10px 0px 30px;
}
.button_action i {line-height:25px; left:10px;}
.button_action:hover {background:#1f3441;}
.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;}
.back_button:hover {background:@cms_brand_primary; color:#FFF;}
/*--------------------------------------------------------------
# Table Footer
--------------------------------------------------------------*/
.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color:#666; margin-bottom:20px;}
.table_footer {float:right; text-align:right; line-height:25px; margin-top:20px; display:block; color: @text_color; 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;}
.cms_paging ul li.active a {background:@cms_brand_primary; color:#FFF;}
.cms_paging ul li a:hover {background:@cms_brand_primary; color:#FFF;}
/*--------------------------------------------------------------
# Breakpoints

2
src/components/my-form.vue
View File

@ -14,7 +14,7 @@
</my-input>
</div>
<div>
<button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
<button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
</div>
</form>
</template>

4
src/components/my-table.vue
View File

@ -143,7 +143,7 @@ export default {
background: white;
&:nth-child(even) {
background: #f5f3f4;
background: @gray_light;
}
}
@ -180,7 +180,7 @@ export default {
background: white;
&:nth-child(even) {
background: #f5f3f4;
background: @gray_light;
}
}

8
src/components/sidebar.vue
View File

@ -28,7 +28,7 @@
left: 0px;
top: 40px;
bottom: 0px;
background: @cms_bg_light;
background: @ui_bg;
color: white;
width: 70px;
transition: all 0.3s;
@ -64,7 +64,7 @@
}
}
&.active {background:#28b78d;}
&.active {background: @cms_brand_primary;}
// &.active .fa {background:#19435e;}
/*&.active .submenu {border-top:solid 1px rgba(255,255,255,0.2);}*/
@ -103,7 +103,7 @@
position: absolute;
left: 100%;
top: 0px;
background: #152129;
background: @gray_dark;
width: 180px;
height: auto;
transition: all 0.3s;
@ -126,7 +126,7 @@
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #f5f3f4;
border-right-color: @gray_light;
border-width: 10px;
margin-top: -10px;
}

14
src/components/topbar.vue
View File

@ -40,7 +40,7 @@ export default {
<style lang="less">
@import "../mixins.less";
@barHeight: 40px;
@bar_height: 40px;
/*--------------------------------------------------------------
# Topbar (Sitename)
@ -51,15 +51,15 @@ export default {
top: 0;
right: 0;
left: 0px;
background: @cms_bg_light;
background: @ui_bg;
color: white;
height: @barHeight;
height: @bar_height;
z-index: 1500;
&>.logo {
display: block;
width: 70px;
height: @barHeight;
height: @bar_height;
float: left;
position: relative;
@ -85,7 +85,7 @@ export default {
&>.name {
float: left;
width: auto;
line-height: @barHeight;
line-height: @bar_height;
padding-left: 15px;
}
@ -96,7 +96,7 @@ export default {
// height: 100%;
// font-size: 22px;
// margin-left: 40px;
// height: @barHeight;
// height: @bar_height;
// width: 40px;
// padding-top: 4px;
// cursor: pointer;
@ -140,7 +140,7 @@ export default {
}
.image {
max-height: @barHeight - 8px;
max-height: @bar_height - 8px;
img{
width:70%; margin:0 auto; display:block;
}

13
src/variables.less
View File

@ -4,18 +4,21 @@
@screen-lg: 1200px;
@font_family: "Open Sans", sans-serif;
@text_color: #666;
@text_color: #333;
@font_size: 14px;
@line_height: 1.4;
@line_height_base: 1.4;
@line_height_heading: 1.2;
@gray_dark: #152129;
@gray_light: #f5f3f4;
@cms_bg_lighter: #e0e0e0;
@cms_bg_light: #1a2e3b;
@cms_brand_primary: #28b78d;
@cms_brand_secondary: #152129;
@cms_brand_secondary: #ac1526;
@ui_bg: #1a2e3b;
/*****************************************/