lib/scss/6_components/_clusters.scss
/* .StereotypeList {
@extend .container-1;
&-title, &-search, &-cardList, &-singleStereotype {
max-width: $content-wrapper-max-width;
}
&-title {
text-align: center;
width: 80vw;
margin: 30px auto 0 auto;
h1 {
font-size: $font-size-huge;
color: $color-accent;
font-weight: 300;
}
p {
font-size: $font-size-large;
}
}
&-header {
display: flex;
align-items: center;
justify-content: space-around;
height: $spacing-unit-small * 3;
background-color: $color-hint;
a {
color: color('primary');
&.up-current {
color: color('primary');
font-weight: bold;
border-bottom: $border-radius-tiny solid color('primary');
padding: $spacing-unit-tiny 0px;
}
}
}
&-new {
text-align: center;
display: block;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 4px 0;
padding: 14px 0;
color: $color-content;
line-height: 1.2;
text-decoration: none;
i {
color: $color-accent;
}
}
&-search {
width: 80vw;
margin: 0 auto;
>p {
margin: $spacing-unit 0 0 0;
}
>input {
box-shadow: none;
border: none;
border-radius: 0;
border-bottom: 1px solid $color-hint;
margin: 0;
width: 100%;
&:focus {
outline: none;
}
}
>i {
position: relative;
left: 94%;
bottom: 23px;
display: block;
}
}
&-cardList {
display: flex;
flex-direction: column;
width: 80vw;
margin: 0 auto;
}
&-singleStereotype {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 80vw;
margin: 0 auto;
h2 {
font-weight: normal;
color: $color-text;
}
}
&-icons {
i {
color: $color-hint;
font-size: $font-size-larger;
}
}
}
.StereotypeAdd {
padding: 5vw;
h1 {
font-size: $font-size-huge;
color: $color-accent;
font-weight: 300;
text-align: center;
margin-top: 0;
}
&-title {
select {
border: 1px solid color('primary');
width: 100%;
border-radius: $border-radius-small;
max-width: 100%;
margin: 7px auto;
}
.content {
display: flex;
}
.input-name {
img {
height: 20px;
width: 20px;
padding: 5px;
margin: auto;
}
}
.comment-stereotype {
flex-direction: column;
text-align: justify;
img {
max-width: 35px;
height: 25px;
width: 22px;
padding: 5px;
}
div {
display: flex;
}
}
.talk-stereotype{
img {
height: 16px;
width: 20px;
padding: 5px;
}
}
input, textarea {
border: 1px solid color('primary');
border-radius: $border-radius-small;
max-width: 100%;
width: 100%;
}
.helptext {
color: #052B47;
font-family: $font-stack-raleway;
font-size: $font-size-tiny;
font-weight: bold;
margin: 7px auto;
text-transform: uppercase;
}
}
&-append {
font-size: $font-size-tiny;
button {
padding: 1.5px 3px;
border-radius: 50%;
border-style: solid;
color: color('primary');
border-color: color('primary');
background-color: $color-background;
}
span {
color: $color-content;
font-family: Raleway;
font-weight: bold;
line-height: 14px;
text-transform: uppercase;
}
}
.form-row {
select {
border: 1px solid color('primary');
width: 100%;
border-radius: $border-radius-small;
}
}
&-submit {
input {
border-radius: 25px;
background-color: $color-accent;
width: 100%;
height: 50px;
color: $color-content;
margin-bottom: 50px;
margin-top: 10px;
}
}
}
*/