[V1 0/3] Customize jquery-ui
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Customize UI style of jquery widgets in use by kimchi. Yu Xin Huo (3): Customize jquery-ui button Customize jquery-ui menu Customize jquery-ui dialog ui/css/theme-default/jquery-ui.custom.css | 197 +++++++++++++++++++++++++++++ 1 files changed, 197 insertions(+), 0 deletions(-) create mode 100644 ui/css/theme-default/jquery-ui.custom.css
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> jquery-ui only have one type of button which is used for a generic purpose, reserve its default button. kimchi has 2 types of buttons, form button and list bubtton. althrough both are action buttons but different styles. in this patch, customize jquery-ui button for these 2 styles. Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 82 +++++++++++++++++++++++++++++ 1 files changed, 82 insertions(+), 0 deletions(-) create mode 100644 ui/css/theme-default/jquery-ui.custom.css diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css new file mode 100644 index 0000000..274bc86 --- /dev/null +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -0,0 +1,82 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Authors: + * Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.ui-button-primary { + border-radius: 8px 8px 8px 8px; +} + +.ui-button-primary.ui-state-default { + background: none repeat scroll 0 0 #0066FF; + border: 0 none; +} + +.ui-button-primary.ui-state-disabled { + background-color: silver; + opacity: 1; +} + +.ui-button-primary.ui-state-hover { + background: #0044DD; +} + +.ui-button-primary .ui-button-text { + padding: 10px 23px; + font-size: 13px; + color: #EEEEEE; +} + +.ui-button-secondary { + border: 1px solid #AAAAAA; + border-radius: 5px 5px 5px 5px; + cursor: pointer; +} + +.ui-button-secondary.ui-state-default { + background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; + box-shadow: -2px -2px 2px #EAEAEA, 2px 2px 2px #FFFFFF, 3px 3px 3px white inset, -3px -3px 3px rgba(0, 0, 0, 0.25) inset; +} + +.ui-button-secondary.ui-state-hover { + background: linear-gradient(to bottom, #d5d5d5 0%, #eeeeee 100%); + box-shadow: -2px -2px 2px #dadada, 2px 2px 2px #fff, 3px 3px 3px white inset, -3px -3px 3px rgba(0, 0, 0, .25) inset; +} + +.ui-button-secondary .ui-button-text { + font-size: 13px; + color: #333333; + text-overflow: ellipsis; + text-shadow: -1px -1px 1px #AAAAAA, 1px 1px 1px #FFFFFF; + white-space: nowrap; +} + +.ui-button-secondary.ui-button-text-only .ui-button-text { + padding: 12px 23px 13px 20px; +} + +.ui-button-secondary.ui-button-text-icon-secondary .ui-button-text { + padding: 12px 35px 13px 13px; +} + +.ui-button-secondary .ui-button-icon-secondary { + padding-right: 5px; + width: 15px; + height: 15px; +} -- 1.7.1
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 01/02/2014 04:49 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
jquery-ui only have one type of button which is used for a generic purpose, reserve its default button.
kimchi has 2 types of buttons, form button and list bubtton. althrough both are action buttons but different styles.
in this patch, customize jquery-ui button for these 2 styles.
Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 82 +++++++++++++++++++++++++++++ 1 files changed, 82 insertions(+), 0 deletions(-) create mode 100644 ui/css/theme-default/jquery-ui.custom.css
diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css new file mode 100644 index 0000000..274bc86 --- /dev/null +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -0,0 +1,82 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Authors: + * Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.ui-button-primary { + border-radius: 8px 8px 8px 8px; +} + +.ui-button-primary.ui-state-default { + background: none repeat scroll 0 0 #0066FF; + border: 0 none; +} + +.ui-button-primary.ui-state-disabled { + background-color: silver; + opacity: 1; +} + +.ui-button-primary.ui-state-hover { + background: #0044DD; +} + +.ui-button-primary .ui-button-text { + padding: 10px 23px; + font-size: 13px; + color: #EEEEEE; +} + +.ui-button-secondary { + border: 1px solid #AAAAAA; + border-radius: 5px 5px 5px 5px; + cursor: pointer; +} + +.ui-button-secondary.ui-state-default { + background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; + box-shadow: -2px -2px 2px #EAEAEA, 2px 2px 2px #FFFFFF, 3px 3px 3px white inset, -3px -3px 3px rgba(0, 0, 0, 0.25) inset; +} + +.ui-button-secondary.ui-state-hover { + background: linear-gradient(to bottom, #d5d5d5 0%, #eeeeee 100%); + box-shadow: -2px -2px 2px #dadada, 2px 2px 2px #fff, 3px 3px 3px white inset, -3px -3px 3px rgba(0, 0, 0, .25) inset; +} + +.ui-button-secondary .ui-button-text { + font-size: 13px; + color: #333333; + text-overflow: ellipsis; + text-shadow: -1px -1px 1px #AAAAAA, 1px 1px 1px #FFFFFF; + white-space: nowrap; +} + +.ui-button-secondary.ui-button-text-only .ui-button-text { + padding: 12px 23px 13px 20px; +} + +.ui-button-secondary.ui-button-text-icon-secondary .ui-button-text { + padding: 12px 35px 13px 13px; +} + +.ui-button-secondary .ui-button-icon-secondary { + padding-right: 5px; + width: 15px; + height: 15px; +}
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> Customize jquery-ui menu to match kimchi menu style Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 45 +++++++++++++++++++++++++++++ 1 files changed, 45 insertions(+), 0 deletions(-) diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css index 274bc86..217ff48 100644 --- a/ui/css/theme-default/jquery-ui.custom.css +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -80,3 +80,48 @@ width: 15px; height: 15px; } + +.ui-menu { + background: linear-gradient(to bottom, #EEEEEE 0%, #CCCCCC 10px, #CCCCCC 96%, #A5A5A5 100%) repeat scroll 0 0 transparent; + padding: 10px 10px 0; + width: 250px; +} + +.ui-menu .ui-menu-item a { + background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; + border: 1px solid #CCCCCC; + border-radius: 5px 5px 5px 5px; + box-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #EEEEEE; + display: block; + font-size: 13px; + line-height: 38px; + margin-bottom: 10px; + text-align: center; + text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF; + width: 96%; +} + +.ui-menu .ui-menu-item a.ui-state-focus { + background: linear-gradient(to bottom, #EEEEEE 0%, #D5D5D5 100%) repeat scroll 0 0 transparent; + box-shadow: -1px -1px 1px #BBBBBB, 1px 1px 1px #DDDDDD; + margin: 0px 0px 10px 0px; +} + +.ui-menu .ui-menu-item a.red:not([disabled]) { + background: linear-gradient(to bottom, #FF3019 0%, #CF0404 100%) repeat scroll 0 0 transparent; + border: 1px solid #B10F14; + color: #FFFFFF; + text-shadow: -1px -1px 1px #9E0505, 1px 1px 1px #FC5D4C; +} + +.ui-menu .ui-menu-item a.red:hover:not([disabled]) { + background: linear-gradient(to bottom, #EF2009 0%, #BF0404 100%) repeat scroll 0 0 transparent; +} + +.ui-menu .ui-state-disabled { + opacity: 1; +} + +.ui-menu .ui-state-disabled a { + color: gray; +} -- 1.7.1
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 01/02/2014 04:49 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
Customize jquery-ui menu to match kimchi menu style
Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 45 +++++++++++++++++++++++++++++ 1 files changed, 45 insertions(+), 0 deletions(-)
diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css index 274bc86..217ff48 100644 --- a/ui/css/theme-default/jquery-ui.custom.css +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -80,3 +80,48 @@ width: 15px; height: 15px; } + +.ui-menu { + background: linear-gradient(to bottom, #EEEEEE 0%, #CCCCCC 10px, #CCCCCC 96%, #A5A5A5 100%) repeat scroll 0 0 transparent; + padding: 10px 10px 0; + width: 250px; +} + +.ui-menu .ui-menu-item a { + background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; + border: 1px solid #CCCCCC; + border-radius: 5px 5px 5px 5px; + box-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #EEEEEE; + display: block; + font-size: 13px; + line-height: 38px; + margin-bottom: 10px; + text-align: center; + text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF; + width: 96%; +} + +.ui-menu .ui-menu-item a.ui-state-focus { + background: linear-gradient(to bottom, #EEEEEE 0%, #D5D5D5 100%) repeat scroll 0 0 transparent; + box-shadow: -1px -1px 1px #BBBBBB, 1px 1px 1px #DDDDDD; + margin: 0px 0px 10px 0px; +} + +.ui-menu .ui-menu-item a.red:not([disabled]) { + background: linear-gradient(to bottom, #FF3019 0%, #CF0404 100%) repeat scroll 0 0 transparent; + border: 1px solid #B10F14; + color: #FFFFFF; + text-shadow: -1px -1px 1px #9E0505, 1px 1px 1px #FC5D4C; +} + +.ui-menu .ui-menu-item a.red:hover:not([disabled]) { + background: linear-gradient(to bottom, #EF2009 0%, #BF0404 100%) repeat scroll 0 0 transparent; +} + +.ui-menu .ui-state-disabled { + opacity: 1; +} + +.ui-menu .ui-state-disabled a { + color: gray; +}
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> customize jquery-ui dialog to match kimchi style Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 70 +++++++++++++++++++++++++++++ 1 files changed, 70 insertions(+), 0 deletions(-) diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css index 217ff48..ce5a02a 100644 --- a/ui/css/theme-default/jquery-ui.custom.css +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -125,3 +125,73 @@ .ui-menu .ui-state-disabled a { color: gray; } + +.ui-widget-overlay { + background: url("../images/theme-default/bg-mask.png") repeat scroll 0 0 transparent; + opacity: 1; +} + +.ui-dialog { + background: none; + background-color: #EEEEEE; + border: 2px solid #0F71B4; + border-radius: 8px; + padding: 0px; +} + +.ui-dialog .ui-dialog-titlebar { + border: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + background: none; + padding: 13px 0px 13px 10px; + box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 -1px 0 rgba(0,0,0,0.05) inset; +} + +.ui-dialog .ui-dialog-title { + font-size: 18px; + color: #0066CC; +} + +.ui-dialog .ui-dialog-titlebar-close { + margin: 4px 0 0; + background: none repeat scroll 0 0 #EEEEEE; + border: 2px solid #CCCCCC; + border-radius: 35px 35px 35px 35px; + color: #CCCCCC; + cursor: pointer; + height: 35px; + width: 35px; + position: absolute; + right: 7px; + text-align: center; + top: 5px; +} + +.ui-dialog .ui-dialog-titlebar .ui-state-hover { + border: 2px solid #444444; + color: #444444; +} + +.ui-dialog .ui-dialog-titlebar .ui-button-text { + font-size: 24px; + font-weight: bold; + padding: 0px; + text-indent: 0px; +} + +.ui-dialog .ui-dialog-titlebar .ui-button-icon-primary { + display: none; +} + +.ui-dialog .ui-dialog-buttonpane { + padding: 0px; + background-color: transparent; + border-width: 0; + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15); +} + +.ui-dialog .ui-dialog-buttonpane button { + cursor: pointer; + margin: 0.5em 13px 0.5em 0; +} -- 1.7.1
Reviewed-by: Aline Manera <alinefm@linux.vnet.ibm.com> On 01/02/2014 04:49 AM, huoyuxin@linux.vnet.ibm.com wrote:
From: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com>
customize jquery-ui dialog to match kimchi style
Signed-off-by: Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> --- ui/css/theme-default/jquery-ui.custom.css | 70 +++++++++++++++++++++++++++++ 1 files changed, 70 insertions(+), 0 deletions(-)
diff --git a/ui/css/theme-default/jquery-ui.custom.css b/ui/css/theme-default/jquery-ui.custom.css index 217ff48..ce5a02a 100644 --- a/ui/css/theme-default/jquery-ui.custom.css +++ b/ui/css/theme-default/jquery-ui.custom.css @@ -125,3 +125,73 @@ .ui-menu .ui-state-disabled a { color: gray; } + +.ui-widget-overlay { + background: url("../images/theme-default/bg-mask.png") repeat scroll 0 0 transparent; + opacity: 1; +} + +.ui-dialog { + background: none; + background-color: #EEEEEE; + border: 2px solid #0F71B4; + border-radius: 8px; + padding: 0px; +} + +.ui-dialog .ui-dialog-titlebar { + border: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + background: none; + padding: 13px 0px 13px 10px; + box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 -1px 0 rgba(0,0,0,0.05) inset; +} + +.ui-dialog .ui-dialog-title { + font-size: 18px; + color: #0066CC; +} + +.ui-dialog .ui-dialog-titlebar-close { + margin: 4px 0 0; + background: none repeat scroll 0 0 #EEEEEE; + border: 2px solid #CCCCCC; + border-radius: 35px 35px 35px 35px; + color: #CCCCCC; + cursor: pointer; + height: 35px; + width: 35px; + position: absolute; + right: 7px; + text-align: center; + top: 5px; +} + +.ui-dialog .ui-dialog-titlebar .ui-state-hover { + border: 2px solid #444444; + color: #444444; +} + +.ui-dialog .ui-dialog-titlebar .ui-button-text { + font-size: 24px; + font-weight: bold; + padding: 0px; + text-indent: 0px; +} + +.ui-dialog .ui-dialog-titlebar .ui-button-icon-primary { + display: none; +} + +.ui-dialog .ui-dialog-buttonpane { + padding: 0px; + background-color: transparent; + border-width: 0; + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15); +} + +.ui-dialog .ui-dialog-buttonpane button { + cursor: pointer; + margin: 0.5em 13px 0.5em 0; +}
participants (2)
-
Aline Manera -
huoyuxin＠linux.vnet.ibm.com