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
|
# General Settings
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
html,body {
|
html,body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
position: relative;
|
||||||
font-size:15px;
|
font-family: @font_family;
|
||||||
line-height:1.4;
|
font-size: @font_size;
|
||||||
color:#000;
|
line-height: @line_height;
|
||||||
background:#f5f3f4;
|
color: @text_color;
|
||||||
|
background: #f5f3f4;
|
||||||
}
|
}
|
||||||
.clear {clear:both;}
|
.clear {clear:both;}
|
||||||
.section_padding {padding:100px 0px;}
|
.section_padding {padding:100px 0px;}
|
||||||
@ -89,23 +90,21 @@ a:hover {color:#901624;}
|
|||||||
.input_header {margin-bottom:10px;}
|
.input_header {margin-bottom:10px;}
|
||||||
.input_description {font-size:13px; color:#666;}
|
.input_description {font-size:13px; color:#666;}
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: @font_family;
|
||||||
width:100%;
|
width: 100%;
|
||||||
display:block;
|
display: block;
|
||||||
height:35px;
|
height: 35px;
|
||||||
padding:0px 10px;
|
padding: 0px 10px;
|
||||||
color:#333;
|
color: @text_color;
|
||||||
backrgound:#FFF;
|
background: white;
|
||||||
border:solid 1px #CCC;
|
border: solid 1px #CCC;
|
||||||
outline:none;
|
outline: none;
|
||||||
font-size:13px;
|
font-size: 14px;
|
||||||
transition:all 0.3s;
|
transition: all 0.3s;
|
||||||
-webkit-transition:all 0.3s;
|
|
||||||
-moz-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:#28b78d;}
|
||||||
label {font-weight:600; color:#333;}
|
label {font-weight:600; color: @text_color;}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -186,8 +185,8 @@ button{
|
|||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Content Area
|
# Content Area
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
.content_area {position:absolute; left:70px; top:40px; right:0px; transition:all 0.3s;}
|
.content_area {position:absolute; left:70px; top:40px; right:0px; height: 100%;}
|
||||||
.content_main {position:relative; top:0px; padding:25px; transition:all 0.3s;}
|
.content_main {position:relative; top:0px; padding:25px;}
|
||||||
|
|
||||||
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
.cms_content_main_headline {margin-bottom:20px; position:relative;}
|
||||||
.content_open_sidebar {left:250px;}
|
.content_open_sidebar {left:250px;}
|
||||||
|
|||||||
@ -132,12 +132,40 @@
|
|||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
# Content Tables
|
# Content Tables
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
|
.cms_table {
|
||||||
|
.table_header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
.cms_table{
|
.cms_table{
|
||||||
display: table;
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
table-layout: fixed;
|
|
||||||
|
|
||||||
.table_header, .table_content{margin: 0px -25px;}
|
.table_header, .table_content{margin: 0px -25px;}
|
||||||
.table_header{
|
.table_header{
|
||||||
@ -174,6 +202,8 @@
|
|||||||
&.align-left{text-align: left;}
|
&.align-left{text-align: left;}
|
||||||
&.align-right{text-align: right;}
|
&.align-right{text-align: right;}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* === Other cell types === */
|
/* === Other cell types === */
|
||||||
/*.cell_checkbox {width:40px;}
|
/*.cell_checkbox {width:40px;}
|
||||||
@ -206,17 +236,41 @@
|
|||||||
/* === Cell settings === */
|
/* === Cell settings === */
|
||||||
.cell_settings {
|
.cell_settings {
|
||||||
.clearfix();
|
.clearfix();
|
||||||
position: relative;
|
|
||||||
width: 22.4px + 2*15px;
|
.actions_btn{
|
||||||
text-align: right;
|
display: none;
|
||||||
overflow: visible;
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions_container{
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
.icon:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
color: @cms_brand_primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
.cell_settings {
|
||||||
|
position: relative;
|
||||||
|
width: 22.4px + 2*15px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
|
||||||
.actions_btn{
|
.actions_btn{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: block;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -239,9 +293,6 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
|
||||||
padding-right: 5px;
|
|
||||||
|
|
||||||
&:last-child{
|
&:last-child{
|
||||||
border-right: 1px solid white;
|
border-right: 1px solid white;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
|||||||
@ -38,7 +38,8 @@
|
|||||||
height:100%; /*overflow-y:scroll;*/
|
height:100%; /*overflow-y:scroll;*/
|
||||||
|
|
||||||
&>.inner {
|
&>.inner {
|
||||||
position:relative; width:auto;
|
position:relative;
|
||||||
|
width:auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -74,11 +74,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width:32px;
|
display: block;
|
||||||
height:auto;
|
width: 30px;
|
||||||
margin:0 auto;
|
height: auto;
|
||||||
padding-top:4px;
|
margin: 0 auto;
|
||||||
display:block;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -165,10 +165,11 @@ export default {
|
|||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
li{
|
li{
|
||||||
|
.clearfix();
|
||||||
.icon {
|
.icon {
|
||||||
float:left;
|
float: left;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
line-height:45px;
|
line-height: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
@ -178,16 +179,21 @@ export default {
|
|||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
a {color:#FFF; display:block; height:45px;}
|
a {
|
||||||
&:after {clear:both; content:""; display:block;}
|
display: block;
|
||||||
&:hover {background:rgba(40,183,141,0.3);}
|
color: white;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: darken(@cms_brand_primary, 5%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
.user_menu{display: block;}
|
.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);}
|
.trigger_btn .icon:before{transform: rotate(180deg);}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,10 @@
|
|||||||
@screen-md: 1024px;
|
@screen-md: 1024px;
|
||||||
@screen-lg: 1200px;
|
@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;
|
@gray_dark: #152129;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user