1
0
Fork 0
mirror of synced 2024-05-29 17:09:48 +12:00
appwrite/public/styles/comps/box.less
2020-02-24 14:56:57 +02:00

197 lines
3.5 KiB
Plaintext

.box {
position: relative;
background: var(--config-color-background-fade);
border-radius: 10px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
padding: 30px;
display: block;
border-bottom: none;
&.padding-small {
padding: 15px;
}
&.y-scroll {
overflow-y: auto;
}
&.danger {
background: var(--config-color-danger);
color: #fff;
button,
.button {
background: #ffffff;
color: var(--config-color-danger);
}
}
&.focus {
background: var(--config-color-focus);
color: var(--config-color-background-fade);
button,
.button {
background: var(--config-color-background-fade);
color: var(--config-color-focus);
}
}
&.line {
background: transparent;
border: solid 1px var(--config-color-background-dark);
box-shadow: none;
}
&.warning {
background: var(--config-color-success);
color: #2d2d2d;
button,
.button {
background: rgba(45, 45, 45, 0.8);
color: var(--config-color-success);
}
}
&>footer {
margin: 30px -30px -30px -30px;
padding: 15px 30px;
background: var(--config-color-background-fade);
border: solid 1px var(--config-border-color);
border-radius: 0 0 10px 10px;
}
hr {
height: 2px;
background: var(--config-border-color);
border: none;
margin: 30px -30px;
}
.header {
position: static;
height: 40px;
padding: 20px 30px 20px 30px;
margin-bottom: 30px;
margin: -30px -30px 20px -30px;
background: var(--config-color-background-fade);
border-bottom: solid 1px #efefef;
}
.toggle {
position: relative;
border-top: 2px solid var(--config-color-background);
border-bottom: 2px solid var(--config-color-background);
margin: 0 -30px;
padding: 30px 30px 0 30px;
height: 65px;
overflow: hidden;
button.ls-ui-open {
position: absolute;
top: 0;
.func-start(0);
width: 100%;
height: 95px;
background: transparent;
opacity: .5;
border-radius: 0;
}
.icon-minus {
display: none;
}
.content {
display: none;
}
&.open {
height: auto;
.icon-minus {
display: block;
}
.icon-plus {
display: none;
}
.content {
display: block;
}
}
}
.list {
li {
border-bottom: solid 2px var(--config-border-color);
margin: 0 -30px 30px -30px;
padding: 0 30px 30px 30px;
&:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
}
}
&.new {
text-align: center;
i {
font-size: 80px;
line-height: 80px;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 300;
}
b {
margin-top: 20px;
display: block;
}
}
@media @phones, @tablets {
//padding: 20px;
}
}
a.box {
border-right: none;
border-left: none;
}
a.box:hover {
border-bottom: none;
border-right: none;
border-left: none;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
opacity: .7;
}
.box-asidex {
.func-padding-end(25px) !important;
.func-padding-start(70px);
.func-end(0);
background: #f9f9f9;
border-radius: 0 10px 10px 0;
height: ~"calc(100% - 30px)";
position: absolute;
padding-top: 30px;
&:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 51px;
background: #fff;
top: 0;
bottom: 0;
.func-start(-6px);
}
}