mirror of
https://github.com/beatriceo/polyglot.git
synced 2025-10-26 03:02:12 +00:00
Merge branch 'master' into cross
This commit is contained in:
Benjamin Myara
GitHub
@@ -12,19 +12,23 @@
|
||||
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-align {
|
||||
height: 100%;
|
||||
width: 16em;
|
||||
margin-right: 5em;
|
||||
margin-right: 4em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
height: inherit;
|
||||
|
||||
div {
|
||||
height: inherit;
|
||||
display: flex;
|
||||
@@ -32,19 +36,26 @@
|
||||
border-bottom: 5px solid transparent;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 1em;
|
||||
margin-right: 2.5em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 5px solid $primary;
|
||||
color: white;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #C4C4C4;
|
||||
color: $text-inactive;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -53,7 +64,28 @@
|
||||
|
||||
.profile {
|
||||
img {
|
||||
width: 3.25em;
|
||||
width: 3em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
margin-right: 20px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.polyglot-dropdown {
|
||||
background-color: $navbar-background;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $text-inactive;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ $gray-base: $gray;
|
||||
$brand-primary: $primary;
|
||||
$brand-success: $green;
|
||||
$brand-info: $yellow;
|
||||
$brand-danger: $red;
|
||||
$brand-danger: $warn;
|
||||
$brand-warning: $orange;
|
||||
$brand-secondary: $secondary;
|
||||
|
||||
@@ -52,3 +52,4 @@ $border-radius-small: 2px;
|
||||
}
|
||||
|
||||
// Override other variables below!
|
||||
$input-border-focus: $primary;
|
||||
|
||||
@@ -8,6 +8,7 @@ $orange: #E67E22;
|
||||
$green: #32B796;
|
||||
$gray: #000000;
|
||||
$light-gray: #F4F4F4;
|
||||
$warn: #3d63cc;
|
||||
|
||||
$primary: #F55E4F;
|
||||
$secondary: #5ED17E;
|
||||
@@ -15,4 +16,5 @@ $background: #33333D;
|
||||
$card-background: #464650;
|
||||
$navbar-background: #1F1F29;
|
||||
$text-darker: #CDCDCD;
|
||||
$text-inactive: #C4C4C4;
|
||||
$icon: #EDECEC;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// Import Google fonts
|
||||
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
|
||||
@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700");
|
||||
|
||||
// Define fonts for body and headers
|
||||
$body-font: "Open Sans", "Helvetica", "sans-serif";
|
||||
$headers-font: "Raleway", "Helvetica", "sans-serif";
|
||||
$body-font: "Hind", "Helvetica", "sans-serif";
|
||||
$headers-font: "Assistant", "Helvetica", "sans-serif";
|
||||
|
||||
// To use a font file (.woff) uncomment following lines
|
||||
// @font-face {
|
||||
|
||||
@@ -18,13 +18,13 @@
|
||||
url('https://unsplash.com/photos/jay5BqVyf5A');
|
||||
|
||||
|
||||
|
||||
.login-content {
|
||||
position: relative;
|
||||
top: -10vh;
|
||||
// top: -10vh;
|
||||
padding: 50px;
|
||||
background-color: white;
|
||||
width: 25vw;
|
||||
min-width: 300px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0, 0.21);
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: 360px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: $card-background;
|
||||
@@ -73,8 +74,17 @@ a:hover {
|
||||
}
|
||||
|
||||
.video-content {
|
||||
height: 485px;
|
||||
background-color: black;
|
||||
// height: 485px;
|
||||
|
||||
padding-left: 0.2vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.flex-video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
// background-color: black;
|
||||
}
|
||||
|
||||
.half {
|
||||
@@ -91,6 +101,8 @@ a:hover {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Modal
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 0px;
|
||||
i {
|
||||
@@ -100,6 +112,7 @@ a:hover {
|
||||
|
||||
.modal-color {
|
||||
background-color: $card-background;
|
||||
min-width: 296px;
|
||||
}
|
||||
|
||||
.vertical-alignment-helper {
|
||||
@@ -133,17 +146,28 @@ a:hover {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.modal-picture {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Contact
|
||||
|
||||
.contact {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
height: 570px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
@@ -159,12 +183,10 @@ a:hover {
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.contacts-list{
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// Specific CSS for your home-page
|
||||
video {
|
||||
transform: rotateY(180deg);
|
||||
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// Import page-specific CSS files here.
|
||||
@import "home";
|
||||
@import "contacts"
|
||||
@import "contacts";
|
||||
@import "settings";
|
||||
|
||||
125
app/assets/stylesheets/pages/_settings.scss
Normal file
125
app/assets/stylesheets/pages/_settings.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
.card-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-form-no-hover {
|
||||
&:hover {
|
||||
box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.input-dropdown {
|
||||
width: 196px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {display:none;}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px $primary;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.input-field-text-black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.slider.rounded {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.slider.rounded:before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.settings {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.font-weight-normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.padding-right {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.flex-inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
@@ -3,7 +3,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: calc(100vh - 4.5em); // 4.5em is height of navbar
|
||||
padding-top: 30px;
|
||||
// height: calc(100vh - 4.5em); // 4.5em is height of navbar
|
||||
|
||||
form {
|
||||
flex-grow: 1;
|
||||
@@ -22,10 +23,18 @@
|
||||
|
||||
img {
|
||||
max-width: 50vw;
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small-profile-pic {
|
||||
img {
|
||||
width: 223px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
@@ -21,33 +22,43 @@
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
.profile-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 3em;
|
||||
img {
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #f2321f;
|
||||
h1 {
|
||||
margin: 0 0 .5em 0 ;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.italics {
|
||||
font-style: italic;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: $primary;
|
||||
h1 {
|
||||
margin: 0 0 .5em 0 ;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.italics {
|
||||
font-style: italic;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.vcenter {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.vertical-padding {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.vertical-margin {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.img-profile {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user