Skip to content

Commit b6a0960

Browse files
rnowmrnowm
committed
fixed tabs, filters and added some padding
1 parent 7b9c519 commit b6a0960

File tree

3 files changed

+125
-106
lines changed

3 files changed

+125
-106
lines changed

‎app.html

+111-93
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929

3030
<!-- Transitions -->
3131
<link rel="stylesheet" href="transitions.css">
32-
32+
3333
<!-- Util CSS: some extra tricks -->
3434
<link rel="stylesheet" href="util.css">
3535
<link rel="stylesheet" href="fonts.css">
3636

3737
<!-- Additional markup to make Building Blocks kind of cross browser -->
38-
<link rel="stylesheet" href="cross_browser.css">
38+
<!--link rel="stylesheet" href="cross_browser.css"-->
3939

4040
<style>
4141
#index {
@@ -127,7 +127,7 @@
127127

128128
/* Lists */
129129
/* to avoid double background effect on press */
130-
[data-type=list] li>a:active {
130+
[data-type=list] li>a:active {
131131
background-color: transparent;
132132
}
133133

@@ -138,14 +138,14 @@
138138
z-index: 0;
139139
padding-left: 0;
140140
}
141-
section[data-type="sidebar"] + section[role="region"] > header:first-child > button,
141+
section[data-type="sidebar"] + section[role="region"] > header:first-child > button,
142142
section[data-type="sidebar"] + section[role="region"] > header:first-child > a {
143143
background-position: 3.5rem center;
144144
}
145145

146146
/* Switches */
147147
#switches label:last-child {
148-
margin-left: 2rem;
148+
margin-left: 2rem;
149149
}
150150

151151
/* Scrolling */
@@ -161,24 +161,29 @@
161161
background: no-repeat right top;
162162
background-size: 3rem auto;
163163
}
164-
164+
165165
/* Tabs */
166166
#tabs .content {
167167
padding: 0;
168168
}
169169
#tabs .content .content {
170170
padding: 1.5rem 3rem;
171171
}
172+
#panel1 a {
173+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDM0IyRDEwMTRCQ0ExMUUzOEI3MkZFOEM1MTY1MUU0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDM0IyRDEwMjRCQ0ExMUUzOEI3MkZFOEM1MTY1MUU0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMzQjJEMEZGNEJDQTExRTM4QjcyRkU4QzUxNjUxRTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMzQjJEMTAwNEJDQTExRTM4QjcyRkU4QzUxNjUxRTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+RALCTwAAAgdJREFUeNrsmLFKA0EQhnNeULhOwSIQrAQFraI2FkKsBLGSdIakClj4BNa+gQhWSayUlBYWKQSLYEBtYsRCEAKKYKGgiKQ5Z2ACR7jd7N5NFGQGfoJzs/vlbjdz6+/4vp/4ixhJ/FEIWMACZotkWNJxHO2gQqHgwcc0/fkA+tLVVyoVMzBMrJpjHLSHJSCPcgitgnZBb7HuWBGToAvQbF8ev8A2KAtaAb1yr/F+CDQYeO2Ae3OlQTmDuk2qZQMv454zqHOolg3sWSyJxwluWYBbnOAbUNugrk21bGA8ppRAXU1Nl2p87p9TA7QG6oRc69C1xjAaCMY5aAa0AZqn3C3oFPQdu1cPCATUSEN9OyVp7XC35jV1W3T3JZMbGgSeAjVBh/Roywo4QvEVNEe1TRobCYyt7xKUCeTcEHieoG4gl6Gx6ShrfARKheR78F6U+6C9SNEcqzbgRXrNqSIIdzV1WZrryvRRLxlsOncAVDuXCjzGeLwatQF/MII/bcBPjOBnG/AdI/jeBoxN/4UBinM82jaQOgO4HqVzHTOAT6J0rjPQREzwu/JUKB6IgAUsYAELWMAC/vUIPfoUi0XtoOr6jpWJ6ucWzI4+Tu1aNUckEzUMLCaqzh0QEzVWrZioyh6QEBNVTFQxUcVENXzUYqLGCTFRtWAxUaOGmKjyb6qABfyPwD8CDADIZJaymr3BjwAAAABJRU5ErkJggg==);
174+
}
175+
#panel2 a {
176+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NjZEOTM1MTRCQ0UxMUUzOEI3MkZFOEM1MTY1MUU0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NjZEOTM1MjRCQ0UxMUUzOEI3MkZFOEM1MTY1MUU0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlEMUREOTkyNEJDQjExRTM4QjcyRkU4QzUxNjUxRTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk2NkQ5MzUwNEJDRTExRTM4QjcyRkU4QzUxNjUxRTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XJ6+IQAAA0pJREFUeNrsmF1IVEEUx+fqwmoRRS9FREUf9lSs9lBERNSjRBB9PAQtGZWla+ZDH/QQ9VAQ9GVqIaH1YFRgRAW99BAUBVFa9BBREhm9FIVGUQm5/Q+eibvj3L0zd3e1jznwY53r7Px35p6Ze+7fS6fTYjSiSIxSOGEn7IT/fuGY53k5DZBMJuP42AjOAeNjMIYv0mcpOAJ2gwFL7RLQCirADlNxudQnwU7QBqIuQTVoMf1+DCwFW7i9AbwF+wL6HwArlWvFivggqDERPqH8yr2gF5zR9C8HC0LGpOU+Ct6ECc/WXD8NPoMO5Xo3mKqZccLXbgwTlcK3wWrNYG08wD3f9YOMP8aDPv67CdSbJldHwP8ou99ZJFczqLPJ6psBAofAa4MxvoMqkFJEPU7aeJDwACeDGg8MZ/oDtGtEW3h/l2Tbx62a2ZVH3M9StDosueRypXjZZdTxfRu0FG5WRO+An0qfG8WJxO+d8BLMAfO5PRF8BA8tRKdpknUymKLQrz6dapU9SOf3XAvhXt7H/ngCHit0x5ROfbyn74IxYCwv/2LwwVC8nnOnltvLaIYmz+MusNmXpXSy3QKTDIXTnB9NUQqBS/y0kkHn831QZilexYlrVYHQeb3f154JHoFtmu9RUi3UiLfzPrcufQ4rx+A4cBY853u4iO/pM942a4wrEIM+NPP3/OtL+VoZX1fjMmgAp/JV7NGAS3i7hI1H1cyxsErEpsrs4sPlokHfBk7QeL7K234uj1aBnpC+68DxfNfV18E8sCvLM/s82FOIgv4b389ZnM1XwSfwFCwHm8CXXLLa5HncyRTx1gutQjzngThhJ+yEnbATdsJO+P8R9tjLjBwXKlORTFRPXKH3sJxMVOlz0TuVM1GzLjV5EhXKdVoynYl6jV9fwmKG+FNNVJpxpxhuogpOshUi00TNllyCfQ8jP9OZqP74N01UeXJRVIpME/WVGLITbU1UEt3ua5OlONxEFWu3ysaImqj+GVNM4F84ndtfxZCr98JCvJETLeuMVWHBp5g0UeWS25ioHh9ANb7JjJiJmhLORLUsfQpmouqSSxfrRaaJGhS0552Jmpfy1pmokU1U06y2eTNxJqoTdsJOuLDxS4ABAHTFDfqZk4Q5AAAAAElFTkSuQmCC);
177+
}
178+
#panel3 a {
179+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABQCAYAAAAOYsW+AAAA30lEQVRo3u2YMQrCQBBFv95ICXqTtDmJKfQk01olED2DiugF1MImjXqBWNisEIZVFIKFvFftzmdnt3kwrAQAAB/S84Usy0aS1q68N7NhyKeSJi6fmVke8p2kgcvHZrZpF/qRx1witesX+e2TnrGLz5IaVzu9WD85ttYHlzWh5/uLzewuqXQHF639SlLd2teh9mTpHl6GnoDHePxbjwt3sPrC48o9vMBjPMZjPAYAAACAjuZqzbfRuVppMgx5dK5WmuQhj87VShPmakeadP7PFXoCHuMxHgMe4zEeA8C/8ABPaein4jLEkQAAAABJRU5ErkJggg==);
180+
}
172181

173182
/* Filters */
174183
[role="tablist"][data-type="filter"] {
175184
margin-bottom: 2rem;
176185
}
177186

178-
.bottom[role="tablist"][data-type="filter"] {
179-
bottom: auto;
180-
}
181-
182187
/* Device rotation */
183188
.landscape section[role="region"]#drawer > header:first-child {
184189
/* Whatever needs to be changed on landscape */
@@ -552,7 +557,7 @@ <h1>Input areas</h1>
552557
</header>
553558
<article class="content scrollable header">
554559
<header><h2>Default inputs</h2></header>
555-
<form>
560+
<form class="paddings">
556561
<p>
557562
<input type="text" placeholder="Placeholder" required>
558563
<button type="reset">Clear</button>
@@ -569,7 +574,7 @@ <h1>Input areas</h1>
569574
</form>
570575

571576
<header><h2>Fieldset</h2></header>
572-
<form>
577+
<form class="paddings">
573578
<fieldset>
574579
<legend class="action">Mobile</legend>
575580
<section>
@@ -643,7 +648,7 @@ <h1>Input areas</h1>
643648
<p>
644649
<textarea required>Some text here</textarea>
645650
</p>
646-
</form>
651+
</form>
647652
</article>
648653
</section>
649654

@@ -655,57 +660,64 @@ <h1>Switches</h1>
655660
</header>
656661
<article class="content scrollable header">
657662
<header><h2>Checkbox, commonly used in edit mode</h2></header>
658-
<label class="pack-checkbox">
659-
<input type="checkbox" checked>
660-
<span></span>
661-
</label>
662-
663-
<label class="pack-checkbox">
664-
<input type="checkbox">
665-
<span></span>
666-
</label>
667-
668-
<label class="pack-checkbox danger">
669-
<input type="checkbox" checked>
670-
<span></span>
671-
</label>
672-
673-
<label class="pack-checkbox danger">
674-
<input type="checkbox">
675-
<span></span>
676-
</label>
663+
<div class="paddings">
664+
<label class="pack-checkbox">
665+
<input type="checkbox" checked>
666+
<span></span>
667+
</label>
668+
669+
<label class="pack-checkbox">
670+
<input type="checkbox">
671+
<span></span>
672+
</label>
673+
674+
<label class="pack-checkbox danger">
675+
<input type="checkbox" checked>
676+
<span></span>
677+
</label>
678+
679+
<label class="pack-checkbox danger">
680+
<input type="checkbox">
681+
<span></span>
682+
</label>
683+
</div>
677684

678685
<header><h2>Radio, commonly used in settings</h2></header>
679-
<label class="pack-radio">
680-
<input type="radio" name="example" checked>
681-
<span></span>
682-
</label>
683-
684-
<label class="pack-radio">
685-
<input type="radio" name="example">
686-
<span></span>
687-
</label>
688-
689-
<label class="pack-radio danger">
690-
<input type="radio" name="example2" checked>
691-
<span></span>
692-
</label>
693-
694-
<label class="pack-radio danger">
695-
<input type="radio" name="example2">
696-
<span></span>
697-
</label>
686+
<div class="paddings">
687+
<label class="pack-radio">
688+
<input type="radio" name="example" checked>
689+
<span></span>
690+
</label>
691+
692+
<label class="pack-radio">
693+
<input type="radio" name="example">
694+
<span></span>
695+
</label>
696+
697+
<label class="pack-radio danger">
698+
<input type="radio" name="example2" checked>
699+
<span></span>
700+
</label>
701+
702+
<label class="pack-radio danger">
703+
<input type="radio" name="example2">
704+
<span></span>
705+
</label>
706+
</div>
698707

699708
<header><h2>Switch, commonly used in settings</h2></header>
700-
<label class="pack-switch">
701-
<input type="checkbox" checked>
702-
<span></span>
703-
</label>
704-
705-
<label class="pack-switch">
706-
<input type="checkbox">
707-
<span></span>
708-
</label>
709+
<div class="paddings">
710+
<label class="pack-switch">
711+
<input type="checkbox" checked>
712+
<span></span>
713+
</label>
714+
715+
<label class="pack-switch">
716+
<input type="checkbox">
717+
<span></span>
718+
</label>
719+
</div>
720+
709721
</article>
710722
</section>
711723

@@ -774,19 +786,29 @@ <h1>Progress and activity</h1>
774786
</header>
775787
<article class="content scrollable header">
776788
<header><h2>Spinner</h2></header>
777-
<progress></progress>
789+
<div class="paddings center">
790+
<progress></progress>
791+
</div>
778792

779793
<header><h2>Activity bar</h2></header>
780-
<progress class="pack-activity" value="0" max="100"></progress>
794+
<div class="paddings">
795+
<progress class="pack-activity" value="0" max="100"></progress>
796+
</div>
781797

782798
<header><h2>Progress bar</h2></header>
783-
<progress value="80" max="100"></progress>
799+
<div class="paddings">
800+
<progress value="80" max="100"></progress>
801+
</div>
784802

785803
<header><h2>Progress + activity bar</h2></header>
786-
<progress class="pack-activity" value="80" max="100"></progress>
804+
<div class="paddings">
805+
<progress class="pack-activity" value="80" max="100"></progress>
806+
</div>
787807

788808
<header><h2>Light progress + activity bar</h2></header>
789-
<progress class="pack-activity light" value="0" max="100"></progress>
809+
<div class="paddings">
810+
<progress class="pack-activity light" value="0" max="100"></progress>
811+
</div>
790812
</article>
791813
</section>
792814

@@ -843,15 +865,15 @@ <h1>Seek bars</h1>
843865
</header>
844866
<article class="content scrollable header">
845867
<header><h2>Default seeker</h2></header>
846-
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
868+
<div class="paddings" role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
847869
<div>
848870
<progress value="80" max="100"></progress>
849871
<button>handler</button>
850872
</div>
851873
</div>
852874

853875
<header><h2>Value seeker</h2></header>
854-
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
876+
<div class="paddings" role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
855877
<label>0</label>
856878
<label>100</label>
857879
<div>
@@ -861,7 +883,7 @@ <h1>Seek bars</h1>
861883
</div>
862884

863885
<header><h2>Icon seeker</h2></header>
864-
<div role="slider" aria-valuemin="0" aria-valuenow="10" aria-valuemax="100" aria-valuetext="slider description">
886+
<div class="paddings" role="slider" aria-valuemin="0" aria-valuenow="10" aria-valuemax="100" aria-valuetext="slider description">
865887
<label class="icon settings-icon lower-brightness">0</label>
866888
<label class="icon settings-icon brightness">100</label>
867889
<div>
@@ -882,16 +904,16 @@ <h1>Tabs</h1>
882904
</header>
883905
<article class="content scrollable header">
884906
<ul role="tablist" data-items="4" class="bottom">
885-
<li id="panel2" role="tab">
886-
<a href="#" class="icon comms-icon dailer-recentcalls">comms</a>
907+
<li id="panel1" role="tab">
908+
<a href="#" class="icon">comms</a>
887909
<div role="tabpanel"></div>
888910
</li>
889911
<li id="panel2" role="tab">
890-
<a href="#" class="icon comms-icon dailer-contacts">contacts</a>
912+
<a href="#" class="icon">contacts</a>
891913
<div role="tabpanel"></div>
892914
</li>
893915
<li id="panel3" role="tab" aria-disabled="true">
894-
<a class="icon comms-icon dailer-dialpad">dialer</a>
916+
<a class="icon">dialer</a>
895917
<div role="tabpanel"></div>
896918
</li>
897919
<li id="panel4" role="tab">
@@ -911,28 +933,25 @@ <h1>Tabs</h1>
911933
<h1>Filters</h1>
912934
</header>
913935
<article class="content scrollable header">
914-
<header><h2>Default position</h2></header>
915-
<ul role="tablist" data-type="filter" data-items="2">
916-
<li id="filter1-1" role="tab"><a href="#">Action 01</a></li>
917-
<li id="filter1-2" role="tab"><a href="#">Action 02</a></li>
936+
<header><h2>Default filters</h2></header>
937+
<ul role="tablist" data-type="filter">
938+
<li id="filter1-1" role="tab"><a href="#filter1-1">Action 01</a></li>
939+
<li id="filter1-2" role="tab"><a href="#filter1-2">Action 02</a></li>
918940
</ul>
919-
<ul role="tablist" data-type="filter" data-items="3">
920-
<li id="filter2-1" role="tab"><a href="#">Action 01</a></li>
921-
<li id="filter2-2" role="tab"><a href="#">Action 02</a></li>
922-
<li id="filter2-3" role="tab"><a href="#">Action 02</a></li>
941+
<ul role="tablist" data-type="filter" class="skin-grey">
942+
<li id="filter2-1" role="tab"><a href="#filter2-1">Action 01</a></li>
943+
<li id="filter2-2" role="tab"><a href="#filter2-2">Action 02</a></li>
944+
<li id="filter2-3" role="tab"><a href="#filter2-3">Action 02</a></li>
923945
</ul>
924-
<ul role="tablist" data-type="filter" data-items="4">
925-
<li id="filter3-1" role="tab"><a href="#">Action 01</a></li>
926-
<li id="filter3-2" role="tab"><a href="#">Action 02</a></li>
927-
<li id="filter3-3" role="tab"><a href="#">Action 03</a></li>
928-
<li id="filter3-4" role="tab"><a href="#">Action 04</a></li>
946+
<header><h2>Grey theme</h2></header>
947+
<ul role="tablist" data-type="filter" class="bottom">
948+
<li id="filter-bottom1-1" role="tab"><a href="#filter-bottom1-1">Action 01</a></li>
949+
<li id="filter-bottom1-2" role="tab"><a href="#filter-bottom1-2">Action 02</a></li>
929950
</ul>
930-
<header><h2>Bottom position</h2></header>
931-
<ul role="tablist" data-type="filter" class="bottom" data-items="4">
932-
<li id="filter4-1" role="tab"><a href="#">Action 01</a></li>
933-
<li id="filter4-2" role="tab"><a href="#">Action 02</a></li>
934-
<li id="filter4-3" role="tab"><a href="#">Action 03</a></li>
935-
<li id="filter4-4" role="tab"><a href="#">Action 04</a></li>
951+
<ul role="tablist" data-type="filter" class="skin-grey bottom">
952+
<li id="filter-bottom2-1" role="tab"><a href="#filter-bottom2-1">Action 01</a></li>
953+
<li id="filter-bottom2-2" role="tab"><a href="#filter-bottom2-2">Action 02</a></li>
954+
<li id="filter-bottom2-3" role="tab"><a href="#filter-bottom2-3">Action 02</a></li>
936955
</ul>
937956
</article>
938957
</section>
@@ -969,7 +988,7 @@ <h1>Toolbars</h1>
969988
<script>
970989
/*var mobile = (navigator.userAgent.search("Mobile") != -1);
971990
if ( mobile ) {
972-
//Let's reduce font-size when in landscape
991+
//Let's reduce font-size when in landscape
973992
//fs: current font-size
974993
var fs = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue( 'font-size' ), 10);
975994
var mql = window.matchMedia("(orientation: portrait)");
@@ -996,4 +1015,3 @@ <h1>Toolbars</h1>
9961015
</script>
9971016
</body>
9981017
</html>
999-

0 commit comments

Comments
 (0)