mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-15 11:59:39 +03:00
v5: Floating labels (#30449)
* v5: Promote floating labels example to component - Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example * Update floating labels to support .form-select, make inputs and selects more consistent - To do this, I made the .form-control and .form-select consistent in min-height vs height - Removed some unused variables now - Updated -color to be the -color because I don't know why this was any different before - Update page to include some examples for layout, validation, and value - Rewrite styles to not modify padding, but instead transform and opacity * Streamline and bulletproof some things - Apply some optimizations from code review - Removed unecessary properties from the label - Add some comments for what properties are required - Move from fixed height for labels to height 100% so we can support textareas - Improve docs a little bit, add ToC * Move some values to variables, switch from scaling font-size to scale, update transforms * Bring over changes from #30966 and add to them to tighten things up * Delete the now unused example images * Fix typo * Allowlist the calc function * Add transform-origin, update transform values * Test out autofill fix * Fix linter issue * Mention it in the migration guide * Bump bundlesize * Add one more variable per review * Shave .25rem off the height Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
@@ -30,7 +30,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.min.css",
|
||||
"maxSize": "21.5 kB"
|
||||
"maxSize": "21.6 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.js",
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+8
-2
@@ -11,9 +11,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@@ -183,7 +189,7 @@ a {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #024dbc;
|
||||
color: #0a58ca;
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+94
-11
@@ -48,6 +48,14 @@
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
@@ -242,7 +250,7 @@
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: #343a40 !important;
|
||||
border-color: #212529 !important;
|
||||
}
|
||||
|
||||
.border-white {
|
||||
@@ -899,6 +907,38 @@
|
||||
padding-left: 3rem !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
font-size: calc(1.325rem + 0.9vw) !important;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
font-size: calc(1.3rem + 0.6vw) !important;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
font-size: calc(1.275rem + 0.3vw) !important;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.fst-italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.fst-normal {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.font-weight-light {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
@@ -972,7 +1012,7 @@
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: #343a40 !important;
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
@@ -1044,7 +1084,7 @@
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: #343a40 !important;
|
||||
background-color: #212529 !important;
|
||||
}
|
||||
|
||||
.bg-body {
|
||||
@@ -1083,14 +1123,6 @@
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.font-italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.text-break {
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
@@ -3561,6 +3593,57 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.fs-1 {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
.fs-2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
.fs-3 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
.fs-4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.fs-sm-1 {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
.fs-sm-2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
.fs-sm-3 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
.fs-sm-4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.fs-md-1 {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
.fs-md-2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
.fs-md-3 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
.fs-md-4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.fs-lg-1 {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
.fs-lg-2 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
.fs-lg-3 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
.fs-lg-4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.d-print-inline {
|
||||
display: inline !important;
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+431
-228
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+8
-15
@@ -975,17 +975,6 @@
|
||||
top: element.offsetTop,
|
||||
left: element.offsetLeft
|
||||
};
|
||||
},
|
||||
toggleClass: function toggleClass(element, className) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.classList.contains(className)) {
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
element.classList.add(className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -4844,8 +4833,10 @@
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
|
||||
};
|
||||
|
||||
@@ -4868,8 +4859,10 @@
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+8
-15
@@ -971,17 +971,6 @@ var Manipulator = {
|
||||
top: element.offsetTop,
|
||||
left: element.offsetLeft
|
||||
};
|
||||
},
|
||||
toggleClass: function toggleClass(element, className) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.classList.contains(className)) {
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
element.classList.add(className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2226,8 +2215,10 @@ var Dropdown = /*#__PURE__*/function () {
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
|
||||
};
|
||||
|
||||
@@ -2250,8 +2241,10 @@ var Dropdown = /*#__PURE__*/function () {
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+8
-15
@@ -979,17 +979,6 @@
|
||||
top: element.offsetTop,
|
||||
left: element.offsetLeft
|
||||
};
|
||||
},
|
||||
toggleClass: function toggleClass(element, className) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.classList.contains(className)) {
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
element.classList.add(className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2234,8 +2223,10 @@
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
|
||||
};
|
||||
|
||||
@@ -2258,8 +2249,10 @@
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
|
||||
Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW$1);
|
||||
|
||||
EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"data.js","sources":["../../src/dom/data.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/data.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst mapData = (() => {\n const storeData = {}\n let id = 1\n return {\n set(element, key, data) {\n if (typeof element.bsKey === 'undefined') {\n element.bsKey = {\n key,\n id\n }\n id++\n }\n\n storeData[element.bsKey.id] = data\n },\n get(element, key) {\n if (!element || typeof element.bsKey === 'undefined') {\n return null\n }\n\n const keyProperties = element.bsKey\n if (keyProperties.key === key) {\n return storeData[keyProperties.id]\n }\n\n return null\n },\n delete(element, key) {\n if (typeof element.bsKey === 'undefined') {\n return\n }\n\n const keyProperties = element.bsKey\n if (keyProperties.key === key) {\n delete storeData[keyProperties.id]\n delete element.bsKey\n }\n }\n }\n})()\n\nconst Data = {\n setData(instance, key, data) {\n mapData.set(instance, key, data)\n },\n getData(instance, key) {\n return mapData.get(instance, key)\n },\n removeData(instance, key) {\n mapData.delete(instance, key)\n }\n}\n\nexport default Data\n"],"names":["mapData","storeData","id","set","element","key","data","bsKey","get","keyProperties","delete","Data","setData","instance","getData","removeData"],"mappings":";;;;;;;;;;;EAAA;;;;;;;EAOA;;;;;EAMA,IAAMA,OAAO,GAAI,YAAM;EACrB,MAAMC,SAAS,GAAG,EAAlB;EACA,MAAIC,EAAE,GAAG,CAAT;EACA,SAAO;EACLC,IAAAA,GADK,eACDC,OADC,EACQC,GADR,EACaC,IADb,EACmB;EACtB,UAAI,OAAOF,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxCH,QAAAA,OAAO,CAACG,KAAR,GAAgB;EACdF,UAAAA,GAAG,EAAHA,GADc;EAEdH,UAAAA,EAAE,EAAFA;EAFc,SAAhB;EAIAA,QAAAA,EAAE;EACH;;EAEDD,MAAAA,SAAS,CAACG,OAAO,CAACG,KAAR,CAAcL,EAAf,CAAT,GAA8BI,IAA9B;EACD,KAXI;EAYLE,IAAAA,GAZK,eAYDJ,OAZC,EAYQC,GAZR,EAYa;EAChB,UAAI,CAACD,OAAD,IAAY,OAAOA,OAAO,CAACG,KAAf,KAAyB,WAAzC,EAAsD;EACpD,eAAO,IAAP;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACD;;EAED,aAAO,IAAP;EACD,KAvBI;EAwBLQ,IAAAA,MAxBK,mBAwBEN,OAxBF,EAwBWC,GAxBX,EAwBgB;EACnB,UAAI,OAAOD,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxC;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACA,eAAOE,OAAO,CAACG,KAAf;EACD;EACF;EAlCI,GAAP;EAoCD,CAvCe,EAAhB;;MAyCMI,IAAI,GAAG;EACXC,EAAAA,OADW,mBACHC,QADG,EACOR,GADP,EACYC,IADZ,EACkB;EAC3BN,IAAAA,OAAO,CAACG,GAAR,CAAYU,QAAZ,EAAsBR,GAAtB,EAA2BC,IAA3B;EACD,GAHU;EAIXQ,EAAAA,OAJW,mBAIHD,QAJG,EAIOR,GAJP,EAIY;EACrB,WAAOL,OAAO,CAACQ,GAAR,CAAYK,QAAZ,EAAsBR,GAAtB,CAAP;EACD,GANU;EAOXU,EAAAA,UAPW,sBAOAF,QAPA,EAOUR,GAPV,EAOe;EACxBL,IAAAA,OAAO,CAACU,MAAR,CAAeG,QAAf,EAAyBR,GAAzB;EACD;EATU;;;;;;;;"}
|
||||
{"version":3,"file":"data.js","sources":["../../src/dom/data.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/data.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst mapData = (() => {\n const storeData = {}\n let id = 1\n return {\n set(element, key, data) {\n if (typeof element.bsKey === 'undefined') {\n element.bsKey = {\n key,\n id\n }\n id++\n }\n\n storeData[element.bsKey.id] = data\n },\n get(element, key) {\n if (!element || typeof element.bsKey === 'undefined') {\n return null\n }\n\n const keyProperties = element.bsKey\n if (keyProperties.key === key) {\n return storeData[keyProperties.id]\n }\n\n return null\n },\n delete(element, key) {\n if (typeof element.bsKey === 'undefined') {\n return\n }\n\n const keyProperties = element.bsKey\n if (keyProperties.key === key) {\n delete storeData[keyProperties.id]\n delete element.bsKey\n }\n }\n }\n})()\n\nconst Data = {\n setData(instance, key, data) {\n mapData.set(instance, key, data)\n },\n getData(instance, key) {\n return mapData.get(instance, key)\n },\n removeData(instance, key) {\n mapData.delete(instance, key)\n }\n}\n\nexport default Data\n"],"names":["mapData","storeData","id","set","element","key","data","bsKey","get","keyProperties","delete","Data","setData","instance","getData","removeData"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;EAEA,IAAMA,OAAO,GAAI,YAAM;EACrB,MAAMC,SAAS,GAAG,EAAlB;EACA,MAAIC,EAAE,GAAG,CAAT;EACA,SAAO;EACLC,IAAAA,GADK,eACDC,OADC,EACQC,GADR,EACaC,IADb,EACmB;EACtB,UAAI,OAAOF,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxCH,QAAAA,OAAO,CAACG,KAAR,GAAgB;EACdF,UAAAA,GAAG,EAAHA,GADc;EAEdH,UAAAA,EAAE,EAAFA;EAFc,SAAhB;EAIAA,QAAAA,EAAE;EACH;;EAEDD,MAAAA,SAAS,CAACG,OAAO,CAACG,KAAR,CAAcL,EAAf,CAAT,GAA8BI,IAA9B;EACD,KAXI;EAYLE,IAAAA,GAZK,eAYDJ,OAZC,EAYQC,GAZR,EAYa;EAChB,UAAI,CAACD,OAAD,IAAY,OAAOA,OAAO,CAACG,KAAf,KAAyB,WAAzC,EAAsD;EACpD,eAAO,IAAP;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACD;;EAED,aAAO,IAAP;EACD,KAvBI;EAwBLQ,IAAAA,MAxBK,mBAwBEN,OAxBF,EAwBWC,GAxBX,EAwBgB;EACnB,UAAI,OAAOD,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxC;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACA,eAAOE,OAAO,CAACG,KAAf;EACD;EACF;EAlCI,GAAP;EAoCD,CAvCe,EAAhB;;MAyCMI,IAAI,GAAG;EACXC,EAAAA,OADW,mBACHC,QADG,EACOR,GADP,EACYC,IADZ,EACkB;EAC3BN,IAAAA,OAAO,CAACG,GAAR,CAAYU,QAAZ,EAAsBR,GAAtB,EAA2BC,IAA3B;EACD,GAHU;EAIXQ,EAAAA,OAJW,mBAIHD,QAJG,EAIOR,GAJP,EAIY;EACrB,WAAOL,OAAO,CAACQ,GAAR,CAAYK,QAAZ,EAAsBR,GAAtB,CAAP;EACD,GANU;EAOXU,EAAAA,UAPW,sBAOAF,QAPA,EAOUR,GAPV,EAOe;EACxBL,IAAAA,OAAO,CAACU,MAAR,CAAeG,QAAf,EAAyBR,GAAzB;EACD;EATU;;;;;;;;"}
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
-11
@@ -77,17 +77,6 @@
|
||||
top: element.offsetTop,
|
||||
left: element.offsetLeft
|
||||
};
|
||||
},
|
||||
toggleClass: function toggleClass(element, className) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.classList.contains(className)) {
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
element.classList.add(className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"manipulator.js","sources":["../../src/dom/manipulator.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/manipulator.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nfunction normalizeData(val) {\n if (val === 'true') {\n return true\n }\n\n if (val === 'false') {\n return false\n }\n\n if (val === Number(val).toString()) {\n return Number(val)\n }\n\n if (val === '' || val === 'null') {\n return null\n }\n\n return val\n}\n\nfunction normalizeDataKey(key) {\n return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)\n}\n\nconst Manipulator = {\n setDataAttribute(element, key, value) {\n element.setAttribute(`data-${normalizeDataKey(key)}`, value)\n },\n\n removeDataAttribute(element, key) {\n element.removeAttribute(`data-${normalizeDataKey(key)}`)\n },\n\n getDataAttributes(element) {\n if (!element) {\n return {}\n }\n\n const attributes = {\n ...element.dataset\n }\n\n Object.keys(attributes).forEach(key => {\n attributes[key] = normalizeData(attributes[key])\n })\n\n return attributes\n },\n\n getDataAttribute(element, key) {\n return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))\n },\n\n offset(element) {\n const rect = element.getBoundingClientRect()\n\n return {\n top: rect.top + document.body.scrollTop,\n left: rect.left + document.body.scrollLeft\n }\n },\n\n position(element) {\n return {\n top: element.offsetTop,\n left: element.offsetLeft\n }\n },\n\n toggleClass(element, className) {\n if (!element) {\n return\n }\n\n if (element.classList.contains(className)) {\n element.classList.remove(className)\n } else {\n element.classList.add(className)\n }\n }\n}\n\nexport default Manipulator\n"],"names":["normalizeData","val","Number","toString","normalizeDataKey","key","replace","chr","toLowerCase","Manipulator","setDataAttribute","element","value","setAttribute","removeDataAttribute","removeAttribute","getDataAttributes","attributes","dataset","Object","keys","forEach","getDataAttribute","getAttribute","offset","rect","getBoundingClientRect","top","document","body","scrollTop","left","scrollLeft","position","offsetTop","offsetLeft","toggleClass","className","classList","contains","remove","add"],"mappings":";;;;;;;;;;;;;EAAA;;;;;;EAOA,SAASA,aAAT,CAAuBC,GAAvB,EAA4B;EAC1B,MAAIA,GAAG,KAAK,MAAZ,EAAoB;EAClB,WAAO,IAAP;EACD;;EAED,MAAIA,GAAG,KAAK,OAAZ,EAAqB;EACnB,WAAO,KAAP;EACD;;EAED,MAAIA,GAAG,KAAKC,MAAM,CAACD,GAAD,CAAN,CAAYE,QAAZ,EAAZ,EAAoC;EAClC,WAAOD,MAAM,CAACD,GAAD,CAAb;EACD;;EAED,MAAIA,GAAG,KAAK,EAAR,IAAcA,GAAG,KAAK,MAA1B,EAAkC;EAChC,WAAO,IAAP;EACD;;EAED,SAAOA,GAAP;EACD;;EAED,SAASG,gBAAT,CAA0BC,GAA1B,EAA+B;EAC7B,SAAOA,GAAG,CAACC,OAAJ,CAAY,QAAZ,EAAsB,UAAAC,GAAG;EAAA,iBAAQA,GAAG,CAACC,WAAJ,EAAR;EAAA,GAAzB,CAAP;EACD;;MAEKC,WAAW,GAAG;EAClBC,EAAAA,gBADkB,4BACDC,OADC,EACQN,GADR,EACaO,KADb,EACoB;EACpCD,IAAAA,OAAO,CAACE,YAAR,WAA6BT,gBAAgB,CAACC,GAAD,CAA7C,EAAsDO,KAAtD;EACD,GAHiB;EAKlBE,EAAAA,mBALkB,+BAKEH,OALF,EAKWN,GALX,EAKgB;EAChCM,IAAAA,OAAO,CAACI,eAAR,WAAgCX,gBAAgB,CAACC,GAAD,CAAhD;EACD,GAPiB;EASlBW,EAAAA,iBATkB,6BASAL,OATA,EASS;EACzB,QAAI,CAACA,OAAL,EAAc;EACZ,aAAO,EAAP;EACD;;EAED,QAAMM,UAAU,gBACXN,OAAO,CAACO,OADG,CAAhB;;EAIAC,IAAAA,MAAM,CAACC,IAAP,CAAYH,UAAZ,EAAwBI,OAAxB,CAAgC,UAAAhB,GAAG,EAAI;EACrCY,MAAAA,UAAU,CAACZ,GAAD,CAAV,GAAkBL,aAAa,CAACiB,UAAU,CAACZ,GAAD,CAAX,CAA/B;EACD,KAFD;EAIA,WAAOY,UAAP;EACD,GAvBiB;EAyBlBK,EAAAA,gBAzBkB,4BAyBDX,OAzBC,EAyBQN,GAzBR,EAyBa;EAC7B,WAAOL,aAAa,CAACW,OAAO,CAACY,YAAR,WAA6BnB,gBAAgB,CAACC,GAAD,CAA7C,CAAD,CAApB;EACD,GA3BiB;EA6BlBmB,EAAAA,MA7BkB,kBA6BXb,OA7BW,EA6BF;EACd,QAAMc,IAAI,GAAGd,OAAO,CAACe,qBAAR,EAAb;EAEA,WAAO;EACLC,MAAAA,GAAG,EAAEF,IAAI,CAACE,GAAL,GAAWC,QAAQ,CAACC,IAAT,CAAcC,SADzB;EAELC,MAAAA,IAAI,EAAEN,IAAI,CAACM,IAAL,GAAYH,QAAQ,CAACC,IAAT,CAAcG;EAF3B,KAAP;EAID,GApCiB;EAsClBC,EAAAA,QAtCkB,oBAsCTtB,OAtCS,EAsCA;EAChB,WAAO;EACLgB,MAAAA,GAAG,EAAEhB,OAAO,CAACuB,SADR;EAELH,MAAAA,IAAI,EAAEpB,OAAO,CAACwB;EAFT,KAAP;EAID,GA3CiB;EA6ClBC,EAAAA,WA7CkB,uBA6CNzB,OA7CM,EA6CG0B,SA7CH,EA6Cc;EAC9B,QAAI,CAAC1B,OAAL,EAAc;EACZ;EACD;;EAED,QAAIA,OAAO,CAAC2B,SAAR,CAAkBC,QAAlB,CAA2BF,SAA3B,CAAJ,EAA2C;EACzC1B,MAAAA,OAAO,CAAC2B,SAAR,CAAkBE,MAAlB,CAAyBH,SAAzB;EACD,KAFD,MAEO;EACL1B,MAAAA,OAAO,CAAC2B,SAAR,CAAkBG,GAAlB,CAAsBJ,SAAtB;EACD;EACF;EAvDiB;;;;;;;;"}
|
||||
{"version":3,"file":"manipulator.js","sources":["../../src/dom/manipulator.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/manipulator.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nfunction normalizeData(val) {\n if (val === 'true') {\n return true\n }\n\n if (val === 'false') {\n return false\n }\n\n if (val === Number(val).toString()) {\n return Number(val)\n }\n\n if (val === '' || val === 'null') {\n return null\n }\n\n return val\n}\n\nfunction normalizeDataKey(key) {\n return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)\n}\n\nconst Manipulator = {\n setDataAttribute(element, key, value) {\n element.setAttribute(`data-${normalizeDataKey(key)}`, value)\n },\n\n removeDataAttribute(element, key) {\n element.removeAttribute(`data-${normalizeDataKey(key)}`)\n },\n\n getDataAttributes(element) {\n if (!element) {\n return {}\n }\n\n const attributes = {\n ...element.dataset\n }\n\n Object.keys(attributes).forEach(key => {\n attributes[key] = normalizeData(attributes[key])\n })\n\n return attributes\n },\n\n getDataAttribute(element, key) {\n return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))\n },\n\n offset(element) {\n const rect = element.getBoundingClientRect()\n\n return {\n top: rect.top + document.body.scrollTop,\n left: rect.left + document.body.scrollLeft\n }\n },\n\n position(element) {\n return {\n top: element.offsetTop,\n left: element.offsetLeft\n }\n }\n}\n\nexport default Manipulator\n"],"names":["normalizeData","val","Number","toString","normalizeDataKey","key","replace","chr","toLowerCase","Manipulator","setDataAttribute","element","value","setAttribute","removeDataAttribute","removeAttribute","getDataAttributes","attributes","dataset","Object","keys","forEach","getDataAttribute","getAttribute","offset","rect","getBoundingClientRect","top","document","body","scrollTop","left","scrollLeft","position","offsetTop","offsetLeft"],"mappings":";;;;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EAEA,SAASA,aAAT,CAAuBC,GAAvB,EAA4B;EAC1B,MAAIA,GAAG,KAAK,MAAZ,EAAoB;EAClB,WAAO,IAAP;EACD;;EAED,MAAIA,GAAG,KAAK,OAAZ,EAAqB;EACnB,WAAO,KAAP;EACD;;EAED,MAAIA,GAAG,KAAKC,MAAM,CAACD,GAAD,CAAN,CAAYE,QAAZ,EAAZ,EAAoC;EAClC,WAAOD,MAAM,CAACD,GAAD,CAAb;EACD;;EAED,MAAIA,GAAG,KAAK,EAAR,IAAcA,GAAG,KAAK,MAA1B,EAAkC;EAChC,WAAO,IAAP;EACD;;EAED,SAAOA,GAAP;EACD;;EAED,SAASG,gBAAT,CAA0BC,GAA1B,EAA+B;EAC7B,SAAOA,GAAG,CAACC,OAAJ,CAAY,QAAZ,EAAsB,UAAAC,GAAG;EAAA,iBAAQA,GAAG,CAACC,WAAJ,EAAR;EAAA,GAAzB,CAAP;EACD;;MAEKC,WAAW,GAAG;EAClBC,EAAAA,gBADkB,4BACDC,OADC,EACQN,GADR,EACaO,KADb,EACoB;EACpCD,IAAAA,OAAO,CAACE,YAAR,WAA6BT,gBAAgB,CAACC,GAAD,CAA7C,EAAsDO,KAAtD;EACD,GAHiB;EAKlBE,EAAAA,mBALkB,+BAKEH,OALF,EAKWN,GALX,EAKgB;EAChCM,IAAAA,OAAO,CAACI,eAAR,WAAgCX,gBAAgB,CAACC,GAAD,CAAhD;EACD,GAPiB;EASlBW,EAAAA,iBATkB,6BASAL,OATA,EASS;EACzB,QAAI,CAACA,OAAL,EAAc;EACZ,aAAO,EAAP;EACD;;EAED,QAAMM,UAAU,gBACXN,OAAO,CAACO,OADG,CAAhB;;EAIAC,IAAAA,MAAM,CAACC,IAAP,CAAYH,UAAZ,EAAwBI,OAAxB,CAAgC,UAAAhB,GAAG,EAAI;EACrCY,MAAAA,UAAU,CAACZ,GAAD,CAAV,GAAkBL,aAAa,CAACiB,UAAU,CAACZ,GAAD,CAAX,CAA/B;EACD,KAFD;EAIA,WAAOY,UAAP;EACD,GAvBiB;EAyBlBK,EAAAA,gBAzBkB,4BAyBDX,OAzBC,EAyBQN,GAzBR,EAyBa;EAC7B,WAAOL,aAAa,CAACW,OAAO,CAACY,YAAR,WAA6BnB,gBAAgB,CAACC,GAAD,CAA7C,CAAD,CAApB;EACD,GA3BiB;EA6BlBmB,EAAAA,MA7BkB,kBA6BXb,OA7BW,EA6BF;EACd,QAAMc,IAAI,GAAGd,OAAO,CAACe,qBAAR,EAAb;EAEA,WAAO;EACLC,MAAAA,GAAG,EAAEF,IAAI,CAACE,GAAL,GAAWC,QAAQ,CAACC,IAAT,CAAcC,SADzB;EAELC,MAAAA,IAAI,EAAEN,IAAI,CAACM,IAAL,GAAYH,QAAQ,CAACC,IAAT,CAAcG;EAF3B,KAAP;EAID,GApCiB;EAsClBC,EAAAA,QAtCkB,oBAsCTtB,OAtCS,EAsCA;EAChB,WAAO;EACLgB,MAAAA,GAAG,EAAEhB,OAAO,CAACuB,SADR;EAELH,MAAAA,IAAI,EAAEpB,OAAO,CAACwB;EAFT,KAAP;EAID;EA3CiB;;;;;;;;"}
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"selector-engine.js","sources":["../../src/dom/selector-engine.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/selector-engine.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { find as findFn, findOne } from './polyfill'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst NODE_TEXT = 3\n\nconst SelectorEngine = {\n matches(element, selector) {\n return element.matches(selector)\n },\n\n find(selector, element = document.documentElement) {\n return [].concat(...findFn.call(element, selector))\n },\n\n findOne(selector, element = document.documentElement) {\n return findOne.call(element, selector)\n },\n\n children(element, selector) {\n const children = [].concat(...element.children)\n\n return children.filter(child => child.matches(selector))\n },\n\n parents(element, selector) {\n const parents = []\n\n let ancestor = element.parentNode\n\n while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) {\n if (this.matches(ancestor, selector)) {\n parents.push(ancestor)\n }\n\n ancestor = ancestor.parentNode\n }\n\n return parents\n },\n\n prev(element, selector) {\n let previous = element.previousElementSibling\n\n while (previous) {\n if (previous.matches(selector)) {\n return [previous]\n }\n\n previous = previous.previousElementSibling\n }\n\n return []\n },\n\n next(element, selector) {\n let next = element.nextElementSibling\n\n while (next) {\n if (this.matches(next, selector)) {\n return [next]\n }\n\n next = next.nextElementSibling\n }\n\n return []\n }\n}\n\nexport default SelectorEngine\n"],"names":["NODE_TEXT","SelectorEngine","matches","element","selector","find","document","documentElement","concat","findFn","call","findOne","children","filter","child","parents","ancestor","parentNode","nodeType","Node","ELEMENT_NODE","push","prev","previous","previousElementSibling","next","nextElementSibling"],"mappings":";;;;;;;;;;;EAAA;;;;;;EASA;;;;;;EAMA,IAAMA,SAAS,GAAG,CAAlB;MAEMC,cAAc,GAAG;EACrBC,EAAAA,OADqB,mBACbC,OADa,EACJC,QADI,EACM;EACzB,WAAOD,OAAO,CAACD,OAAR,CAAgBE,QAAhB,CAAP;EACD,GAHoB;EAKrBC,EAAAA,IALqB,gBAKhBD,QALgB,EAKND,OALM,EAK8B;EAAA;;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACjD,WAAO,YAAGC,MAAH,aAAaC,gBAAM,CAACC,IAAP,CAAYP,OAAZ,EAAqBC,QAArB,CAAb,CAAP;EACD,GAPoB;EASrBO,EAAAA,OATqB,mBASbP,QATa,EASHD,OATG,EASiC;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACpD,WAAOI,mBAAO,CAACD,IAAR,CAAaP,OAAb,EAAsBC,QAAtB,CAAP;EACD,GAXoB;EAarBQ,EAAAA,QAbqB,oBAaZT,OAbY,EAaHC,QAbG,EAaO;EAAA;;EAC1B,QAAMQ,QAAQ,GAAG,aAAGJ,MAAH,cAAaL,OAAO,CAACS,QAArB,CAAjB;;EAEA,WAAOA,QAAQ,CAACC,MAAT,CAAgB,UAAAC,KAAK;EAAA,aAAIA,KAAK,CAACZ,OAAN,CAAcE,QAAd,CAAJ;EAAA,KAArB,CAAP;EACD,GAjBoB;EAmBrBW,EAAAA,OAnBqB,mBAmBbZ,OAnBa,EAmBJC,QAnBI,EAmBM;EACzB,QAAMW,OAAO,GAAG,EAAhB;EAEA,QAAIC,QAAQ,GAAGb,OAAO,CAACc,UAAvB;;EAEA,WAAOD,QAAQ,IAAIA,QAAQ,CAACE,QAAT,KAAsBC,IAAI,CAACC,YAAvC,IAAuDJ,QAAQ,CAACE,QAAT,KAAsBlB,SAApF,EAA+F;EAC7F,UAAI,KAAKE,OAAL,CAAac,QAAb,EAAuBZ,QAAvB,CAAJ,EAAsC;EACpCW,QAAAA,OAAO,CAACM,IAAR,CAAaL,QAAb;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,UAApB;EACD;;EAED,WAAOF,OAAP;EACD,GAjCoB;EAmCrBO,EAAAA,IAnCqB,gBAmChBnB,OAnCgB,EAmCPC,QAnCO,EAmCG;EACtB,QAAImB,QAAQ,GAAGpB,OAAO,CAACqB,sBAAvB;;EAEA,WAAOD,QAAP,EAAiB;EACf,UAAIA,QAAQ,CAACrB,OAAT,CAAiBE,QAAjB,CAAJ,EAAgC;EAC9B,eAAO,CAACmB,QAAD,CAAP;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,sBAApB;EACD;;EAED,WAAO,EAAP;EACD,GA/CoB;EAiDrBC,EAAAA,IAjDqB,gBAiDhBtB,OAjDgB,EAiDPC,QAjDO,EAiDG;EACtB,QAAIqB,IAAI,GAAGtB,OAAO,CAACuB,kBAAnB;;EAEA,WAAOD,IAAP,EAAa;EACX,UAAI,KAAKvB,OAAL,CAAauB,IAAb,EAAmBrB,QAAnB,CAAJ,EAAkC;EAChC,eAAO,CAACqB,IAAD,CAAP;EACD;;EAEDA,MAAAA,IAAI,GAAGA,IAAI,CAACC,kBAAZ;EACD;;EAED,WAAO,EAAP;EACD;EA7DoB;;;;;;;;"}
|
||||
{"version":3,"file":"selector-engine.js","sources":["../../src/dom/selector-engine.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/selector-engine.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { find as findFn, findOne } from './polyfill'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst NODE_TEXT = 3\n\nconst SelectorEngine = {\n matches(element, selector) {\n return element.matches(selector)\n },\n\n find(selector, element = document.documentElement) {\n return [].concat(...findFn.call(element, selector))\n },\n\n findOne(selector, element = document.documentElement) {\n return findOne.call(element, selector)\n },\n\n children(element, selector) {\n const children = [].concat(...element.children)\n\n return children.filter(child => child.matches(selector))\n },\n\n parents(element, selector) {\n const parents = []\n\n let ancestor = element.parentNode\n\n while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) {\n if (this.matches(ancestor, selector)) {\n parents.push(ancestor)\n }\n\n ancestor = ancestor.parentNode\n }\n\n return parents\n },\n\n prev(element, selector) {\n let previous = element.previousElementSibling\n\n while (previous) {\n if (previous.matches(selector)) {\n return [previous]\n }\n\n previous = previous.previousElementSibling\n }\n\n return []\n },\n\n next(element, selector) {\n let next = element.nextElementSibling\n\n while (next) {\n if (this.matches(next, selector)) {\n return [next]\n }\n\n next = next.nextElementSibling\n }\n\n return []\n }\n}\n\nexport default SelectorEngine\n"],"names":["NODE_TEXT","SelectorEngine","matches","element","selector","find","document","documentElement","concat","findFn","call","findOne","children","filter","child","parents","ancestor","parentNode","nodeType","Node","ELEMENT_NODE","push","prev","previous","previousElementSibling","next","nextElementSibling"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;;EAEA,IAAMA,SAAS,GAAG,CAAlB;MAEMC,cAAc,GAAG;EACrBC,EAAAA,OADqB,mBACbC,OADa,EACJC,QADI,EACM;EACzB,WAAOD,OAAO,CAACD,OAAR,CAAgBE,QAAhB,CAAP;EACD,GAHoB;EAKrBC,EAAAA,IALqB,gBAKhBD,QALgB,EAKND,OALM,EAK8B;EAAA;;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACjD,WAAO,YAAGC,MAAH,aAAaC,gBAAM,CAACC,IAAP,CAAYP,OAAZ,EAAqBC,QAArB,CAAb,CAAP;EACD,GAPoB;EASrBO,EAAAA,OATqB,mBASbP,QATa,EASHD,OATG,EASiC;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACpD,WAAOI,mBAAO,CAACD,IAAR,CAAaP,OAAb,EAAsBC,QAAtB,CAAP;EACD,GAXoB;EAarBQ,EAAAA,QAbqB,oBAaZT,OAbY,EAaHC,QAbG,EAaO;EAAA;;EAC1B,QAAMQ,QAAQ,GAAG,aAAGJ,MAAH,cAAaL,OAAO,CAACS,QAArB,CAAjB;;EAEA,WAAOA,QAAQ,CAACC,MAAT,CAAgB,UAAAC,KAAK;EAAA,aAAIA,KAAK,CAACZ,OAAN,CAAcE,QAAd,CAAJ;EAAA,KAArB,CAAP;EACD,GAjBoB;EAmBrBW,EAAAA,OAnBqB,mBAmBbZ,OAnBa,EAmBJC,QAnBI,EAmBM;EACzB,QAAMW,OAAO,GAAG,EAAhB;EAEA,QAAIC,QAAQ,GAAGb,OAAO,CAACc,UAAvB;;EAEA,WAAOD,QAAQ,IAAIA,QAAQ,CAACE,QAAT,KAAsBC,IAAI,CAACC,YAAvC,IAAuDJ,QAAQ,CAACE,QAAT,KAAsBlB,SAApF,EAA+F;EAC7F,UAAI,KAAKE,OAAL,CAAac,QAAb,EAAuBZ,QAAvB,CAAJ,EAAsC;EACpCW,QAAAA,OAAO,CAACM,IAAR,CAAaL,QAAb;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,UAApB;EACD;;EAED,WAAOF,OAAP;EACD,GAjCoB;EAmCrBO,EAAAA,IAnCqB,gBAmChBnB,OAnCgB,EAmCPC,QAnCO,EAmCG;EACtB,QAAImB,QAAQ,GAAGpB,OAAO,CAACqB,sBAAvB;;EAEA,WAAOD,QAAP,EAAiB;EACf,UAAIA,QAAQ,CAACrB,OAAT,CAAiBE,QAAjB,CAAJ,EAAgC;EAC9B,eAAO,CAACmB,QAAD,CAAP;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,sBAApB;EACD;;EAED,WAAO,EAAP;EACD,GA/CoB;EAiDrBC,EAAAA,IAjDqB,gBAiDhBtB,OAjDgB,EAiDPC,QAjDO,EAiDG;EACtB,QAAIqB,IAAI,GAAGtB,OAAO,CAACuB,kBAAnB;;EAEA,WAAOD,IAAP,EAAa;EACX,UAAI,KAAKvB,OAAL,CAAauB,IAAb,EAAmBrB,QAAnB,CAAJ,EAAkC;EAChC,eAAO,CAACqB,IAAD,CAAP;EACD;;EAEDA,MAAAA,IAAI,GAAGA,IAAI,CAACC,kBAAZ;EACD;;EAED,WAAO,EAAP;EACD;EA7DoB;;;;;;;;"}
|
||||
Vendored
+8
-4
@@ -258,8 +258,10 @@
|
||||
|
||||
this._element.setAttribute('aria-expanded', true);
|
||||
|
||||
Manipulator__default['default'].toggleClass(this._menu, CLASS_NAME_SHOW);
|
||||
Manipulator__default['default'].toggleClass(this._element, CLASS_NAME_SHOW);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW);
|
||||
|
||||
EventHandler__default['default'].trigger(parent, EVENT_SHOWN, relatedTarget);
|
||||
};
|
||||
|
||||
@@ -282,8 +284,10 @@
|
||||
this._popper.destroy();
|
||||
}
|
||||
|
||||
Manipulator__default['default'].toggleClass(this._menu, CLASS_NAME_SHOW);
|
||||
Manipulator__default['default'].toggleClass(this._element, CLASS_NAME_SHOW);
|
||||
this._menu.classList.toggle(CLASS_NAME_SHOW);
|
||||
|
||||
this._element.classList.toggle(CLASS_NAME_SHOW);
|
||||
|
||||
EventHandler__default['default'].trigger(parent, EVENT_HIDDEN, relatedTarget);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -5,5 +5,6 @@
|
||||
@import "forms/form-check";
|
||||
@import "forms/form-file";
|
||||
@import "forms/form-range";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
@import "forms/validation";
|
||||
|
||||
@@ -648,7 +648,7 @@ $input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
$input-disabled-border-color: null !default;
|
||||
|
||||
$input-color: $gray-700 !default;
|
||||
$input-color: $body-color !default;
|
||||
$input-border-color: $gray-400 !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-box-shadow: $box-shadow-inset !default;
|
||||
@@ -733,7 +733,6 @@ $input-group-addon-color: $input-color !default;
|
||||
$input-group-addon-bg: $gray-200 !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
|
||||
$form-select-padding-y: $input-padding-y !default;
|
||||
$form-select-padding-x: $input-padding-x !default;
|
||||
$form-select-font-family: $input-font-family !default;
|
||||
@@ -824,6 +823,14 @@ $form-file-padding-x-lg: $input-padding-x-lg !default;
|
||||
$form-file-font-size-lg: $input-font-size-lg !default;
|
||||
$form-file-height-lg: $input-height-lg !default;
|
||||
|
||||
$form-floating-height: add(3.5rem, $input-height-border) !default;
|
||||
$form-floating-padding-x: $input-padding-x !default;
|
||||
$form-floating-padding-y: 1rem !default;
|
||||
$form-floating-input-padding-t: 1.625rem !default;
|
||||
$form-floating-input-padding-b: .625rem !default;
|
||||
$form-floating-label-opacity: .65 !default;
|
||||
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
|
||||
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
|
||||
|
||||
// Form validation
|
||||
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
// stylelint-disable selector-no-vendor-prefix
|
||||
|
||||
.form-floating {
|
||||
position: relative;
|
||||
|
||||
> .form-control,
|
||||
> .form-select {
|
||||
height: $form-floating-height;
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
}
|
||||
|
||||
> label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; // allow textareas
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
pointer-events: none;
|
||||
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
||||
transform-origin: 0 0;
|
||||
@include transition($form-floating-transition);
|
||||
}
|
||||
|
||||
// stylelint-disable no-duplicate-selectors
|
||||
> .form-control {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:not(:placeholder-shown) {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
&:-webkit-autofill {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
}
|
||||
|
||||
> .form-select {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
|
||||
> .form-control:focus,
|
||||
> .form-control:not(:placeholder-shown),
|
||||
> .form-select {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
}
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
> .form-control:-webkit-autofill {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
}
|
||||
}
|
||||
// stylelint-enable no-duplicate-selectors
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Fallback for classic Edge
|
||||
//
|
||||
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.form-floating {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.form-floating > label {
|
||||
position: static;
|
||||
padding: 0;
|
||||
margin-bottom: calc(#{$form-floating-padding-y} / 2); // stylelint-disable-line function-disallowed-list
|
||||
border: 0;
|
||||
@include transition(none);
|
||||
}
|
||||
.form-floating > .form-control::-ms-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
.form-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $form-select-height;
|
||||
min-height: $form-select-height;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-label-group {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-label-group input,
|
||||
.form-label-group label {
|
||||
height: 3.125rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.form-label-group label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #495057;
|
||||
pointer-events: none;
|
||||
cursor: text; /* Match the input under the label */
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
|
||||
.form-label-group input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:-moz-placeholder-shown) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:-moz-placeholder-shown) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Fallback for Edge
|
||||
-------------------------------------------------- */
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.form-label-group {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.form-label-group label {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
---
|
||||
layout: examples
|
||||
title: Floating labels example
|
||||
extra_css:
|
||||
- "floating-labels.css"
|
||||
include_js: false
|
||||
---
|
||||
|
||||
<main class="form-signin">
|
||||
<form>
|
||||
<div class="text-center mb-4">
|
||||
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputEmail">Email address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<label for="inputPassword">Password</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted text-center">© 2017-{{< year >}}</p>
|
||||
</form>
|
||||
</main>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Floating labels
|
||||
description: Create beautifully simple form labels that float over your input fields.
|
||||
group: forms
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap's textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).
|
||||
|
||||
This approach works in the new Microsoft Edge built on Chromium and gracefully degrades on older versions.
|
||||
|
||||
{{< example >}}
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
When there's a `value` already defined, `<label>`s will automatically adjust to their floated position.
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-floating">
|
||||
<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
|
||||
<label for="floatingInputValue">Input with value</label>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
Form validation styles also work as expected.
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-floating">
|
||||
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
|
||||
<label for="floatingInputInvalid">Invalid input</label>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
## Textareas
|
||||
|
||||
By default, `<textarea>`s with `.form-control` will be the same height as `<input>`s.
|
||||
|
||||
{{< example >}}
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
|
||||
<label for="floatingTextarea">Comments</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
To set a custom height on your `<textarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
|
||||
|
||||
{{< example >}}
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
|
||||
<label for="floatingTextarea2">Comments</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Selects
|
||||
|
||||
Other than `.form-control`, floating labels only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state.
|
||||
|
||||
{{< example >}}
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelect">Works with selects</label>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Layout
|
||||
|
||||
When working with the Bootstrap grid system, be sure to place form elements within column classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="row g-2">
|
||||
<div class="col-md">
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
|
||||
<label for="floatingInputGrid">Email address</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectGrid">Works with selects</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@@ -18,6 +18,8 @@ sections:
|
||||
description: Replace browser default range inputs with our custom version.
|
||||
- title: Input group
|
||||
description: Attach labels and buttons to your inputs for increased semantic value.
|
||||
- title: Floating labels
|
||||
description: Create beautifully simple form labels that float over your input fields.
|
||||
- title: Layout
|
||||
description: Create inline, horizontal, or complex grid-based layouts with your forms.
|
||||
- title: Validation
|
||||
|
||||
@@ -24,6 +24,7 @@ toc: true
|
||||
### Forms
|
||||
|
||||
- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
|
||||
- Promoted the Floating labels example to fully supported form component. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
|
||||
|
||||
### Utilities
|
||||
|
||||
|
||||
@@ -47,8 +47,6 @@
|
||||
- category: Experiments
|
||||
description: "Examples that focus on future-friendly features or techniques."
|
||||
examples:
|
||||
- name: Floating labels
|
||||
description: "Beautifully simple forms with floating labels over your inputs."
|
||||
- name: Offcanvas
|
||||
description: "Turn your expandable navbar into a sliding offcanvas menu."
|
||||
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
- title: File
|
||||
- title: Range
|
||||
- title: Input group
|
||||
- title: Floating labels
|
||||
- title: Layout
|
||||
- title: Validation
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user