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

505 lines
9.7 KiB
SCSS

.lightbox {
@extend %lightbox;
h2 {
@extend %larger;
@extend %text;
}
}
.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;
resize: vertical;
}
label {
@extend %xsmall;
background: $whitish;
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 {
display: flex;
justify-content: center;
margin-bottom: 1rem;
fieldset {
margin-right: .5rem;
&:hover {
color: $white;
transition: all .2s ease-in;
}
&:last-child {
margin: 0;
}
}
.requirement,
.iocaine {
&:hover {
background: $primary-light;
border: 1px solid $primary;
}
}
.blocked {
&:hover {
background: $red-light;
border: 1px solid $red;
}
}
.client-requirement,
.team-requirement,
.iocaine-flag {
input:checked+label {
background: $primary;
border: 1px solid $primary;
color: $white;
}
}
.blocking-flag {
label {
align-self: stretch;
display: block;
}
input:checked+label {
background: $red;
border: 1px solid $red;
color: $white;
}
}
input {
display: none;
}
}
}
.lightbox-generic-bulk {
form {
flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
}
textarea {
max-height: 12rem;
min-height: 15rem;
}
}
.lightbox-search {
form {
flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
}
fieldset {
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;
}
}
.icon-delete {
@extend %large;
}
}
.extra-text {
margin-top: 1rem;
}
fieldset {
margin-bottom: 0;
}
select {
width: 80%;
}
.icon {
@extend %large;
margin-left: .5rem;
}
.icon-delete {
@extend %xlarge;
&: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 {
@extend %small;
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 {
padding: 8px 0;
text-align: center;
width: 100%;
&: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;
}
}
.choices {
margin-bottom: 2rem;
}
.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: $primary-light;
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;
}
.user-list-single {
&:hover {
background: lighten($primary, 58%);
cursor: pointer;
transition: background .3s linear;
transition-delay: .2s;
}
}
.more-watchers {
@extend %title;
@extend %medium;
padding: .5rem;
text-align: center;
}
}
.lb-create-edit-userstory {
.ticket-role-points {
flex-grow: 1;
flex-shrink: 1;
max-width: calc(100% * (1/5) - .2rem);
&:first-child {
margin-left: 0;
}
&:nth-child(5n+5) {
margin-right: 0;
}
}
.points-per-role {
margin-bottom: 1rem;
}
}