mon-entreprise/source/components/TargetSelection.css

128 lines
2.2 KiB
CSS
Raw Normal View History

2018-03-14 17:20:09 +00:00
#targetsContainer {
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)
}
#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;
justify-content: space-between;
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 li .header {
display: flex;
align-items: center;
}
#targetSelection .progressCircle {
margin-right: .6em;
}
#targetSelection .progressCircle svg {
width: 2em;
}
#targetSelection .progressCircle i {
color: #5de662;
2018-04-05 17:53:01 +00:00
font-size: 220%
}
2018-03-22 17:54:19 +00:00
#targetSelection .texts {
margin: 0 .4em 0;
}
#targetSelection .optionTitle {
font-size: 115%;
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;
}
2018-03-14 17:20:09 +00:00
#targetSelection .targetInputOrValue
{
font-size: 120%;
display: flex;
justify-content: flex-end;
}
#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'] {
width: 4em !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: 125%;
vertical-align: middle;
}
.input-error {
padding: 0 .6em;
margin-right: .6em;
font-size: 90%;
font-style: italic;
color: #c0392b;
background: yellow;
font-weight: 600;
}
/* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */