summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/leap.scss
diff options
context:
space:
mode:
authorAzul <azul@leap.se>2013-10-15 14:31:52 +0200
committerAzul <azul@leap.se>2013-10-15 15:11:53 +0200
commit8e5aa5093ab6e67db4f603a44bb7027245b91a21 (patch)
treeba2de17a08c11619a74a0be6cf4c3939a2b9f223 /app/assets/stylesheets/leap.scss
parent0acbf6a158f149c1f4273bde0cfca47547e080f8 (diff)
detect os in browser and show proper download link
We add a class to the html element based on the detected os and use that to pick which download link should be visible. If we detect an os that is not supported we display a deactivated download link instead with all alternatives.
Diffstat (limited to 'app/assets/stylesheets/leap.scss')
-rw-r--r--app/assets/stylesheets/leap.scss85
1 files changed, 79 insertions, 6 deletions
diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss
index b382773..30f7741 100644
--- a/app/assets/stylesheets/leap.scss
+++ b/app/assets/stylesheets/leap.scss
@@ -43,25 +43,95 @@
}
//
+// OS specific
+//
+
+.os-android {
+ display: none !important;
+}
+
+html.android .os-android {
+ display: inherit !important;
+}
+
+.os-linux32 {
+ display: none !important;
+}
+
+html.linux .os-linux32 {
+ display: inherit !important;
+}
+
+.os-linux64 {
+ display: none !important;
+}
+
+html.linux64 .os-linux64 {
+ display: inherit !important;
+}
+
+.os-windows {
+ display: none !important;
+}
+
+html.windows .os-windows {
+ display: inherit !important;
+}
+
+.os-mac {
+ display: none !important;
+}
+
+html.mac .os-mac {
+ display: inherit !important;
+}
+
+.os-other {
+ display: none !important;
+}
+
+html.oldmac, html.oldwin, html.ios, html.fxos, html.other {
+ .os-other {
+ display: inherit !important;
+ }
+}
+
+//
// ICONS
//
-[class^="big-icon-"],
-[class*=" big-icon-"] {
+[class*="-icon-"] {
display: inline-block;
- width: 32px;
- height: 32px;
@include ie7-restore-right-whitespace();
- line-height: 32px;
vertical-align: middle;
background-repeat: no-repeat;
margin-top: 1px;
}
+[class^="big-icon-"],
+[class*=" big-icon-"] {
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+}
+
+[class^="huge-icon-"],
+[class*=" huge-icon-"] {
+ width: 128px;
+ height: 128px;
+ line-height: 128px;
+}
+
+
.big-icon-arrow-down {
background-image: url(/leap-img/32/arrow-down.png)
}
+.huge-icon-mask {
+ height: 64px;
+ background-image: url(/leap-img/128/mask.png)
+}
+
//
// TYPOGRAPHY
//
@@ -152,6 +222,9 @@ input, textarea {
.download {
a.btn {
width: 14em;
+ small {
+ font-weight: normal;
+ }
}
}
a.btn {
@@ -191,4 +264,4 @@ input, textarea {
.overview li {
padding: 6px 0;
-} \ No newline at end of file
+}