WebDev/spacedeck-open
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit.

Browse Source
This commit is contained in:
mntmn
2017-04-07 01:29:05 +02:00
commit 7ff2926578
258 changed files with 83743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
styles/actions.scss Normal file
View File

@@ -0,0 +1,188 @@
@import "vars";
@import "mixins";
#header {
top: 0;
position: fixed;
width: 100%;
z-index: 1000;
padding: $gutter-b;
pointer-events: none;
border-bottom: 1px solid rgba(0,0,0,0.05);
.home {
margin-top: -20px;
margin-left: -20px;
.icon {
color: $dark;
}
}
.header-left,
.header-right {
pointer-events: auto;
position: relative;
z-index: 10;
> * {
display: inline-block;
vertical-align: middle;
}
}
.header-center {
width: 100%;
left: 0;
position: absolute;
text-align: center;
pointer-events: none;
> * {
pointer-events: auto;
font-size: 20px;
line-height: 44px;
color: $darker;
padding: 0 10px;
}
}
.header-left > * { margin-right: 10px; }
.header-right > * { margin-left: 5px; }
.title {
width: 100%;
left: 0;
position: absolute;
text-align: center;
pointer-events: none;
}
h1 {
margin: 0;
height: 60px;
line-height: 60px;
font-size: $font-size*0.75;
font-weight: bold;
color: $medium;
display: inline-block;
margin-top: -14px;
pointer-events: all;
font-weight: normal;
}
.author {
float: left;
.btn {
margin-right: 10px;
}
.author-date {
opacity: 0.5;
}
}
}
.actions {
position: absolute;
top: 0;
@include transition( all 0.25s ease-in-out);
@include backface-visibility(hidden);
z-index: 3000;
opacity: 0;
pointer-events: none;
.actions {
margin: 0;
}
@include scale(0,0);
&.left { left: 0;}
&.right { right: 0;}
&.in {
@include scale(1,1);
opacity: 1;
* {
pointer-events: auto;
}
}
}
#global-actions {
margin: 10px;
text-align: center;
display: inline-block;
position: absolute;
white-space: nowrap;
left: 54px;
top: 0;
.btn {
padding: 0 8px;
&:first-child {padding-left: 20px; }
&:last-child {padding-right: 20px; }
}
}
#search-wrapper {
position: relative;
display: inline-block;
vertical-align: middle;
.icon {
position: absolute;
right: 5px;
top: 0;
}
#search-input {
text-align: left;
@include transition( width 0.25s ease-in-out, background-color 0.25s ease-in-out);
width: 100px;
&:focus {
width: 250px;
}
}
}
#home-actions {
width: 100%;
img {
margin: auto;
display: block;
opacity: 0.1;
margin-top: 6px;
}
}
#no-profile-actions,
#profile-actions {
right: 0;
}
#user-actions {
#profile-toggle {
background-size: cover;
background-position: center;
}
}
#space-actions {
right: 0;
.btn {
text-transform: uppercase;
}
#space-version {
position: absolute;
right: 50px;
}
#space-pub-save {
display: inline-block;
position: relative;
vertical-align: middle;
height: 44px;
.btn {
position: absolute;
right: 0;
top: 0;
@include perspective-origin(center right);
}
}
}

113
styles/alerts.scss Normal file
View File

@@ -0,0 +1,113 @@
@import "vars";
#alerts {
position: absolute;
height: auto;
width: auto;
display: inline-block;
bottom: 0px;
right: 0px;
left: 0px;
margin: 10px;
text-align: center;
z-index: 1200;
border-radius: 2px;
.alert-success:first-child:after {
border-bottom-color: #dff0d8;
}
.alert-info:first-child:after {
border-bottom-color: #d9edf7;
}
.alert-warning:first-child:after {
border-bottom-color: #fcf8e3;
}
.alert-danger:first-child:after {
border-bottom-color: #eed3d7;
}
}
.alert {
padding: 10px 30px 10px 20px;
border: none;
display: inline-block;
position: relative;
white-space: normal;
text-align: left;
border-radius: 3px;
font-weight: 600;
// &:first-child {
// border-top-left-radius: 3px;
// border-top-right-radius: 3px;
// }
// &:last-child {
// border-bottom-left-radius: 3px;
// border-bottom-right-radius: 3px;
// }
.close {
float: none;
display: inline-block;
font-size: inherit;
line-height: inherit;
position: absolute;
right: 0px;
top: 0px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
p {
margin-top: 0px;
margin-bottom: 15px;
&:last-child { margin-bottom: 0px; }
}
> p + p {
margin-top: 15px;
}
}
.alert-success {
color: white;
background-color: #6bc36f;
border-color: #d6e9c6;
.alert-link {
color: white;
}
}
.alert-info {
color: white;
background-color: #4c9bd8;
border-color: #bce8f1;
.alert-link {
color: white;
}
}
.alert-warning {
color: $dark;
background-color: #ecc133;
border-color: #fbeed5;
.alert-link {
color: $dark;
}
}
.alert-danger {
color: white;
background-color: #c66554;
border-color: #eed3d7;
.alert-link {
color: white;
}
}

84
styles/annotation.scss Normal file
View File

@@ -0,0 +1,84 @@
@import "vars";
@import "mixins";
.article-annotations {
display: none;
.disclaimer {
opacity: 0.5;
font-size: 13px;
line-height: 20px;
}
position: absolute;
top: 0;
left: 100%;
font-size: 13px;
line-height: 20px;
margin-left: 100px;
[contentEditable=true]{font-size: 13px; line-height: 20px; }
.annotation-item-body,
.annotation-reply-body {
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.annotation-group {
width: 250px;
margin-top: -2px;
.annotation-group-toggle {
position: absolute;
top: -15px;
right: 100%;
margin-right: 20px;
opacity: 0.25;
}
.annotation-item {
// border-bottom: 1px solid rgba(0,0,0,0.05);
margin-bottom: $gutter-a/3;
padding-bottom: $gutter-a/4;
}
.annotation-create-item,
.annotation-item {
.annotation-replies,
.annotation-item-body {
position: relative;
margin-left: 44px;
}
.annotation-link { position: absolute; right: 0; top: 0; margin: -7px; opacity: 0.5;}
.annotation-author {
position: relative;
color: $dark;
font-weight: bold;
img { position: absolute; top: 0; right: 100%; margin-right: 11px; margin-top: 2px; pointer-events: none;}
}
.annotation-replies {
font-size: 11px;
line-height: 15px;
.annotation-create-reply,
.annotation-reply {
margin-bottom: $gutter-a/3;
&:first-child {margin-top: $gutter-a/3; }
&:last-of-type {margin-bottom: 0px; }
.annotation-reply-body {
position: relative;
margin-left: 37px;
}
}
}
}
}
}

656
styles/artifact.scss Normal file
View File

@@ -0,0 +1,656 @@
@import "vars";
@import "mixins";
.artifact {
position: relative;
//-webkit-transform: translate3d(0,0,0); // hw accel
iframe {
width: 100% !important;
display: block;
max-height: 100%;
}
&.hide-text .text { opacity: 0 }
&.locked.selected {
box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.5) !important;
}
.placeholder {
.btn {
position: absolute;
top: 50%;
left: 50%;
margin: -22px;
}
}
/*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
content: "Double click to edit";
opacity: 0.25;
}
&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
content: "Type here";
opacity: 0.25;
}*/
&.artifact-text.text-blank p:first-child br {
display: none;
}
.link-wrapper {
position: absolute;
width: 100%;
top: 100%;
display: block;
text-align: center;
max-width: 100%;
overflow-x: hidden;
margin-top: -3em;
}
.edit {
position: absolute;
top: 10px;
right: 10px;
}
.ios-focuser {
position: absolute;
top: 0;
right: 0;
width: 20px;
opacity: 0;
z-index: 0;
}
.text {
overflow: hidden;
width: auto;
height: auto;
height: 100%;
//pointer-events: none;
// handle glyphs that go beyond text box sides
// padding-left: 20px; margin-left: -20px;
// padding-right: 20px; margin-right: -20px;
//> * {pointer-events: auto; }
}
&:not(.artifact-text) {
// this collapses empty captions of images, media etc
// but doesn't collapse empty notes
.text-column:not(.text-editing):empty {
display: none !important;
}
}
&.x-spacedeck-shape .clip {
height: 100%;
}
.shape {
position: absolute;
}
.text-table {
display: table;
width: 100%;
height: 100%;
.text-cell {
display: table-cell;
position: relative;
height: 100%;
.text-column {
width: 100%;
-webkit-line-break: after-white-space;
display: block;
word-wrap: break-word;
line-height: 1.5em;
font-size: $font-size;
&.text-editing {
min-height: $font-size;
// without this, there is no text editing in safari
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
pointer-events: auto;
* {
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
}
p:last-child,
ul:last-child {
margin-bottom: 0em !important;
}
h1,
h2,
li {
margin-top: 0;
margin-bottom: 0.5em;
&:last-child {margin-bottom: 0em !important; }
}
h1 {
line-height: 1.1; // legacy
}
h2 {
font-size: 40px; // legacy
line-height: 1.1;
}
h3 {
font-size: 30px; // legacy
line-height: 1.1;
}
h4 {
font-size: 20px; // legacy
line-height: 1.1;
}
blockquote {
// legacy
font-size: inherit;
font-weight: inherit;
margin-left: 20px;
margin-right: 20px;
}
h3,
h4,
h5,
ul,
p {
margin-top: 0;
margin-bottom: 0.5em; // compatibility to old system
&:last-child {margin-bottom: 0em !important; }
}
a {pointer-events: none; }
ol {
padding: 0;
counter-reset: list-counter;
li {
list-style: none;
position: relative;
padding-left: 1em;
counter-increment: list-counter;
font-size: inherit;
&:before {
color: inherit;
top: 0;
left: 0;
content: counter(list-counter);
position: absolute;
}
}
}
ul {
padding: 0;
li {
list-style: none;
position: relative;
padding-left: 1em;
font-size: inherit;
&:before {
color: inherit;
top: 0;
left: 0;
content: "\2022";
position: absolute;
}
}
}
li,
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
* {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
}
> * {
display: block;
}
}
}
}
.oembed,
div[class*='oembed-'] {
height: 100%;
.play {
position: absolute;
top: 50%;
left: 50%;
margin: -30px;
z-index: 100;
background-color: $light !important;
color: $darker !important;
}
.meta {
padding-top: 10px;
font-size: 10px;
display: block;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
color: $medium;
text-align: left;
.link {
position: absolute;
left: -12px;
bottom: -4px;
}
.description {
padding-left: 28px;
display: block;
}
}
iframe {
width: 100% !important;
height: 100% !important;
}
&:not(.interactive) {
iframe {
pointer-events: none;
}
}
.title {font-size: 20px; }
.image {
height: auto;
top: 0;
bottom: 0px;
position: absolute;
width: 100%;
}
.interact {
position: absolute;
top: 50%;
left: 50%;
margin-left: -30px;
margin-top: -30px;
}
}
.image {
height: 100%;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
video {
width: 100%;
height: 100%;
}
}
.video {
width: 100%;
height: 100%;
background-size: cover;
.title {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
color: $medium;
background-color: white;
display: block;
width: 100%;
padding: 10px 15px;
font-size: 10px;
}
video {
width: 100%;
height: 100%;
}
.tl-controls {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
text-align: center;
.btn {
margin-top: 20px;
}
}
}
// FIXME: fix later
/*&.vector {
pointer-events: none;
div, svg {
pointer-events: none;
}
svg * {
pointer-events: painted;
}
}*/
.audio {
height: 100%;
.timeline {
position: absolute;
left:0;
top:0;
width: 100%;
bottom: 54px;
background-size: 100% 100%;
cursor: crosshair;
margin-bottom: 10px;
overflow: hidden;
.tl-current-time {
height:100%;
background: white;
opacity: 0.5;
border-right: 1px solid #888;
//transition: width 0.05s linear;
}
.tl-inpoint {
width: 1px;
bottom: 0px;
background: #333;
position: absolute;
top: 0px;
z-index: 1;
}
.tl-outpoint {
width: 1px;
bottom: 0px;
background: #333;
position: absolute;
top: 0px;
z-index: 2;
}
}
.tl-controls {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
text-align: center;
.btn {
margin-top: 20px;
}
}
.tl-title {
margin-left:10px;
max-width: 55%;
overflow: hidden;
display: inline-block;
max-height: 2em;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: -18px;
margin-bottom: -18px;
margin-right: 10px;
}
.tl-times {
}
}
img {
// pointer-events:none;
width: 100%;
height: 100%;
}
&.bold { font-weight: bold;}
&.italic { font-style: italic;}
&.underline { text-decoration: underline;}
&.strike { text-decoration: line-through;}
&.align-top .text-cell {vertical-align: top;}
&.align-middle .text-cell {vertical-align: middle;}
&.align-bottom .text-cell {vertical-align: bottom;}
&.align-left { text-align: left; }
&.align-center { text-align: center; }
&.align-right { text-align: right; }
&.align-justify { text-align: justify; }
audio {
width: 100%;
}
}
.board .artifact {
position: absolute;
color: black;
//@include user-select(none);
white-space: normal;
font-size: 18px;
&.artifact-zone {
border: 1px solid rgba(46,204,113,1);
background-color: rgba(46,204,113,0.025);
border-radius: 10px;
&:after {display: none; }
.shape {display: none; }
.zone {
height: 100%;
}
}
}
body.present-mode {
#space {
.artifact-zone {
display: none;
}
.artifact {
cursor: default !important;
.text a { pointer-events: auto !important; }
}
}
}
body:not(.present-mode) {
#space {
.Medium {
cursor: text;
}
.artifact {
&.selected.text-editing,
&.text-editing {
cursor: text;
&:before {
border: 1px solid rgba(255,255,255,0.25);
}
&:after {
border: 1px dotted rgba(40,140,215,0.5);
background-color: transparent !important;
}
}
&.selected {
cursor: -webkit-grab;
cursor: -moz-grab;
&:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
&:not(.artifact-vector):after {
border: 1px solid rgba(40,140,215,1);
// overlay color removed for now (messes with colors)
//background-color: rgba(40,140,215,0.35);
}
}
}
}
}
.mouse-scribble, .tool-scribble, .tool-line, .tool-arrow {
cursor: crosshair !important;
.artifact {
pointer-events: none !important;
}
.artifact:after, .artifact:before {
display: none !important;
}
}
.tool-pan {
cursor: grab !important;
}
.artifact.state-idle {
.progress, .progress-text {
display: none;
}
}
.artifact.state-processing, .artifact.state-uploading {
.progress {
height: 100%;
padding: 10px;
background-color: $blue;
opacity: 0.9;
text-align: center;
}
.progress-text {
text-align: center;
padding: 8px;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
color: #888;
font-size: 10px;
}
video, audio, .tl-controls, .timeline {
display: none;
}
background-color: white;
}
.state-processing .spinner {
opacity: 1;
background-image: url('/images/hourglass.gif');
}
.state-uploading .spinner {
opacity: 0.8;
background-image: url('/images/hourglass.gif');
}
.state-idle .spinner {
display: none;
}
.artifact.image {
background-color: transparent;
&.state-loading { background-color: rgba(40,140,215,0.05);}
&.state-processing { background-color: rgba(107,195,111,0.05);}
}
.spinner {
height:44px;
width:44px;
position:absolute;
top: 50%;
left: 50%;
margin: -22px;
border-radius:100%;
background-size: cover;
background-repeat: no-repeat;
}
#pick-mobile {
img {
width: 200px;
}
.artifact {
display: block;
width: 200px;
height: 150px;
float: left;
font-size: 14px;
line-height: 20px;
.text {
padding: 10px;
}
}
.spinner {
display: none !important;
}
.video {
height: 100%;
}
}
// fix player button offset
.icon-controls-play:before {
line-height: 40px !important;
left: 1px !important;
}

201
styles/audio.scss Normal file
View File

@@ -0,0 +1,201 @@
@import "vars";
@import "mixins";
audio {
-webkit-appearance:none;
width: 100%;
height: 60px;
}
audio::-webkit-media-controls {
width: inherit;
height: inherit;
position: relative;
direction: ltr;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
audio::-webkit-media-controls-enclosure {
width: 100%;
height: 60px;
flex-shrink: 0;
bottom: 0px;
text-indent: 0px;
padding: 0px;
box-sizing: border-box;
}
audio::-webkit-media-controls-panel {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
-webkit-user-select: none;
position: relative;
width: 100%;
z-index: 0;
overflow: hidden;
text-align: right;
bottom: auto;
height: 60px;
background-color: rgba(20, 20, 20, 0.8);
background-color: $dark;
border-radius: $radius;
color: $light;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
}
input[type="range"]::-webkit-media-slider-thumb {
margin-left: -7px;
margin-right: -7px;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-media-slider-thumb {
-webkit-appearance: sliderthumb-horizontal;
box-sizing: border-box;
display: block;
-webkit-user-modify: read-only;
}
input[type="range"]::-webkit-media-slider-container > div {
margin-right: -14px;
}
audio::-webkit-media-slider-container,
input[type="range"]::-webkit-media-slider-container {
display: flex;
align-items: center;
flex-direction: row;
box-sizing: border-box;
height: 100%;
width: 100%;
border: none !important;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 0 !important;
background-color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
flex: 1 1 0px;
align-self: center;
box-sizing: border-box;
display: block;
-webkit-user-modify: read-only;
}
audio::-webkit-media-controls-mute-button {
-webkit-appearance: media-mute-button;
display: flex;
flex: 0 0 auto;
border: none;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
width: 60px;
height: 60px;
line-height: 60px;
margin: 0px;
padding: 0px;
background-color: initial;
color: inherit;
}
audio::-webkit-media-controls-play-button {
-webkit-appearance: media-play-button;
display: flex;
flex: 0 0 auto;
border: none;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
width: 60px;
height: 60px;
line-height: 60px;
margin-left: 0px;
margin-right: 9px;
padding: 0px;
background-color: initial;
color: inherit;
}
audio::-webkit-media-controls-timeline-container {}
audio::-webkit-media-controls-current-time-display {}
audio::-webkit-media-controls-time-remaining-display {}
audio::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-time-remaining-display {
-webkit-appearance: media-current-time-display;
-webkit-user-select: none;
flex: 0 0 auto;
display: flex;
border: none;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
cursor: default;
height: 60px;
margin: 0px 9px 0px 0px;
padding: 0px;
line-height: 60px;
font-family: $main-font;
font-size: $font-size;
font-weight: normal;
font-style: normal;
color: $medium;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-decoration: none;
}
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
-webkit-appearance: media-slider;
display: flex;
flex: 1 1 auto;
height: 60px;
margin: 0px 15px 0px 0px;
padding: 0px;
background-color: transparent;
min-width: 60px;
border: initial;
color: inherit;
border-radius: 0 !important;
}
audio::-webkit-media-controls-volume-slider-container {}
audio::-webkit-media-controls-volume-slider {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {}

45
styles/author.scss Normal file
View File

@@ -0,0 +1,45 @@
@import "vars";
.author {
position: relative;
padding-top: 7px;
padding-right: 15px;
padding-left: 60px;
margin-left: -60px;
margin-right: -25px;
border-top: 1px solid rgba(255,255,255,0.05) !important;
.author-avatar {
background-color: $blue;
font-family: $main-font;
color: white;
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
border-radius: $radius;
background-size: cover;
background-position: center;
}
.author-time,
.author-name {
font-weight: 300;
font-size: 10px;
line-height: 10px;
opacity: 0.5;
font-family: $main-font;
}
.author-time {
position: absolute;
right: 15px;
top: 15px;
}
}
#chat .author-avatar{
position: absolute;
top: 14px;
left: 15px;
}

129
styles/bounce.scss Normal file
View File

@@ -0,0 +1,129 @@
@-webkit-keyframes animation {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); }
1.666667% { -webkit-transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); }
3.333333% { -webkit-transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); }
5% { -webkit-transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); }
6.666667% { -webkit-transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); }
8.333333% { -webkit-transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); }
10% { -webkit-transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); }
11.666667% { -webkit-transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); }
13.333333% { -webkit-transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); }
15% { -webkit-transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); }
16.666667% { -webkit-transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); }
18.333333% { -webkit-transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); }
20% { -webkit-transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); }
21.666667% { -webkit-transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); }
23.333333% { -webkit-transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); }
25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); }
26.666667% { -webkit-transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); }
28.333333% { -webkit-transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); }
30% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); }
31.666667% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); }
33.333333% { -webkit-transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); }
35% { -webkit-transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); }
36.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); }
38.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); }
40% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); }
41.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); }
43.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); }
45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); }
46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); }
48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); }
50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); }
51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); }
53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); }
55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); }
56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); }
58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); }
60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); }
61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); }
63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); }
66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); }
68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); }
70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); }
71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); }
73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); }
75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); }
76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); }
80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); }
81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); }
83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); }
85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); }
86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); }
88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); }
90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}
@keyframes animation {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); }
1.666667% { -webkit-transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); }
3.333333% { -webkit-transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); }
5% { -webkit-transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); }
6.666667% { -webkit-transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); }
8.333333% { -webkit-transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); }
10% { -webkit-transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); }
11.666667% { -webkit-transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); }
13.333333% { -webkit-transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); }
15% { -webkit-transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); }
16.666667% { -webkit-transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); }
18.333333% { -webkit-transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); }
20% { -webkit-transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); }
21.666667% { -webkit-transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); }
23.333333% { -webkit-transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); }
25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); }
26.666667% { -webkit-transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); }
28.333333% { -webkit-transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); }
30% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); }
31.666667% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); }
33.333333% { -webkit-transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); }
35% { -webkit-transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); }
36.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); }
38.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); }
40% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); }
41.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); }
43.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); }
45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); }
46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); }
48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); }
50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); }
51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); }
53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); }
55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); }
56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); }
58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); }
60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); }
61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); }
63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); }
66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); }
68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); }
70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); }
71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); }
73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); }
75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); }
76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); }
80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); }
81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); }
83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); }
85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); }
86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); }
88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); }
90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

1162
styles/button.scss Normal file
View File

File diff suppressed because it is too large Load Diff

8
styles/canvas.scss Normal file
View File

@@ -0,0 +1,8 @@
#canvas {
.select-list {background-color: transparent; }
}
#canvas-orientation {
position: absolute;
right: 0;
top: 0;
}

125
styles/chat.scss Normal file
View File

@@ -0,0 +1,125 @@
@import "vars";
@import "mixins";
#chat-functions {
position: absolute;
bottom: 0px;
right: 0px;
.btn {
display: block;
margin-top: -10px;
margin-left: -10px;
}
}
#chat {
#chat-message-new {
position: absolute;
bottom: 0px;
width: 100%;
display: table;
min-height: 60px;
label {
vertical-align: middle;
display: table-cell;
font-size: 0px;
textarea {
display: inline-block;
width: 100%;
min-height: 90px;
padding-right: 50px;
font-size: 14px;
line-height: 1.5 !important;
font-weight: 300;
}
}
}
.overflow-y-scroll {
bottom: 100px !important;
}
#chat-messages {
width: 100%;
padding: 0px;
li {
display: block;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
padding-left: 60px;
min-height: 60px;
@include transition( all 0.2s ease-in-out);
}
}
}
#post-comment {}
#new-comment {margin-bottom: 20px; }
.comments {
padding: 0;
padding-top: 10px;
margin-bottom: 0;
//background-color: $light;
font-size: 16px !important;
font-family: $main-font !important;
list-style: none;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
> li {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 0px;
&:last-child {border: none; }
}
.comment-author {
pointer-events: none;
position: relative;
display: block;
color: $darker;
font-size: 11px;
.btn-icon {
position: absolute;
left: -40px;
top: -20px;
}
}
.comment-body {}
.comment-meta {
display: block;
list-style: none;
padding: 0;
margin: 0;
font-size: 11px !important;
li {
margin-right: 10px;
display: inline-block;
&.pull-right {
margin-right: 0px;
margin-left: 10px;
}
> a {
vertical-align: middle;
display: inline-block;
color: $lighter;
}
a {
&:hover {
color: $blue;
}
opacity: 0.5;
}
}
}
}

47
styles/close.scss Normal file
View File

@@ -0,0 +1,47 @@
@import "vars";
@import "mixins";
//
// Close icons
// --------------------------------------------------
.close {
position: absolute;
top: 0px;
right: 0px;
height: 60px;
width: 60px;
text-align: center;
line-height: 60px;
font-size: 40px;
color: $dark !important;
opacity: 0.5;
outline: 0 !important;
&:focus {
@include tab-focus();
}
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
&:active {
@include opacity(1);
}
// [converter] extracted button& to button.close
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}

251
styles/color.scss Normal file
View File

@@ -0,0 +1,251 @@
@import "vars";
@import "mixins";
#color-toggles {
background-size: 40px;
border-radius: $radius;
background-color: $dark;
background-image: url('../images/opacity-grid.png');
}
.color-picker {
margin: 6px;
margin-bottom: 0;
width: 256px;
@include backface-visibility(hidden);
&.out .fader-selector {
opacity: 0;
}
.color {
position: relative;
width: 100%;
background-color: #2ecc71;
display: block;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
> div {
top: 0;
display: block;
width: 100%;
height: 100%;
position: absolute;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
&.mask {
background-image: url('../images/huevalue.png');
}
}
}
.color-hue {
position: relative;
width: 100%;
&:before{
content: "";
display: block;
padding-top: 40px; /* initial ratio of 1:1*/
}
background-size: 100% 100%;
background-image: url('../images/hue.png');
}
.color-opacity {
&:before{
content: "";
display: block;
padding-top: 40px; /* initial ratio of 1:1*/
}
position: relative;
width: 100%;
background-size: cover;
background-image: url('../images/opacity-strip.png');
}
}
.color-indicator {
box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
.fader-selector {
padding: 0px;
background-color: transparent;
border: none;
border: 18px solid $dark;
border: 8px solid $dark;
height: 44px;
width: 44px;
margin: -2px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
box-shadow: 0 0 10px 1px rgba(255,255,255,0.2), inset 0 0 10px 1px rgba(255,255,255,0.2);
@include transition( border 0.125s ease-in-out);
@include user-select(none);
@include scale(1,1);
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -1px;
height: 2px;
width: 2px;
background-color: white;
pointer-events: none !important;
border-radius: 100%;
}
&:hover,
&:focus,
&:active {
outline: none;
border: 8px solid $light;
}
&:active {
background-color: white;
}
}
.color-palette {
width: 600px;
text-align: center;
.overflow-y-scroll {
padding-top: 10px;
padding-bottom: 15px;
overflow-y: auto;
.btn {
display: inline-block;
height: 40px;
width: 40px;
min-width: 0;
min-height: 0;
margin-left: 4px;
margin-right: 4px;
margin-top: 8px;
padding: 0px;
// background-color: rgba(255,255,255,0.05);
background-clip: padding-box;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 100%;
background-color: transparent;
background-color: rgba(255,255,255,0.025);
/* aspect ratio without spacer image */
&.active,
&:active {
background-clip: border-box;
border: 2px solid white;
}
.icon {
position: absolute;
left: -3.5px;
top: -2px;
@include icon-md;
}
}
}
}
.color .fader-selector { z-index: 10; left: 120px; top: 120px; margin: -22px; cursor: move; }
.color-hue .fader-selector { z-index: 10; left: 0px; margin: -2px -22px; cursor: ew-resize;}
.color-opacity .fader-selector { z-index: 10; left: 120px; margin: -2px -22px; cursor: ew-resize;}
#colors {
#color-target {
text-align: center;
display: block;
}
@include clearfix;
#color-hex {
@include clearfix;
position: relative;
#color-hash {
position: relative;
margin-left: 40px;
width: 196px;
}
.btn {
position: absolute;
z-index: 100;
}
#add-remove-color {
left: 0px;
}
#color-options-toggle {
right: 0px;
}
div {
position: relative;
width: 100%;
.input {
height: 50px;
line-height: 70px;
}
label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 32px;
font-size: 16px;
opacity: 0.35;
color: #888;
z-index: 10;
text-align: center;
}
}
}
#color-rgba {
position: relative;
@include clearfix;
label {
display: block;
width: 100%;
height: 20px;
line-height: 22px;
font-size: 16px;
opacity: 0.35;
color: #888;
z-index: 10;
text-align: center;
margin-bottom: -14px;
margin-top: 10px;
}
.input {
line-height: 48px;
width: 38px;
}
}
}
.font-size-swatches {
line-height: 50px;
}

33
styles/colors.scss Normal file
View File

@@ -0,0 +1,33 @@
#fill-color-12 { background-color: transparent !important;
background-image: url('../images/opacity-grid.png');
background-size: contain;
}
#fill-color-1 { background-color: #4a2f7e !important;}
#fill-color-2 { background-color: #9b59b6 !important;}
#fill-color-3 { background-color: #3498db !important;}
#fill-color-4 { background-color: #2ecc71 !important;}
#fill-color-5 { background-color: #f1c40f !important;}
#fill-color-6 { background-color: #e67e22 !important;}
#fill-color-7 { background-color: #d55c4b !important;}
#fill-color-8 { background-color: #6f4021 !important;}
#fill-color-9 { background-color: #ffffff !important;}
#fill-color-10 { background-color: #95a5a6 !important;}
#fill-color-11 { background-color: #252525 !important;}
#stroke-color-12 { background-color: transparent !important;
background-image: url('../images/opacity-grid.png');
background-size: contain;
}
#stroke-color-1 { background-color: #4a2f7e !important;}
#stroke-color-2 { background-color: #9b59b6 !important;}
#stroke-color-3 { background-color: #3498db !important;}
#stroke-color-4 { background-color: #2ecc71 !important;}
#stroke-color-5 { background-color: #f1c40f !important;}
#stroke-color-6 { background-color: #e67e22 !important;}
#stroke-color-7 { background-color: #d55c4b !important;}
#stroke-color-8 { background-color: #6f4021 !important;}
#stroke-color-9 { background-color: #ffffff !important;}
#stroke-color-10 { background-color: #95a5a6 !important;}
#stroke-color-11 { background-color: #252525 !important;}

93
styles/column.scss Normal file
View File

@@ -0,0 +1,93 @@
@import "vars";
@import "mixins";
.column-row {
min-height: 100%;
box-sizing: content-box;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
justify-content:center;
margin: auto;
}
.section {
&.active {
.column-border.in {
background-color: rgba(40,140,215,0.25);
border: 1px solid rgba(255,255,255,0.5);
.edge-handle {display: block; }
&:after{
border: 1px dotted rgba(40,140,215,0.5);
}
}
}
}
.column {
min-height: 50px;
// min-height: 100%;
position: relative;
-webkit-flex: 1 auto;
flex: 1 auto;
// background-clip: content-box;
// background-color: rgba(40,140,215,0.0125);
// box-shadow: 0px 0px 0px 1px rgba(40,140,215,0.1);
.artifact {
&:last-child {margin-bottom: 0px; }
&.over {
@include transition( margin-top 0.1s ease-in-out 0.05s);
position: relative;
z-index: 1000;
}
}
&:first-child .column-border .edge-handle:first-child { display: none !important;}
&:last-child .column-border .edge-handle:last-child { display: none !important; }
.column-border {
border: 1px solid rgba(255,255,255,0.125);
// &.in {display: block; }
// border-style: solid;
// border-width: 1px;
// -moz-border-image: url('../images/border-dotted.png') 1 repeat;
// -webkit-border-image: url('../images/border-dotted.png') 1 repeat;
// -o-border-image: url('../images/border-dotted.png') 1 repeat;
// border-image: url('../images/border-dotted.png') 1 fill repeat;
position: absolute;
width: auto;
height: auto;
right: -1px;
left: -1px;
top: -1px;
bottom: -1px;
z-index: 2000;
pointer-events: none;
.edge-handle {display: none; }
&:after{
border: 1px dotted rgba(40,140,215,0.125);
content: "";
display: block;
position: absolute;
width: auto;
height: auto;
right: -1px;
left: -1px;
top: -1px;
bottom: -1px;
}
}
}

231
styles/dialog.scss Normal file
View File

@@ -0,0 +1,231 @@
@import "vars";
@import "mixins";
.separate {
.icon {display: block; }
.icon:after,
.icon:before {
font-size: 20px;
}
h4 {padding: 0px !important; padding-top: 21px !important; }
.label {
display: none !important;
}
.form-group {
width: 33.3333%;
height: 60px;
}
.axis-center {
border: 2px solid rgba(0,0,0,0.025);
}
.axis-left,
.axis-right {
border-top: 2px solid rgba(0,0,0,0.025);
border-bottom: 2px solid rgba(0,0,0,0.025);
}
.axis-left,
.axis-center,
.axis-right {
float: left;
height: 63px;
}
.axis-top,
.axis-bottom {
border-left: 2px solid rgba(0,0,0,0.025);
border-right: 2px solid rgba(0,0,0,0.025);
margin-left: 33.33333% !important;
}
.axis-top .input-drag ,
.axis-left .input-drag ,
.axis-right .input-drag ,
.axis-bottom .input-drag {
}
.axis-top .input-drag {
top: 100%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
}
.axis-left .input-drag {
left: 100%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
}
.axis-right .input-drag {
right: 100%;
top: 50%;
margin-right: -22px;
margin-top: -22px;
left: auto;
}
.axis-bottom .input-drag {
bottom: 100%;
left: 50%;
margin-left: -22px;
margin-bottom: -22px;
}
}
.dialog-side-tabs {
position: absolute;
right: 0;
top: 0;
list-style: none;
padding: 0;
height: 100%;
padding: 15px;
border-left: 2px solid rgba(0,0,0,0.025);
z-index: 100;
border-top-right-radius: $radius*3;
border-bottom-right-radius: $radius*3;
}
.dialog {
font-size: 13px;
ol, ul, p {
font-size: inherit;
}
> .btn-block:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: $radius*3;
border-bottom-right-radius: $radius*3;
}
min-width: 200px;
@include backface-visibility(hidden);
white-space: normal;
z-index: 1000;
position: absolute;
// white-space: normal;
opacity: 0;
@include user-select(none);
@include transition( all 0.125s ease-in-out);
pointer-events: none;
background-color: $light;
color: $medium;
&.dark {background-color: $dark; }
border-radius: $radius*3;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
.dialog-tabs-wrapper {
overflow: hidden;
border-top-left-radius: $radius*3;
border-top-right-radius: $radius*3;
}
.dialog-tabs {
display: table;
width: 100%;
max-width: 800px;
table-layout: auto;
background-color: $lightish;
.dialog-tab {
display: table-cell;
text-align: center;
&:hover span {color: $dark; }
&.open span {
background-color: $light;
color: $dark;
opacity: 1;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: $radius*3;
border-top-right-radius: $radius*3;
}
&:first-child span {
box-shadow: inset 0px -4px 4px -4px rgba(0, 0, 0, 0.1);
// border-top-left-radius: $radius*3;
// border-bottom-right-radius: $radius*3;
}
&:last-child span {
// box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1);
// border-top-right-radius: $radius*3;
// border-bottom-left-radius: $radius*3;
}
span {
box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1);
cursor: pointer;
//font-size: 12px;
//text-transform: uppercase;
//letter-spacing: 0.2em;
text-indent: 4px;
display: block;
width: 100%;
height: 44px;
line-height: 44px;
}
}
}
.dialog-title {
margin: 0;
padding: 15px;
padding-bottom: 0px;
color: $dark;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
text-indent: 4px;
text-align: center;
}
.dialog-section {
&:first-child {border: none !important; }
border-top: 2px solid rgba(0,0,0,0.1);
border-top: 2px solid rgba(0,0,0,0.025);
padding: 15px 20px;
position: relative;
text-align: center;
max-width: 800px;
margin: auto;
.label-sm { margin-bottom: 0px; pointer-events: none;}
.label-sm + input {margin-top: -8px !important; }
.label-sm + .btn-group {margin-top: -8px !important; }
// .input {height: 45px; line-height: 45px; }
&.btn-transparent {
&:hover {color: $dark !important; }
}
&.section-tall {
height: 200px;
}
}
h4 .icon {
height: 38px;
}
}

387
styles/dropdown.scss Normal file
View File

@@ -0,0 +1,387 @@
@import "vars";
@import "mixins";
$delay: 0.05;
$predelay: 0;
.open .contained-dropdown.open {pointer-events: auto; }
.contained-dropdown {
//position: absolute;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
width: 100%;
pointer-events: none;
z-index: 200;
@include transition( all 0.1s ease-in-out);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
// border-radius: 10px;
> * {
opacity: 0;
@include transition( all 0.1s ease-in-out);
}
.overflow-y-scroll {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
@include translateY (1%);
ul li span {
text-align: center;
font-size: $font-size;
line-height: $line-height;
}
}
&.hover:hover,
&.open {
// &:before {opacity: 0.125; }
// pointer-events: auto;
background-color: $dark;
background-color: $light;
> * {
opacity: 1;
}
}
}
.form-list {
padding: 0px;
margin: 0px;
> li {
list-style: none;
color: $medium;;
position: relative;
.dropdown {
position: static;
z-index: initial;
}
> div {border-bottom: 2px solid rgba(255,255,255,0.025); }
&:hover {color: $light; }
}
label {
float: left;
font-size: 12px;
min-width: 0px;
position: absolute;
line-height: 60px;
height: 60px;
padding-left: 20px;
}
}
.dropdown-menu .section {
border-top: 2px solid rgba(0,0,0,0.2);
padding: 15px;
text-align: center;
&:last-child {padding-bottom: 15px; }
}
.btn + .dropdown-group,
.dropdown + .dropdown-group,
.btn-divider + .dropdown-group {
> .dropdown {
> .btn{border-radius: 0px !important; }
}
}
.dropdown-group {
display: inline-block;
vertical-align: middle;
position: relative;
> .dropdown {
position: static;
z-index: initial;
> .btn{border-radius: 0px; }
&:first-child > .btn{
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
&:last-child > .btn{
border-top-right-radius: $radius ;
border-bottom-right-radius: $radius ;
}
}
}
.dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
&.dropdown-block {
display: block;
.dropdown-toggle {
width: 100%;
display: block;
text-align: left;
}
.dropdown-menu {
min-width: 100%;
min-width: 150px;
}
}
&.dark > .dropdown-menu,
&.dark > .dialog {
background: $dark;
color: $medium;
}
&.light > .dropdown-menu,
&.light > .dialog {
background: $light;
color: $medium;
}
> .dropdown-menu {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
@include backface-visibility(hidden);
z-index: 1000;
white-space: nowrap;
position: absolute;
top: 100%;
left: 50%;
margin-top: 8px;
@include opacity(0);
@include user-select(none);
@include transition( all 0.125s ease-in-out);
pointer-events: none;
border-radius: $radius;
> ul,
> div {
position: relative !important;
// background-color: $dark !important;
// color: $light;
&.center { text-align: center; }
&.overflow-y-scroll { max-height: 250px; }
> li {
&:hover {
> a,
> span {
background-color: rgba(255,255,255,0.05);
}
}
> a,
> span {
&:before {
background-color: white;
}
}
}
}
}
&.hover:hover > .dialog,
&.hover:hover > .dropdown-menu,
&.open > .dialog,
&.open > .dropdown-menu {
@include opacity(1);
pointer-events: auto !important;
display: block;
}
&.center {
&.hover:hover,
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-50%, -50%, 100px) scale(1);
-ms-transform: translate3d(-50%, -50%, 100px) scale(1);
transform: translate3d(-50%, -50%, 100px) scale(1);
}
}
> .dialog,
> .dropdown-menu {
left: 50%;
top: 50%;
margin-top: 0px;
@include transform-origin(center center);
-webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
}
}
&.bottomleft {
> .dialog,
> .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 16px;
@include transform-origin(bottom left);
-webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
}
}
&.bottom {
> .dialog,
> .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 16px;
@include transform-origin(bottom center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
}
}
&.top {
> .dialog,
> .dropdown-menu {
top: 100%;
bottom: auto;
margin-top: -16px;
@include transform-origin(top center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
}
}
&.top.right {
> .dialog,
> .dropdown-menu {
top: 100%;
bottom: auto;
left: auto;
right: 0;
margin-top: 16px;
@include transform-origin(top right);
-webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
}
&.hover:hover,
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(0%, 0%, 100px) scale(1);
-ms-transform: translate3d(0%, 0%, 100px) scale(1);
transform: translate3d(0%, 0%, 100px) scale(1);
}
}
}
&.top,
&.bottom,
&.bottomleft {
/*&.open > .btn-group > .btn-icon-labeled:hover,
&.open > .btn-icon-labeled:hover {
.icon-label {opacity: 0; margin: 0; }
.icon:before {line-height: 60px; }
}*/
&.hover:hover,
&.open {
> .btn-dark,
> .btn-group > .btn-dark {
.jewel {
background-color: #fff !important;
border-color: #303030 !important;
}
}
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-50%, 0%, 100px) scale(1);
-ms-transform: translate3d(-50%, 0%, 100px) scale(1);
transform: translate3d(-50%, 0%, 100px) scale(1);
}
}
}
&.bottomleft {
&.hover:hover,
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
-ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
transform: translate3d(-33%, 0%, 100px) scale(1) !important;
}
}
}
}
.dropdown {
&.options-3 {
&.option-1:after { margin-left: -68px;}
&.option-2:after { margin-left: -8px;}
&.option-3:after { margin-left: 52px;}
}
&.option-1:after { margin-left: -38px;}
&.option-2:after { margin-left: 22px;}
&.open:after {
@include transition( all 0.1s ease-in-out 0s);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
&:after {
@include transition( all 0.1s ease-in-out 0s);
content: "";
position: absolute;
bottom: 100%;
width: 0;
height: 0;
// margin-bottom: 8px;
margin-left: -8px;
pointer-events: none !important;
left: 50%;
-webkit-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
}
&.bottom:after, &.bottomleft:after {
@include transform-origin(bottom center);
bottom: 100%;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #303030;
border-left: 8px solid transparent;
}
&.top:after {
@include transform-origin(top center);
top: 100%;
border-bottom: 8px solid #303030;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
}
}

96
styles/editors.scss Normal file
View File

@@ -0,0 +1,96 @@
@import "vars";
@import "mixins";
#editors, #editors-list {
@include user-select(none);
h6 {
padding: 15px 25px;
margin: 0px;
color: $medium;
font-size: 10px;
}
ul {
padding: 0px;
margin: 0px;
li {
&:nth-child(1) .editor-avatar {background-color: #4a2f7e;}
&:nth-child(2) .editor-avatar {background-color: #9b59b6;}
&:nth-child(3) .editor-avatar {background-color: #3498db;}
&:nth-child(4) .editor-avatar {background-color: #2ecc71;}
&:nth-child(5) .editor-avatar {background-color: #f1c40f;}
&:nth-child(6) .editor-avatar {background-color: #e67e22;}
&:nth-child(7) .editor-avatar {background-color: #d55c4b;}
&:nth-child(8) .editor-avatar {background-color: #6f4021;}
&:nth-child(9) .editor-avatar {background-color: #ffffff;}
&:nth-child(10) .editor-avatar {background-color: #95a5a6;}
&:nth-child(11) .editor-avatar {background-color: #252525;}
}
}
}
#invite-message {
height: 117px !important;
}
.editor > a,
.editor > span {
text-align: left;
border-radius: $radius;
display: block;
// background-color: rgba(255,255,255,0.05);
position: relative;
// padding-left: 70px !important;
min-height: 60px;
border: none;
.editor-avatar {
margin-top: 7px;
background-size: cover;
background-position: center;
margin-right: 15px;
float: left;
color: white !important;
&.status-off,
&.status-on {
&:before {
top: 0;
right: 0;
display: block;
position: absolute;
color: $darker ;
border: 1px solid #292929;
border-radius: 100px;
padding: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 0px;
height: 4px;
width: 4px;
}
}
&.status-off:before {background-color: #d55c4b; content: "off"; display: none;}
&.status-on:before {background-color: #2ecc71; content: "on"; }
}
.editor-email,
.editor-name {
font-family: $main-font;
font-size: 13px;
line-height: 1.4;
display: block;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $medium;
}
.editor-email {
opacity: 0.5;
}
}

72
styles/files.scss Normal file
View File

@@ -0,0 +1,72 @@
@import "vars";
@import "mixins";
#files-empty,
#favorites-empty {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
display: table;
pointer-events: none;
color: $medium;
> div {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px;
.btn {
pointer-events: auto;
}
}
}
.files-wrapper {
overflow: hidden;
position: absolute;
top: 120px;
bottom: 0px;
width: 100%;
height: auto;
}
.in-from-left,
.in-from-right,
.out-to-left,
.out-to-right {
@include backface-visibility(hidden);
@include animation-duration(0.225s);
@include animation-iteration-count(1);
@include animation-timing-function(ease-out);
@include animation-fill-mode(forwards);
// overflow: hidden !important;
}
.in-from-left { @include animation-name(in-from-left); }
.in-from-right { @include animation-name(in-from-right); }
.out-to-left { @include animation-name(out-to-left); }
.out-to-right { @include animation-name(out-to-right); }
@-webkit-keyframes in-from-left {
from { @include translateX (-100%); opacity: 0;}
to { @include translateX (0%); opacity: 1; }
}
@-webkit-keyframes in-from-right {
from { @include translateX (100%); opacity: 0; }
to { @include translateX (0%); opacity: 1; }
}
@-webkit-keyframes out-to-left {
from { @include translateX (0%); opacity: 1; }
to { @include translateX (-100%); }
}
@-webkit-keyframes out-to-right {
from { @include translateX (0%); opacity: 1; }
to { @include translateX (100%); opacity: 0; }
}

22
styles/filter.scss Normal file
View File

@@ -0,0 +1,22 @@
@import "vars";
#filter {
.icon {
position: absolute;
opacity: 0.5;
color: $medium;
left: 0;
top: -4px;
display: none;
}
.form-group {
.btn-less { bottom: 0; left: 0px; }
.btn-more { bottom: 0; right: 0px;}
.label {
margin-bottom: -5px;
}
}
}

220
styles/folder-item.scss Normal file
View File

@@ -0,0 +1,220 @@
@import "vars";
@import "mixins";
.item {
min-height: 230px;
float: left;
width: 20%;
position: relative;
margin-right: -1px;
-webkit-transform-style: preserve-3d;
.folder-drop {
display:none;
}
&:hover {
cursor: move;
.handle,
.btn-group > .btn { opacity: 1 !important; }
> a .meta .type { opacity: 1 !important; }
> a .meta .subspaces, .members-online {
opacity: 1 !important;
}
}
&.appear > a,
&.creating > a {
-webkit-animation: appear 0.25s ease-out 0.05s;
-moz-animation: appear 0.25s ease-out 0.05s;
-ms-animation: appear 0.25s ease-out 0.05s;
-o-animation: appear 0.25s ease-out 0.05s;
animation: appear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.deleting > a {
-webkit-animation: disappear 0.25s ease-out 0.05s;
-moz-animation: disappear 0.25s ease-out 0.05s;
-ms-animation: disappear 0.25s ease-out 0.05s;
-o-animation: disappear 0.25s ease-out 0.05s;
animation: disappear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.tag-important > a {
background-color: #f1c40f;
}
&.renaming > a {
background-color: $blue !important;
color: white !important;
}
&.dropping {
.folder-drop {
display:block;
}
}
&.folder > a {
box-shadow: 2px 2px 0px #ccc;
}
> a {
opacity: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: white;
color: #505050;
font-weight: 400;
padding: 20px;
display: block;
text-decoration: none;
min-height: 150px;
font-size: 16px;
border-radius: 3px;
position: absolute;
width: auto;
height: auto;
top: 0px;
right: 30px;
bottom: 30px;
left: 0px;
.meta {
position: absolute;
width: auto;
bottom: 10px;
right: 20px;
left: 20px;
text-transform: uppercase;
font-family: $main-font;
.subspaces, .members-online {
opacity: 0.4;
}
.type {
// padding-left: 20px;
font-weight: 700;
float: left;
padding-left: 19px;
opacity: 0.4;
}
.time {
}
.icon {
position: absolute;
left: 0px;
top: auto;
font-size: 10px;
line-height: 14px;
width: 20px;
}
small {
font-size: 70%;
display: block;
}
}
.image {
display: block;
height: 125px;
margin: -20px;
margin-bottom: 12px;
background-size: cover;
background-color: white;
background-color: rgba(0,0,0,0.0125);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-position: center;
background-repeat: no-repeat;
}
.tag {
position: absolute;
top: 0px;
left: 0px;
background-color: red;
border-radius: 3px;
height: 100%;
width: 2px;
}
}
&.has-image .name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
max-height: 24px;
display: inline-block;
word-break: break-word;
}
.btn-group {
position: absolute;
right: 30px;
top: 0px;
z-index: 2;
> .btn { opacity: 0;}
&.open {
> .btn { opacity: 1; }
> .dropdown-menu {}
}
}
.handle {
position: absolute;
bottom: 0px;
top: auto;
right: 0px;
height: 30px;
width: 30px;
cursor: move;
display: none;
background-image: url("../images/handle.svg");
background-size: 10%;
background-position: bottom right;
background-repeat: no-repeat;
opacity: 0.05;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
&:hover {
width: 50px;
height: 50px;
background-size: 100%;
}
}
&:nth-child(1) > a .tag { background-color: #a45ab9; }
&:nth-child(2) > a .tag { background-color: #e65e85; }
&:nth-child(3) > a .tag { background-color: #f9ad27; }
&:nth-child(4) > a .tag { background-color: #000000; }
&:nth-child(5) > a .tag { background-color: #57c793; }
}

543
styles/folder.scss Normal file
View File

@@ -0,0 +1,543 @@
@import "vars";
@import "mixins";
@import "unicode";
@-webkit-keyframes appear {
0% { opacity: 0;}
30% { opacity: 0;}
100% { opacity: 1; }
}
.avatar {
background-color: $blue;
font-family: $main-font;
color: white;
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
border-radius: $radius;
background-size: cover;
background-position: center;
}
#user-root {
margin-left: 5px !important;
padding: 0px !important;
.btn {margin-right: 10px; }
}
#sidebar.folder-sidebar {
background-color: white !important;
}
#folder-search {
width: 200px;
}
#folder-breadcrumb {
vertical-align: middle;
padding: 20px;
font-size: 0px;
padding-bottom: 30px;
.btn {
.btn-icon {
position: relative;
top: -3px;
margin-right: 7px;
margin-left: 5px;
}
padding-left: 0;
}
.seperator {
padding-left: 10px;
opacity: 0.5;
}
}
#folder-filter {
display: inline-block;
vertical-align: middle;
list-style: none;
padding: 0;
margin: 0;
padding-right: 20px;
li {
display: inline-block;
line-height: 44px;
&.active span {color: $light; }
span {
color: $medium;
display: inline-block;
cursor: pointer;
line-height: 44px;
font-size: 15px;
padding: 0 5px;
}
}
}
#folder {
position: absolute;
height: 100%;
width: 100%;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
z-index: 1000;
@include clearfix();
@include user-select(none);
}
#folder-empty {
top: 0;
left: 0;
pointer-events: none;
position: absolute;
display: table;
height: 100%;
width: 100%;
> div {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 40px;
.wrapper {
height: auto;
min-height: 0;
}
p {
border-radius: 100px;
font-size: $font-size;
line-height: $line-height;
display: block;
color: $medium;
}
}
}
#folder-table {
// margin: 0 -40px;
margin-bottom: 40px;
width: auto;
td {
position: relative;
}
.dropdown {
position: static;
z-index: initial;
}
.folder .icon {
color: $yellow;
opacity: 1;
}
.item-title {
width: 100%;
a {
display: inline-block;
height: 70px;
line-height: 70px;
width: 100%;
}
> .icon {
margin-left: -15px
}
}
td.item-type {
width: 1%;
text-transform: capitalize;
}
.item-date {
text-align: right;
width: 1%;
}
.item-action {
width: 1%;
padding-left: 0px;
padding-right: 30px;
}
.fav-toggle {
z-index: 500;
// margin-left: -15px;
// margin-top: -18px;
margin-right: -60px;
// margin-bottom: -18px;
@include transition( all 0.125s ease-in-out);
.icon {
left: 0px;
top: 0px;
line-height: 60px;
font-size: 13px;
position: absolute;
@include scale(0,0);
@include transition( all 0.125s ease-in-out);
@include opacity(0.25);
}
&:hover {
margin-right: -12px;
.icon {
@include scale(1,1);
}
}
}
}
#folder-header {
background-color: rgba(41,41,41,0.95);
background-color: rgba(245,245,245,0.95);
}
#folder-wrapper {
padding-top: 64px;
}
#folder-grid,
#folder-header {
width: 100%;
margin: auto;
}
#folder-grid .item {
float: left;
width: 100%;
@media screen and (min-width: 640px) {width: 50%; }
@media screen and (min-width: 800px) {width: 33.333333%; }
@media screen and (min-width: 1000px) {width: 25%; }
@media screen and (min-width: 1200px) {width: 20%; }
}
.compact-hidden {
@media screen and (max-width: 900px) {
display: none;
}
}
#folder-grid {
padding-bottom: $folder-gutter;
padding-left: $folder-gutter;
padding-right: $folder-gutter;
@include clearfix();
position: relative;
z-index: 400;
text-align: left;
width: 100%;
margin: auto;
// -webkit-line-break: after-white-space;
// -webkit-column-width: 400px;
// -webkit-column-gap: $gutter-c;
// -webkit-column-fill: balance;
// -moz-line-break: after-white-space;
// -moz-column-width: 400px;
// -moz-column-gap: $gutter-c;
// -moz-column-fill: balance;
// word-wrap: break-word;
.item {
box-shadow: 0 0 1pxrgba(0,0,0,0.1);
display: inline-block;
text-align: left;
padding-right: $folder-gutter*2;
padding-bottom: $folder-gutter*2;
margin-bottom: $folder-gutter;
position: relative;
@include backface-visibility(hidden);
cursor: pointer;
.folder-drop {display:none; }
&.appear > a,
&.creating > a {
opacity: 0;
-webkit-animation: appear 0.25s ease-out 0.05s;
-moz-animation: appear 0.25s ease-out 0.05s;
-ms-animation: appear 0.25s ease-out 0.05s;
-o-animation: appear 0.25s ease-out 0.05s;
animation: appear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.deleting > a {
-webkit-animation: disappear 0.25s ease-out 0.05s;
-moz-animation: disappear 0.25s ease-out 0.05s;
-ms-animation: disappear 0.25s ease-out 0.05s;
-o-animation: disappear 0.25s ease-out 0.05s;
animation: disappear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
&.tag-important > a {
background-color: #f1c40f;
}
&.renaming > a {
background-color: $blue !important;
color: white !important;
}
&.dropping {
.folder-drop {
display:block;
}
}
&.folder button {
color: black;
}
&.folder > a {
&:after {
content: "";
height: 6px;
left: 6px;
position: absolute;
right: 6px;
top: -6px;
border-top-left-radius: $radius * 2;
border-top-right-radius: $radius * 2;
display: block;
background-color: #2664b7;
}
top: 0px;
background-color: $blue;
.item-thumbnail {
bottom: 0px;
//opacity: 0.05;
z-index: 1;
}
.item-title {
background-color: transparent;
color: $light;
&:before {
content: "";
display: block;
width: 100%;
height: 100px;
background-color: $darker;
position: absolute;
bottom: 2px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
background-color: black;
pointer-events: none;
}
}
}
&.favorite {
.fav-toggle {
margin-right: -12px;
.icon {
@include scale(1,1);
@include opacity(1);
}
}
}
.item-type:before {
@include icon;
@include icon-sm;
top: -6px;
left: -6px;
}
&.folder-up:before,
&.folder .item-type:before {
@extend .icon-folder:before;
}
&.space .item-type:before {
@extend .icon-page-horizontal:before;
}
> a {
/* aspect ratio without spacer image */
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
padding-top: 80%;
}
background-color: white;
border-radius: $radius*2;
&:active { opacity: 0.95 !important; }
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.025), 0 2px 7px rgba(0, 0, 0, 0.025);
@include opacity(1);
color: $medium;
// color: white;
font-weight: 400;
display: block;
text-decoration: none;
border-radius: $radius*2;
position: relative;
.item-thumbnail {
@include transition(all 0.125s ease-in-out);
display: block;
height: auto;
top: 0px;
bottom: 0px;
position: absolute;
width: 100%;
overflow: hidden;
background-size: cover;
background-color: transparent;
border-top-left-radius: $radius*2;
border-top-right-radius: $radius*2;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-position: center 100%;
background-repeat: no-repeat;
}
.item-title {
display: block;
border-top: 1px solid rgba(0,0,0,0.05);
background-color: white;
font-size: 18px;
width: 100%;
padding: 16px 25px;
left: 0px;
bottom: 0px;
position: absolute;
border-bottom-left-radius: $radius*2;
border-bottom-right-radius: $radius*2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $dark;
text-align: left;
}
.thumbnail-loading {
position: absolute;
z-index: 0;
background-color: white;
background-image: url("/images/spinner2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
}
&.folder .item-title {
//background-color: $blue;
}
.item-meta {
border-top: 2px solid rgba(0,0,0,0.025);
border-radius: 2*$radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
@include clearfix;
color: $medium;
position: absolute;
bottom: 40px;
right: 40px;
left: 0px;
z-index: 100;
width: auto;
background-color: rgba(255,255,255,1);
.dropdown {
position: absolute;
bottom: 0;
right: 0;
}
.item-title {
display: block;
font-size: 18px;
width: auto;
padding: 16px 25px;
padding-right: 40px;
left: 0px;
bottom: 0px;
position: relative;
border-bottom-left-radius: $radius*2;
border-bottom-right-radius: $radius*2;
//white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $dark;
text-align: left;
}
.item-social {
padding: 8px;
border-right: 2px solid rgba(0,0,0,0.025);
@include clearfix;
color: $medium;
.item-likes,
.item-comments,
.item-shares {
position: relative;
&:hover {
.icon {opacity: 0; }
.number {opacity: 1; }
}
.number {
position: absolute;
opacity: 0;
top: 0;
left: 0;
}
.icon {opacity: 0.5; }
}
}
}
.item-appendix {
pointer-events: none;
width: auto;
position: absolute;
bottom: 0;
left: 0;
right: $folder-gutter*2;
color: $medium;
font-size: 11px;
font-family: $main-font;
text-align: left;
}
}
}

142
styles/form-checkbox.scss Normal file
View File

@@ -0,0 +1,142 @@
@import "vars";
@import "mixins";
@import "unicode";
.checkbox.checked:before { opacity: 1; @extend .icon-input-checkbox-checked:before;}
.radio.checked:before { opacity: 1; @extend .icon-input-radio-checked:before;}
.checkbox:hover:before { @extend .icon-input-checkbox-checked:before;}
.radio:hover:before { @extend .icon-input-radio-checked:before;}
.checkbox:active:before { opacity: 1; @extend .icon-input-checkbox-checked:before; }
.radio:active:before { opacity: 1; @extend .icon-input-radio-checked:before; }
.checkbox:hover:before { @extend .icon-input-checkbox-checked:before; }
.radio:hover:before { @extend .icon-input-radio-checked:before; }
.checkbox:active { color: white; }
.radio:active { color: white; }
@media screen and (-webkit-min-device-pixel-ratio:0) {}
.radio,
.checkbox {
@include user-select(none);
display: inline-block !important;
padding: 20px 10px;
padding-left: 35px;
line-height: 1.5;
width: 100%;
text-align: left;
color: $medium;
font-weight: normal;
cursor: pointer;
border-radius: $radius;
vertical-align: middle;
position: relative;
input {
padding: 0;
margin:0;
vertical-align: bottom;
*overflow: hidden;
cursor: pointer;
position: absolute;
left: 14px;
top: 50%;
margin-top: -5px;
width: 14px;
height: 14px;
display: none;
}
&:before {
opacity: 0.25;
@include icon;
@extend .icon-input-radio:before;
margin-left: -18px;
// margin-top: -8px;
line-height: 60px;
position: absolute;
left: 0;
top: 0;
}
&.plain {
background-color: transparent;
margin: 0;
margin-top: -6px;
padding: 0px;
line-height: 44px;
padding-left: 33px;
width: 100%;
input {
margin-top: -7px;
left: 6px;
}
&:after {
background-color: #121212;
-webkit-box-shadow: 0 0 0 4px #121212;
box-shadow: 0 0 0 4px #121212;
}
}
&.only {
margin: 0;
width: 100%;
text-align: left;
line-height: 60px !important;
vertical-align: middle;
position: relative;
background-color: transparent;
padding: 0px !important;
font-size: 0px;
width: 60px;
height: 60px;
input {
float: none;
margin: 0px;
position: absolute;
top: 50%;
left: 50%;
margin: -7px;
}
&:before {
margin-top: 0px;
margin-left: 0px;
}
}
&.input-lg {
padding: 22px;
padding-left: 50px;
font-size: 16px;
height: 65px;
line-height: 20px;
height: 65px;
font-weight: 300;
input {
margin-top: -8px;
left: 20px;
}
&:after {
margin-top: -12px;
margin-left: 16px;
}
}
}
.checkbox-group > * {
display: inline-block !important;
width: auto !important;
padding-right: 15px !important;
}

12
styles/form-file.scss Normal file
View File

@@ -0,0 +1,12 @@
.file {
input {
visibility: hidden;
width: 0;
height: 0;
position: absolute;
}
display: inline-block !important;
overflow: hidden;
cursor: pointer;
}

152
styles/form-input-group.scss Normal file
View File

@@ -0,0 +1,152 @@
@import "vars";
.number .slash {
margin-left: -2px;
margin-right: -2px;
top: -2px;
position: relative;
}
.slash {
font-size: 20px;
opacity: 0.4;
color: inherit;
margin-top: -4px;
margin-left: 5px;
margin-right: 6px;
}
.input-couple {
position: relative;
display: inline-block;
vertical-align: middle;
}
.input-couple {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
table-layout: fixed;
&.divided {
> div {
padding-top: 15px ;
display: table-cell;
border-right: 2px solid rgba(0,0,0,0.025);
&:last-child {border: none; }
}
}
> div {
display: table-cell;
&:first-child .form-group { padding-right: 10px; .label,.input {text-align: right !important;} }
&:last-child .form-group { padding-left: 10px; .label,.input {text-align: left !important;} }
.unit { display: none;}
}
.slash {
position: absolute;
font-size: 20px;
opacity: 0.4;
right: 3px;
bottom: 0px;
width: 0;
height: 60px;
line-height: 60px;
color: inherit;
}
.times {
position: absolute;
font-size: 20px;
opacity: 0.4;
right: 7px;
bottom: 0px;
width: 0;
height: 60px;
line-height: 60px;
}
}
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
> * {
display: table-cell;
width: 100%;
}
.input {
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
// border-right: none;
}
.form-group {
padding: 0px;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
// padding-left: 3px;
.btn {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.input {
border-left: none;
}
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
// margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
// margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
// margin-left: -1px;
}
}
}

64
styles/form-range.scss Normal file
View File

@@ -0,0 +1,64 @@
@import "vars";
@import "mixins";
.range-wrapper {
@include user-select(none);
display: inline-block;
position: relative;
width: 100%;
height: 26px;
padding-top: 24px;
}
input[type='range'] {
display: inline-block;
-webkit-appearance: none !important;
background-color: rgba(0,0,0,0.05);
height: 2px;
border-radius: $radius*10 !important;
outline: 0;
vertical-align: middle;
width: 100%;
}
input[type='range']::-webkit-slider-thumb {
background-color: $medium;
border-radius: $radius;
-webkit-appearance: none !important;
height:44px;
width:44px;
border-radius: 100%;
background-clip: content-box;
border: 13px solid transparent;
// &:after {
// content: "100%";
// display: block;
// }
&:active{
background-color: $darker !important;
}
}
.output-wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 60px;
width: auto;
}
output {
font-size: 11px;
line-height: 1;
background-clip: padding-box;
color: #999;
font-family: Avenir;
position: absolute;
display: inline-block;
top: 0;
right: 0;
pointer-events: none;
vertical-align: middle;
letter-spacing: 0.1em;
}

26
styles/form-select.scss Normal file
View File

@@ -0,0 +1,26 @@
@import "vars";
@import "mixins";
.input-select {
// background-color: rgba(255,255,255,0.04);
// background-image: url('images/select_arrow.gif');
border-radius: $radius;
display: inline-block;
width: 100%;
}
@-moz-document url-prefix() {
select.input{
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
}
select {
-webkit-appearance:none;
// -moz-appearance:window;
appearance:none;
padding-left: 0px;
width: 100%;
}

699
styles/form.scss Normal file
View File

@@ -0,0 +1,699 @@
@import "vars";
@import "mixins";
.input-row {
display: table !important;
width: 100%;
table-layout: fixed;
> div {
display: table-cell !important;
border-right: 2px solid rgba(0,0,0,0.025);
&:first-child{}
&:last-child{ border: none;}
}
}
input:invalid {
box-shadow: none;
}
.error-note {
position: absolute;
top: 0;
right: 0;
line-height: 1;
font-size: 10px;
margin: 12px;
color: red;
margin-right: 25px;
opacity: 0.7;
font-weight: bold;
text-transform: uppercase;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
width: 0 !important;
}
select {
height: 40px !important;
}
.input {
text-rendering: optimizeLegibility;
@include user-select(text);
display: inline-block;
width: 100%;
outline: none;
border: none;
border-radius: $radius;
// padding-left: 20px;
padding: 0 1em ;
margin: 0px;
max-width: 100%;
vertical-align: middle;
font-weight: 300;
font-family: $main-font;
font-size: $font-size;
line-height: normal;
//line-height: 60px;
color: $dark;
background-color: rgba(0,0,0,0.01);
border: 1px solid rgba(0,0,0,0.1);
height: 60px;
text-align: left;
&.input-single-line {
width: 100%;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.input-darken {
background-color: rgba(0,0,0,0.05) !important;
}
&.input-round {
border-radius: 70px !important;
}
&.input-nude {
padding: 0px !important;
background-color: transparent !important;
border: none !important;
}
&.input-block {
width: 100%;
display: block;
}
&.input-md {
height: 44px;
line-height: 44px;
font-size: 15px !important;
padding-left: 12px;
}
&.input-sm {
height: 44px;
line-height: 44px;
font-size: 16px;
}
&.text-center {text-align: center !important; padding: 0px !important;}
&.text-right {text-align: right !important; padding-right: 20px !important; padding-left: 0 !important;}
&.input-white {
background-color: white;
color: $medium;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1);
}
&.input-light {
background-color: $light;
color: $medium;
}
&.input-dark {
background-color: $darker;
color: $medium;
}
&.input-lighten {
background-color: rgba(255,255,255,0.05);
color: $medium !important;
}
&.input-darken {
background-color: rgba(0,0,0,0.05);
color: $medium;
}
&.input-transparent {
background-color: transparent;
color: $medium;
}
// &:focus {color: white; }
&:invalid {
// background-color: rgba(198,101,84,0.05);
// color: rgba(198,101,84,0.75)
&:after {
}
}
@include input-focus();
@include placeholder();
&[disabled],
&[readonly],
fieldset[disabled] & {
// cursor: not-allowed;
cursor: default;
// background-color: rgba(255,255,255,0.02);
// color: #555;
opacity: 1; // iOS fix for unreadable disabled content
}
}
input[type=text],
span.input{ cursor: text !important;}
input[type=number],
input[type=number]:hover {
-webkit-appearance: none !important;
-moz-appearance: textfield !important;
box-shadow:none;
&::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
}
textarea.input {
resize: none;
padding: 15px 20px;
overflow: auto;
min-height: 120px;
line-height: 30px !important;
}
.tab-switch {
display: block;
position: relative;
width: 100%;
@include clearfix;
background-color: rgba(0,0,0,0.025);
border-radius: $radius*2;
cursor: pointer;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.025);
border: 2px solid rgba(0, 0, 0, 0.025);
&.round {
border-radius: 100px;
.option-highlight {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
&.option-2 .option-highlight {
border-top-left-radius: $radius*2;
border-bottom-left-radius: $radius*2;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
&.options-3 {
.option-highlight {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
&.option-2 .option-highlight {
border-top-left-radius: $radius*2;
border-bottom-left-radius: $radius*2;
border-top-right-radius: $radius*2;
border-bottom-right-radius: $radius*2;
}
&.option-3 .option-highlight {
border-top-left-radius: $radius*2;
border-bottom-left-radius: $radius*2;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
}
}
&.options-3 {
.option-highlight,
.option {width: 33.333%; }
&.option-2 .option-highlight {left: 33.333%; }
&.option-3 .option-highlight {left: 66.666%; }
}
&.option-2 .option-highlight {
left: 50%;
}
.options {
display: block;
}
.option {
&:first-child {border-left: none !important;}
&:last-child {border-right: none !important;}
display: block;
width: 50%;
float: left;
height: 44px;
line-height: 44px;
border-radius: $radius;
text-align: center;
z-index: 10;
position: relative;
font-size: 13px;
text-transform: capitalize;
border-right: 1px solid rgba(0, 0, 0, 0.025);
border-left: 1px solid rgba(0, 0, 0, 0.025);
color: $dark;
&:hover {color: $darker; }
}
.option-highlight {
height: 44px;
width: 50%;
left: 0;
@include transition(all 0.1s ease-in-out);
position: absolute;
background-color: white;
z-index: 0;
border-radius: $radius*2;
border: 4px solid transparent;
background-clip: content-box;
}
}
.input-switch {
border-radius: 60px;
height: 44px;
line-height: 44px;
display: inline-block;
width: 75px;
overflow: hidden;
background-color: rgba(0,0,0,0.05);
position: relative;
cursor: pointer;
background-clip: content-box;
border: 7px solid transparent;
margin-top: -7px;
margin-bottom: -7px;
margin-right: -7px;
.input-switch-slide {
height: 30px;
line-height: 30px;
white-space: nowrap;
font-size: 0;
width: 44*3px;
}
&.on {
> .input-switch-slide {
margin-left: -30px;
background-color: $green;
}
}
span {
display: inline-block;
float: left;
line-height: 30px;
margin-left: 0px;
height: 30px;
width: 44*2px;
vertical-align: middle;
text-align: center;
@include transition(all 0.1s ease-in-out);
&.off { text-align: right; padding-right: 4px;}
&.on { text-align: left; padding-left: 4px; color: white; }
&.off,
&.on {
@include transition(all 0.1s ease-in-out);
font-size: 12px;
font-weight: bold;
width: 30px;
}
&.handle {
width: 30px;
background-color: white;
border-radius: 100%;
background-clip: content-box;
border: 5px solid transparent;
z-index: 10;
@include transition(all 0.1s ease-in-out);
}
}
}
/*
.editable,
[contentEditable=true] {
cursor: text;
}
*/
.input-focus-dark {
&:empty:focus{color: $darker !important; }
&:focus{color: $darker !important; }
}
.input-prefix {
line-height: 60px;
&:before {
content:attr(data-placeholder);
color: $medium;
text-transform: capitalize;
opacity: 0.5;
}
&:after {
content: ".";
opacity: 0;
}
}
.input.input-transitional {
line-height: 1.7 !important;
display: block;
height: auto !important;
font-size: 15px !important;
// max-width: 200px;
min-height: 60px;
padding: 8px 20px;
padding-top: 12px;
position: relative;
text-align: left;
height: auto;
@include transition( all 0.1s ease-in-out);
&.input-lg {
font-size: 20px !important;
}
&:before {
@include transform-origin(top left);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
content:attr(data-placeholder);
@include transition( all 0.1s ease-in-out);
left: 0;
top: 0;
position: absolute;
height: 60px;
line-height: 60px;
font-size: 15px;
padding: 0 20px;
margin-top: 0px;
color: $medium;
text-transform: capitalize;
}
// &:empty:not(:focus):before{opacity: 0.5; }
&:empty:focus:before{
opacity: 1;
color: $darker !important;
}
&:empty {padding-top: 20px; }
&:not(:empty) {padding-top: 25px; }
&:not(:empty):before {
opacity: 1;
height: 35px;
line-height: 35px;
font-size: 11px;
}
}
.editable:empty:before,
[data-placeholder][contentEditable=true]:empty:not(:focus):before{
content:attr(data-placeholder);
opacity: 0.6;
}
[data-placeholder][contentEditable=true]:empty:focus:before{
content:attr(data-placeholder);
opacity: 0.6;
}
form {
@include clearfix();
.alert {
margin-top: 10px;
text-align: center !important;
}
}
.form-set {
.form-group {
padding: 25px;
border-bottom: 2px solid rgba(0,0,0,0.05);
margin: 0;
}
}
.labels-inline .form-group {
display: table !important;
width: 100%;
margin-bottom: 15px;
> .input-wrapper,
> .input,
> .label {
display: table-cell !important;
&:first-child{
width: 130px;
vertical-align: top;
padding-top: 5px;
}
&:last-child{
width: 100%;
}
}
}
.inverted {
a {color: $blue-lighter; cursor: pointer;
&:hover {color: $light; }
}
.label {color: $light; }
.input {color: $light; border-color: $blue-light;
@include placeholder_inverted();
}
.btn-link {color: $light !important; }
}
.fieldset {
padding: 20px 30px;
padding-bottom: 30px;
background-color: rgba(255,255,255,0.04);
margin-bottom: 30px;
}
.form-group {
@include clearfix();
display: block;
margin-bottom: 30px;
position: relative;
&:last-child {margin-bottom: 0px; }
small {
float: left;
width: 100%;
display: block;
margin-top: 5px;
color: #444;
margin-bottom: -20px;
}
&.tight {
margin-bottom: 5px;
}
.flag {
// position: absolute;
// display: block;
// left: 0;
// top: 50%;
// height: 30px;
// width: 30px;
// margin-top: -15px;
// border-radius: 100%;
background-size: cover;
background-position: center;
&.england { background-image: url('../images/flags/england.svg');}
&.italy { background-image: url('../images/flags/italy.svg');}
&.germany { background-image: url('../images/flags/germany.svg');}
&.france { background-image: url('../images/flags/france.svg');}
&.spain { background-image: url('../images/flags/spain.svg');}
}
}
.tight .form-group {
margin: 0px;
padding: 0px;
&:first-child {
> .input{
border-top-left-radius: $radius;
border-top-right-radius: $radius;
}
}
&:last-child {
margin-bottom: 30px;
> .input{
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
}
& + .form-group {
> .input{
border-top: 0px !important;
}
}
> .input{
border-radius: 0px;
}
}
.label {
margin-bottom: 10px;
display: block;
font-size: 13px;
line-height: 1;
color: $dark;
font-family: $main-font;
width: 100%;
white-space: nowrap;
&.label-sm {
font-size: 12px;
// text-transform: uppercase;
// letter-spacing: 0.05em;
text-align: center;
}
&.label-range {
margin-bottom: -13px !important;
font-size: 11px;
text-align: left;
}
}
.message {
display: block;
font-size: 13px;
margin-top: 5px;
opacity: 0.5;
}
.input-unit {
width: 44px;
text-align: center;
display: inline-block;
line-height: 60px;
height: 60px;
font-size: 12px;
opacity: 0.5;
text-transform: uppercase;
color: $medium;
vertical-align: middle;
position: absolute;
right: 0;
bottom: 0;
}
.input-drag {
vertical-align: middle;
position: absolute !important;
left: 0;
bottom: 0;
// opacity: 0.5;
width: 44px;
min-width: 44px !important;
z-index: 100;
color: #c7c7c7;
cursor: ns-resize !important;
&.btn-md {
width: 44px;
min-width: 44px !important;
}
.icon {
width: 44px;
&:after,
&:before {
width: 44px;
}
}
&:active {opacity: 1; }
* {
pointer-events: none;
}
}
.input-overlay-wrapper{
position: relative;
.input-overlay {
display: block;
width: 100%;
padding-left: 20px;
max-width: 100%;
font-weight: 300;
font-family: $main-font;
font-size: 22px;
line-height: 60px;
color: $medium;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0.25;
}
#user-slug{padding-left: 183px; }
}
// .form-group {
// .input {
// &:first-child {
// border-top-left-radius: $radius;
// border-top-right-radius: $radius;
// }
// &:last-child {
// border-bottom-left-radius: $radius;
// border-bottom-right-radius: $radius;
// }
// &:first-child:last-child {
// border-radius: $radius;
// }
// &:not(:last-child) {
// border-bottom: none;
// }
// border-radius: 0;
// }
// }

65
styles/guides.scss Normal file
View File

@@ -0,0 +1,65 @@
@import "vars";
@import "mixins";
$guide-gutter: 50px !default;
.space-guides {
position:absolute;
height:auto;
width: auto;
z-index: 5000;
pointer-events: none !important;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
// compensate for border spacing
// width: auto;
// left: -50px;
// right: -50px;
table {
@include box-sizing(content-box);
width: 100%; // space width + (border spacing * 2)
height:100%;
position:absolute;
table-layout: auto;
border-collapse: separate;
border-spacing: $guide-gutter 0px;
// border-collapse: collapse;
// border-spacing: 0px 0px;
.column td {
border:1px solid rgba(40,140,215,0.6);;
// background-color:rgba(40,140,215,0.125);
&:first-child {
// border-left:1px solid #448afe;
}
// -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.075), 0 0 10px rgba(255,255,255, 0.075);
}
.margin-top td,
.margin-bottom td {
// background-color:rgba(40,140,215,0.1);
border-top:none;
border-bottom:none;
border-right:1px solid rgba(40,140,215,0.125);
border-left:1px solid rgba(40,140,215,0.125);;
height: $guide-gutter;
}
&.no-gutter .margin-top td:first-child,
&.no-gutter .margin-bottom td:first-child {
border-left:1px solid rgba(40,140,215,0.125);
}
&.no-gutter .column td,
&.no-gutter .margin-top td,
&.no-gutter .margin-bottom td{
border-left:none;
}
}
}

465
styles/handles.scss Normal file
View File

@@ -0,0 +1,465 @@
@import "vars";
@import "mixins";
.artifact {
.selection-actions {display: none; }
&.selected {
.selection-actions {display: block; }
}
}
.selection-actions {
position: absolute;
right: 0;
top: 0;
padding: 10px;
pointer-events: auto;
}
@mixin tri-s {
&:after {
top: 100%;
margin-left: -13px;
left: 50%;
margin-top: -5px;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 13px solid $dark;
}
}
@mixin tri-n {
&:after {
bottom: 100%;
margin-left: -13px;
left: 50%;
margin-bottom: -5px;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid $dark;
}
}
@mixin tri-e {
&:after {
left: 100%;
margin-top: -13px;
top: 50%;
margin-left: -5px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 13px solid $dark;
}
}
@mixin tri-w {
&:after {
right: 100%;
margin-top: -13px;
top: 50%;
margin-right: -5px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 13px solid $dark;
}
}
.selected .handles {
display: block;
// box-shadow: 0 0 0 1px rgba(41,41,41,0.4);
}
.handles {
// background-color: rgba(40,140,215,0.45);
border: 1px solid rgba(255,255,255,0.5);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 800;
pointer-events: none;
&:after{
border: 1px dotted rgba(40,140,215,1);
content: "";
display: block;
position: absolute;
height: auto;
width: auto;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}
.extreme-zoom .handles {
border: 8px solid rgba(255,255,255,0.5);
&:after{
border: 8px dotted rgba(40,140,215,1);
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
}
}
.extreme-zoom .handle {
@include scale(8,8);
&:hover {
@include scale(12,12);
}
}
.mouse-scribble, .mouse-vector_transform {
.handles, .handles:after {
display: none !important;
}
}
// .n-resize { cursor: n-resize; }
// .e-resize { cursor: e-resize; }
// .s-resize { cursor: s-resize; }
// .w-resize { cursor: w-resize; }
// .ns-resize { cursor: ns-resize; }
// .ew-resize { cursor: ew-resize; }
// .ne-resize { cursor: ne-resize; }
// .nw-resize { cursor: nw-resize; }
// .se-resize { cursor: se-resize; }
// .sw-resize { cursor: sw-resize; }
// .nesw-resize { cursor: nesw-resize; }
// .nwse-resize { cursor: nwse-resize; }
.resize-nw {
.value-w {
right: 35px;
top: -10px;
@include transform-origin(center right);
@include tri-e;
}
.value-h {
left: -10px;
bottom: 35px;
@include transform-origin(bottom center);
@include tri-s;
}
}
.resize-ne {
.value-w {
left: 35px;
top: -10px;
@include tri-w;
@include transform-origin(center left);
}
.value-h {
right: -10px;
bottom: 35px;
@include transform-origin(bottom center);
@include tri-s;
}
}
.resize-se {
.value-w {
left: 35px;
bottom: -10px;
@include tri-w;
@include transform-origin(center left);
}
.value-h {
right: -10px;
top: 35px;
@include transform-origin(top center);
@include tri-n;
pointer-events: none;
}
}
.resize-sw {
.value-w {
right: 35px;
bottom: -10px;
@include tri-e;
@include transform-origin(center right);
// border-top-left-radius: 5px;
// border-bottom-left-radius: 5px;
}
.value-h {
left: -10px;
top: 35px;
@include transform-origin(top center);
@include tri-n;
// border-bottom-left-radius: 5px;
// border-bottom-right-radius: 5px;
}
}
.resize-n {
.value-h {
margin-left: -20px;
left: 50%;
bottom: 20px;
@include transform-origin(bottom center);
@include tri-s;
}
}
.resize-e {
.value-w {
left: 20px;
top: 50%;
margin-top: -20px;
@include tri-w;
@include transform-origin(center left);
}
}
.resize-s {
.value-h {
left: 50%;
margin-left: -20px;
top: 20px;
@include transform-origin(top center);
@include tri-n;
}
}
.resize-w {
.value-w {
right: 20px;
top: 50%;
margin-top: -20px;
@include tri-e;
@include transform-origin(center right);
}
}
.value-h,
.value-w {
z-index: 1;
line-height: 40px;
width: 40px;
height: 40px;
display: inline-block;
position: absolute;
border-radius: 100%;
// border-radius: $radius;
@include scale(0,0);
// opacity: 0;
pointer-events: none !important;
@include transition( all 0.1s 0.05s ease-in-out);
text-align: center;
background-color: $dark;
color: $light;
font-size: 10px;
&:after {
@include transition( all 0.3s ease-in-out);
content: "";
position: absolute;
width: 0;
height: 0;
pointer-events: none !important;
}
}
.handle > div > div > div:active .value-w,
.handle:active .value-h{
@include transition( all 0.05s 0s cubic-bezier(0, 0, 0.7, 1.7));
opacity: 1;
@include scale(1,1);
}
.edge-handle:active .value-w,
.edge-handle:active .value-h{
@include transition( all 0.05s 0s cubic-bezier(0, 0, 0.7, 1.7));
opacity: 1;
@include scale(1,1);
}
.edge-handle {
@include user-select(none);
pointer-events:auto;
z-index: 1000;
position: absolute;
background-clip: content-box;
@include transition( background-color 0.05s ease-in-out);
&:active,
&:hover {
background-color: $blue;
@include transition( background-color 0s ease-in-out);
}
&.resize-n,
&.resize-s {
width: 100%;
height: 10px;
}
&.resize-w,
&.resize-e {
width: 10px;
height: 100%;
}
&.resize-n:active { border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
&.resize-s:active { border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
&.resize-w:active { border-left: 3px solid transparent; border-right: 3px solid transparent; }
&.resize-e:active { border-left: 3px solid transparent; border-right: 3px solid transparent; }
&.resize-n { &:active,&:hover, { cursor: ns-resize;}}
&.resize-s { &:active,&:hover, { cursor: ns-resize;}}
&.resize-w { &:active,&:hover, { cursor: ew-resize;}}
&.resize-e { &:active,&:hover, { cursor: ew-resize;}}
&.resize-n { border-top: 4px solid transparent; border-bottom: 4px solid transparent; bottom: 100%; margin-bottom: -5px; }
&.resize-s { border-top: 4px solid transparent; border-bottom: 4px solid transparent; top: 100%; margin-top: -5px; }
&.resize-w { border-left: 4px solid transparent; border-right: 4px solid transparent; right: 100%; margin-right: -5px; }
&.resize-e { border-left: 4px solid transparent; border-right: 4px solid transparent; left: 100%; margin-left: -5px; }
}
.vector-handle {
@include user-select(none);
pointer-events:auto;
z-index: 2000;
position: absolute;
width: 30px !important;
height: 30px !important;
border-radius: 100%;
margin: -15px;
border: 1px solid rgba(0,0,0,0.25);
&:hover {
background-color: rgba(255,255,255,0.5);
cursor: move;
}
}
.handles-vector {
.handle, .edge-handle {
display: none !important;
}
}
.handles:not(.handles-vector) .vector-handle {
display: none;
}
.handle {
@include user-select(none);
pointer-events:auto;
z-index: 2000;
position: absolute;
width: 60px !important;
height: 60px !important;
border-radius: 100%;
margin: -30px;
@include transition(all 0.1s ease-in-out);
@include scale(0.5,0.5);
&:hover {
@include scale(1,1);
.value-h,
.value-w {
display: block;
}
}
// &:after {
// @include transition( all 0.3s ease-in-out);
// content: "";
// position: absolute;
// top: 0px;
// margin-left: -20px;
// width: 0;
// height: 0;
// border-left: 20px solid transparent;
// border-right: 20px solid transparent;
// border-top: 20px solid $dark;
// pointer-events: none !important;
// left: 50%;
// }
&.resize-nw { top: 0%; left: 0%;}
&.resize-n { top: 0%; left: 50%;}
&.resize-ne { top: 0%; left: 100%;}
&.resize-e { top: 50%; left: 100%;}
&.resize-se { top: 100%; left: 100%;}
&.resize-s { top: 100%; left: 50%;}
&.resize-sw { top: 100%; left: 0%;}
&.resize-w { top: 50%; left: 0%;}
&.resize-nw > div > div > div { cursor: nwse-resize; }
&.resize-n > div > div > div { cursor: ns-resize;}
&.resize-ne > div > div > div { cursor: nesw-resize; }
&.resize-e > div > div > div { cursor: ew-resize; }
&.resize-se > div > div > div { cursor: nwse-resize; }
&.resize-s > div > div > div { cursor: ns-resize; }
&.resize-sw > div > div > div { cursor: nesw-resize; }
&.resize-w > div > div > div { cursor: ew-resize; }
&.resize-n { display: none;}
&.resize-e { display: none;}
&.resize-s { display: none;}
&.resize-w { display: none;}
&:hover > div > div > div { border-width: 9px; }
> div:hover > div > div { border-width: 8px; }
> div > div:hover > div { border-width: 7px; }
> div > div > div:hover { border-width: 6px; }
> div > div > div:active { border-width: 6px; }
> div > div > div {
background-color: $dark;
border-style: solid;
border-width: 10px;
border-color: transparent;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all .05s ease-in-out;
-moz-transition: all .05s ease-in-out;
-ms-transition: all .05s ease-in-out;
-o-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
}
div {
position: relative;
border-radius: 100%;
top: 5px;
left: 5px;
@include transition( all 0.5s ease-in-out);
}
> div {
width: 50px;
height: 50px;
}
> div > div {
width: 40px;
height: 40px;
}
> div > div > div {
z-index: 10;
width: 30px;
height: 30px;
}
}

110
styles/header.scss Normal file
View File

@@ -0,0 +1,110 @@
@import "vars";
@import "mixins";
.header-center,
.header-left,
.header-right {
position: absolute;
//@include transition( all 0.25s ease-in-out);
@include backface-visibility(hidden);
z-index: 3000;
top: 10px;
> * {
display: inline-block;
vertical-align: middle;
}
&.out {
opacity: 0;
pointer-events: none;
* {
pointer-events: none !important;
}
}
}
.home {
margin-top: -20px;
margin-left: -20px;
// .icon {color: $dark; }
}
.header-left {
@include transform-origin(center left);
left: 0;
padding-left: 10px;
}
.header-right {
@include transform-origin(center right);
right: 0;
padding-right: 10px;
}
.header-center {
@include transform-origin(center center);
width: 100%;
left: 0;
right: 0;
position: absolute;
text-align: center;
color: $medium;
> * {
font-size: 20px;
line-height: 44px;
color: $medium;
padding: 0 10px;
}
}
.header-left > * { margin-right: 10px; }
.header-right > * { margin-left: 5px; }
.header-right { font-size: 0;}
.title {
width: 100%;
left: 0;
position: absolute;
text-align: center;
pointer-events: none;
h1 {
margin: 0;
height: 60px;
line-height: 60px;
font-size: $font-size*0.75;
// text-transform: uppercase;
font-weight: bold;
color: $medium;
display: inline-block;
margin-top: -14px;
pointer-events: all;
font-weight: normal;
}
}
.author {
float: left;
.btn {
margin-right: 10px;
}
.author-date {
opacity: 0.5;
}
}
.present-mode #space-header {
background-color: transparent !important;
}
#space-siblings {
background-color: rgba(245, 245, 245, 0.95);
padding: 35px;
max-height: 450px;
overflow-y: scroll;
margin-top: 54px;
border-bottom: 1px solid #eee;
.btn {
margin-bottom: 50px;
}
}

347
styles/helper.scss Normal file
View File

@@ -0,0 +1,347 @@
@import "vars";
@import "mixins";
.events {pointer-events: auto !important; }
.no-events {pointer-events: none !important; }
.no-bg {background-color: transparent !important; }
.bg-lighten {background-color: rgba(255,255,255,0.4) !important; }
.transition-1 {@include transition( all 0.1s ease-in-out); }
.disabled {
pointer-events: none !important;
opacity: 0.5 !important;
* {pointer-events: none !important; }
}
.in {
opacity: 1 !important;
pointer-events: auto !important;
// * {pointer-events: auto !important; }
}
.out {
opacity: 0 !important;
pointer-events: none !important;
// * {pointer-events: none !important; }
}
.invis { display: none; }
.vis { display: block; }
/*
.contained-dropdown,
.flex {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
min-height: 100%;
> *:not(.unflex) {
-webkit-flex: 1 auto;
flex: 1 auto;
// width: 100%;
}
.overflow-y-scroll,
.adapt {
-webkit-flex: 1000 1000 auto;
flex: 1000 1000 auto;
}
.dialog-title,
.noflex {
-webkit-flex: 0 auto;
flex: 0 auto;
}
}
*/
.no-min-w {min-width: 0px !important; }
.no-wrap { white-space: nowrap !important;}
.text-center {text-align: center !important; }
.text-left {text-align: left !important; }
.text-right {text-align: right !important; }
.text-large {
font-size: 30px !important;
font-weight: 500 !important;
}
.text-medium {
font-size: 20px !important;
font-weight: 500 !important;
}
.bg-dark {background: $dark !important; }
.bg-blue {background: $blue !important; }
.bg-light {background: $light !important; }
.c-dark {color: $dark !important; }
.c-blue {color: $blue !important; }
.c-light {color: $light !important; }
.bg-1 { background-color: $color-1 !important; }
.bg-2 { background-color: $color-2 !important; }
.bg-3 { background-color: $color-3 !important; }
.bg-4 { background-color: $color-4 !important; }
.bg-5 { background-color: $color-5 !important; }
.bg-6 { background-color: $color-6 !important; }
.bg-7 { background-color: $color-7 !important; }
.bg-8 { background-color: $color-8 !important; }
.bg-9 { background-color: $color-9 !important; }
.bg-10 { background-color: $color-10 !important; }
.bg-11 { background-color: $color-11 !important; }
.c-1 { color: $color-1 !important; }
.c-2 { color: $color-2 !important; }
.c-3 { color: $color-3 !important; }
.c-4 { color: $color-4 !important; }
.c-5 { color: $color-5 !important; }
.c-6 { color: $color-6 !important; }
.c-7 { color: $color-7 !important; }
.c-8 { color: $color-8 !important; }
.c-9 { color: $color-9 !important; }
.c-10 { color: $color-10 !important; }
.c-11 { color: $color-11 !important; }
.inline-list {
padding: 0;
margin: 0;
li {
display: inline-block;
}
}
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 10px;
z-index: 1;
}
.truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.table-fake {
width: 100%;
height: 100%;
display: table;
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
.ghost {
height: 100%;
width: 0px;
display: inline-block;
vertical-align: middle;
}
.collapse {
display: none;
&.in {
display: block;
}
}
.panel:hover {
.collapse.collapsed {
max-height: 60px !important;
}
}
.middle {
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.middle,
.static {position: static !important; }
// positions
.absolute-top,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left-right,
.absolute-bottom-left,
.absolute-bottom-right {
// z-index: 100;
position: absolute !important;
}
.absolute-top { top: 0; }
.absolute-right { right: 0; left: auto !important;}
.absolute-bottom { bottom: 0; }
.absolute-left { left: 0; right: auto !important;}
.absolute-top-left { top: 0; left: 0; right: auto !important;}
.absolute-top-right { top: 0; right: 0; left: auto !important;}
.absolute-bottom-left { bottom: 0; left: 0; right: auto !important;}
.absolute-bottom-right { bottom: 0; right: 0; left: auto !important;}
.absolute-bottom-left-right { bottom: 0; left: 0; right: 0;}
// paddings
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-20 { padding: 20px !important; }
.p-r-60 { padding-right: 60px !important; }
.p-l-60 { padding-left: 60px !important; }
.no-p { padding: 0 !important; }
.no-p-v { padding-top: 0 !important; padding-bottom: 0 !important; }
.no-p-h { padding-left: 0 !important; padding-right: 0 !important; }
.no-p-b { padding-bottom: 0 !important; }
.no-p-t { padding-top: 0 !important; }
.no-p-l { padding-left: 0 !important; }
.no-p-r { padding-right: 0 !important; }
// margins
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-20 { margin: 20px !important; }
.m-r-60 { margin-right: 60px !important; }
.m-r-20 { margin-right: 20px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-15 { margin-top: 15px !important;}
.m-b-15 { margin-bottom: 15px !important;}
.m-h-20 { margin-left: 20px !important; margin-right: 20px !important;}
.m-v-neg-10 { margin-top: -10px !important; margin-bottom: -10px !important;}
.no-m { margin: 0 !important; }
// widths
.w-auto {width: auto !important;}
.w-08 { width: 80px !important; }
.w-1 { width: 100px !important; }
.w-15 { width: 150px !important; }
.w-2 { width: 200px !important; }
.w-25 { width: 250px !important; }
.w-3 { width: 300px !important; }
.w-35 { width: 350px !important; }
.w-4 { width: 400px !important; }
.w-5 { width: 500px !important; }
.w-6 { width: 600px !important; }
.w-7 { width: 700px !important; }
.w-8 { width: 800px !important; }
.w-85 { width: 850px !important; }
.w-9 { width: 900px !important; }
.w-10 { width: 1000px !important; }
// heights
.h-5 { height: 500px !important; }
.h-55 { height: 550px !important; }
.h-6 { height: 600px !important; }
// radiuses
.no-r { border-radius: 0 !important; }
.no-r-t { border-top-left-radius: 0 !important;border-top-right-radius: 0 !important; }
.no-r-r { border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important; }
.no-r-b { border-bottom-left-radius: 0 !important;border-bottom-right-radius: 0 !important; }
.no-r-l { border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important; }
.r-10 { border-radius: 10px !important; }
// border
.no-b { border: none !important; }
.b-v {border-top: 2px solid rgba(0,0,0,0.025) !important; border-bottom: 2px solid rgba(0,0,0,0.025) !important; }
.b-h {border-left: 2px solid rgba(0,0,0,0.025) !important; border-right: 2px solid rgba(0,0,0,0.025) !important; }
.b-t {border-top: 2px solid rgba(0,0,0,0.025) !important; }
.b-r {border-right: 2px solid rgba(0,0,0,0.025) !important; }
.b-b {border-bottom: 2px solid rgba(0,0,0,0.025) !important; }
.b-l {border-left: 2px solid rgba(0,0,0,0.025) !important; }
.b {border: 2px solid rgba(0,0,0,0.025) !important; }
// Floats
// -------------------------
.clearfix {
@include clearfix();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.block {display: block !important; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
opacity: 0;
pointer-events: none;
}
.relative {
position: relative !important;
}
.fade {
opacity: 0;
@include transition(opacity .1s linear);
&.in {
opacity: 1;
}
}
// .collapse {
// display: none;
// &.in {
// display: block;
// }
// }
// .collapsing {
// position: relative;
// height: 0;
// overflow: hidden;
// @include transition(height .35s ease);
// }
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid white;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

87
styles/icon.scss Normal file
View File

@@ -0,0 +1,87 @@
@import "vars";
@import "mixins";
.number,
.letter {
height: 60px;
width: 60px;
display: inline-block;
font-family: $main-font;
font-size: 30px;
font-size: 25px;
line-height: 60px;
text-align: center;
font-style: normal;
font-weight: bold;
letter-spacing: -0.04em;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include transition(all 0s 0s ease-in-out);
white-space: nowrap;
span {font-weight: normal; opacity: 0.5;}
&.number-md {
font-size: 16px;
height: 44px;
width: 44px;
line-height: 43px;
}
}
.btn-md .letter {
font-size: 16px;
height: 44px;
width: 44px;
line-height: 43px;
}
.icon {
position: relative;
@include icon;
}
.icon-soft {
opacity: 0.5;
}
.icon-xxs {
@include icon-xxs;
}
.icon-xs {
@include icon-xs;
}
.icon-sm {
@include icon-sm;
}
.icon-md {
@include icon-md;
}
.icon-xl {
@include icon-xl;
}
.icon-xxl {
@include icon-xxl;
}
.rot45 > .icon {
transform: rotateZ(45deg);
transition: all 0.1s 0s ease-in-out !important;
}
.rot45 > .icon::before {
transition: all 0.1s 0s ease-in-out !important;
}
.rot45:hover > .icon {
transform: rotateZ(45deg) translateX(-8px);
}

257
styles/landing.scss Normal file
View File

@@ -0,0 +1,257 @@
@import "vars";
#landing-header {
background-color: rgba(255,255,255,0.3);
height: 64px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.landing-keyvisual-wrapper {
background-image: url("../images/sd5-keyvisual-compressed.jpg");
background-size: cover;
background-position: center;
padding-top: 40px;
padding-bottom: 40px;
}
.landing-plans-wrapper {
background-image: url("../images/sd5-hero2-compressed.jpg");
background-size: cover;
background-position: center;
padding-top: 80px;
padding-bottom: 100px;
}
.landing-box {
width: 800px;
margin: auto;
max-width: 90%;
background-color: white;
padding: 40px;
margin-bottom: 80px;
margin-top: 80px;
position: relative;
box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
h1 {
margin-bottom: 20px;
}
&.black {
background-color: #222;
color: white;
padding: 20px;
text-align: center;
}
&.overlap {
position: absolute;
z-index: 2;
margin-top: -65px;
left: 50%;
top: 0px;
margin-left: -250px;
width: 500px;
}
&.screenshot {
width: 90%;
max-width: 90%;
padding: 20px;
box-shadow: none;
background-color: transparent;
img {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.3;
}
}
&.landing-box-left {
margin-left: 30px;
}
}
.lead-xxl {
}
.lead {
margin-bottom: 20px;
}
.lead-xl {
}
.plans-box {
background: linear-gradient(to bottom, #FEFFFF 25%,#D0D8E2 100%);
padding: 40px;
border-radius: 9px;
}
.landing-box.plans-box {
margin-top: 200px;
width: 900px;
}
.plans-table {
tr {
vertical-align: top;
}
th {
font-size: 42px;
padding-top: 40px;
text-align: center;
}
th.best-plan {
padding-top: 20px;
font-size: 48px;
padding-bottom: 0px;
}
td {
padding: 20px;
width: 30%;
p, li {
font-size: 18px;
}
li {
margin-bottom: 10px;
}
}
td.best-plan {
width: 40%;
p {
font-size: 22px;
}
}
td li {
list-style-type: none;
text-align: center;
}
ul {
margin: 0 !important;
padding: 0 !important;
}
.upgrade-buttons {
text-align:center;
margin-top:20px;
}
}
.logo-row {
position: relative;
padding: 80px;
background-color: white;
text-align: center;
width: 100%;
&.blue {
background-color: $blue;
color: white;
}
}
.logo-row div {
display: inline-block;
width: 200px;
}
.landing-row {
background-color: white;
padding-bottom: 80px;
padding-top: 40px;
}
#keyvisual {
border-radius: 20px;
box-shadow: 0px 0px 20px #eee;
width: 640px;
height: 420px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('/images/landing/spacedeck-screenshot1.jpg');
background-color: white;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
border: 1px solid #eee;
}
#legal {
.landing-box {
width: 800px;
}
}
.footer {
padding: 40px;
padding-bottom: 80px;
text-align: center;
color: $medium;
a {
margin-right: 20px;
}
}
@media screen and (min-width: 801px) {
.plans-table-mobile {
display: none;
}
}
@media screen and (max-width: 800px) {
ul.lead.lead-xl, p.lead.lead-xl, ol.lead.lead-xl {
font-size: 20px !important;
}
.header-right {
> span:first-child {
display: none;
}
}
.plans-table {
display: none;
}
.plans-table-mobile {
display: block;
tbody {
display: block;
width: 100%;
}
tr {
display: block;
width: 100%;
}
td, th {
display: block;
width: 100%;
}
ul, li {
width: 100%;
}
}
}

28
styles/lasso.scss Normal file
View File

@@ -0,0 +1,28 @@
@import "vars";
@import "mixins";
#lasso {
border-radius: $radius;
@include backface-visibility(hidden);
background-color: rgba(40,140,215,0.125);
position:absolute;
z-index: 2500;
pointer-events: none;
opacity: 0;
border: 1px solid rgba(255,255,255,0.5);
&:after{
border-radius: $radius;
border: 1px dotted rgba(40,140,215,1);
content: "";
display: block;
position: absolute;
height: auto;
width: auto;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
}

18
styles/layout.scss Normal file
View File

@@ -0,0 +1,18 @@
#layout {
#align {
.btn-group {
height: 120px;
width: 180px;
position: relative;
.btn {
position: absolute;
display: inline-block;
&.top { top: 0px; left: 50%; margin-left: -30px; }
&.bottom { bottom: 0px; left: 50%; margin-left: -30px; }
&.left { left: 0px; top: 50%; margin-top: -30px; }
&.right { right: 0px; top: 50%; margin-top: -30px; }
}
}
}
}

617
styles/list.scss Normal file
View File

@@ -0,0 +1,617 @@
@import "vars";
@import "mixins";
@import "unicode";
.table-versions {
width: 100%;
margin-top: 25px;
margin-bottom: 25px;
tr {
border-bottom: 2px solid rgba(0,0,0,0.025);
&:last-child { border: none !important;}
td {
span {
position: relative;
}
&:first-child { padding-left: 15px; width: 1%; padding-right: 0px;}
&:last-child { padding-right: 40px; width: 1%; text-align: right;}
}
}
}
.grid {
padding: 15px;
margin: 0;
list-style: none;
text-align: left;
width: 100%;
@include user-select(none);
@include transition( all 0.2s ease-in-out);
@include translateY (0px);
&.select {
@include translateY (60px);
> li {
&.list-title > span,
&.folder-up > span {
@include translateX (0px);
}
&:active,
&.active,
&:hover {
&:before {
display: none !important;
}
}
.checkbox {
pointer-events: auto;
// @include translateX (0px);
@include scale(1,1);
}
}
}
> li {
display: block;
width: 33.333333%;
width: 50%;
float: left;
@include clearfix;
position: relative;
overflow: hidden;
// border-bottom: 2px solid rgba(0,0,0,0.05);
.sort-handle {
width: 44px;
position: absolute;
pointer-events: none;
top: 0;
right: 0;
@include transition-transform( 0.1s ease-in-out);
opacity: 0.05;
@include scale(0,0);
cursor: -webkit-grab; cursor: -moz-grab;
&:active {
opacity: 1;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
z-index: 100;
&:before {
width: 44px;
}
}
&:hover {
background-clip: padding-box;
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 0.25;
display: block;
}
}
&.checked {
&:before {
opacity: 0.5;
display: block;
}
}
&.editing { > span { color: transparent !important; } }
&.editing,
&:active,
&.loading,
&.active {
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 1 !important;
display: block;
}
> span {
color: white;
font-weight: 500;
&:after {
opacity: 1 !important;
color: white !important;
}
}
}
.item-thumbnail {
display: block;
width: 100%;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.025);
margin-bottom: 7px;
border-radius: $radius;
z-index: 50;
/* aspect ratio without spacer image */
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
// padding-top: 75%; /* initial ratio of 1:1*/
}
}
.checkbox {
@include transition-transform(0.2s ease-in-out);
position: absolute;
left: 0px;
pointer-events: none;
z-index: 100;
height: 100%;
width: 100%;
text-align: left;
@include transform-origin(top left);
@include scale(0,0);
&:before {
border-radius: 100%;
height: 30px;
width: 30px;
line-height: 29px;
background-color: $darker;
z-index: 10;
position: absolute;
}
&:after {
margin: -5px;
content: "";
display: block;
position: absolute;
top: 0;
border-bottom-right-radius: 50%;
height: 40px;
width: 40px;
line-height: 29px;
background-color: $darker;
z-index: 0;
}
}
> span {
padding: 5px;
padding-bottom: 10px;
display: block;
line-height: 1;
font-size: 15px;
font-size: 11px;
color: $medium;
text-decoration: none;
// text-align: center;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
}
.list {
counter-reset: list-counter;
padding: 0px;
margin: 0px;
list-style: none;
text-align: left;
// width: 100%;
display: block;
@include user-select(none);
@include transition( all 0.2s ease-in-out);
@include translateY (0px);
&.pages {
margin-left: -40px;
margin-right: -40px;
> li {
@include transition( margin-top 0.2s ease-in-out);
&.moving{
}
&.over{
}
counter-increment: list-counter;
position: relative;
display:block;
> span {
padding-left: 90px;
position: static;
&:before {
content: counter(list-counter);
position: absolute;
top: 50%;
margin-top: -13px;
left: 40px;
// background-color: $medium;
// color: $dark;
color: rgba(0,0,0,0.1);
border: 2px solid rgba(0,0,0,0.1);
border-radius: 100%;
display: inline-block;
text-align: center;
width: 26px;
height: 26px;
line-height: 22px;
font-weight: 700;
}
}
}
}
// &.versions {
// counter-reset: versions-counter;
// li {
// counter-increment: versions-counter;
// span {
// &:before {
// content: counter(versions-counter);
// display: block;
// }
// }
// }
// }
&.versions {
> li {
position: relative;
> span {
padding: 20px 25px;
position: static;
// padding-left: 65px;
// &:before {
// content: counter(list-counter);
// position: absolute;
// top: 50%;
// margin-top: -13px;
// left: 25px;
// // background-color: $medium;
// // color: $dark;
// color: $medium;
// border: 2px solid $medium;
// border-radius: 100%;
// display: inline-block;
// text-align: center;
// width: 26px;
// height: 26px;
// line-height: 22px;
// font-weight: 700;
// }
> span {
display: block;
line-height: 1.3;
font-family: $main-font;
font-size: 10px;
line-height: 1.5;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.version-name {font-size: 15px; }
&.version-author {opacity: 0.5; }
&.version-thumbnail {
float: left;
display: block;
width: 25%;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.025);
border-radius: $radius;
z-index: 50;
margin-right: 15px;
/* aspect ratio without spacer image */
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
// padding-top: 75%; /* initial ratio of 1:1*/
}
}
}
}
}
}
&.menu {
> li {
&:before {
display: none !important;
}
> span {
padding-left: 0px !important;
.icon {
margin-left: 8px;
margin-right: -8px;
}
.icon-md {
margin-top: -2px;
margin-right: -8px;
margin-left: 8px;
}
.icon-folder-plus {
color: $yellow;
}
}
}
}
&.select {
> li {
&.list-title > span,
&.folder-up > span {
@include translateX (0px);
}
&:active,
&.active,
&:hover {
&:before {
display: none !important;
}
}
.sort-handle {
@include scale(1,1);
pointer-events: auto;
}
.checkbox {
position: absolute;
left: 0px;
@include translateX (0px);
pointer-events: auto;
}
> span {
@include translateX (40px);
padding-right: 80px !important;
}
}
}
> li {
@include clearfix;
position: relative;
overflow: hidden;
display: block;
border-bottom: 2px solid rgba(0,0,0,0.05);
cursor: pointer;
.sort-handle {
width: 44px;
position: absolute;
pointer-events: none;
top: 0;
right: 0;
@include transition-transform( 0.1s ease-in-out);
opacity: 0.5;
@include scale(0,0);
cursor: -webkit-grab; cursor: -moz-grab;
&:active {
opacity: 1;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
z-index: 100;
&:before {
width: 44px;
}
}
&.deleted {-webkit-animation:collapse 0.35s ease-in-out forwards; }
&.loading {
> span:before {
@include transition( all 0.1s 0.1s ease-in-out);
-webkit-animation:pulse 0.35s infinite ease-in-out;
@include scale(1,1);
}
}
&.home > span:after{
@extend .icon-home:before;
opacity: 0.25;
}
&.folder-up > span:after,
&.folder > span:after {
@extend .icon-folder:before;
color: $yellow;
}
&.space > span:after {
@extend .icon-page-horizontal:before;
opacity: 0.25;
}
&.shaed > span:after {
@extend .icon-page-horizontal-up:before;
opacity: 0.25;
}
&.home,
&.folder-up,
&.folder,
&.space {
> span {
padding-left: 50px;
position: relative;
&:after {
@include icon;
@include icon-md;
position: absolute;
top: 6px;
left: 8px;
}
&:before {
@include icon;
position: absolute;
top: 0px;
left: auto;
right: -4px;
color: $medium !important;
color: $light !important;
@extend .icon-shape-circle:before;
}
&:after {
@include transition( transition-transform 0.1s 0.1s ease-in-out);
@include scale(1,1);
}
&:before {
@include transition( transition-transform 0.1s 0s ease-in-out);
@include scale(0,0);
}
}
}
&:before {
top: 50%;
left: 7px;
margin-top: -3px;
content: "";
display: block;
position: absolute;
height: 6px;
width: 6px;
background-color: $light;
border-radius: 100%;
display: none;
}
&:hover {
background-clip: content-box;
background-color: rgba(255,255,255,0.025);
&:before {
opacity: 0.25;
display: block;
}
}
&.checked {
&:before {
opacity: 0.5;
display: block;
}
}
&.editing { > span { color: transparent !important; } }
&.editing,
&:active,
&.loading,
&.active {
// background-color: rgba(255,255,255,0.025);
&:before {
opacity: 1 !important;
display: block;
}
> span {
color: white;
// font-weight: 500;
&:after {
opacity: 1 !important;
color: white !important;
}
}
}
&.list-title,
&.list-title:hover,
&.list-title:active {
background-color: transparent;
border: none;
cursor: default;
> span {
min-height: 30px;
line-height: 30px;
font-size: 11px;
color: $medium;
color: white;
padding: 0px 25px;
padding-top: 19px;
}
&:before {
display: none;
}
}
.checkbox {
@include transition-transform(0.2s ease-in-out);
@include translateX (-60px);
position: absolute !important;
left: 0px;
pointer-events: none;
width: 100%;
z-index: 100;
}
> span {
@include transition-transform(0.2s ease-in-out);
display: block;
min-height: 60px;
line-height: 58px;
font-size: 15px;
color: $medium;
text-decoration: none;
padding: 0px 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
// &:active {background-color: $dark !important; }
&:first-letter {
// text-transform: capitalize;
}
&.thumbnail {
padding: 0px 25px;
padding-top: 25px;
img {
display: block;
max-width: 100%;
}
}
}
}
}
.light .list > li{
&.editing,
&:active,
&.loading,
&.active {
> span {
color: black;
&:after {
color: black !important;
}
}
}
}
@-webkit-keyframes pulse {
0% { @include scale(0,0); }
50% { @include scale(0.3,0.3); }
100% { @include scale(0,0); }
}
@-webkit-keyframes collapse {
0% { max-height: 60px; }
100% { max-height: 0px; }
}

60
styles/login.scss Normal file
View File

@@ -0,0 +1,60 @@
@import "vars";
@import "mixins";
#account-forms {
z-index: 2000;
width: 100%;
height: 100%;
&.got-user {display: none; }
> div {
display: table;
width: 100%;
height: 100%;
// color: white;
position: absolute !important;
pointer-events: none;
&.active {
&#login form { @include rotateY(0deg); }
&#signup form { @include rotateY(0deg); }
&#password-reset form { @include rotateY(0deg); }
&#password-confirm form { @include rotateY(0deg); }
form {
opacity: 1;
pointer-events: auto;
}
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
@include perspective-origin(center center);
}
&#login form { @include rotateY(-180deg); }
&#signup form { @include rotateY(180deg); }
&#password form { @include rotateY(180deg); }
form {
h4 {
display: inline-block;
}
text-align: left;
display: inline-block;
width: 330px;
opacity: 0;
@include backface-visibility(hidden);
@include transition( all 0.25s ease-in-out);
@include transform-origin(center center);
}
}
}

122
styles/main.scss Normal file
View File

@@ -0,0 +1,122 @@
@import "vars";
@import "mixins";
.wrapper {
//@include transition( all 0.25s ease-in-out);
position: relative;
margin: auto;
max-width: 1160px;
min-height: 100%;
height: 100%;
}
.main {
background-color: $light;
color: $medium;
height: auto;
top: 80px !important;
bottom: 0;
position: absolute;
> .overflow-y-scroll {
background-color: $light;
height: 100%;
}
.header {
@include clearfix();
position: relative;
z-index: 500;
min-height: 60px;
margin: 40px;
.header-main {
height: 60px;
@include clearfix();
}
.header-center {
text-align: center;
pointer-events: none;
z-index: 5000;
position: absolute;
width: 100%;
top: 0;
* {pointer-events: auto; }
ul {
margin: auto;
display: block;
vertical-align: middle;
list-style: none;
padding-left: 0px;
}
.profile-avatar {
margin: auto;
display: block;
margin-top: -80px;
img {
border-radius: 100%;
}
}
}
.header-center > ul li span { padding-left: 5px; padding-right: 5px;}
.header-left > ul li span { padding-right: 10px;}
.header-right > ul li span { padding-left: 10px;}
.header-center,
.header-right,
.header-left {
height: 60px;
line-height: 60px;
}
.header-right {
float: right;
@include transition( all 0.25s ease-in-out);
@include translateX (0px);
}
.header-left {
float: left;
> h4 {
vertical-align: middle;
display: inline-block;
}
}
}
.content {
margin: 40px;
//@include transition( all 0.25s ease-in-out);
.section {
border-bottom: 2px solid rgba(0,0,0,0.04);
margin-bottom: 80px;
padding-bottom: 80px;
@include clearfix();
&:last-child {
border-bottom: none;
}
form {
// border-radius: $radius;
// background-color: white;
// display: block;
// padding: 40px;
}
}
.img {
img {
border-radius: $radius;
}
margin-right: 20px;
position: relative;
.btn {
position: absolute;
top: 0px;
right: 0px;
}
}
}
}

90
styles/margin-columns.scss Normal file
View File

@@ -0,0 +1,90 @@
@import "vars";
@import "mixins";
#margins {
.btn-more,
.btn-less {
&:active .icon {
opacity: 1;
}
.icon {
color: white;
opacity: 0.2;
}
}
#margin {
height: 200px;
position: relative;
.btn-toggle {
margin: -22px;
}
label {
pointer-events: none;
margin-top: 62px;
}
.margin-icon {
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 4px;
margin: -70px -70px;
> div {
position: absolute;
display: inline-block;
height: 30px;
width: 30px;
.input {
padding: 0px;
width: 30px;
height: 30px;
line-height: 30px;
border: none;
font-size: 22px;
text-align: center;
display: block;
background-color: $light;
}
&.top {
top: -15px; left: 50%; margin-left: -15px;
.btn-more { right: -30px; top: 15px; }
.btn-less { left: -30px; top: 15px; }
}
&.bottom {
bottom: -15px; left: 50%; margin-left: -15px;
.btn-more { right: -30px; bottom: 15px; }
.btn-less { left: -30px; bottom: 15px; }
}
&.left {
left: -16px; top: 50%; margin-top: -15px;
.btn-more { left: 15px; top: -30px; }
.btn-less { left: 15px; bottom: -30px; }
}
&.right {
right: -16px; top: 50%; margin-top: -15px;
.btn-more { right: 15px; top: -30px; }
.btn-less { right: 15px; bottom: -30px; }
}
}
}
}
}

96
styles/members.scss Normal file
View File

@@ -0,0 +1,96 @@
@import "vars";
@import "mixins";
#editors, #editors-list {
@include user-select(none);
h6 {
padding: 15px 25px;
margin: 0px;
color: $medium;
font-size: 10px;
}
.overflow-y-scroll {
top: 60px !important;
}
ul {
padding: 0px;
margin: 0px;
}
}
.editor > span {
border-radius: $radius;
display: block;
// background-color: rgba(255,255,255,0.05);
position: relative;
padding: 11px 25px;
padding-left: 45px !important;
padding-right: 0px !important;
min-height: 60px;
border: none;
.editor-avatar {
height: 34px;
width: 34px;
line-height: 34px;
left: 0px;
top: 10px;
background-color: $dark;
color: $darker ;
color: white;
font-weight: 700;
font-size: 15px;
font-family: $main-font;
display: inline-block;
text-align: center;
border-radius: $radius;
background-size: cover;
background-position: center;
position: absolute;
&.status-off,
&.status-on {
&:before {
top: 0;
right: 0;
display: block;
position: absolute;
color: $darker ;
border: 1px solid #292929;
border-radius: 100px;
padding: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 0px;
height: 4px;
width: 4px;
}
}
&.status-off:before {background-color: #d55c4b; content: "off"; display: none;}
&.status-on:before {background-color: #2ecc71; content: "on"; }
}
.editor-email,
.editor-name {
font-family: $main-font;
font-size: 11px;
line-height: 1.3;
display: block;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $medium;
}
.editor-email {
opacity: 0.5;
}
}

42
styles/metrics.scss Normal file
View File

@@ -0,0 +1,42 @@
@import "vars";
@import "mixins";
#metrics {
#transform-origin {
height: 230px;
position: relative;
.transform-origin-icon {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 4px;
margin: -45px -60px;
.radio {
position: absolute;
display: inline-block;
&.top-left {top: -30px; left: 0; margin-left: -30px; }
&.top-center {top: -30px; left: 50%; margin-left: -30px; }
&.top-right {top: -30px; right: 0; margin-right: -30px; }
&.center-left {top: 50%; margin-top: -30px; left: 0; margin-left: -30px; }
&.center-center {top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; }
&.center-right {top: 50%; margin-top: -30px; right: 0; margin-right: -30px; }
&.bottom-left {bottom: 0; margin-bottom: -30px; left: 0; margin-left: -30px; }
&.bottom-center {bottom: 0; margin-bottom: -30px; left: 50%; margin-left: -30px; }
&.bottom-right {bottom: 0; margin-bottom: -30px; right: 0; margin-right: -30px; }
}
}
.icon-label {
pointer-events: none;
margin-top: 62px;
}
}
}

374
styles/mixins.scss Normal file
View File

@@ -0,0 +1,374 @@
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin blur($blur) {
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
}
@mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// Box sizing
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-ms-user-select: $select; // IE10+
-o-user-select: $select;
user-select: $select;
}
// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support the
// standard `box-shadow` property.
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
// Placeholder text
@mixin placeholder($color: rgba(136,136,136,0.5)) {
&:-moz-placeholder { color: $color; } // Firefox 4-18
&::-moz-placeholder { color: $color; // Firefox 19+
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
// &:hover {
// &:-moz-placeholder { color: #aaa; } // Firefox 4-18
// &::-moz-placeholder { color: #aaa; // Firefox 19+
// opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
// &:-ms-input-placeholder { color: #aaa; } // Internet Explorer 10+
// &::-webkit-input-placeholder { color: #aaa; } // Safari and Chrome
// }
}
// Placeholder text
@mixin placeholder_inverted($color: $blue-lighter) {
&:-moz-placeholder { color: $color; } // Firefox 4-18
&::-moz-placeholder { color: $color; // Firefox 19+
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
&:focus {
&:-moz-placeholder { color: white; } // Firefox 4-18
&::-moz-placeholder { color: white; // Firefox 19+
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: white; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: white; } // Safari and Chrome
}
}
@mixin input-focus($color: #aaa) {
$color-rgba: rgba(red($color), green($color), blue($color), .6);
&:focus {
outline: 0;
// @include box-shadow(inset 0 0 3px rgba(255,255,255,.075), 0 0 3px $color-rgba);
}
}
// Transitions
@mixin transition($transition...) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-property($transition-property...) {
-webkit-transition-property: $transition-property;
transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transition-transform($transition...) {
-webkit-transition: -webkit-transform $transition;
-moz-transition: -moz-transform $transition;
-o-transition: -o-transform $transition;
transition: transform $transition;
}
// Transformations
@mixin rotate($degrees) {
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees); // IE9 only
transform: rotate($degrees);
}
@mixin scale($ratio, $ratio-y...) {
-webkit-transform: scale($ratio, $ratio-y);
-ms-transform: scale($ratio, $ratio-y); // IE9 only
transform: scale($ratio, $ratio-y);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y); // IE9 only
transform: translate($x, $y);
}
@mixin translateX($x) {
-webkit-transform: translateX($x);
-ms-transform: translateX($x); // IE9 only
transform: translateX($x);
}
@mixin translateY($y) {
-webkit-transform: translateY($y);
-ms-transform: translateY($y); // IE9 only
transform: translateY($y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}
@mixin rotateX($degrees) {
-webkit-transform: rotateX($degrees);
-ms-transform: rotateX($degrees); // IE9 only
transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
-webkit-transform: rotateY($degrees);
-ms-transform: rotateY($degrees); // IE9 only
transform: rotateY($degrees);
}
@mixin perspective($perspective) {
-webkit-perspective: $perspective;
-moz-perspective: $perspective;
perspective: $perspective;
}
@mixin perspective-origin($perspective) {
-webkit-perspective-origin: $perspective;
-moz-perspective-origin: $perspective;
perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin; // IE9 only
transform-origin: $origin;
}
// Animations
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-timing-function($timing-function) {
-webkit-animation-timing-function: $timing-function;
animation-timing-function: $timing-function;
}
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count) {
-webkit-animation-iteration-count: $iteration-count;
animation-iteration-count: $iteration-count;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin animation-fill-mode($fill-mode) {
-webkit-animation-fill-mode: $fill-mode;
animation-fill-mode: $fill-mode;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
@mixin backface-visibility($visibility){
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
backface-visibility: $visibility;
}
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// WebKit-style focus
@mixin tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto #298041;
outline-offset: -2px;
}
@mixin icon-xxs {
font-size: 9px;
height: 16px;
width: 16px;
line-height: 16px;
&:after,
&:before {
height: 16px;
width: 16px;
line-height: 12px;
}
}
@mixin icon {
font-size: 20px;
height: 60px;
width: 60px;
display: inline-block;
font-family: 'icon';
text-align: center;
font-style: normal;
font-weight: normal;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include transition(all 0s 0s ease-in-out);
&:after,
&:before {
@include backface-visibility(hidden);
position: absolute;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
left: 0px;
top: 0px;
}
&:hover {
text-decoration: none;
}
}
@mixin icon-xs {
font-size: 9px;
height: 24px;
width: 24px;
line-height: 24px;
&:after,
&:before {
height: 24px;
width: 24px;
line-height: 24px;
}
}
@mixin icon-sm {
font-size: 14px;
height: 32px;
width: 32px;
line-height: 32px;
&:after,
&:before {
height: 32px;
width: 32px;
line-height: 32px;
}
}
@mixin icon-md {
font-size: 16px;
height: 44px;
width: 44px;
line-height: 43px;
&:after,
&:before {
height: 44px;
width: 44px;
line-height: 43px;
}
}
@mixin icon-xl {
font-size: 28px;
height: 80px;
width: 80px;
line-height: 80px;
&:after,
&:before {
height: 80px;
width: 80px;
line-height: 75px;
}
}
@mixin icon-xxl {
font-size: 50px;
height: 140px;
width: 140px;
line-height: 130px;
&:after,
&:before {
height: 140px;
width: 140px;
line-height: 130px;
}
}

303
styles/modal.scss Normal file
View File

@@ -0,0 +1,303 @@
@import "vars";
@import "mixins";
//
// Modals
// --------------------------------------------------
// .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 etc
// Kill the scroll on the body
.modal-open {overflow: hidden; }
.modal-prev,
.modal-next {
color: $dark !important;
position: fixed;
top: 50%;
margin: 0 34px;
margin-top: -30px;
opacity: 0.5;
z-index: 2000;
}
.modal-prev { left: 0;}
.modal-next { right: 0;}
// Container that the modal scrolls within
.modal {
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 35000;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
// @include translate(0, -25%);
@include transition-transform(0.1s ease-out);
@include scale(0.98,0.98);
}
&.in {
pointer-events: auto;
.modal-dialog {
// @include translate(0, 0)
@include scale(1,1);
}
}
.close {
position: fixed;
margin: 44px 44px;
.icon {display: block; }
}
figure {
margin: 0;
img {
display: block;
margin: auto;
}
}
}
// Shell div to position the modal with bottom padding
.modal-wrapper {
position: relative;
margin: 0px;
display: table;
height: 100%;
width: 100%;
background-color: rgba(0,0,0, 0.7);
}
.modal-appendix {
position: relative;
margin: 0px;
display: table;
width: 100%;
text-align: center;
background-color: $light;
color: $medium;
vertical-align: top;
height: auto;
.modal-section {
max-width: 600px;
margin: auto;
text-align: left;
}
}
.modal-dialog {
position: relative;
width: auto;
margin: 0px;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
margin: auto;
text-align: center;
padding: 40px;
&.top {vertical-align: top; }
}
.modal-medium {
max-height: 100%;
> * {
max-width: 100%;
max-height: 100%;
}
}
// Actual modal
.modal-content {
width: 600px;
position: relative;
// @include box-shadow(0 0px 10px 5px rgba(0,0,0,0.05));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
display: inline-block;
text-align: left;
@include user-select(none);
border-radius: $radius*3;
background-color: $light !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
}
.modal-header {
padding: 30px 40px;
position: relative;
color: $medium;
}
.close-search {
position: fixed;
top: 0;
right: 0;
margin: 40px 35px;
}
// Title text within header
.modal-title {
color: $dark;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
text-indent: 4px;
text-align: center;
padding-top: 30px;
}
.modal-side-tabs {
position: absolute;
right: 0;
top: 0;
list-style: none;
padding: 0;
height: 100%;
padding: 15px;
border-left: 2px solid rgba(0,0,0,0.025);
z-index: 100;
border-top-right-radius: $radius*3;
border-bottom-right-radius: $radius*3;
}
.modal-tabs-wrapper {
overflow: hidden;
border-top-left-radius: $radius*3;
border-top-right-radius: $radius*3;
}
.modal-tabs {
display: table;
width: 100%;
table-layout: auto;
background-color: $lightish;
.dialog-tab {
display: table-cell;
text-align: center;
&:hover span {color: $dark; }
&.open span {
background-color: $light;
color: $dark;
opacity: 1;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: $radius*3;
border-top-right-radius: $radius*3;
}
&:first-child span {
box-shadow: inset 0px -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0px -4px 7px -4px rgba(0, 0, 0, 0.1);
// border-top-left-radius: $radius*3;
// border-bottom-right-radius: $radius*3;
}
&:last-child span {
// box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1);
// border-top-right-radius: $radius*3;
// border-bottom-left-radius: $radius*3;
}
span {
box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1);
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
text-indent: 4px;
display: block;
width: 100%;
height: 44px;
line-height: 44px;
}
}
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
@include clearfix();
}
.modal {
.modal-section {
// overflow: hidden;
border-bottom: 2px solid rgba(0,0,0,0.04);
padding: 40px;
display: block;
@include clearfix();
&:first-child {
border-top-left-radius: $radius*3 !important;
border-top-right-radius: $radius*3 !important;
}
&.dark {background-color: $dark; }
&.light {background-color: $light; }
.modal-section-title {
margin: 0;
padding-top: 15px;
color: $dark;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
text-indent: 4px;
text-align: center;
}
}
}
// Footer (for actions)
.modal-footer {
// border-bottom-left-radius: $radius;
// border-bottom-right-radius: $radius;
// background-color: $dark !important;
// padding: 40px;
// padding-top: 0px;
// text-align: right; // right align buttons
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
// .btn + .btn {
// margin-left: 5px;
// margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
// }
// // but override that for button groups
// .btn-group .btn + .btn {
// margin-left: -1px;
// }
// // and override it for block buttons as well
// .btn-block + .btn-block {
// margin-left: 0;
// }
}

423
styles/normalize.scss vendored Normal file
View File

@@ -0,0 +1,423 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//
audio,
canvas,
progress,
video {
display: inline-block; // 1
vertical-align: baseline; // 2
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address `[hidden]` styling not present in IE 8/9.
// Hide the `template` element in IE, Safari, and Firefox < 22.
//
[hidden],
template {
display: none;
}
// Links
// ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background: transparent;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// Text-level semantics
// ==========================================================================
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// Grouping content
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 1em 40px;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
}
//
// Contain overflow in all browsers.
//
pre {
overflow: auto;
}
//
// Address odd `em`-unit font size rendering in all browsers.
//
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
// Forms
// ==========================================================================
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
//
//
// 1. Correct color not being inherited.
// Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
optgroup,
select,
textarea {
color: inherit; // 1
font: inherit; // 2
margin: 0; // 3
}
//
// Address `overflow` set to `hidden` in IE 8/9/10.
//
button {
overflow: visible;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8+, and Opera
// Correct `select` style inheritance in Firefox.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
input {
line-height: normal;
}
//
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; // 2
box-sizing: border-box;
}
//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// Remove default vertical scrollbar in IE 8/9.
//
textarea {
overflow: auto;
}
//
// Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
//
optgroup {
font-weight: bold;
}
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

53
styles/overflow.scss Normal file
View File

@@ -0,0 +1,53 @@
@import "vars";
@import "mixins";
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow-y: scroll;
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-y: hidden;
overflow-x: scroll;
}
.fit {
position: absolute !important;
width: auto;
height: auto;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
}
.overflow-scroll,
.overflow-hidden,
.overflow-x-scroll,
.overflow-y-scroll {
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
&::-webkit-scrollbar-corner,::-webkit-scrollbar {
background-color: rgba(0,0,0,0);
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(255,255,255,0.1);
-webkit-background-clip: padding-box;
border: 0px solid transparent;
}
}

80
styles/pages.scss Normal file
View File

@@ -0,0 +1,80 @@
@import "vars";
@import "mixins";
#pages {
#pages-actions {
display: inline-block;
padding-left: 25px;
margin: 20px 0;
}
#pages-options {
position: relative;
display: inline-block;
margin-right: -4px;
padding-right: 0px;
margin: 10px 0;
}
.pages-wrapper {
counter-reset: pages-counter;
}
.page {
counter-increment: pages-counter;
display: block;
position: relative;
.dropdown {
position: absolute;
bottom: 0;
right: -15px;
margin: 10px 25px;
}
&.active {
img {
border: 2px solid white;
}
.page-thumbnail:before {
background-color: white;
}
}
.page-thumbnail {
position: relative;
width: 100%;
margin-top: 25px;
padding: 0 25px;
img {
border-radius: $radius;
display: block;
width: 100%;
}
&:before {
z-index: 100;
content: counter(pages-counter);
right: 0px;
margin-right: 5px;
position: absolute;
top: 50%;
left: 50%;
font-size: 15px;
background-color: white;
border-radius: 100%;
margin: -15px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
background-color: $light;
background-color: $dark;
color: $medium;;
}
}
}
}

44
styles/pattern.scss Normal file
View File

@@ -0,0 +1,44 @@
@import "vars";
@import "mixins";
#pattern {
#background-position {
height: 210px;
position: relative;
.position-icon {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
border: 2px solid $dark;
border-radius: 4px;
margin: -50px -60px;
.radio {
position: absolute;
display: inline-block;
&.top-left {top: -30px; left: 0; margin-left: -30px; }
&.top-center {top: -30px; left: 50%; margin-left: -30px; }
&.top-right {top: -30px; right: 0; margin-right: -30px; }
&.center-left {top: 50%; margin-top: -30px; left: 0; margin-left: -30px; }
&.center-center {top: 50%; margin-top: -30px; left: 50%; margin-left: -30px; }
&.center-right {top: 50%; margin-top: -30px; right: 0; margin-right: -30px; }
&.bottom-left {bottom: 0; margin-bottom: -30px; left: 0; margin-left: -30px; }
&.bottom-center {bottom: 0; margin-bottom: -30px; left: 50%; margin-left: -30px; }
&.bottom-right {bottom: 0; margin-bottom: -30px; right: 0; margin-right: -30px; }
}
}
.icon-label {
pointer-events: none;
margin-top: 62px;
}
}
}

113
styles/player.scss Normal file
View File

@@ -0,0 +1,113 @@
@import "vars";
@import "mixins";
#player {
-webkit-overflow-scrolling: touch;
position: absolute;
border-radius: $radius;
top: 100px;
left: 100px;
bottom: 100px;
right: 100px;
width: auto;
height: auto;
z-index: 0;
background-color: black;
white-space: nowrap;
z-index: 10000;
display: none;
#player-controls-1{
height: 100px;
&:hover #player-controls-2{
@include scale(1,1);
}
#player-controls-2{
@include transition( all 0.4s ease-in-out);
}
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
@include transition( all 0.4s ease-in-out);
@include translateY (20%);
&:hover {
@include translateY (0);
opacity: 1;
#player-controls {
@include rotateX(0deg);
}
}
@include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
@include perspective-origin(bottom center);
#player-controls {
@include rotateX(-90deg);
@include transform-origin(bottom center);
@include backface-visibility(hidden);
@include transition( all 0.4s ease-in-out);
background-color: rgba(0,0,0,0.25);
background-color: $darker;
border-radius: $radius;
margin: 20px;
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
flex-direction: row;
align-items: center;
.time {
font-size: 20px;
line-height: 60px;
display: block;
padding: 0 20px;
&.current {border-left: 2px solid rgba(0,0,0,0.1); }
&.total {border-right: 2px solid rgba(0,0,0,0.1); }
}
.progress-bar {
flex: 1;
position: relative;
}
.progress-bar {
background-color: rgba(0,0,0,0.25);
width: 100%;
height: 60px;
position: relative;
.progress-bar-buffer,
.progress-bar-progress,
.progress-bar-handle {
position: absolute;
height: 60px;
}
.progress-bar-handle {
width: 4px;
background-color: $light;
z-index: 10;
margin-left: -2px;
height: 60px;
border-radius: 30px;
}
.progress-bar-buffer { background-color: rgba(0,0,0,0.25); }
.progress-bar-progress { background-color: $blue; }
.progress-bar-handle {}
}
}
}
}

148
styles/profile.scss Normal file
View File

@@ -0,0 +1,148 @@
@import "vars";
@import "mixins";
#short-profile {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
border-radius: $radius;
background-color: white;
box-shadow: 0 1px 10px rgba(0,0,0,0.05);
z-index: 5000;
#short-profile-header {
height: 100px;
width: 300px;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
position: relative;
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.1);
}
#short-profile-image {
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -40px;
}
#short-profile-actions {
position: absolute;
top: 0;
right: 0;
margin: 10px;
}
#short-profile-details {
padding-top: 40px;
.nickname,
.bio {
text-align: center;
display: block;
}
.bio { color: $medium;}
.nickname {color: $darker; font-size: 18px;}
}
}
#profile-details {
padding: 30px 40px;
background-color: white;
@include clearfix();
text-align: center;
position: relative;
.profile-head {
margin-bottom: 20px;
}
.profile-image {
position: relative;
margin: auto;
display: inline-block;
margin-bottom: 20px;
line-height: 200px;
width: 200px;
height: 200px;
border: 4px solid white;
border-radius: 8px;
box-shadow: 0 1px 10px rgba(0,0,0,0.05);
}
.profile-cover {
position: absolute;
height: 200px;
width: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.profile-username {
margin: 0;
font-size: 20px;
color: $darker;
}
.profile-description {
margin: 0;
font-size: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
// text-align: center;
margin-top: -3px;
li {
vertical-align: middle;
display: inline-block;
// margin: 0px 7px;
margin-right: 3px;
color: $medium;
text-transform: uppercase;
font-family: $main-font;
font-size: 11px;
opacity: 0.5;
&:hover {opacity: 1; }
> .icon {margin-right: 3px; }
a {
color: $medium;
&:hover {color: $blue; }
}
}
}
}
#account {
padding-top: 64px;
#cover-image {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.2;
background-size: cover;
background-position: center;
}
#profile-image {
position: relative;
img {
border-radius: $radius;
overflow: hidden;
}
#remove-profile-image {
position: absolute;
top: 0;
left: 0;
margin: -16px;
}
}
}

71
styles/rich-text.scss Normal file
View File

@@ -0,0 +1,71 @@
@import "vars";
#rich-text-editor-wrapper {
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
&:before {
top: 0;
display: block;
content: "";
height: 100%;
width: 100%;
position: absolute;
pointer-events: none;
border: 1px solid $blue;
z-index: 0;
}
}
#rich-text-editor-controls {
position: absolute;
width: 100%;
bottom: 100%;
left: 0;
padding-bottom: 10px;
}
#rich-text-editor {
white-space: normal;
cursor: default;
position: relative;
// multi-column text
/*&:after{
width: 32px;
left: 50%;
top: 0;
margin-left: -16px;
border-left: 1px solid $blue;
border-right: 1px solid $blue;
position: absolute;
content: "";
height: 100%;
pointer-events: none;
}*/
li,
p {
cursor: text;
// &:hover{
// &:after {display: block; }
// }
// &:after{
// background-color: rgba(40,140,215,0.05);
// border: 1px solid $blue;
// margin-top: 0.38em;
// margin-bottom: 0.42em;
// position: absolute;
// content: "";
// width: auto;
// height: auto;
// left: 0;
// right: 0;
// bottom: 0;
// top: 0;
// pointer-events: none;
// }
}
}

52
styles/row.scss Normal file
View File

@@ -0,0 +1,52 @@
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row {
margin: 0 -5px;
> div {
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
float: left;
img {
max-width: 100%;
}
}
&.no-gutter {
margin: 0 !important;
> div {
padding: 0px !important;
}
}
&.cols-12 > div { width: percentage(1 / 12); }
&.cols-11 > div { width: percentage(1 / 11); }
&.cols-10 > div { width: percentage(1 / 10); }
&.cols-9 > div { width: percentage(1 / 9); }
&.cols-8 > div { width: percentage(1 / 8); }
&.cols-7 > div { width: percentage(1 / 7); }
&.cols-6 > div { width: percentage(1 / 6); }
&.cols-5 > div { width: percentage(1 / 5); }
&.cols-4 > div { width: percentage(1 / 4); }
&.cols-3 > div { width: percentage(1 / 3); }
&.cols-2 > div { width: percentage(1 / 2); }
&.cols-1 > div { width: percentage(1 / 1); }
}

65
styles/ruler.scss Normal file
View File

@@ -0,0 +1,65 @@
@import "vars";
@import "mixins";
.ruler {
position: absolute;
width: 100%;
border-bottom:1px dotted #e17878;
background-clip: padding-box;
z-index: 5;
cursor: ns-resize;
.ruler-value {
display: inline-block;
background-color: $blue;
background-color: #e17878;
color: white;
font-size: 11px;
line-height: 1;
position: absolute;
text-align: center;
opacity: 0;
}
&:hover {
.ruler-value {
opacity: 1;
}
}
&.horz {
top: 50px;
width: 100%;
border-bottom:1px dotted #e17878;
height: 1px;
cursor: ns-resize;
&:hover {
border-bottom-style: solid;
}
.ruler-value {
left: 250px;
top: 0;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
width: 40px;
height: 40px;
line-height: 40px;
}
}
&.vert {
left: 50px;
height: 100%;
border-left:1px dotted #e17878;
width: 1px;
cursor: ew-resize;
&:hover {border-left-style: solid; }
.ruler-value {
left: 0;
top: 250px;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
height: 40px;
width: 40px;
line-height: 40px;
}
}
}

102
styles/search.scss Normal file
View File

@@ -0,0 +1,102 @@
@import "vars";
@import "mixins";
#search-dialog {
&:after {
margin-left: -160px;
}
}
.dialog-search {
margin-left: 0;
transform: translate3d(-22.5%, 0%, 100px) scale(1) !important;
}
.dialog-search-input {
position: absolute;
text-align: center;
top: 0;
left: 0;
right: 112px;
color: $medium;
padding: 25px;
background-color: rgba(245,245,245,0.95);
border-top-left-radius: $radius*3;
z-index: 100;
}
.dialog-search-results {
padding: 40px !important;
padding-top: 110px !important;
margin-right: 92px;
position: relative;
@include clearfix();
font-size: 11px;
line-height: 1.5;
text-align: left !important;
.search-result {
max-width:100px;
}
> * {
cursor: pointer;
// &:hover {opacity: 0.8; }
> * {pointer-events: none; }
}
.search-result-audio {}
.search-result-video {
&:nth-child(3n+1) {clear: both; }
width: 33%;
float: left;
padding-right: 20px;
padding-bottom: 20px;
.thumbnail-wrapper {
&:hover .thumbnail { opacity: 0.8; }
span {
display: block;
top: 0;
left: 0;
position: absolute;
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
padding-top: 55%;
}
background-color: $blue;
color: $light;
text-align: center;
}
}
.thumbnail {
width: 100%;
margin-bottom: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: $radius;
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
padding-top: 55%;
}
}
}
.search-result-image {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
img {
height: 100%;
max-width: 120px;
max-height: 120px;
border-radius: $radius;
}
}
}

32
styles/section.scss Normal file
View File

@@ -0,0 +1,32 @@
@import "vars";
@import "mixins";
.section {
// min-height: 100%;
min-height: 50px !important;
position: relative;
//@include clearfix;
background-color: #fff;
background-position: center;
background-size: cover;
&.active {
.section-padding-corner.in,
.section-padding.in {
display: block;
}
}
}
.space-empty,
.section-empty {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 800;
pointer-events: none;
opacity: 0.25;
display: block;
}

157
styles/select-list.scss Normal file
View File

@@ -0,0 +1,157 @@
@import "vars";
@import "mixins";
.white .select-list {
li {
&.checked {
&:before {background-color: $medium !important; }
> a,
> span {
color: $medium;
}
}
&:hover {
&:before {background-color: $medium; }
> a,
> span {
background-color: rgba(0,0,0,0.025) !important;
}
}
&:before {background-color: $medium; }
> a,
> span {
color: $medium;
}
}
}
.select-list {
&:empty:before{
position: absolute;
top: 50%;
left: 50%;
margin: -50%;
width: 100%;
display: block;
font-size: 13px;
line-height: 1px;
margin-top: -6px;
content:attr(data-placeholder);
color: $medium;
opacity: 0.5;
}
-webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
background-clip: padding-box;
font-size: 15px;
line-height: 14px;
list-style: none;
margin: 0px;
padding: 15px 0;
text-align: left;
// background-color: $dark;
color: $medium;
border-radius: $radius;
.divider + li span {border: none !important; }
.divider {
@include backface-visibility(hidden);
margin: 10px 0;
border: 1px solid rgba(0,0,0,0.05);
height: 0;
}
// li.divider {border-bottom: 2px solid rgba(0,0,0,0.025); }
li {
width: 100%;
display: block;
position: relative;
margin: -2px 0 ;
&.checked {
opacity: 1;
&:before {
background-color: $dark !important;
display: block;
}
> a,
> span {
color: $dark;
}
}
&:hover {
// background-color: rgba(0,0,0,0.025);
&:before {
background-color: $medium;
display: block;
}
> a,
> span {
color: $medium;
color: $dark;
}
}
&.select-list-title:before {
display: none !important;
}
&:before {
top: 50%;
left: 10px;
margin-top: -3px;
content: "";
display: block;
position: absolute;
height: 6px;
width: 6px;
background-color: $light;
border-radius: 100%;
display: none;
}
> b,
> a,
> span {
display: block;
cursor: pointer;
white-space: nowrap;
color: $medium;
margin: 0 25px;
padding: 16px 3px;
// line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
border-top: 2px solid rgba(0,0,0,0.025) !important;
.icon {
&.icon-sm {
margin: -7px;
margin-right: 14px;
}
&.icon-md {
margin: -13px;
margin-right: 7px;
}
}
}
&:first-child {
> b,
> a,
> span {
border: none !important;
}
}
}
}

24
styles/settings.scss Normal file
View File

@@ -0,0 +1,24 @@
@import "vars";
@import "mixins";
#settings {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
.overflow-y-scroll {
width: 100%;
padding: 25px 40px;
}
font-family: 'open sans', sans-serif;
background-color: $light;
color: $medium;;
h5 {
font-size: 13px;
line-height: 30px;
display: block;
}
}

231
styles/sidebar.scss Normal file
View File

@@ -0,0 +1,231 @@
@import "vars";
@import "mixins";
// .sidebar-open {
// #sidebar #sidebar-content {
// @include translate3d (0%,0,0);
// }
// }
// body:not(.sidebar-open) {
// #sidebar-content:hover {
// @include translateX($sidebar-width);
// }
// }
#sidebar {
@include opacity (0);
//@include translateX($sidebar-width);
@include transition( all 0.25s ease-in-out);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 20001;
position: absolute;
top: 0px;
max-height: 50%;
width: $sidebar-width;
font-size: 14px;
color: $medium;
background-color: $light !important;
right: 0px;
overflow-y: auto;
pointer-events: none;
@include user-select(none);
&.folder-sidebar {
height: 100%;
max-height: 100%;
}
small,
p {color: $medium; }
&.in {
//@include translateX(0);
@include opacity(1);
pointer-events: all;
}
#sidebar-options {
position: absolute;
top: 0;
width: 100%;
z-index: 1100;
height: auto;
padding: 7px 20px;
border-bottom: 2px solid rgba(0,0,0,0.1);
background-color: $darker;
}
#sidebar-rim {
position: absolute;
top: 0%;
margin-top: -30px;
height: 100%;
left: 100%;
z-index: 4000;
font-size: 40px;
background-color: $darker;
opacity: 0.1;
width: 1px !important;
padding: 0px;
min-width: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.sidebar-footer {
position: absolute;
bottom: 0px;
width: 100%;
z-index: 1000;
padding: 0px 25px;
padding-bottom: 10px;
background-color: $darker;
}
.sidebar-header {
display: block;
width: 100%;
background-color: $darker;
min-height: 62px;
border-bottom: 2px solid rgba(0,0,0,0.1);
.btn-group {
margin: 10px;
}
.sidebar-title {
font-size: 13px;
height: 60px;
line-height: 30px;
padding: 15px 55px;
display: block;
margin: 0px;
z-index: 0;
text-align: center;
width: 100%;
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:first-letter {text-transform: capitalize; }
}
}
.sidebar-section {
padding: 25px;
border-bottom: 2px solid rgba(0,0,0,0.1);
h4 {
.btn {
margin-right: -10px;
margin-top: -10px;
}
}
}
.sidebar-menu {
position: absolute;
top: 60px;
width: 100%;
min-height: 60px;
text-align: center;
background-color: $darker;
background-color: #242424;
border-bottom: 2px solid rgba(0,0,0,0.1);
font-size: 0;
z-index: 900;
@include backface-visibility(hidden);
.btn {
width: 50%;
}
&#file-create {
.icon {
opacity: 0.25;
position: absolute;
pointer-events: none;
top: 6px;
left: 8px;
}
.input {
background-color: transparent;
border: none;
display: block;
height: 60px !important;
min-height: 58px !important;
line-height: 30px;
font-size: 15px !important;
color: $light;
position: absolute;
z-index: 1000;
top: -1px;
width: 100%;
padding-left: 50px;
&:first-letter {text-transform: capitalize; }
}
}
pointer-events: none;
@include transition( all 0.2s ease-in-out);
@include translateY (-15px);
&.in {
background-color: $darker;
pointer-events: auto;
opacity: 1;
@include translateY (0px);
}
&.disabled {
.btn {
@include opacity(0.125);
pointer-events: none;
}
}
}
.sidebar-menu-backdrop {
@include transition( all 0.2s ease-in-out);
position: absolute;
z-index: 800;
top: 60px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
pointer-events: none;
&.in {
pointer-events: auto;
background-color: rgba(30,30,30,0.5);
}
}
#search-input {
padding: 15px 25px;
font-size: 14px;
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
font-family: $main-font;
// text-transform: uppercase;
}
&::-webkit-input-placeholder {
font-family: $main-font;
// text-transform: uppercase;
}
}
#online-members {
> div:not(.in) {
display: none;
}
}
}

72
styles/smoke.scss Normal file
View File

@@ -0,0 +1,72 @@
@import "vars";
.smoke {
text-align: center;
background-color: white;
box-shadow: 0 0px 20px #666;
}
.smoke-base {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
background: rgba(0, 0, 0, 0.3);
}
.smoke-base.smoke-visible {
opacity: 1;
visibility: visible;
}
.smokebg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.smoke-base .smoke-dialog {
margin: auto;
margin-top: 200px;
border-radius: 20px;
width: 400px;
padding: 10px;
font-size: 13pt;
text-align: left;
}
.smoke-dialog-prompt {
margin-top: 15px;
text-align: center;
}
.smoke-dialog-buttons {
margin: 20px 0 0 0;
}
.smoke-dialog-buttons button {
background-color: $blue;
color: $light;
margin: 10px 0px 0px 5px;
}
.smoke-dialog-buttons button.cancel {
background-color: $light;
color: $dark;
}
.smoke-dialog-prompt input {
width: 75%;
}
.smoke-base .smoke-dialog-inner {
padding: 20px;
color: #202020;
}

30
styles/space-grid.scss Normal file
View File

@@ -0,0 +1,30 @@
@import "vars";
@import "mixins";
$grid-color-1: rgba(60,60,60,0.125);
$grid-color-2: rgba(60,60,60,0.075);
.edge {
width: 100%;
height: 100%;
border:1px dotted $light;
pointer-events:none;
opacity: 0.5;
position:absolute;
z-index: 100000;
display: none;
}
.space-grid {
pointer-events:none;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity: 0.5;
}
.grid-active #space-helpers {
display: block !important;
}

65
styles/space-guides.scss Normal file
View File

@@ -0,0 +1,65 @@
$guide-gutter: 50px !default;
#space-helpers {
pointer-events:none;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
// display: none;
.guides {
position:absolute;
height:100%;
width: 100%;
top:0;
z-index: 5000;
pointer-events: none !important;
// compensate for border spacing
// width: auto;
// left: -50px;
// right: -50px;
table {
width: 100%; // space width + (border spacing * 2)
height:100%;
position:absolute;
table-layout: auto;
border-collapse: separate;
border-spacing: $guide-gutter 0px;
// border-collapse: collapse;
// border-spacing: 0px 0px;
.column td {
border:1px solid rgba(40,140,215,0.6);;
// background-color:rgba(40,140,215,0.125);
&:first-child {
// border-left:1px solid #448afe;
}
// -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.075), 0 0 10px rgba(255,255,255, 0.075);
}
.margin-top td,
.margin-bottom td {
// background-color:rgba(40,140,215,0.1);
border-top:none;
border-bottom:none;
border-right:1px solid rgba(40,140,215,0.125);
border-left:1px solid rgba(40,140,215,0.125);;
height: $guide-gutter;
}
&.no-gutter .margin-top td:first-child,
&.no-gutter .margin-bottom td:first-child {
border-left:1px solid rgba(40,140,215,0.125);
}
&.no-gutter .column td,
&.no-gutter .margin-top td,
&.no-gutter .margin-bottom td{
border-left:none;
}
}
}
}

76
styles/space-profile.scss Normal file
View File

@@ -0,0 +1,76 @@
@import "vars";
@import "mixins";
#space-profile {
.modal-content {width: 680px; }
}
#item-content {
position: relative;
z-index: 10;
}
#item-cover {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.1;
background-size: cover;
background-position: center;
z-index: 0;
}
.item-head {
.item-title {margin-bottom: 15px; }
> span {display: block; }
}
.item-info {
margin-bottom: 30px;
}
.item-stats {
margin: 0;
padding: 5px 0;
margin-bottom: 20px;
list-style: none;
font-family: $main-font;
font-size: 13px;
li {
display: inline-block;
.icon {
margin-right: 0px;
}
> span {
margin-right: 10px;
}
}
}
.item-actions {}
.item-categories,
.item-tags {
padding-top: 20px;
margin-bottom: -20px;
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
li {
display: inline-block;
margin-right: 5px;
margin-bottom: 10px;
span {
border: 2px solid rgba(255,255,255,0.1);
display: inline-block;
min-width: 32px;
height: 32px;
line-height: 28px;
font-size: 11px;
border-radius: 100px !important;
padding: 0 10px;
}
}
}

414
styles/space-sections.scss Normal file
View File

@@ -0,0 +1,414 @@
@import "vars";
@import "mixins";
.confirm {
position: relative;
z-index: 100;
@include transition( all 0.1s ease-in-out);
&.open {
.confirmation {
.btn {color: white; }
@include scale(1,1);
opacity: 1;
pointer-events: auto;
}
}
.confirmation {
@include transition( all 0.1s ease-in-out);
@include scale(0.8,0.8);
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
width: 100%;
background-color: $light;
padding-top: 18px !important;
.btn-cluster {
border-radius: 3px;
border-radius: 60px !important;
// border-top: 2px solid rgba(0,0,0,0.025);
background-color: $red;
}
}
}
.spacedeck-logo {
font-size: 20px;
line-height: 44px;
color: $darker;
padding-left: 0.5em;
padding-right: 10px;
&.white {
color: $light;
}
}
.version-date {
text-align: left;
display: block !important;
line-height: 1.8;
padding-left: 10px !important;
}
.present-mode {
#space { margin-bottom: 0px; }
.column-border,
.section-empty,
.section-selected,
.section-padding-corner,
.section-padding,
.section-border {display: none !important;}
.artifact {
iframe, a, video, audio {
pointer-events: all !important;
}
.link-wrapper, a.link {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
opacity: 0;
height: 100%;
margin-top: 0;
}
.oembed-cloak {
display: none;
}
}
}
.background-image,
.cover-image {
overflow: hidden;
background-size: cover;
background-position: center;
z-index: 0;
position: relative;
.updating-image {
background-color: rgba(233, 233, 233, 0.9);
}
}
#offline-indicator {
pointer-events: none;
opacity: 0;
transition: all 1s linear;
-webkit-transition: all 1s linear;
&.offline {
opacity: 1;
pointer-events: all;
}
}
.embedded.board {
overflow: hidden !important;
}
.board {
padding: 0 !important;
.wrapper {
border: 1px dotted rgba(128,128,128,0.5);
transition-duration: 0.25s;
transition-property: width, height, background-color;
background-repeat: no-repeat;
background-size: cover;
}
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
position: relative;
overflow: scroll;
/** {
-moz-user-select: none !important; // firefox has selection problems
}*/
}
.snap-ruler-h {
pointer-events: none;
position: fixed;
z-index: 0;
right: 0px;
height: 1px;
background-color: rgba(0,0,0,0.5);
left: 0px;
}
.snap-ruler-v {
pointer-events: none;
position: fixed;
z-index: 0;
top: 0px;
bottom: 0px;
width: 1px;
background-color: rgba(0,0,0,0.5);
}
.cursor {
position: absolute;
z-index: 3000;
pointer-events: none;
.icon {
margin-left: -12px;
margin-top: -3px;
margin-right: -6px;
}
}
.present-mode {
.artifact:hover {
&:before,
&:after {
display: none !important;
}
}
}
.table .wrapper,
.article .wrapper {
max-width: 800px;
min-height: 100%;
.content {
min-height: 100%;
padding-bottom: 60px;
padding-top: 60px;
}
}
.article {
img {max-width: 100%; }
}
.table {
.table-wrapper {
max-width: 100%;
position: relative;
width: auto;
margin-left: -$font-size;
margin-right: -$font-size;
margin-top: -$font-size;
margin-bottom: -$font-size;
}
table {
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: $font-size $font-size;
}
tr {
border-top: 1px solid rgba(255,255,255,0.125);
}
td,
th {
border: none;
vertical-align: top;
text-align: left;
}
}
.section .wrapper {
position: absolute;
}
#space {
/*-webkit-user-select: all;
-ms-user-select: all;
-moz-user-select: all;
user-select: all;*/
position: relative;
height: 100% !important;
//padding-top: 64px !important;
background-color: #eee;
}
#made-with {
position: fixed;
width: 100%;
bottom: 0;
padding: 12px;
opacity: 0.25;
a {color: $dark; }
p {
text-align: center;
font-size: 11px;
}
}
#baseline {
position: absolute;
width: 100%;
pointer-events: none;
z-index: 10000;
list-style: none;
padding: 0;
margin: 0;
opacity: 0.05;
top: 0;
display: none;
li {
height: $line-height/4;
border-bottom: 1px solid $blue;
}
}
#space-header {
.item-meta {
color: $medium;
.item-social {
float: right;
padding-right: 8px;
//border-right: 2px solid rgba(0,0,0,0.025);
color: $medium;
.item-likes.active .icon-heart {
color: $red;
}
.item-likes,
.item-comments,
.item-shares {
position: relative;
cursor: pointer;
.number {
width: auto;
}
}
}
}
}
.space-bounds {
position: absolute;
left: 0px;
top: 0px;
pointer-events: none;
background-size: cover;
background-repeat: no-repeat;
min-width: 100%;
min-height: 100%;
background-color: white;
}
@-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes section-appear {
from { opacity: 0;}
to { opacity: 1; }
}
#minimap {
background-color: transparent;
position: absolute;
right: 30px;
bottom: 20px;
z-index: 20000;
border-radius: $radius;
border: 1px solid rgba(0,0,0,0.2);
overflow: hidden;
div {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
z-index: 1;
pointer-events: none;
}
div.window {
background-color:rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.5);
}
}
.pro-teaser-colorpicker {
background-image: image-url("images/pro-teaser-colorpicker.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 400px;
text-align: center;
p {
padding: 30px;
padding-bottom: 110px;
background-color: rgba(255,255,255,0.8);
}
button {
margin-top: 40px;
}
}
.jewel-pro {
color:white !important;
background-color:$blue !important;
top: -5px !important;
right: -5px !important;
}
.disabled-pro {
opacity: 0.7;
}
#space-loading {
position: fixed;
z-index: 10000;
display: table;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
background-color: white;
border-radius: 100px;
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-out;
> div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.spinner {
background-image: url('/images/hourglass.gif');
}
&.active {
opacity: 1;
}
}

189
styles/style.scss Normal file
View File

@@ -0,0 +1,189 @@
@import "vars";
@import "../public/fonts/font";
@import "../public/fonts/unicode";
@import "normalize";
@import "mixins";
@import "helper";
@import "type";
@import "form";
@import "form-checkbox";
@import "form-file";
@import "form-input-group";
@import "form-range";
@import "form-select";
@import "table";
@import "icon";
@import "button";
@import "dropdown";
@import "dialog";
@import "overflow";
@import "alerts";
@import "close";
@import "modal";
@import "search";
@import "select-list";
@import "row";
@import "header";
@import "login";
@import "updates";
@import "profile";
@import "folder";
@import "editors";
@import "team";
@import "toolbar";
@import "color";
@import "typography";
@import "layout";
@import "filter";
@import "canvas";
@import "margin-columns";
@import "pattern";
@import "metrics";
@import "lasso";
@import "section";
@import "column";
@import "annotation";
@import "chat";
@import "space-sections";
@import "sidebar";
@import "artifact";
@import "handles";
@import "smoke";
@import "landing";
html,
body {
height:100%;
-webkit-tap-highlight-color: transparent;
background-color: white;
background-color: $light;
color: $darker;
}
*[contenteditable="true"] {
outline: none;
}
*,
*:before,
*:after {
@include box-sizing(border-box);
}
body {
max-width: 100%;
padding: 0px;
text-rendering: optimizeLegibility;
//@include user-select(none);
cursor: default;
}
.img img {
max-width: 100%;
height: auto;
}
.plan {
color: $medium;
border-radius: $radius;
display: inline-block;
padding: 30px;
background-color: transparent;
border: 2px solid rgba(0,0,0,0.05);
width: 100%;
&.active {
background-color: white;
border: none;
}
h4 {
color: black;
margin-bottom: 0px;
}
p {
font-size: 13px;
line-height: 1.4;
margin-top: 5px;
margin-bottom: 5px;
}
ul {
list-style: none;
font-size: 10px;
margin: 0px;
padding: 0px;
border-top: 2px solid rgba(0,0,0,0.05);
padding-top: 20px;
margin-top: 20px;
margin-bottom: 20px;
li {padding-top: 2px; }
}
}
#startup {
background-position: center;
background-image:url(/images/diamond.svg);
background-repeat: no-repeat;
}
#home {
background-color: white;
}
.layer {
@include transition( all 0.2s ease-in-out);
@include backface-visibility(hidden);
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
pointer-events: none;
// @include scale(0.95,0.95);
display: none;
z-index: 1000;
&.top-layer {
z-index: 3500;
}
&.in {
display: block;
&.top-layer {
z-index: 3500;
}
z-index: 2000;
// @include scale(1,1);
pointer-events: auto;
opacity: 1;
}
}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}
[v-cloak] {
display: none !important;
}

97
styles/table.scss Normal file
View File

@@ -0,0 +1,97 @@
@import "vars";
@import "mixins";
.table-wrap {
// margin-left: -40px;
// margin-right: -40px;
margin-bottom: 30px;
}
.table {
width: 100%;
color: $medium;;
font-family: $main-font;
// border-radius: $radius;
// border: 2px solid rgba(0,0,0,0.0125) !important;
}
.table thead > tr > th:first-child,
.table tbody > tr > th:first-child,
.table tfoot > tr > th:first-child,
.table thead > tr > td:first-child,
.table tbody > tr > td:first-child,
.table tfoot > tr > td:first-child {
width:1%;
padding-left: 25px;
text-align: left !important;
}
.table thead > tr > th:last-child,
.table tbody > tr > th:last-child,
.table tfoot > tr > th:last-child,
.table thead > tr > td:last-child,
.table tbody > tr > td:last-child,
.table tfoot > tr > td:last-child {
padding-right: 25px;
text-align: right;
width: 1%;
}
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
padding: 10px;
border: none;
font-size: 16px;
line-height: inherit;
//white-space: nowrap;
vertical-align: middle;
height: 60px;
&.no-p {padding: 0px; }
&.max {width: 100%; }
&.min {width: 1%; }
border-bottom: 2px solid rgba(0,0,0,0.0125) !important;
}
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th {
border: none;
line-height: inherit;
//white-space: nowrap;
vertical-align: middle;
padding: 10px 20px;
font-size: 10px;
text-transform: uppercase;
text-align: left;
}
.table tbody > tr:nth-child(odd) > td {
background-color: rgba(0,0,0,0.025);
}
.table thead > tr:first-child > td:first-child,
.table tbody > tr:first-child > td:first-child,
.table tfoot > tr:first-child > td:first-child {
border-top-left-radius: 3px;
}
.table thead > tr:first-child > td:last-child,
.table tbody > tr:first-child > td:last-child,
.table tfoot > tr:first-child > td:last-child {
border-top-right-radius: 3px;
}
.table thead > tr:last-child > td:first-child,
.table tbody > tr:last-child > td:first-child,
.table tfoot > tr:last-child > td:first-child {
border-bottom-left-radius: 3px;
}
.table thead > tr:last-child > td:last-child,
.table tbody > tr:last-child > td:last-child,
.table tfoot > tr:last-child > td:last-child {
border-bottom-right-radius: 3px;
}

3
styles/team.scss Normal file
View File

@@ -0,0 +1,3 @@
@import "vars";
@import "mixins";

232
styles/toolbar.scss Normal file
View File

@@ -0,0 +1,232 @@
@import "vars";
@import "mixins";
@import "bounce";
.toolbar {
&.toolbar-meta {
@include translate3d(0, -100%, 0);
width: auto !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
}
&.toolbar-undo {
width: auto !important;
top: auto !important;
left: 0 !important;
bottom: 0 !important;
}
margin: auto;
//text-align: center;
position: fixed;
bottom: 0px;
//width: 100%;
z-index: 3000;
padding: $gutter-b;
font-size: 0;
line-height: 0;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
transition-delay: initial;
transition-property: opacity, transform;
@include backface-visibility(hidden);
@include translate3d(0, 10px, 0);
pointer-events: none !important;
opacity: 0;
&.out {
@include translate3d(0, 10px, 0);
* {pointer-events: none !important; }
button, input, .dialog {
display: none;
}
}
&.in {
@include translate3d(0, 0, 0);
&.out {
@include translate3d(0, 10px, 0);
* {pointer-events: none !important; }
}
}
> * {
margin: 0 2px;
margin-top: 4px;
pointer-events: auto !important;
&.out {
margin: 0;
opacity: 0;
}
}
&.toolbar-vertical {
width: auto !important;
&.toolbar-left {
left: 0px;
.panel-wrap {
left: 0px;
@include transform-origin(center left);
.panel {@include perspective-origin(center left);
> div {
@include rotateY(90deg);
@include transform-origin(center left);
}
}
}
}
&.toolbar-right {
right: 0px;
.panel-wrap {
right: 0px;
@include transform-origin(center right);
.panel {@include perspective-origin(center right);
> div {
@include rotateY(-90deg);
@include transform-origin(center right);
}
}
}
}
font-size: 0px;
height: 100%;
pointer-events: none;
@include transition( all 0.25s ease-in-out);
@include translate3d(0, 0, 0);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
.panel-toggles {
@include transition( all 0.15s ease-in-out);
display: inline-block;
vertical-align: middle;
.btn-group {
display: block;
margin: 4px 0;
}
// > div > * {
// height: 0px;
// // pointer-events: auto;
// display: block !important;
// overflow: hidden;
// @include transition( height 0.125s ease-in-out);
// }
// > div > .in {
// pointer-events: auto;
// cursor: pointer;
// height: 60px;
// }
}
.panels {
@include transition( all 0.15s ease-in-out);
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
margin: 10px;
.panel-wrap {
display: table;
position: absolute;
height: 100%;
pointer-events: none;
@include scale(0,0);
@include user-select(none);
@include transition( all 0.125s ease-in-out);
&.open {
@include scale(1,1);
.panel > div {
@include rotateX(0deg);
opacity: 1 !important;
pointer-events: auto !important;
}
}
.panel {
display: table-cell;
vertical-align: middle;
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
z-index: 1000;
pointer-events: none;
> div {
@include backface-visibility(hidden);
/* Other transform properties here */
pointer-events: none;
@include transition(all 0.2s ease-in-out);
position: relative;
}
}
}
}
}
}
.toolbar-properties {
bottom: 64px;
z-index: 0;
&.in {
z-index: 3000;
}
.icon-sm {
z-index: 110;
background-color: #222;
border-radius: 50px;
}
.jewel {
border: 2px solid rgba(255,255,255,0.5);
background-color: transparent;
color: #989898;
width: 36px;
height: 36px;
border-top-left: 0px;
border-top-right: 0px;
font-size: 13px;
line-height: 26px;
top: 10px;
right: 2px;
box-shadow: 0px 0px 1px;
}
.jewel-stroke {
border-width: 10px;
}
.dropdown-toggle.open .jewel {
color: white;
}
}
.toolbar-elements > .btn-group,
.toolbar-properties > .btn-group {
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

334
styles/tools.scss Normal file
View File

@@ -0,0 +1,334 @@
@import "vars";
@import "mixins";
#presentation-previous,
#presentation-next {
@include transition( all 0.25s ease-in-out);
position: absolute;
top: 50%;
margin: 10px;
margin-top: -30px;
pointer-events: none;
opacity: 0;
text-shadow: 0 0 2px rgba(255,255,255,0.05);
color: $dark;
z-index: 1000;
&:active {
@include transition( all 0s ease-in-out);
}
}
#presentation-previous {left: 0; }
#presentation-next {right: 0; }
#properties {
position: absolute;
right: 0px;
padding: 10px;
font-size: 0px;
white-space: nowrap;
height: 100%;
pointer-events: none;
@include transition( all 0.25s ease-in-out);
@include translate3d(0, 0, 0);
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
.panel-toggles {
@include transition( all 0.15s ease-in-out);
display: inline-block;
vertical-align: middle;
> div {
background-color: $dark !important;
color: $light;
border-radius: $radius;
font-size: 0px;
// border-top-right-radius: 0 !important;
// border-bottom-right-radius: 0 !important;
}
> div > * {
height: 0px;
// pointer-events: auto;
display: block !important;
overflow: hidden;
@include transition( height 0.125s ease-in-out);
}
> div > .in {
pointer-events: auto;
cursor: pointer;
height: 60px;
}
}
.panels {
@include transition( all 0.15s ease-in-out);
height: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 10px;
.panel-wrap {
display: table;
position: absolute;
height: 100%;
right: 0px;
pointer-events: none;
@include scale(0,0);
@include user-select(none);
@include transform-origin(center right);
@include transition( all 0.125s ease-in-out);
&.active {
@include scale(1,1);
.panel > div {
@include rotateX(0deg);
pointer-events: auto !important;
}
}
.panel {
display: table-cell;
vertical-align: middle;
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
z-index: 1000;
@include perspective-origin(center right);
pointer-events: none;
> div {
@include rotateY(-90deg);
@include transform-origin(center right);
@include backface-visibility(hidden);
/* Other transform properties here */
pointer-events: none;
@include transition(all 0.2s ease-in-out);
position: relative;
background-color: $dark !important;
color: $light;
border-radius: $radius;
// overflow: hidden;
.section {
border-top: 2px solid rgba(0,0,0,0.1);
padding: 12px;
text-align: center;
min-width: 200px;
.label-sm {margin-bottom: 0px !important; pointer-events: none;}
.label-sm + input {margin-top: -8px !important; }
.label-sm + .btn-group {margin-top: -8px !important; }
.input {
height: 45px;
line-height: 45px;
}
}
}
}
}
}
}
#property-rotate {
overflow: hidden;
width: 60px;
height: 60px;
display: inline-block;
vertical-align: middle;
@include transition( all 0.25s ease-in-out);
&.inactive {
width: 0px;
}
}
#selection-tools {
position: absolute;
top: 50%;
left: 50%;
@include translate (-50%, -50%);
}
.unit {
font-family: 'open sans', sans-serif;
font-size: 9px;
margin-left: 3px;
text-transform: uppercase;
display: none;
}
#tools {
@include transition( all 0.25s ease-in-out);
position: absolute;
left: 0px;
padding: 10px;
font-size: 0;
height: 100%;
pointer-events: none;
z-index: 10;
> .btn-group {
background-color: $dark !important;
color: $light;
border-radius: $radius;
pointer-events: auto;
@include clearfix;
display: inline-block;
position: relative;
white-space: nowrap;
font-size: 0px;
text-align: center;
font-size: 0px;
line-height: 0px;
// border-top-left-radius: 0 !important;
// border-bottom-left-radius: 0 !important;
.btn {
display: block;
}
.btn.btn-divider {
min-height: 2px;
min-width: 60px;
width: 60px;
height: 2px !important;
padding: 0px;
background-color: rgba(0, 0, 0, 0.1);
margin: -1px 0;
opacity: 1;
z-index: 1000;
position: relative;
}
}
}
// #tools {
// position: absolute;
// top: 10px;
// width: 100%;
// @include transition( all 0.25s ease-in-out);
// z-index: 2000;
// pointer-events: none;
// -webkit-backface-visibility: hidden;
// -moz-backface-visibility: hidden;
// -ms-backface-visibility: hidden;
// backface-visibility: hidden;
// .btn {
// div {
// position: absolute;
// width: 100%;
// }
// &.fill-color-1 .jewel{ background-color: #4a2f7e; }
// &.fill-color-2 .jewel{ background-color: #9b59b6; }
// &.fill-color-3 .jewel{ background-color: #3498db; }
// &.fill-color-4 .jewel{ background-color: #2ecc71; }
// &.fill-color-5 .jewel{ background-color: #f1c40f; }
// &.fill-color-6 .jewel{ background-color: #e67e22; }
// &.fill-color-7 .jewel{ background-color: #d55c4b; }
// &.fill-color-8 .jewel{ background-color: #6f4021; }
// &.fill-color-9 .jewel{ background-color: #ffffff; }
// &.fill-color-10 .jewel{ background-color: #95a5a6; }
// &.fill-color-11 .jewel{ background-color: #252525; }
// &.fill-color-12 .jewel{ background-color: transparent !important;
// background-image: url('../images/opacity-grid.png');
// background-size: contain;
// }
// &.stroke-color-1 .jewel{ background-color: #4a2f7e;}
// &.stroke-color-2 .jewel{ background-color: #9b59b6;}
// &.stroke-color-3 .jewel{ background-color: #3498db;}
// &.stroke-color-4 .jewel{ background-color: #2ecc71;}
// &.stroke-color-5 .jewel{ background-color: #f1c40f;}
// &.stroke-color-6 .jewel{ background-color: #e67e22;}
// &.stroke-color-7 .jewel{ background-color: #d55c4b;}
// &.stroke-color-8 .jewel{ background-color: #6f4021;}
// &.stroke-color-9 .jewel{ background-color: #ffffff;}
// &.stroke-color-10 .jewel{ background-color: #95a5a6;}
// &.stroke-color-11 .jewel{ background-color: #252525;}
// &.stroke-color-12 .jewel{ background-color: transparent !important;
// background-image: url('../images/opacity-grid.png');
// background-size: contain;
// }
// }
// }
// .tool-set {
// @include user-select(none);
// pointer-events: none;
// text-align: center;
// font-size: 0px;
// width: auto;
// white-space: nowrap;
// &#sub-tools,
// &#main-tools{
// @include transition( all 0.15s ease-in-out);
// }
// &#main-tools {
// top: 10px;
// }
// &#sub-tools {
// top: 72px;
// -webkit-perspective: 1000;
// -moz-perspective: 1000;
// -ms-perspective: 1000;
// perspective: 1000;
// > div {
// @include rotateX(-90deg);
// -webkit-backface-visibility: hidden;
// -moz-backface-visibility: hidden;
// -ms-backface-visibility: hidden;
// backface-visibility: hidden;
// /* Other transform properties here */
// top: 0px;
// position: absolute;
// width: 100%;
// pointer-events: none;
// @include opacity(0);
// @include transition( all 0.2s ease-in-out);
// height: 0px !important;
// &.in {
// @include rotateX(0deg);
// @include opacity(1);
// pointer-events: auto !important;
// }
// }
// }
// > .btn-group {
// background-color: $dark !important;
// color: $light;
// border-radius: $radius;
// @include clearfix;
// display: inline-block;
// position: relative;
// white-space: nowrap;
// font-size: 0px;
// text-align: center;
// font-size: 0px;
// line-height: 0px;
// .btn {
// pointer-events: auto;
// }
// }
// }

115
styles/type.scss Normal file
View File

@@ -0,0 +1,115 @@
@import "vars";
@import "mixins";
body {
background-color: $light;
color: $medium;
font-weight: 300;
font-weight: 400;
font-family: $main-font, sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.6;
}
hr {
margin: auto;
// margin-top: ($line-height*2)-1;
// margin-bottom: $line-height*2;
width: auto;
border: none;
border-top: 2px solid rgba(0,0,0,0.025);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.3;
margin-top: 0px;
margin-bottom: 1em;
// font-family: $main-font;
display: block;
&:last-child { margin-bottom: 0px; }
}
h1, .h1 { font-size: 54px; }
h2, .h2 {font-size: 40px; }
h3, .h3 {font-size: 30px; }
h4, .h4 {font-size: 20px; }
h5, .h5 {font-size: 16px; }
h6, .h6 {font-size: 14px; }
strong {font-weight: 500; }
small {font-size: 75%; }
a {
text-decoration: none;
color: $medium;
}
dl {
background-color: rgba(0,0,0,0.05);
color: rgba(136,136,136,1);
border-radius: $radius;
display: inline-block;
margin-right: 5px;
padding: 15px 25px;
dt {
font-weight: bold;
}
dd {
padding: 0px;
margin: 0px;
}
}
ol, ul, p {
font-size: 20px;
line-height: 1.6;
margin: 0px;
margin-bottom: 1em;
/*&:last-child {
margin-bottom: 0px;
}*/
small {
font-size: 80%;
line-height: 170%;
display: inline-block;
}
a {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
b {
font-weight: 700;
}
&.lead {
font-weight: 200;
font-size: 22px !important;
line-height: 1.4;
&.lead-lg { $font-size: 20px*1.5 !important; }
&.lead-xl { font-size: 40px !important; }
&.lead-xxl { font-size: 60px !important; }
small { font-size: 60%; }
b { font-weight: 600; }
}
}
// ol, ul {padding-left: 20px; }
// ol.lead {padding-left: 29px; }
// ul.lead {padding-left: 23px; }

314
styles/typography.scss Normal file
View File

@@ -0,0 +1,314 @@
@import "vars";
@import "mixins";
#font,
#style {
top: 0px;
.select-list {background-color: transparent; }
}
#font {
.font-header {
background: rgba(0,0,0,0.025);
}
#font-search {border-bottom: 2px solid rgba(0,0,0,0.0125);
.input {padding-left: 25px; }
position: relative;
}
.select-list {
li {
font-size: 20px;
> a,
> span {
}
&:hover {
> span {padding-right: 40px; }
.fav-toggle {
display: block;
&:hover {opacity: 1;
color: white;
}
}
}
.fav-toggle {
color: $medium;
display: none;
position: absolute;
right: 10px;
top: 0;
&:before {
height: 38px !important;
line-height: 38px !important;
}
}
}
}
//.overflow-y-scroll {top: 93px; }
.tabs-switcher {
padding: 15px 20px;
padding-bottom: 0;
ul {
display: table;
width: 100%;
padding: 0;
}
li {
display: table-cell;
span {
padding: 8px 10px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
display: block;
cursor: pointer;
}
color: $dark;
border-right: 2px solid transparent;
background-color: rgba(0,0,0,0.1);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
&:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
padding-left: 6px;
}
&:last-child {
padding-right: 6px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border: none;
}
&.active {
background-color: rgba(0,0,0,0.25);
color: $light;
}
}
}
}
#typography {
#format {
top: 54px;
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
flex-direction: column;
.select-list {background-color: transparent; }
.overflow-y-scroll {
flex: 1;
position: relative;
}
.actions {
padding: 15px 20px;
height: 80px;
}
}
.btn-more,
.btn-less {
position: absolute;
&:active .icon {
opacity: 1;
}
.icon {
color: white;
opacity: 0.2;
}
}
#alignment {padding-top: 10px; }
#styles{padding-bottom: 10px; }
#font-style,
#font-face {
padding: 10px;
}
#font-face {padding-bottom: 0; }
#font-style {padding-top: 0; }
#type-ratio {
@include clearfix();
margin: auto;
padding-top: 20px;
width: 100%;
text-align: center;
position: relative;
#type-ratio-toggle {
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
opacity: 0.25;
&:hover {
opacity: 0.4;
}
}
#font-size {
> label {right: 0px; text-align: center; }
> .icon {right: 0px; }
.btn-more, .btn-less { left: 0px;}
}
#line-height {
> label { left: 0px; text-align: center; }
> .icon { left: 0px; }
.btn-more, .btn-less { right: 0px;}
}
#font-size {text-align: right; }
#font-size .form-group {padding-right: 0px;}
#line-height {text-align: left; }
#line-height .form-group {padding-left: 0px;}
#font-size,
#line-height {
display: inline-block;
width: 50%;
.fader {
position: relative;
height: 140px;
width: 40px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
border-radius: 30px;
margin: 2px;
margin-bottom: 15px;
.fader-constraint {
width: 100%;
height: auto;
position: absolute;
top: 20px;
bottom: 20px;
cursor: -webkit-grab; cursor: -moz-grab;
&:active {
cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
}
.fader-indicator {
background-color: rgba(40,140,215,1);
border-radius: 30px;
width: 40px;
position: absolute;
bottom: 0px;
margin: 0px;
// min-height: 40px;
padding-bottom: 40px;
pointer-events: none;
@include box-sizing(content-box);
}
.fader-selector {
cursor: ns-resize;
position: absolute;
margin-top: -22px;
pointer-events: none;
}
.fader-selector:active {
.value {color: $light; }
}
}
.form-group {
margin-bottom: 7px;
}
.btn-more {top: 0px; }
.btn-less {bottom: 60px; }
.value {
cursor: ns-resize;
height: 44px;
line-height: 44px;
display: block;
width: 100px;
padding: 0 16px;
font-size: 16px;
font-size: 22px;
color: $medium;
position: absolute;
text-align: center;
top: 0px;
}
}
}
#tracking {
text-align: center;
white-space: nowrap;
position: relative;
.a,
.b {
font-size: 22px;
display: inline-block;
color: $medium;
width: 32px;
height: 60px;
line-height: 60px;
vertical-align: middle;
opacity: 0.4;
}
.arrow-left,
.arrow-right {
background-color: $medium;
height: 2px;
width: 20px;
display: inline-block;
vertical-align: middle;
opacity: 0.4;
position: relative;
&:after {
content: "";
position: absolute;
top: -4px;
right: 0;
margin: 0;
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent;
pointer-events: none !important;
}
}
.arrow-left:after { right: 100%; border-right-color: $medium; }
.arrow-right:after { left: 100%; border-left-color: $medium; }
.value {
background-color: $dark;
cursor: ew-resize;
height: 60px;
width: 26px;
left: 50%;
margin-left: -13px;
line-height: 60px;
display: inline-block;
font-size: 22px;
color: $medium;
position: absolute;
bottom: 0px;
&:active {color: $light; }
}
}
}

2648
styles/unicode.scss Normal file
View File

File diff suppressed because it is too large Load Diff

27
styles/updates.scss Normal file
View File

@@ -0,0 +1,27 @@
@import "vars";
@import "mixins";
#updates {
list-style: none;
padding: 0;
margin: 0;
> li {
padding: 0 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
.avatar {
border-radius: 100%;
vertical-align: middle;
margin-right: 10px;
}
> span,
> a {
vertical-align: middle;
line-height: 60px;
}
a {color: $blue; }
.date {
float: right;
display: inline-block;
}
}
}

30
styles/user.scss Normal file
View File

@@ -0,0 +1,30 @@
// .member {
// position: relative;
// padding: 15px 25px;
// border-top: 1px solid rgba(255,255,255,0.05) !important;
// .member-avatar {
// background-color: $blue;
// font-family: $main-font;
// color: white;
// display: inline-block;
// height: 30px;
// width: 30px;
// line-height: 30px;
// text-align: center;
// border-radius: $radius;
// background-size: cover;
// background-position: center;
// margin-right: 10px;
// float: left;
// }
// .member-email,
// .member-name {
// font-weight: 300;
// opacity: 0.5;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// }

51
styles/vars.scss Normal file
View File

@@ -0,0 +1,51 @@
$radius: 3px !default;
$unit: 60px !default;
$blue: #3d9ee9;
$blue-light: #4dafeb;
$blue-lighter: #77c8f8;
$yellow: #f1c40f;
$green: #2ecc71;
$red: #ff5955;
$yellow: #f1c40f;
$light: #f5f5f5;
$lightish: #eee;
$facebook: #3e5b97;
$twitter: #2aa7de;
$color-1 : #4a2f7e; // purple
$color-2 : #9b59b6; // lilac
$color-3 : #3498db; // blue
$color-4 : #2ecc71; // green
$color-5 : #f1c40f; // yellow
$color-6 : #e67e22; // orange
$color-7 : #d55c4b; // red
$color-8 : #6f4021; // brown
$color-9 : #ffffff; // white
$color-10 : #95a5a6; // grey
$color-11 : #252525; // black
$black: #111; // black
$darker: #292929;
$dark: #222; // dark
$medium: #888; // medium
$lighter: #989898;
$sidebar-width: 280px;
$main-font: Avenir W01;
$sec-font: Avenir W01;
$font-size: 18px;
$line-height: 24px;
$gutter-a: 10px;
$gutter-b: 20px;
$gutter-c: 40px;
$gutter-d: 60px;
$gutter-e: 80px;
$folder-gutter: 20px;

38
styles/video.scss Normal file
View File

@@ -0,0 +1,38 @@
@import "vars";
@import "mixins";
video {
-webkit-appearance:none;
}
video::-webkit-media-controls-panel {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider-container {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
video::-webkit-full-page-media::-webkit-media-controls-panel {}
video::-webkit-media-controls-timeline-container {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-seek-back-button {}
video::-webkit-media-controls-seek-forward-button {}
video::-webkit-media-controls-fullscreen-button {}
video::-webkit-media-controls-rewind-button {}
video::-webkit-media-controls-return-to-realtime-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}