مراية لـ
https://github.com/postalserver/postal.git
تم المزامنة 2026-04-24 07:03:08 +00:00
initial commit from appmail
هذا الالتزام موجود في:
Adam Cooke
@@ -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;
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم