CSS: view

.instui-view — व्यू प्रिमिटिव: पृष्ठभूमि, बॉर्डर, रेडियस, शैडो, डिस्प्ले, पोजिशन, ओवरफ़्लो और कर्सर के लिए की-वैल्यू मॉडिफायर्स के साथ एक तटस्थ बॉक्स। इन सभी मॉडिफायर्स में से हर एक ग्लोबली भी उपलब्ध है (सिर्फ़ नाम से, या किसी अन्य कंपोनेंट पर चेन करके) — देखें background/border/shadow/display/position/overflow/cursor यूटिलिटीज।

Source: view.css

उपयोग

@import "@pantoken/components/components.css";
@import "@pantoken/components/view.css";

उदाहरण

<div class="instui-view -background-secondary -border-radius-medium -shadow-resting">
  A card-like surface.
</div>

मॉडिफायर

मॉडिफायर	विवरण
.-background-alert	अलर्ट सतह पृष्ठभूमि।
.-background-brand	ब्रांड सतह पृष्ठभूमि।
.-background-danger	खतरे की सतह पृष्ठभूमि।
.-background-info	सूचना सतह पृष्ठभूमि।
.-background-primary	प्राथमिक सतह पृष्ठभूमि।
.-background-primary-inverse	उल्टा प्राथमिक सतह पृष्ठभूमि।
.-background-secondary	माध्यमिक सतह पृष्ठभूमि।
.-background-success	सफलता सतह पृष्ठभूमि।
.-background-transparent	पारदर्शी पृष्ठभूमि।
.-background-warning	चेतावनी सतह पृष्ठभूमि।
.-border-color-brand	ब्रांड स्ट्रोक बॉर्डर रंग।
.-border-color-danger	त्रुटि स्ट्रोक बॉर्डर रंग।
.-border-color-info	सूचना स्ट्रोक बॉर्डर रंग।
.-border-color-primary	बेस स्ट्रोक बॉर्डर रंग।
.-border-color-success	सफलता स्ट्रोक बॉर्डर रंग।
.-border-color-warning	चेतावनी स्ट्रोक बॉर्डर रंग।
.-border-radius-circle	पूर्ण वृत्ताकार (50%) रेडियस।
.-border-radius-large	बड़ा कॉर्नर रेडियस।
.-border-radius-medium	मध्यम कॉर्नर रेडियस।
.-border-radius-pill	पिल (पूर्ण) रेडियस।
.-border-radius-small	छोटा कॉर्नर रेडियस।
.-border-width-large	बेस स्ट्रोक रंग में बड़ा ठोस बॉर्डर।
.-border-width-medium	बेस स्ट्रोक रंग में मध्यम ठोस बॉर्डर।
.-border-width-small	बेस स्ट्रोक रंग में छोटा ठोस बॉर्डर।
.-cursor-auto	cursor: auto.
.-cursor-default	cursor: default.
.-cursor-grab	cursor: grab.
.-cursor-move	cursor: move.
.-cursor-not-allowed	cursor: not-allowed.
.-cursor-pointer	cursor: pointer.
.-cursor-text	cursor: text.
.-cursor-wait	cursor: wait.
.-display-block	display: block.
.-display-flex	display: flex.
.-display-inline	display: inline.
.-display-inline-block	display: inline-block.
.-display-inline-flex	display: inline-flex.
.-display-none	display: none.
.-overflow-x-auto	overflow-x: auto.
.-overflow-x-clip	overflow-x: clip.
.-overflow-x-hidden	overflow-x: hidden.
.-overflow-x-scroll	overflow-x: scroll.
.-overflow-x-visible	overflow-x: visible.
.-overflow-y-auto	overflow-y: auto.
.-overflow-y-clip	overflow-y: clip.
.-overflow-y-hidden	overflow-y: hidden.
.-overflow-y-scroll	overflow-y: scroll.
.-overflow-y-visible	overflow-y: visible.
.-position-absolute	position: absolute.
.-position-fixed	position: fixed.
.-position-relative	position: relative.
.-position-static	position: static.
.-position-sticky	position: sticky.
.-shadow-above	ऊपर की दिशा (Above) उठाव छाया।
.-shadow-resting	विश्राम (Resting) उठाव छाया।
.-shadow-topmost	सबसे ऊपर (Topmost) उठाव छाया।

उपयोग किये गए टोकन

Token	प्रकार	मान
--instui-border-radius-full	<length>	999rem
--instui-border-radius-lg	<length>	0.75rem
--instui-border-radius-md	<length>	0.5rem
--instui-border-radius-sm	<length>	0.25rem
--instui-border-width-lg	<length>	0.25rem
--instui-border-width-md	<length>	0.125rem
--instui-border-width-sm	<length>	0.0625rem
--instui-color-stroke-base	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-color-stroke-brand	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-error	<color>	#E62429
--instui-color-stroke-info	<color>	#2B7ABC
--instui-color-stroke-success	<color>	#03893D
--instui-color-stroke-warning	<color>	#CF4A00
--instui-component-view-background-alert	<color>	#2B7ABC
--instui-component-view-background-brand	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-view-background-danger	<color>	#E62429
--instui-component-view-background-info	<color>	#2B7ABC
--instui-component-view-background-primary	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-view-background-primary-inverse	<color>	LightDarklight-dark(#334450, #F2F4F5)
--instui-component-view-background-secondary	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-component-view-background-success	<color>	#03893D
--instui-component-view-background-warning	<color>	#CF4A00
--instui-elevation-above	none | <shadow>#	—
--instui-elevation-resting	none | <shadow>#	—
--instui-elevation-topmost	none | <shadow>#	—