مراية لـ
https://github.com/postalserver/postal.git
تم المزامنة 2026-04-23 06:49:01 +00:00
initial commit from appmail
هذا الالتزام موجود في:
Adam Cooke
42
app/assets/stylesheets/application/application.scss
Normal file
42
app/assets/stylesheets/application/application.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
@import 'global/reset';
|
||||
@import 'global/variables';
|
||||
@import 'global/mixins';
|
||||
@import 'global/fonts';
|
||||
|
||||
@import 'vendor/*';
|
||||
@import 'elements/*';
|
||||
@import 'components/*';
|
||||
@import 'global/utility';
|
||||
|
||||
html.main {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size:14px;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
background:$backgroundGrey;
|
||||
body {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
}
|
||||
|
||||
html.subPage {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size:14px;
|
||||
background:$backgroundGrey;
|
||||
body {
|
||||
padding-top:100px;
|
||||
padding-bottom:100px;
|
||||
}
|
||||
.subPage__logo {
|
||||
margin-bottom:40px;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
|
||||
.turbolinks-progress-bar {
|
||||
background-color: $darkBlue;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.adminStats {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.adminStats__stat {
|
||||
flex:1 1 auto;
|
||||
text-align: center;
|
||||
dt {
|
||||
font-weight:300;
|
||||
color:#999;
|
||||
}
|
||||
dd {
|
||||
font-size:26px;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.buttonSet {
|
||||
.button {
|
||||
margin-right:7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.buttonSet--center {
|
||||
.button {
|
||||
margin:0 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.checkboxList {
|
||||
background:#fff;
|
||||
border:1px solid #e4e8ef;
|
||||
font:inherit;
|
||||
width:100%;
|
||||
color:$darkBlue;
|
||||
font-weight:600;
|
||||
appearance:none;
|
||||
border-radius:4px;
|
||||
|
||||
}
|
||||
|
||||
.checkboxList__item {
|
||||
padding:8px 10px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.checkboxList__item + .checkboxList__item{
|
||||
border-top:1px solid #e4e8ef;
|
||||
}
|
||||
|
||||
.checkboxList__checkbox {
|
||||
margin-right:15px;
|
||||
}
|
||||
|
||||
.checkboxList__actualLabel {
|
||||
color:$darkBlue;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
|
||||
.checkBoxList__text {
|
||||
font-size:12px;
|
||||
line-height:1.5;
|
||||
color:$subBlue;
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.checkboxList__devEvent {
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
font-size:13px;
|
||||
font-weight:bold;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.credentialList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.credentialList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.credentialList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.credentialList__item + .credentialList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.credentialList__link {
|
||||
padding:15px;
|
||||
display:flex;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.credentialList__properties {
|
||||
flex: 1 1 auto;
|
||||
min-width:1px;
|
||||
}
|
||||
|
||||
.credentialList__name {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:10px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
line-height:1.2;
|
||||
.label {
|
||||
vertical-align:2px;
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
|
||||
.credentialList__key {
|
||||
font-size:12px;
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.credentialList__type {
|
||||
margin-right:10px;
|
||||
width:40px;
|
||||
}
|
||||
|
||||
.credentialList__usedAt {
|
||||
flex: 0 1 auto;
|
||||
max-width:150px;
|
||||
text-align:right;
|
||||
margin-left:25px;
|
||||
font-size:12px;
|
||||
line-height:1.4;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.credentialList__usedAt--active {
|
||||
color:$green;
|
||||
.credentialList__usedAtTitle {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.credentialList__usedAt--quiet {
|
||||
color:#bac647;
|
||||
.credentialList__usedAtTitle {
|
||||
background-color:#bac647;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.credentialList__usedAt--dormant {
|
||||
color:#c7ad46;
|
||||
.credentialList__usedAtTitle {
|
||||
background-color:#c7ad46;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.credentialList__usedAt--inactive {
|
||||
color:#d05026;
|
||||
.credentialList__usedAtTitle {
|
||||
background-color:#d05026;
|
||||
}
|
||||
}
|
||||
|
||||
.credentialList__usedAtTitle {
|
||||
margin-bottom:3px;
|
||||
background-color:#999;
|
||||
color:#fff;
|
||||
display:inline-block;
|
||||
padding:1px 4px;
|
||||
font-size:10px;
|
||||
border-radius:3px;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.dangerZone {
|
||||
border:3px dashed $red;
|
||||
border-radius:4px;
|
||||
padding:25px;
|
||||
color:$red;
|
||||
background:lighten($red, 42%);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
.dataTable {
|
||||
width:100%;
|
||||
border:1px solid #ddd;
|
||||
font-size:14px;
|
||||
box-shadow:0 0 5px rgba(0,0,0,0.3);
|
||||
|
||||
}
|
||||
|
||||
.dataTable tr td {
|
||||
border-left:1px solid #ddd;
|
||||
padding:8px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.dataTable tr th {
|
||||
text-align:left;
|
||||
padding:8px;
|
||||
background-color:#fffdf4;
|
||||
font-weight:600;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
.dataTable thead td {
|
||||
font-weight:600;
|
||||
border-left:0 !important;
|
||||
background:#fffdf4;
|
||||
padding:8px 9px;
|
||||
border-bottom:2px solid #222;
|
||||
}
|
||||
|
||||
.dataTable tbody tr:nth-child(even) td {
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
.dataTable tbody tr:hover td {
|
||||
background:#ededed;
|
||||
}
|
||||
|
||||
.dataTable__centerCell {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.dataTable__rightCell {
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.dataTable__empty {
|
||||
padding:40px 0 !important;
|
||||
text-align:center;
|
||||
color:#999;
|
||||
font-style:italic;
|
||||
font-size:12px;
|
||||
&:hover {
|
||||
background:#fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTable__inputCell {
|
||||
padding:0 !important;
|
||||
input {
|
||||
width:100%;
|
||||
padding:8px;
|
||||
border:0;
|
||||
font:inherit;
|
||||
background:transparent;
|
||||
font-weight:bold;
|
||||
color:#fb8424;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dataTable__redRow {
|
||||
td {
|
||||
background-color:#fff0f1 !important;
|
||||
color:#cd2f3b !important;
|
||||
.u-link { color:#cd2f3b;}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.deliveryList {
|
||||
color:$darkBlue;
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.deliveryList__item {
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
}
|
||||
.deliveryList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.deliveryList__item + .deliveryList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.deliveryList__top {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
.deliveryList__time {
|
||||
}
|
||||
|
||||
.deliveryList__status {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.deliveryList__secure {
|
||||
height:12px;
|
||||
margin-right:7px;
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
.deliveryList__errorCode {
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.deliveryList__error {
|
||||
margin-top:5px;
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.deliveryList__error--output {
|
||||
background:$subBlue;
|
||||
color:#fff;
|
||||
font-size:10px;
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
padding:10px;
|
||||
border-radius:4px;
|
||||
margin-top:8px;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
.deliveryList__error--output-ref {
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.deliveryList__item--header {
|
||||
p + p {
|
||||
margin-top:8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.deliveryList__techLink {
|
||||
display:inline-block;
|
||||
font-size:10px;
|
||||
color:$subBlue;
|
||||
margin-top:8px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.deliveryList-removeLink {
|
||||
text-align:right;
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
margin-top:15px;
|
||||
}
|
||||
108
app/assets/stylesheets/application/components/_domain_list.scss
Normal file
108
app/assets/stylesheets/application/components/_domain_list.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
.domainList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.domainList__item {
|
||||
display:block;
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.domainList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.domainList__item + .domainList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.domainList__details {
|
||||
flex: 1 1 auto;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
.domainList__properties {
|
||||
text-align:right;
|
||||
flex:0 0 auto;
|
||||
margin-left:25px;
|
||||
}
|
||||
|
||||
.domainList__name {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:6px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
span.label {
|
||||
vertical-align:2px;
|
||||
}
|
||||
}
|
||||
|
||||
.domainList__verificationTime {
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.domainList__links {
|
||||
margin-top:12px;
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
font-size:12px;
|
||||
text-decoration: underline;
|
||||
a {
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.domainList__delete {
|
||||
color:$red;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.domainList__verificationLink {
|
||||
background:$blue;
|
||||
color:#fff;
|
||||
padding:1px 7px;
|
||||
border-radius:4px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.domainList__checks {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.domainList__check {
|
||||
margin-right:15px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.domainList__check--ok {
|
||||
background:image-url('icons/tick-green.svg') no-repeat 0 3px / 12px;
|
||||
padding-left:15px;
|
||||
color:$green;
|
||||
}
|
||||
|
||||
.domainList__check--neutral {
|
||||
background:image-url('icons/tick-grey.svg') no-repeat 0 3px / 12px;
|
||||
padding-left:15px;
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
.domainList__check--neutral-cross {
|
||||
background:image-url('icons/cross-grey.svg') no-repeat 0 3px / 9px;
|
||||
padding-left:12px;
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
|
||||
.domainList__check--warning {
|
||||
background:image-url('icons/cross-orange.svg') no-repeat 0 3px / 9px;
|
||||
padding-left:12px;
|
||||
color:$orange;
|
||||
}
|
||||
|
||||
.domainList__check a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.endpointList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.endpointList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.endpointList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.endpointList__item + .endpointList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.endpointList__link {
|
||||
padding:15px;
|
||||
display:block;
|
||||
display:flex;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.endpointList__main {
|
||||
width:60%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
||||
.endpointList__details {
|
||||
flex: 1 1 auto;
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.endpointList__name {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.endpointList__url {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.endpointList__details {
|
||||
line-height:1.5;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.errorExplanation {
|
||||
border:1px solid $orange;
|
||||
margin-bottom:25px;
|
||||
color:$orange;
|
||||
padding:15px;
|
||||
box-shadow:0 0 10px lighten($red, 30%);
|
||||
background:image-url('animals/fox.svg') #fff no-repeat 15px 15px / 50px;
|
||||
padding-left:75px;
|
||||
border-radius:4px;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.errorExplanation h2 {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.errorExplanation p {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.errorExplanation ul li {
|
||||
list-style:disc;
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
html.subPage {
|
||||
.errorExplanation {
|
||||
background:none;
|
||||
padding-left:15px;
|
||||
line-height:1.3;
|
||||
}
|
||||
}
|
||||
128
app/assets/stylesheets/application/components/_field_set.scss
Normal file
128
app/assets/stylesheets/application/components/_field_set.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
.fieldSet {
|
||||
|
||||
}
|
||||
|
||||
.fieldSet__field {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.fieldSet__field + .fieldSet__field {
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.fieldSet__label {
|
||||
display:block;
|
||||
font-weight:600;
|
||||
text-transform: uppercase;
|
||||
font-size:12px;
|
||||
color:$darkBlue;
|
||||
margin-top:11px;
|
||||
width:20%;
|
||||
}
|
||||
|
||||
.fieldSet--wide .fieldSet__label {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.fieldSet__input {
|
||||
flex: 0 0 auto;
|
||||
width:80%;
|
||||
}
|
||||
|
||||
.fieldSet--wide .fieldSet__input {
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.fieldSet__text {
|
||||
font-size:12px;
|
||||
line-height:1.5;
|
||||
color:$subBlue;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.fieldSetSubmit {
|
||||
margin-left:20%;
|
||||
margin-top:40px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.fieldSetSubmit--wide {
|
||||
margin-left:40%;
|
||||
}
|
||||
|
||||
.fieldSetSubmit__delete {
|
||||
flex: 1 0 auto;
|
||||
text-align:right;
|
||||
.button {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldSet__title {
|
||||
margin-top:40px;
|
||||
font-weight:600;
|
||||
font-size:16px;
|
||||
margin-left:20%;
|
||||
color:$blue;
|
||||
border-bottom:2px solid #e4e8ef;
|
||||
padding-bottom:5px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.fieldSet__title--noMargin {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.fieldSet__title--withSubText {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.fieldSet__titleSubText {
|
||||
margin-left:20%;
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
line-height:1.5;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.fieldSet--compact {
|
||||
.fieldSet__field {
|
||||
display:block;
|
||||
}
|
||||
.fieldSet__field + .fieldSet__field {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.fieldSet__label {
|
||||
width:100%;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.fieldSet__input {
|
||||
width:100%;
|
||||
}
|
||||
.fieldSet__fieldPair {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.fieldSet__field {
|
||||
width:48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fieldSet__inputPair {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.input + .input {
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldSet__checkboxListAfter {
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.fieldSet__selectList {
|
||||
select + select {
|
||||
margin-top:6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
html.main .flashMessage {
|
||||
position:fixed;
|
||||
background:$red;
|
||||
z-index:5000;
|
||||
left:25px;
|
||||
top:25px;
|
||||
width:300px;
|
||||
color:#fff;
|
||||
padding:15px;
|
||||
border-radius:4px;
|
||||
font-size:16px;
|
||||
box-shadow:0 0 15px rgba(0,0,0,0.8);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
html.main .flashMessage--notice {
|
||||
background:$green;
|
||||
}
|
||||
|
||||
html.subPage .flashMessage {
|
||||
background:$red;
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
padding:15px;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
html.subPage .flashMessage--notice {
|
||||
background:$green;
|
||||
}
|
||||
65
app/assets/stylesheets/application/components/_grid.scss
Normal file
65
app/assets/stylesheets/application/components/_grid.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.row {
|
||||
clear:both;
|
||||
margin-left:-20px;
|
||||
margin-right:-20px;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.row--noPadding {
|
||||
margin-left:0;
|
||||
margin-right:0;
|
||||
.col {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
float:left;
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
}
|
||||
|
||||
.col--1 { width:5%; }
|
||||
.col--2 { width:10%; }
|
||||
.col--3 { width:15%; }
|
||||
.col--4 { width:20%; }
|
||||
.col--5 { width:25%; }
|
||||
.col--6 { width:30%; }
|
||||
.col--7 { width:35%; }
|
||||
.col--8 { width:40%; }
|
||||
.col--9 { width:45%; }
|
||||
.col--10 { width:50%; }
|
||||
.col--11 { width:55%; }
|
||||
.col--12 { width:60%; }
|
||||
.col--13 { width:65%; }
|
||||
.col--14 { width:70%; }
|
||||
.col--15 { width:75%; }
|
||||
.col--16 { width:80%; }
|
||||
.col--17 { width:85%; }
|
||||
.col--18 { width:90%; }
|
||||
.col--19 { width:95%; }
|
||||
|
||||
.row--2col {
|
||||
margin-left:0;
|
||||
margin-right:0;
|
||||
.col:first-child {
|
||||
padding-left:0;
|
||||
padding-right:10px;
|
||||
}
|
||||
.col:last-child {
|
||||
padding-left:10px;
|
||||
padding-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.col--collapse {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.headersList {
|
||||
|
||||
}
|
||||
|
||||
.headersList__item {
|
||||
display:flex;
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
font-size:12px;
|
||||
justify-content:space-between;
|
||||
dt {
|
||||
color:$blue;
|
||||
width:30%;
|
||||
text-align:right;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
width:68%;
|
||||
word-wrap:break-word;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.headersList__item + .headersList__item {
|
||||
margin-top:15px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.inlineError {
|
||||
background:$red;
|
||||
color:#fff;
|
||||
padding:15px;
|
||||
border-radius:4px;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.invoiceList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.invoiceList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.invoiceList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.invoiceList__item + .invoiceList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.invoiceList__link {
|
||||
padding:15px;
|
||||
display:flex;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.invoiceList__number {
|
||||
width:70px;
|
||||
flex: 0 0 auto;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.invoiceList__date {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.invoiceList__total {
|
||||
width:100px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.invoiceList__status {
|
||||
width:50px;
|
||||
text-align: right;
|
||||
flex:0 0 auto;
|
||||
}
|
||||
48
app/assets/stylesheets/application/components/_ip_list.scss
Normal file
48
app/assets/stylesheets/application/components/_ip_list.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.ipList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.ipList__item {
|
||||
display:block;
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
justify-content:space-between;
|
||||
}
|
||||
.ipList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.ipList__item + .ipList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.ipList__name {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.ipList__address {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ipList__address + .ipList__address {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.ipList__ipv4 {
|
||||
width:120px;
|
||||
}
|
||||
|
||||
.ipList__ipv6 {
|
||||
width:200px;
|
||||
}
|
||||
|
||||
.ipList__address--header {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
border-bottom:1px solid #ccc;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.ipPoolRuleList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.ipPoolRuleList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.ipPoolRuleList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.ipPoolRuleList__item + .ipPoolRuleList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.ipPoolRuleList__link {
|
||||
padding:15px;
|
||||
display:block;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ipPoolRuleList__condition {
|
||||
display:flex;
|
||||
dt {
|
||||
width:180px;
|
||||
color:#999;
|
||||
padding-top:1px;
|
||||
}
|
||||
dd {
|
||||
ul li {
|
||||
line-height:1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ipPoolRuleList__condition + .ipPoolRuleList__condition {
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.ipPoolRuleListDefault {
|
||||
text-align:center;
|
||||
margin-top:25px;
|
||||
color:#999;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.largeList {
|
||||
font-size:16px;
|
||||
color:$darkBlue;
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.largeList__item {
|
||||
display:block;
|
||||
background:#fff;
|
||||
}
|
||||
.largeList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.largeList__item + .largeList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
|
||||
.largeList__item.is-highlighted {
|
||||
background:$blue;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.largeList__link {
|
||||
display:block;
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
.largeList__link:hover {
|
||||
background:$blue;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.largeList__link:active {
|
||||
background:darken($blue, 5%);
|
||||
}
|
||||
|
||||
.largeList__subText {
|
||||
color:$subBlue;
|
||||
font-size:13px;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.largeList__rightLabel {
|
||||
float:right;
|
||||
line-height:0.8;
|
||||
}
|
||||
37
app/assets/stylesheets/application/components/_limit.scss
Normal file
37
app/assets/stylesheets/application/components/_limit.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.limits {
|
||||
font-size:16px;
|
||||
color:$darkBlue;
|
||||
border-radius:4px;
|
||||
background:#fff;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.limits__limit {
|
||||
flex: 1 1 auto;
|
||||
width:50%;
|
||||
padding:15px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.limits__limit + .limits__limit {
|
||||
border-left:1px solid #efefef;
|
||||
}
|
||||
|
||||
.limits__title {
|
||||
font-size:14px;
|
||||
margin-bottom:5px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.limits__value {
|
||||
font-size:32px;
|
||||
font-weight:900;
|
||||
color:$blue;
|
||||
}
|
||||
|
||||
.limits__frequency {
|
||||
font-size:14px;
|
||||
color:#999
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.loginForm {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.loginForm__input {
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.loginForm__submit {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
|
||||
.loginForm__links {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
text-decoration: underline;
|
||||
line-height:1.7;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.mailGraph {
|
||||
}
|
||||
|
||||
.mailGraph__startTime {
|
||||
|
||||
}
|
||||
|
||||
.mailGraph__graph {
|
||||
min-height:230px;
|
||||
margin-bottom:4px;
|
||||
.ct-series-a .ct-line { stroke:$blue;}
|
||||
.ct-series-a .ct-area { fill:$blue; fill-opacity:0.2;}
|
||||
.ct-series-b .ct-line { stroke:$turquoise;}
|
||||
.ct-series-b .ct-area { fill:$turquoise;fill-opacity:0.2;}
|
||||
|
||||
.ct-point { stroke-width: 0; }
|
||||
.ct-line { stroke-width:1px; }
|
||||
.ct-area { fill-opacity: 0.4; }
|
||||
}
|
||||
|
||||
|
||||
.mailGraph__empty {
|
||||
margin:100px 0;
|
||||
text-align:center;
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
.mailGraph__key {
|
||||
font-size:12px;
|
||||
margin-bottom:15px;
|
||||
float:right;
|
||||
li {
|
||||
float:left;
|
||||
margin-left:10px;
|
||||
color:$turquoise;
|
||||
}
|
||||
li:before {
|
||||
display:block;
|
||||
float:left;
|
||||
width:10px;
|
||||
content: " ";
|
||||
margin-top:3px;
|
||||
height:10px;
|
||||
border:1px solid $turquoise;
|
||||
background:lighten($turquoise, 20%);
|
||||
margin-right:6px;
|
||||
}
|
||||
|
||||
li.mailGraph__key--out {
|
||||
color:$blue;
|
||||
&:before {
|
||||
border-color:$blue ;
|
||||
background:lighten($blue, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.mailGraph__labels {
|
||||
display:flex;
|
||||
margin-left:40px;
|
||||
justify-content:space-between;
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.messageActivity {
|
||||
|
||||
}
|
||||
|
||||
.messageActivity__event {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.messageActivity__event + .messageActivity__event {
|
||||
border-top:1px solid #ddd;
|
||||
padding-top:15px;
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.messageActivity__timestamp {
|
||||
width:170px;
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.messageActivity__details {
|
||||
background:image-url('icons/conveyor.svg') no-repeat 0 2px / 24px;
|
||||
padding-left:35px;
|
||||
}
|
||||
|
||||
.messageActivity--detailsDelivery {
|
||||
background-image:image-url('icons/truck.svg');
|
||||
}
|
||||
|
||||
|
||||
.messageActivity--detailsClick {
|
||||
background:image-url('icons/mouse.svg') no-repeat 5px 2px / 12px;
|
||||
}
|
||||
|
||||
.messageActivity--detailsLoad {
|
||||
background-image:image-url('icons/eye.svg');
|
||||
}
|
||||
|
||||
.messageActivity__subject {
|
||||
font-weight:600;
|
||||
font-size:14px;
|
||||
word-break:break-all;
|
||||
}
|
||||
|
||||
.messageActivity__extra {
|
||||
margin-top:4px;
|
||||
color:#999;
|
||||
font-size:12px;
|
||||
line-height:1.4;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.messageHeader {
|
||||
margin:20px 35px;
|
||||
}
|
||||
|
||||
.messageHeader__subject {
|
||||
font-size:18px;
|
||||
font-weight:700;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.messageHeader__status {
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
.messageHeader__timestamp {
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.messageHeader__basicProperties {
|
||||
display:flex;
|
||||
dl {
|
||||
margin-right:25px;
|
||||
display:flex;
|
||||
dt {
|
||||
color:$subBlue;
|
||||
margin-bottom:5px;
|
||||
margin-right:15px;
|
||||
}
|
||||
dd {
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.messageHeader__header {
|
||||
background-size:35px;
|
||||
background-repeat:no-repeat;
|
||||
background-position:right 0;
|
||||
}
|
||||
|
||||
.messageHeader__header--incoming {
|
||||
background-image:image-url('icons/incoming-mail.svg');
|
||||
}
|
||||
|
||||
.messageHeader__header--outgoing {
|
||||
background-image:image-url('icons/outgoing-mail.svg');
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
.messageList {
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.15);
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.messageList__message + .messageList__message {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
|
||||
.messageList__link {
|
||||
display:flex;
|
||||
padding:15px;
|
||||
background:#fff;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.messageList__message:nth-child(even) {
|
||||
.messageList__link {
|
||||
background:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.messageList__details {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
min-width: 1px;
|
||||
background-repeat:no-repeat;
|
||||
background-size:16px;
|
||||
background-position:0 2px;
|
||||
padding-left:25px;
|
||||
}
|
||||
|
||||
.messageList__details--incoming {
|
||||
background-image:image-url('icons/incoming-mail.svg');
|
||||
}
|
||||
|
||||
.messageList__details--outgoing {
|
||||
background-image:image-url('icons/outgoing-mail.svg');
|
||||
}
|
||||
|
||||
|
||||
.messageList__subject {
|
||||
font-weight:600;
|
||||
margin-bottom:7px;
|
||||
line-height:1.4;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.messageList__addresses {
|
||||
display:flex;
|
||||
line-height:1.4;
|
||||
font-size:12px;
|
||||
dt {
|
||||
font-weight:600;
|
||||
}
|
||||
dd {
|
||||
margin-left:15px;
|
||||
margin-right:25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.messageList__meta {
|
||||
flex: 0 0 auto;
|
||||
margin-left:15px;
|
||||
justify-self: flex-end;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.messageList__timestamp {
|
||||
color:#999;
|
||||
font-size:12px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.messagePropertiesPage {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.messagePropertiesPage__left {
|
||||
width:45%;
|
||||
}
|
||||
|
||||
.messagePropertiesPage__right {
|
||||
border-left:3px solid #eee;
|
||||
padding-left:35px;
|
||||
width:52%;
|
||||
}
|
||||
|
||||
.messagePropertiesPage__property {
|
||||
margin-bottom:25px;
|
||||
min-width:1px;
|
||||
dt {
|
||||
color:$subBlue;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
dd {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
text-overflow:ellipsis;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.messagePropertiesPage__property--locked {
|
||||
background:image-url('icons/lock.svg') no-repeat 0 1px / 14px;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
.messagePropertiesPage__propertyPair {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
dl {
|
||||
width:47%;
|
||||
}
|
||||
}
|
||||
|
||||
.messagePropertiesPage__title {
|
||||
font-size:20px;
|
||||
font-weight:700;
|
||||
margin-bottom:25px;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.messageSearch {
|
||||
margin-bottom:25px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.messageSearch__help {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
right:20px;
|
||||
top:11px;
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.messageSearch__input {
|
||||
width:100%;
|
||||
margin:0;
|
||||
|
||||
border:2px solid #e0e7f3;
|
||||
border-radius:25px;
|
||||
padding:6px 13px;
|
||||
font:inherit;
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
position:relative;
|
||||
color:$darkBlue;
|
||||
background:image-url('icons/search.svg') #fff no-repeat 12px 7px / 19px;
|
||||
padding-left:38px;
|
||||
padding-right:150px;
|
||||
&::placeholder {
|
||||
color:#98a5c0;
|
||||
font-weight:300;
|
||||
}
|
||||
&:focus {
|
||||
border-color:$blue;
|
||||
}
|
||||
&.is-spinning {
|
||||
background-image:image-url('spinner-sub.gif');
|
||||
background-position: 12px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.messageSearch__helpBox {
|
||||
color:$darkBlue;
|
||||
margin-top:25px;
|
||||
border-radius:4px;
|
||||
background:#fffdf1;
|
||||
padding:25px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.messageSearch__left {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.messageSearch__helpBoxTitle {
|
||||
font-size:18px;
|
||||
font-weight:600;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.messageSearch__helpBoxText {
|
||||
line-height:1.5;
|
||||
font-size:14px;
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.messageSearch__right {
|
||||
width:55%;
|
||||
}
|
||||
|
||||
.messageSearch__definition {
|
||||
dt {
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
font-weight:bold;
|
||||
font-size:15px;
|
||||
color:$blue;
|
||||
}
|
||||
dd {
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
code {
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
font-size:12px;
|
||||
color:darken($blue, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageSearch__definition + .messageSearch__definition {
|
||||
margin-top:18px;
|
||||
}
|
||||
14
app/assets/stylesheets/application/components/_multibox.scss
Normal file
14
app/assets/stylesheets/application/components/_multibox.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.multibox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.multibox__input {
|
||||
width:80px;
|
||||
height:70px;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size:38px;
|
||||
text-align:center;
|
||||
}
|
||||
63
app/assets/stylesheets/application/components/_nav_bar.scss
Normal file
63
app/assets/stylesheets/application/components/_nav_bar.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.navBar {
|
||||
background:$veryDarkBlue;
|
||||
padding:10px 35px;
|
||||
color:#fff;
|
||||
ul {
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
|
||||
.navBar--secondary {
|
||||
background:lighten($veryDarkBlue, 44%);
|
||||
.navBar__link.is-active {
|
||||
color:$veryDarkBlue;
|
||||
}
|
||||
}
|
||||
|
||||
.navBar--tertiary {
|
||||
background:#fff;
|
||||
border:1px solid lighten($subBlue, 30%);
|
||||
border-left:0;
|
||||
border-right:0;
|
||||
.navBar__link {
|
||||
color:$subBlue;
|
||||
}
|
||||
.navBar__link.is-active {
|
||||
color:$veryDarkBlue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navBar__item:not(:last-child) {
|
||||
margin-right:35px;
|
||||
}
|
||||
|
||||
.navBar__link.is-active {
|
||||
color:#8abdff;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.navBar__item--end {
|
||||
margin-left:auto;
|
||||
}
|
||||
|
||||
.navBar__link:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.navBar__itemCounter {
|
||||
background:$red;
|
||||
border-radius:4px;
|
||||
padding:2px 2px 1px 2px;
|
||||
line-height:1;
|
||||
font-size:10px;
|
||||
vertical-align:1px;
|
||||
font-weight:300;
|
||||
min-width:20px;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
margin-left:5px;
|
||||
&.is-empty {
|
||||
background-color:$darkBlue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.newMessageType {
|
||||
background-repeat:no-repeat;
|
||||
background-size:20px;
|
||||
background-position:15px 15px;
|
||||
background-color:#4bc9c5;
|
||||
color:#fff;
|
||||
padding:15px;
|
||||
padding-left:46px;
|
||||
border-radius:4px;
|
||||
border:1px solid darken(#4bc9c5, 10%);
|
||||
}
|
||||
|
||||
.newMessageType--outgoing {
|
||||
background-color:#0e69d5;
|
||||
border-color:darken(#0e69d5, 10%);
|
||||
background-image:image-url('icons/outgoing-mail-white.svg');
|
||||
}
|
||||
|
||||
.newMessageType--incoming {
|
||||
background-image:image-url('icons/incoming-mail-white.svg');
|
||||
}
|
||||
114
app/assets/stylesheets/application/components/_no_data.scss
Normal file
114
app/assets/stylesheets/application/components/_no_data.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
.noData {
|
||||
text-align:center;
|
||||
border-radius:4px;
|
||||
padding:30px;
|
||||
padding-top:100px;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.15);
|
||||
background:image-url('animals/panda.svg') #fff no-repeat center 25px / 50px;
|
||||
}
|
||||
|
||||
.noData--clean {
|
||||
box-shadow:none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.noData__title {
|
||||
font-size:22px;
|
||||
margin-bottom:10px;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.noData__text {
|
||||
color:#888;
|
||||
font-size:16px;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.noData__button {
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.noData__postButtonText {
|
||||
margin:auto;
|
||||
margin-top:15px;
|
||||
line-height:1.5;
|
||||
width:70%;
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.noData--fox {
|
||||
background-image:image-url('animals/fox.svg');
|
||||
background-size:65px;
|
||||
}
|
||||
|
||||
.noData--cat {
|
||||
background-image:image-url('animals/cat.svg');
|
||||
background-position:center 15px;
|
||||
background-size:50px;
|
||||
}
|
||||
|
||||
.noData--cat2 {
|
||||
background-image:image-url('animals/cat2.svg');
|
||||
background-size:55px;
|
||||
}
|
||||
|
||||
.noData--cat3 {
|
||||
background-image:image-url('animals/cat3.svg');
|
||||
background-size:48px;
|
||||
}
|
||||
|
||||
.noData--cat4 {
|
||||
background-image:image-url('animals/cat4.svg');
|
||||
background-size:50px;
|
||||
}
|
||||
|
||||
.noData--cock {
|
||||
background-image:image-url('animals/cock.svg');
|
||||
background-size:50px;
|
||||
background-position:center 15px;
|
||||
}
|
||||
|
||||
.noData--deer {
|
||||
background-image:image-url('animals/deer.svg');
|
||||
background-position:center 15px;
|
||||
background-size:65px;
|
||||
}
|
||||
|
||||
.noData--dog {
|
||||
background-image:image-url('animals/dog.svg');
|
||||
}
|
||||
|
||||
.noData--monkey {
|
||||
background-image:image-url('animals/monkey.svg');
|
||||
}
|
||||
|
||||
.noData--owl {
|
||||
background-image:image-url('animals/owl.svg');
|
||||
}
|
||||
|
||||
.noData--penguin {
|
||||
background-image:image-url('animals/penguin.svg');
|
||||
}
|
||||
|
||||
.noData--panda {
|
||||
background-image:image-url('animals/panda.svg');
|
||||
}
|
||||
|
||||
.noData--goat {
|
||||
background-image:image-url('animals/goat.svg');
|
||||
}
|
||||
|
||||
.noData--koala {
|
||||
background-image:image-url('animals/koala.svg');
|
||||
background-size:65px;
|
||||
}
|
||||
|
||||
.noData--wolf {
|
||||
background-image:image-url('animals/wolf.svg');
|
||||
background-size:45px;
|
||||
}
|
||||
|
||||
.noData--lion {
|
||||
background-image:image-url('animals/lion.svg');
|
||||
background-size:45px;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.pageContent {
|
||||
margin:35px;
|
||||
}
|
||||
|
||||
.pageContent__intro {
|
||||
font-size:20px;
|
||||
line-height:30px;
|
||||
font-weight:300;
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.pageContent__title {
|
||||
font-size:20px;
|
||||
margin-bottom:10px;
|
||||
font-weight:700;
|
||||
color:$darkBlue;
|
||||
}
|
||||
|
||||
.pageContent--compact {
|
||||
max-width:600px;
|
||||
margin:60px auto;
|
||||
}
|
||||
|
||||
.pageContent__subTitle {
|
||||
font-size:18px;
|
||||
font-weight:600;
|
||||
border-bottom:1px solid #ddd;
|
||||
padding-bottom:3px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.pageContent__text {
|
||||
line-height:1.5;
|
||||
margin-bottom:15px;
|
||||
.label {
|
||||
vertical-align:1px;
|
||||
margin-right:2px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageContent__pageEntriesInfo {
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.pageContent__definitions {
|
||||
overflow:hidden;
|
||||
dt {
|
||||
width:30%;
|
||||
float:left;
|
||||
color:$subBlue;
|
||||
}
|
||||
dd {
|
||||
margin-left:35%;
|
||||
margin-bottom:15px;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.pageContent__definitionCode {
|
||||
font-size:16px;
|
||||
font-weight:bold;
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
}
|
||||
|
||||
.pageContent__definitionCode + .pageContent__definitionText {
|
||||
margin-top:6px;
|
||||
}
|
||||
|
||||
.pageContent__definitionText {
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.pageContent__list {
|
||||
line-height:1.5;
|
||||
li {
|
||||
list-style:square;
|
||||
margin-left:25px;
|
||||
}
|
||||
li + li {
|
||||
margin-top:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageContent__helpLink {
|
||||
a {
|
||||
background:image-url('icons/help.svg') no-repeat 0 2px / 15px;
|
||||
padding-left:20px;
|
||||
text-decoration:underline;
|
||||
color:$blue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.pageHeader {
|
||||
background:$darkBlue;
|
||||
padding:22px 25px;
|
||||
}
|
||||
|
||||
.pageHeader__title {
|
||||
font-size:26px;
|
||||
font-weight:300;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.pageHeader__titlePrevious {
|
||||
opacity:0.2;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
nav.pagination {
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
margin:25px 0;
|
||||
span.page.current, a {
|
||||
color:$blue;
|
||||
display:inline-block;
|
||||
line-height:1.3;
|
||||
border:1px solid lighten($subBlue, 25%);
|
||||
padding:3px 10px;
|
||||
text-decoration:none;
|
||||
border-radius:4px;
|
||||
background:#fff;
|
||||
margin:0 2px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color:lighten(#ccc, 20%);
|
||||
}
|
||||
|
||||
span.page.current {
|
||||
background:$blue;
|
||||
color:#fff;
|
||||
border-color:darken($blue, 15%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.retentionLimits {
|
||||
}
|
||||
|
||||
.retentionLimits__limit {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retentionLimits__limit + .retentionLimits__limit {
|
||||
margin-top:25px;
|
||||
}
|
||||
|
||||
.retentionLimits__label {
|
||||
width:200px;
|
||||
flex: 0 0 auto;
|
||||
font-weight:bold;
|
||||
margin-right:25px;
|
||||
}
|
||||
|
||||
.retentionLimits__info {
|
||||
border-left:4px solid $blue;
|
||||
padding-left:25px;
|
||||
}
|
||||
|
||||
.retentionLimits__value {
|
||||
color:$blue;
|
||||
font-size:22px;
|
||||
font-weight:700;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.retentionLimits__text {
|
||||
color:$subBlue;
|
||||
font-size:12px;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
.routeList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.routeList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.routeList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.routeList__item + .routeList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.routeList__link {
|
||||
padding:15px;
|
||||
display:block;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.routeList__name {
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:13px;
|
||||
}
|
||||
|
||||
.routeList__details {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
min-width:1px;
|
||||
}
|
||||
|
||||
.routeList__endpoint {
|
||||
flex: 1 1 auto;
|
||||
overflow:hidden;
|
||||
color:#999;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
line-height:1.1;
|
||||
background:image-url('icons/web.svg') no-repeat 0 0 / 12px;
|
||||
padding-left:18px;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.routeList__endpoint--smtp_endpoint {
|
||||
background-image:image-url('icons/email.svg');
|
||||
background-size:12px;
|
||||
background-position:0 1.5px;
|
||||
}
|
||||
|
||||
.routeList__endpoint--address_endpoint {
|
||||
background-image:image-url('icons/email.svg');
|
||||
background-size:12px;
|
||||
background-position:0 1.5px;
|
||||
}
|
||||
|
||||
.routeList__spamMode {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
margin-left:15px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.routeNameInput {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.routeNameInput__at {
|
||||
margin:0 7px;
|
||||
font-size:18px;
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
.routeNameInput__name {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.routeNameInput__domain {
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
.serverHeader {
|
||||
background:$darkBlue;
|
||||
padding:25px;
|
||||
display:flex;
|
||||
color:#fff;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.serverHeader__stripe {
|
||||
right:-35px;
|
||||
margin-top:-5px;
|
||||
background:#636363;
|
||||
font-size:10px;
|
||||
font-weight:600;
|
||||
text-transform: uppercase;
|
||||
text-align:center;
|
||||
width:130px;
|
||||
padding:4px 0;
|
||||
transform:rotate(45deg);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.serverHeader__stripe--live {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.serverHeader__stripe--suspended {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.serverHeader__info {
|
||||
flex: 1 0 auto;
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
.serverHeader__stats {
|
||||
background-color:$veryDarkBlue;
|
||||
width:180px;
|
||||
flex: 0 0 auto;
|
||||
padding:15px;
|
||||
border-radius:4px;
|
||||
a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.serverHeader__usage {
|
||||
background:green;
|
||||
width:320px;
|
||||
padding:15px;
|
||||
margin-left:10px;
|
||||
background-color:$veryDarkBlue;
|
||||
flex: 0 0 auto;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.serverHeader__title {
|
||||
font-size:18px;
|
||||
font-weight:700;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.serverHeader__list {
|
||||
line-height:1.5;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.serverHeader__list--ok {
|
||||
color:$green;
|
||||
}
|
||||
|
||||
.serverHeader__list--warning {
|
||||
color:$orange;
|
||||
}
|
||||
|
||||
.serverHeader__statsList {
|
||||
line-height:1.8;
|
||||
font-size:12px;
|
||||
li {
|
||||
padding-left:22px;
|
||||
font-weight:300;
|
||||
}
|
||||
}
|
||||
|
||||
.serverHeader__stat-held {
|
||||
background:image-url('icons/pause-white.svg') no-repeat 0 4px / 13px;
|
||||
padding-left:22px;
|
||||
}
|
||||
|
||||
.serverHeader__stat-queue {
|
||||
background:image-url('icons/box-white.svg') no-repeat 0 4px / 13px;
|
||||
}
|
||||
|
||||
.serverHeader__stat-size {
|
||||
background:image-url('icons/size-white.svg') no-repeat 0 4px / 13px;
|
||||
}
|
||||
|
||||
.serverHeader__stat-bounces {
|
||||
background:image-url('icons/bats-white.svg') no-repeat 0 4px / 13px;
|
||||
}
|
||||
|
||||
.serverHeader__usageTitle {
|
||||
color:#566576;
|
||||
font-size:12px;
|
||||
font-weight: 600;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.serverHeader__usageLine {
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.serverHeader__usageLine + .serverHeader__usageLine {
|
||||
margin-top:6px;
|
||||
}
|
||||
|
||||
.serverHeader__usageLineLabel {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.serverHeader__usageLineBar {
|
||||
width:100px;
|
||||
line-height:0;
|
||||
}
|
||||
|
||||
.serverHeader__usageLineValue {
|
||||
width:60px;
|
||||
text-align:right;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.serverHeader__usageLineValueLarge {
|
||||
width:300px;
|
||||
text-align:right;
|
||||
color:$subBlue;
|
||||
b {
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
57
app/assets/stylesheets/application/components/_sidebar.scss
Normal file
57
app/assets/stylesheets/application/components/_sidebar.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
.sidebar {
|
||||
width:250px;
|
||||
background:#fff;
|
||||
flex: 0 0 auto;
|
||||
z-index:200;
|
||||
box-shadow:5px 0 8px -2px rgba(0,0,0,0.1);
|
||||
overflow-y: auto;
|
||||
@include scrollbars(6px);
|
||||
}
|
||||
|
||||
.sidebar__search {
|
||||
background:$lightBlue;
|
||||
border-bottom:1px solid #d1dcea;
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
.sidebar__searchInput {
|
||||
width:100%;
|
||||
margin:0;
|
||||
border:1px solid #e0e7f3;
|
||||
border-radius:25px;
|
||||
padding:6px 13px;
|
||||
font:inherit;
|
||||
font-size:12px;
|
||||
font-weight:600;
|
||||
color:$darkBlue;
|
||||
background:image-url('icons/search.svg') #fff no-repeat 10px 7px / 17px;
|
||||
padding-left:33px;
|
||||
&::placeholder {
|
||||
color:#98a5c0;
|
||||
font-weight:300;
|
||||
}
|
||||
&:focus {
|
||||
border-color:$blue;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__placeholder {
|
||||
margin:60px 20px;
|
||||
text-align:center;
|
||||
color:$subBlue;
|
||||
font-size:18px;
|
||||
line-height:1.5;
|
||||
font-weight:300;
|
||||
}
|
||||
|
||||
.sidebar__new {
|
||||
text-align:center;
|
||||
margin-top:15px;
|
||||
margin-bottom:15px;
|
||||
color:#999;
|
||||
font-size:12px;
|
||||
a:hover {
|
||||
color:$green;
|
||||
}
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.sidebarServerList {
|
||||
font-size:12px;
|
||||
color:$darkBlue;
|
||||
}
|
||||
|
||||
.sidebarServerList__item {
|
||||
border-bottom:1px solid #e6ebf0;
|
||||
}
|
||||
|
||||
.sidebarServerList__link {
|
||||
display: block;
|
||||
padding:15px 20px;
|
||||
&:hover {
|
||||
background-color:#f2f5f8;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarServerList__link.is-active {
|
||||
background-color:#f2f5f8;
|
||||
}
|
||||
|
||||
.sidebarServerList__item.is-highlighted .sidebarServerList__link {
|
||||
background-color:#fffedd;
|
||||
}
|
||||
|
||||
.sidebarServerList__mode {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.sidebarServerList__title {
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.sidebarServerList__quantity {
|
||||
color:$subBlue;
|
||||
font-size:11px;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.simplePagination {
|
||||
display:flex;
|
||||
margin:25px 0;
|
||||
justify-content:space-between;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.simplePagination__link {
|
||||
color:$blue;
|
||||
display:inline-block;
|
||||
line-height:1.3;
|
||||
border:1px solid lighten($subBlue, 25%);
|
||||
padding:3px 10px;
|
||||
text-decoration:none;
|
||||
border-radius:4px;
|
||||
background:#fff;
|
||||
margin:0 2px;
|
||||
&:hover {
|
||||
border-color:$blue;
|
||||
}
|
||||
}
|
||||
|
||||
.simplePagination__next,
|
||||
.simplePagination__previous,
|
||||
.simplePagination__current {
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.simplePagination__next {
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.simplePagination__current {
|
||||
text-align:center;
|
||||
color:$subBlue;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.simplePagination__info {
|
||||
font-weight:600;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.siteContent {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.siteContent__main {
|
||||
@include scrollbars(12px);
|
||||
flex: 1 1 auto;
|
||||
z-index:100;
|
||||
overflow-y:scroll;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
137
app/assets/stylesheets/application/components/_site_header.scss
Normal file
137
app/assets/stylesheets/application/components/_site_header.scss
Normal file
@@ -0,0 +1,137 @@
|
||||
.siteHeader {
|
||||
width:100%;
|
||||
background:$blue;
|
||||
flex: 0 0 auto;
|
||||
color:#fff;
|
||||
z-index:1000;
|
||||
border-right:12px solid #efefef;
|
||||
|
||||
.browser-firefox & {
|
||||
border-right: 15px solid #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.siteHeader__inside {
|
||||
display:flex;
|
||||
padding:12px 16px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.siteHeader__remember {
|
||||
background:$veryDarkBlue;
|
||||
position:fixed;
|
||||
top:20px;
|
||||
right:20px;
|
||||
padding:20px;
|
||||
border-radius:4px;
|
||||
color:#fff;
|
||||
z-index:2000;
|
||||
}
|
||||
|
||||
.siteHeader__rememberButtons {
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.siteHeader__rememberText {
|
||||
line-height:1.5;
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.siteHeader__rememberTextTitle {
|
||||
font-weight:600;
|
||||
color:#fff;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.siteHeader__logo {
|
||||
display:block;
|
||||
a {
|
||||
margin:0;
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.siteHeader__version {
|
||||
margin-left:5px;
|
||||
color:#fff;
|
||||
opacity:0.3;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.siteHeader__nav {
|
||||
flex: 1 0 auto;
|
||||
text-align:right;
|
||||
font-size:12px;
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.siteHeader__navItem {
|
||||
margin-left:18px;
|
||||
}
|
||||
|
||||
.sideHeader__navItemLink {
|
||||
text-decoration: underline;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.siteHeader__navLinkWithMenu {
|
||||
background:image-url('icons/drop-arrow-white.svg') no-repeat right 6px / 8px;
|
||||
padding-right:12px;
|
||||
}
|
||||
|
||||
.siteHeader__navItem--user {
|
||||
background:image-url('icons/user-white.svg') no-repeat 0 3px / 8px;
|
||||
padding-left:13px;
|
||||
}
|
||||
|
||||
.siteHeader__navItem--organization {
|
||||
background:image-url('icons/organization-white.svg') no-repeat 0 2px / 12px;
|
||||
padding-left:18px;
|
||||
}
|
||||
|
||||
.siteHeader__subMenu {
|
||||
position:absolute;
|
||||
background:#fff;
|
||||
z-index:1000;
|
||||
color:$darkBlue;
|
||||
text-align:left;
|
||||
box-shadow:0 0 15px rgba(0,0,0,0.2);
|
||||
border-radius:4px;
|
||||
margin-left:-15px;
|
||||
margin-top:-5px;
|
||||
overflow:hidden;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.siteHeader__navItem:hover .siteHeader__subMenu {
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
.siteHeader__subMenuItem + .siteHeader__subMenuItem {
|
||||
border-top:1px solid #e6ebf0;
|
||||
}
|
||||
|
||||
.siteHeader__subMenuItem--header {
|
||||
font-weight:600;
|
||||
padding:5px 15px;
|
||||
background:$lightBlue;
|
||||
color:$blue;
|
||||
}
|
||||
|
||||
.siteHeader__subMenuLink {
|
||||
padding:10px 15px;
|
||||
display:block;
|
||||
&:hover {
|
||||
background-color:#f2f5f8;
|
||||
}
|
||||
}
|
||||
|
||||
.siteHeader__subMenuItem--div {
|
||||
border-top-width:2px !important;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.spamCheckList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.spamCheckList__item {
|
||||
display:block;
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
align-items:center;
|
||||
display:flex;
|
||||
}
|
||||
.spamCheckList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.spamCheckList__item + .spamCheckList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.spamCheckList__score {
|
||||
width:130px;
|
||||
font-size:20px;
|
||||
font-weight:900;
|
||||
text-align:center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.spamCheckList__score--positive {
|
||||
color:$green;
|
||||
}
|
||||
|
||||
.spamCheckList__score--negative {
|
||||
color:$red;
|
||||
}
|
||||
|
||||
.spamCheckList__score--neutral {
|
||||
color:$subBlue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.spamCheckList__details {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.spamCheckList__code {
|
||||
font-family:'Droid Sans Mono';
|
||||
font-size:12px;
|
||||
color:$subBlue;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
.spamCheckList__description {
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.spamCheckList__item--total + .spamCheckList__item{
|
||||
border-top-width:2px;
|
||||
border-top-color:$subBlue;
|
||||
}
|
||||
|
||||
.spamCheckList__details--total {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.starterCreditPack {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
background:image-url('starter_pack.png') #fff no-repeat 25px 20px;
|
||||
background-size:100px;
|
||||
padding:25px 25px 20px 155px;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.starterCreditPack__text {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.starterCreditPack__nextRenew {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
margin-left:5px;
|
||||
vertical-align:-2px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.subPageBox {
|
||||
background:#fff;
|
||||
border-radius:4px;
|
||||
box-shadow:0 0 30px rgba(0,0,0,0.15);
|
||||
width:300px;
|
||||
margin:auto;
|
||||
overflow:hidden;
|
||||
border-top:5px solid $blue;
|
||||
}
|
||||
|
||||
.subPageBox--wide {
|
||||
width:500px;
|
||||
}
|
||||
|
||||
.subPageBox__title {
|
||||
background:$lightBlue;
|
||||
border-bottom:1px solid #d1dcea;
|
||||
padding:20px 25px;
|
||||
color:$blue;
|
||||
font-size:16px;
|
||||
font-weight:600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subPageBox__content {
|
||||
padding:20px 25px;
|
||||
}
|
||||
|
||||
.subPageBox__text {
|
||||
color:$subBlue;
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.suppressionList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.suppressionList__item {
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
display:flex;
|
||||
}
|
||||
.suppressionList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.suppressionList__item + .suppressionList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.suppressionList__left {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.suppressionList__right {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.suppressionList__timestamp {
|
||||
color:#999;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.suppressionList__address {
|
||||
font-weight:600;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
.suppressionList__reason {
|
||||
color:#999;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.suspensionBox {
|
||||
background:#e2383a;
|
||||
border-radius:4px;
|
||||
color:#fff;
|
||||
line-height:1.5;
|
||||
padding:25px;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.suspensionBox__reason {
|
||||
margin-top:5px;
|
||||
font-size:14px;
|
||||
opacity:0.7;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.titleWithLinks {
|
||||
display:flex;
|
||||
color:$darkBlue;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.titleWithLinks__title {
|
||||
flex: 1 1 auto;
|
||||
font-size:23px;
|
||||
|
||||
}
|
||||
|
||||
.titleWithLinks__links {
|
||||
flex: 1 1 auto;
|
||||
display:flex;
|
||||
justify-content: flex-end;
|
||||
li + li {
|
||||
margin-left:25px;
|
||||
}
|
||||
}
|
||||
.titleWithLinks__link {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color:$blue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.userList {
|
||||
border-radius:4px;
|
||||
color:$darkBlue;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.userList__item {
|
||||
display:block;
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
.userList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.userList__item + .userList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.userList__avatar {
|
||||
width:50px;
|
||||
height:50px;
|
||||
border-radius:50%;
|
||||
background:#fff;
|
||||
border:2px solid #efefef;
|
||||
padding:3px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.userList__details {
|
||||
flex: 1 1 auto;
|
||||
margin:0 25px;
|
||||
}
|
||||
|
||||
|
||||
.userList__actions {
|
||||
flex: 0 0 auto;
|
||||
width:180px;
|
||||
font-size:12px;
|
||||
line-height:1.5;
|
||||
color:#999;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.userList__name {
|
||||
font-weight:600;
|
||||
font-size:16px;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
.userList__owner {
|
||||
vertical-align:2px;
|
||||
margin-left:5px;
|
||||
background-color:$orange;
|
||||
}
|
||||
|
||||
.userList__pending {
|
||||
vertical-align:2px;
|
||||
margin-left:5px;
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
.userList__admin {
|
||||
vertical-align:2px;
|
||||
margin-left:5px;
|
||||
background-color:$blue;
|
||||
}
|
||||
|
||||
.userList__revoke {
|
||||
color:$red;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.webhookList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.webhookList__item {
|
||||
background:#fff;
|
||||
padding:15px;
|
||||
}
|
||||
.webhookList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.webhookList__item + .webhookList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.webhookList__top {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
min-width:1px;
|
||||
}
|
||||
|
||||
.webhookList__labels {
|
||||
flex: 0 0 auto;
|
||||
line-height:0;
|
||||
margin-left:10px;
|
||||
.label + .label {
|
||||
margin-left:2px;
|
||||
}
|
||||
}
|
||||
|
||||
.webhookList__name {
|
||||
font-weight:600;
|
||||
flex: 1 1 auto;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.webhookList__bottom {
|
||||
display:flex;
|
||||
margin-top:3px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.webhookList__usageTime {
|
||||
color:#999;
|
||||
line-height:1.4;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.webhookList__links {
|
||||
flex: 0 0 auto;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.webhookList__link {
|
||||
a {
|
||||
color:#999;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.webhookList__link + .webhookList__link {
|
||||
margin-left:12px;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
.webhookRequestList {
|
||||
border-radius:4px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.webhookRequestList__item {
|
||||
background:#fff;
|
||||
}
|
||||
.webhookRequestList__item:nth-child(even) {
|
||||
background:none;
|
||||
}
|
||||
|
||||
.webhookRequestList__item + .webhookRequestList__item {
|
||||
border-top:1px solid lighten(#ccd4e0, 10%);
|
||||
}
|
||||
|
||||
.webhookRequestList__link {
|
||||
display:block;
|
||||
padding:15px;
|
||||
&:hover {
|
||||
background:#f2f5f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.webhookRequestList__top {
|
||||
display:flex;
|
||||
margin-bottom:6px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.webhookRequestList__status {
|
||||
margin-top:-1px;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.webhookRequestList__time {
|
||||
flex: 1 1 auto;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.webhookRequestList__event {
|
||||
flex: 0 0 auto;
|
||||
font-size:11px;
|
||||
border:1px solid $subBlue;
|
||||
color:$subBlue;
|
||||
border-radius:3px;
|
||||
padding:3px 6px;
|
||||
margin-top:-2px;
|
||||
}
|
||||
|
||||
|
||||
.webhookRequestList__url {
|
||||
flex: 1 1 auto;
|
||||
overflow:hidden;
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
line-height:1.4;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
16
app/assets/stylesheets/application/elements/_bar.scss
Normal file
16
app/assets/stylesheets/application/elements/_bar.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.bar {
|
||||
background:$darkBlue;
|
||||
border-radius:10px;
|
||||
display:inline-block;
|
||||
height:5px;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.bar__inner {
|
||||
background:$blue;
|
||||
display:inline-block;
|
||||
border-radius:10px;
|
||||
height:5px;
|
||||
width:50%;
|
||||
}
|
||||
98
app/assets/stylesheets/application/elements/_button.scss
Normal file
98
app/assets/stylesheets/application/elements/_button.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
.button {
|
||||
display:inline-block;
|
||||
font:inherit;
|
||||
border-radius:4px;
|
||||
appearance:none;
|
||||
background:$blue;
|
||||
color:#fff;
|
||||
font-size:14px !important;
|
||||
margin:0;
|
||||
vertical-align:top;
|
||||
padding:6px 15px;
|
||||
border:2px solid transparent;
|
||||
border-bottom:2px solid darken($blue, 20%);
|
||||
&:active {
|
||||
background-color:darken($blue, 15%);
|
||||
}
|
||||
&:focus {
|
||||
border-color:darken($blue, 15%);
|
||||
background-color:lighten($blue, 5%);
|
||||
}
|
||||
&.is-spinning {
|
||||
color:transparent;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center center;
|
||||
background-size:25px;
|
||||
background-image:image-url('button-spinner.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
font-size:12px !important;
|
||||
padding:3px 10px;
|
||||
border-width:1px;
|
||||
}
|
||||
|
||||
.button--positive {
|
||||
background-color:$green;
|
||||
border-bottom-color:darken($green, 15%);
|
||||
&:active {
|
||||
background-color:darken($green, 15%);
|
||||
}
|
||||
&:focus {
|
||||
border-color:darken($green, 15%);
|
||||
background-color:lighten($green, 5%);
|
||||
}
|
||||
&.is-spinning {
|
||||
background-image:image-url('button-spinner-positive.gif');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.button--neutral {
|
||||
background-color:#ccc;
|
||||
border-bottom-color:darken(#ccc, 15%);
|
||||
&:active {
|
||||
background-color:darken(#ccc, 15%);
|
||||
}
|
||||
&:focus {
|
||||
border-color:darken(#ccc, 15%);
|
||||
background-color:lighten(#ccc, 5%);
|
||||
}
|
||||
&.is-spinning {
|
||||
background-image:image-url('button-spinner-neutral.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.button--danger {
|
||||
background-color:$red;
|
||||
border-bottom-color:darken($red, 15%);
|
||||
&:active {
|
||||
background-color:darken($red, 15%);
|
||||
}
|
||||
&:focus {
|
||||
border-color:darken($red, 15%);
|
||||
background-color:lighten($red, 5%);
|
||||
}
|
||||
&.is-spinning {
|
||||
background-image:image-url('button-spinner-danger.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.button--dark {
|
||||
background-color:$darkBlue;
|
||||
border-bottom-color:darken($darkBlue, 15%);
|
||||
&:active {
|
||||
background-color:darken($darkBlue, 15%);
|
||||
}
|
||||
&:focus {
|
||||
border-color:darken($darkBlue, 15%);
|
||||
background-color:lighten($darkBlue, 5%);
|
||||
}
|
||||
&.is-spinning {
|
||||
background-image:image-url('button-spinner-dark.gif');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
11
app/assets/stylesheets/application/elements/_code_block.scss
Normal file
11
app/assets/stylesheets/application/elements/_code_block.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.codeBlock {
|
||||
background:#909db0;
|
||||
color:#fff;
|
||||
padding:25px;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.codeBlock--whitespace {
|
||||
white-space:pre;
|
||||
overflow-x:auto;
|
||||
}
|
||||
70
app/assets/stylesheets/application/elements/_input.scss
Normal file
70
app/assets/stylesheets/application/elements/_input.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.input {
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
background:#fff;
|
||||
border:1px solid #e4e8ef;
|
||||
padding:8px 10px;
|
||||
font:inherit;
|
||||
width:100%;
|
||||
color:$darkBlue;
|
||||
font-weight:600;
|
||||
appearance:none;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.input--onWhite {
|
||||
background-color:$backgroundGrey;
|
||||
}
|
||||
|
||||
.input:disabled, .input.is-disabled {
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color:$blue;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.input--danger {
|
||||
color:$red;
|
||||
border-width:2px;
|
||||
border-color:lighten($red, 37%);
|
||||
}
|
||||
|
||||
.input--area {
|
||||
height:300px;
|
||||
}
|
||||
|
||||
.input--smallArea {
|
||||
height:120px;
|
||||
}
|
||||
|
||||
.input--danger:focus {
|
||||
border-color:$red;
|
||||
color:$red;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color:#b5c0d0;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.input--select {
|
||||
background: #fff image-url('icons/select-arrow.svg') right 12px top 50% / 16px 16px no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input--code {
|
||||
font-family:'Droid Sans Mono', fixed;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.inputPair {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
.input {
|
||||
width:49%;
|
||||
}
|
||||
}
|
||||
132
app/assets/stylesheets/application/elements/_label.scss
Normal file
132
app/assets/stylesheets/application/elements/_label.scss
Normal file
@@ -0,0 +1,132 @@
|
||||
.label {
|
||||
display:inline-block;
|
||||
background:#000;
|
||||
color:#fff;
|
||||
font-size:9px;
|
||||
text-transform: uppercase;
|
||||
border-radius:40px;
|
||||
padding:2px 6px;
|
||||
line-height:0.9;
|
||||
}
|
||||
|
||||
.label--green {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.label--red {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.label--orange {
|
||||
background-color:$orange;
|
||||
}
|
||||
|
||||
.label--blue {
|
||||
background-color:$blue;
|
||||
}
|
||||
|
||||
.label--grey {
|
||||
background-color:#999;
|
||||
}
|
||||
|
||||
.label--turquoise {
|
||||
background-color:$blue;
|
||||
}
|
||||
|
||||
.label--purple {
|
||||
background-color:$purple;
|
||||
}
|
||||
|
||||
.label--large {
|
||||
font-size:11px;
|
||||
padding:4px 10px;
|
||||
}
|
||||
|
||||
.label--serverStatus-live {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.label--serverStatus-development {
|
||||
background-color:#636363;
|
||||
}
|
||||
|
||||
.label--serverStatus-suspended {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.label--messageStatus-pending {
|
||||
background-color:$subBlue;
|
||||
}
|
||||
|
||||
.label--messageStatus-held {
|
||||
background-color:#aaa;
|
||||
}
|
||||
|
||||
.label--messageStatus-processed {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.label--messageStatus-sent {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.label--messageStatus-hard_fail {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.label--messageStatus-soft_fail {
|
||||
background-color:$orange;
|
||||
}
|
||||
|
||||
.label--messageStatus-bounced {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.label--messageStatus-hold_cancelled {
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
|
||||
.label--credentialType-api {
|
||||
background-color:$blue;
|
||||
}
|
||||
|
||||
.label--credentialType-smtp {
|
||||
background-color:$turquoise;
|
||||
}
|
||||
|
||||
.label--spamStatus-not_checked {
|
||||
background:#aaa;
|
||||
}
|
||||
|
||||
.label--spamStatus-spam {
|
||||
background:$orange;
|
||||
}
|
||||
|
||||
.label--spamStatus-not_spam {
|
||||
background:$turquoise;
|
||||
}
|
||||
|
||||
.label--http-status-2 {
|
||||
background-color:$green;
|
||||
}
|
||||
|
||||
.label--http-status-3 {
|
||||
background-color:$orange;
|
||||
}
|
||||
|
||||
.label--http-status-4,
|
||||
.label--http-status-5 {
|
||||
background-color:$red;
|
||||
}
|
||||
|
||||
.domainList__ssl {
|
||||
color:$green;
|
||||
&:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.domainList__ssl--disabled {
|
||||
color:#999;
|
||||
}
|
||||
16
app/assets/stylesheets/application/elements/_misc.scss
Normal file
16
app/assets/stylesheets/application/elements/_misc.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.returnPathTag {
|
||||
background:image-url('icons/return-path.svg') no-repeat 0 4px / 10px;
|
||||
padding-left:14px;
|
||||
}
|
||||
|
||||
.returnPathTag--inMessageHeader {
|
||||
background-size:14px;
|
||||
padding-left:18px;
|
||||
}
|
||||
|
||||
.warningBox {
|
||||
background-color:#fff8e4;
|
||||
border:1px solid #c8bc9b;
|
||||
padding:15px;
|
||||
line-height:1.4;
|
||||
}
|
||||
159
app/assets/stylesheets/application/elements/_spam_range.scss
Normal file
159
app/assets/stylesheets/application/elements/_spam_range.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
.spamRangeLabel {
|
||||
font-size:12px;
|
||||
text-align:right;
|
||||
margin-top:7px;
|
||||
}
|
||||
|
||||
.spamRange {
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
width: 100%; /* Specific width is required for Firefox. */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
&:disabled {
|
||||
opacity:0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.spamRange::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.spamRange:focus {
|
||||
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
|
||||
}
|
||||
|
||||
.spamRange::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
/* Hides the slider so custom styles can be added */
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Special styling for WebKit/Blink */
|
||||
.spamRange::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: 2px solid #2b2e32;
|
||||
height:25px;
|
||||
width:25px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
|
||||
}
|
||||
|
||||
/* All the same stuff for Firefox */
|
||||
.spamRange::-moz-range-thumb {
|
||||
border: 2px solid #2b2e32;
|
||||
height:25px;
|
||||
width:25px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* All the same stuff for IE */
|
||||
.spamRange::-ms-thumb {
|
||||
border: 2px solid #2b2e32;
|
||||
height:25px;
|
||||
width:25px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//
|
||||
// Track
|
||||
//
|
||||
|
||||
.spamRange::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
border-radius:30px;
|
||||
background: #3ff990; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
border-radius:30px;
|
||||
background: #3ff990; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange::-ms-track {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
border-radius:30px;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
background: #3ff990; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange--hot::-webkit-slider-runnable-track {
|
||||
background: #1688d0; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange--hot::-moz-range-track {
|
||||
background: #1688d0; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange--hot::-ms-track {
|
||||
background: #1688d0; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
|
||||
.spamRange--blueGreen::-webkit-slider-runnable-track {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
|
||||
background: #146dd2; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange--blueGreen::-moz-range-track {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
|
||||
background: #146dd2; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.spamRange--blueGreen::-ms-track {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
|
||||
background: #146dd2; /* Old browsers */
|
||||
background: -moz-linear-gradient(left, #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(left, #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to right, #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
59
app/assets/stylesheets/application/global/_fonts.scss
Normal file
59
app/assets/stylesheets/application/global/_fonts.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@font-face {
|
||||
font-family: "Droid Sans Mono";
|
||||
src: font-url("DroidSansMono.eot");
|
||||
src: font-url("DroidSansMono.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("DroidSansMono.woff") format("woff"),
|
||||
font-url("DroidSansMono.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
src: font-url("SourceSansPro-Light.eot");
|
||||
src: font-url("SourceSansPro-Light.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("SourceSansPro-Light.woff") format("woff"),
|
||||
font-url("SourceSansPro-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
src: font-url("SourceSansPro-Regular.eot");
|
||||
src: font-url("SourceSansPro-Regular.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("SourceSansPro-Regular.woff") format("woff"),
|
||||
font-url("SourceSansPro-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
src: font-url("SourceSansPro-Semibold.eot");
|
||||
src: font-url("SourceSansPro-Semibold.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("SourceSansPro-Semibold.woff") format("woff"),
|
||||
font-url("SourceSansPro-Semibold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
src: font-url("SourceSansPro-Bold.eot");
|
||||
src: font-url("SourceSansPro-Bold.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("SourceSansPro-Bold.woff") format("woff"),
|
||||
font-url("SourceSansPro-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
src: font-url("SourceSansPro-Black.eot");
|
||||
src: font-url("SourceSansPro-Black.eot?#iefix") format("embedded-opentype"),
|
||||
font-url("SourceSansPro-Black.woff") format("woff"),
|
||||
font-url("SourceSansPro-Black.ttf") format("truetype");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
14
app/assets/stylesheets/application/global/_mixins.scss
Normal file
14
app/assets/stylesheets/application/global/_mixins.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@mixin scrollbars($size: 6px, $thumb: #979ea6, $track: #efefef) {
|
||||
&::-webkit-scrollbar {
|
||||
height: $size; // Horizontal Scrollbars
|
||||
width: $size; // Vertical Scrollbars
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $thumb;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $track;
|
||||
}
|
||||
}
|
||||
113
app/assets/stylesheets/application/global/_reset.scss
Normal file
113
app/assets/stylesheets/application/global/_reset.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: normal;
|
||||
font-size: 100%;
|
||||
letter-spacing:0;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight:inherit;
|
||||
}
|
||||
|
||||
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
|
||||
|
||||
img,object,embed {max-width: 100%;}
|
||||
ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
b,strong { font-weight:bold;}
|
||||
strong.semi { font-weight:600;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
|
||||
|
||||
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:inherit; text-decoration: none; line-height:1; margin:0 }
|
||||
|
||||
del {text-decoration: line-through;}
|
||||
|
||||
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
|
||||
|
||||
/* tables still need cellspacing="0" in the markup */
|
||||
table {border-collapse: collapse; border-spacing: 0;}
|
||||
th {font-weight: bold; vertical-align: bottom;}
|
||||
td {font-weight: normal; vertical-align: top;}
|
||||
|
||||
hr {display: block; height: 1px; border: 0; border-top: 3px solid #ddd; margin:0; padding: 0;}
|
||||
|
||||
input, select {vertical-align: middle;}
|
||||
|
||||
pre {
|
||||
white-space: pre; /* CSS2 */
|
||||
white-space: pre-wrap; /* CSS 2.1 */
|
||||
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
|
||||
word-wrap: break-word; /* IE */
|
||||
}
|
||||
|
||||
input[type="radio"] {vertical-align: text-bottom;}
|
||||
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
|
||||
.ie6 input {vertical-align: text-bottom;}
|
||||
|
||||
select, input, textarea {font: 99% sans-serif;}
|
||||
|
||||
table {font: inherit;}
|
||||
|
||||
/* Accessible focus treatment
|
||||
people.opera.com/patrickl/experiments/keyboard/test */
|
||||
a:hover, a:active {outline: none;}
|
||||
|
||||
small {font-size: 85%;}
|
||||
|
||||
strong, th {font-weight: bold;}
|
||||
|
||||
td, td img {vertical-align: top;}
|
||||
|
||||
/* Make sure sup and sub don't screw with your line-heights
|
||||
gist.github.com/413930 */
|
||||
sub, sup {font-size: 75%; line-height: 0; position: relative;}
|
||||
sup {top: -0.5em;}
|
||||
sub {bottom: -0.25em;}
|
||||
|
||||
/* standardize any monospaced elements */
|
||||
pre, code, kbd, samp {font-family: 'Droid Sans Mono', fixed;}
|
||||
|
||||
/* hand cursor on clickable elements */
|
||||
label,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select, input, textarea, a, button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: initial;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
34
app/assets/stylesheets/application/global/_utility.scss
Normal file
34
app/assets/stylesheets/application/global/_utility.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.u-margin {
|
||||
margin-bottom:25px;
|
||||
}
|
||||
|
||||
.u-center {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.u-green {
|
||||
color:$green;
|
||||
}
|
||||
|
||||
.u-orange {
|
||||
color:$orange;
|
||||
}
|
||||
|
||||
.u-grey {
|
||||
color:#999;
|
||||
}
|
||||
.u-red {
|
||||
color:$red;
|
||||
}
|
||||
|
||||
.u-bold {
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.u-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display:none;
|
||||
}
|
||||
28
app/assets/stylesheets/application/global/_variables.scss
Normal file
28
app/assets/stylesheets/application/global/_variables.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
$backgroundGrey: #fafafa;
|
||||
$blue: #0e69d5;
|
||||
$darkBlue: #3c4249;
|
||||
$veryDarkBlue: #2b2e32;
|
||||
$lightBlue: #eaf3fe;
|
||||
$subBlue: #909db0;
|
||||
$red: #e2383a;
|
||||
$green: #76c83b;
|
||||
$orange: #e8581f;
|
||||
$turquoise: #4ac7c5;
|
||||
$purple: #6145b2;
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
608
app/assets/stylesheets/application/vendor/_chartist.scss
مباع
Normal file
608
app/assets/stylesheets/application/vendor/_chartist.scss
مباع
Normal file
@@ -0,0 +1,608 @@
|
||||
.ct-label {
|
||||
fill: rgba(0, 0, 0, 0.4);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1; }
|
||||
|
||||
.ct-chart-line .ct-label,
|
||||
.ct-chart-bar .ct-label {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-grid {
|
||||
stroke: rgba(0, 0, 0, 0.2);
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 2px; }
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round; }
|
||||
|
||||
.ct-line {
|
||||
fill: none;
|
||||
stroke-width: 4px; }
|
||||
|
||||
.ct-area {
|
||||
stroke: none;
|
||||
fill-opacity: 0.1; }
|
||||
|
||||
.ct-bar {
|
||||
fill: none;
|
||||
stroke-width: 10px; }
|
||||
|
||||
.ct-slice-donut {
|
||||
fill: none;
|
||||
stroke-width: 60px; }
|
||||
|
||||
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
|
||||
stroke: #d70206; }
|
||||
|
||||
.ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
|
||||
fill: #d70206; }
|
||||
|
||||
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
|
||||
stroke: #f4c63d; }
|
||||
|
||||
.ct-series-c .ct-slice-pie, .ct-series-c .ct-area {
|
||||
fill: #f4c63d; }
|
||||
|
||||
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
|
||||
stroke: #d17905; }
|
||||
|
||||
.ct-series-d .ct-slice-pie, .ct-series-d .ct-area {
|
||||
fill: #d17905; }
|
||||
|
||||
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
|
||||
stroke: #453d3f; }
|
||||
|
||||
.ct-series-e .ct-slice-pie, .ct-series-e .ct-area {
|
||||
fill: #453d3f; }
|
||||
|
||||
.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
|
||||
stroke: #59922b; }
|
||||
|
||||
.ct-series-f .ct-slice-pie, .ct-series-f .ct-area {
|
||||
fill: #59922b; }
|
||||
|
||||
.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
|
||||
stroke: #0544d3; }
|
||||
|
||||
.ct-series-g .ct-slice-pie, .ct-series-g .ct-area {
|
||||
fill: #0544d3; }
|
||||
|
||||
.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
|
||||
stroke: #6b0392; }
|
||||
|
||||
.ct-series-h .ct-slice-pie, .ct-series-h .ct-area {
|
||||
fill: #6b0392; }
|
||||
|
||||
.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-i .ct-slice-pie, .ct-series-i .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
|
||||
stroke: #dda458; }
|
||||
|
||||
.ct-series-j .ct-slice-pie, .ct-series-j .ct-area {
|
||||
fill: #dda458; }
|
||||
|
||||
.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
|
||||
stroke: #eacf7d; }
|
||||
|
||||
.ct-series-k .ct-slice-pie, .ct-series-k .ct-area {
|
||||
fill: #eacf7d; }
|
||||
|
||||
.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
|
||||
stroke: #86797d; }
|
||||
|
||||
.ct-series-l .ct-slice-pie, .ct-series-l .ct-area {
|
||||
fill: #86797d; }
|
||||
|
||||
.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
|
||||
stroke: #b2c326; }
|
||||
|
||||
.ct-series-m .ct-slice-pie, .ct-series-m .ct-area {
|
||||
fill: #b2c326; }
|
||||
|
||||
.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
|
||||
stroke: #6188e2; }
|
||||
|
||||
.ct-series-n .ct-slice-pie, .ct-series-n .ct-area {
|
||||
fill: #6188e2; }
|
||||
|
||||
.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
|
||||
stroke: #a748ca; }
|
||||
|
||||
.ct-series-o .ct-slice-pie, .ct-series-o .ct-area {
|
||||
fill: #a748ca; }
|
||||
|
||||
.ct-square {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-square:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 100%; }
|
||||
.ct-square:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-square > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 93.75%; }
|
||||
.ct-minor-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 88.8888888889%; }
|
||||
.ct-major-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 83.3333333333%; }
|
||||
.ct-minor-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 80%; }
|
||||
.ct-major-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fourth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fourth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 75%; }
|
||||
.ct-perfect-fourth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fourth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fifth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fifth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 66.6666666667%; }
|
||||
.ct-perfect-fifth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fifth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 62.5%; }
|
||||
.ct-minor-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-golden-section {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-golden-section:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 61.804697157%; }
|
||||
.ct-golden-section:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-golden-section > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 60%; }
|
||||
.ct-major-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; }
|
||||
.ct-minor-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 53.3333333333%; }
|
||||
.ct-major-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 50%; }
|
||||
.ct-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-tenth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-tenth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 40%; }
|
||||
.ct-major-tenth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-tenth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-eleventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-eleventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 37.5%; }
|
||||
.ct-major-eleventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-eleventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-twelfth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-twelfth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 33.3333333333%; }
|
||||
.ct-major-twelfth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-twelfth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-double-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-double-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 25%; }
|
||||
.ct-double-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-double-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*# sourceMappingURL=chartist.css.map */
|
||||
المرجع في مشكلة جديدة
حظر مستخدم