commento/frontend/sass/commento-input.scss
2018-12-20 00:50:00 -05:00

191 lines
3.3 KiB
SCSS

@import "colors-main.scss";
textarea,
input[type=text] {
background: #ffffff;
border: 1px solid rgba(50, 50, 93, .1);
border-radius: 3px;
color: #525f7f;
}
input[type=text]::placeholder {
color: #cacaca;
}
textarea::placeholder {
color: #aaa;
font-size: 20px;
display: flex;
line-height: 110px;
justify-content: center;
align-items: center;
text-align: center;
}
textarea {
display: inline-block;
font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
padding: 8px;
outline: none;
overflow: auto;
min-height: 130px;
width: 100%;
}
.commento-red-border {
border: 1px solid $red-7;
}
.commento-textarea-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.commento-submit-button {
transform: none;
}
}
.commento-oauth-buttons-container {
display: flex;
justify-content: center;
}
.commento-oauth-buttons,
.commento-account-buttons,
.commento-account-buttons-container {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
z-index: 1;
}
.commento-account-buttons {
position: static;
flex-direction: row;
}
.commento-account-buttons-container {
top: 3rem;
padding-bottom: 10px;
}
.commento-oauth-buttons {
display: contents;
}
.commento-account-buttons-question {
position: absolute;
top: 10px;
display: block;
text-align: center;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 14px;
padding: 6px;
color: $gray-8;
outline: none;
}
.commento-button {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
font-weight: bold;
line-height: 24px;
font-size: 14px;
padding: 6px;
padding-left: 8px;
padding-right: 8px;
box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
border: 1px solid transparent;
border-radius: 3px;
color: #fff;
width: 100px;
margin-left: 5px;
margin-right: 5px;
}
.commento-google-button {
background: #dd4b39;
text-transform: uppercase;
font-size: 12px;
}
.commento-github-button {
background: #000000;
text-transform: uppercase;
font-size: 12px;
}
.commento-anonymous-button {
display: block;
color: $blue-6;
font-weight: 700;
margin-top: 12px;
font-size: 12px;
cursor: pointer;
text-align: center;
text-transform: uppercase;
}
.commento-blurred-textarea {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
will-change: transform;
}
.commento-approve-button,
.commento-delete-button,
.commento-submit-button {
margin-top: 10px;
font-size: 14px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: -ms-fit-content;
width: -o-fit-content;
width: fit-content;
}
.commento-create-button {
width: 150px;
background: $pink-9;
text-transform: uppercase;
font-size: 12px;
}
.commento-login-button {
width: 50px;
background: $cyan-9;
text-transform: uppercase;
font-size: 12px;
}
.commento-submit-button {
float: right;
background: $indigo-7;
text-transform: uppercase;
font-size: 12px;
}
.commento-approve-button {
background: $green-7;
}
.commento-delete-button {
background: $red-7;
}
.commento-button-margin {
padding-bottom: 60px;
}