summaryrefslogtreecommitdiff
path: root/www/app/components/main_panel/main_panel.less
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2016-09-05 17:34:11 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-06 13:55:16 -0400
commit65c2c18653feb5f6485710e9656b19e368bb2826 (patch)
treea279d6f4eb502b30606870cd34af2896eef7321d /www/app/components/main_panel/main_panel.less
parentb047beb3e50a541564d2ab6ff17491608a630101 (diff)
[feature] webkit support: get the js and css working in older webkit engines
Diffstat (limited to 'www/app/components/main_panel/main_panel.less')
-rw-r--r--www/app/components/main_panel/main_panel.less60
1 files changed, 32 insertions, 28 deletions
diff --git a/www/app/components/main_panel/main_panel.less b/www/app/components/main_panel/main_panel.less
index 3172bba..4e0ecb0 100644
--- a/www/app/components/main_panel/main_panel.less
+++ b/www/app/components/main_panel/main_panel.less
@@ -1,5 +1,6 @@
// The space around account entries:
@accounts-padding: 8px;
+@accounts-corner: 6px;
@accounts-width: 200px;
//
@@ -10,26 +11,26 @@
position: absolute;
height: 100%;
width: 100%;
- display: flex;
- flex-direction: row;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
> .body {
- flex: 1 1 auto;
+ -webkit-flex: 1 1 auto;
overflow: auto;
}
.accounts {
- flex: 0 0 auto;
+ -webkit-flex: 0 0 auto;
overflow-y: auto;
overflow-x: hidden;
- display: flex;
- flex-direction: column;
+ display: -webkit-flex;
+ -webkit-flex-direction: column;
ul {
- flex: 1 1 1000px;
+ -webkit-flex: 1 1 1000px;
}
.btn-toolbar {
- flex: 0 0 auto;
+ -webkit-flex: 0 0 auto;
}
}
@@ -40,6 +41,7 @@
// Style
//
+
.main-panel > .body {
padding: 20px;
}
@@ -64,8 +66,8 @@
padding: 15px;
background-color: #444;
margin-bottom: @accounts-padding;
- border-top-left-radius: @accounts-padding;
- border-bottom-left-radius: @accounts-padding;
+ border-top-left-radius: @accounts-corner - 1;
+ border-bottom-left-radius: @accounts-corner - 1;
z-index: 100;
}
@@ -98,8 +100,8 @@
.main-panel .accounts li.active span.arc {
display: block;
- height: @accounts-padding;
- width: @accounts-padding;
+ height: @accounts-corner;
+ width: @accounts-corner;
background-color: white;
position: absolute;
right: 0;
@@ -107,11 +109,11 @@
.main-panel .accounts li.active span.arc.top {
top: 0;
- margin-top: -@accounts-padding;
+ margin-top: -@accounts-corner;
}
.main-panel .accounts li.active span.arc.bottom {
bottom: 0;
- margin-bottom: -@accounts-padding;
+ margin-bottom: -@accounts-corner;
}
.main-panel .accounts li.active span.arc:after {
display: block;
@@ -119,23 +121,23 @@
border-radius: 100%;
height: 0px;
width: 0px;
- margin-left: -@accounts-padding;
+ margin-left: -@accounts-corner;
}
.main-panel .accounts li.active span.arc.top:after {
- border: @accounts-padding solid transparent;
- border-right: @accounts-padding solid #333;
- margin-top: -@accounts-padding;
+ border: @accounts-corner solid transparent;
+ border-right: @accounts-corner solid #333;
+ margin-top: -@accounts-corner;
+ -webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.main-panel .accounts li.active span.arc.bottom:after {
- border: @accounts-padding solid #333;
+ border: @accounts-corner solid #333;
}
.main-panel .accounts .btn.expander {
margin-right: @accounts-padding;
}
-
//
// SECTIONS
//
@@ -147,22 +149,23 @@
// service sections layout
.main-panel .service-section {
- display: flex;
- flex-direction: row;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
> .icon {
- flex: 0 0 auto;
+ -webkit-flex: 0 0 auto;
}
> .body {
- flex: 1 1 auto;
+ -webkit-flex: 1 1 auto;
}
> .buttons {
- flex: 0 0 auto;
+ -webkit-flex: 0 0 auto;
}
> .status {
- flex: 0 0 auto;
- display: flex;
- align-items: center;
+ -webkit-flex: 0 0 auto;
+ display: -webkit-flex;
+ -webkit-align-items: center;
}
+
}
.main-panel .service-section div {
@@ -175,6 +178,7 @@
background: #f6f6f6;
border-radius: 4px;
padding: 10px;
+ margin-bottom: 10px;
&.wide-margin {
padding: 20px 20px 20px 10px; // arbitrary, looks nice
}