some mobile optimization
This commit is contained in:
parent
a74707ba6d
commit
d15fc32b03
41
src/app.less
41
src/app.less
@ -58,11 +58,12 @@ img {line-height:0;}
|
||||
# General Settings
|
||||
--------------------------------------------------------------*/
|
||||
html,body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size:15px;
|
||||
line-height:1.4;
|
||||
color:#000;
|
||||
background:#f5f3f4;
|
||||
position: relative;
|
||||
font-family: @font_family;
|
||||
font-size: @font_size;
|
||||
line-height: @line_height;
|
||||
color: @text_color;
|
||||
background: #f5f3f4;
|
||||
}
|
||||
.clear {clear:both;}
|
||||
.section_padding {padding:100px 0px;}
|
||||
@ -89,23 +90,21 @@ a:hover {color:#901624;}
|
||||
.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;
|
||||
font-family: @font_family;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 35px;
|
||||
padding: 0px 10px;
|
||||
color: @text_color;
|
||||
background: white;
|
||||
border: solid 1px #CCC;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
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;}
|
||||
label {font-weight:600; color: @text_color;}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
@ -186,8 +185,8 @@ button{
|
||||
/*--------------------------------------------------------------
|
||||
# Content Area
|
||||
--------------------------------------------------------------*/
|
||||
.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
|
||||
.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
|
||||
.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;}
|
||||
.content_main {position:relative; top:0px; padding:25px;}
|
||||
|
||||
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
||||
.content_open_sidebar {left:250px;}
|
||||
|
||||
@ -132,24 +132,13 @@
|
||||
/*--------------------------------------------------------------
|
||||
# Content Tables
|
||||
--------------------------------------------------------------*/
|
||||
.cms_table{
|
||||
display: table;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.table_header, .table_content{margin: 0px -25px;}
|
||||
.table_header{
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.table_content{
|
||||
display: table-row-group;
|
||||
.cms_table {
|
||||
.table_header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table_row{
|
||||
display: table-row;
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
@ -159,64 +148,129 @@
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
// display: table-cell;
|
||||
/* vertical-align: middle; */
|
||||
font-size: 13px;
|
||||
padding: 10px 15px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.sortable:hover{cursor: pointer;}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cms_table{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
|
||||
&.align-center{text-align: center;}
|
||||
&.align-left{text-align: left;}
|
||||
&.align-right{text-align: right;}
|
||||
.table_header, .table_content{margin: 0px -25px;}
|
||||
.table_header{
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.table_content{
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.table_row{
|
||||
display: table-row;
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
&:nth-child(even) {
|
||||
background: #f5f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
padding: 10px 15px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sortable:hover{cursor: pointer;}
|
||||
|
||||
&.align-center{text-align: center;}
|
||||
&.align-left{text-align: left;}
|
||||
&.align-right{text-align: right;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.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 === */
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
|
||||
.actions_btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* === Other cell types === */
|
||||
/*.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;}*/
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*.cell_date {}
|
||||
.cell_author {}
|
||||
.cell_category {}
|
||||
.cell_status {position:relative; padding-left:20px;}
|
||||
.actions_container{
|
||||
list-style-type: none;
|
||||
|
||||
.cell_status:before {
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px; top:50%;
|
||||
margin-top:-5px;
|
||||
width:12px; height:12px;
|
||||
border-radius:100%;
|
||||
background:#88c87a;
|
||||
}
|
||||
.icon:hover{
|
||||
cursor: pointer;
|
||||
color: @cms_brand_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.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;}
|
||||
*/
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Cell settings === */
|
||||
.cell_settings {
|
||||
.clearfix();
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.cell_settings {
|
||||
position: relative;
|
||||
width: 22.4px + 2*15px;
|
||||
text-align: right;
|
||||
overflow: visible;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.actions_btn{
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 20;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
@ -239,9 +293,6 @@
|
||||
border-radius: 20px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
|
||||
&:last-child{
|
||||
border-right: 1px solid white;
|
||||
padding-right: 10px;
|
||||
@ -266,5 +317,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,7 +38,8 @@
|
||||
height:100%; /*overflow-y:scroll;*/
|
||||
|
||||
&>.inner {
|
||||
position:relative; width:auto;
|
||||
position:relative;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -74,11 +74,11 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width:32px;
|
||||
height:auto;
|
||||
margin:0 auto;
|
||||
padding-top:4px;
|
||||
display:block;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -165,10 +165,11 @@ export default {
|
||||
list-style-type: none;
|
||||
|
||||
li{
|
||||
.clearfix();
|
||||
.icon {
|
||||
float:left;
|
||||
float: left;
|
||||
width: 45px;
|
||||
line-height:45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -178,16 +179,21 @@ export default {
|
||||
line-height: 45px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
a {color:#FFF; display:block; height:45px;}
|
||||
&:after {clear:both; content:""; display:block;}
|
||||
&:hover {background:rgba(40,183,141,0.3);}
|
||||
a {
|
||||
display: block;
|
||||
color: white;
|
||||
height: 45px;
|
||||
}
|
||||
&:hover {
|
||||
background: darken(@cms_brand_primary, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.user_menu{display: block;}
|
||||
&>.trigger{background: rgba(40, 183, 141, 0.5);}
|
||||
&>.trigger{background: fade(@cms_brand_primary, 50%);}
|
||||
.trigger_btn .icon:before{transform: rotate(180deg);}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
@screen-md: 1024px;
|
||||
@screen-lg: 1200px;
|
||||
|
||||
@text_color: black;
|
||||
@font_family: "Open Sans", sans-serif;
|
||||
@text_color: #666;
|
||||
@font_size: 14px;
|
||||
@line_height: 1.4;
|
||||
|
||||
@gray_dark: #152129;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user