@import "config.less";
-/* Resource color mapping table
-
-@color_popup_title_bg: popup_title_bg.png
-@color_popup_text_bg: popup_bg.png
-@color_popup_button_bg: popup_button_bg.png
-@color_popup_font: Popup title & default
-@color_popup_text_font: Popup text
-
-*/
-
-
@popup-text-padding-vert: 22 * @unit_base;
@popup-text-padding-hori: 16 * @unit_base;
@popup-ratio: 86.12%;
.ui-popup-screen {
background: #000000;
- opacity: 0.7;
+ opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: @z_base_popup;
}
+.ui-popup-scroller-bg {
+ width : 100%;
+}
+
.ui-popup-container {
position: absolute;
width: @popup-ratio;
- color: @color_popup_font;
z-index: (@z_base_popup + 1) !important;
background: @color_popup_text_bg;
-
- .ui-body-s {
- background: none;
+ text-align: center;
+ outline-color: @color_list_bg;
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ .ui-popup {
+ padding : 3px 2px 2px 2px;
+ background: @color_popup_text_bg;
+ width : 100%;
+ > .ui-popup-title,
+ > .ui-popup-text,
+ > .ui-popup-button-bg {
+ width : 100%;
+ }
}
- // --------- common style in popup ------------- //
.ui-popup-title {
width: 100%;
- height: 100%;
+ height: 40 * @unit_base;
+ text-align : left;
+ color : @color_bar_title_text;
+
font-size: @font_size_popup_basic_style_title;
- background: @color_popup_title_bg;
- }
+ font-weight : bold;
- p.ui-popup-title {
- color: @color_popup_font;
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
+ h1 {
+ font-size: @font_size_popup_basic_style_title;
+ font-weight : bold;
+ color : @color_bar_title_text;
+
+ margin : 0px;
+ padding-top : 10 * @unit_base;
+ padding-left : 16 * @unit_base;
+ }
}
.ui-popup-text {
margin-top: @popup-text-padding-vert;
margin-bottom: @popup-text-padding-vert;
color: @color_popup_text_font;
- font-size: @font_size_popup_info_style;
+ font-size: 20 * @unit_base;
background: @color_popup_text_bg;
text-align: center;
- }
- // ----------------------------------------------------- //
-
- .center_info {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- // .ui-popup-text
+ .ui-li .ui-radio, .ui-li .ui-checkbox {
+ label {
+ background : transparent;
+ }
}
-
- .center_title {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
}
- .center_basic_1btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
-
- .ui-popup-button-bg {
+ .ui-popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
+ height : 37 * @unit_base;
+ padding-top: 10 * @unit_base;
+ padding-bottom: 10 * @unit_base;
width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
vertical-align: middle;
- .ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
+ > .ui-btn {
+ display : inline-block;
margin:auto;
-
+ height : 37 * @unit_base;
}
- }
- }
- .center_basic_2btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
- .ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
-
- display: inline-block;
- }
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
}
}
- .center_basic_3btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 186*@unit_base;
- height: 74*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
- display: inline-block;
- }
- }
- }
- .center_title_1btn {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
- margin:auto;
-
- }
- }
- }
+/***** Normal Samples *****/
+ .center_info,
+ .center_title,
+ .center_basic_1btn,
+ .center_basic_2btn,
+ .center_title_1btn,
.center_title_2btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
-
- display: inline-block;
- }
- }
}
+ .center_basic_3btn,
.center_title_3btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 186*@unit_base;
- height: 74*@unit_base;
+ .ui-btn {
+ max-width: 80 * @unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
display: inline-block;
}
- }
}
- .center_button_vertical {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
+ .center_button_vertical {
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 1px;
- padding-bottom: 16*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 356*@unit_base;
- height: 74*@unit_base;
- margin-top: 16*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: auto;
- margin-right: auto;
+ display : block;
+ height : auto;
+ > .ui-btn {
+ display : block;
+ width: 200*@unit_base;
}
}
}
- .center_checkbox {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
+ .center_checkbox {
.ui-popup-check-bg {
- font-size: @font_size_popup_info_style;
+ font-size: 20 * @unit_base;
background: @color_popup_text_bg;
width: 100%;
padding-top: 0*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ width: 130*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
}
}
.center_liststyle_1btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
-
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
- .ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
- margin:auto;
-
- }
}
}
.center_liststyle_2btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
-
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 274*@unit_base;
- height: 74*@unit_base;
+ width: 130*@unit_base;
+ height: 37*@unit_base;
margin-top: 0*@unit_base;
margin-bottom: 0*@unit_base;
margin-left: 5*@unit_base;
margin-right: 5*@unit_base;
display: inline-block;
+
+ .ui-btn-inner {
+ padding-top: 5 * @unit_base;
+ padding-bottom: 5 * @unit_base;
+ padding-left : 20 * @unit_base;
+ padding-right : 20 * @unit_base;
+ }
}
}
}
- .center_liststyle_3btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
- text-align: center;
-
- // .ui-popup-title
+ .center_title_2btn {
+ .ui-popup-button-bg {
+ .ui-btn {
+ width: 130*@unit_base;
+ }
+ }
+ }
+ .center_liststyle_3btn {
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
.ui-btn {
- width: 186*@unit_base;
- height: 74*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
+ max-width: 80 * @unit_base;
+ height: 37 * @unit_base;
+ margin-top: 0 * @unit_base;
+ margin-bottom: 0 * @unit_base;
+ margin-left: 5 * @unit_base;
+ margin-right: 5 * @unit_base;
display: inline-block;
}
.center_progressbar {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
+ text-align: center;
.ui-popup-text {
font-size: @font_size_popup_center_progressbar_title;
vertical-align: middle;
.ui-btn {
- width: 402*@unit_base;
- height: 74*@unit_base;
+ width: 201*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
.centertext_progressbar {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
+ text-align: center;
.ui-popup-text {
font-size: @font_size_popup_center_progressbar_title;
.ui-btn {
width: 402*@unit_base;
- height: 74*@unit_base;
+ height: 37*@unit_base;
margin:auto;
}
height: 100%;
}
}
- .ui-btn{
- .LESSpopup_button_style;
- }
- .ui-btn.ui-btn-hover-s{
- .LESSpopup_button_hover_style;
- }
- .ui-btn.ui-btn-down-s{
- .LESSpopup_button_press_style;
- }
}
projects / platform / framework / web / web-ui-fw.git / blobdiff