Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import '../../foundation/_variables';
- /* radio / checkbox
- ===================== */
- input[type=radio] {
- display: none;
- &:checked + .c-radio {
- &:before {
- opacity: 1;
- }
- &.tab {
- color: #fff;
- background-color: $main-color;
- &:before {
- display: none;
- }
- }
- }
- }
- input[type="checkbox"] {
- display: none;
- &:checked + .c-checkbox {
- &:before {
- opacity: 1;
- }
- &.heart {
- &:before {
- opacity: 0;
- }
- &:after {
- color: #305ba4;
- font-weight: bold;
- }
- &.white {
- &:after {
- color: #ffb5b5;
- }
- }
- }
- }
- }
- .c- {
- &block {
- display: block;
- }
- // form
- &form {
- width: 100%;
- }
- // txtbox
- &txtbox {
- width: 100%;
- padding: 18px 23px;
- background: #f4f8fa;
- border-radius: 3px;
- @include mq() {
- padding: 2vw 4vw;
- }
- &.border {
- border: 1px solid $main-color;
- background-color: #fff;
- }
- &.resource {
- text-align: center;
- padding: 5px 10px;
- }
- }
- // label
- &label {
- color: #a2a2a2;
- }
- // search
- &search {
- display: block;
- width: calc(100% - 48px);
- padding: 12px 20px;
- background-color: #fff;
- border-radius: 3px 0 0 3px;
- border: 1px solid $main-color;
- @include mq() {
- width: calc(100% - #{get_vw(64)});
- padding-top: get_vw(20);
- padding-bottom: get_vw(20);
- padding-right: get_vw(40);
- padding-left: get_vw(40);
- }
- &__box {
- position: relative;
- margin-bottom: 40px;
- @include mq() {
- margin-bottom: get_vw(20);
- }
- &__label {
- color: $main-color;
- font-size: 14px;
- padding: 0 2vw;
- }
- }
- &__btn {
- position: absolute;
- top: 0;
- right: 0;
- display: block;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 100%;
- border-radius: 0 3px 3px 0;
- @include mq() {
- width: get_vw(64);
- }
- img {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- margin: auto;
- }
- }
- }
- // checkbox
- &checkbox {
- position: relative;
- display: inline-block;
- padding: 0 0 2px 27px;
- border-radius: 3px;
- vertical-align: middle;
- cursor: pointer;
- &:hover {
- &:after {
- border-color: $main-color;
- }
- }
- &:after {
- content: "";
- display: block;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -10px;
- width: 16px;
- height: 16px;
- border: 1px solid #bbb;
- border-radius: 3px;
- background-color: #fff;
- transition: border-color 0.2s linear;
- z-index: 1;
- }
- &:before {
- content: "";
- display: block;
- position: absolute;
- top: 50%;
- left: 4px;
- margin-top: -10px;
- width: 8px;
- height: 11px;
- border-right: 2px solid #283853;
- border-bottom: 2px solid #283853;
- opacity: 0;
- transition: opacity 0.2s linear;
- transform: rotate(45deg);
- z-index: 2;
- }
- &.heart {
- &:after {
- border: none;
- color: $main-color;
- font-size: 18px;
- font-weight: normal;
- font-family: "Font Awesome 5 Free";
- content: "\f004";
- display: inline-block;
- font-style: normal;
- font-variant: normal;
- text-rendering: auto;
- line-height: 1;
- padding-left: 4px;
- background-color: transparent;
- transition: 0.5s;
- }
- &:before {
- content: "";
- }
- &.white {
- &:after {
- color: #fff;
- font-size: 24px;
- font-weight: bold;
- @include mq() {
- font-size: 3.5vw;
- position: static;
- left: 0;
- right: 0;
- width: auto;
- height: auto;
- margin-left: auto;
- margin-right: auto;
- padding: 0;
- }
- }
- }
- }
- }
- &radio {
- position: relative;
- display: inline-block;
- padding: 0 0 2px 27px;
- border-radius: 3px;
- vertical-align: middle;
- cursor: pointer;
- &:hover {
- &:after {
- border-color: $main-color;
- }
- }
- &:after {
- content: "";
- display: block;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -10px;
- width: 16px;
- height: 16px;
- border: 1px solid #bbb;
- border-radius: 50%;
- background-color: #fff;
- transition: border-color 0.2s linear;
- z-index: -1;
- }
- &:before {
- content: "";
- display: block;
- position: absolute;
- top: 50%;
- left: 4px;
- margin-top: -6px;
- width: 8px;
- height: 8px;
- background-color: #305ba4;
- border-radius: 50%;
- opacity: 0;
- transition: opacity 0.2s linear;
- z-index: 0;
- }
- &.modal {
- &:after {
- z-index: 2;
- }
- &:before {
- z-index: 3;
- }
- }
- // radio__wrap
- &__wrap {
- display: flex;
- &.tab {
- color: $main-color;
- border: 1px solid $main-color;
- border-radius: 3px;
- }
- }
- // radio__menu
- &__menu{
- &--hidden {
- display: none;
- & > *:nth-child(n+2) {
- margin-top: 2vw;
- }
- }
- }
- }
- // c-radio.tab
- &radio.tab {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-basis: 50%;
- max-width: 50%;
- width: 100%;
- text-align: center;
- padding: 1vw;
- transition: .3s;
- }
- // select
- &select {
- position: relative;
- width: 180px;
- &.white {
- }
- @include mq() {
- min-width: 125px;
- width: get_vw(180);
- }
- &:after {
- content: "";
- position: absolute;
- top: 50%;
- right: 20px;
- display: inline-block;
- width: 9px;
- height: 5px;
- margin-top: -4px;
- background: url(../images/common/icon_nav_tri-active.png);
- pointer-events: none;
- }
- & > select {
- width: 100%;
- height: 100%;
- padding: 18px 20px;
- background-color: #f4f8fa;
- border-radius: 3px;
- @include mq() {
- padding: 2vw 4vw;
- }
- &.border {
- border: 1px solid $main-color;
- background-color: #fff;
- }
- }
- &__tilda {
- padding: 0 20px;
- }
- &.extend {
- width: 100%;
- }
- }
- // add new item
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement