Skip to content

Commit c644d54

Browse files
GarthDBGarthDB
committed
fixed namespacing to resolve conflicts with the actual topcoat-select
1 parent 9c3f717 commit c644d54

2 files changed

Lines changed: 37 additions & 57 deletions

File tree

css/topcoat-select.css renamed to css/topdoc-select.css

Lines changed: 34 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,4 @@
1-
/**
2-
*
3-
* Copyright 2012 Adobe Systems Inc.;
4-
*
5-
* Licensed under the Apache License, Version 2.0 (the "License");
6-
* you may not use this file except in compliance with the License.
7-
* You may obtain a copy of the License at
8-
*
9-
* http://www.apache.org/licenses/LICENSE-2.0
10-
*
11-
* Unless required by applicable law or agreed to in writing, software
12-
* distributed under the License is distributed on an "AS IS" BASIS,
13-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14-
* See the License for the specific language governing permissions and
15-
* limitations under the License.
16-
*
17-
*/
18-
.topcoat-select {
1+
.topdoc-select {
192
padding: 0;
203
margin: 0;
214
font: inherit;
@@ -24,43 +7,43 @@
247
border: none;
258
}
269

27-
.topcoat-select {
10+
.topdoc-select {
2811
vertical-align: top;
2912
outline: none;
3013
}
3114

32-
.topcoat-select {
15+
.topdoc-select {
3316
cursor: default;
3417
-webkit-user-select: none;
3518
-moz-user-select: none;
3619
-ms-user-select: none;
3720
user-select: none;
3821
}
3922

40-
.topcoat-select {
41-
-moz-box-sizing: border-box;
23+
.topdoc-select {
4224
box-sizing: border-box;
4325
background-clip: padding-box;
4426
}
4527

46-
.topcoat-select {
28+
.topdoc-select {
4729
position: relative;
4830
display: inline-block;
4931
vertical-align: top;
5032
}
5133

52-
.topcoat-select:disabled {
53-
opacity: 0.3;
34+
.topdoc-select:disabled {
35+
opacity: .3;
5436
cursor: default;
5537
pointer-events: none;
5638
}
5739

58-
.topcoat-select {
59-
-moz-appearance: none;
40+
.topdoc-select {
6041
-webkit-appearance: none;
42+
-moz-appearance: none;
43+
appearance: none;
6144
}
6245

63-
.topcoat-select::-ms-expand {
46+
.topdoc-select::-ms-expand {
6447
display: none;
6548
}
6649

@@ -91,62 +74,62 @@
9174
- input
9275
*/
9376

94-
.topcoat-select {
77+
.topdoc-select {
9578
-webkit-user-select: none;
9679
-moz-user-select: none;
9780
-ms-user-select: none;
9881
user-select: none;
9982
cursor: pointer;
100-
appearance: button;
101-
text-indent: 0.01px;
83+
text-indent: 1px;
10284
text-overflow: '';
103-
padding: .06rem 1.4rem .06rem 0.4rem;
104-
font-size: 12px;
85+
padding: .25rem .75rem;
86+
font-size: 1rem;
10587
font-weight: 400;
106-
height: 1.313rem;
88+
line-height: 1.313rem;
10789
letter-spacing: 0;
108-
color: hsla(0, 0%, 27%, 1);
109-
text-shadow: 0 1px hsla(0, 100%, 100%, 1);
90+
color: hsla(180, 2%, 78%, 1);
91+
text-shadow: 0 -1px hsla(0, 0%, 0%, .69);
92+
vertical-align: top;
11093
border-radius: 4px;
111-
background-color: hsla(165, 8%, 91%, 1);
112-
box-shadow: inset 0 1px hsla(0, 100%, 100%, 1);
113-
border: 1px solid hsla(168, 8%, 65%, 1);
94+
background-color: hsla(180, 1%, 35%, 1);
95+
box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
96+
border: 1px solid hsla(180, 1%, 20%, 1);
11497
background-image: url('img/dropdown.svg');
11598
background-repeat: no-repeat;
11699
background-position: center right;
117100
min-width: 3.4rem;
118101
}
119102

120-
.topcoat-select:hover {
121-
background-color: hsla(180, 7%, 94%, 1);
103+
.topdoc-select:hover {
104+
background-color: hsla(200, 2%, 39%, 1);
122105
}
123106

124-
.topcoat-select:active {
125-
background-color: hsla(180, 5%, 83%, 1);
126-
box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.1);
107+
.topdoc-select:active {
108+
background-color: hsla(210, 2%, 25%, 1);
109+
box-shadow: inset 0 1px hsla(0, 0%, 0%, .05);
127110
}
128111

129-
.topcoat-select:focus {
112+
.topdoc-select:focus {
130113
border: 1px solid hsla(227, 100%, 50%, 1);
131114
box-shadow: 0 0 0 2px hsla(208, 82%, 69%, 1);
132115
outline: 0;
133116
}
134-
.dark .topcoat-select {
117+
.dark .topdoc-select {
135118
color: hsla(180, 2%, 78%, 1);
136119
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.69);
137120
background-color: hsla(180, 1%, 35%, 1);
138121
box-shadow: inset 0 1px hsla(0, 0%, 45%, 1);
139122
border: 1px solid hsla(180, 1%, 20%, 1);
140123
}
141-
.dark .topcoat-select:hover {
124+
.dark .topdoc-select:hover {
142125
background-color: hsla(200, 2%, 39%, 1);
143126
}
144-
.dark .topcoat-select:active {
127+
.dark .topdoc-select:active {
145128
background-color: hsla(210, 2%, 25%, 1);
146129
box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.05);
147130
}
148131
@media screen and (max-width: 650px) {
149-
.topcoat-select {
132+
.topdoc-select {
150133
color: hsla(180, 2%, 78%, 1);
151134
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.69);
152135
background-color: hsla(180, 1%, 35%, 1);
@@ -158,14 +141,11 @@
158141
letter-spacing: 1px;
159142
border-radius: 6px;
160143
}
161-
.topcoat-select:hover {
144+
.topdoc-select:hover {
162145
background-color: hsla(200, 2%, 39%, 1);
163146
}
164-
.topcoat-select:active {
147+
.topdoc-select:active {
165148
background-color: hsla(210, 2%, 25%, 1);
166149
box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.05);
167150
}
168151
}
169-
170-
171-

‎index.jade‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ html
1212
style.
1313
html,body{margin:0;padding:0;height:100%}body{font-family:source-sans-pro,sans-serif;position:relative;-webkit-font-smoothing:antialiased}body.light{background:#f4f4f4}body.dark{color:#f0f1f1;background:#4a4d4e}body.light{color:#181919}h1{font-weight:600}#wrapper{width:100%;overflow-x:hidden;background:inherit;position:relative}#site{width:100%;position:relative;z-index:10;background:inherit;left:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#site:before{position:absolute;content:'';left:-4px;height:100%;width:4px;background:#3b3e3e}#site.open{transform:translate3d(250px,0,0);-webkit-transform:translate3d(250px,0,0)}pre{font-family:source-code-pro,sans-serif;font-size:12px}#main-header{color:#373435;background:#fff;height:98px;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 20px;position:relative}#main-header hgroup{text-align:center}#main-header hgroup h1{font-size:40px;margin:5px 0 0;letter-spacing:-.065em;line-height:1.1em}#main-header hgroup a{color:#464646;text-decoration:none}#main-header hgroup a:hover{color:#000}#main-header hgroup p{font-size:13px;color:#999;margin:0}#main-header nav{display:none}#slide-menu-button{position:absolute;top:20px;left:20px;display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 .5rem;line-height:2rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;-webkit-box-shadow:inset 0 1px #fff;box-shadow:inset 0 1px #fff;-webkit-border-radius:3px;border-radius:3px;width:2.6rem;height:2.6rem;line-height:2.6rem;border:1px solid transparent;-webkit-box-shadow:none;box-shadow:none}#slide-menu:disabled,#slide-menu.is-disabled{opacity:.3;cursor:default;pointer-events:none}#slide-menu-button:active,#slide-menu-button.is-active{color:#454545;text-shadow:0 1px #fff;background-color:#d3d7d7;border:1px solid #a5a8a8;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.12);box-shadow:inset 0 1px rgba(0,0,0,0.12)}#slide-menu-button span{background-repeat:no-repeat;background-image:url('img/listview_icon.svg');-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative;display:inline-block;vertical-align:top;overflow:hidden;vertical-align:middle;width:1.3rem;height:1.3rem}#download-btn{display:none}#content{width:100%;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}#content section.code{display:none;background:#FFF;border:1px solid #e0e0e0;-moz-box-sizing:border-box;box-sizing:border-box;padding:15px;font-size:12px;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;font-weight:400}article.component{padding:0 0 10px}#content section.code h3{margin:0;font-size:12px;color:#000;font-weight:400}#content header h2{font-weight:300;margin:10px 0 25px;font-size:20px;position:relative;display:inline-block;padding-right:10px}body.light #content header h2{background:#f4f4f4}body.dark #content header h2{background:#4a4d4e}#content header{position:relative}#content header:before{content:'';width:100%;display:block;position:absolute;left:0;top:23px}body.light #content header:before{border-bottom:1px solid #e0e0e0}body.dark #content header:before{border-bottom:1px solid #58595a}#content pre{padding:0;margin:2px 0 10px}.showcode{margin:10px 0}.showcode a,section.examples a{color:#288edf;text-decoration:none}.showcode a:hover,section.examples a:hover{text-decoration:underline}section.examples ul{margin:0 0 20px;padding:0 0 0 20px}section.examples h4{margin-bottom:5px}section.examples li{color:#58595a}#sideNav{background:#4a4d4e;position:absolute;width:100%;z-index:1;height:100%;left:0}#sideNav ul{list-style:none;margin:0;padding:0}#sideNav li a{color:#f0f1f1;display:block;height:46px;font-size:16px;-moz-box-sizing:border-box;box-sizing:border-box;padding:12px 0 0 20px;text-decoration:none}#sideNav nav.site,#sideNav .combo{border-bottom:1px solid #58595a;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block}#pageNav li{border-bottom:1px solid #58595a}iframe.componentframe{width: 100%;height: auto;min-height: 400px;border: none;}@media screen and (min-width:650px){#site.open{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#main-header nav{display:inline-block;position:absolute;right:0;top:40px}#main-header ul{list-style:none}#main-header nav li{display:inline-block;margin:0 18px}#main-header nav li#download-btn{display:none}#main-header nav li a{text-decoration:none;font-size:20px;color:#7f7f7f}#main-header nav li.selected a{color:#373435}#slide-menu-button{display:none}#main-header hgroup{text-align:left;position:absolute;display:inline-block;top:24px}#main-header hgroup h1{font-size:60px}#main-header hgroup p{font-size:15px}#main-header{color:#373435;background:#fff;height:148px}#content{padding-left:240px}#sideNav{background:transparent;width:220px;z-index:20;left:10px;top:150px;height:auto}#sideNav nav.site{display:none}#sideNav .combo{border-bottom:0;padding:36px 0}#sideNav li a{padding:12px 0 0 10px}body.light #sideNav li a{color:#797b7b}body.light #pageNav li{border-bottom:1px solid #e0e0e0}}@media screen and (min-width:880px){#content{padding-left:300px}#sideNav li a{display:block;height:60px;padding:22px 0 0 10px;text-decoration:none}#content header h2{font-size:28px}#content header:before{top:30px}section.code div{display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box}.max-width{max-width:1180px;position:relative;margin:0 auto}header#main-header .max-width{top:-10px}#main-header nav li a{font-size:22px}#main-header nav{display:inline-block}#main-header nav li{margin:0 25px}#main-header nav li:last-child{margin-right:0}}@media screen and (min-width:940px){#main-header nav li#download-btn{display:inline-block}#main-header nav li a#download-btn{position:relative;top:-15px;display:inline-block;box-sizing:border-box;-moz-box-sizing:border-box;background-clip:padding-box;font:inherit;background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #a5a8a8;border-radius:6px;margin:0;padding:0 1.25rem}#main-header nav li a#download-btn,#main-header nav li a#download-btn:hover{border:1px solid #143250;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,0.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,0.36)}#main-header nav li a#download-btn:hover{background-color:#2f9cf3}#main-header nav li a#download-btn:active,#main-header nav li a#download-btn.is-active{background-color:#0380e8;box-shadow:inset 0 1px rgba(0,0,0,0.12)}#main-header nav li a#download-btn:disabled,#main-header nav li a#download-btn.is-disabled{opacity:.3;cursor:default;pointer-events:none}}
1414
pre{word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px}pre,code{font-family:source-code-pro,'Source Code Pro',Courier,monospace;color:#535353}pre,pre code{font-size:13px}pre .comment{color:#a2a2a2}pre .support{color:#0086b3}pre .tag,pre .tag-name{color:#446fbd}pre .css-property{color:#8757ad}pre .css-value,pre .support.namespace{color:#f18900}pre .vendor-prefix{color:#535353}pre .constant.numeric,pre .keyword.unit{color:#738d00}pre .hex-color{color:#f18900}pre .entity.class{color:#5585c4}pre .entity.id,pre .entity.function{color:#900}pre .attribute,pre .variable{color:#738d00}pre .string,pre .support.value{color:#8757ad}pre .regexp{color:#535353}
15-
.topcoat-select{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.topcoat-select{vertical-align:top;outline:0}.topcoat-select{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topcoat-select{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-select{position:relative;display:inline-block;vertical-align:top}.topcoat-select:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-select{-moz-appearance:none;-webkit-appearance:none}.topcoat-select::-ms-expand{display:none}.topcoat-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;appearance:button;text-indent:.01px;text-overflow:'';padding:.06rem 1.4rem .06rem .4rem;font-size:12px;font-weight:400;height:1.313rem;letter-spacing:0;color:hsla(0,0%,27%,1);text-shadow:0 1px hsla(0,100%,100%,1);border-radius:4px;background-color:hsla(165,8%,91%,1);box-shadow:inset 0 1px hsla(0,100%,100%,1);border:1px solid hsla(168,8%,65%,1);background-image:url('img/dropdown.svg');background-repeat:no-repeat;background-position:center right;min-width:3.4rem}.topcoat-select:hover{background-color:hsla(180,7%,94%,1)}.topcoat-select:active{background-color:hsla(180,5%,83%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.1)}.topcoat-select:focus{border:1px solid hsla(227,100%,50%,1);box-shadow:0 0 0 2px hsla(208,82%,69%,1);outline:0}.dark .topcoat-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1)}.dark .topcoat-select:hover{background-color:hsla(200,2%,39%,1)}.dark .topcoat-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}@media screen and (max-width:650px){.topcoat-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1);padding:.7rem 1.4rem .7rem 1rem;font-size:16px;height:3rem;letter-spacing:1px;border-radius:6px}.topcoat-select:hover{background-color:hsla(200,2%,39%,1)}.topcoat-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}}
15+
.topdoc-select{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.topdoc-select{vertical-align:top;outline:0}.topdoc-select{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topdoc-select{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topdoc-select{position:relative;display:inline-block;vertical-align:top}.topdoc-select:disabled{opacity:.3;cursor:default;pointer-events:none}.topdoc-select{-moz-appearance:none;-webkit-appearance:none}.topdoc-select::-ms-expand{display:none}.topdoc-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;appearance:button;text-indent:.01px;text-overflow:'';padding:.06rem 1.4rem .06rem .4rem;font-size:12px;font-weight:400;height:1.313rem;letter-spacing:0;color:hsla(0,0%,27%,1);text-shadow:0 1px hsla(0,100%,100%,1);border-radius:4px;background-color:hsla(165,8%,91%,1);box-shadow:inset 0 1px hsla(0,100%,100%,1);border:1px solid hsla(168,8%,65%,1);background-image:url('img/dropdown.svg');background-repeat:no-repeat;background-position:center right;min-width:3.4rem}.topdoc-select:hover{background-color:hsla(180,7%,94%,1)}.topdoc-select:active{background-color:hsla(180,5%,83%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.1)}.topdoc-select:focus{border:1px solid hsla(227,100%,50%,1);box-shadow:0 0 0 2px hsla(208,82%,69%,1);outline:0}.dark .topdoc-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1)}.dark .topdoc-select:hover{background-color:hsla(200,2%,39%,1)}.dark .topdoc-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}@media screen and (max-width:650px){.topdoc-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1);padding:.7rem 1.4rem .7rem 1rem;font-size:16px;height:3rem;letter-spacing:1px;border-radius:6px}.topdoc-select:hover{background-color:hsla(200,2%,39%,1)}.topdoc-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}}
1616
- if(project.debug)
1717
link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource)
1818
- else
@@ -36,7 +36,7 @@ html
3636
- else
3737
li: a(href=siteNavItem.url)=siteNavItem.text
3838
div.combo
39-
select.topcoat-select
39+
select.topdoc-select
4040
- each item in nav
4141
- if(item.url == document.url)
4242
option(value=item.url, selected="selected")=item.title
@@ -90,4 +90,4 @@ html
9090
//- h3 CSS
9191
//- pre.css
9292
//- code(data-language="css")=component.css
93-
footer
93+
footer

0 commit comments

Comments
 (0)
⚡