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

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

@ -14,7 +14,7 @@
</my-input> </my-input>
</div> </div>
<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> </div>
</form> </form>
</template> </template>

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

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

8
src/components/sidebar.vue
View File

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

14
src/components/topbar.vue
View File

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

13
src/variables.less
View File

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