Skip to content
GitLab
Commit 7ff29265 authored by mntmn's avatar mntmn
Browse files

initial commit.

parents
Hide whitespace changes
Inline Side-by-side
styles/folder-item.scss 0 → 100644
View file @ 7ff29265
@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; }
}
styles/folder.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
}
styles/form-checkbox.scss 0 → 100644
View file @ 7ff29265
@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;
}
\ No newline at end of file
styles/form-file.scss 0 → 100644
View file @ 7ff29265
.file {
input {
visibility: hidden;
width: 0;
height: 0;
position: absolute;
}
display: inline-block !important;
overflow: hidden;
cursor: pointer;
}
\ No newline at end of file
styles/form-input-group.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
}
\ No newline at end of file
styles/form-range.scss 0 → 100644
View file @ 7ff29265
@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;
}
\ No newline at end of file
styles/form-select.scss 0 → 100644
View file @ 7ff29265
@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%;
}
styles/form.scss 0 → 100644
View file @ 7ff29265
@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;
// }
// }
styles/guides.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
}
styles/handles.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
styles/header.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
styles/helper.scss 0 → 100644
View file @ 7ff29265
@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;
}
styles/icon.scss 0 → 100644
View file @ 7ff29265
@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);
}
styles/landing.scss 0 → 100644
View file @ 7ff29265
@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%;
}
}
}
styles/lasso.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
\ No newline at end of file
styles/layout.scss 0 → 100644
View file @ 7ff29265
#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; }
}
}
}
}
\ No newline at end of file
styles/list.scss 0 → 100644
View file @ 7ff29265
@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; }
}
styles/login.scss 0 → 100644
View file @ 7ff29265
@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);
}
}
}
\ No newline at end of file
styles/main.scss 0 → 100644
View file @ 7ff29265
@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;
}
}
}
}
styles/margin-columns.scss 0 → 100644
View file @ 7ff29265
@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; }
}
}
}
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal