-
-
Save karakhanyans/d7f122ab4d4b5acb5a83cea73d3ee7b0 to your computer and use it in GitHub Desktop.
sass-example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .content { | |
| border-top-left-radius: 6px; | |
| border-top-right-radius: 6px; | |
| border-top: 4px solid #148cf0; | |
| width: 600px; | |
| max-width: 600px; | |
| height: 640px; | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 160px; | |
| .email { | |
| position: relative; | |
| background: #ffffff; | |
| border: 1px solid rgba(68, 68, 72, 0.2); | |
| padding: 60px; | |
| .header { | |
| margin-top: 50px; | |
| .help { | |
| font-family: "Hind", sans-serif; | |
| font-size: 28px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| } | |
| .comment { | |
| margin: 30px 0; | |
| width: 480px; | |
| height: 100px; | |
| border-radius: 3px; | |
| background-color: #ffffff; | |
| border: 1px solid rgba(68, 68, 72, 0.2); | |
| .link-special { | |
| margin-left: 80px; | |
| a { | |
| text-decoration: none; | |
| font-family: "Hind", sans-serif; | |
| font-size: 13px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #148cf0; | |
| } | |
| } | |
| .main { | |
| display: flex; | |
| padding: 15px 20px 0 20px; | |
| .comment-header { | |
| margin-left: 20px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 18px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.33; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| } | |
| } | |
| .ticket { | |
| margin: 25px 0; | |
| border: 1px dotted #acc9e0; | |
| width: 175px; | |
| height: 50px; | |
| border-radius: 3px; | |
| background-color: rgba(20, 140, 240, 0.1); | |
| .ticket-id { | |
| margin: 12px 21px 9px 23px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 18px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #222224; | |
| .id { | |
| font-family: "Hind", sans-serif; | |
| font-size: 18px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| } | |
| } | |
| .get-started { | |
| margin: 30px 0; | |
| .first { | |
| font-family: "Hind", sans-serif; | |
| font-size: 22px; | |
| font-weight: 500; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| .things { | |
| margin-left: 55px; | |
| counter-reset: my-awesome-counter; | |
| list-style: none; | |
| .list { | |
| margin-top: 15px; | |
| counter-increment: my-awesome-counter; | |
| position: relative; | |
| font-family: "Hind", sans-serif; | |
| font-size: 16px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.75; | |
| letter-spacing: normal; | |
| color: #222224; | |
| .special-link { | |
| a { | |
| text-decoration-color: #148cf0; | |
| font-family: "Hind", sans-serif; | |
| font-size: 16px; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.75; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| } | |
| } | |
| } | |
| .things .list::before { | |
| margin-top: 4px; | |
| content: counter(my-awesome-counter); | |
| color: #ffffff; | |
| position: absolute; | |
| --size: 22px; | |
| left: calc(-1 * var(--size) - 10px); | |
| line-height: var(--size); | |
| font-size: 14px; | |
| width: 20px; | |
| height: 20px; | |
| background: #222224; | |
| border-radius: 50%; | |
| text-align: center; | |
| } | |
| } | |
| .bookmark-item { | |
| margin: 30px 0; | |
| width: 100%; | |
| float: left; | |
| padding-bottom: 0; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12); | |
| background-color: white; | |
| .content-block { | |
| width: 100%; | |
| float: left; | |
| .bookmark-dropdown-block { | |
| width: 147px; | |
| float: right; | |
| position: relative; | |
| .toggle-block { | |
| float: right; | |
| margin-top: 5px; | |
| cursor: pointer; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 100%; | |
| } | |
| } | |
| .img-block { | |
| width: 36px; | |
| height: 36px; | |
| float: left; | |
| margin-right: 20px; | |
| } | |
| .text-block { | |
| float: left; | |
| margin-left: 16px; | |
| margin-top: -10px; | |
| .title { | |
| font-family: "Hind", sans-serif; | |
| font-size: 18px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.33; | |
| letter-spacing: normal; | |
| color: #222224; | |
| color: #222224; | |
| line-height: 1.33; | |
| font-size: 18px; | |
| font-weight: normal; | |
| } | |
| .link { | |
| a { | |
| text-decoration: none; | |
| opacity: 0.8; | |
| font-family: "Hind", sans-serif; | |
| font-size: 13px; | |
| font-weight: 500; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #444448; | |
| } | |
| } | |
| .tags { | |
| .tag { | |
| margin-top: 4px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 8px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: 0.4px; | |
| color: rgba(0, 0, 0, 0.6); | |
| letter-spacing: 0.4px; | |
| color: rgba(0, 0, 0, 0.6); | |
| font-size: 8px; | |
| font-weight: 600; | |
| padding: 2px 6px; | |
| float: left; | |
| border-radius: 2px; | |
| margin-right: 5px; | |
| text-transform: uppercase; | |
| background-color: rgb(20, 140, 240); | |
| } | |
| } | |
| } | |
| } | |
| .footer-block { | |
| width: 100%; | |
| float: left; | |
| margin-top: 12px; | |
| border-top: 1px solid rgba(68, 68, 72, 0.1); | |
| .actions { | |
| padding: 10px 15px; | |
| width: 100%; | |
| float: left; | |
| .action { | |
| float: left; | |
| margin-right: 24px; | |
| cursor: pointer; | |
| .count { | |
| color: #444448; | |
| } | |
| } | |
| .right-block { | |
| float: right; | |
| .action { | |
| float: left; | |
| margin-right: 24px; | |
| cursor: pointer; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .btnjoin { | |
| margin-top: 25px; | |
| .joinnow { | |
| cursor: pointer; | |
| padding: 9px 20px 8px 19px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 14px; | |
| font-weight: bold; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: 0.4px; | |
| text-align: center; | |
| color: #ffffff; | |
| width: 110px; | |
| height: 40px; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.12), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1); | |
| background-color: #06c993; | |
| } | |
| } | |
| .text { | |
| margin-top: 20px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 16px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.63; | |
| letter-spacing: normal; | |
| color: #222224; | |
| .special { | |
| font-family: "Hind", sans-serif; | |
| font-size: 16px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.75; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| .special-link { | |
| a { | |
| text-decoration-color: #148cf0; | |
| font-family: "Hind", sans-serif; | |
| font-size: 16px; | |
| font-weight: 700; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: 1.75; | |
| letter-spacing: normal; | |
| color: #222224; | |
| } | |
| } | |
| } | |
| .time { | |
| margin-top: 6px; | |
| width: 55px; | |
| height: 23px; | |
| opacity: 0.6; | |
| font-family: "Hind", sans-serif; | |
| font-size: 14px; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #444448; | |
| } | |
| } | |
| .email:after, .email:before { | |
| top: 100%; | |
| left: 14%; | |
| border: solid transparent; | |
| content: " "; | |
| height: 0; | |
| width: 0; | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .email:after { | |
| border-color: rgba(255, 255, 255, 0); | |
| border-top-color: #ffffff; | |
| border-width: 10px; | |
| margin-left: -10px; | |
| } | |
| .email:before { | |
| border-color: rgba(68, 68, 72, 0); | |
| border-top-color: #44444833; | |
| border-width: 11px; | |
| margin-left: -11px; | |
| } | |
| .user { | |
| margin-left: 60px; | |
| margin-top: 20px; | |
| display: flex; | |
| .username { | |
| margin: 12px 17px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 14px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #444448; | |
| .special { | |
| font-weight: normal; | |
| } | |
| } | |
| } | |
| .comment-user { | |
| margin-top: 20px; | |
| display: flex; | |
| .username { | |
| margin: 12px 17px; | |
| font-family: "Hind", sans-serif; | |
| font-size: 14px; | |
| font-weight: 600; | |
| font-style: normal; | |
| font-stretch: normal; | |
| line-height: normal; | |
| letter-spacing: normal; | |
| color: #444448; | |
| .special { | |
| font-weight: normal; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment