tiss2go/app/assets/stylesheets/favorites.scss

174 lines
2.6 KiB
SCSS

// Place all the styles related to the favorites controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/
.favNav {
border-top: 1px solid #ddd;
margin-left: -1em;
margin-right: -1em;
margin-top: -0.5em;
display: flex;
a {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
a:link, a:visited {
font-family: Helvetica, sans-serif;
transition: .3s all ease-in-out;
font-size: 18px;
background-color: #3F51B5;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
flex-grow: 1;
}
a:hover, a:active {
background-color: #009688;
}
}
.thumb {
display: inline-block;
max-width: 48px;
height: auto;
img {
vertical-align: middle;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
}
}
.table_buttons {
display: flex;
justify-content: flex-end;
:nth-child(2) {
-webkit-text-fill-color: #ffffff;
background-color: #ff1919;
border-radius: 4px;
border-color: #ff1919;
}
}
.table_wrapper {
overflow-x: auto;
th a {
display: flex;
align-items: center;
img {
height: 100%;
}
}
td {
//display: flex;
}
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(odd) {
th, td {
//padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
}
th a {
color: black;
text-decoration: none;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
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%;
}
.header-button-container {
display: grid;
grid-template-columns: 1fr auto;
.button {
margin-right: 8px;
text-align: right;
align-self: center;
line-height: 34px;
}
}
#annotation {
display: none;
}