API tools faq
paste
Advertisement
MastroPino

Untitled

MastroPino
Aug 23rd, 2021
1,336
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.97 KB | None | 0 0
raw download clone embed print report
  1. .services-container {
  2.   border: 1px solid $light-grey;
  3.   border-top-left-radius: 3px;
  4.   border-top-right-radius: 3px;
  5. }
  6. .transportation-cards-container {
  7.   margin-top: 15px;
  8.   .transportation {
  9.     &.disabled {
  10.       .panel {
  11.         border-color: $light-grey;
  12.         overflow: hidden;
  13.         .panel-heading {
  14.           background-color: #dfdfdf;
  15.           color: $base-grey;
  16.           @include shadow(1);
  17.           .ion-circle--white {
  18.             background: $base-grey;
  19.             color: #FCFCFC;
  20.           }
  21.         }
  22.         .panel-body {
  23.           label {
  24.             color: $dark-grey;
  25.           }
  26.           .transportation-icons-wrapper {
  27.             .disabled {
  28.               opacity: 1;
  29.             }
  30.           }
  31.         }
  32.       }
  33.     }
  34.     .panel-transportation {
  35.       min-height: 365px;
  36.       border: 1px solid $light-grey;
  37.       .panel-body {
  38.         border: 0;
  39.       }
  40.       hr.mini {
  41.         margin-top: 10px;
  42.         margin-bottom: 5px;
  43.       }
  44.       .transportation-elements {
  45.         border-bottom: 1px solid #ddd;
  46.         &:nth-child(3) {
  47.           border-bottom: 0;
  48.         }
  49.       }
  50.       .transportation-icons-wrapper {
  51.         display: flex;
  52.         justify-content: space-around;
  53.         align-items: start;
  54.         .btn {
  55.           background-color: transparent;
  56.           padding: 0 5px;
  57.           display: flex;
  58.           flex-flow: column;
  59.           align-items: center;
  60.           justify-content: space-around;
  61.           &:focus {
  62.             outline: none;
  63.           }
  64.           &:active {
  65.             box-shadow: none;
  66.             color: $medium-blue;
  67.             transition: .3s color ease-in;
  68.           }
  69.           &:hover {
  70.             border-color: transparent;
  71.           }
  72.           &.active {
  73.             box-shadow: none;
  74.             &:before {
  75.               border: 2px solid $base-blue;
  76.               border-radius: 50%;
  77.               padding: 0;
  78.               color: $base-blue;
  79.             }
  80.           }
  81.           &.disabled {
  82.             border: none;
  83.             color: #a6a6a6;
  84.             &:before {
  85.               color: #a6a6a6;
  86.             }
  87.           }
  88.           &:before {
  89.             display: inline-block;
  90.             speak: none;
  91.             font-style: normal;
  92.             font-weight: normal;
  93.             font-variant: normal;
  94.             text-transform: none;
  95.             text-rendering: auto;
  96.             line-height: 1;
  97.             -webkit-font-smoothing: antialiased;
  98.             -moz-osx-font-smoothing: greyscale;
  99.             color: $base-blue;
  100.             height: 44px;
  101.             width: 44px;
  102.           }
  103.           &.btn-flight {
  104.             &:before {
  105.               font-family: "Ionicons";
  106.               content: "\f214";
  107.               font-size: 2em;
  108.               display: flex;
  109.               justify-content: center;
  110.               align-items: center;
  111.             }
  112.           }
  113.           &.btn-train {
  114.             &:before {
  115.               font-family: "Ionicons";
  116.               content: "\f3b4";
  117.               font-size: 2em;
  118.               display: flex;
  119.               justify-content: center;
  120.               align-items: center;
  121.             }
  122.           }
  123.           &.btn-flight-train {
  124.             &:before {
  125.               font-family: "CostaOTO";
  126.               content: "\e93c";
  127.               font-size: 2em;
  128.               display: flex;
  129.               justify-content: center;
  130.               align-items: center;
  131.             }
  132.           }
  133.           &.btn-flight-bus {
  134.             &:before {
  135.               font-family: "CostaOTO";
  136.               content: "\e944";
  137.               font-size: 2em;
  138.               display: flex;
  139.               justify-content: center;
  140.               align-items: center;
  141.             }
  142.           }
  143.           &.btn-bus {
  144.             &:before {
  145.               font-family: "Ionicons";
  146.               content: "\f36d";
  147.               font-size: 2em;
  148.               display: flex;
  149.               justify-content: center;
  150.               align-items: center;
  151.             }
  152.           }
  153.         }
  154.       }
  155.       .form-transportation {
  156.         margin-bottom: 0;
  157.       }
  158.       .btn-group-ios {
  159.         width: 100%;
  160.         .btn-primary-trasparent {
  161.           width: 50%;
  162.           &:first-child {
  163.             border-right: 0;
  164.           }
  165.         }
  166.       }
  167.     }
  168.     &.transportation-mandatory {
  169.       > .panel {
  170.         border-bottom: 5px solid $base-yellow;
  171.       }
  172.       .ion-asterisk {
  173.         font-size: 1.5em;
  174.         margin-top: -2px;
  175.       }
  176.       .transportation-icons-wrapper {
  177.         .btn {
  178.           transition: background .5s ease-out;
  179.           &.active {
  180.             box-shadow: none;
  181.             &:before {
  182.               border: 2px solid $base-blue;
  183.               background-color: $base-yellow;
  184.               border-radius: 50%;
  185.               padding: 12px 16px;
  186.               color: $base-blue;
  187.               transition: background .5s ease-in;
  188.             }
  189.           }
  190.         }
  191.       }
  192.     }
  193.   }
  194. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!