mirror of
https://github.com/beatriceo/polyglot.git
synced 2025-10-22 17:52:10 +00:00
finished basic contacts page
This commit is contained in:
121
app/assets/stylesheets/pages/_contacts.scss
Normal file
121
app/assets/stylesheets/pages/_contacts.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: $card-background;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0px 0px 0px 2px $primary;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text {
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.darker {
|
||||
color: $text-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.call {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
transform: scaleX(-1);
|
||||
-moz-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
-ms-transform: scaleX(-1);
|
||||
i {
|
||||
color: $icon;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.video-feed {
|
||||
padding-top: 67px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.video-content {
|
||||
height: 485px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contacts-container {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 0px;
|
||||
i {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-color {
|
||||
background-color: $card-background;
|
||||
}
|
||||
|
||||
.vertical-alignment-helper {
|
||||
display:table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.vertical-align-center {
|
||||
/* To center vertically */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.modal-content {
|
||||
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
|
||||
width:35%;
|
||||
height:inherit;
|
||||
/* To center horizontally */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
@@ -1,2 +1,3 @@
|
||||
// Import page-specific CSS files here.
|
||||
@import "home";
|
||||
@import "contacts"
|
||||
|
Reference in New Issue
Block a user