Permalink
Browse files

Tracked update bb files and removed old ones, also applied changes in…

… .selected states for using aria-checked in select elements triggers
  • Loading branch information...
basiclines
basiclines committed Sep 14, 2012
1 parent c15ba5e commit c9c202d550c8c7fdcd80d0e0317c7603bd0e8fa4
@@ -120,14 +120,16 @@ var ValueSelector = {
return;
if (this._currentPickerType === 'select-one') {
- var selectee = this._containers['select'].querySelectorAll('.selected');
+ var selectee = this._containers['select'].querySelectorAll('[aria-checked="true"]');
for (var i = 0; i < selectee.length; i++) {
- selectee[i].classList.remove('selected');
+ selectee[i].removeAttribute('aria-checked');
}
- target.classList.add('selected');
+ target.setAttribute('aria-checked', 'true');
+ } else if ( target.getAttribute('aria-checked') === 'true' ) {
+ target.removeAttribute('aria-checked');
} else {
- target.classList.toggle('selected');
+ target.setAttribute('aria-checked', 'true');
}
},
@@ -161,6 +163,10 @@ var ValueSelector = {
var selectee = this._containers['select'].querySelectorAll('.selected');
+ if (this._currentPickerType === 'select-one' || this._currentPickerType === 'select-multiple') {
+ var selectee = this._containers['select'].querySelectorAll('[aria-checked="true"]');
+ }
+
if (this._currentPickerType === 'select-one') {
if (selectee.length > 0)
@@ -214,7 +220,7 @@ var ValueSelector = {
for (var i = 0, n = options.length; i < n; i++) {
- var checked = options[i].selected ? ' class="selected"' : '';
+ var checked = options[i].selected ? ' aria-checked="true"' : '';
optionHTML += '<li data-option-index="' + options[i].optionIndex + '"' +
checked + '>' +
@@ -1,79 +0,0 @@
-/* ----------------------------------
- * CORE STYLES FOR DIALOGS AND MENUS
- * Is required for all the subcomponents (except banner)
- * ---------------------------------- */
-
-body[role="application"] [role="dialog"] {
- background: url(images/ui/pattern.png) repeat left top, url(images/ui/gradient.png) no-repeat left top;
- background-size: auto auto, 100% 100%;
- overflow: hidden;
- position: absolute;
- z-index: 100;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- white-space: nowrap;
- padding: 1.5rem 0 7rem;
- font-family: "Open Sans", Sans-serif;
- color: #fff;
-}
-
-body[role="application"] [role="dialog"]:before {
- content: "";
- display: inline-block;
- vertical-align: middle;
- width: 1px;
- height: 100%;
-}
-
-body[role="application"] [role="dialog"] > div {
- padding: 0 2.5rem 0 2rem;
- -moz-box-sizing: padding-box;
- width: 100%;
- display: inline-block;
- vertical-align: middle;
- white-space: normal;
-}
-
-body[role="application"] [role="dialog"] h3 {
- font-family: 'Open Sans', Sans-serif;
- font-weight: normal;
- font-size: 1.6rem;
- line-height: 1em;
- color: #fff;
- border-bottom: 0.1rem solid #686868;
- margin: 0 0 1rem;
- padding-bottom: 1rem;
-}
-
-body[role="application"] menu:not([type="toolbar"]) {
- white-space: nowrap;
- margin: 0;
- padding: 1.5rem;
- border-top: solid 1px rgba(255, 255, 255, 0.1);
- background: #2d2d2d url(images/ui/pattern.png) repeat left top;
- display: block;
- overflow: hidden;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-body[role="application"] menu:not([type="toolbar"]) button:last-child,
-body[role="application"] menu:not([type="toolbar"]) a[role="button"]:last-child {
- margin-left: 1rem;
-}
-
-body[role="application"] menu:not([type="toolbar"]) button,
-body[role="application"] menu:not([type="toolbar"]) a[role="button"],
-body[role="application"] menu:not([type="toolbar"]) button:first-child,
-body[role="application"] menu:not([type="toolbar"]) a[role="button"]:first-child {
- margin: 0;
-}
-
-body[role="application"] menu:not([type="toolbar"])[data-items="2"] button,
-body[role="application"] menu:not([type="toolbar"])[data-items="2"] a[role="button"] {
- width: -moz-calc((100% - 1rem) / 2);
-}
Binary file not shown.
Binary file not shown.
@@ -1,79 +0,0 @@
-/* ----------------------------------
- * STYLES FOR VALUESELECTOR
- * Requires:
- menu-dialoges/core.css
- other/buttons/style.css
- * ---------------------------------- */
-
-body[role="application"] [role="dialog"] [role="listbox"] {
- position: relative;
- padding: 0 4rem;
- margin: -1rem -4rem 0;
- max-height: 37rem;
- /* Max height 100% doesnt work because the parent element has height auto for getting work the vertical alignment */
- overflow: auto;
-}
-
-body[role="application"] [role="dialog"] [data-mode="scroll"] [role="listbox"] {
- background: url(images/ui/shadow.png) repeat-x left top, url(images/ui/shadow-invert.png) repeat-x left bottom;
- padding: 0 2.8rem 0 4rem;
- /* 4rem - 1.2rem = 2.8rem (1.2rem scrollbar width) */
-}
-
-body[role="application"] [role="dialog"] [data-mode="scroll"] h3 {
- margin-left: -2.5rem;
- margin-right: -2.5rem;
- text-indent: 2.5rem
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li {
- margin: 0;
- padding-bottom: 1px;
- list-style: none;
- border-bottom: 1px solid #666;
- position: relative;
- color: #fff;
- font-family: 'Open Sans', Sans-serif;
- font-weight: lighter;
- font-size: 2.2rem;
- height: 5.9rem;
- line-height: 5.9rem;
- color: #fff;
- transition: background 0.2s ease;
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li:active,
-body[role="application"] [role="dialog"] [role="listbox"] li:active label span {
- background: #00ABCC;
- color: #fff!important;
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li input {
- position: absolute;
- left: 0;
- top: 0;
- opacity: 0;
- pointer-events: none;
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li input:checked + span,
-body[role="application"] [role="dialog"] [role="listbox"] li[aria-checked="true"] span {
- padding-right: 0.5rem;
- color: #00abcd;
- background: url(images/icons/checked.png) content-box right center no-repeat;
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li a,
-body[role="application"] [role="dialog"] [role="listbox"] li label {
- border-bottom: 1px solid #000;
- text-indent: 0.5rem;
- outline: none;
-}
-
-body[role="application"] [role="dialog"] [role="listbox"] li a,
-body[role="application"] [role="dialog"] [role="listbox"] li label,
-body[role="application"] [role="dialog"] [role="listbox"] li label span {
- text-decoration: none;
- display: block;
- color: #fff;
-}
Oops, something went wrong.

0 comments on commit c9c202d

Please sign in to comment.