Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Improved support for Opera (some properties only had vendor prefixes,…

… not global ones) + submit button styling + sandboxing of form input styles
  • Loading branch information...
commit a11ed24fbc3fcf12e94cb1cd8b93e1d7500ee097 1 parent 0df539c
Tait Brown taitems authored
Showing with 110 additions and 64 deletions.
  1. +40 −22 css/Aristo/jquery-ui-1.8.7.custom.css
  2. +70 −42 demo.html
62 css/Aristo/jquery-ui-1.8.7.custom.css
View
@@ -98,6 +98,7 @@
);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
+ box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #4F4F4F; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #9D9D9D; font-weight: normal; color: #313131; }
@@ -107,11 +108,11 @@
color: #1c4257; border: 1px solid #7096ab;
background: url(images/bg_fallback.png) 0 -50px repeat-x;
background: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(1, rgb(185,224,245)),
- color-stop(0, rgb(146,189,214))
+ linear,
+ left bottom,
+ left top,
+ color-stop(1, rgb(185,224,245)),
+ color-stop(0, rgb(146,189,214))
);
background: -moz-linear-gradient(
center top,
@@ -120,6 +121,7 @@
);
-webkit-box-shadow: none;
-moz-box-shadow: none;
+ box-shadow: none;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #313131; text-decoration: none; }
.ui-widget :active { outline: none; }
@@ -480,16 +482,18 @@ button.ui-button-icons-only { width: 3.7em; }
.ui-button.ui-state-hover {
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.ui-button.ui-state-focus {
outline: none;
color: #1c4257; border-color: #7096ab;
+ background: url(images/bg_fallback.png) 0 -50px repeat-x;
background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(1, rgb(185,224,245)),
- color-stop(0, rgb(146,189,214))
+ linear,
+ left bottom,
+ left top,
+ color-stop(1, rgb(185,224,245)),
+ color-stop(0, rgb(146,189,214))
);
background-image: -moz-linear-gradient(
center top,
@@ -498,6 +502,7 @@ button.ui-button-icons-only { width: 3.7em; }
);
-webkit-box-shadow: none;
-moz-box-shadow: none;
+ box-shadow: none;
}
/*button text element */
@@ -508,7 +513,19 @@ button.ui-button-icons-only { width: 3.7em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
-input.ui-button { padding: .4em 1em; }
+input[type="submit"] { font-size: 14px; font-weight: bold; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); padding: 0 1em !important; height: 33px; }
+/*remove submit button internal padding in Firefox*/
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+/* fix webkits handling of the box model */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ input[type="submit"] {
+ height: 31px;
+ }
+}
+
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
@@ -523,11 +540,11 @@ input.ui-button { padding: .4em 1em; }
.ui-buttonset .ui-button.ui-state-active { color: #1c4257; border-color: #7096ab; }
.ui-buttonset .ui-button.ui-state-active {
background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(1, rgb(185,224,245)),
- color-stop(0, rgb(146,189,214))
+ linear,
+ left bottom,
+ left top,
+ color-stop(1, rgb(185,224,245)),
+ color-stop(0, rgb(146,189,214))
);
background-image: -moz-linear-gradient(
center top,
@@ -536,6 +553,7 @@ input.ui-button { padding: .4em 1em; }
);
-webkit-box-shadow: none;
-moz-box-shadow: none;
+ box-shadow: none;
}
/* workarounds */
@@ -576,11 +594,11 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
* http://docs.jquery.com/UI/Slider#theming
*/
.ui-slider { position: relative; text-align: left; background: #d7d7d7; }
-.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; }
-.ui-slider .ui-slider-handle { background: url(images/slider_handles.png) 0px -23px no-repeat; position: absolute; z-index: 2; width: 23px; height: 23px; cursor: default; border: none; outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
+.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; }
+.ui-slider .ui-slider-handle { background: url(images/slider_handles.png) 0px -23px no-repeat; position: absolute; z-index: 2; width: 23px; height: 23px; cursor: default; border: none; outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.ui-slider .ui-state-hover, .ui-slider .ui-state-active { background-position: 0 0; }
.ui-slider .ui-slider-range { background: #a3cae0; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
-.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; }
+.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; }
.ui-slider-horizontal { height: 5px; }
@@ -710,7 +728,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; background: url(images/progress_bar.gif) 0 0 repeat-x; }
/* Extra Input Field Styling */
-textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
+.ui-form textarea, .ui-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
padding: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@@ -724,13 +742,13 @@ textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
-moz-transition: all 0.25 ease-in-out;
-o-transition: all 0.25s ease-in-out;
}
-textarea:hover, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover {
+.ui-form textarea:hover, .ui-form input:not([type="submit"]):not([type="button"])not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover {
border: 1px solid #bdbdbd;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.2);
}
-textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
+.ui-form textarea:focus, .ui-form input:not([type="submit"]):not([type="button"])not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
border: 1px solid #95bdd4;
-webkit-box-shadow: 0 2px 3px rgba(161,202,226,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: 0 2px 3px rgba(161,202,226,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
112 demo.html
View
@@ -4,8 +4,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/Aristo/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
@@ -17,7 +17,6 @@
// Accordion
$(".accordion").accordion({ header: "h3" });
- $(".accordion").last().accordion("option", "icons", false);
// Tabs
$('#tabs').tabs();
@@ -70,7 +69,7 @@
);
// Button
- $("#divButton, #linkButton").button();
+ $("#divButton, #linkButton, #submitButton").button();
// Icon Buttons
$("#leftIconButton").button({
@@ -121,16 +120,17 @@
ul#icons { margin: 0; padding: 0;}
ul#icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; }
ul#icons span.ui-icon { float: left; margin: 0 4px; }
- .columnbox { height: 170px; width: 48%; float:left; margin-right: 1%; }
+ .columnbox { width: 500px; }
#eq span { height: 120px; float: left; margin: 15px; }
#countries { width: 300px; }
</style>
</head>
- <body>
- <h1>"Aristo" for jQuery UI!</h1>
- <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">
- This page demonstrates all available components of the jQuery UI port of "Aristo". jQuery and jQuery UI are pulled from the Google CDN. More information can be found at the original <a href="http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme" target="_blank">blog post</a>.
- </p>
+ <body class="ui-form">
+
+ <h1>"Aristo" for jQuery UI!</h1>
+ <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">
+ This page demonstrates all available components of the jQuery UI port of "Aristo". jQuery and jQuery UI are pulled from the Google CDN. More information can be found at the original <a href="http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme" target="_blank">blog post</a>.
+ </p>
<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
@@ -142,7 +142,8 @@ <h2 class="demoHeaders">Autocomplete</h2>
<!-- Button -->
<h2 class="demoHeaders">UI Button</h2>
<div id="divButton">&lt;DIV&gt; Button</div>
- <a id="linkButton" href="#">&lt;A href="#"&gt; Button</a>
+ <a id="linkButton" href="#">&lt;A href="#"&gt; Button</a>
+ <input type="submit" id="submitButton" value="Submit Button" />
<!-- Icon Buttons -->
<h2 class="demoHeaders">Icon Buttons</h2>
@@ -195,38 +196,60 @@ <h2 class="demoHeaders">Highlight / Error</h2>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div class="columnbox">
+
<div class="accordion">
- <div>
- <h3><a href="#">First</a></h3>
- <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
- </div>
- <div>
- <h3><a href="#">Second</a></h3>
- <div>Phasellus mattis tincidunt nibh.</div>
- </div>
- <div>
- <h3><a href="#">Third</a></h3>
- <div>Nam dui erat, auctor a, dignissim quis.</div>
- </div>
- </div>
- </div>
- <div class="columnbox">
- <div class="accordion">
- <div>
- <h3><a href="#">First no icons</a></h3>
- <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
- </div>
- <div>
- <h3><a href="#">Second no icons</a></h3>
- <div>Phasellus mattis tincidunt nibh.</div>
- </div>
- <div>
- <h3><a href="#">Third no icons</a></h3>
- <div>Nam dui erat, auctor a, dignissim quis.</div>
- </div>
+
+ <h3><a href="#">Section 1</a></h3>
+ <div>
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ <h3><a href="#">Section 3</a></h3>
+ <div>
+ <p>
+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+ Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+ ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+ lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+ </p>
+ <ul>
+ <li>List item one</li>
+ <li>List item two</li>
+ <li>List item three</li>
+ </ul>
+ </div>
+ <h3><a href="#">Section 4</a></h3>
+ <div>
+ <p>
+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+ et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+ faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+ mauris vel est.
+ </p>
+ <p>
+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos.
+ </p>
+ </div>
+
</div>
+
</div>
-
+
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
@@ -495,7 +518,7 @@ <h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI
</div>
<h2 class="demoHeaders">Combination examples</h2>
- <div class="columnbox">
+ <div class="columnbox" style="height: 200px;">
<div id="tabs2">
<ul>
<li><a href="#tabs2-1">First</a></li>
@@ -510,7 +533,10 @@ <h2 class="demoHeaders">Combination examples</h2>
<div id="tabs2-3">Tab 3</div>
</div>
</div>
- <div class="columnbox">
+
+ <br />
+
+ <div class="columnbox" style="height: 200px;">
<div id="accordion2">
<div>
<h4><a href="#">First</a></h4>
@@ -550,6 +576,8 @@ <h2 class="demoHeaders">Common Input Fields</h2>
<input type="radio" /> <br />
<input type="checkbox" /> <br />
<input type="file" /> <br />
+ <input type="submit" /> <br />
+ <input type="button" value="Button" /> <br />
</p>
Please sign in to comment.
Something went wrong with that request. Please try again.