empower-container 0.1.26 → 0.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
| @@ -1,4 +1,4 @@ | |
| 1 | 
            -
            .em-button{
         | 
| 1 | 
            +
            .em-button {
         | 
| 2 2 | 
             
              display: inline-flex;
         | 
| 3 3 | 
             
              align-items: center;
         | 
| 4 4 | 
             
              justify-content: center;
         | 
| @@ -104,6 +104,16 @@ | |
| 104 104 | 
             
                      }
         | 
| 105 105 | 
             
                  }
         | 
| 106 106 | 
             
                } 
         | 
| 107 | 
            +
             | 
| 108 | 
            +
                &.delete {
         | 
| 109 | 
            +
                    color: $red;
         | 
| 110 | 
            +
                    box-shadow: inset 0 0 0 1px $red;
         | 
| 111 | 
            +
                    padding: 15px;
         | 
| 112 | 
            +
             | 
| 113 | 
            +
                    &:hover {
         | 
| 114 | 
            +
                        background-color: $red;
         | 
| 115 | 
            +
                    }
         | 
| 116 | 
            +
                }
         | 
| 107 117 | 
             
            }
         | 
| 108 118 |  | 
| 109 119 | 
             
            .em-text-link {
         | 
| @@ -1,4 +1,12 @@ | |
| 1 1 | 
             
            .em-popover {
         | 
| 2 | 
            +
                position: absolute;
         | 
| 3 | 
            +
                top: 50px;
         | 
| 4 | 
            +
                margin-top: -2px;
         | 
| 5 | 
            +
                font-size: 0.875rem;
         | 
| 6 | 
            +
                color: $gray-dark;
         | 
| 7 | 
            +
                z-index: 100; 
         | 
| 8 | 
            +
                display: flex;
         | 
| 9 | 
            +
                width: auto;
         | 
| 2 10 | 
             
                background-color: $white;
         | 
| 3 11 | 
             
                border-top: 5px solid $blue-light4;
         | 
| 4 12 | 
             
                border-bottom-left-radius: $border-radius-md;
         | 
| @@ -8,12 +8,13 @@ | |
| 8 8 | 
             
                .em-dropdown {
         | 
| 9 9 | 
             
                    position: relative;
         | 
| 10 10 | 
             
                    min-width: 100px;
         | 
| 11 | 
            +
                    white-space: nowrap;
         | 
| 11 12 | 
             
                }
         | 
| 12 13 |  | 
| 13 14 | 
             
                .em-belt-left {
         | 
| 14 15 | 
             
                    display: flex;
         | 
| 15 16 | 
             
                    align-items: center;
         | 
| 16 | 
            -
                    flex-wrap:  | 
| 17 | 
            +
                    flex-wrap: wrap;
         | 
| 17 18 |  | 
| 18 19 | 
             
                    .belt-info {
         | 
| 19 20 | 
             
                        margin-left: 10px;
         | 
| @@ -78,10 +79,6 @@ | |
| 78 79 | 
             
                            margin: 0;
         | 
| 79 80 | 
             
                        }
         | 
| 80 81 | 
             
                    }
         | 
| 81 | 
            -
             | 
| 82 | 
            -
                    .em-dropdown .em-popover {
         | 
| 83 | 
            -
                        width: auto;
         | 
| 84 | 
            -
                    }
         | 
| 85 82 | 
             
                }
         | 
| 86 83 |  | 
| 87 84 | 
             
                .em-beltleft-cta {
         | 
| @@ -134,7 +131,7 @@ | |
| 134 131 | 
             
                    display: flex;
         | 
| 135 132 | 
             
                    align-items: center;
         | 
| 136 133 | 
             
                    justify-content: flex-end;
         | 
| 137 | 
            -
                    flex-wrap:  | 
| 134 | 
            +
                    flex-wrap: nowrap;
         | 
| 138 135 |  | 
| 139 136 | 
             
                    > a, > div {
         | 
| 140 137 | 
             
                        margin-left: 10px;
         | 
| @@ -2,6 +2,19 @@ | |
| 2 2 | 
             
                position: relative;
         | 
| 3 3 | 
             
                width: 100%;
         | 
| 4 4 |  | 
| 5 | 
            +
                option{
         | 
| 6 | 
            +
                    font-size: 0.875rem;
         | 
| 7 | 
            +
                    color: $gray-dark;
         | 
| 8 | 
            +
                    padding: 20px;
         | 
| 9 | 
            +
                    transition: $transition;
         | 
| 10 | 
            +
                    cursor: pointer;
         | 
| 11 | 
            +
             | 
| 12 | 
            +
                    &:hover{
         | 
| 13 | 
            +
                        background-color: $blue-light;
         | 
| 14 | 
            +
                        padding: 20px 18px 20px 22px;
         | 
| 15 | 
            +
                    }
         | 
| 16 | 
            +
                }
         | 
| 17 | 
            +
             | 
| 5 18 | 
             
                .em-input-field {
         | 
| 6 19 | 
             
                    width: 100%;
         | 
| 7 20 | 
             
                }    
         | 
| @@ -57,177 +70,148 @@ | |
| 57 70 | 
             
                z-index: 99;
         | 
| 58 71 | 
             
            }
         | 
| 59 72 |  | 
| 60 | 
            -
            .em-popover{
         | 
| 61 | 
            -
                 | 
| 62 | 
            -
                 | 
| 63 | 
            -
             | 
| 64 | 
            -
                 | 
| 65 | 
            -
             | 
| 66 | 
            -
             | 
| 67 | 
            -
             | 
| 68 | 
            -
             | 
| 69 | 
            -
             | 
| 70 | 
            -
             | 
| 71 | 
            -
             | 
| 72 | 
            -
             | 
| 73 | 
            +
            .em-popover-input{
         | 
| 74 | 
            +
                display: flex;
         | 
| 75 | 
            +
                padding: 20px;
         | 
| 76 | 
            +
             | 
| 77 | 
            +
                .field {
         | 
| 78 | 
            +
                    margin: 0 15px 0 0;
         | 
| 79 | 
            +
                    width: 160px;
         | 
| 80 | 
            +
             | 
| 81 | 
            +
                    > label {
         | 
| 82 | 
            +
                        position: relative;
         | 
| 83 | 
            +
                        top: 0;
         | 
| 84 | 
            +
                        left: 0;
         | 
| 85 | 
            +
                        padding: 0;
         | 
| 86 | 
            +
                        margin-bottom: 5px;
         | 
| 87 | 
            +
                        display: inline-block;
         | 
| 88 | 
            +
                        font-size: .875rem;
         | 
| 89 | 
            +
                        font-weight: 700;
         | 
| 90 | 
            +
                        color: $gray-light3;
         | 
| 91 | 
            +
                        text-transform: uppercase;
         | 
| 92 | 
            +
                    }
         | 
| 93 | 
            +
                }
         | 
| 73 94 |  | 
| 74 | 
            -
             | 
| 75 | 
            -
             | 
| 76 | 
            -
             | 
| 77 | 
            -
             | 
| 78 | 
            -
             | 
| 79 | 
            -
             | 
| 95 | 
            +
                button {
         | 
| 96 | 
            +
                    border: 0;
         | 
| 97 | 
            +
                    background: none;
         | 
| 98 | 
            +
                    height: 50px;
         | 
| 99 | 
            +
                    width: 50px;
         | 
| 100 | 
            +
                    display: inline-flex;
         | 
| 101 | 
            +
                    align-items: center;
         | 
| 102 | 
            +
                    justify-content: center;
         | 
| 103 | 
            +
                    cursor: pointer;
         | 
| 104 | 
            +
                    transition: $transition;
         | 
| 105 | 
            +
                }
         | 
| 106 | 
            +
            }
         | 
| 80 107 |  | 
| 81 | 
            -
             | 
| 82 | 
            -
             | 
| 83 | 
            -
             | 
| 84 | 
            -
             | 
| 108 | 
            +
            .em-popover-list {
         | 
| 109 | 
            +
                display: block;
         | 
| 110 | 
            +
                padding: 0;
         | 
| 111 | 
            +
             | 
| 112 | 
            +
                a {
         | 
| 113 | 
            +
                    display: block;
         | 
| 114 | 
            +
                    font-weight: 700;
         | 
| 115 | 
            +
                    font-size: .875rem;
         | 
| 116 | 
            +
                    color: $gray-light4;
         | 
| 117 | 
            +
                    padding: 15px 20px;
         | 
| 118 | 
            +
                    min-height: 50px;
         | 
| 119 | 
            +
                    line-height: 20px;
         | 
| 120 | 
            +
                    text-decoration: none;
         | 
| 121 | 
            +
                    text-align: left;
         | 
| 122 | 
            +
                    border: none;
         | 
| 123 | 
            +
                    box-shadow: none;
         | 
| 124 | 
            +
                    transition: $transition;
         | 
| 125 | 
            +
                    margin-right: 0;
         | 
| 126 | 
            +
                    cursor: pointer;
         | 
| 127 | 
            +
             | 
| 128 | 
            +
                    &:hover {
         | 
| 129 | 
            +
                        background-color: $blue-light;
         | 
| 130 | 
            +
                        color: $gray-dark;
         | 
| 131 | 
            +
                        padding: 15px 18px 15px 22px;
         | 
| 132 | 
            +
                        box-shadow: none;
         | 
| 133 | 
            +
                        border: none;
         | 
| 85 134 | 
             
                    }
         | 
| 86 135 | 
             
                }
         | 
| 136 | 
            +
            }
         | 
| 87 137 |  | 
| 88 | 
            -
             | 
| 89 | 
            -
             | 
| 90 | 
            -
             | 
| 138 | 
            +
            .em-popover-months {
         | 
| 139 | 
            +
                width: 300px;
         | 
| 140 | 
            +
                padding: 0;
         | 
| 141 | 
            +
                flex-direction: column;
         | 
| 91 142 |  | 
| 92 | 
            -
             | 
| 93 | 
            -
             | 
| 94 | 
            -
             | 
| 95 | 
            -
             | 
| 96 | 
            -
             | 
| 97 | 
            -
             | 
| 98 | 
            -
                            top: 0;
         | 
| 99 | 
            -
                            left: 0;
         | 
| 100 | 
            -
                            padding: 0;
         | 
| 101 | 
            -
                            margin-bottom: 5px;
         | 
| 102 | 
            -
                            display: inline-block;
         | 
| 103 | 
            -
                            font-size: .875rem;
         | 
| 104 | 
            -
                            font-weight: 700;
         | 
| 105 | 
            -
                            color: $gray-light3;
         | 
| 106 | 
            -
                            text-transform: uppercase;
         | 
| 107 | 
            -
                        }
         | 
| 108 | 
            -
                    }
         | 
| 143 | 
            +
                .list-years {
         | 
| 144 | 
            +
                    background-color: $blue-dark;
         | 
| 145 | 
            +
                    display: flex;
         | 
| 146 | 
            +
                    justify-content: space-between;
         | 
| 147 | 
            +
                    margin-top: -1px;
         | 
| 148 | 
            +
                    width: 100%;
         | 
| 109 149 |  | 
| 110 150 | 
             
                    button {
         | 
| 111 | 
            -
                         | 
| 112 | 
            -
                         | 
| 113 | 
            -
                        height: 50px;
         | 
| 114 | 
            -
                        width: 50px;
         | 
| 115 | 
            -
                        display: inline-flex;
         | 
| 116 | 
            -
                        align-items: center;
         | 
| 117 | 
            -
                        justify-content: center;
         | 
| 151 | 
            +
                        background-color: transparent;
         | 
| 152 | 
            +
                        border: none;
         | 
| 118 153 | 
             
                        cursor: pointer;
         | 
| 119 154 | 
             
                        transition: $transition;
         | 
| 155 | 
            +
             | 
| 156 | 
            +
                        svg path {
         | 
| 157 | 
            +
                            fill: $white;
         | 
| 158 | 
            +
                        }
         | 
| 159 | 
            +
             | 
| 160 | 
            +
                        img {
         | 
| 161 | 
            +
                            transition: $transition;
         | 
| 162 | 
            +
             | 
| 163 | 
            +
                            &:hover {
         | 
| 164 | 
            +
                                background-color: transparentize($blue-dark1, 0.5);
         | 
| 165 | 
            +
                            }
         | 
| 166 | 
            +
             | 
| 167 | 
            +
                            &:focus {
         | 
| 168 | 
            +
                                outline: none;
         | 
| 169 | 
            +
                            }
         | 
| 170 | 
            +
                        }
         | 
| 171 | 
            +
                    }
         | 
| 172 | 
            +
             | 
| 173 | 
            +
                    > div {
         | 
| 174 | 
            +
                        color: $white;
         | 
| 175 | 
            +
                        font-size: 1.5rem;
         | 
| 176 | 
            +
                        padding: 15px;
         | 
| 120 177 | 
             
                    }
         | 
| 121 178 | 
             
                }
         | 
| 122 179 |  | 
| 123 | 
            -
                . | 
| 124 | 
            -
                    display:  | 
| 125 | 
            -
                     | 
| 180 | 
            +
                .list-months {
         | 
| 181 | 
            +
                    display: flex;
         | 
| 182 | 
            +
                    flex-wrap: wrap;
         | 
| 126 183 |  | 
| 127 184 | 
             
                    a {
         | 
| 128 | 
            -
                         | 
| 185 | 
            +
                        width: 33.33%;
         | 
| 186 | 
            +
                        box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
         | 
| 187 | 
            +
                        padding: 15px;
         | 
| 188 | 
            +
                        color: $gray-light4;
         | 
| 189 | 
            +
                        text-align: center;
         | 
| 129 190 | 
             
                        font-weight: 700;
         | 
| 130 191 | 
             
                        font-size: .875rem;
         | 
| 131 | 
            -
                        color: $gray-light4;
         | 
| 132 | 
            -
                        padding: 15px 20px;
         | 
| 133 | 
            -
                        min-height: 50px;
         | 
| 134 | 
            -
                        line-height: 20px;
         | 
| 135 192 | 
             
                        text-decoration: none;
         | 
| 136 | 
            -
                        text-align: left;
         | 
| 137 | 
            -
                        border: none;
         | 
| 138 | 
            -
                        box-shadow: none;
         | 
| 139 | 
            -
                        transition: $transition;
         | 
| 140 | 
            -
                        margin-right: 0;
         | 
| 141 | 
            -
                        cursor: pointer;
         | 
| 142 193 |  | 
| 143 194 | 
             
                        &:hover {
         | 
| 144 | 
            -
                            background-color: $ | 
| 195 | 
            +
                            background-color: $gray-light;
         | 
| 145 196 | 
             
                            color: $gray-dark;
         | 
| 146 | 
            -
                            padding: 15px 18px 15px 22px;
         | 
| 147 | 
            -
                            box-shadow: none;
         | 
| 148 | 
            -
                            border: none;
         | 
| 149 197 | 
             
                        }
         | 
| 150 | 
            -
                    }
         | 
| 151 | 
            -
                }
         | 
| 152 198 |  | 
| 153 | 
            -
             | 
| 154 | 
            -
             | 
| 155 | 
            -
             | 
| 156 | 
            -
             | 
| 157 | 
            -
             | 
| 158 | 
            -
             | 
| 159 | 
            -
                        background-color: $blue-dark;
         | 
| 160 | 
            -
                        display: flex;
         | 
| 161 | 
            -
                        justify-content: space-between;
         | 
| 162 | 
            -
                        margin-top: -1px;
         | 
| 163 | 
            -
                        width: 100%;
         | 
| 164 | 
            -
                
         | 
| 165 | 
            -
                        button {
         | 
| 166 | 
            -
                            background-color: transparent;
         | 
| 167 | 
            -
                            border: none;
         | 
| 168 | 
            -
                            cursor: pointer;
         | 
| 169 | 
            -
                            transition: $transition;
         | 
| 170 | 
            -
                
         | 
| 171 | 
            -
                            svg path {
         | 
| 172 | 
            -
                                fill: $white;
         | 
| 173 | 
            -
                            }
         | 
| 174 | 
            -
                
         | 
| 175 | 
            -
                            img {
         | 
| 176 | 
            -
                                transition: $transition;
         | 
| 177 | 
            -
                
         | 
| 178 | 
            -
                                &:hover {
         | 
| 179 | 
            -
                                    background-color: transparentize($blue-dark1, 0.5);
         | 
| 180 | 
            -
                                }
         | 
| 181 | 
            -
                
         | 
| 182 | 
            -
                                &:focus {
         | 
| 183 | 
            -
                                    outline: none;
         | 
| 184 | 
            -
                                }
         | 
| 185 | 
            -
                            }
         | 
| 186 | 
            -
                        }
         | 
| 187 | 
            -
                
         | 
| 188 | 
            -
                        > div {
         | 
| 189 | 
            -
                            color: $white;
         | 
| 190 | 
            -
                            font-size: 1.5rem;
         | 
| 191 | 
            -
                            padding: 15px;
         | 
| 192 | 
            -
                        }
         | 
| 193 | 
            -
                    }
         | 
| 194 | 
            -
                
         | 
| 195 | 
            -
                    .list-months {
         | 
| 196 | 
            -
                        display: flex;
         | 
| 197 | 
            -
                        flex-wrap: wrap;
         | 
| 198 | 
            -
                
         | 
| 199 | 
            -
                        a {
         | 
| 200 | 
            -
                            width: 33.33%;
         | 
| 201 | 
            -
                            box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
         | 
| 202 | 
            -
                            padding: 15px;
         | 
| 203 | 
            -
                            color: $gray-light4;
         | 
| 204 | 
            -
                            text-align: center;
         | 
| 205 | 
            -
                            font-weight: 700;
         | 
| 206 | 
            -
                            font-size: .875rem;
         | 
| 207 | 
            -
                            text-decoration: none;
         | 
| 208 | 
            -
                
         | 
| 209 | 
            -
                            &:hover {
         | 
| 210 | 
            -
                                background-color: $gray-light;
         | 
| 211 | 
            -
                                color: $gray-dark;
         | 
| 212 | 
            -
                            }
         | 
| 213 | 
            -
                
         | 
| 214 | 
            -
                            &.is-disabled{
         | 
| 199 | 
            +
                        &.is-disabled{
         | 
| 200 | 
            +
                            background-color: $gray-light;
         | 
| 201 | 
            +
                            color: $gray-light3;
         | 
| 202 | 
            +
                            cursor: initial;
         | 
| 203 | 
            +
             | 
| 204 | 
            +
                            &:hover{
         | 
| 215 205 | 
             
                                background-color: $gray-light;
         | 
| 216 206 | 
             
                                color: $gray-light3;
         | 
| 217 | 
            -
                                cursor: initial;
         | 
| 218 | 
            -
                
         | 
| 219 | 
            -
                                &:hover{
         | 
| 220 | 
            -
                                    background-color: $gray-light;
         | 
| 221 | 
            -
                                    color: $gray-light3;
         | 
| 222 | 
            -
                                }
         | 
| 223 | 
            -
                            }
         | 
| 224 | 
            -
                
         | 
| 225 | 
            -
                            &.is-selected{
         | 
| 226 | 
            -
                                background-color: $blue-dark1;
         | 
| 227 | 
            -
                                color: $white;
         | 
| 228 | 
            -
                                box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
         | 
| 229 207 | 
             
                            }
         | 
| 230 208 | 
             
                        }
         | 
| 209 | 
            +
             | 
| 210 | 
            +
                        &.is-selected{
         | 
| 211 | 
            +
                            background-color: $blue-dark1;
         | 
| 212 | 
            +
                            color: $white;
         | 
| 213 | 
            +
                            box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
         | 
| 214 | 
            +
                        }
         | 
| 231 215 | 
             
                    }
         | 
| 232 216 | 
             
                }
         | 
| 233 217 | 
             
            }
         |