@import "config.less";
-/* Using font size */
-@list-font-size-main: 22 * @unit_base;
-@list-font-size-sub: 16 * @unit_base;
-@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group
-
-@list-font-weight: normal;
-
-@list-smallicon-size: 17 * @unit_base;
-@list-li-padding-horizontal: 8 * @unit_base;
-
-@list-bigicon-size: 64 * @unit_base;
-@list-bigicon-size2: 72 * @unit_base;
-
// Bubble
@list-li-bubble-font-size: 19 * @unit_base;
@list-li-bubble-time-font-size: 11 * @unit_base;
padding-right: 0 * @unit_base; // Clear default button padding-right
}
- &> .ui-li {
+ .ui-li {
border-left-width : 0px;
border-right-width : 0px;
}
}
- & > .ui-li-static {
+ .ui-li-static {
background-color: @color_bg;
border-bottom-width: 1px;
}
- &> .ui-li:not(.ui-li-divider) {
+ .ui-li:not(.ui-li-divider) {
&:not(.ui-li-static) {
min-height : 55 * @unit_base;
}
}
- &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
+ .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
&:not(.ui-li-static) {
min-height : 64 * @unit_base;
}
.ui-content {
.ui-listview {
- margin-left: -16 * @unit_base;
- margin-right: -16 * @unit_base;
+ margin-left: -8 * @unit_base;
+ margin-right: -8 * @unit_base;
padding-bottom: 1px;
.ui-listview {
}
}
.ui-listview,
-.ui-li {
+.ui-li,
+.ui-collapsible-heading {
list-style:none;
padding:0;
font-size : @list-font-size-main;
}
.ui-li,
+.ui-collapsible-heading,
.ui-li.ui-field-contain {
display: block;
margin:0;
text-align: left;
}
.ui-li {
+ .ui-btn { // NOTE: For vertical aligning buttons. It breaks collapsible size. Refactor it!
+ top: 50%;
+ margin-top: -0.8em;
+ }
+}
+.ui-li,
+.ui-collapsible-heading,
+.ui-collapsible > .ui-collapsible-content,
+.ui-listview li {
h3 {
margin-top : 0px;
margin-bottom : 0px;
font-size : @list-font-size-main;
font-weight : normal;
}
-
form {
display : inline-block;
}
- .ui-btn {
- top: 50%;
- margin-top: -0.8em;
- }
.ui-btn-text {
position: relative;
a.ui-link-inherit {
&.ui-field-contain:last-child {
border-bottom-width: 1px;
}
- &>.ui-btn-inner {
+ &>.ui-btn-inner,
+ &.ui-collapsible-heading>.ui-collapsible-heading-toggle {
display: block;
position: relative;
padding: 0;
}
.ui-btn-inner a.ui-link-inherit,
- &.ui-li-static {
+ .ui-collapsible-heading-toggle > .ui-btn-inner,
+ &>li,
+ &.ui-li-static, {
padding-top : 15 * @unit_base;
padding-bottom : 15 * @unit_base;
-/* padding-left : 13 * @unit_base;
- padding-right : 13 * @unit_base;*/
display: block;
white-space: normal; // default: 1line
border-right-width : 0px;
}
- .ui-btn-inner a.ui-link-inherit {
+ .ui-btn-inner a.ui-link-inherit,
+ .ui-collapsible-heading-toggle {
.LESStext-no-ellipsis();
}
- .ui-toggleswitch {
+ .ui-toggle-switch {
&:last-child {
top : 50%;
- margin-top : -20 * @unit_base;
+ margin-top : -17 * @unit_base;
display : inline-block;
position : absolute;
right : 0px;
}
}
- .ui-toggleswitch.ui-toggleswitch-image-style {
- &:last-child {
- margin-top : -22 * @unit_base;
-
- right : 0px;
- }
- }
[data-role="button"] {
&:last-child {
height : 30 * @unit_base;
.ui-btn-inner {
- padding : 5 * @unit_base 5 * @unit_base 5 * @unit_base 5 * @unit_base;
line-height : 20 * @unit_base;
color : transparent;
left : 5 * @unit_base;
}
}
+
+ label.ui-btn-icon_only {
+ top : 0px;
+ margin-top : 0px;
+ }
}
}
height: 38 * @unit_base;
+ font-size : @list-font-size-divider;
+ &>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
+ font-size : @list-font-size-divider;
+ }
&.ui-btn {
top : 0px;
margin-top: 0 * @unit_base;
border-radius : 0px;
- font-size : 16 * @unit_base;
+ font-size : @list-font-size-divider;
.ui-btn-inner.ui-btn-hastxt {
height : 100%;
padding-left : 0px;
}
}
+ &:not(.ui-btn) {
+ margin-left : 12 * @unit_base;
+ margin-right : 12 * @unit_base;
+ }
+
+ &>.ui-btn-text {
+ position : absolute;
+
+ top : 5 * @unit_base;
+ height : 18 * @unit_base;
+ padding-right : 10 * @unit_base;
+ }
+
&[data-style="dialogue"] {
height: 20 * @unit_base;
padding : 0px;
}
}
+.ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
+ .ui-btn-inner a {
+ .ui-li-text-sub {
+ width : 64%;
+ }
+ }
+}
+
.ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
.ui-li-text-sub {
width : 74%;
}
}
+.ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
+ .ui-li-text-sub {
+ width : 64%;
+ }
+}
+
.ui-li-icon-sub-right,
.ui-li-icon-sub {
position: absolute;
// Dialogue
// =========
.ui-listview {
- &> li.ui-li-dialogue {
+ li.ui-li-dialogue {
margin-left: 4 * @unit_base;
margin-right : 4 * @unit_base;
padding-left : 10 * @unit_base;
border-style : solid;
border-color : @color_dialogue_border_right;
border-width : 1px;
-/* border-top-width : 0px;*/
+
+ > .ui-btn-inner {
+ margin-left : 0px;
+ margin-right : 0px;
+
+ }
&:first-child {
border-top-width : 1px;
border-bottom-left-radius : 3px;
border-bottom-right-radius : 3px;
}
+
+ > img {
+ margin-left : 6 * @unit_base;
+ }
+
+ [data-role="button"]:last-child {
+ margin-right : 10 * @unit_base;
+ }
}
&> li.ui-li-dialogue.ui-body-s,
}
}
+// Edit list mode
+.ui-listview {
+ li.ui-li-dialogue-edit{
+ padding-left : 116 * @unit_base;
+ padding-top : 12 * @unit_base;
+ padding-bottom : 12 * @unit_base;
+
+ .ui-edit-title {
+ position : absolute;
+ left : 10 * @unit_base;
+ width : 91 * @unit_base;
+ padding-right : 8 * @unit_base;
+ display : inline-block;
+ top : 50%;
+ margin-top : -13 * @unit_base;
+
+ border-right-color : rgba(185, 184, 178, 1);
+ border-right-width : 1px;
+ border-right-style : solid;
+ }
+
+ input {
+ font-size : 22 * @unit_base;
+ background : transparent;
+ outline-color : transparent;
+ width : 100%;
+ padding-left : 0px;
+ padding-right : 0px;
+ }
+ }
+
+ > .ui-li.ui-li-dialogue-edit.ui-li-has-right-btn {
+ padding-right : 110 * @unit_base;
+ }
+}
+
// =========
// bubble li
// =========
border: 0px none red;
padding: 0 0;
padding-top: 0.5em; // vertical text alignment to center
- text-align: @style_list_bubble_date_text_align;
+ text-align: center;
& * {
display: inline-block;
background-color: @color_bg;
}
}
-// Expandable list animation
-
-@-webkit-keyframes ui-expand-show {
+@-webkit-keyframes addliitem {
from {
- -webkit-transform-origin: 0% 0%;
- -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
- } to {
- -webkit-transform-origin: 0% 0%;
- -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
- }
-}
-.ui-listview {
- &> .ui-li-expanded {
- background-color: @color_list_expandable_expanded_bg;
- }
- &> .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
- background-color: @color_list_expandable_expanded_bg;
- }
- .ui-li-expandable-shown {
- // Down arrow
- .LESSimg-expanded-icon;
- }
- .ui-li-expandable-hidden {
- // Right arrow
- .LESSimg-expand-icon;
+ -webkit-transform: scale(0.5);
+ -moz-transform: scale(0.5);
+ opacity: 0;
}
- .ui-li-expanded {
- overflow-x: hidden;
- }
- .ui-li-expand-transition-show {
- visibility: visible;
- -webkit-animation: ui-expand-show 0.4s 1 ease-out;
- }
- .ui-li-expand-transition-hide {
- visibility: hidden;
- height: 0px !important;
- min-height: 0px !important;
- padding-top: 0px;
- padding-bottom: 0px;
- border: 0px;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
+ to {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ opacity: 1;
}
}
-
-
-.LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
- .ui-li-expand-icon {
- background-image: url(images/00_button_expand_closed.png);
- background-size: 100%;
- position: absolute;
- top: 50%;
- width: 37 * @unit_base;
- height: 37 * @unit_base;
- margin-top: -(@size/2);
- right: 18 * @unit_base;
- }
+.addli
+{
+ -webkit-animation-name: addliitem;
+ -moz-animation-name: addliitem;
+ -webkit-animation-duration: 0.5s;
+ -moz-animation-duration: 0.5s;
+ -webkit-transition-timing-function: linear;
+ -moz-transition-timing-function: linear;
}
-.LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
- .ui-li-expanded-icon {
- background-image: url(images/00_button_expand_opened.png);
- background-size: 100%;
- position: absolute;
- top: 50%;
- width: 37 * @unit_base;
- height: 37 * @unit_base;
- margin-top: -(@size/2);
- right: 18 * @unit_base;
- }
-}
+@-webkit-keyframes removeliitem {
+ from {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ opacity : 1;
+ }
+ to {
+ -webkit-transform: scale(0.5);
+ -moz-transform: scale(0.5);
+ opacity : 0;
+ }
+}
+.removeli
+{
+ -webkit-animation-name: removeliitem;
+ -moz-animation-name: removeliitem;
+ -webkit-animation-duration: 0.5s;
+ -moz-animation-duration: 0.5s;
+ -webkit-transition-timing-function: linear;
+ -moz-transition-timing-function: linear;
+}
\ No newline at end of file
projects / platform / framework / web / web-ui-fw.git / blobdiff