Last active
April 5, 2019 07:56
-
-
Save yahyaerturan/500cb7acc45e6e730a0494a820f502bf to your computer and use it in GitHub Desktop.
Preliminary Effort on Matter Scss
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
| :root { | |
| --matter-font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system; | |
| --matter-onprimary: rgba(255, 255, 255, 1.0); | |
| --matter-surface: rgba(255, 255, 255, 1.0); | |
| --matter-surface--34: rgba(255, 255, 255, 0.34); | |
| --matter-onsurface: rgba(0, 0, 0, 1.0); | |
| --matter-onsurface--04: rgba(0, 0, 0, 0.04); | |
| --matter-onsurface--08: rgba(0, 0, 0, 0.08); | |
| --matter-onsurface--12: rgba(0, 0, 0, 0.12); | |
| --matter-onsurface--24: rgba(0, 0, 0, 0.24); | |
| --matter-onsurface--38: rgba(0, 0, 0, 0.38); | |
| --matter-onsurface--60: rgba(0, 0, 0, 0.60); | |
| --matter-onsurface--85: rgba(0, 0, 0, 0.85); | |
| --matter-onsurface--87: rgba(0, 0, 0, 0.87); | |
| --matter-color-primary: rgba(63, 81, 181, 1.0); | |
| --matter-color-primary--12: rgba(63, 81, 181, 0.12); | |
| --matter-color-primary--60: rgba(63, 81, 181, 0.6); | |
| --matter-color-secondary: rgba(0, 150, 136, 1.0); | |
| --matter-color-success: rgba(76, 175, 80, 1.0); | |
| --matter-color-info: rgba(33, 150, 243, 1.0); | |
| --matter-color-warning: rgba(255, 87, 34, 1.0); | |
| --matter-color-danger: rgba(233, 30, 99, 1.0); | |
| --matter-color-black: rgba(66, 66, 66, 1.0); | |
| } | |
| .pure-md-link { | |
| position: relative; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| border: none; | |
| border-radius: 4px; | |
| padding: 0 8px; | |
| min-width: 64px; | |
| height: 36px; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| background-color: transparent; | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 36px; | |
| overflow: hidden; | |
| outline: none; | |
| cursor: pointer; | |
| &.matter-primary { | |
| color: var(--matter-color-primary); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-primary); | |
| } | |
| } | |
| &.pure-md-secondary { | |
| color: var(--matter-color-secondary); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-secondary); | |
| } | |
| } | |
| &.pure-md-success { | |
| color: var(--matter-color-success); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-success); | |
| } | |
| } | |
| &.pure-md-info { | |
| color: var(--matter-color-info); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-info); | |
| } | |
| } | |
| &.pure-md-warning { | |
| color: var(--matter-color-warning); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-warning); | |
| } | |
| } | |
| &.pure-md-danger { | |
| color: var(--matter-color-danger); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-danger); | |
| } | |
| } | |
| &.pure-md-black { | |
| color: var(--matter-color-black); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-black); | |
| } | |
| } | |
| &::-moz-focus-inner { | |
| border: none; | |
| } | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| background-color: currentColor; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| border-radius: 50%; | |
| padding: 50%; | |
| width: 32px; | |
| height: 32px; | |
| background-color: currentColor; | |
| opacity: 0; | |
| transform: translate(-50%, -50%) scale(1) ; | |
| transition: opacity 1s, transform 0.5s; | |
| } | |
| &:hover { | |
| &::before { | |
| opacity: 0.04; | |
| } | |
| &:focus { | |
| &::before { | |
| opacity: 0.16; | |
| } | |
| } | |
| } | |
| &:focus { | |
| &::before { | |
| opacity: 0.12; | |
| } | |
| } | |
| &:active { | |
| &::after { | |
| opacity: 0.16; | |
| transform: translate(-50%, -50%) scale(0); | |
| transition: transform 0s; | |
| } | |
| } | |
| &:disabled, &[disabled] { | |
| color: var(--matter-onsurface--38); | |
| background-color: transparent; | |
| cursor: not-allowed; | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-onsurface--38); | |
| cursor: not-allowed; | |
| } | |
| &::before { | |
| opacity: 0; | |
| } | |
| &::after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .pure-md-button { | |
| position: relative; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| border: none; | |
| border-radius: 4px; | |
| padding: 0 16px; | |
| min-width: 64px; | |
| height: 36px; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-primary); | |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 36px; | |
| overflow: hidden; | |
| outline: none; | |
| cursor: pointer; | |
| transition: box-shadow 0.2s; | |
| &.matter-primary { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-primary); | |
| } | |
| &.matter-secondary { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-secondary); | |
| } | |
| &.matter-success { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-success); | |
| } | |
| &.matter-info { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-info); | |
| } | |
| &.matter-warning { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-warning); | |
| } | |
| &.matter-danger { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-danger); | |
| } | |
| &.matter-black { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-black); | |
| } | |
| &::-moz-focus-inner { | |
| border: none; | |
| } | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background-color: var(--matter-onprimary); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| border-radius: 50%; | |
| padding: 50%; | |
| width: 32px; | |
| height: 32px; | |
| background-color: var(--matter-onprimary); | |
| opacity: 0; | |
| transform: translate(-50%, -50%) scale(1); | |
| transition: opacity 1s, transform 0.5s; | |
| } | |
| &:hover, &:focus { | |
| box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); | |
| } | |
| &:hover { | |
| &::before { | |
| opacity: 0.08; | |
| } | |
| &:focus::before { | |
| opacity: 0.3; | |
| } | |
| } | |
| &:focus::before { | |
| opacity: 0.24; | |
| } | |
| &:active { | |
| box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); | |
| &::after { | |
| opacity: 0.32; | |
| transform: translate(-50%, -50%) scale(0); | |
| transition: transform 0s; | |
| } | |
| } | |
| &:disabled, &[disabled] { | |
| color: var(--matter-onsurface--38); | |
| background-color: var(--matter-onsurface--12); | |
| box-shadow: none; | |
| cursor: initial; | |
| &::before { | |
| opacity: 0; | |
| } | |
| &::after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .pure-md-switch { | |
| z-index: 0; | |
| position: relative; | |
| display: inline-block; | |
| color: var(--matter-onsurface--87); | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > { | |
| input { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| z-index: -1; | |
| position: absolute; | |
| right: 6px; | |
| top: -8px; | |
| display: block; | |
| margin: 0; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--matter-onsurface--38); | |
| outline: none; | |
| opacity: 0; | |
| transform: scale(1); | |
| pointer-events: none; | |
| transition: opacity 0.3s 0.1s, transform 0.2s 0.1s; | |
| } | |
| span { | |
| display: inline-block; | |
| width: 100%; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| float: right; | |
| display: inline-block; | |
| margin: 5px 0 5px 10px; | |
| border-radius: 7px; | |
| width: 36px; | |
| height: 14px; | |
| background-color: var(--matter-onsurface--38); | |
| vertical-align: top; | |
| transition: background-color 0.2s, opacity 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| right: 16px; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--matter-onprimary); | |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); | |
| transition: background-color 0.2s, transform 0.2s; | |
| } | |
| } | |
| input:checked { | |
| right: -10px; | |
| background-color: var(--matter-color-primary); | |
| + span { | |
| &::before { | |
| background-color: var(--matter-color-primary--60); | |
| } | |
| &::after { | |
| background-color: var(--matter-color-primary); | |
| transform: translateX(16px); | |
| } | |
| } | |
| } | |
| } | |
| &:hover { | |
| > input { | |
| opacity: 0.04; | |
| } | |
| > input:focus { | |
| opacity: 0.16; | |
| } | |
| } | |
| > input:focus { | |
| opacity: 0.12; | |
| } | |
| > input { | |
| &:active { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| + span::before { | |
| background-color: var(--matter-color-primary--60); | |
| } | |
| } | |
| &:checked:active + span::before { | |
| background-color: var(--matter-onsurface--38); | |
| } | |
| &:disabled { | |
| opacity: 0; | |
| + span { | |
| color: var(--matter-onsurface); | |
| opacity: 0.38; | |
| cursor: default; | |
| &::before { | |
| background-color: var(--matter-onsurface--38); | |
| } | |
| } | |
| } | |
| &:checked:disabled + span::before { | |
| background-color: var(--matter-color-primary--60); | |
| } | |
| } | |
| } | |
| .pure-md-checkbox { | |
| z-index: 0; | |
| position: relative; | |
| display: inline-block; | |
| color: var(--matter-onsurface--87); | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > { | |
| input { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| z-index: -1; | |
| position: absolute; | |
| left: -10px; | |
| top: -8px; | |
| display: block; | |
| margin: 0; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--matter-onsurface--60); | |
| box-shadow: none; | |
| outline: none; | |
| opacity: 0; | |
| transform: scale(1); | |
| pointer-events: none; | |
| transition: opacity 0.3s, transform 0.2s; | |
| } | |
| span { | |
| display: inline-block; | |
| width: 100%; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| margin: 3px 11px 3px 1px; | |
| border: solid 2px; | |
| border-color: var(--matter-onsurface--60); | |
| border-radius: 2px; | |
| width: 18px; | |
| height: 18px; | |
| vertical-align: top; | |
| transition: border-color 0.2s, background-color 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 3px; | |
| left: 1px; | |
| width: 10px; | |
| height: 5px; | |
| border: solid 2px transparent; | |
| border-right: none; | |
| border-top: none; | |
| transform: translate(4px, 5px) rotate(-45deg); | |
| } | |
| } | |
| input { | |
| &:checked, &:indeterminate { | |
| background-color: var(--matter-color-primary); | |
| } | |
| &:checked + span::before, &:indeterminate + span::before { | |
| border-color: var(--matter-color-primary); | |
| background-color: var(--matter-color-primary); | |
| } | |
| &:checked + span::after { | |
| border-color: var(--matter-onprimary); | |
| } | |
| &:indeterminate + span::after { | |
| border-color: var(--matter-onprimary); | |
| border-left: none; | |
| transform: translate(4px, 5px); | |
| } | |
| } | |
| } | |
| &:hover { | |
| > input { | |
| opacity: 0.04; | |
| } | |
| > input:focus { | |
| opacity: 0.16; | |
| } | |
| } | |
| > input:focus { | |
| opacity: 0.12; | |
| } | |
| > input { | |
| &:active { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| + span::before { | |
| border-color: var(--matter-color-primary); | |
| } | |
| } | |
| &:checked:active + span::before { | |
| border-color: transparent; | |
| background-color: var(--matter-onsurface--60); | |
| } | |
| &:disabled { | |
| opacity: 0; | |
| + span { | |
| color: var(--matter-onsurface--38); | |
| cursor: initial; | |
| &::before { | |
| border-color: currentColor; | |
| } | |
| } | |
| } | |
| &:checked:disabled + span::before, &:indeterminate:disabled + span::before { | |
| border-color: transparent; | |
| background-color: currentColor; | |
| } | |
| } | |
| } | |
| /* Matter 0.1.0 */ | |
| .matter-button-contained { | |
| position: relative; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| border: none; | |
| border-radius: 4px; | |
| padding: 0 16px; | |
| min-width: 64px; | |
| height: 36px; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-primary); | |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 36px; | |
| outline: none; | |
| cursor: pointer; | |
| transition: box-shadow 0.2s; | |
| &.matter-primary { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-primary); | |
| } | |
| &.matter-secondary { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-secondary); | |
| } | |
| &.matter-success { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-success); | |
| } | |
| &.matter-info { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-info); | |
| } | |
| &.matter-warning { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-warning); | |
| } | |
| &.matter-danger { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-danger); | |
| } | |
| &.matter-black { | |
| color: var(--matter-onprimary); | |
| background-color: var(--matter-color-black); | |
| } | |
| &::-moz-focus-inner { | |
| border: none; | |
| } | |
| &::before, &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: inherit; | |
| opacity: 0; | |
| } | |
| &::before { | |
| background-color: var(--matter-onprimary); | |
| transition: opacity 0.2s; | |
| } | |
| &::after { | |
| background: radial-gradient(circle at center, currentColor 1%, transparent 1%) (center / 10000%) 10000% no-repeat; | |
| transition: opacity 1s, background-size 0.5s; | |
| } | |
| &:hover, &:focus { | |
| box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); | |
| } | |
| &:hover::before { | |
| opacity: 0.08; | |
| } | |
| &:focus::before { | |
| opacity: 0.24; | |
| } | |
| &:hover:focus::before { | |
| opacity: 0.32; | |
| } | |
| &:active { | |
| box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); | |
| &::after { | |
| opacity: 0.32; | |
| background-size: 100% 100%; | |
| transition: background-size 0s; | |
| } | |
| } | |
| &:disabled { | |
| color: var(--matter-onsurface--38); | |
| background-color: var(--matter-onsurface--12); | |
| box-shadow: none; | |
| cursor: initial; | |
| &::before, &::after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .matter-button-outlined { | |
| position: relative; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: solid 1px; | |
| border-color: var(--matter-onsurface--24); | |
| border-radius: 4px; | |
| padding: 0 16px; | |
| min-width: 64px; | |
| height: 36px; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| color: var(--matter-color-primary); | |
| background-color: transparent; | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 34px; | |
| outline: none; | |
| cursor: pointer; | |
| &.matter-primary { | |
| color: var(--matter-color-primary); | |
| } | |
| &.matter-secondary { | |
| color: var(--matter-color-secondary); | |
| } | |
| &.matter-success { | |
| color: var(--matter-color-success); | |
| } | |
| &.matter-info { | |
| color: var(--matter-color-info); | |
| } | |
| &.matter-warning { | |
| color: var(--matter-color-warning); | |
| } | |
| &.matter-danger { | |
| color: var(--matter-color-danger); | |
| } | |
| &.matter-black { | |
| color: var(--matter-color-black); | |
| } | |
| &::-moz-focus-inner { | |
| border: none; | |
| } | |
| &::before, &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 3px; | |
| opacity: 0; | |
| } | |
| &::before { | |
| background-color: var(--matter-color-primary); | |
| transition: opacity 0.2s; | |
| } | |
| &::after { | |
| background: radial-gradient(circle at center, currentColor 1%, transparent 1%) (center / 10000%) 10000% no-repeat; | |
| transition: opacity 1s, background-size 0.5s; | |
| } | |
| &:hover::before { | |
| opacity: 0.04; | |
| } | |
| &:focus::before { | |
| opacity: 0.12; | |
| } | |
| &:hover:focus::before { | |
| opacity: 0.16; | |
| } | |
| &:active::after { | |
| opacity: 0.16; | |
| background-size: 100% 100%; | |
| transition: background-size 0s; | |
| } | |
| &:disabled { | |
| color: var(--matter-onsurface--38); | |
| background-color: transparent; | |
| cursor: initial; | |
| &::before, &::after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .matter-button-text { | |
| position: relative; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: none; | |
| border-radius: 4px; | |
| padding: 0 8px; | |
| min-width: 64px; | |
| height: 36px; | |
| vertical-align: middle; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| color: var(--matter-color-primary); | |
| background-color: transparent; | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| line-height: 36px; | |
| outline: none; | |
| cursor: pointer; | |
| &.matter-primary { | |
| color: var(--matter-color-primary); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-primary); | |
| } | |
| } | |
| &.matter-secondary { | |
| color: var(--matter-color-secondary); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-secondary); | |
| } | |
| } | |
| &.matter-success { | |
| color: var(--matter-color-success); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-success); | |
| } | |
| } | |
| &.matter-info { | |
| color: var(--matter-color-info); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-info); | |
| } | |
| } | |
| &.matter-warning { | |
| color: var(--matter-color-warning); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-warning); | |
| } | |
| } | |
| &.matter-danger { | |
| color: var(--matter-color-danger); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-danger); | |
| } | |
| } | |
| &.matter-black { | |
| color: var(--matter-color-black); | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-color-black); | |
| } | |
| } | |
| &::-moz-focus-inner { | |
| border: none; | |
| } | |
| &::before, &::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: inherit; | |
| opacity: 0; | |
| } | |
| &::before { | |
| background-color: var(--matter-color-primary); | |
| transition: opacity 0.2s; | |
| } | |
| &::after { | |
| background: radial-gradient(circle at center, currentColor 1%, transparent 1%) (center / 10000%) 10000% no-repeat; | |
| transition: opacity 1s, background-size 0.5s; | |
| } | |
| &:hover::before { | |
| opacity: 0.04; | |
| } | |
| &:focus::before { | |
| opacity: 0.12; | |
| } | |
| &:hover:focus::before { | |
| opacity: 0.16; | |
| } | |
| &:active::after { | |
| opacity: 0.16; | |
| background-size: 100% 100%; | |
| transition: background-size 0s; | |
| } | |
| &:disabled { | |
| color: var(--matter-onsurface--38); | |
| background-color: transparent; | |
| cursor: not-allowed; | |
| &:hover, :focus, :active, :visited { | |
| color: var(--matter-onsurface--38); | |
| cursor: not-allowed; | |
| } | |
| &::before, &::after { | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .matter-progress-circular { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| box-sizing: border-box; | |
| border: none; | |
| border-radius: 50%; | |
| padding: 0.25em; | |
| width: 3em; | |
| height: 3em; | |
| color: var(--matter-color-primary); | |
| background-color: transparent; | |
| font-size: 16px; | |
| overflow: hidden; | |
| &::-webkit-progress-bar { | |
| background-color: transparent; | |
| } | |
| &:indeterminate { | |
| animation: matter-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1); | |
| } | |
| } | |
| :-ms-lang(x) { | |
| animation: none; | |
| } | |
| .matter-progress-circular:indeterminate { | |
| &::before, &::-webkit-progress-value { | |
| content: ""; | |
| display: block; | |
| box-sizing: border-box; | |
| margin-bottom: 0.25em; | |
| border: solid 0.25em currentColor; | |
| border-radius: 50%; | |
| width: 100% !important; | |
| height: 100%; | |
| background-color: transparent; | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0); | |
| clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0); | |
| animation: matter-progress-circular-pseudo 0.75s infinite linear alternate; | |
| animation-play-state: inherit; | |
| animation-delay: inherit; | |
| } | |
| &::-moz-progress-bar { | |
| box-sizing: border-box; | |
| border: solid 0.25em currentColor; | |
| border-radius: 50%; | |
| width: 100%; | |
| height: 100%; | |
| background-color: transparent; | |
| clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0); | |
| animation: matter-progress-circular-pseudo 0.75s infinite linear alternate; | |
| animation-play-state: inherit; | |
| animation-delay: inherit; | |
| } | |
| &::-ms-fill { | |
| animation-name: -ms-ring; | |
| } | |
| } | |
| @keyframes matter-progress-circular { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 12.5% { | |
| transform: rotate(180deg); | |
| animation-timing-function: linear; | |
| } | |
| 25% { | |
| transform: rotate(630deg); | |
| } | |
| 37.5% { | |
| transform: rotate(810deg); | |
| animation-timing-function: linear; | |
| } | |
| 50% { | |
| transform: rotate(1260deg); | |
| } | |
| 62.5% { | |
| transform: rotate(1440deg); | |
| animation-timing-function: linear; | |
| } | |
| 75% { | |
| transform: rotate(1890deg); | |
| } | |
| 87.5% { | |
| transform: rotate(2070deg); | |
| animation-timing-function: linear; | |
| } | |
| 100% { | |
| transform: rotate(2520deg); | |
| } | |
| } | |
| @keyframes matter-progress-circular-pseudo { | |
| 0% { | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0); | |
| clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0); | |
| } | |
| 18% { | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 0, 100% 0, 100% 0); | |
| clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 0, 100% 0, 100% 0); | |
| } | |
| 53% { | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); | |
| clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); | |
| } | |
| 88% { | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 100%); | |
| clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 100%); | |
| } | |
| 100% { | |
| -webkit-clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 63%); | |
| clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 63%); | |
| } | |
| } | |
| .matter-progress-linear { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| border: none; | |
| width: 160px; | |
| height: 4px; | |
| vertical-align: middle; | |
| color: var(--matter-color-primary); | |
| background-color: var(--matter-color-primary--12); | |
| &::-webkit-progress-bar { | |
| background-color: transparent; | |
| } | |
| &::-webkit-progress-value, &::-moz-progress-bar { | |
| background-color: currentColor; | |
| transition: all 0.2s; | |
| } | |
| &::-ms-fill { | |
| border: none; | |
| background-color: currentColor; | |
| transition: all 0.2s; | |
| } | |
| &:indeterminate { | |
| background-size: 200% 100%; | |
| background-image: linear-gradient(to right, currentColor 16%, transparent 16%), linear-gradient(to right, currentColor 16%, transparent 16%), linear-gradient(to right, currentColor 25%, transparent 25%); | |
| animation: matter-progress-linear 1.8s infinite linear; | |
| &::-webkit-progress-value, &::-moz-progress-bar { | |
| background-color: transparent; | |
| } | |
| &::-ms-fill { | |
| animation-name: none; | |
| } | |
| } | |
| } | |
| @keyframes matter-progress-linear { | |
| 0% { | |
| background-position: 32% 0, 32% 0, 50% 0; | |
| } | |
| 2% { | |
| background-position: 32% 0, 32% 0, 50% 0; | |
| } | |
| 21% { | |
| background-position: 32% 0, -18% 0, 0 0; | |
| } | |
| 42% { | |
| background-position: 32% 0, -68% 0, -27% 0; | |
| } | |
| 50% { | |
| background-position: 32% 0, -93% 0, -46% 0; | |
| } | |
| 56% { | |
| background-position: 32% 0, -118% 0, -68% 0; | |
| } | |
| 66% { | |
| background-position: -11% 0, -200% 0, -100% 0; | |
| } | |
| 71% { | |
| background-position: -32% 0, -200% 0, -100% 0; | |
| } | |
| 79% { | |
| background-position: -54% 0, -242% 0, -100% 0; | |
| } | |
| 86% { | |
| background-position: -68% 0, -268% 0, -100% 0; | |
| } | |
| 100% { | |
| background-position: -100% 0, -300% 0, -100% 0; | |
| } | |
| } | |
| .matter-checkbox { | |
| z-index: 0; | |
| position: relative; | |
| display: inline-block; | |
| color: var(--matter-onsurface--87); | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > input { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| z-index: 1; | |
| position: absolute; | |
| display: block; | |
| box-sizing: border-box; | |
| margin: 3px 1px; | |
| border: solid 2px; | |
| border-color: var(--matter-onsurface--60); | |
| border-radius: 2px; | |
| width: 18px; | |
| height: 18px; | |
| outline: none; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background-color 0.2s; | |
| + span { | |
| display: inline-block; | |
| box-sizing: border-box; | |
| padding-left: 30px; | |
| width: inherit; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| left: -10px; | |
| top: -8px; | |
| display: block; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--matter-onsurface); | |
| opacity: 0; | |
| transform: scale(1); | |
| pointer-events: none; | |
| transition: opacity 0.3s, transform 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| z-index: 1; | |
| display: block; | |
| position: absolute; | |
| top: 3px; | |
| left: 1px; | |
| width: 10px; | |
| height: 5px; | |
| border: solid 2px transparent; | |
| border-right-width: 0; | |
| border-top-width: 0; | |
| pointer-events: none; | |
| transform: translate(4px, 5px) rotate(-45deg); | |
| transition: border-color 0.2s; | |
| } | |
| } | |
| &:checked, &:indeterminate { | |
| border-color: var(--matter-color-primary); | |
| background-color: var(--matter-color-primary); | |
| } | |
| &:checked + span::before, &:indeterminate + span::before { | |
| background-color: var(--matter-color-primary); | |
| } | |
| &:checked + span::after { | |
| border-color: var(--matter-onprimary); | |
| } | |
| &:indeterminate + span::after { | |
| border-color: var(--matter-onprimary); | |
| border-left-width: 0; | |
| transform: translate(4px, 5px); | |
| } | |
| } | |
| &:hover { | |
| > input + span::before { | |
| opacity: 0.04; | |
| } | |
| > input:focus + span::before { | |
| opacity: 0.16; | |
| } | |
| } | |
| > input:focus + span::before { | |
| opacity: 0.12; | |
| } | |
| &:active { | |
| > input, &:hover > input { | |
| border-color: var(--matter-color-primary); | |
| } | |
| > input { | |
| &:checked { | |
| border-color: transparent; | |
| background-color: var(--matter-onsurface--60); | |
| } | |
| + span::before { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| } | |
| } | |
| } | |
| > input { | |
| &:disabled { | |
| border-color: var(--matter-onsurface--38); | |
| cursor: initial; | |
| } | |
| &:checked:disabled, &:indeterminate:disabled { | |
| border-color: transparent; | |
| background-color: var(--matter-onsurface--38); | |
| } | |
| &:disabled + span { | |
| color: var(--matter-onsurface--38); | |
| cursor: initial; | |
| &::before { | |
| opacity: 0; | |
| transform: scale(0); | |
| } | |
| } | |
| } | |
| } | |
| .matter-radio { | |
| z-index: 0; | |
| position: relative; | |
| display: inline-block; | |
| color: var(--matter-onsurface--87); | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > input { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| z-index: 1; | |
| position: absolute; | |
| display: block; | |
| box-sizing: border-box; | |
| margin: 2px 0; | |
| border: solid 2px; | |
| border-color: var(--matter-onsurface--60); | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| outline: none; | |
| cursor: pointer; | |
| transition: border-color 0.2s; | |
| + span { | |
| display: inline-block; | |
| box-sizing: border-box; | |
| padding-left: 30px; | |
| width: inherit; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| left: -10px; | |
| top: -8px; | |
| display: block; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--matter-onsurface); | |
| opacity: 0; | |
| transform: scale(0); | |
| pointer-events: none; | |
| transition: opacity 0.3s, transform 0.2s; | |
| } | |
| &::after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 2px; | |
| left: 0; | |
| border-radius: 50%; | |
| width: 10px; | |
| height: 10px; | |
| background-color: var(--matter-color-primary); | |
| transform: translate(5px, 5px) scale(0); | |
| transition: transform 0.2s; | |
| } | |
| } | |
| &:checked { | |
| border-color: var(--matter-color-primary); | |
| + span { | |
| &::before { | |
| background-color: var(--matter-color-primary); | |
| } | |
| &::after { | |
| transform: translate(5px, 5px) scale(1); | |
| } | |
| } | |
| } | |
| } | |
| &:hover { | |
| > input + span::before { | |
| transform: scale(1); | |
| opacity: 0.04; | |
| } | |
| > input:focus + span::before { | |
| transform: scale(1); | |
| opacity: 0.16; | |
| } | |
| } | |
| > input:focus + span::before { | |
| transform: scale(1); | |
| opacity: 0.12; | |
| } | |
| &:active { | |
| > input { | |
| border-color: var(--matter-color-primary); | |
| + span::before { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| } | |
| } | |
| &:hover > input + span::before { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| } | |
| } | |
| > input:disabled { | |
| border-color: var(--matter-onsurface--38); | |
| cursor: initial; | |
| + span { | |
| color: var(--matter-onsurface--38); | |
| cursor: initial; | |
| &::before { | |
| opacity: 0; | |
| transform: scale(0); | |
| } | |
| &::after { | |
| background-color: currentColor; | |
| } | |
| } | |
| } | |
| } | |
| .matter-switch { | |
| z-index: 0; | |
| position: relative; | |
| display: inline-block; | |
| color: var(--matter-onsurface--87); | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > input { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| z-index: 1; | |
| position: relative; | |
| float: right; | |
| display: inline-block; | |
| margin: 0 0 0 5px; | |
| border: solid 5px transparent; | |
| border-radius: 12px; | |
| width: 46px; | |
| height: 24px; | |
| background-clip: padding-box; | |
| background-color: var(--matter-onsurface--38); | |
| outline: none; | |
| cursor: pointer; | |
| transition: background-color 0.2s, opacity 0.2s; | |
| + span { | |
| display: inline-block; | |
| box-sizing: border-box; | |
| margin-right: -51px; | |
| padding-right: 51px; | |
| width: inherit; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| right: 11px; | |
| top: -8px; | |
| display: block; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--matter-onsurface); | |
| opacity: 0; | |
| transform: scale(1); | |
| pointer-events: none; | |
| transition: opacity 0.3s 0.1s, transform 0.2s 0.1s; | |
| } | |
| &::after { | |
| content: ""; | |
| z-index: 1; | |
| position: absolute; | |
| top: 2px; | |
| right: 21px; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--matter-onprimary); | |
| box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); | |
| pointer-events: none; | |
| transition: background-color 0.2s, transform 0.2s; | |
| } | |
| } | |
| &:checked { | |
| background-color: var(--matter-color-primary--60); | |
| + span { | |
| &::before { | |
| right: -5px; | |
| background-color: var(--matter-color-primary); | |
| } | |
| &::after { | |
| background-color: var(--matter-color-primary); | |
| transform: translateX(16px); | |
| } | |
| } | |
| } | |
| } | |
| &:hover { | |
| > input + span::before { | |
| opacity: 0.04; | |
| } | |
| > input:focus + span::before { | |
| opacity: 0.16; | |
| } | |
| } | |
| > input:focus + span::before { | |
| opacity: 0.12; | |
| } | |
| &:active > input { | |
| background-color: var(--matter-color-primary--60); | |
| &:checked { | |
| background-color: var(--matter-onsurface--38); | |
| } | |
| + span::before { | |
| opacity: 1; | |
| transform: scale(0); | |
| transition: transform 0s, opacity 0s; | |
| } | |
| } | |
| > input { | |
| &:disabled { | |
| background-color: var(--matter-onsurface--38); | |
| opacity: 0.38; | |
| cursor: default; | |
| } | |
| &:checked:disabled { | |
| background-color: var(--matter-color-primary--60); | |
| } | |
| &:disabled + span { | |
| color: var(--matter-onsurface--38); | |
| cursor: default; | |
| &::before { | |
| z-index: 1; | |
| margin: 10px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: var(--matter-surface); | |
| transform: scale(1); | |
| opacity: 1; | |
| transition: none; | |
| } | |
| &::after { | |
| opacity: 0.38; | |
| } | |
| } | |
| } | |
| } | |
| .matter-textfield-standard { | |
| position: relative; | |
| display: inline-block; | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > { | |
| input, textarea { | |
| display: block; | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: none; | |
| border-top: solid 24px transparent; | |
| border-bottom: solid 1px var(--matter-onsurface--60); | |
| padding: 0 0 7px; | |
| width: 100%; | |
| height: inherit; | |
| color: var(--matter-onsurface--87); | |
| -webkit-text-fill-color: currentColor; | |
| background-color: transparent; | |
| box-shadow: none; | |
| /* Firefox */ | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| caret-color: var(--matter-color-primary); | |
| transition: border-bottom 0.2s, background-color 0.2s; | |
| } | |
| input + span, textarea + span { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: block; | |
| box-sizing: border-box; | |
| padding: 7px 0 0; | |
| color: var(--matter-onsurface--60); | |
| font-size: 75%; | |
| line-height: 18px; | |
| pointer-events: none; | |
| transition: color 0.2s, font-size 0.2s, line-height 0.2s; | |
| } | |
| input + span::after, textarea + span::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| display: block; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--matter-color-primary); | |
| transform-origin: bottom center; | |
| transform: scaleX(0); | |
| transition: transform 0.2s; | |
| } | |
| } | |
| &:hover > { | |
| input, textarea { | |
| border-bottom-color: var(--matter-onsurface--87); | |
| } | |
| } | |
| > { | |
| input:not(:focus):placeholder-shown + span, textarea:not(:focus):placeholder-shown + span { | |
| font-size: inherit; | |
| line-height: 56px; | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| } | |
| input:focus + span, textarea:focus + span { | |
| color: var(--matter-color-primary); | |
| } | |
| input:focus + span::after, textarea:focus + span::after { | |
| transform: scale(1); | |
| } | |
| input:disabled, textarea:disabled { | |
| border-bottom-color: var(--matter-onsurface--38); | |
| color: var(--matter-onsurface--38); | |
| } | |
| input:disabled + span, textarea:disabled + span { | |
| color: var(--matter-onsurface--38); | |
| } | |
| } | |
| } | |
| @media not all and (min-resolution: 0.001dpcm) { | |
| @supports (-webkit-appearance: none) { | |
| .matter-textfield-standard > { | |
| input, textarea { | |
| transition-duration: 0.1s; | |
| + span { | |
| transition-duration: 0.1s; | |
| &::after { | |
| transition-duration: 0.1s; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .matter-textfield-filled { | |
| position: relative; | |
| display: inline-block; | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > { | |
| input, textarea { | |
| display: block; | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: none; | |
| border-top: solid 24px transparent; | |
| border-bottom: solid 1px var(--matter-onsurface--60); | |
| border-radius: 4px 4px 0 0; | |
| padding: 0 12px 7px; | |
| width: 100%; | |
| height: inherit; | |
| color: var(--matter-onsurface--87); | |
| -webkit-text-fill-color: currentColor; | |
| background-color: var(--matter-onsurface--04); | |
| box-shadow: none; | |
| /* Firefox */ | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| caret-color: var(--matter-color-primary); | |
| transition: border-bottom 0.2s, background-color 0.2s; | |
| } | |
| input + span, textarea + span { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: block; | |
| box-sizing: border-box; | |
| padding: 7px 12px 0; | |
| color: var(--matter-onsurface--60); | |
| font-size: 75%; | |
| line-height: 18px; | |
| pointer-events: none; | |
| transition: color 0.2s, font-size 0.2s, line-height 0.2s; | |
| } | |
| input + span::after, textarea + span::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| display: block; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--matter-color-primary); | |
| transform-origin: bottom center; | |
| transform: scaleX(0); | |
| transition: transform 0.3s; | |
| } | |
| } | |
| &:hover > { | |
| input, textarea { | |
| border-bottom-color: var(--matter-onsurface--87); | |
| background-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.08); | |
| } | |
| } | |
| > { | |
| input:not(:focus):placeholder-shown + span, textarea:not(:focus):placeholder-shown + span { | |
| font-size: inherit; | |
| line-height: 48px; | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| } | |
| input:focus + span, textarea:focus + span { | |
| color: var(--matter-color-primary); | |
| } | |
| input:focus + span::after, textarea:focus + span::after { | |
| transform: scale(1); | |
| } | |
| input:disabled, textarea:disabled { | |
| border-bottom-color: var(--matter-onsurface--38); | |
| color: var(--matter-onsurface--38); | |
| background-color: var(--matter-onsurface--24); | |
| } | |
| input:disabled + span, textarea:disabled + span { | |
| color: var(--matter-onsurface--38); | |
| } | |
| } | |
| } | |
| @media not all and (min-resolution: 0.001dpcm) { | |
| @supports (-webkit-appearance: none) { | |
| .matter-textfield-filled > { | |
| input, textarea { | |
| transition-duration: 0.1s; | |
| + span { | |
| transition-duration: 0.1s; | |
| &::after { | |
| transition-duration: 0.1s; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .matter-textfield-outlined { | |
| --matter-safari-helper1: var(--matter-onsurface--38); | |
| --matter-safari-helper2: var(--matter-onsurface--60); | |
| --matter-safari-helper3: var(--matter-onsurface--87); | |
| --matter-safari-helper4: var(--matter-color-primary); | |
| position: relative; | |
| display: inline-block; | |
| padding-top: 6px; | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| > { | |
| input, textarea { | |
| box-sizing: border-box; | |
| margin: 0; | |
| border-style: solid; | |
| border-width: 1px; | |
| border-color: transparent var(--matter-safari-helper2) var(--matter-safari-helper2); | |
| border-radius: 4px; | |
| padding: 15px 13px 15px; | |
| width: 100%; | |
| height: inherit; | |
| color: var(--matter-onsurface--87); | |
| -webkit-text-fill-color: currentColor; | |
| background-color: transparent; | |
| box-shadow: inset 1px 0 transparent, inset -1px 0 transparent, inset 0 -1px transparent; | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| caret-color: var(--matter-color-primary); | |
| transition: border 0.2s, box-shadow 0.2s; | |
| } | |
| input:not(:focus):placeholder-shown, textarea:not(:focus):placeholder-shown { | |
| border-top-color: var(--matter-safari-helper2); | |
| } | |
| input + span, textarea + span { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| width: 100%; | |
| max-height: 100%; | |
| color: var(--matter-onsurface--60); | |
| font-size: 75%; | |
| line-height: 15px; | |
| cursor: text; | |
| transition: color 0.2s, font-size 0.2s, line-height 0.2s; | |
| } | |
| input:not(:focus):placeholder-shown + span, textarea:not(:focus):placeholder-shown + span { | |
| font-size: inherit; | |
| line-height: 68px; | |
| } | |
| input + span { | |
| &::before, &::after { | |
| content: ""; | |
| display: block; | |
| box-sizing: border-box; | |
| margin-top: 6px; | |
| border-top: solid 1px var(--matter-safari-helper2); | |
| min-width: 10px; | |
| height: 8px; | |
| pointer-events: none; | |
| box-shadow: inset 0 1px transparent; | |
| transition: border 0.2s, box-shadow 0.2s; | |
| } | |
| } | |
| textarea + span { | |
| &::before, &::after { | |
| content: ""; | |
| display: block; | |
| box-sizing: border-box; | |
| margin-top: 6px; | |
| border-top: solid 1px var(--matter-safari-helper2); | |
| min-width: 10px; | |
| height: 8px; | |
| pointer-events: none; | |
| box-shadow: inset 0 1px transparent; | |
| transition: border 0.2s, box-shadow 0.2s; | |
| } | |
| } | |
| input + span::before, textarea + span::before { | |
| margin-right: 4px; | |
| border-left: solid 1px transparent; | |
| border-radius: 4px 0; | |
| } | |
| input + span::after, textarea + span::after { | |
| flex-grow: 1; | |
| margin-left: 4px; | |
| border-right: solid 1px transparent; | |
| border-radius: 0 4px; | |
| } | |
| input:not(:focus):placeholder-shown + span::before, textarea:not(:focus):placeholder-shown + span::before, input:not(:focus):placeholder-shown + span::after, textarea:not(:focus):placeholder-shown + span::after { | |
| border-top-color: transparent; | |
| } | |
| } | |
| &:hover > { | |
| input, textarea { | |
| border-color: transparent var(--matter-safari-helper3) var(--matter-safari-helper3); | |
| } | |
| input + span::before, textarea + span::before, input + span::after, textarea + span::after { | |
| border-top-color: var(--matter-safari-helper3); | |
| } | |
| input:not(:focus):placeholder-shown, textarea:not(:focus):placeholder-shown { | |
| border-color: var(--matter-safari-helper3); | |
| } | |
| } | |
| > { | |
| input:focus, textarea:focus { | |
| border-color: transparent var(--matter-safari-helper4) var(--matter-safari-helper4); | |
| box-shadow: inset 1px 0 var(--matter-safari-helper4), inset -1px 0 var(--matter-safari-helper4), inset 0 -1px var(--matter-safari-helper4); | |
| outline: none; | |
| } | |
| input:focus + span, textarea:focus + span { | |
| color: var(--matter-color-primary); | |
| } | |
| input:focus + span { | |
| &::before, &::after { | |
| border-top-color: var(--matter-safari-helper4) !important; | |
| box-shadow: inset 0 1px var(--matter-safari-helper4); | |
| } | |
| } | |
| textarea:focus + span { | |
| &::before, &::after { | |
| border-top-color: var(--matter-safari-helper4) !important; | |
| box-shadow: inset 0 1px var(--matter-safari-helper4); | |
| } | |
| } | |
| input:disabled, textarea:disabled { | |
| border-color: transparent var(--matter-safari-helper1) var(--matter-safari-helper1) !important; | |
| color: var(--matter-onsurface--38); | |
| pointer-events: none; | |
| + span { | |
| border-color: transparent var(--matter-safari-helper1) var(--matter-safari-helper1) !important; | |
| color: var(--matter-onsurface--38); | |
| pointer-events: none; | |
| } | |
| } | |
| input:disabled + span { | |
| &::before, &::after { | |
| border-top-color: var(--matter-safari-helper1) !important; | |
| } | |
| } | |
| textarea:disabled + span { | |
| &::before, &::after { | |
| border-top-color: var(--matter-safari-helper1) !important; | |
| } | |
| } | |
| input:disabled:placeholder-shown, textarea:disabled:placeholder-shown { | |
| border-top-color: var(--matter-safari-helper1) !important; | |
| + span { | |
| border-top-color: var(--matter-safari-helper1) !important; | |
| } | |
| } | |
| input:disabled:placeholder-shown + span { | |
| &::before, &::after { | |
| border-top-color: transparent !important; | |
| } | |
| } | |
| textarea:disabled:placeholder-shown + span { | |
| &::before, &::after { | |
| border-top-color: transparent !important; | |
| } | |
| } | |
| } | |
| } | |
| @media not all and (min-resolution: 0.001dpcm) { | |
| @supports (-webkit-appearance: none) { | |
| .matter-textfield-outlined > { | |
| input, textarea { | |
| transition-duration: 0.1s; | |
| + span { | |
| transition-duration: 0.1s; | |
| } | |
| } | |
| input + span { | |
| &::before, &::after { | |
| transition-duration: 0.1s; | |
| } | |
| } | |
| textarea + span { | |
| &::before, &::after { | |
| transition-duration: 0.1s; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .matter-tooltip, .matter-tooltip-top { | |
| z-index: 10; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| font-family: var(--matter-font-family); | |
| font-size: 10px; | |
| font-weight: 400; | |
| line-height: 16px; | |
| white-space: nowrap; | |
| text-transform: none; | |
| text-align: center; | |
| pointer-events: none; | |
| } | |
| .matter-tooltip { | |
| bottom: -40px; | |
| } | |
| .matter-tooltip-top { | |
| top: -40px; | |
| } | |
| .matter-tooltip > span, .matter-tooltip-top > span { | |
| position: -webkit-sticky; | |
| position: sticky; | |
| left: 0; | |
| right: 0; | |
| display: inline-block; | |
| margin: 0 -100vw; | |
| border: solid 8px transparent; | |
| border-radius: 12px; | |
| padding: 4px 8px; | |
| color: var(--matter-surface); | |
| background-clip: padding-box; | |
| background-image: linear-gradient(var(--matter-surface--34), var(--matter-surface--34)); | |
| background-color: var(--matter-onsurface--85); | |
| transform: scale(0); | |
| opacity: 0; | |
| pointer-events: auto; | |
| transition: transform 0.075s, opacity 0.075s; | |
| } | |
| :not(html):hover > .matter-tooltip > span, .matter-tooltip:hover > span, :not(html):hover > .matter-tooltip-top > span, .matter-tooltip-top:hover > span { | |
| transform: scale(1); | |
| opacity: 1; | |
| transition: transform 0.15s, opacity 0.15s; | |
| } | |
| :focus-within > { | |
| .matter-tooltip > span, .matter-tooltip-top > span { | |
| transform: scale(1); | |
| opacity: 1; | |
| transition: transform 0.15s, opacity 0.15s; | |
| } | |
| } | |
| /* Non-desktop */ | |
| @media (pointer: coarse), (hover: none) { | |
| .matter-tooltip, .matter-tooltip-top { | |
| font-size: 14px; | |
| line-height: 20px; | |
| } | |
| .matter-tooltip { | |
| bottom: -48px; | |
| } | |
| .matter-tooltip-top { | |
| top: -48px; | |
| } | |
| .matter-tooltip > span, .matter-tooltip-top > span { | |
| padding: 6px 16px; | |
| } | |
| } | |
| /** | |
| * Yahya Erturan Add Rounded Buttons | |
| */ | |
| button.matter-button-contained.matter-rounded, | |
| button.matter-button-text.matter-rounded, | |
| a.matter-button-text.matter-rounded { | |
| border-radius: 50% 50%; | |
| display: inline-flex; | |
| min-width: 36px; | |
| padding: 0; | |
| & > i.zmdi { | |
| font-size: 1.5rem; | |
| margin: 0 auto; | |
| vertical-align: middle; | |
| } | |
| } | |
| .matter-h1 { | |
| font-family: var(--matter-font-family); | |
| font-size: 96px; | |
| font-weight: 300; | |
| letter-spacing: -1.5px; | |
| line-height: 120px; | |
| } | |
| .matter-h2 { | |
| font-family: var(--matter-font-family); | |
| font-size: 60px; | |
| font-weight: 300; | |
| letter-spacing: -0.5px; | |
| line-height: 80px; | |
| } | |
| .matter-h3 { | |
| font-family: var(--matter-font-family); | |
| font-size: 48px; | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| line-height: 64px; | |
| } | |
| .matter-h4 { | |
| font-family: var(--matter-font-family); | |
| font-size: 34px; | |
| font-weight: 400; | |
| letter-spacing: 0.25px; | |
| line-height: 48px; | |
| } | |
| .matter-h5 { | |
| font-family: var(--matter-font-family); | |
| font-size: 24px; | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| line-height: 36px; | |
| } | |
| .matter-h6 { | |
| font-family: var(--matter-font-family); | |
| font-size: 20px; | |
| font-weight: 500; | |
| letter-spacing: 0.15px; | |
| line-height: 28px; | |
| } | |
| .matter-subtitle1 { | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| font-weight: 400; | |
| letter-spacing: 0.15px; | |
| line-height: 24px; | |
| } | |
| .matter-subtitle2 { | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 0.1px; | |
| line-height: 20px; | |
| } | |
| .matter-body1 { | |
| font-family: var(--matter-font-family); | |
| font-size: 16px; | |
| font-weight: 400; | |
| letter-spacing: 0.5px; | |
| line-height: 24px; | |
| } | |
| .matter-body2 { | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 400; | |
| letter-spacing: 0.25px; | |
| line-height: 20px; | |
| } | |
| .matter-button { | |
| font-family: var(--matter-font-family); | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 1.25px; | |
| text-transform: uppercase; | |
| line-height: 20px; | |
| } | |
| .matter-caption { | |
| font-family: var(--matter-font-family); | |
| font-size: 12px; | |
| font-weight: 400; | |
| letter-spacing: 0.4px; | |
| line-height: 20px; | |
| } | |
| .matter-overline { | |
| font-family: var(--matter-font-family); | |
| font-size: 10px; | |
| font-weight: 400; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| line-height: 16px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment