templates/jqtouch/jqtouch/jqt.apple.scss in compass-jquery-plugin-0.3.0.beta.1 vs templates/jqtouch/jqtouch/jqt.apple.scss in compass-jquery-plugin-0.3.0.beta.2

- old
+ new

@@ -1,584 +1,584 @@ -// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake - -body, #jqt { - background: rgb(0, 0, 0); } - -body > * { - background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } - -#jqt { - > * { - background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } - h1, h2 { - font: bold 18px "Helvetica Neue", Helvetica; - text-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px; - color: rgb(76, 86, 108); - margin: 10px 20px 6px; } - .toolbar { - -webkit-box-sizing: border-box; - border-bottom: 1px solid #2d3642; - padding: 10px; - height: 45px; - background: image_url("jqtouch/apple/toolbar.png") #6d84a2 repeat-x; - position: relative; } - .black-translucent .toolbar { - margin-top: 20px; } } - -/* @group Toolbar */ - -div#jqt { - .toolbar > h1 { - position: absolute; - overflow: hidden; - left: 50%; - top: 10px; - line-height: 1em; - margin: 1px 0 0 -75px; - height: 40px; - font-size: 20px; - width: 150px; - font-weight: bold; - text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - color: white; } - &.landscape .toolbar > h1 { - margin-left: -125px; - width: 250px; } } - -#jqt { - .button, .back, .cancel, .add { - position: absolute; - overflow: hidden; - top: 8px; - right: 6px; - margin: 0; - border-width: 0 5px; - padding: 0 3px; - width: auto; - height: 30px; - line-height: 30px; - font-family: inherit; - font-size: 12px; - font-weight: bold; - color: white; - text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0; - text-overflow: ellipsis; - text-decoration: none; - white-space: nowrap; - background: none; - -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } - .button.active, .cancel.active, .add.active { - -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } - .blueButton { - -webkit-border-image: image_url("jqtouch/apple/actionButton.png") 0 5 0 5; - border-width: 0 5px; } - .back { - left: 6px; - right: auto; - padding: 0; - max-width: 55px; - border-width: 0 8px 0 14px; - -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; - &.active { - -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; } } - .leftButton, .cancel { - left: 6px; - right: auto; } - .add { - font-size: 24px; - line-height: 24px; - font-weight: bold; } - .whiteButton, .grayButton, .redButton, .blueButton, .greenButton { - display: block; - border-width: 0 12px; - padding: 10px; - text-align: center; - font-size: 20px; - font-weight: bold; - text-decoration: inherit; - color: inherit; } - .whiteButton.active, .grayButton.active, .redButton.active, .blueButton.active, .greenButton.active, .whiteButton:active, .grayButton:active, .redButton:active, .blueButton:active, .greenButton:active { - -webkit-border-image: image_url("jqtouch/apple/activeButton.png") 0 12 0 12; } - .whiteButton { - -webkit-border-image: image_url("jqtouch/apple/whiteButton.png") 0 12 0 12; - text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; } - .grayButton { - -webkit-border-image: image_url("jqtouch/apple/grayButton.png") 0 12 0 12; - color: white; } - .redButton { - -webkit-border-image: image_url("jqtouch/apple/redButton.png") 0 12 0 12; - color: white; } - .greenButton { - -webkit-border-image: image_url("jqtouch/apple/greenButton.png") 0 12 0 12; - color: white; } - h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul { - margin-top: 0; } - ul { - color: black; - background: white; - border: 1px solid #b4b4b4; - font: bold 17px "Helvetica Neue", Helvetica; - padding: 0; - margin: 15px 10px 17px 10px; - -webkit-border-radius: 8px; - li { - color: #666666; - border-top: 1px solid #b4b4b4; - list-style-type: none; - padding: 10px 10px 10px 10px; } } - li { - &:first-child { - border-top: 0; - -webkit-border-top-left-radius: 8px; - -webkit-border-top-right-radius: 8px; - a { - border-top: 0; - -webkit-border-top-left-radius: 8px; - -webkit-border-top-right-radius: 8px; } } - &:last-child { - -webkit-border-bottom-left-radius: 8px; - -webkit-border-bottom-right-radius: 8px; - a { - -webkit-border-bottom-left-radius: 8px; - -webkit-border-bottom-right-radius: 8px; } } } - ul li.arrow { - background-image: image_url("jqtouch/apple/chevron.png"); - background-position: right center; - background-repeat: no-repeat; - a { - padding: 12px 22px 12px 10px; } } - #plastic ul li.arrow, #metal ul li.arrow { - background-image: url("../images/chevron_dg.png"); - background-position: right center; - background-repeat: no-repeat; } - ul li a, li.img a + a { - color: black; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - padding: 12px 10px 12px 10px; - margin: -10px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - ul { - li { - a { - &.active { - background: #194fdb image_url("jqtouch/apple/selection.png") 0 0 repeat-x; - color: white; } - &.button { - background-color: #194fdb; - color: white; } } - &.img a + { - a { - margin: -10px 10px -20px -5px; - font-size: 17px; - font-weight: bold; - + a { - font-size: 14px; - font-weight: normal; - margin-left: -10px; - margin-bottom: -10px; - margin-top: 0; } } - small + a { - margin-left: -5px; - + a { - margin-left: -10px; - margin-top: -20px; - margin-bottom: -10px; - font-size: 14px; - font-weight: normal; - + a { - margin-left: 0px !important; - margin-bottom: 0; } } } } - a + a { - color: black; - font: 14px "Helvetica Neue", Helvetica; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - margin: 0; - padding: 0; - + a { - color: #666666; - font: 13px "Helvetica Neue", Helvetica; - margin: 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - padding: 0; } } - &.img a + { - a + a + a, small + a + a + a { - color: #666666; - font: 13px "Helvetica Neue", Helvetica; - margin: 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - padding: 0; } } } - &.form li { - padding: 7px 10px; - &.error { - border: 2px solid red; - + li.error { - border-top: 0; } } - &:hover { - background: white; } } - li { - input { - &[type="text"], &[type="password"], &[type="tel"], &[type="number"], &[type="search"], &[type="email"], &[type="url"] { - color: #777777; - background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - border: 0; - font: normal 17px "Helvetica Neue", Helvetica; - padding: 0; - display: inline-block; - margin-left: 0px; - width: 100%; - -webkit-appearance: textarea; } } - textarea, select { - color: #777777; - background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); - border: 0; - font: normal 17px "Helvetica Neue", Helvetica; - padding: 0; - display: inline-block; - margin-left: 0px; - width: 100%; - -webkit-appearance: textarea; } - textarea { - height: 120px; - padding: 0; - text-indent: -2px; } - select { - text-indent: 0px; - background: transparent image_url("jqtouch/apple/chevron.png") no-repeat 103% 3px; - -webkit-appearance: textfield; - margin-left: -6px; - width: 104%; } - input { - &[type="checkbox"], &[type="radio"] { - margin: 0; - color: rgb(50, 79, 133); - padding: 10px 10px; } - &[type="checkbox"]:after, &[type="radio"]:after { - content: attr(title); - font: 17px "Helvetica Neue", Helvetica; - display: block; - width: 246px; - margin: -12px 0 0 17px; } } } - &.edgetoedge { - -webkit-border-radius: 0; - li.sep { - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(139, 159, 171, 1)), to(rgba(181, 193, 201, 1))); - border-bottom: 1px solid #b5c1c9; - border-top: 1px solid #b5c1c9; - color: white; - font-size: 16px; - margin: 1px 0 0 0; - padding: 2px 10px; - text-shadow: #636a6f 0 1px 0; } } } - .edgetoedge { - h4 { - color: white; - background: rgb(154, 159, 170) image_url("jqtouch/apple/listGroup.png") top left repeat-x; - border-top: 1px solid rgb(165, 177, 186); - text-shadow: #666666 0 1px 0; - margin: 0; - padding: 2px 10px; } - margin: 0; - padding: 0; - background-color: rgb(255, 255, 255); } - .metal { - margin: 0; - padding: 0; - background-color: rgb(255, 255, 255); } - .edgetoedge ul, .metal ul, .plastic ul { - -webkit-border-radius: 0; - margin: 0; - border-left: 0; - border-right: 0; - border-top: 0; } - .metal ul { - border-top: 0; - border-bottom: 0; - background: rgb(180, 180, 180); } - .edgetoedge ul li { - &:first-child, &:last-child { - -webkit-border-radius: 0; - a { - -webkit-border-radius: 0; } } } - .metal ul li { - &:first-child a, &:last-child a { - -webkit-border-radius: 0; } } - .edgetoedge { - ul li small { - font-size: 16px; - line-height: 28px; } - li { - -webkit-border-radius: 0; } } - .metal li { - -webkit-border-radius: 0; } - .edgetoedge { - li em { - font-weight: normal; - font-style: normal; } - h4 + ul { - border-top: 1px solid rgb(152, 158, 164); - border-bottom: 1px solid rgb(113, 125, 133); } } - ul li { - small { - color: #336699; - font: 17px "Helvetica Neue", Helvetica; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - width: 23%; - float: right; - padding: 3px 0px; } - &.arrow small { - padding: 0 15px; } - small.counter { - font-size: 17px !important; - line-height: 13px !important; - font-weight: bold; - background: rgb(154, 159, 170); - color: white; - -webkit-border-radius: 11px; - padding: 4px 10px 5px 10px; - display: inline !important; - width: auto; - margin-top: -22px; } - &.arrow small.counter { - margin-right: 15px; } } - #plastic ul li.arrow, #metal ul li.arrow { - background-image: image_url("jqtouch/apple/listArrowSel.png"); - background-position: right center; - background-repeat: no-repeat; } - .edgetoedge ul, .metal ul, .plastic ul { - -webkit-border-radius: 0; - margin: 0; - border-left: 0; - border-right: 0; - border-top: 0; } - .metal ul li { - border-top: 1px solid rgb(238, 238, 238); - border-bottom: 1px solid rgb(156, 158, 165); - background: url("../images/bgMetal.png") top left repeat-x; - font-size: 26px; - text-shadow: white 0 1px 0; - a { - line-height: 26px; - margin: 0; - padding: 13px 0; - &:hover { - color: rgb(0, 0, 0); } } - &:hover small { - color: inherit; } - a em { - display: block; - font-size: 14px; - font-style: normal; - color: #444444; - width: 50%; - line-height: 14px; } - small { - float: right; - position: relative; - margin-top: 10px; - font-weight: bold; } - &.arrow { - a small { - padding-right: 0; - line-height: 17px; } - background: image_url("jqtouch/apple/bgMetal.png") top left repeat-x, url("../images/chevron_dg.png") right center no-repeat; } } - .plastic { - margin: 0; - padding: 0; - background: rgb(173, 173, 173); - ul { - -webkit-border-radius: 0; - margin: 0; - border-left: 0; - border-right: 0; - border-top: 0; - background-color: rgb(173, 173, 173); - li { - -webkit-border-radius: 0; - border-top: 1px solid rgb(191, 191, 191); - border-bottom: 1px solid rgb(157, 157, 157); - &:nth-child(odd) { - background-color: rgb(152, 152, 152); - border-top: 1px solid rgb(181, 181, 181); - border-bottom: 1px solid rgb(138, 138, 138); } } - + p { - font-size: 11px; - color: #2f3237; - text-shadow: none; - padding: 10px 10px; - strong { - font-size: 14px; - line-height: 18px; - text-shadow: white 0 1px 0; } } - li { - a { - text-shadow: rgb(211, 211, 211) 0 1px 0; } - &:nth-child(odd) a { - text-shadow: rgb(191, 191, 191) 0 1px 0; } - small { - color: #3c3c3c; - text-shadow: rgb(211, 211, 211) 0 1px 0; - font-size: 13px; - font-weight: bold; - text-transform: uppercase; - line-height: 24px; } } } } - #plastic ul { - &.minibanner { - margin: 10px; - border: 0; - height: 81px; - clear: both; } - &.bigbanner { - margin: 10px; - border: 0; - height: 81px; - clear: both; - height: 140px !important; } - &.minibanner li { - border: 1px solid rgb(138, 138, 138); - background-color: rgb(152, 152, 152); - width: 145px; - height: 81px; - float: left; - -webkit-border-radius: 5px; - padding: 0; } - &.bigbanner li { - border: 1px solid rgb(138, 138, 138); - background-color: rgb(152, 152, 152); - width: 296px; - height: 140px; - float: left; - -webkit-border-radius: 5px; - padding: 0; - margin-bottom: 4px; } - &.minibanner li { - &:first-child { - margin-right: 6px; } - a { - color: transparent; - text-shadow: none; - display: block; - width: 145px; - height: 81px; } } - &.bigbanner li a { - color: transparent; - text-shadow: none; - display: block; - width: 296px; - height: 145px; } } - ul.individual { - border: 0; - background: none; - clear: both; - overflow: hidden; - li { - color: rgb(183, 190, 205); - background: white; - border: 1px solid rgb(180, 180, 180); - font-size: 14px; - text-align: center; - -webkit-border-radius: 8px; - -webkit-box-sizing: border-box; - width: 48%; - float: left; - display: block; - padding: 11px 10px 14px 10px; - + li { - float: right; } - a { - color: rgb(50, 79, 133); - line-height: 16px; - margin: -11px -10px -14px -10px; - padding: 11px 10px 14px 10px; - -webkit-border-radius: 8px; - &:hover { - color: white; - background: #3366cc; } } } } - .toggle { - width: 94px; - position: relative; - height: 27px; - display: block; - overflow: hidden; - float: right; - input[type="checkbox"] { - &:checked { - left: 0px; } - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - margin: 0; - -webkit-border-radius: 5px; - background: white image_url("jqtouch/apple/on_off.png") 0 0 no-repeat; - height: 27px; - overflow: hidden; - width: 149px; - border: 0; - -webkit-appearance: textarea; - background-color: transparent; - -webkit-transition: left 0.15s; - position: absolute; - top: 0; - left: -55px; } } - .info { - background: #dce1eb; - font-size: 12px; - line-height: 16px; - text-align: center; - text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; - color: rgb(76, 86, 108); - padding: 15px; - border-top: 1px solid rgba(76, 86, 108, 0.3); - font-weight: bold; } } - -/* @end */ - -/* @group Lists */ - -/* when you have a first LI item on any list */ - -/* universal arrows */ - -/* universal links on list */ - -/* @end */ - -/* @group Forms */ - -/* @end */ - -/* @group Edge to edge */ - -/* @end */ - -/* @group Mini Label */ - -/* @end */ - -/* @group Plastic */ - -/* @end */ - -/* @group Individual */ - -/* @end */ - -/* @group Toggle */ - -/* @end */ +// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake + +body, #jqt { + background: rgb(0, 0, 0); } + +body > * { + background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } + +#jqt { + > * { + background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } + h1, h2 { + font: bold 18px "Helvetica Neue", Helvetica; + text-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px; + color: rgb(76, 86, 108); + margin: 10px 20px 6px; } + .toolbar { + -webkit-box-sizing: border-box; + border-bottom: 1px solid #2d3642; + padding: 10px; + height: 45px; + background: image_url("jqtouch/apple/toolbar.png") #6d84a2 repeat-x; + position: relative; } + .black-translucent .toolbar { + margin-top: 20px; } } + +/* @group Toolbar */ + +div#jqt { + .toolbar > h1 { + position: absolute; + overflow: hidden; + left: 50%; + top: 10px; + line-height: 1em; + margin: 1px 0 0 -75px; + height: 40px; + font-size: 20px; + width: 150px; + font-weight: bold; + text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + color: white; } + &.landscape .toolbar > h1 { + margin-left: -125px; + width: 250px; } } + +#jqt { + .button, .back, .cancel, .add { + position: absolute; + overflow: hidden; + top: 8px; + right: 6px; + margin: 0; + border-width: 0 5px; + padding: 0 3px; + width: auto; + height: 30px; + line-height: 30px; + font-family: inherit; + font-size: 12px; + font-weight: bold; + color: white; + text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0; + text-overflow: ellipsis; + text-decoration: none; + white-space: nowrap; + background: none; + -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } + .button.active, .cancel.active, .add.active { + -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } + .blueButton { + -webkit-border-image: image_url("jqtouch/apple/actionButton.png") 0 5 0 5; + border-width: 0 5px; } + .back { + left: 6px; + right: auto; + padding: 0; + max-width: 55px; + border-width: 0 8px 0 14px; + -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; + &.active { + -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; } } + .leftButton, .cancel { + left: 6px; + right: auto; } + .add { + font-size: 24px; + line-height: 24px; + font-weight: bold; } + .whiteButton, .grayButton, .redButton, .blueButton, .greenButton { + display: block; + border-width: 0 12px; + padding: 10px; + text-align: center; + font-size: 20px; + font-weight: bold; + text-decoration: inherit; + color: inherit; } + .whiteButton.active, .grayButton.active, .redButton.active, .blueButton.active, .greenButton.active, .whiteButton:active, .grayButton:active, .redButton:active, .blueButton:active, .greenButton:active { + -webkit-border-image: image_url("jqtouch/apple/activeButton.png") 0 12 0 12; } + .whiteButton { + -webkit-border-image: image_url("jqtouch/apple/whiteButton.png") 0 12 0 12; + text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; } + .grayButton { + -webkit-border-image: image_url("jqtouch/apple/grayButton.png") 0 12 0 12; + color: white; } + .redButton { + -webkit-border-image: image_url("jqtouch/apple/redButton.png") 0 12 0 12; + color: white; } + .greenButton { + -webkit-border-image: image_url("jqtouch/apple/greenButton.png") 0 12 0 12; + color: white; } + h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul { + margin-top: 0; } + ul { + color: black; + background: white; + border: 1px solid #b4b4b4; + font: bold 17px "Helvetica Neue", Helvetica; + padding: 0; + margin: 15px 10px 17px 10px; + -webkit-border-radius: 8px; + li { + color: #666666; + border-top: 1px solid #b4b4b4; + list-style-type: none; + padding: 10px 10px 10px 10px; } } + li { + &:first-child { + border-top: 0; + -webkit-border-top-left-radius: 8px; + -webkit-border-top-right-radius: 8px; + a { + border-top: 0; + -webkit-border-top-left-radius: 8px; + -webkit-border-top-right-radius: 8px; } } + &:last-child { + -webkit-border-bottom-left-radius: 8px; + -webkit-border-bottom-right-radius: 8px; + a { + -webkit-border-bottom-left-radius: 8px; + -webkit-border-bottom-right-radius: 8px; } } } + ul li.arrow { + background-image: image_url("jqtouch/apple/chevron.png"); + background-position: right center; + background-repeat: no-repeat; + a { + padding: 12px 22px 12px 10px; } } + #plastic ul li.arrow, #metal ul li.arrow { + background-image: url("../images/chevron_dg.png"); + background-position: right center; + background-repeat: no-repeat; } + ul li a, li.img a + a { + color: black; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + padding: 12px 10px 12px 10px; + margin: -10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + ul { + li { + a { + &.active { + background: #194fdb image_url("jqtouch/apple/selection.png") 0 0 repeat-x; + color: white; } + &.button { + background-color: #194fdb; + color: white; } } + &.img a + { + a { + margin: -10px 10px -20px -5px; + font-size: 17px; + font-weight: bold; + + a { + font-size: 14px; + font-weight: normal; + margin-left: -10px; + margin-bottom: -10px; + margin-top: 0; } } + small + a { + margin-left: -5px; + + a { + margin-left: -10px; + margin-top: -20px; + margin-bottom: -10px; + font-size: 14px; + font-weight: normal; + + a { + margin-left: 0px !important; + margin-bottom: 0; } } } } + a + a { + color: black; + font: 14px "Helvetica Neue", Helvetica; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + a { + color: #666666; + font: 13px "Helvetica Neue", Helvetica; + margin: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + padding: 0; } } + &.img a + { + a + a + a, small + a + a + a { + color: #666666; + font: 13px "Helvetica Neue", Helvetica; + margin: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + padding: 0; } } } + &.form li { + padding: 7px 10px; + &.error { + border: 2px solid red; + + li.error { + border-top: 0; } } + &:hover { + background: white; } } + li { + input { + &[type="text"], &[type="password"], &[type="tel"], &[type="number"], &[type="search"], &[type="email"], &[type="url"] { + color: #777777; + background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); + border: 0; + font: normal 17px "Helvetica Neue", Helvetica; + padding: 0; + display: inline-block; + margin-left: 0px; + width: 100%; + -webkit-appearance: textarea; } } + textarea, select { + color: #777777; + background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); + border: 0; + font: normal 17px "Helvetica Neue", Helvetica; + padding: 0; + display: inline-block; + margin-left: 0px; + width: 100%; + -webkit-appearance: textarea; } + textarea { + height: 120px; + padding: 0; + text-indent: -2px; } + select { + text-indent: 0px; + background: transparent image_url("jqtouch/apple/chevron.png") no-repeat 103% 3px; + -webkit-appearance: textfield; + margin-left: -6px; + width: 104%; } + input { + &[type="checkbox"], &[type="radio"] { + margin: 0; + color: rgb(50, 79, 133); + padding: 10px 10px; } + &[type="checkbox"]:after, &[type="radio"]:after { + content: attr(title); + font: 17px "Helvetica Neue", Helvetica; + display: block; + width: 246px; + margin: -12px 0 0 17px; } } } + &.edgetoedge { + -webkit-border-radius: 0; + li.sep { + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(139, 159, 171, 1)), to(rgba(181, 193, 201, 1))); + border-bottom: 1px solid #b5c1c9; + border-top: 1px solid #b5c1c9; + color: white; + font-size: 16px; + margin: 1px 0 0 0; + padding: 2px 10px; + text-shadow: #636a6f 0 1px 0; } } } + .edgetoedge { + h4 { + color: white; + background: rgb(154, 159, 170) image_url("jqtouch/apple/listGroup.png") top left repeat-x; + border-top: 1px solid rgb(165, 177, 186); + text-shadow: #666666 0 1px 0; + margin: 0; + padding: 2px 10px; } + margin: 0; + padding: 0; + background-color: rgb(255, 255, 255); } + .metal { + margin: 0; + padding: 0; + background-color: rgb(255, 255, 255); } + .edgetoedge ul, .metal ul, .plastic ul { + -webkit-border-radius: 0; + margin: 0; + border-left: 0; + border-right: 0; + border-top: 0; } + .metal ul { + border-top: 0; + border-bottom: 0; + background: rgb(180, 180, 180); } + .edgetoedge ul li { + &:first-child, &:last-child { + -webkit-border-radius: 0; + a { + -webkit-border-radius: 0; } } } + .metal ul li { + &:first-child a, &:last-child a { + -webkit-border-radius: 0; } } + .edgetoedge { + ul li small { + font-size: 16px; + line-height: 28px; } + li { + -webkit-border-radius: 0; } } + .metal li { + -webkit-border-radius: 0; } + .edgetoedge { + li em { + font-weight: normal; + font-style: normal; } + h4 + ul { + border-top: 1px solid rgb(152, 158, 164); + border-bottom: 1px solid rgb(113, 125, 133); } } + ul li { + small { + color: #336699; + font: 17px "Helvetica Neue", Helvetica; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + width: 23%; + float: right; + padding: 3px 0px; } + &.arrow small { + padding: 0 15px; } + small.counter { + font-size: 17px !important; + line-height: 13px !important; + font-weight: bold; + background: rgb(154, 159, 170); + color: white; + -webkit-border-radius: 11px; + padding: 4px 10px 5px 10px; + display: inline !important; + width: auto; + margin-top: -22px; } + &.arrow small.counter { + margin-right: 15px; } } + #plastic ul li.arrow, #metal ul li.arrow { + background-image: image_url("jqtouch/apple/listArrowSel.png"); + background-position: right center; + background-repeat: no-repeat; } + .edgetoedge ul, .metal ul, .plastic ul { + -webkit-border-radius: 0; + margin: 0; + border-left: 0; + border-right: 0; + border-top: 0; } + .metal ul li { + border-top: 1px solid rgb(238, 238, 238); + border-bottom: 1px solid rgb(156, 158, 165); + background: url("../images/bgMetal.png") top left repeat-x; + font-size: 26px; + text-shadow: white 0 1px 0; + a { + line-height: 26px; + margin: 0; + padding: 13px 0; + &:hover { + color: rgb(0, 0, 0); } } + &:hover small { + color: inherit; } + a em { + display: block; + font-size: 14px; + font-style: normal; + color: #444444; + width: 50%; + line-height: 14px; } + small { + float: right; + position: relative; + margin-top: 10px; + font-weight: bold; } + &.arrow { + a small { + padding-right: 0; + line-height: 17px; } + background: image_url("jqtouch/apple/bgMetal.png") top left repeat-x, url("../images/chevron_dg.png") right center no-repeat; } } + .plastic { + margin: 0; + padding: 0; + background: rgb(173, 173, 173); + ul { + -webkit-border-radius: 0; + margin: 0; + border-left: 0; + border-right: 0; + border-top: 0; + background-color: rgb(173, 173, 173); + li { + -webkit-border-radius: 0; + border-top: 1px solid rgb(191, 191, 191); + border-bottom: 1px solid rgb(157, 157, 157); + &:nth-child(odd) { + background-color: rgb(152, 152, 152); + border-top: 1px solid rgb(181, 181, 181); + border-bottom: 1px solid rgb(138, 138, 138); } } + + p { + font-size: 11px; + color: #2f3237; + text-shadow: none; + padding: 10px 10px; + strong { + font-size: 14px; + line-height: 18px; + text-shadow: white 0 1px 0; } } + li { + a { + text-shadow: rgb(211, 211, 211) 0 1px 0; } + &:nth-child(odd) a { + text-shadow: rgb(191, 191, 191) 0 1px 0; } + small { + color: #3c3c3c; + text-shadow: rgb(211, 211, 211) 0 1px 0; + font-size: 13px; + font-weight: bold; + text-transform: uppercase; + line-height: 24px; } } } } + #plastic ul { + &.minibanner { + margin: 10px; + border: 0; + height: 81px; + clear: both; } + &.bigbanner { + margin: 10px; + border: 0; + height: 81px; + clear: both; + height: 140px !important; } + &.minibanner li { + border: 1px solid rgb(138, 138, 138); + background-color: rgb(152, 152, 152); + width: 145px; + height: 81px; + float: left; + -webkit-border-radius: 5px; + padding: 0; } + &.bigbanner li { + border: 1px solid rgb(138, 138, 138); + background-color: rgb(152, 152, 152); + width: 296px; + height: 140px; + float: left; + -webkit-border-radius: 5px; + padding: 0; + margin-bottom: 4px; } + &.minibanner li { + &:first-child { + margin-right: 6px; } + a { + color: transparent; + text-shadow: none; + display: block; + width: 145px; + height: 81px; } } + &.bigbanner li a { + color: transparent; + text-shadow: none; + display: block; + width: 296px; + height: 145px; } } + ul.individual { + border: 0; + background: none; + clear: both; + overflow: hidden; + li { + color: rgb(183, 190, 205); + background: white; + border: 1px solid rgb(180, 180, 180); + font-size: 14px; + text-align: center; + -webkit-border-radius: 8px; + -webkit-box-sizing: border-box; + width: 48%; + float: left; + display: block; + padding: 11px 10px 14px 10px; + + li { + float: right; } + a { + color: rgb(50, 79, 133); + line-height: 16px; + margin: -11px -10px -14px -10px; + padding: 11px 10px 14px 10px; + -webkit-border-radius: 8px; + &:hover { + color: white; + background: #3366cc; } } } } + .toggle { + width: 94px; + position: relative; + height: 27px; + display: block; + overflow: hidden; + float: right; + input[type="checkbox"] { + &:checked { + left: 0px; } + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + margin: 0; + -webkit-border-radius: 5px; + background: white image_url("jqtouch/apple/on_off.png") 0 0 no-repeat; + height: 27px; + overflow: hidden; + width: 149px; + border: 0; + -webkit-appearance: textarea; + background-color: transparent; + -webkit-transition: left 0.15s; + position: absolute; + top: 0; + left: -55px; } } + .info { + background: #dce1eb; + font-size: 12px; + line-height: 16px; + text-align: center; + text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; + color: rgb(76, 86, 108); + padding: 15px; + border-top: 1px solid rgba(76, 86, 108, 0.3); + font-weight: bold; } } + +/* @end */ + +/* @group Lists */ + +/* when you have a first LI item on any list */ + +/* universal arrows */ + +/* universal links on list */ + +/* @end */ + +/* @group Forms */ + +/* @end */ + +/* @group Edge to edge */ + +/* @end */ + +/* @group Mini Label */ + +/* @end */ + +/* @group Plastic */ + +/* @end */ + +/* @group Individual */ + +/* @end */ + +/* @group Toggle */ + +/* @end */