taiga-front/app/styles/modules/common/lightbox.scss

533 lines
10 KiB
SCSS

.lightbox {
@extend %lightbox;
}
.markdown-preview {
display: inline-block;
margin-bottom: .5rem;
a {
@extend %button;
@extend %small;
color: $gray-light;
padding: 3px 20px;
&:first-child {
border-right: 1px solid $gray-light;
}
&:hover {
color: $grayer;
transition: color .2s linear;
}
}
.active {
color: $grayer;
}
}
.lightbox-generic-form {
form {
flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
}
fieldset {
position: relative;
}
textarea {
margin-bottom: 1rem;
max-height: 9rem;
min-height: 7rem;
}
label {
@extend %button;
border: 1px solid $gray-light;
color: $grayer;
cursor: pointer;
display: block;
padding: 7px 30px;
transition: all .2s ease-in;
&:hover {
span {
color: $white;
}
}
span {
color: $grayer;
vertical-align: middle;
}
}
.settings {
align-content: flex-start;
align-items: stretch;
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
fieldset {
flex-basis: 30%;
flex-grow: 1;
margin-right: .5rem;
text-align: center;
&:last-child {
margin: 0;
}
}
.requirement,
.iocaine {
&:hover {
background: $fresh-taiga;
border: 1px solid $fresh-taiga;
color: $white;
transition: all .2s ease-in;
}
}
.blocked {
padding: 8px 30px;
&:hover {
background: $red-light;
border: 1px solid $red-light;
color: $white;
transition: all .2s ease-in;
}
}
.client-requirement,
.team-requirement,
.iocaine-flag {
input:checked+label {
background: $fresh-taiga;
color: $white;
}
}
.blocking-flag {
input:checked+label {
background: $red;
color: $white;
}
}
input {
display: none;
}
}
.points-per-role {
.popover {
@include popover(200px, $top: 105%, $left: 35%, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 10px);
}
}
}
.lightbox-generic-bulk {
form {
flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
}
textarea {
margin-bottom: 1rem;
max-height: 12rem;
min-height: 15rem;
}
}
.lightbox-search {
form {
flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
}
input {
margin-bottom: 1rem;
}
}
.lightbox-add-member {
.add-member-wrapper {
display: flex;
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
fieldset {
position: relative;
&:first-child {
flex-basis: 400px;
flex-grow: 3;
}
&:last-child {
flex-basis: 200px;
flex-grow: 1;
margin-left: .5rem;
}
}
}
.extra-text {
margin-top: 1rem;
}
input,
select {
margin-bottom: 0;
}
select {
width: 80%;
}
.icon {
@extend %large;
margin-left: .5rem;
}
.icon-delete {
&:hover {
color: $red;
}
}
.button {
margin-top: 1rem;
}
.help-text {
@extend %small;
padding: .5rem 1rem;
}
.checksley-error-list {
right: .5rem;
li {
display: none;
&:first-child {
display: block;
}
}
}
}
.lightbox-sprint-add-edit {
form {
flex-basis: 600px;
flex-flow: 0;
max-width: 600px;
}
.last-sprint-name {
color: $gray;
opacity: 1;
position: absolute;
right: 1rem;
top: .7rem;
transition: opacity .3s linear;
&.disappear {
opacity: 0;
transition: opacity .3s linear;
}
}
.dates {
margin-bottom: 1rem;
div {
float: left;
margin-right: 1%;
position: relative;
width: 49%;
&:last-child {
margin: 0;
width: 50%;
}
}
}
.delete-sprint {
@extend %small;
color: $grayer;
display: block;
margin-top: 1rem;
text-align: right;
a {
color: $gray-light;
margin-left: .5rem;
transition: color .3s linear;
&:hover {
color: $red;
transition: color .3s linear;
}
}
}
}
.lightbox-generic-ask {
form {
flex-basis: 420px;
flex-flow: 0;
max-width: 420px;
}
.subtitle,
.message {
display: block;
line-height: 2rem;
text-align: center;
}
.subtitle {
@extend %large;
@extend %title;
}
.options {
display: flex;
a {
flex-grow: 1;
padding: 8px 0;
text-align: center;
&:first-child {
margin-right: .5rem;
}
}
}
}
.lightbox-ask-choice {
text-align: center;
form {
flex-basis: 420px;
flex-grow: 0;
}
.question,
.subtitle {
display: block;
line-height: 1.5rem;
text-align: center;
}
.subtitle {
@extend %large;
@extend %title;
}
.replacement {
display: block;
span {
display: block;
}
}
.options {
display: flex;
a {
flex-grow: 1;
padding: 8px 0;
text-align: center;
&:first-child {
margin-right: .5rem;
}
}
}
}
.lightbox-delete-account {
form {
flex-basis: 420px;
flex-grow: 0;
width: 420px;
}
.question,
.subtitle {
display: block;
line-height: 2rem;
text-align: center;
}
.subtitle {
@extend %large;
@extend %title;
}
.newsletter {
margin-top: 1rem;
text-align: center;
input {
margin-right: .5rem;
+label {
@extend %small;
@extend %text;
}
}
}
.options {
display: flex;
a {
flex-grow: 1;
padding: 8px 0;
text-align: center;
&:first-child {
margin-right: .5rem;
}
}
}
}
.lightbox-delete-project {
form {
flex-basis: 420px;
flex-grow: 0;
width: 420px;
}
.question,
.subtitle {
display: block;
line-height: 2rem;
text-align: center;
}
.subtitle {
@extend %large;
@extend %title;
}
.options {
display: flex;
a {
flex-grow: 1;
padding: 8px 0;
text-align: center;
&:first-child {
margin-right: .5rem;
}
}
}
}
.lightbox-generic-success,
.lightbox-generic-error,
.lightbox-generic-loading {
section {
flex-basis: 500px;
flex-grow: 0;
flex-shrink: 0;
width: 500px;
}
h2 {
line-height: 2rem;
}
p {
text-align: center;
}
}
.lightbox-generic-loading {
.spin {
margin: 1rem auto;
width: 5rem;
img {
@extend %loading-spinner;
max-height: 100%;
max-width: 100%;
width: 100%;
}
}
.progress-bar-wrapper {
background: darken($whitish, 5%);
height: 30px;
margin-bottom: 1rem;
padding: 3px;
position: relative;
.bar {
background: $fresh-taiga;
height: 24px;
position: absolute;
transition: width .1s linear;
}
.progress {
@extend %title;
@extend %bold;
@extend %large;
background: darken($whitish, 5%);
bottom: 35px;
color: $gray;
padding: .3rem;
position: absolute;
transition: left .1s linear;
}
}
}
.lightbox-create-issue {
form {
flex-basis: 600px;
flex-grow: 0;
width: 600px;
}
.fieldset-row {
display: flex;
fieldset {
flex-basis: 100px;
flex-grow: 1;
margin-right: .5rem;
width: 30%;
&:last-child {
margin: 0;
}
}
}
textarea {
margin-bottom: 1rem;
max-height: 12rem;
min-height: 8rem;
}
}
.lightbox-block {
.form {
flex-basis: 420px;
flex-grow: 0;
width: 420px;
}
textarea {
margin-bottom: 1rem;
max-height: 12rem;
min-height: 8rem;
}
}
.lightbox-select-user {
.form {
flex-basis: 600px;
flex-grow: 0;
width: 600px;
}
.watchers {
margin-top: 1rem;
min-height: 440px;
.watcher-name {
flex-grow: 12;
}
}
.watcher-single {
position: relative;
&:hover,
&.active {
background: lighten($green-taiga, 55%);
cursor: pointer;
}
&:hover {
transition: background .3s linear;
}
&.active {
.icon {
opacity: 1;
right: 1rem;
top: 1.3rem;
}
}
}
.more-watchers {
@extend %title;
@extend %medium;
padding: .5rem;
text-align: center;
}
}
.lb-create-edit-userstory {
.points-per-role {
margin-bottom: 1rem;
li {
margin: .5rem .1rem;
}
}
}