worked a bit on display

This commit is contained in:
newick 2019-08-12 21:54:40 +02:00
parent 8ac8b696aa
commit 93b9908a40
3 changed files with 51 additions and 81 deletions

View File

@ -1,68 +1,38 @@
@charset "UTF-8";
a {
color: $black;
button,
input[type="submit"] {
padding-right: 1.5rem;
padding-left: 1.5rem;
font-size: 1.6rem;
line-height: 1;
border: 2px solid $primary_color;
border-radius: 0.3rem;
.icon {
font-size: 1.5em;
&.right{
float: right;
display: inline-block;
margin: -0.3em 0.4em;
&.background-btn {
font-weight: 600;
background-color: $primary_color;
&:hover {
background-color: $secondary_color;
border-color: $secondary_color;
}
&.btn_delete {
}
}
}
}
// buttons
.btn {
display: inline-block;
padding: 1em;
border-radius: 0.25em;
background: $primary_color;
// color: $light;
border: 0;
margin: 1em;
min-height: 1.5rem;
cursor: pointer;
&.btn_border {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
&:hover {
background-color: $dusty-orange;
}
}
.btn-block {
display: block;
font-weight: 600;
font-size: 1.25em;
text-align: center;
}
.btn-outline {
background: $white;
border: solid 1px $primary_color;
}
.btn-next {
@extend .striked;
text-align: right;
width: 100%;
padding: 1em 2em;
a {
display: block;
}
}
.striked {
&::after {
content: "";
display: block;
width: 12ch;
height: 4px;
margin-top: -0.7em;
margin-right: 0;
margin-left: auto;
background-color: $primary_color;
&:hover {
background-color: rgba($primary_color, .2);
}
&.btn_delete {
}
}
}

View File

@ -61,7 +61,3 @@ h5,
h6 {
font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono";
}
p{
font-family: $default_font;
font-size:14px;
}

View File

@ -1,33 +1,37 @@
@charset "UTF-8";
// form inputs
.funky-box {
//background: $white;
padding: 1em;
border-radius: 0.25em;
input,
select,
textarea {
padding: 1rem;
border-top: none;
border-right: none;
border-bottom: 3px solid $primary_color;
border-left: none;
}
input,
textarea,
select,
{
@extend .funky-box;
border:none;
border-bottom:2px solid $primary_color;
color:$black;
select {
display: inline-block;
}
input[type="text"],input[type="email"],input[type="password"]{
width: 219px;
height: 36px;
}
textarea {
margin-top: 1em;
width: 100%;
border-left: 3px solid $primary_color;
}
select,
option {
// delete default display
-webkit-appearance : none;
-moz-appearance : none;
background: none;
border-radius: 0;
// TODO -> check what angular can do + find a way to add the arrow
}
label {
&[for] {
cursor: pointer;