mirror of
https://github.com/bitwarden/browser
synced 2025-12-21 10:43:35 +00:00
move scss folder under popup
This commit is contained in:
Kyle Spearrin
304
src/popup/scss/base.scss
Normal file
304
src/popup/scss/base.scss
Normal file
@@ -0,0 +1,304 @@
|
||||
@import "variables.scss";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: $background-color;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color;
|
||||
line-height: $line-height-base;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 375px !important;
|
||||
height: 600px !important;
|
||||
overflow: hidden;
|
||||
|
||||
&.body-sm {
|
||||
width: 375px !important;
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
&.body-xs {
|
||||
width: 375px !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
&.body-full {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken($brand-primary, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
content::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
content::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(100,100,100,.2);
|
||||
border-radius: 10px;
|
||||
margin-right: 1px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(100,100,100,.4);
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: $brand-primary;
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
color: white;
|
||||
display: flex;
|
||||
|
||||
.left, .right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: -webkit-min-content; /* Workaround to Chrome bug */
|
||||
.header-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
app-pop-out > button, div > button, div > a {
|
||||
background: $brand-primary;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0 10px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
i + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
app-pop-out {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 7px 10px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 10px;
|
||||
color: lighten($brand-primary, 30%);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: darken($brand-primary, 8%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px 5px 30px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:focus {
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
background: darken($brand-primary, 10%);
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: lighten($brand-primary, 35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left + .search {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.search + .right {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
background-color: white;
|
||||
border-top: 1px solid $border-color-dark;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding: 7px 0;
|
||||
text-decoration: none;
|
||||
color: $gray-light;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $list-item-hover;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app-root {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 980;
|
||||
}
|
||||
|
||||
content {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: $background-color;
|
||||
|
||||
&.no-header {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-page {
|
||||
content {
|
||||
bottom: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-items {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.fa {
|
||||
margin-bottom: 10px;
|
||||
color: $list-icon-color;
|
||||
}
|
||||
}
|
||||
405
src/popup/scss/box.scss
Normal file
405
src/popup/scss/box.scss
Normal file
@@ -0,0 +1,405 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.box-header {
|
||||
margin: 0 10px 5px 10px;
|
||||
color: $gray-light;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
background: $box-background-color;
|
||||
border-top: 1px solid $border-color-dark;
|
||||
border-bottom: 1px solid $border-color-dark;
|
||||
|
||||
&.box-content-padded {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.box-content-row {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
width: calc(100% - 10px);
|
||||
border-bottom: 1px solid $box-border-color;
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:before {
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
background-color: $box-background-hover-color;
|
||||
}
|
||||
|
||||
&.pre {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.row-label, label {
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.text, .detail {
|
||||
display: block;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.img-right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
|
||||
&.box-content-row-slider, &.box-content-row-multi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&.box-content-row-multi {
|
||||
width: 100%;
|
||||
|
||||
input:not([type="checkbox"]) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input + label.sr-only + select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: 8px 8px 8px 4px;
|
||||
color: $brand-danger;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.box-content-row-multi, &.box-content-row-newmulti {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
|
||||
label, .row-label {
|
||||
font-size: $font-size-base;
|
||||
color: $text-color;
|
||||
display: inline;
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
> input {
|
||||
margin: 0 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-input {
|
||||
label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-slider {
|
||||
input[type="range"] {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]), textarea {
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: lighten($gray-light, 35%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid darken($border-color-dark, 7%);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
.row-btn {
|
||||
cursor: pointer;
|
||||
padding: 10px 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: $brand-primary;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken($brand-primary, 10%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $list-icon-color;
|
||||
|
||||
&:hover {
|
||||
color: $list-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-pad .row-btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select.field-type {
|
||||
margin: 5px 0 0 25px;
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.row-sub-icon, .row-sub-label + i.fa {
|
||||
color: $list-icon-color;
|
||||
}
|
||||
|
||||
.row-sub-label {
|
||||
margin: 0 15px;
|
||||
color: $gray-light;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 34px;
|
||||
height: 100%;
|
||||
margin-left: -5px;
|
||||
color: $text-muted;
|
||||
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.totp {
|
||||
.totp-code {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.totp-countdown {
|
||||
margin: 3px 3px 0 0;
|
||||
display: block;
|
||||
user-select: none;
|
||||
|
||||
.totp-sec {
|
||||
font-size: 0.85em;
|
||||
position: absolute;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
stroke: $brand-primary;
|
||||
fill: none;
|
||||
|
||||
&.inner {
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 78.6;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
&.outer {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 88;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.low {
|
||||
.totp-sec, .totp-code {
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
.totp-circle {
|
||||
stroke: $brand-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.condensed .box-content-row, .box-content-row.condensed {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
&.no-hover .box-content-row, .box-content-row.no-hover {
|
||||
&:hover, &:focus {
|
||||
background-color: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
margin: 5px 10px;
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
&.list {
|
||||
.box-content {
|
||||
.box-content-row {
|
||||
padding: 3px 10px;
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&.padded {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
background-color: $list-item-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-left: 5px solid $text-muted;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
.row-btn {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.text:not(.no-ellipsis), .detail {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
||||
.row-main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.single-line {
|
||||
.box-content-row {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.only-list {
|
||||
margin-bottom: 0;
|
||||
|
||||
.box-content {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-list {
|
||||
margin: 0;
|
||||
|
||||
.box-content {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/popup/scss/buttons.scss
Normal file
62
src/popup/scss/buttons.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.btn {
|
||||
background-color: $button-backgound-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 7px 15px;
|
||||
border: 1px solid $button-border-color;
|
||||
font-size: $font-size-base;
|
||||
color: $button-color;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.primary {
|
||||
color: $button-color-primary;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $button-color-danger;
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
cursor: pointer;
|
||||
background-color: darken($button-backgound-color, 1.5%);
|
||||
border-color: darken($button-border-color, 17%);
|
||||
color: darken($button-color, 10%);
|
||||
|
||||
&.primary {
|
||||
color: darken($button-color-primary, 6%);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: darken($button-color-danger, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not([disabled]) {
|
||||
cursor: pointer;
|
||||
background-color: darken($button-backgound-color, 6%);
|
||||
border-color: darken($button-border-color, 25%);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.link {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/popup/scss/environment.scss
Normal file
8
src/popup/scss/environment.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "variables.scss";
|
||||
|
||||
html.browser_firefox, html.browser_edge {
|
||||
body {
|
||||
width: 320px !important;
|
||||
height: 568px !important;
|
||||
}
|
||||
}
|
||||
111
src/popup/scss/misc.scss
Normal file
111
src/popup/scss/misc.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@import "variables.scss";
|
||||
|
||||
small {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $brand-success !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
.text-default {
|
||||
color: $text-color !important;
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: $brand-primary-accent;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.no-vmargin {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.no-vpad {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.monospaced {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
.img-responsive {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.img-rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#duo-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
width: 100%;
|
||||
height: 470px;
|
||||
margin-bottom: -10px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
app-root > #loading {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
app-password-generator .password-block {
|
||||
font-size: $font-size-large;
|
||||
word-break: break-all;
|
||||
font-family: $font-family-monospace;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
app-vault-icon {
|
||||
display: flex;
|
||||
}
|
||||
119
src/popup/scss/plugins.scss
Normal file
119
src/popup/scss/plugins.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import "~font-awesome/scss/font-awesome.scss";
|
||||
@import "~angular2-toaster/toaster";
|
||||
|
||||
@import "variables.scss";
|
||||
@import "buttons.scss";
|
||||
|
||||
// Toaster
|
||||
|
||||
#toast-container {
|
||||
.toast-close-button {
|
||||
right: -0.15em;
|
||||
}
|
||||
|
||||
&.toast-bottom-full-width div.toast {
|
||||
margin: 0 10px 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.toast {
|
||||
opacity: 1 !important;
|
||||
background-image: none !important;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: fixed;
|
||||
font-family: FontAwesome;
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
float: left;
|
||||
color: #ffffff;
|
||||
padding-right: 0.5em;
|
||||
margin: auto 0 auto -36px;
|
||||
}
|
||||
|
||||
.toaster-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.toast-danger, &.toast-error {
|
||||
background-image: none !important;
|
||||
background-color: $brand-danger;
|
||||
|
||||
&:before {
|
||||
content: "\f0e7";
|
||||
margin-left: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-warning {
|
||||
background-image: none !important;
|
||||
background-color: $brand-warning;
|
||||
|
||||
&:before {
|
||||
content: "\f071";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-info {
|
||||
background-image: none !important;
|
||||
background-color: $brand-info;
|
||||
|
||||
&:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-success {
|
||||
background-image: none !important;
|
||||
background-color: $brand-success;
|
||||
|
||||
&:before {
|
||||
content: "\f00C";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SweetAlert
|
||||
|
||||
.swal-modal {
|
||||
border-radius: $border-radius;
|
||||
|
||||
.swal-icon {
|
||||
margin: 15px auto 0 auto;
|
||||
}
|
||||
|
||||
.swal-title {
|
||||
padding: 10px 10px 15px 10px;
|
||||
margin: 0;
|
||||
font-size: $font-size-large;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.swal-text {
|
||||
color: $text-color;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.swal-footer {
|
||||
padding: 15px 10px 10px 10px;
|
||||
margin: 0;
|
||||
|
||||
.swal-button {
|
||||
@extend .btn;
|
||||
}
|
||||
|
||||
.swal-button--confirm {
|
||||
@extend .btn.primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/popup/scss/popup.scss
Normal file
8
src/popup/scss/popup.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "../css/webfonts.css";
|
||||
@import "variables.scss";
|
||||
@import "base.scss";
|
||||
@import "box.scss";
|
||||
@import "buttons.scss";
|
||||
@import "misc.scss";
|
||||
@import "plugins.scss";
|
||||
@import "environment.scss";
|
||||
37
src/popup/scss/variables.scss
Normal file
37
src/popup/scss/variables.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
$font-size-base: 14px;
|
||||
$font-size-large: 18px;
|
||||
$font-size-small: 12px;
|
||||
$text-color: #000000;
|
||||
$background-color: #efeff4;
|
||||
$border-color: #f0f0f0;
|
||||
$border-color-dark: #ddd;
|
||||
$list-item-hover: #fbfbfb;
|
||||
$list-icon-color: #c7c7cd;
|
||||
$border-radius: 3px;
|
||||
$line-height-base: 1.42857143;
|
||||
|
||||
$gray: #555;
|
||||
$gray-light: #777;
|
||||
$text-muted: $gray-light;
|
||||
|
||||
$brand-primary: #3c8dbc;
|
||||
$brand-danger: #dd4b39;
|
||||
$brand-success: #00a65a;
|
||||
$brand-info: #555555;
|
||||
$brand-warning: #bf7e16;
|
||||
$brand-primary-accent: #286090;
|
||||
|
||||
$background-color: #efeff4;
|
||||
$background-color-alt: #ecf0f5;
|
||||
|
||||
$box-background-color: white;
|
||||
$box-background-hover-color: $list-item-hover;
|
||||
$box-border-color: $border-color;
|
||||
|
||||
$button-border-color: darken($border-color-dark, 12%);
|
||||
$button-backgound-color: white;
|
||||
$button-color: lighten($text-color, 40%);
|
||||
$button-color-primary: darken($brand-primary, 8%);
|
||||
$button-color-danger: darken($brand-danger, 10%);
|
||||
Reference in New Issue
Block a user