zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-03 11:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tabs in AddTorrent modal

Browse Source
This commit is contained in:
John Furrow
2016-02-15 13:14:38 -08:00
parent 96e008d725
commit ce94ac35d1
15 changed files with 501 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/components/_floating-action.scss
+1 -1
View File
@@ -8,7 +8,7 @@
cursor: pointer;
height: 16px;
outline: none;
margin-right: 8px;
margin-right: 6px;
padding: 0;
position: relative;
transition: background 0.25s, box-shadow 0.25s;
client/source/sass/components/_modals.scss
+75 -20
View File
@@ -1,3 +1,7 @@
$modal--border-radius: 3px;
$modal-content--padding--horizontal: $spacing-unit;
$modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
.modal {
background: $modal--overlay;
height: 100%;
@@ -8,21 +12,78 @@
width: 100%;
z-index: 100;
&__header {
background: $modal--heading--background;
border-radius: $modal--border-radius $modal--border-radius 0 0;
box-shadow: inset 0 -1px 0 $modal--heading--border;
color: $modal--heading--foreground;
flex: 0 0 auto;
font-size: 1.1em;
font-weight: 400;
padding: $modal-content--padding--vertical $modal-content--padding--horizontal 0 $modal-content--padding--horizontal;
}
&__tabs {
color: $modal--tab--foreground;
font-size: 0.7em;
margin: 0 $spacing-unit * -1/5;
.modal {
&__tab {
cursor: pointer;
display: inline-block;
margin-right: $spacing-unit * 1/4;
padding: $spacing-unit * 1/5;
position: relative;
&:after {
bottom: 0;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
transition: background 0.25s;
}
&:last-child {
margin-right: 0;
}
&.is-active {
color: $modal--tab--foreground--active;
font-weight: 600;
&:after {
background: $modal--tab--border--active;
}
}
}
}
}
&__content {
background: $modal--background;
border-radius: 5px;
box-shadow:
0 0 0 1px $modal--content--border,
0 0 35px $modal--content--shadow;
left: 50%;
max-height: 80%;
max-width: 80%;
flex: 1 1 auto;
overflow: auto;
padding: 30px;
position: absolute;
top: 10%;
transform: translate(-50%, 0);
width: 500px;
padding: $modal-content--padding--vertical $modal-content--padding--horizontal;
&__wrapper {
background: $modal--background;
border-radius: $modal--border-radius;
box-shadow:
0 0 0 1px $modal--content--border,
0 0 35px $modal--content--shadow;
display: flex;
flex-direction: column;
left: 50%;
max-height: 80%;
max-width: 80%;
position: absolute;
top: 10%;
transform: translate(-50%, 0);
width: 500px;
}
&--align-center {
text-align: center;
@@ -31,6 +92,7 @@
&__footer {
margin-top: $spacing-unit;
padding: 0 0 $modal-content--padding--vertical 0;
}
&__button-group {
@@ -44,13 +106,6 @@
}
}
&__header {
color: $modal--header--foreground;
font-size: 1.1em;
font-weight: 400;
margin-bottom: 20px;
}
&__animation-enter {
opacity: 0;
}
client/source/sass/components/_textbox-repeater.scss
+10
View File
@@ -20,4 +20,14 @@
position: relative;
}
}
.form {
&__row {
& + .form__row {
margin-top: $spacing-unit * 1/2;
}
}
}
}