Kyle Spearrin
8 years ago
17 changed files with 41 additions and 1420 deletions
@ -1 +1,3 @@
@@ -1 +1,3 @@
|
||||
<i class="fa fa-rocket"></i> |
||||
|
||||
The dashboard!! |
||||
|
||||
@ -1,75 +0,0 @@
@@ -1,75 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
html, body { |
||||
height: 100%; |
||||
background-color: $background-color-alt2; |
||||
font-family: $font-family-sans-serif; |
||||
font-size: $font-size-base; |
||||
color: $text-color; |
||||
line-height: $line-height-base; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
div:not(.modal)::-webkit-scrollbar { |
||||
width: 10px; |
||||
height: 10px; |
||||
} |
||||
|
||||
div:not(.modal)::-webkit-scrollbar-track { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
div:not(.modal)::-webkit-scrollbar-thumb { |
||||
background-color: rgba(100,100,100,.2); |
||||
border-radius: 10px; |
||||
margin-right: 1px; |
||||
|
||||
&:hover { |
||||
background-color: rgba(100,100,100,.4); |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
$theme-colors: ( "primary": #3c8dbc, "primary-accent": #286090, "danger": #dd4b39, "success": #00a65a, "info": #555555, "warning": #bf7e16); |
||||
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; |
||||
|
||||
$h1-font-size: 2rem; |
||||
$h2-font-size: 1.3rem; |
||||
$h3-font-size: 1rem; |
||||
$h4-font-size: 1rem; |
||||
$h5-font-size: 1rem; |
||||
$h6-font-size: 1rem; |
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss"; |
||||
@ -1,260 +0,0 @@
@@ -1,260 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
.box { |
||||
width: 100%; |
||||
|
||||
.box-header { |
||||
margin: 0 10px 5px 10px; |
||||
color: $gray-light; |
||||
text-transform: uppercase; |
||||
|
||||
button { |
||||
background-color: transparent; |
||||
border: none; |
||||
color: $gray-light; |
||||
text-transform: uppercase; |
||||
} |
||||
} |
||||
|
||||
.box-content { |
||||
background: $box-background-color; |
||||
border-radius: $border-radius; |
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); |
||||
|
||||
&.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-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 { |
||||
color: $list-icon-color; |
||||
} |
||||
|
||||
.row-sub-label { |
||||
margin: 0 15px; |
||||
color: $gray-light; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
|
||||
&.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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.box-footer { |
||||
margin: 5px 10px; |
||||
font-size: $font-size-small; |
||||
color: $text-muted; |
||||
} |
||||
} |
||||
@ -1,70 +0,0 @@
@@ -1,70 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
.btn, #vault .footer button, .modal-footer button { |
||||
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 !important; |
||||
} |
||||
|
||||
&.block { |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
|
||||
&.link { |
||||
border: none !important; |
||||
background: none !important; |
||||
|
||||
&:focus { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.action-buttons { |
||||
.btn { |
||||
&:focus { |
||||
outline: auto; |
||||
} |
||||
} |
||||
} |
||||
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
@import "variables.scss"; |
||||
@import "bootstrap.scss"; |
||||
|
||||
html.os_windows { |
||||
body { |
||||
border-top: 1px solid $border-color-dark; |
||||
border-top: 1px solid $gray-400; |
||||
} |
||||
} |
||||
|
||||
@ -1,76 +0,0 @@
@@ -1,76 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
.list > a { |
||||
display: block; |
||||
padding: 3px 10px; |
||||
background-color: white; |
||||
text-decoration: none; |
||||
color: $text-color; |
||||
position: relative; |
||||
z-index: 1; |
||||
|
||||
&:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
|
||||
&:before { |
||||
content: ""; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 1px; |
||||
width: calc(100% - 10px); |
||||
border-bottom: 1px solid $border-color; |
||||
} |
||||
|
||||
&:last-child:before { |
||||
border: none; |
||||
height: 0; |
||||
} |
||||
|
||||
&:hover, &:focus, &.active { |
||||
background-color: $list-item-hover; |
||||
} |
||||
|
||||
&.active { |
||||
border-left: 5px solid $brand-primary; |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
&:focus:not(.active) { |
||||
border-left: 5px solid $text-muted; |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
.text, .detail { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: block; |
||||
color: $text-color; |
||||
} |
||||
|
||||
.detail { |
||||
font-size: $font-size-small; |
||||
color: $gray-light; |
||||
} |
||||
|
||||
.icon { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
float: left; |
||||
height: 36px; |
||||
width: 34px; |
||||
margin-left: -5px; |
||||
color: $text-muted; |
||||
|
||||
img { |
||||
border-radius: $border-radius; |
||||
max-height: 20px; |
||||
max-width: 20px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,338 +0,0 @@
@@ -1,338 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
$white: white; |
||||
$black: black; |
||||
$line-height-base: 14px; |
||||
$border-radius-lg: $border-radius; |
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss |
||||
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; |
||||
|
||||
$zindex-modal-backdrop: 1040 !default; |
||||
$zindex-modal: 1050 !default; |
||||
|
||||
// Padding applied to the modal body |
||||
$modal-inner-padding: 10px !default; |
||||
|
||||
$modal-dialog-margin: .5rem !default; |
||||
$modal-dialog-margin-y-sm-up: 1.75rem !default; |
||||
|
||||
$modal-title-line-height: $line-height-base !default; |
||||
|
||||
$modal-content-bg: $background-color-alt !default; |
||||
$modal-content-border-color: rgba($black, .2) !default; |
||||
$modal-content-border-width: 1px !default; |
||||
$modal-content-box-shadow-xs: none; |
||||
$modal-content-box-shadow-sm-up: none; |
||||
|
||||
$modal-backdrop-bg: $black !default; |
||||
$modal-backdrop-opacity: .5 !default; |
||||
$modal-header-border-color: $border-color-dark !default; |
||||
$modal-footer-border-color: $modal-header-border-color !default; |
||||
$modal-header-border-width: $modal-content-border-width !default; |
||||
$modal-footer-border-width: $modal-header-border-width !default; |
||||
$modal-header-padding: 12px !default; |
||||
|
||||
$modal-lg: 800px !default; |
||||
$modal-md: 500px !default; |
||||
$modal-sm: 300px !default; |
||||
|
||||
$modal-transition: transform .3s ease-out !default; |
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default; |
||||
$close-font-weight: bold !default; |
||||
$close-color: $black !default; |
||||
$close-text-shadow: 0 1px 0 $white !default; |
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss |
||||
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { |
||||
$min: breakpoint-min($name, $breakpoints); |
||||
|
||||
@if $min { |
||||
@media (min-width: $min) { |
||||
@content; |
||||
} |
||||
} |
||||
@else { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { |
||||
$min: map-get($breakpoints, $name); |
||||
@return if($min != 0, $min, null); |
||||
} |
||||
|
||||
// Custom Added CSS animations |
||||
|
||||
@keyframes modalshow { |
||||
0% { |
||||
opacity: 0; |
||||
transform: translate(0, -25%); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
transform: translate(0, 0); |
||||
} |
||||
} |
||||
|
||||
@keyframes backdropshow { |
||||
0% { |
||||
opacity: 0; |
||||
} |
||||
|
||||
100% { |
||||
opacity: $modal-backdrop-opacity; |
||||
} |
||||
} |
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss |
||||
|
||||
// .modal-open - body class for killing the scroll |
||||
// .modal - container to scroll within |
||||
// .modal-dialog - positioning shell for the actual modal |
||||
// .modal-content - actual modal w/ bg and corners and stuff |
||||
|
||||
|
||||
// Kill the scroll on the body |
||||
.modal-open { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
// Container that the modal scrolls within |
||||
.modal { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: $zindex-modal; |
||||
//display: none; |
||||
overflow: hidden; |
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see |
||||
// https://github.com/twbs/bootstrap/pull/10951. |
||||
outline: 0; |
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a |
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 |
||||
// See also https://github.com/twbs/bootstrap/issues/17695 |
||||
.modal-open & { |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
} |
||||
} |
||||
|
||||
// Shell div to position the modal with bottom padding |
||||
.modal-dialog { |
||||
position: relative; |
||||
width: auto; |
||||
margin: $modal-dialog-margin; |
||||
// allow clicks to pass through for custom click handling to close modal |
||||
pointer-events: none; |
||||
// When fading in the modal, animate it to slide down |
||||
.modal.fade & { |
||||
//@include transition($modal-transition); |
||||
//transform: translate(0, -25%); |
||||
animation: modalshow 0.3s ease-in; |
||||
} |
||||
//.modal.show & { |
||||
// transform: translate(0, 0); |
||||
//} |
||||
transform: translate(0, 0); |
||||
} |
||||
|
||||
.modal-dialog-centered { |
||||
display: flex; |
||||
align-items: center; |
||||
min-height: calc(100% - (#{$modal-dialog-margin} * 2)); |
||||
} |
||||
|
||||
// Actual modal |
||||
.modal-content { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` |
||||
// counteract the pointer-events: none; in the .modal-dialog |
||||
pointer-events: auto; |
||||
background-color: $modal-content-bg; |
||||
background-clip: padding-box; |
||||
border: $modal-content-border-width solid $modal-content-border-color; |
||||
//@include border-radius($border-radius-lg); |
||||
//@include box-shadow($modal-content-box-shadow-xs); |
||||
border-radius: $border-radius-lg; |
||||
box-shadow: $modal-content-box-shadow-xs; |
||||
// Remove focus outline from opened modal |
||||
outline: 0; |
||||
} |
||||
|
||||
// Modal background |
||||
.modal-backdrop { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: $zindex-modal-backdrop; |
||||
background-color: $modal-backdrop-bg; |
||||
// Fade for backdrop |
||||
&.fade { |
||||
//opacity: 0; |
||||
animation: backdropshow 0.1s ease-in; |
||||
} |
||||
//&.show { |
||||
// opacity: $modal-backdrop-opacity; |
||||
//} |
||||
opacity: $modal-backdrop-opacity; |
||||
} |
||||
|
||||
// Modal header |
||||
// Top section of the modal w/ title and dismiss |
||||
.modal-header { |
||||
display: flex; |
||||
align-items: flex-start; // so the close btn always stays on the upper right corner |
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends |
||||
padding: $modal-header-padding $modal-inner-padding; |
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color; |
||||
//@include border-top-radius($border-radius-lg); |
||||
|
||||
.close { |
||||
padding: $modal-header-padding $modal-inner-padding; |
||||
// auto on the left force icon to the right even when there is no .modal-title |
||||
margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto; |
||||
} |
||||
|
||||
h5 { |
||||
font-size: $font-size-base; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.fa { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Title text within header |
||||
.modal-title { |
||||
margin-bottom: 0; |
||||
line-height: $modal-title-line-height; |
||||
} |
||||
|
||||
// Modal body |
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer) |
||||
.modal-body { |
||||
position: relative; |
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible |
||||
// when should there be a fixed height on `.modal-dialog`. |
||||
flex: 1 1 auto; |
||||
padding: $modal-inner-padding; |
||||
} |
||||
|
||||
// Footer (for actions) |
||||
.modal-footer { |
||||
display: flex; |
||||
align-items: center; // vertically center |
||||
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items |
||||
padding: $modal-inner-padding; |
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color; |
||||
// Easily place margin between footer elements |
||||
button { |
||||
margin-right: 10px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
margin-left: auto; |
||||
display: flex; |
||||
} |
||||
} |
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide |
||||
.modal-scrollbar-measure { |
||||
position: absolute; |
||||
top: -9999px; |
||||
width: 50px; |
||||
height: 50px; |
||||
overflow: scroll; |
||||
} |
||||
|
||||
// Scale up the modal |
||||
@include media-breakpoint-up(sm) { |
||||
// Automatically set modal's width for larger viewports |
||||
.modal-dialog { |
||||
max-width: $modal-md; |
||||
margin: $modal-dialog-margin-y-sm-up auto; |
||||
} |
||||
|
||||
.modal-dialog-centered { |
||||
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); |
||||
} |
||||
|
||||
.modal-content { |
||||
//@include box-shadow($modal-content-box-shadow-sm-up); |
||||
box-shadow: $modal-content-box-shadow-sm-up; |
||||
} |
||||
|
||||
.modal-sm { |
||||
max-width: $modal-sm; |
||||
} |
||||
} |
||||
|
||||
@include media-breakpoint-up(lg) { |
||||
.modal-lg { |
||||
max-width: $modal-lg; |
||||
} |
||||
} |
||||
|
||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss |
||||
|
||||
.close { |
||||
float: right; |
||||
font-size: $close-font-size; |
||||
font-weight: $close-font-weight; |
||||
line-height: 1; |
||||
color: $close-color; |
||||
text-shadow: $close-text-shadow; |
||||
opacity: .5; |
||||
|
||||
&:hover, &:focus { |
||||
color: $close-color; |
||||
text-decoration: none; |
||||
opacity: .75; |
||||
} |
||||
// Opinionated: add "hand" cursor to non-disabled .close elements |
||||
&:not(:disabled):not(.disabled) { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
// Additional properties for button version |
||||
// iOS requires the button element instead of an anchor tag. |
||||
// If you want the anchor version, it requires `href="#"`. |
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile |
||||
|
||||
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type |
||||
button.close { |
||||
padding: 0; |
||||
background-color: transparent; |
||||
border: 0; |
||||
-webkit-appearance: none; |
||||
} |
||||
// stylelint-enable |
||||
|
||||
// box |
||||
|
||||
.modal-content .box { |
||||
margin-top: 20px; |
||||
|
||||
&:first-child { |
||||
margin-top: 0; |
||||
} |
||||
} |
||||
@ -1,118 +0,0 @@
@@ -1,118 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
#login-page, #lock-page { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
|
||||
@media (min-height: 500px) { |
||||
height: calc(100% + 50px); |
||||
margin-top: -50px; |
||||
} |
||||
|
||||
@media (min-height: 800px) { |
||||
height: calc(100% + 300px); |
||||
margin-top: -300px; |
||||
} |
||||
|
||||
img { |
||||
margin: 0 auto 15px; |
||||
width: 282px; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
#register-page, #hint-page, #two-factor-page { |
||||
padding-top: 20px; |
||||
|
||||
.content { |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
img { |
||||
margin-bottom: 10px; |
||||
max-width: 100%; |
||||
height: auto; |
||||
display: block; |
||||
border-radius: $border-radius; |
||||
} |
||||
} |
||||
|
||||
#login-page, #register-page, #hint-page, #two-factor-page, #lock-page { |
||||
.content { |
||||
width: 300px; |
||||
|
||||
p { |
||||
text-align: center |
||||
} |
||||
|
||||
p.lead, h1 { |
||||
font-size: $font-size-large; |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.box { |
||||
margin-bottom: 20px; |
||||
|
||||
&.last { |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
|
||||
.buttons { |
||||
display: flex; |
||||
margin-bottom: 20px; |
||||
|
||||
button { |
||||
margin-right: 10px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sub-options { |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
|
||||
a { |
||||
display: block; |
||||
margin-bottom: 10px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
a.settings-icon { |
||||
color: #bbbbbb; |
||||
position: absolute; |
||||
top: 10px; |
||||
left: 10px; |
||||
|
||||
span { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
&:hover, &:focus { |
||||
color: $brand-primary; |
||||
text-decoration: none; |
||||
|
||||
span { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
#register-page { |
||||
.content { |
||||
width: 400px; |
||||
} |
||||
} |
||||
@ -1,11 +1,5 @@
@@ -1,11 +1,5 @@
|
||||
@import "variables.scss"; |
||||
@import "base.scss"; |
||||
@import "bootstrap.scss"; |
||||
@import "pages.scss"; |
||||
@import "vault.scss"; |
||||
@import "list.scss"; |
||||
@import "box.scss"; |
||||
@import "buttons.scss"; |
||||
@import "misc.scss"; |
||||
@import "modal.scss"; |
||||
@import "plugins.scss"; |
||||
@import "environment.scss"; |
||||
|
||||
@ -1,38 +0,0 @@
@@ -1,38 +0,0 @@
|
||||
$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: white; |
||||
$background-color-alt: #f9fafc; |
||||
$background-color-alt2: #ecf0f5; |
||||
|
||||
$box-background-color: $background-color; |
||||
$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%); |
||||
@ -1,269 +0,0 @@
@@ -1,269 +0,0 @@
|
||||
@import "variables.scss"; |
||||
|
||||
#vault { |
||||
height: 100%; |
||||
display: flex; |
||||
|
||||
> #groupings, > #items, > #details, > #logo { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.inner-content { |
||||
padding: 10px 15px; |
||||
} |
||||
} |
||||
|
||||
> #groupings { |
||||
background-color: $background-color-alt; |
||||
width: 22%; |
||||
min-width: 175px; |
||||
max-width: 250px; |
||||
border-right: 1px solid $border-color-dark; |
||||
|
||||
.inner-content { |
||||
padding-bottom: 0; |
||||
padding-right: 5px; |
||||
} |
||||
|
||||
h2 { |
||||
color: $gray-light; |
||||
text-transform: uppercase; |
||||
font-size: $font-size-base; |
||||
font-weight: normal; |
||||
margin-bottom: 5px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: auto; |
||||
background: none; |
||||
border: none; |
||||
color: lighten($gray-light, 30%); |
||||
|
||||
&:hover, &:focus { |
||||
color: $gray-light; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
|
||||
ul:not(.fa-ul) { |
||||
li { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
} |
||||
|
||||
ul.fa-ul { |
||||
li { |
||||
.fa-li { |
||||
left: -11px; |
||||
top: 8px; |
||||
} |
||||
|
||||
a { |
||||
padding-left: 12px; |
||||
} |
||||
|
||||
&.active .fa-li { |
||||
left: 4px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
ul { |
||||
padding: 0; |
||||
margin: 0 0 15px 0; |
||||
|
||||
li { |
||||
a { |
||||
padding: 5px 0; |
||||
color: $text-color; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
span { |
||||
visibility: hidden; |
||||
margin-left: auto; |
||||
color: lighten($gray-light, 30%); |
||||
|
||||
&:hover { |
||||
color: $text-muted; |
||||
} |
||||
} |
||||
|
||||
&:hover, &:focus { |
||||
span { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
background-color: darken($background-color-alt, 5%); |
||||
margin-left: -15px; |
||||
margin-right: -5px; |
||||
padding-left: 15px; |
||||
padding-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
> #items { |
||||
background-color: $background-color; |
||||
width: 28%; |
||||
min-width: 200px; |
||||
max-width: 350px; |
||||
border-right: 1px solid $border-color-dark; |
||||
|
||||
.no-items { |
||||
display: flex; |
||||
height: 100%; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
padding: 0 10px; |
||||
|
||||
.fa { |
||||
margin-bottom: 10px; |
||||
color: $list-icon-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
> #details { |
||||
background-color: $background-color-alt2; |
||||
flex: 1; |
||||
min-width: 0; |
||||
|
||||
.inner-content { |
||||
min-width: 400px; |
||||
} |
||||
|
||||
.box { |
||||
max-width: 550px; |
||||
margin: 30px auto 0 auto; |
||||
|
||||
&:first-child { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 30px; |
||||
} |
||||
} |
||||
|
||||
> form { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
> #logo { |
||||
flex: 1; |
||||
min-width: 0; |
||||
|
||||
.content { |
||||
overflow-y: hidden; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.inner-content { |
||||
min-width: 320px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
img { |
||||
width: 282px; |
||||
opacity: 0.3; |
||||
transition: all 1s ease-in-out; |
||||
|
||||
&:hover { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.header { |
||||
min-height: 44px; |
||||
max-height: 44px; |
||||
background-color: $brand-primary; |
||||
flex: 0 0 auto; |
||||
border-bottom: 1px solid darken($brand-primary, 7%); |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&.header-search { |
||||
.search { |
||||
padding: 0 7px; |
||||
width: 100%; |
||||
text-align: left; |
||||
position: relative; |
||||
|
||||
.fa { |
||||
position: absolute; |
||||
top: 7px; |
||||
left: 15px; |
||||
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%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
flex: 1 1 auto; |
||||
position: relative; |
||||
overflow: auto; |
||||
height: 100%; |
||||
} |
||||
|
||||
.footer { |
||||
height: 50px; |
||||
background-color: $background-color-alt; |
||||
flex: 0 0 auto; |
||||
border-top: 1px solid $border-color-dark; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 15px; |
||||
|
||||
button { |
||||
margin-right: 10px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
margin-left: auto; |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue