335 lines
6.2 KiB
SCSS
335 lines
6.2 KiB
SCSS
// studio specific mixins
|
|
// ====================
|
|
|
|
// buttons
|
|
@mixin button {
|
|
display: inline-block;
|
|
padding: ($baseline/5) $baseline ($baseline/4);
|
|
@include font-size(14);
|
|
font-weight: 700;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
|
|
@include transition(background-color .15s, box-shadow .15s);
|
|
|
|
&.disabled {
|
|
border: 1px solid $gray-l1 !important;
|
|
border-radius: 3px !important;
|
|
background: $gray-l1 !important;
|
|
color: $gray-d1 !important;
|
|
pointer-events: none;
|
|
cursor: none;
|
|
&:hover {
|
|
box-shadow: 0 0 0 0 !important;
|
|
}
|
|
}
|
|
|
|
&:hover, &.active {
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
|
|
}
|
|
}
|
|
|
|
// button - green
|
|
@mixin green-button {
|
|
@include button;
|
|
border: 1px solid $green-d1;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
|
background-color: $green;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: $green-s1;
|
|
color: $white;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid $green-l3 !important;
|
|
background: $green-l3 !important;
|
|
color: $white !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// button - blue
|
|
@mixin blue-button {
|
|
@include button;
|
|
border: 1px solid $blue-d1;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
|
background-color: $blue;
|
|
color: $white;
|
|
|
|
&:hover, &.active {
|
|
background-color: $blue-s2;
|
|
color: $white;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid $blue-l3 !important;
|
|
background: $blue-l3 !important;
|
|
color: $white !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// button - red
|
|
@mixin red-button {
|
|
@include button;
|
|
border: 1px solid $red-d1;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
|
background-color: $red;
|
|
color: $white;
|
|
|
|
&:hover, &.active {
|
|
background-color: $red-s1;
|
|
color: $white;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid $red-l3 !important;
|
|
background: $red-l3 !important;
|
|
color: $white !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// button - pink
|
|
@mixin pink-button {
|
|
@include button;
|
|
border: 1px solid $pink-d1;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
|
background-color: $pink;
|
|
color: $white;
|
|
|
|
&:hover, &.active {
|
|
background-color: $pink-s1;
|
|
color: $white;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid $pink-l3 !important;
|
|
background: $pink-l3 !important;
|
|
color: $white !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// button - orange
|
|
@mixin orange-button {
|
|
@include button;
|
|
border: 1px solid $orange-d1;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
|
|
background-color: $orange;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
|
color: $gray-d2;
|
|
|
|
&:hover {
|
|
background-color: $orange-s2;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid $orange-l3 !important;
|
|
background: $orange-l2 !important;
|
|
color: $gray-l1 !important;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// button - white
|
|
@mixin white-button {
|
|
@include button;
|
|
border: 1px solid $mediumGrey;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
|
background-color: #dfe5eb;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
|
color: rgb(92, 103, 122);
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
|
|
|
&:hover {
|
|
background-color: rgb(222, 236, 247);
|
|
color: rgb(92, 103, 122);
|
|
}
|
|
}
|
|
|
|
// button - grey
|
|
@mixin grey-button {
|
|
@include button;
|
|
border: 1px solid $gray-d2;
|
|
border-radius: 3px;
|
|
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
|
background-color: #d1dae3;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
|
color: #6d788b;
|
|
|
|
&:hover {
|
|
background-color: #d9e3ee;
|
|
color: #6d788b;
|
|
}
|
|
}
|
|
|
|
// button - grey dark
|
|
@mixin dark-grey-button {
|
|
@include button;
|
|
border: 1px solid #1c1e20;
|
|
border-radius: 3px;
|
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: #595f64;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
|
|
// ====================
|
|
|
|
// UI
|
|
@mixin edit-box {
|
|
padding: 15px 20px;
|
|
border-radius: 3px;
|
|
background-color: $lightBluishGrey2;
|
|
color: #3c3c3c;
|
|
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
|
|
|
|
label {
|
|
color: $baseFontColor;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
border: 1px solid $darkGrey;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 80px;
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 10px;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.save-button {
|
|
@include blue-button;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.cancel-button {
|
|
@include white-button;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@mixin tree-view {
|
|
border: 1px solid $mediumGrey;
|
|
background: $lightGrey;
|
|
|
|
.branch {
|
|
margin-bottom: 10px;
|
|
|
|
&.collapsed {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.branch > .section-item {
|
|
border-top: 1px solid #c5cad4;
|
|
}
|
|
|
|
.section-item {
|
|
position: relative;
|
|
display: block;
|
|
padding: 6px 8px 8px 16px;
|
|
background: #edf1f5;
|
|
font-size: 13px;
|
|
|
|
&:hover {
|
|
background: #fffcf1;
|
|
|
|
.item-actions {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.editing {
|
|
background: #fffcf1;
|
|
}
|
|
|
|
.draft-item:after,
|
|
.public-item:after,
|
|
.private-item:after {
|
|
margin-left: 3px;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.draft-item:after {
|
|
content: "- draft";
|
|
}
|
|
|
|
.private-item:after {
|
|
content: "- private";
|
|
}
|
|
|
|
.private-item {
|
|
color: #a4aab7;
|
|
}
|
|
|
|
.draft-item {
|
|
color: #9f7d10;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $baseFontColor;
|
|
|
|
&.new-unit-item {
|
|
color: #6d788b;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
.section-item {
|
|
padding-left: 56px;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin-left: 56px;
|
|
}
|
|
}
|
|
|
|
ol ol {
|
|
.section-item {
|
|
padding-left: 96px;
|
|
}
|
|
|
|
.new-unit-item {
|
|
margin-left: 96px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// sunsetted mixins
|
|
@mixin active {
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
background-color: rgba(255, 255, 255, .3);
|
|
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
} |