tao-react-components/lib/components/Modal/style.css

react components crafted with love by Tao

.Modal-Background{
    background-color: rgba(0,0,0,0.45);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 100000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

.Modal-Container{
    /*position: relative;*/
    width: 300px;
    min-width: 250px;
    /*height: 300px;*/
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 5px grey;
    /*min-height: 170px;*/
    /*border: 2px solid rgba(29,161,242, 0.6);*/
}

.Modal-Container-Header{
    display: flex;
    justify-content: center;
    /*position: absolute;
    top: 0px;*/
    align-items: center;
    font-size: 20px;
    font-weight: 100;
    color: rgba(255, 255, 255, 1);
    height: 40px;
    border-radius: 8px 8px 0px 0px;
    /*background-color: rgba(29,161,242, 0.8);*/
    background: linear-gradient(90deg, #4b9bbe 0%, #01c6b7  98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
    background-blend-mode: screen;
}

.Modal-Container-Header-warning{
    background: linear-gradient(90deg, #c0392b 100%, #c0392b  100%), radial-gradient(at top left, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.30) 100%) !important;
    /*background-color: #c0392b !important;*/
}

.Modal-Container-Footer{
    /*position: absolute;*/
    /*bottom: 0px;*/
    width: 100%;
    height: 40px;
    /*border-top: #d9d9d9 solid 1px;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color: rgba(29,161,242, 1);
    /*background-color: rgba(29,161,242, 0.6);*/
    /*box-shadow: 0px -2px 1px rgba(29,161,242, 0.6);*/
    border-radius: 0px 0px 10px 10px;

}

.Modal-Container-Body{
    padding-top: 13px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    font-weight: 100;
    color: rgba(0, 0, 0, 0.48);
}

.Modal-Container-Footer-Action1{
    border-right: 1px #d9d9d9 solid;
}

.Modal-Container-Footer-Action{
    font-size: 15px;
    padding: 0px 15px; 
    transition: 0.5s opacity;
    font-weight: 100;
}

.Modal-Container-Footer-Action:hover{
    cursor: pointer;
    opacity: 0.7;
}

.Modal-appear {
  opacity: 0;
}

.Modal-appear.Modal-appear-active {
  opacity: 1;
  transition: all 1s ease;
}