Permalink
Browse files

Theme: Improve default theme styling

Changes tooltip to use the ui-widget-shadow class, which now applies the
box-shadow style. .ui-widget-shadow was created when box-shadow wasn't
available. By now, there's no point in faking a custom shadow anymore.
This removes the only non-structural CSS from a widget-specific file.

Updates demos to use the same font-family, removes unused images.

Will be available as the new default theme on ThemeRoller called "Base",
while "UI Smoothness" and "UI Lightness" will still be available in the
gallery.

Fixes #10617
Fixes #10880
Closes gh-1436
Ref jquery/download.jqueryui.com#248
  • Loading branch information...
jaspermdegroot authored and jzaefferer committed Nov 7, 2014
1 parent 0aa4e98 commit 79c4fa1e7a09a3d28f0f8ff7a5b9f41a6d6e123d
View
@@ -1,5 +1,5 @@
body {
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
font-family: Arial, Helvetica, sans-serif;
}
table {
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -15,7 +15,7 @@
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
font-size: 1em/*{fsDefault}*/;
}
.ui-widget .ui-widget {
@@ -25,41 +25,41 @@
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-family: Arial,Helvetica,sans-serif/*{ffDefault}*/;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url("images/ui-bg_flat_75_ffffff_40x100.png")/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
border: 1px solid #dddddd/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ /*{bgImgUrlContent}*/ /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
color: #333333/*{fcContent}*/;
}
.ui-widget-content a {
color: #222222/*{fcContent}*/;
color: #333333/*{fcContent}*/;
}
.ui-widget-header {
border: 1px solid #aaaaaa/*{borderColorHeader}*/;
background: #cccccc/*{bgColorHeader}*/ url("images/ui-bg_highlight-soft_75_cccccc_1x100.png")/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
color: #222222/*{fcHeader}*/;
border: 1px solid #dddddd/*{borderColorHeader}*/;
background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
color: #333333/*{fcHeader}*/;
font-weight: bold;
}
.ui-widget-header a {
color: #222222/*{fcHeader}*/;
color: #333333/*{fcHeader}*/;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
border: 1px solid #c5c5c5/*{borderColorDefault}*/;
background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #555555/*{fcDefault}*/;
color: #454545/*{fcDefault}*/;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #555555/*{fcDefault}*/;
color: #454545/*{fcDefault}*/;
text-decoration: none;
}
.ui-state-hover,
@@ -68,10 +68,10 @@
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #999999/*{borderColorHover}*/;
background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
border: 1px solid #cccccc/*{borderColorHover}*/;
background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcHover}*/;
color: #2b2b2b/*{fcHover}*/;
}
.ui-state-hover a,
.ui-state-hover a:hover,
@@ -81,21 +81,21 @@
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #212121/*{fcHover}*/;
color: #2b2b2b/*{fcHover}*/;
text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #aaaaaa/*{borderColorActive}*/;
background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
border: 1px solid #003eff/*{borderColorActive}*/;
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcActive}*/;
color: #ffffff/*{fcActive}*/;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #212121/*{fcActive}*/;
color: #ffffff/*{fcActive}*/;
text-decoration: none;
}
@@ -104,31 +104,31 @@
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fcefa1/*{borderColorHighlight}*/;
background: #fbf9ee/*{bgColorHighlight}*/ url("images/ui-bg_glass_55_fbf9ee_1x400.png")/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/;
color: #363636/*{fcHighlight}*/;
border: 1px solid #dad55e/*{borderColorHighlight}*/;
background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
color: #777620/*{fcHighlight}*/;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #363636/*{fcHighlight}*/;
color: #777620/*{fcHighlight}*/;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a/*{borderColorError}*/;
background: #fef1ec/*{bgColorError}*/ url("images/ui-bg_glass_95_fef1ec_1x400.png")/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/;
color: #cd0a0a/*{fcError}*/;
border: 1px solid #f1a899/*{borderColorError}*/;
background: #fddfdf/*{bgColorError}*/ /*{bgImgUrlError}*/ /*{bgErrorXPos}*/ /*{bgErrorYPos}*/ /*{bgErrorRepeat}*/;
color: #5f3f3f/*{fcError}*/;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #cd0a0a/*{fcError}*/;
color: #5f3f3f/*{fcError}*/;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #cd0a0a/*{fcError}*/;
color: #5f3f3f/*{fcError}*/;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
@@ -163,27 +163,27 @@
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsContent}*/;
}
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/;
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
}
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/;
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/;
background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
}
.ui-state-active .ui-icon {
background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/;
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon {
background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/;
background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url("images/ui-icons_cd0a0a_256x240.png")/*{iconsError}*/;
background-image: url("images/ui-icons_cc0000_256x240.png")/*{iconsError}*/;
}
/* positioning */
@@ -373,38 +373,34 @@
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 3px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 3px/*{cornerRadius}*/;
}
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa/*{bgColorOverlay}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
background: #aaaaaa/*{bgColorOverlay}*/;
opacity: .3/*{opacityOverlay}*/;
filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/; /* support: IE8 */
}
.ui-widget-shadow {
margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
padding: 8px/*{thicknessShadow}*/;
background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
opacity: .3/*{opacityShadow}*/;
filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/; /* support: IE8 */
border-radius: 8px/*{cornerRadiusShadow}*/;
-webkit-box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
box-shadow: 0/*{offsetLeftShadow}*/ 0/*{offsetTopShadow}*/ 5px/*{thicknessShadow}*/ #666666/*{bgColorShadow}*/;
}
View
@@ -13,8 +13,6 @@
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
View
@@ -406,7 +406,8 @@ return $.widget( "ui.tooltip", {
_tooltip: function( element ) {
var tooltip = $( "<div>" )
.attr( "role", "tooltip" )
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
// TODO move to classes option
.addClass( "ui-tooltip ui-widget ui-widget-shadow ui-corner-all ui-widget-content " +
( this.options.tooltipClass || "" ) ),
id = tooltip.uniqueId().attr( "id" );

0 comments on commit 79c4fa1

Please sign in to comment.