update: 調整顏色變數名稱

Tomas

2021-11-01 c40e0c01b6df46dabd6b5130ddef1b4dad7ed058

update: 調整顏色變數名稱

 PAMapp/assets/scss/_common.scss

@@ -2,7 +2,7 @@
// reset
html,body {
    margin: 0;
    color: $black;
    color: $PRIMARY_BLACK;
    font-family: Segoe UI;
}

@@ -24,20 +24,20 @@
.outline_btn {
    padding: 10px 20px;
    border-radius: 30px;
    color: $primaryRed;
    color: $PRIMARY_RED;
    border: solid 2px;

    &:hover {
        color: $primaryRed;
        background-color: $white;
        color: $PRIMARY_RED;
        background-color: $PRIMARY_WHITE;
    }

    &:focus {
        background-color: $coral;
        background-color: $CORAL;
    }

    &:disabled {
        background-color: $lightGrey;
        background-color: $LIGHT_GREY;
    }
}

@@ -50,13 +50,13 @@
            width: 9px;
            height: 9px;
            border-radius: 50px;
            border: solid 1px $lightGrey;
            background-color: $white;
            border: solid 1px $LIGHT_GREY;
            background-color: $PRIMARY_WHITE;
        }

        &.is-active {
            .el-carousel__button {
                background-color: $primaryRed;
                background-color: $PRIMARY_RED;
            }
        }
    }

 PAMapp/assets/scss/_mixin.scss

@@ -6,12 +6,12 @@

@mixin btn {
    border-radius: 30px;
    background-color: $primaryRed;
    color: $white;
    background-color: $PRIMARY_RED;
    color: $PRIMARY_WHITE;

    &:hover {
        background-color: $primaryRed;
        color: $white;
        background-color: $PRIMARY_RED;
        color: $PRIMARY_WHITE;
    }

    &:focus {
@@ -19,7 +19,7 @@
    }

    &:disabled {
        background-color: $lightGrey;
        background-color: $LIGHT_GREY;
    }
}


 PAMapp/assets/scss/_variable.scss

@@ -1,21 +1,17 @@
$primaryRed: #ED1B2E;
$white: #ffffff;
$black: #222222;
$PRIMARY_RED: #ED1B2E;
$PRIMARY_WHITE: #ffffff;
$PRIMARY_BLACK: #222222;

$orange: #E87722;
$yellow: #F2C75C;
$peach: #ECC3B2;
$coral: #F09491;
$tealGreen: #5CB8B2;
$skyBlue: #009CBD;
$lightBlue: #8DB9CA;
$darkBlue: #1B365D;
$beige: #A89968;
$prudentialGrey: #68737A;
$lightGrey: #D0D0CE;
$midGrey: #A7A8AA;
$green: #06A633;

$PRIMARY: #ED1B2E;
$SECONDARY: #E87722;
$INFO: #1B365D;
$ORANGE: #E87722;
$YELLOW: #F2C75C;
$PEACH: #ECC3B2;
$CORAL: #F09491;
$TEAL_GREEN: #5CB8B2;
$SKY_BLUE: #009CBD;
$LIGHT_BLUE: #8DB9CA;
$DARK_BLUE: #1B365D;
$BEIGE: #A89968;
$PRUDENTIAL_GREY: #68737A;
$LIGHT_GREY: #D0D0CE;
$MID_GREY: #A7A8AA;
$GREEN: #06A633;

 PAMapp/assets/scss/utilities/_heading.scss

@@ -40,13 +40,13 @@
}

.text--primary {
  color: $PRIMARY;
  color: $PRIMARY_RED;
}

.text--secondary {
  color: $SECONDARY;
.text--orange {
  color: $ORANGE;
}

.text--info {
  color: $INFO;
.text--dark-blue {
  color: $DARK_BLUE;
}

 PAMapp/assets/scss/utilities/_icon.scss

@@ -1,8 +1,8 @@
.pam-icon {
  font-size: 15px;
  padding-right: 8px;
  color: #68737A;
  color: $PRUDENTIAL_GREY;
  &.icon--primary {
    color: $PRIMARY;
    color: $PRIMARY_RED;
  }
}

 PAMapp/assets/scss/vendors/elementUI/_button.scss

@@ -5,12 +5,12 @@
  padding: 10px 20px;
  @extend .mdTxt;
  &.el-button--default {
    color: $PRIMARY;
    background-color: #FFFFFF;
    border-color: $PRIMARY;
    color: $PRIMARY_RED;
    background-color: $PRIMARY_WHITE;
    border-color: $PRIMARY_RED;
  }
  &.el-button--primary {
    background-color: $PRIMARY;
    border-color: $PRIMARY;
    background-color: $PRIMARY_RED;
    border-color: $PRIMARY_RED;
  }
}

 PAMapp/assets/scss/vendors/elementUI/_dropdown.scss

@@ -1,10 +1,11 @@
.pam-header__dropdown {
  border-radius: 10px;
  box-shadow: 0 3px 6px lightgray;
  box-shadow: 0 3px 6px $LIGHT_GREY;
  padding: 20px 26px 20px 20px;
  .pam-header__dropdown-item {
    width: max-content;
    padding-bottom: 16px;
    cursor: pointer;
  }
  .pam-header__dropdown-divider {
    padding-top: 16px;

 PAMapp/assets/scss/vendors/elementUI/_progress.scss

@@ -5,7 +5,7 @@
    background-color: #FFFFFF;
    .el-progress-bar__inner {
      border-radius: 0;
      background-color: $PRIMARY;
      background-color: $PRIMARY_RED;
    }
  }
}

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -55,7 +55,7 @@
<style lang="scss" scoped>
    .rowStyle {
        padding: 10px;
        background-color: #FFFFFF;
        background-color: $PRIMARY_WHITE;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
@@ -64,7 +64,7 @@
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $yellow;
            background-color: $YELLOW;
            margin: auto 0;
        }

@@ -80,7 +80,7 @@

            &:before {
                content: '\2605';
                color: $primaryRed;
                color: $PRIMARY_RED;
                margin: 5px;
            }
        }
@@ -97,20 +97,20 @@
        }

        .delete {
            color: $primaryRed;
            color: $PRIMARY_RED;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }

        .reservedBtn {
            color: $skyBlue;
            color: $SKY_BLUE;
            cursor: auto;

            &:hover {
                color: $skyBlue;
                border-color: $skyBlue;
                background-color: $white;
                color: $SKY_BLUE;
                border-color: $SKY_BLUE;
                background-color: $PRIMARY_WHITE;
            }
        }


 PAMapp/components/Consultant/ConsultantList.vue

@@ -41,7 +41,7 @@
<style lang="scss" scoped>

    .emptyRowStyle {
        background-color: $white;
        background-color: $PRIMARY_WHITE;
        width: 100%;
        height: 100px;
        display: flex;
@@ -49,12 +49,12 @@
        align-items: center;

        .login {
            color: $primaryRed;
            color: $PRIMARY_RED;
            cursor: pointer;
        }

        .txt {
            color: $prudentialGrey;
            color: $PRUDENTIAL_GREY;
            margin-left: 17px;
        }
    }

 PAMapp/components/Footer.vue

@@ -45,7 +45,7 @@
<style lang="scss" scoped>
footer {
  border-top: 1px solid #CCCCCC;
  background-color: #fff;
  background-color: $PRIMARY_WHITE;
  .pam-footer-nav {
    padding: 10px 20px;
    .pam-footer-nav__list {
@@ -57,7 +57,8 @@
        padding: 10px 0 10px 10px;
        @extend .xsTxt;
        @extend .text--bold;
        @extend .text--info;
        @extend .text--dark-blue;
        @extend .cursor--pointer;
      }
    }
  }
@@ -71,13 +72,13 @@
      flex-wrap: wrap;
      justify-content: center;
      .pam-footer-contact__item {
        color: #68737A;
        color: $PRUDENTIAL_GREY;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        @extend .text--bold;
        .phone {
          color: #222222;
          color: $PRIMARY_BLACK;
          font-size: 14px;
          @extend .text--bold;
        }
@@ -85,10 +86,10 @@
    }
  }
  .pam-footer-copywrite {
    background-color: $PRIMARY;
    background-color: $PRIMARY_RED;
    display: flex;
    justify-content: center;
    color: white;
    color: $PRIMARY_WHITE;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;

 PAMapp/components/SwiperConsultantCard.vue

@@ -37,7 +37,7 @@

            &:before {
                content: '\2605';
                color: #ED1B2E;
                color: $PRIMARY_RED;
                margin-right: 10px;
                font-size: 15px;
            }

 PAMapp/components/Ui/UiSwiper.vue

@@ -61,14 +61,14 @@
  box-shadow: 0 0 6px #22222229;
  border-radius: 10px;
  padding: 45px 0 37px 0;
  background-color: $white;
  background-color: $PRIMARY_WHITE;

  .swiper-slide {
    cursor: pointer;
  }

  .swiper-button-next,.swiper-button-prev {
    background-color: $white;
    background-color: $PRIMARY_WHITE;
    top: 20px;
    height: 100%;


 PAMapp/pages/agentInfo/index.vue

@@ -113,7 +113,7 @@
        class="pam-paragraph">
        <UiField icon="flag" label="專長領域">
          <div class="pam-field-experts">
            <div class="text--secondary bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
              #{{ expert }}
            </div>
          </div>
@@ -162,7 +162,7 @@

@Component
export default class AgentInfoComponent extends Vue {
  agentInfo: AgengInfo = {
  agentInfo: AgentInfo = {
    name: '蔡美眉',
    role: '伯樂保險經紀人',
    avgReviews: 4.8,
@@ -185,7 +185,7 @@
  }
}

interface AgengInfo {
interface AgentInfo {
  name: string;
  role: string;
  avgReviews: number;
@@ -208,9 +208,9 @@
.pam-icon {
  font-size: 15px;
  padding-right: 8px;
  color: #68737A;
  color: $PRUDENTIAL_GREY;
  &.icon--primary {
    color: #ED1B2E;
    color: $PRIMARY_RED;
  }
}
.pam-field {
@@ -231,13 +231,13 @@

.pam-field-suitability {
  .el-progress-bar__inner {
    background-color: #8DB9CA !important;
    background-color: $LIGHT_BLUE !important;
  }
}

.pam-field-evaluation {
  .el-progress-bar__inner {
    background-color: #5CB8B2 !important;
    background-color: $TEAL_GREEN!important;
  }
}


 PAMapp/pages/index.vue

@@ -96,7 +96,7 @@
        margin: 0 auto 17px auto;
        font-size: 32px;
        font-weight: 700;
        color: $black;
        color: $PRIMARY_BLACK;

        &:nth-child(3) {
            margin-bottom: 42px;
@@ -113,13 +113,13 @@
        .flex {
            display: flex;
            .amount {
                color: $prudentialGrey;
                color: $PRUDENTIAL_GREY;
                margin-left: 10px;
                align-self: center;
            }
        }
        .readMore {
            color: $primaryRed;
            color: $PRIMARY_RED;
            cursor: pointer;
        }
    }