CSS-választók az Orbital téma Bekezdés és Szakasz mezőihez

Ez a fejezet az Orbital témájú űrlapok Bekezdés és Szakasz mezőinek stílusozását írja le. A régebbi, 2.5-ös témájú űrlapokra nem érvényes. A hatókörök (minden űrlap, egy űrlap, egy mező) és az azonosítók jelölése ugyanaz, mint a választós mezők fejezetében: a 112 az űrlap, a 4 a mező azonosítója a példákban.

Bekezdés mező

A Bekezdés mező (belső néven textarea) többsoros szövegbeviteli mezőt jelenít meg hosszabb szövegekhez. Ha be van kapcsolva a Formázott szöveges szerkesztő használata, a sima szövegdoboz helyett a TinyMCE szerkesztő jelenhet meg, mindkettő megkapja a keretrendszer stílusát. Ha a mezőn meg van adva a Maximális karakterszám, a beviteli mező alatt karakterszámláló látszik. A mező mérete (kicsi, közepes, nagy) a szövegdoboz magasságát adja.

Tároló

A mező osztályai: .gfield és .gfield--type-textarea, az azonosítója field_{űrlap}_{mező} alakú (például field_5_3).

.gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-textarea-radius: 6px;
}

A beviteli mező

A szövegdoboz a keretrendszer általános beviteli változóit örökli, ezeket a mező vagy az űrlap hatókörében állítsd. A kifejezetten a szövegdobozra vonatkozó változók:

Változó	Mit szabályoz
--gf-ctrl-textarea-height	a szövegdoboz magassága
--gf-ctrl-textarea-radius	a sarkok lekerekítése
--gf-ctrl-textarea-line-height	a sormagasság
--gf-ctrl-textarea-padding-y	a függőleges belső távolság
--gf-ctrl-textarea-resize	átméretezhetőség (például vertical)

A keretrendszer a magasságot a block-size tulajdonsággal és a --gf-ctrl-textarea-height változóval adja meg. Mivel a szövegdoboznak HTML rows attribútuma is van, egyes böngészők a sorokból számolt méretet részesítik előnyben a változóval szemben. Hogy a --gf-ctrl-textarea-height megbízhatóan érvényesüljön, adj a szövegdobozra kifejezett min-block-size értéket is: ez felülírja a sorokból számolt minimumot.

.gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-textarea-height: 150px;
  --gf-ctrl-textarea-radius: 6px;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-textarea-height: 180px;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
  min-block-size: 120px;
}

Ha a formázott szöveges szerkesztő be van kapcsolva, a látható szerkesztőfelület egy iframe-ben van. A szövegdobozra írt stílus csak akkor hat közvetlenül, ha a szerkesztő ki van kapcsolva, bekapcsolt szerkesztőnél a stílus többnyire a mögöttes, rejtett szövegdobozt vagy a TinyMCE tárolóját érinti.

Karakterszámláló

Ha a Maximális karakterszám be van állítva, a szövegdoboz alatt számláló jelenik meg (például „0 of 500 max characters” jellegű szöveg). A számláló elemei: .charleft, .ginput_counter és .gfield_description. A határ közelében a .warningTextareaInfo osztályt is megkaphatja.

.gform-theme--framework .gfield--type-textarea .charleft,
.gform-theme--framework .gfield--type-textarea .ginput_counter {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  margin-top: 8px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea .charleft {
  --gf-ctrl-desc-color: #4b5563;
  --gf-ctrl-desc-font-size: 13px;
}

.gform-theme--framework .gfield--type-textarea .charleft.warningTextareaInfo {
  --gf-ctrl-desc-color: #112337;
}

Túllépett korlát (csak a formázott szerkesztőnél)

Ha a formázott szöveges szerkesztő be van kapcsolva, és a szöveg átlépi a maximális karakterszámot, a számláló megkapja a .ginput_counter_error osztályt. A sima szövegdobozos mezők ezt az osztályt nem használják.

.gform-theme--framework .gfield--type-textarea .charleft.ginput_counter_error {
  --gf-ctrl-desc-color: #c02b0a;
}

Mezőcímke és leírás

A fő címke a szokásos .gform-field-label. A leírás a beállított elhelyezéstől függően a beviteli mező fölött vagy alatt jelenik meg; a színét és a méretét a --gf-ctrl-desc-color és a --gf-ctrl-desc-font-size változó adja.

.gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
  --gf-ctrl-label-color-primary: #112337;
  --gf-ctrl-label-font-size-primary: 18px;
}

Használati példák

Kiemelő színű keret:

.gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-textarea-radius: 6px;
}

Tömör mezők egy adott oldalon (a 571 az oldal azonosítója):

.page-id-571 .gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-label-font-size-primary: 14px;
  --gf-ctrl-desc-font-size: 12px;
  --gf-ctrl-textarea-height: 100px;
}

.page-id-571 .gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
  min-block-size: 50px;
}

Egyetlen Bekezdés mező célzása:

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

Magasabb mező hosszú szövegekhez:

.gform-theme--framework .gfield--type-textarea {
  --gf-ctrl-textarea-height: 250px;
  --gf-ctrl-textarea-resize: vertical;
}

.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
  min-block-size: 120px;
}

Szakasz mező

A Szakasz mező tartalmi elválasztót ad, amellyel a mezőcsoportokat rendezheted. Megjeleníti a címet (fejlécet) és az elhagyható leírást, adatot nem gyűjt. Az Orbital témában a cím h3 elem, a régi jelölésben h2.

Az Orbital keretrendszer a .gfield--type-section * elemeket kiveszi a CSS-alaphelyzetbe állításból. Ezért a cím és a leírás a böngésző alapértelmezett vagy a saját stílusát viseli (hasonlóan a HTML mezőhöz). Emiatt a címet és a leírást közvetlen CSS-tulajdonságokkal stílusozd, nem változókkal.

Tároló

A mező osztályai: .gfield, .gfield--type-section és .gsection, az azonosítója field_{űrlap}_{mező}. A keretrendszer alul szegélyt és belső távolságot ad, ezek változói:

Változó	Mit szabályoz
--gf-field-section-border-color	a szegély színe
--gf-field-section-border-style	a szegély stílusa
--gf-field-section-border-width	a szegély vastagsága
--gf-field-section-padding-y-end	az alsó belső távolság

.gform-theme--framework .gfield--type-section {
  --gf-field-section-border-color: #204ce5;
  --gf-field-section-border-width: 2px;
  --gf-field-section-padding-y-end: 24px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
  --gf-field-section-border-color: #686e77;
  --gf-field-section-padding-y-end: 16px;
  margin-top: 24px;
  margin-bottom: 16px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-field-section-border-color: #204ce5;
  --gf-field-section-border-width: 2px;
  margin-top: 40px;
}

Cím

A cím a .gsection_title osztályt viseli:

.gform-theme--framework .gfield--type-section .gsection_title {
  color: #112337;
  font-size: 18px;
  font-weight: 600;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_title {
  color: #1a365d;
  font-size: 20px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
  color: #044ad3;
  font-size: 22px;
  font-weight: 600;
}

Leírás

Ha van leírás, a cím alatt egy .gsection_description osztályú div-ben jelenik meg:

.gform-theme--framework .gfield--type-section .gsection_description {
  color: #6b7280;
  font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_description {
  color: #4b5563;
  font-size: 15px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
  color: #64748b;
  font-size: 14px;
}

Egy adott szakasz célzása

Ha egy szakaszt másképp szeretnél formázni, mint a többit, használd a mező azonosítóját:

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
  color: #0f172a;
  font-size: 22px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
  color: #64748b;
  font-size: 15px;
}

Használati példák

Szakasz kiemelő elválasztóvonallal:

.gform-theme--framework .gfield--type-section {
  --gf-field-section-border-color: #204ce5;
  --gf-field-section-border-width: 2px;
  margin-top: 40px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
  --gf-field-section-border-color: #204ce5;
  --gf-field-section-padding-y-end: 20px;
}

Kiemelt doboz jellegű szakasz:

.gform-theme--framework .gfield--type-section.gsection {
  background-color: #f8fafc;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.gform-theme--framework .gfield--type-section .gsection_title {
  color: #112337;
  font-size: 18px;
}

.gform-theme--framework .gfield--type-section .gsection_description {
  color: #585e6a;
  font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section.gsection {
  background-color: #f1f5f9;
  padding: 20px;
  border-radius: 8px;
}