app/assets/stylesheets/src/landing.scss
@import "./../shared/mixin";
#landing {
.navbar {
margin-bottom:0;
}
.wrapper {
position: relative;
.sidebar-wrapper {
width: 220px;
border-right: 1px solid $skeleton-black-color;
min-height: 100%;
position: absolute;
float: left;
.switch-base {
padding-right: 0;
}
.switch-note {
margin-top: 4px;
margin-left: -15px;
padding-left: 0;
}
}
.contents-wrapper {
float: left;
.container-fluid {
margin-left: 220px;
}
}
.article-item {
padding: 40px 0;
border-bottom: 1px solid $skeleton-black-color;
.image {
img {
width:auto;
height:auto;
max-width:120px;
max-height:100px;
}
img:hover {
opacity: 0.8;
}
}
.summary {
padding-top: 0.5em;
.content {
height: 70px;
}
.action {
height: 20px;
}
}
}
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 40px;
height: 23px;
background-color: #dddddd;
border-radius: 20px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 20px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 15px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 17px;
background-color: #8ce196;
}
}