mon-entreprise/source/components/TargetSelection.css

145 lines
2.4 KiB
CSS
Raw Normal View History

2018-03-14 17:20:09 +00:00
#targetsContainer {
max-width: 40em;
margin: 0 auto;
2018-03-14 17:20:09 +00:00
padding: 0.2em .5em;
border-radius: 0.6em;
2018-03-14 17:20:09 +00:00
box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.25)
}
2018-03-14 17:20:09 +00:00
#targetsContainer > div {
width: 100%;
}
#targetSelection h1 {
2018-03-29 10:18:33 +00:00
margin: 0.6em;
color: inherit;
2018-03-14 17:20:09 +00:00
text-align: center;
font-size: 180%;
}
2018-03-29 10:18:33 +00:00
#targetSelection #action {
text-align: center;
margin: 1em auto;
}
#targetSelection #action p {
color: #4b4b66;
margin-bottom: 1em;
font-size: 120%;
2018-03-29 10:18:33 +00:00
}
#targetSelection #targets {
2018-03-22 17:54:19 +00:00
margin: .4em auto;
/* For the checkbox that will appear */
2018-03-14 17:20:09 +00:00
padding: 0;
}
2018-03-22 17:54:19 +00:00
#targetSelection #targets li {
2018-03-14 17:20:09 +00:00
margin-bottom: .4em;
2018-03-22 17:54:19 +00:00
background: rgba(0, 0, 0, 0.25);
2018-03-29 10:18:33 +00:00
display: flex;
align-items: center;
padding: .4em .6em .4em;
2018-03-14 17:20:09 +00:00
border-radius: .3em;
}
2018-03-22 17:54:19 +00:00
#targetSelection #targets > li p {
margin: .2em 0 0;
opacity: .80;
2018-03-22 17:54:19 +00:00
line-height: 1.2em;
2018-03-14 17:20:09 +00:00
}
#targetSelection .progressCircle {
width: 2.5em;
margin-right: .6em;
}
#targetSelection .progressCircle i {
color: #5de662;
font-size: 180%
}
#targetSelection label {
2018-03-22 17:54:19 +00:00
width: 10%;
display: inline-block;
cursor: pointer;
}
2018-03-22 17:54:19 +00:00
#targetSelection .texts {
margin: 0 .4em 0;
2018-03-22 17:54:19 +00:00
width: 55%;
display: inline-block;
}
#targetSelection .optionTitle {
font-size: 120%;
2018-03-14 17:20:09 +00:00
font-weight: 600;
}
2018-03-29 09:50:34 +00:00
#targetSelection .optionTitle a {
color: inherit
}
#targetSelection .optionTitle a:hover {
text-decoration: underline;
}
#targetSelection input[type='checkbox'] {
position: absolute;
z-index: -1;
opacity: 0;
}
#targetSelection input + label > i.fa {
max-width: 0.75em;
}
2018-03-14 17:20:09 +00:00
#targetSelection .targetInputOrValue
{
2018-03-22 17:54:19 +00:00
width: 40%;
font-size: 110%;
2018-03-14 17:20:09 +00:00
text-align: right;
}
#targetSelection .editable {
border-bottom: 1px dashed #ffffff91;
min-width: 2.5em;
display: inline-block;
}
2018-03-14 17:20:09 +00:00
#targetSelection .attractClick,
#targetSelection input[type='number'] {
2018-03-14 17:20:09 +00:00
width: 5em !important;
display: inline-block;
2018-03-22 17:54:19 +00:00
height: 1.6em;
2018-03-14 17:20:09 +00:00
text-align: right;
font-weight: 600;
padding: 0;
padding: 0em 0.5em;
background: white;
border-radius: 0.2em;
border: none;
box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.45);
color: #333;
2018-03-14 17:20:09 +00:00
font-size: inherit
}
#targetSelection .unit {
margin-left: .6em;
font-size: 120%;
vertical-align: middle;
}
.input-error {
padding: 0 .6em;
margin-right: .6em;
font-size: 80%;
font-style: italic;
color: #c0392b;
background: yellow;
font-weight: 600;
}
/* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */