Created
March 29, 2020 13:14
-
-
Save TomGranot/af0bc092b921fe78beab24fcae904b00 to your computer and use it in GitHub Desktop.
Shopify App Dev From Scratch - HTML Wiring V2
This file contains 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
| /* A lot of the information can be learned from Shopify Polairs */ | |
| /* Form elements use the default of the OS */ | |
| html { | |
| /* Load system fonts */ | |
| font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif; | |
| /* Make type rendering look crisper */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| /* Disable auto-enlargement of small text in Safari */ | |
| text-size-adjust: 100%; | |
| /* Enable kerning and optional ligatures */ | |
| text-rendering: optimizeLegibility; | |
| } | |
| /** | |
| * Form elements render using OS defaults, | |
| * so font-family inheritance must be specifically declared | |
| */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| font-family: inherit; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 200px 50px 50px 200px; | |
| grid-template-rows: auto; | |
| grid-template-areas: "header header header header" "type1 type1 type2 type2" ". toggle toggle ."; | |
| row-gap: 20px; | |
| } | |
| .headerContainer { | |
| grid-area: header; | |
| } | |
| .singleButtonType1 { | |
| grid-area: type1; | |
| } | |
| .singleButtonType2 { | |
| grid-area: type2; | |
| } | |
| .toggle { | |
| grid-area: toggle; | |
| } | |
| .buttonType1 { | |
| /* So I can set a margin-bottom */ | |
| display: inline-block; | |
| padding: 0.5em 1.5em; | |
| border-radius: 8px; | |
| border: 2px solid black; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1em; | |
| line-height: 1.65em; | |
| cursor: pointer; | |
| color: white; | |
| background-color: black; | |
| margin-right: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .buttonType2 { | |
| /* So I can set a margin-bottom */ | |
| display: inline-block; | |
| padding: 0.5em 1.5em; | |
| border-radius: 8px; | |
| border: 2px solid black; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1em; | |
| line-height: 1.65em; | |
| cursor: pointer; | |
| color: black; | |
| background-color: white; | |
| margin-right: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* | |
| .toggle { | |
| margin: auto; | |
| } */ | |
| .toggleButton { | |
| padding: 15px; | |
| cursor: pointer; | |
| background-color: dimgray; | |
| border-radius: 5px; | |
| border-color: dimgray; | |
| border: 2px dimgray; | |
| font-size: large; | |
| color: black; | |
| font-weight: bold; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment