@import 'mixins'; // campaign widget // (cw = campaign widget) .campaignWidget{ background: white; padding: 10px; width: 260px; margin: 20px auto; @include box-shadow($defaultShadow); } .cw-imageAndTitle-wrapper { position: relative; } .cw-title { color: rgba(white, 0.9); text-align: center; position: absolute; bottom: 0; margin: 0; padding: 25px 10px 8px 10px; @include gradient(top, rgba(black, 0), rgba(black, 0.8)); width: 100%; font-weight: 600; font-size: 17px; line-height: 19px; } .cw-progress-wrapper { background: #E2E2E2; border: white 2px solid; width: 100%; margin: 15px 0 0; height: 28px; border-radius: 10px; position: relative; } .cw-progress-wrapper .cw-number { color: rgba(black, 0.7); } .cw-progress-bar { @include transition(width 1s ease-out); width: 0; background: white; @include opacity(0.6); @include border-radius(10px 0 0 10px); position: absolute; height: 100%; top: 0; left: 0; content: ''; } .cw-progress-raised { position: absolute; top: 2px; left: 7px; } .cw-daysLeft-wrapper { position: relative; height: 60px; &:before { position: absolute; content: ''; width: 100%; top: 30px; height: 2px; background: rgba($grey, 0.5); left: 0; } } .cw-daysLeft-wrapper .cw-number { font-weight: 600; } .cw-daysLeft-annot { position: absolute; top: 22px; left: 50%; width: 54%; text-align: center; margin-left: -27%; background: white; } .cw-button { font-weight: 600; @include border-radius(5px); color: rgba(white, 0.9); padding: 12px 20px; line-height: 23px; text-align: center; font-size: 20px; border: none; margin: 0; } .cw-number { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; } .cw-dollar { margin-right: -2px; }